src/core/element.js

import {
  ANIMATION_DURATION_MS,
  CLASS_DRIVER_HIGHLIGHTED_ELEMENT,
  CLASS_FIX_STACKING_CONTEXT,
  CLASS_POSITION_RELATIVE,
} from '../common/constants';
import { getStyleProperty } from '../common/utils';
import Position from './position';

/**
 * Wrapper around DOMElements to enrich them
 * with the functionality necessary
 */
export default class Element {
  /**
   * DOM element object
   * @param {Node|HTMLElement} node
   * @param {Object} options
   * @param {Popover} popover
   * @param {Stage} stage
   * @param {Overlay} overlay
   * @param {Window} window
   * @param {Document} document
   */
  constructor({
    node,
    options,
    popover,
    stage,
    overlay,
    window,
    document,
  } = {}) {
    this.node = node;
    this.document = document;
    this.window = window;
    this.options = options;
    this.overlay = overlay;
    this.popover = popover;
    this.stage = stage;
    this.animationTimeout = null;
  }

  /**
   * Checks if the current element is visible in viewport
   * @returns {boolean}
   * @public
   */
  isInView() {
    let top = this.node.offsetTop;
    let left = this.node.offsetLeft;
    const width = this.node.offsetWidth;
    const height = this.node.offsetHeight;

    let el = this.node;

    while (el.offsetParent) {
      el = el.offsetParent;
      top += el.offsetTop;
      left += el.offsetLeft;
    }

    return (
      top >= this.window.pageYOffset
      && left >= this.window.pageXOffset
      && (top + height) <= (this.window.pageYOffset + this.window.innerHeight)
      && (left + width) <= (this.window.pageXOffset + this.window.innerWidth)
    );
  }

  /**
   * Manually scrolls to the position of element if `scrollIntoView` fails
   * @private
   */
  scrollManually() {
    const elementRect = this.node.getBoundingClientRect();
    const absoluteElementTop = elementRect.top + this.window.pageYOffset;
    const middle = absoluteElementTop - (this.window.innerHeight / 2);

    this.window.scrollTo(0, middle);
  }

  /**
   * Brings the element to middle of the view port if not in view
   * @public
   */
  bringInView() {
    // If the node is not there or already is in view
    if (!this.node || this.isInView()) {
      return;
    }

    // If browser does not support scrollIntoView
    if (!this.node.scrollIntoView) {
      this.scrollManually();
      return;
    }

    try {
      this.node.scrollIntoView(this.options.scrollIntoViewOptions || {
        behavior: 'instant',
        block: 'center',
      });
    } catch (e) {
      // `block` option is not allowed in older versions of firefox, scroll manually
      this.scrollManually();
    }
  }

  /**
   * Gets the calculated position on screen, around which
   * we need to draw
   * @public
   * @return {Position}
   */
  getCalculatedPosition() {
    const body = this.document.body;
    const documentElement = this.document.documentElement;
    const window = this.window;

    const scrollTop = this.window.pageYOffset || documentElement.scrollTop || body.scrollTop;
    const scrollLeft = window.pageXOffset || documentElement.scrollLeft || body.scrollLeft;
    const elementRect = this.node.getBoundingClientRect();

    return new Position({
      top: elementRect.top + scrollTop,
      left: elementRect.left + scrollLeft,
      right: elementRect.left + scrollLeft + elementRect.width,
      bottom: elementRect.top + scrollTop + elementRect.height,
    });
  }

  /**
   * Gets the popover for the current element if any
   * @returns {Popover|*}
   * @public
   */
  getPopover() {
    return this.popover;
  }

  /**
   * Is called when element is about to be deselected
   * i.e. when moving the focus to next element of closing
   * @public
   */
  onDeselected(hideStage = false) {
    this.hidePopover();

    if (hideStage) {
      this.hideStage();
    }

    this.removeHighlightClasses();

    // If there was any animation in progress, cancel that
    this.window.clearTimeout(this.animationTimeout);

    if (this.options.onDeselected) {
      this.options.onDeselected(this);
    }
  }

  /**
   * Checks if the given element is same as the current element
   * @param {Element} element
   * @returns {boolean}
   * @public
   */
  isSame(element) {
    if (!element || !element.node) {
      return false;
    }

    return element.node === this.node;
  }

  /**
   * Is called when the element is about to be highlighted
   * @public
   */
  onHighlightStarted() {
    if (this.options.onHighlightStarted) {
      this.options.onHighlightStarted(this);
    }
  }

  /**
   * Is called when the element has been successfully highlighted
   * @public
   */
  onHighlighted() {
    const highlightedElement = this;
    if (!highlightedElement.isInView()) {
      highlightedElement.bringInView();
    }

    // Show the popover and stage once the item has been
    // brought in the view, this would allow us to handle
    // the cases where the container has scroll overflow
    this.showPopover();
    this.showStage();
    this.addHighlightClasses();

    if (this.options.onHighlighted) {
      this.options.onHighlighted(this);
    }
  }

