media-container.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.iframeSelector Selector for iframe element
  7.  * @param {boolean} options.useAutomaticRatio Toggle automatic ratio calculus
  8.  */
  9. export class MediaContainer {
  10.   /**
  11.    * @static
  12.    * Shorthand for instance creation and initialisation.
  13.    *
  14.    * @param {HTMLElement} root DOM element for component instantiation and scope
  15.    *
  16.    * @return {MediaContainer} An instance of MediaContainer.
  17.    */
  18.   static autoInit(root, { MEDIA_CONTAINER: defaultOptions = {} } = {}) {
  19.     const mediaContainer = new MediaContainer(root, defaultOptions);
  20.     mediaContainer.init();
  21.     root.ECLMediaContainer = mediaContainer;
  22.     return mediaContainer;
  23.   }
  25.   constructor(
  26.     element,
  27.     { iframeSelector = 'iframe', useAutomaticRatio = true } = {},
  28.   ) {
  29.     // Check element
  30.     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
  31.       throw new TypeError(
  32.         'DOM element should be given to initialize this widget.',
  33.       );
  34.     }
  36.     this.element = element;
  38.     // Options
  39.     this.iframeSelector = iframeSelector;
  40.     this.useAutomaticRatio = useAutomaticRatio;
  42.     // Private variables
  43.     this.iframe = null;
  45.     // Bind `this` for use in callbacks
  46.     this.calculateRatio = this.calculateRatio.bind(this);
  47.   }
  49.   /**
  50.    * Initialise component.
  51.    */
  52.   init() {
  53.     if (!ECL) {
  54.       throw new TypeError('Called init but ECL is not present');
  55.     }
  56.     ECL.components = ECL.components || new Map();
  57.     // Check if a ratio has been set manually
  58.     const media = queryOne('.ecl-media-container__media', this.element);
  59.     if (media && !/ecl-media-container__media--ratio/.test(media.className)) {
  60.       // Get the iframe
  61.       this.iframe = queryOne(this.iframeSelector, this.element);
  63.       // Check if there is an iframe to handle
  64.       if (this.iframe && this.useAutomaticRatio) this.calculateRatio();
  65.     }
  67.     // Set ecl initialized attribute
  68.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  69.     ECL.components.set(this.element, this);
  70.   }
  72.   /**
  73.    * Destroy component.
  74.    */
  75.   destroy() {
  76.     if (this.element) {
  77.       this.element.removeAttribute('data-ecl-auto-initialized');
  78.       ECL.components.delete(this.element);
  79.     }
  80.   }
  82.   /**
  83.    * Calculate the ratio of the iframe video.
  84.    */
  85.   calculateRatio() {
  86.     // Get dimension if they are provided
  87.     let iframeWidth = this.iframe.width;
  88.     let iframeHeight = this.iframe.height;
  90.     // If at least one dimension in not provided, calculate them (less reliable)
  91.     if (!iframeWidth || !iframeHeight) {
  92.       iframeWidth = this.iframe.offsetWidth;
  93.       iframeHeight = this.iframe.offsetHeight;
  94.     }
  96.     // Set aspect ratio
  97.     this.iframe.style.aspectRatio = `${iframeWidth}/${iframeHeight}`;
  98.   }
  99. }
  101. export default MediaContainer;