feature(DockedDisplayPlugin) implemented docked display plugin

sass/components/_global.scss

@@ -519,3 +519,12 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5
     }
   }
 }
+
+// Docked display
+.display-docked {
+  position: absolute;
+  opacity: 0;
+  z-index: 9999;
+  visibility: hidden;
+}
+

src/plugin/dockedDisplayPlugin.ts

@@ -0,0 +1,94 @@
+import { Utils } from '../utils';
+
+export interface DockedDisplayPluginOptions {
+  /**
+   * Margin between element and docked container
+   */
+  margin: number,
+  /**
+   * Transition movement
+   */
+  transition: number,
+  /**
+   * Transition duration
+   */
+  duration: number,
+  /**
+   * The alignment of the docked container
+   */
+  align: string
+}
+
+const _defaults: DockedDisplayPluginOptions = {
+  margin: 5,
+  transition: 10,
+  duration: 250,
+  align: 'left'
+}
+
+export class DockedDisplayPlugin {
+  private readonly el: HTMLElement;
+  private readonly container: HTMLDivElement;
+  private options: Partial<DockedDisplayPluginOptions>;
+  private visible: boolean;
+
+  constructor(el: HTMLElement, container: HTMLElement, options: Partial<DockedDisplayPluginOptions>) {
+    this.el = el;
+    this.options = {
+      ..._defaults,
+      ...options
+    };
+
+    this.container = document.createElement('div');
+    this.container.classList.add('display-docked');
+    this.container.append(container);
+    el.parentElement.append(this.container);
+
+    document.addEventListener('click', (e) => {
+      if (this.visible && !(this.el === <HTMLElement>e.target) && !((<HTMLElement>e.target).closest('.display-docked'))) {
+        this.hide();
+      }
+    });
+  }
+
+  /**
+   * Initializes instance of DockedDisplayPlugin
+   * @param el HTMLElement to position to
+   * @param container HTMLElement to be positioned
+   * @param options Plugin options
+   */
+  static init(el: HTMLElement, container: HTMLElement, options?: Partial<DockedDisplayPluginOptions>): DockedDisplayPlugin {
+    return new DockedDisplayPlugin(el, container, options);
+  }
+
+  show = () => {
+    if (this.visible) return;
+    this.visible = true;
+    const coordinates = Utils._setAbsolutePosition(this.el, this.container, 'bottom', this.options.margin, this.options.transition, this.options.align);
+
+    // @todo move to Util? -> duplicate code fragment with tooltip
+    // easeOutCubic
+    this.container.style.visibility = 'visible';
+    this.container.style.transition = `
+      transform ${this.options.duration}ms ease-out,
+      opacity ${this.options.duration}ms ease-out`;
+    setTimeout(() => {
+      this.container.style.transform = `translateX(${coordinates.x}px) translateY(${coordinates.y}px)`;
+      this.container.style.opacity = (1).toString();
+    }, 1);
+  };
+
+  hide = () => {
+    if (!this.visible) return;
+    this.visible = false;
+    // @todo move to Util? -> duplicate code fragment with tooltip
+    this.container.removeAttribute('style');
+    this.container.style.transition = `
+      transform ${this.options.duration}ms ease-out,
+      opacity ${this.options.duration}ms ease-out`;
+    setTimeout(() => {
+      this.container.style.transform = `translateX(0px) translateY(0px)`;
+      this.container.style.opacity = '0';
+    }, 1);
+  };
+}

src/utils.ts

@@ -325,4 +325,106 @@ export class Utils {
     });
     container.append(button);
   }
+
+  static _setAbsolutePosition(
+    origin: HTMLElement,
+    container: HTMLElement,
+    position: string,
+    margin: number,
+    transitionMovement: number,
+    align: string = 'center'
+  ) {
+    const originHeight = origin.offsetHeight,
+      originWidth = origin.offsetWidth,
+      containerHeight = container.offsetHeight,
+      containerWidth = container.offsetWidth;
+    let xMovement = 0,
+      yMovement = 0,
+      targetTop = origin.getBoundingClientRect().top + Utils.getDocumentScrollTop(),
+      targetLeft = origin.getBoundingClientRect().left + Utils.getDocumentScrollLeft();
+
+    if (position === 'top') {
+      targetTop += -containerHeight - margin;
+      if (align === 'center') {
+        targetLeft += originWidth / 2 - containerWidth / 2; // This is center align
+      }
+      yMovement = -transitionMovement;
+    } else if (position === 'right') {
+      targetTop += originHeight / 2 - containerHeight / 2;
+      targetLeft = originWidth + margin;
+      xMovement = transitionMovement;
+    } else if (position === 'left') {
+      targetTop += originHeight / 2 - containerHeight / 2;
+      targetLeft = -containerWidth - margin;
+      xMovement = -transitionMovement;
+    } else {
+      targetTop += originHeight + margin;
+      if (align === 'center') {
+        targetLeft += originWidth / 2 - containerWidth / 2; // This is center align
+      }
+      yMovement = transitionMovement;
+    }
+    if (align === 'right') {
+      targetLeft += originWidth - containerWidth - margin;
+    }
+
+    const newCoordinates = Utils._repositionWithinScreen(
+      targetLeft,
+      targetTop,
+      containerWidth,
+      containerHeight,
+      margin,
+      transitionMovement,
+      align
+    );
+
+    container.style.top = newCoordinates.y + 'px';
+    container.style.left = newCoordinates.x + 'px';
+
+    return {x: xMovement, y: yMovement};
+  }
+
+  static _repositionWithinScreen(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    margin: number,
+    transitionMovement: number,
+    align: string
+  ) {
+    const scrollLeft = Utils.getDocumentScrollLeft();
+    const scrollTop = Utils.getDocumentScrollTop();
+    let newX = x - scrollLeft;
+    let newY = y - scrollTop;
+
+    const bounding: Bounding = {
+      left: newX,
+      top: newY,
+      width: width,
+      height: height
+    };
+    let offset: number;
+    if (align === 'left' || align == 'center') {
+      offset = margin + transitionMovement;
+    } else if (align === 'right') {
+      offset = margin - transitionMovement;
+    }
+    const edges = Utils.checkWithinContainer(document.body, bounding, offset);
+
+    if (edges.left) {
+      newX = offset;
+    } else if (edges.right) {
+      newX -= newX + width - window.innerWidth;
+    }
+    if (edges.top) {
+      newY = offset;
+    } else if (edges.bottom) {
+      newY -= newY + height - window.innerHeight;
+    }
+    return {
+      x: newX + scrollLeft,
+      y: newY + scrollTop
+    };
+  }
 }