videojs-vast-vpaid/src/scripts/utils/dom.js

VAST plugin to use with video.js

const utilities = require('./utilityFunctions');

const dom = {};

dom.isVisible = function isVisible (el) {
  const style = window.getComputedStyle(el);

  return style.visibility !== 'hidden';
};

dom.isHidden = function isHidden (el) {
  const style = window.getComputedStyle(el);

  return style.display === 'none';
};

dom.isShown = function isShown (el) {
  return !dom.isHidden(el);
};

dom.hide = function hide (el) {
  el.__prev_style_display_ = el.style.display;
  el.style.display = 'none';
};

dom.show = function show (el) {
  if (dom.isHidden(el)) {
    el.style.display = el.__prev_style_display_;
  }
  el.__prev_style_display_ = undefined;
};

dom.hasClass = function hasClass (el, cssClass) {
  let classes, i, len;

  if (utilities.isNotEmptyString(cssClass)) {
    if (el.classList) {
      return el.classList.contains(cssClass);
    }

    classes = utilities.isString(el.getAttribute('class')) ? el.getAttribute('class').split(/\s+/) : [];
    cssClass = cssClass || '';

    for (i = 0, len = classes.length; i < len; i += 1) {
      if (classes[i] === cssClass) {
        return true;
      }
    }
  }

  return false;
};

dom.addClass = function (el, cssClass) {
  let classes;

  if (utilities.isNotEmptyString(cssClass)) {
    if (el.classList) {
      return el.classList.add(cssClass);
    }

    classes = utilities.isString(el.getAttribute('class')) ? el.getAttribute('class').split(/\s+/) : [];
    if (utilities.isString(cssClass) && utilities.isNotEmptyString(cssClass.replace(/\s+/, ''))) {
      classes.push(cssClass);
      el.setAttribute('class', classes.join(' '));
    }
  }
};

dom.removeClass = function (el, cssClass) {
  let classes;

  if (utilities.isNotEmptyString(cssClass)) {
    if (el.classList) {
      return el.classList.remove(cssClass);
    }

    classes = utilities.isString(el.getAttribute('class')) ? el.getAttribute('class').split(/\s+/) : [];
    const newClasses = [];
    let i, len;

    if (utilities.isString(cssClass) && utilities.isNotEmptyString(cssClass.replace(/\s+/, ''))) {
      for (i = 0, len = classes.length; i < len; i += 1) {
        if (cssClass !== classes[i]) {
          newClasses.push(classes[i]);
        }
      }
      el.setAttribute('class', newClasses.join(' '));
    }
  }
};

dom.addEventListener = function addEventListener (el, type, handler) {
  if (utilities.isArray(el)) {
    utilities.forEach(el, (e) => {
      dom.addEventListener(e, type, handler);
    });

    return;
  }

  if (utilities.isArray(type)) {
    utilities.forEach(type, (t) => {
      dom.addEventListener(el, t, handler);
    });

    return;
  }

  if (el.addEventListener) {
    el.addEventListener(type, handler, false);
  } else if (el.attachEvent) {
    // WARNING!!! this is a very naive implementation !
    // the event object that should be passed to the handler
    // would not be there for IE8
    // we should use "window.event" and then "event.srcElement"
    // instead of "event.target"
    el.attachEvent('on' + type, handler);
  }
};

dom.removeEventListener = function removeEventListener (el, type, handler) {
  if (utilities.isArray(el)) {
    utilities.forEach(el, (e) => {
      dom.removeEventListener(e, type, handler);
    });

    return;
  }

  if (utilities.isArray(type)) {
    utilities.forEach(type, (t) => {
      dom.removeEventListener(el, t, handler);
    });

    return;
  }

  if (el.removeEventListener) {
    el.removeEventListener(type, handler, false);
  } else if (el.detachEvent) {
    el.detachEvent('on' + type, handler);
  } else {
    el['on' + type] = null;
  }
};

dom.dispatchEvent = function dispatchEvent (el, event) {
  if (el.dispatchEvent) {
    el.dispatchEvent(event);
  } else {
    el.fireEvent('on' + event.eventType, event);
  }
};

dom.isDescendant = function isDescendant (parent, child) {
  let node = child.parentNode;

  while (node !== null) {
    if (node === parent) {
      return true;
    }
    node = node.parentNode;
  }

  return false;
};

dom.getTextContent = function getTextContent (el) {
  return el.textContent || el.text;
};

dom.prependChild = function prependChild (parent, child) {
  if (child.parentNode) {
    child.parentNode.removeChild(child);
  }

  return parent.insertBefore(child, parent.firstChild);
};

dom.remove = function removeNode (node) {
  if (node && node.parentNode) {
    node.parentNode.removeChild(node);
  }
};

dom.isDomElement = function isDomElement (o) {
  return o instanceof Element;
};

dom.click = function (el, handler) {
  dom.addEventListener(el, 'click', handler);
};

dom.once = function (el, type, handler) {
  function handlerWrap () {
    handler(...arguments);
    dom.removeEventListener(el, type, handlerWrap);
  }

  dom.addEventListener(el, type, handlerWrap);
};

// Note: there is no getBoundingClientRect on iPad so we need a fallback
dom.getDimension = function getDimension (element) {
  let rect;

  // On IE9 and below getBoundingClientRect does not work consistently
  if (!utilities.isOldIE() && element.getBoundingClientRect) {
    rect = element.getBoundingClientRect();

    return {
      width: rect.width,
      height: rect.height
    };
  }

  return {
    width: element.offsetWidth,
    height: element.offsetHeight
  };
};

module.exports = dom;