  /**
   * Removes the stacking context fix classes and the highlighter classes
   * @private
   */
  removeHighlightClasses() {
    this.node.classList.remove(CLASS_DRIVER_HIGHLIGHTED_ELEMENT);
    this.node.classList.remove(CLASS_POSITION_RELATIVE);

    const stackFixes = this.document.querySelectorAll(`.${CLASS_FIX_STACKING_CONTEXT}`);
    for (let counter = 0; counter < stackFixes.length; counter++) {
      stackFixes[counter].classList.remove(CLASS_FIX_STACKING_CONTEXT);
    }
  }

  /**
   * Adds the highlight class on the current element and "fixes"
   * the parent nodes if they
   * @private
   */
  addHighlightClasses() {
    this.node.classList.add(CLASS_DRIVER_HIGHLIGHTED_ELEMENT);

    // Don't make relative if element already has some position set
    if (this.canMakeRelative()) {
      this.node.classList.add(CLASS_POSITION_RELATIVE);
    }

    // Check and re-define the stacking context
    this.fixStackingContext();
  }

  /**
   * Walks through the parents of the current element and fixes
   * the stacking context
   * @private
   */
  fixStackingContext() {
    let parentNode = this.node.parentNode;
    while (parentNode) {
      if (!parentNode.tagName || parentNode.tagName.toLowerCase() === 'body') {
        break;
      }

      const zIndex = getStyleProperty(parentNode, 'z-index');
      const opacity = parseFloat(getStyleProperty(parentNode, 'opacity'));
      const transform = getStyleProperty(parentNode, 'transform', true);
      const transformStyle = getStyleProperty(parentNode, 'transform-style', true);
      const transformBox = getStyleProperty(parentNode, 'transform-box', true);
      const filter = getStyleProperty(parentNode, 'filter', true);
      const perspective = getStyleProperty(parentNode, 'perspective', true);

      // Stacking context gets disturbed if
      // - Parent has z-index
      // - Opacity is below 0
      // - Filter/transform or perspective is applied
      if (
        /[0-9]+/.test(zIndex)
        || opacity < 1
        || (transform && transform !== 'none')
        || (transformStyle && transformStyle !== 'flat')
        || (transformBox && transformBox !== 'border-box')
        || (filter && filter !== 'none')
        || (perspective && perspective !== 'none')
      ) {
        parentNode.classList.add(CLASS_FIX_STACKING_CONTEXT);
      }

      parentNode = parentNode.parentNode;
    }
  }

  /**
   * Checks if we can make the current element relative or not
   * @return {boolean}
   * @private
   */
  canMakeRelative() {
    const currentPosition = this.getStyleProperty('position');
    const avoidPositionsList = ['absolute', 'fixed', 'relative'];

    // Because if the element has any of these positions, making it
    // relative will break the UI
    return avoidPositionsList.indexOf(currentPosition) === -1;
  }

  /**
   * Get current element's CSS attribute value
   * @param {string} property
   * @returns string
   * @private
   */
  getStyleProperty(property) {
    return getStyleProperty(this.node, property);
  }

  /**
   * Shows the stage behind the element
   * @public
   */
  showStage() {
    this.stage.show(this.getCalculatedPosition());
  }

  /**
   * Gets the DOM Element behind this element
   * @returns {Node|HTMLElement|*}
   * @public
   */
  getNode() {
    return this.node;
  }

  /**
   * Hides the stage
   * @public
   */
  hideStage() {
    this.stage.hide();
  }

  /**
   * Hides the popover if possible
   * @public
   */
  hidePopover() {
    if (!this.popover) {
      return;
    }

    this.popover.hide();
  }

  /**
   * Shows the popover on the current element
   * @public
   */
  showPopover() {
    if (!this.popover) {
      return;
    }

    const showAtPosition = this.getCalculatedPosition();

    // For first highlight, show it immediately because there won't be any animation
    let showAfterMs = ANIMATION_DURATION_MS;
    // If animation is disabled or  if it is the first display, show it immediately
    if (!this.options.animate || !this.overlay.lastHighlightedElement) {
      showAfterMs = 0;
    }

    this.animationTimeout = this.window.setTimeout(() => {
      this.popover.show(showAtPosition);
    }, showAfterMs);
  }

  /**
   * @returns {{height: number, width: number}}
   * @public
   */
  getFullPageSize() {
    // eslint-disable-next-line prefer-destructuring
    const body = this.document.body;
    const html = this.document.documentElement;

    return {
      height: Math.max(body.scrollHeight, body.offsetHeight, html.scrollHeight, html.offsetHeight),
      width: Math.max(body.scrollWidth, body.offsetWidth, html.scrollWidth, html.offsetWidth),
    };
  }

  /**
   * Gets the size for popover
   * @returns {{height: number, width: number}}
   * @public
   */
  getSize() {
    return {
      height: Math.max(this.node.scrollHeight, this.node.offsetHeight),
      width: Math.max(this.node.scrollWidth, this.node.offsetWidth),
    };
  }
}