@angular/cdk/overlay#FlexibleConnectedPositionStrategy TypeScript Examples

The following examples show how to use @angular/cdk/overlay#FlexibleConnectedPositionStrategy. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: tutorial-trigger.directive.ts    From bdc-walkthrough with MIT License 6 votes vote down vote up 
private __setPosition(positionStrategy: FlexibleConnectedPositionStrategy) {
    // override position strategy to support open to the sides
    let [originX, originFallbackX]: HorizontalConnectionPos[] =
      this.menu.xPosition === 'before' ? ['end', 'start'] : ['start', 'end'];

    const [overlayY, overlayFallbackY]: VerticalConnectionPos[] =
      this.menu.yPosition === 'above' ? ['bottom', 'top'] : ['top', 'bottom'];

    let [originY, originFallbackY] = [overlayY, overlayFallbackY];
    let [overlayX, overlayFallbackX] = [originX, originFallbackX];

    // align popup's arrow to center of attached element if element size < 70
    const offsetX = this.popup.offsetX || ((this.popup.alignCenter || (this.__elementRef.nativeElement.offsetWidth < 130 && this.popup.alignCenter === undefined)) && !this.popup.horizontal ? (this.__elementRef.nativeElement.offsetWidth / -2 + 29) * (this.menu.xPosition === 'before' ? 1 : -1) : 0);
    const offsetY = this.popup.offsetY || ((this.popup.alignCenter || (this.__elementRef.nativeElement.offsetHeight < 80 && this.popup.alignCenter === undefined)) && this.popup.horizontal ? (this.__elementRef.nativeElement.offsetHeight / 2 - 29) * (this.menu.yPosition === 'below' ? 1 : -1) : 0);

    if (this.popup.horizontal) {
      // When the menu is a sub-menu, it should always align itself
      // to the edges of the trigger, instead of overlapping it.
      overlayFallbackX = originX = this.menu.xPosition === 'before' ? 'start' : 'end';
      originFallbackX = overlayX = originX === 'end' ? 'start' : 'end';
    } else if (!this.menu.overlapTrigger) {
      originY = overlayY === 'top' ? 'bottom' : 'top';
      originFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';
    }

    const original = {originX, originY, overlayX, overlayY, offsetX, offsetY};
    const flipX = {originX: originFallbackX, originY, overlayX: overlayFallbackX, overlayY, offsetX: -offsetX, offsetY};
    const flipY = {originX, originY: originFallbackY, overlayX, overlayY: overlayFallbackY, offsetX, offsetY: -offsetY};
    const flipXY = {originX: originFallbackX, originY: originFallbackY, overlayX: overlayFallbackX, overlayY: overlayFallbackY, offsetX: -offsetX, offsetY: -offsetY}

    positionStrategy.withPositions(this.popup.horizontal ? [original, flipX] : [original, flipY, flipXY]);
  }
Example #2
Source File: rich-tooltip.service.ts    From colo-calc with Do What The F*ck You Want To Public License 6 votes vote down vote up 
public showTooltip(character: Character, summon: Character, pos: FlexibleConnectedPositionStrategy) {
    if (character) {
      this.overlayRef.detach();
      this.overlayRef.updatePositionStrategy(pos);
      const inst = this.overlayRef.attach(this.view).instance;
      inst.character = character;
      inst.summon = summon;
      inst.useJPArt = this.characterService.useJPArt;
      inst.init();
    }
  }
Example #3
Source File: rich-tooltip.directive.ts    From colo-calc with Do What The F*ck You Want To Public License 5 votes vote down vote up 
private readonly pos: FlexibleConnectedPositionStrategy;