popover.js

  1. import { queryOne } from '@ecl/dom-utils';
  3. /**
  4.  * @param {HTMLElement} element DOM element for component instantiation and scope
  5.  * @param {Object} options
  6.  * @param {String} options.toggleSelector Selector for toggling element
  7.  * @param {Boolean} options.attachClickListener Whether or not to bind click events on toggle
  8.  * @param {Boolean} options.attachKeyListener Whether or not to bind keyboard events
  9.  */
  10. export class Popover {
  11.   /**
  12.    * @static
  13.    * Shorthand for instance creation and initialisation.
  14.    *
  15.    * @param {HTMLElement} root DOM element for component instantiation and scope
  16.    *
  17.    * @return {Popover} An instance of Popover.
  18.    */
  19.   static autoInit(root, { POPOVER: defaultOptions = {} } = {}) {
  20.     const popover = new Popover(root, defaultOptions);
  21.     popover.init();
  22.     root.ECLPopover = popover;
  23.     return popover;
  24.   }
  26.   constructor(
  27.     element,
  28.     {
  29.       toggleSelector = '[data-ecl-popover-toggle]',
  30.       closeSelector = '[data-ecl-popover-close]',
  31.       attachClickListener = true,
  32.       attachKeyListener = true,
  33.     } = {},
  34.   ) {
  35.     // Check element
  36.     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
  37.       throw new TypeError(
  38.         'DOM element should be given to initialize this widget.',
  39.       );
  40.     }
  42.     this.element = element;
  44.     // Options
  45.     this.toggleSelector = toggleSelector;
  46.     this.closeSelector = closeSelector;
  47.     this.attachClickListener = attachClickListener;
  48.     this.attachKeyListener = attachKeyListener;
  50.     // Private variables
  51.     this.toggle = null;
  52.     this.close = null;
  53.     this.target = null;
  54.     this.container = null;
  55.     this.resizeTimer = null;
  57.     // Bind `this` for use in callbacks
  58.     this.openPopover = this.openPopover.bind(this);
  59.     this.closePopover = this.closePopover.bind(this);
  60.     this.positionPopover = this.positionPopover.bind(this);
  61.     this.handleClickOnToggle = this.handleClickOnToggle.bind(this);
  62.     this.handleKeyboardGlobal = this.handleKeyboardGlobal.bind(this);
  63.     this.handleClickGlobal = this.handleClickGlobal.bind(this);
  64.     this.checkPosition = this.checkPosition.bind(this);
  65.     this.resetStyles = this.resetStyles.bind(this);
  67.     this.POPOVER_CLASSES = {
  68.       TOP: 'ecl-popover--top',
  69.       BOTTOM: 'ecl-popover--bottom',
  70.       LEFT: 'ecl-popover--left',
  71.       RIGHT: 'ecl-popover--right',
  72.       PUSH_TOP: 'ecl-popover--push-top',
  73.       PUSH_BOTTOM: 'ecl-popover--push-bottom',
  74.       PUSH_LEFT: 'ecl-popover--push-left',
  75.       PUSH_RIGHT: 'ecl-popover--push-right',
  76.     };
  77.   }
  79.   /**
  80.    * Initialise component.
  81.    */
  82.   init() {
  83.     if (!ECL) {
  84.       throw new TypeError('Called init but ECL is not present');
  85.     }
  86.     ECL.components = ECL.components || new Map();
  88.     this.toggle = queryOne(this.toggleSelector, this.element);
  89.     this.close = queryOne(this.closeSelector, this.element);
  90.     this.container = queryOne('.ecl-popover__container', this.element);
  91.     // Bind global events
  92.     if (this.attachKeyListener) {
  93.       document.addEventListener('keyup', this.handleKeyboardGlobal);
  94.     }
  95.     if (this.attachClickListener) {
  96.       document.addEventListener('click', this.handleClickGlobal);
  97.       if (this.close) {
  98.         this.close.addEventListener('click', this.handleClickOnToggle);
  99.       }
  100.     }
  102.     // Get target element
  103.     this.target = document.querySelector(
  104.       `#${this.toggle.getAttribute('aria-controls')}`,
  105.     );
  107.     // Exit if no target found
  108.     if (!this.target) {
  109.       throw new TypeError(
  110.         'Target has to be provided for popover (aria-controls)',
  111.       );
  112.     }
  114.     window.addEventListener('resize', this.checkPosition);
  115.     document.addEventListener('scroll', this.checkPosition);
  117.     // Bind click event on toggle
  118.     if (this.attachClickListener && this.toggle) {
  119.       this.toggle.addEventListener('click', this.handleClickOnToggle);
  120.     }
  122.     // Set ecl initialized attribute
  123.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  124.     ECL.components.set(this.element, this);
  125.   }
  127.   /**
  128.    * Destroy component.
  129.    */
  130.   destroy() {
  131.     if (this.attachClickListener && this.toggle) {
  132.       this.toggle.removeEventListener('click', this.handleClickOnToggle);
  133.     }
  134.     if (this.attachClickListener && this.close) {
  135.       this.close.removeEventListener('click', this.handleClickOnToggle);
  136.     }
  137.     window.removeEventListener('resize', this.checkPosition);
  138.     document.removeEventListener('scroll', this.checkPosition);
  140.     if (this.attachKeyListener) {
  141.       document.removeEventListener('keyup', this.handleKeyboardGlobal);
  142.     }
  143.     if (this.attachClickListener) {
  144.       document.removeEventListener('click', this.handleClickGlobal);
  145.     }
  147.     if (this.toggle.getAttribute('aria-expanded') === 'true') {
  148.       this.closePopover();
  149.     }
  151.     if (this.element) {
  152.       this.element.removeAttribute('data-ecl-auto-initialized');
  153.       ECL.components.delete(this.element);
  154.     }
  155.   }
  157.   /**
  158.    * Toggles between collapsed/expanded states.
  159.    *
  160.    * @param {Event} e
  161.    */
  162.   handleClickOnToggle(e) {
  163.     e.preventDefault();
  165.     // Get current status
  166.     const isExpanded = this.toggle.getAttribute('aria-expanded') === 'true';
  168.     // Toggle the popover
  169.     if (isExpanded) {
  170.       this.closePopover();
  171.       return;
  172.     }
  174.     this.openPopover();
  175.     this.positionPopover();
  176.   }
  178.   /**
  179.    * Open the popover.
  180.    */
  181.   openPopover() {
  182.     this.toggle.setAttribute('aria-expanded', 'true');
  183.     this.target.hidden = false;
  184.   }
  186.   /**
  187.    * Close the popover.
  188.    */
  189.   closePopover() {
  190.     this.toggle.setAttribute('aria-expanded', 'false');
  191.     // Reset all the selectors and styles
  192.     this.resetStyles();
  193.     this.target.hidden = true;
  194.   }
  196.   /**
  197.    * Resets the popover selectors and styles.
  198.    */
  199.   resetStyles() {
  200.     Object.keys(this.POPOVER_CLASSES).forEach((className) => {
  201.       if (
  202.         Object.prototype.hasOwnProperty.call(this.POPOVER_CLASSES, className)
  203.       ) {
  204.         this.element.classList.remove(this.POPOVER_CLASSES[className]);
  205.       }
  206.     });
  208.     this.target.style.setProperty('--ecl-popover-position', '');
  209.     this.container.style.left = '';
  210.     this.container.style.right = '';
  211.     this.container.style.top = '';
  212.     this.container.style.bottom = '';
  213.     this.container.style.transform = '';
  214.     this.target.firstElementChild.width = '';
  215.   }
  217.   /**
  218.    * Manage popover position.
  219.    */
  220.   positionPopover() {
  221.     this.resetStyles();
  223.     const toggleRect = this.toggle.getBoundingClientRect();
  224.     const screenHeight = window.innerHeight;
  225.     const screenWidth = window.innerWidth;
  227.     // Calculate available space in each direction
  228.     const spaceTop = toggleRect.top;
  229.     const spaceBottom = screenHeight - toggleRect.bottom;
  230.     const spaceLeft = toggleRect.left;
  231.     const spaceRight = screenWidth - toggleRect.right;
  233.     // Find the direction with the most available space
  234.     const positioningClass = 'ecl-popover--';
  235.     let direction = '';
  237.     if (
  238.       spaceTop > spaceBottom &&
  239.       spaceTop > spaceLeft &&
  240.       spaceTop > spaceRight
  241.     ) {
  242.       direction = 'top';
  243.     } else if (spaceBottom > spaceLeft && spaceBottom > spaceRight) {
  244.       direction = 'bottom';
  245.     } else if (spaceLeft > spaceRight) {
  246.       direction = 'left';
  247.     } else {
  248.       direction = 'right';
  249.     }
  251.     this.element.classList.add(`${positioningClass}${direction}`);
  252.     this.handlePushClass(screenWidth, screenHeight, direction);
  254.     // Try to use as much of the available width, respecting the max-width set.
  255.     const scrollable = this.target.firstElementChild;
  256.     const styles = window.getComputedStyle(scrollable);
  257.     const maxWidth = parseInt(styles.getPropertyValue('max-width'), 10);
  258.     const minWidth = parseInt(styles.getPropertyValue('min-width'), 10);
  259.     const padding = parseInt(styles.getPropertyValue('padding-left'), 10) * 2;
  261.     let availableSpace = '';
  262.     if (direction === 'left' || direction === 'right') {
  263.       availableSpace = (direction === 'left' ? spaceLeft : spaceRight) * 0.9;
  264.     } else {
  265.       const centerPosition =
  266.         (this.toggle.getBoundingClientRect().right -
  267.           this.toggle.getBoundingClientRect().left) /
  268.         2;
  269.       availableSpace =
  270.         (screenWidth - centerPosition + this.target.offsetWidth / 2) * 0.9;
  271.     }
  272.     if (maxWidth + padding < availableSpace) {
  273.       scrollable.style.width = `${maxWidth}px`;
  274.     } else if (availableSpace < minWidth + padding) {
  275.       scrollable.style.width = `${minWidth}px`;
  276.     } else {
  277.       scrollable.style.width = `${availableSpace - padding}px`;
  278.     }
  279.   }
  281.   handlePushClass(screenWidth, screenHeight, direction) {
  282.     const toggleRect = this.toggle.getBoundingClientRect();
  283.     const popoverRect = this.target.getBoundingClientRect();
  285.     if (direction === 'left' || direction === 'right') {
  286.       if (popoverRect.top < 0) {
  287.         this.element.classList.add(this.POPOVER_CLASSES.PUSH_TOP);
  288.         this.container.style.top = `-${Math.round(toggleRect.top)}px`;
  289.         this.container.style.bottom = '';
  290.         this.container.style.transform = '';
  291.       } else if (popoverRect.bottom > screenHeight) {
  292.         this.element.classList.add(this.POPOVER_CLASSES.PUSH_BOTTOM);
  293.         // We add 0.5rem to the calculus to avoid vertical scrollbars.
  294.         this.container.style.bottom = `-${Math.round(
  295.           screenHeight - (toggleRect.bottom + 8),
  296.         )}px`;
  297.         this.container.style.top = '';
  298.         this.container.style.transform = '';
  299.       }
  300.     } else {
  301.       if (popoverRect.left < 0) {
  302.         this.element.classList.add(this.POPOVER_CLASSES.PUSH_LEFT);
  303.         this.container.style.left = `-${toggleRect.left}px`;
  304.         this.container.style.right = 'auto';
  305.         this.container.style.transform = 'none';
  306.       }
  307.       if (popoverRect.right > screenWidth) {
  308.         this.element.classList.add(this.POPOVER_CLASSES.PUSH_RIGHT);
  309.         this.container.style.right = `-${screenWidth - toggleRect.right}px`;
  310.         this.container.style.left = 'auto';
  311.         this.container.style.transform = 'none';
  312.       }
  313.     }
  315.     this.handleArrowPosition(direction);
  316.   }
  318.   handleArrowPosition(direction) {
  319.     const toggleRect = this.toggle.getBoundingClientRect();
  320.     const popoverRect = this.target.getBoundingClientRect();
  322.     if (direction === 'left' || direction === 'right') {
  323.       if (this.element.classList.contains(this.POPOVER_CLASSES.PUSH_BOTTOM)) {
  324.         this.target.style.setProperty(
  325.           '--ecl-popover-position',
  326.           `${Math.round(
  327.             toggleRect.top - popoverRect.top + toggleRect.height / 2,
  328.           )}px`,
  329.         );
  330.       } else if (
  331.         this.element.classList.contains(this.POPOVER_CLASSES.PUSH_TOP)
  332.       ) {
  333.         this.target.style.setProperty(
  334.           '--ecl-popover-position',
  335.           `${Math.round(
  336.             popoverRect.top + toggleRect.top + toggleRect.height / 2,
  337.           )}px`,
  338.         );
  339.       }
  340.     } else {
  341.       // eslint-disable-next-line no-lonely-if
  342.       if (this.element.classList.contains(this.POPOVER_CLASSES.PUSH_RIGHT)) {
  343.         this.target.style.setProperty(
  344.           '--ecl-popover-position',
  345.           `${Math.round(
  346.             popoverRect.right - (toggleRect.right - toggleRect.width / 2),
  347.           )}px`,
  348.         );
  349.       } else if (
  350.         this.element.classList.contains(this.POPOVER_CLASSES.PUSH_LEFT)
  351.       ) {
  352.         this.target.style.setProperty(
  353.           '--ecl-popover-position',
  354.           `${Math.round(
  355.             popoverRect.left + toggleRect.left + toggleRect.width / 2,
  356.           )}px`,
  357.         );
  358.       }
  359.     }
  360.   }
  362.   /**
  363.    * Trigger events on resize
  364.    * Uses a debounce, for performance
  365.    */
  366.   checkPosition() {
  367.     clearTimeout(this.resizeTimer);
  368.     this.resizeTimer = setTimeout(() => {
  369.       if (this.toggle.getAttribute('aria-expanded') === 'true') {
  370.         this.positionPopover();
  371.       }
  372.     }, 200);
  373.   }
  375.   /**
  376.    * Handles global keyboard events, triggered outside of the popover.
  377.    *
  378.    * @param {Event} e
  379.    */
  380.   handleKeyboardGlobal(e) {
  381.     if (!this.target) return;
  383.     // Detect press on Escape
  384.     if (e.key === 'Escape' || e.key === 'Esc') {
  385.       this.closePopover();
  386.     }
  387.   }
  389.   /**
  390.    * Handles global click events, triggered outside of the popover.
  391.    *
  392.    * @param {Event} e
  393.    */
  394.   handleClickGlobal(e) {
  395.     if (!this.target) return;
  397.     // Check if the popover is open
  398.     if (this.toggle.getAttribute('aria-expanded') === 'true') {
  399.       // Check if the click occured on the popover
  400.       if (!this.target.contains(e.target) && !this.toggle.contains(e.target)) {
  401.         this.closePopover();
  402.       }
  403.     }
  404.   }
  405. }
  407. export default Popover;