/*----------------------------------------

 * objectFitPolyfill 2.3.5

 *

 * Made by Constance Chen

 * Released under the ISC license

 *

 * https://github.com/constancecchen/object-fit-polyfill

 *--------------------------------------*/

(function() {

  'use strict';

  // if the page is being rendered on the server, don't continue

  if (typeof window === 'undefined') return;

  // Workaround for Edge 16-18, which only implemented object-fit for <img> tags

  var edgeMatch = window.navigator.userAgent.match(/Edge\/(\d{2})\./);

  var edgeVersion = edgeMatch ? parseInt(edgeMatch[1], 10) : null;

  var edgePartialSupport = edgeVersion

    ? edgeVersion >= 16 && edgeVersion <= 18

    : false;

  // If the browser does support object-fit, we don't need to continue

  var hasSupport = 'objectFit' in document.documentElement.style !== false;

  if (hasSupport && !edgePartialSupport) {

    window.objectFitPolyfill = function() {

      return false;

    };

    return;

  }

  /**

   * Check the container's parent element to make sure it will

   * correctly handle and clip absolutely positioned children

   *

   * @param {node} $container - parent element

   */

  var checkParentContainer = function($container) {

    var styles = window.getComputedStyle($container, null);

    var position = styles.getPropertyValue('position');

    var overflow = styles.getPropertyValue('overflow');

    var display = styles.getPropertyValue('display');

    if (!position || position === 'static') {

      $container.style.position = 'relative';

    }

    if (overflow !== 'hidden') {

      $container.style.overflow = 'hidden';

    }

    // Guesstimating that people want the parent to act like full width/height wrapper here.

    // Mostly attempts to target <picture> elements, which default to inline.

    if (!display || display === 'inline') {

      $container.style.display = 'block';

    }

    if ($container.clientHeight === 0) {

      $container.style.height = '100%';

    }

    // Add a CSS class hook, in case people need to override styles for any reason.

    if ($container.className.indexOf('object-fit-polyfill') === -1) {

      $container.className = $container.className + ' object-fit-polyfill';

    }

  };

  /**

   * Check for pre-set max-width/height, min-width/height,

   * positioning, or margins, which can mess up image calculations

   *

   * @param {node} $media - img/video element

   */

  var checkMediaProperties = function($media) {

    var styles = window.getComputedStyle($media, null);

    var constraints = {

      'max-width': 'none',

      'max-height': 'none',

      'min-width': '0px',

      'min-height': '0px',

      top: 'auto',

      right: 'auto',

      bottom: 'auto',

      left: 'auto',

      'margin-top': '0px',

      'margin-right': '0px',

      'margin-bottom': '0px',

      'margin-left': '0px',

    };

    for (var property in constraints) {

      var constraint = styles.getPropertyValue(property);

      if (constraint !== constraints[property]) {

        $media.style[property] = constraints[property];

      }

    }

  };

  /**

   * Calculate & set object-position

   *

   * @param {string} axis - either "x" or "y"

   * @param {node} $media - img or video element

   * @param {string} objectPosition - e.g. "50% 50%", "top left"

   */

  var setPosition = function(axis, $media, objectPosition) {

    var position, other, start, end, side;

    objectPosition = objectPosition.split(' ');

    if (objectPosition.length < 2) {

      objectPosition[1] = objectPosition[0];

    }

    /* istanbul ignore else */

    if (axis === 'x') {

      position = objectPosition[0];

      other = objectPosition[1];

      start = 'left';

      end = 'right';

      side = $media.clientWidth;

    } else if (axis === 'y') {

      position = objectPosition[1];

      other = objectPosition[0];

      start = 'top';

      end = 'bottom';

      side = $media.clientHeight;

    } else {

      return; // Neither x or y axis specified

    }

    if (position === start || other === start) {

      $media.style[start] = '0';

      return;

    }

    if (position === end || other === end) {

      $media.style[end] = '0';

      return;

    }

    if (position === 'center' || position === '50%') {

      $media.style[start] = '50%';

      $media.style['margin-' + start] = side / -2 + 'px';

      return;

    }

    // Percentage values (e.g., 30% 10%)

    if (position.indexOf('%') >= 0) {

      position = parseInt(position, 10);

      if (position < 50) {

        $media.style[start] = position + '%';

        $media.style['margin-' + start] = side * (position / -100) + 'px';

      } else {

        position = 100 - position;

        $media.style[end] = position + '%';

        $media.style['margin-' + end] = side * (position / -100) + 'px';

      }

      return;

    }

    // Length-based values (e.g. 10px / 10em)

    else {

      $media.style[start] = position;

    }

  };

  /**

   * Calculate & set object-fit

   *

   * @param {node} $media - img/video/picture element

   */

  var objectFit = function($media) {

    // IE 10- data polyfill

    var fit = $media.dataset

      ? $media.dataset.objectFit

      : $media.getAttribute('data-object-fit');

    var position = $media.dataset

      ? $media.dataset.objectPosition

      : $media.getAttribute('data-object-position');

    // Default fallbacks

    fit = fit || 'cover';

    position = position || '50% 50%';

    // If necessary, make the parent container work with absolutely positioned elements

    var $container = $media.parentNode;

    checkParentContainer($container);

    // Check for any pre-set CSS which could mess up image calculations

    checkMediaProperties($media);

    // Reset any pre-set width/height CSS and handle fit positioning

    $media.style.position = 'absolute';

    $media.style.width = 'auto';

    $media.style.height = 'auto';

    // `scale-down` chooses either `none` or `contain`, whichever is smaller

    if (fit === 'scale-down') {

      if (

        $media.clientWidth < $container.clientWidth &&

        $media.clientHeight < $container.clientHeight

      ) {

        fit = 'none';

      } else {

        fit = 'contain';

      }

    }

    // `none` (width/height auto) and `fill` (100%) and are straightforward

    if (fit === 'none') {

      setPosition('x', $media, position);

      setPosition('y', $media, position);

      return;

    }

    if (fit === 'fill') {

      $media.style.width = '100%';

      $media.style.height = '100%';

      setPosition('x', $media, position);

      setPosition('y', $media, position);

      return;

    }

    // `cover` and `contain` must figure out which side needs covering, and add CSS positioning & centering

    $media.style.height = '100%';

    if (

      (fit === 'cover' && $media.clientWidth > $container.clientWidth) ||

      (fit === 'contain' && $media.clientWidth < $container.clientWidth)

    ) {

      $media.style.top = '0';

      $media.style.marginTop = '0';

      setPosition('x', $media, position);

    } else {

      $media.style.width = '100%';

      $media.style.height = 'auto';

      $media.style.left = '0';

      $media.style.marginLeft = '0';

      setPosition('y', $media, position);

    }

  };

  /**

   * Initialize plugin

   *

   * @param {node} media - Optional specific DOM node(s) to be polyfilled

   */

  var objectFitPolyfill = function(media) {

    if (typeof media === 'undefined' || media instanceof Event) {

      // If left blank, or a default event, all media on the page will be polyfilled.

      media = document.querySelectorAll('[data-object-fit]');

    } else if (media && media.nodeName) {

      // If it's a single node, wrap it in an array so it works.

      media = [media];

    } else if (typeof media === 'object' && media.length && media[0].nodeName) {

      // If it's an array of DOM nodes (e.g. a jQuery selector), it's fine as-is.

      media = media;

    } else {

      // Otherwise, if it's invalid or an incorrect type, return false to let people know.

      return false;

    }

    for (var i = 0; i < media.length; i++) {

      if (!media[i].nodeName) continue;

      var mediaType = media[i].nodeName.toLowerCase();

      if (mediaType === 'img') {

        if (edgePartialSupport) continue; // Edge supports object-fit for images (but nothing else), so no need to polyfill

        if (media[i].complete) {

          objectFit(media[i]);

        } else {

          media[i].addEventListener('load', function() {

            objectFit(this);

          });

        }

      } else if (mediaType === 'video') {

        if (media[i].readyState > 0) {

          objectFit(media[i]);

        } else {

          media[i].addEventListener('loadedmetadata', function() {

            objectFit(this);

          });

        }

      } else {

        objectFit(media[i]);

      }

    }

    return true;

  };

  if (document.readyState === 'loading') {

    // Loading hasn't finished yet

    document.addEventListener('DOMContentLoaded', objectFitPolyfill);

  } else {

    // `DOMContentLoaded` has already fired

    objectFitPolyfill();

  }

  window.addEventListener('resize', objectFitPolyfill);

  window.objectFitPolyfill = objectFitPolyfill;

})();