1 /*----------------------------------------

     2  * objectFitPolyfill 2.3.5

     3  *

     4  * Made by Constance Chen

     5  * Released under the ISC license

     6  *

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

     8  *--------------------------------------*/

     9 

    10 (function() {

    11   'use strict';

    12 

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

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

    15 

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

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

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

    19   var edgePartialSupport = edgeVersion

    20     ? edgeVersion >= 16 && edgeVersion <= 18

    21     : false;

    22 

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

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

    25   if (hasSupport && !edgePartialSupport) {

    26     window.objectFitPolyfill = function() {

    27       return false;

    28     };

    29     return;

    30   }

    31 

    32   /**

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

    34    * correctly handle and clip absolutely positioned children

    35    *

    36    * @param {node} $container - parent element

    37    */

    38   var checkParentContainer = function($container) {

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

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

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

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

    43 

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

    45       $container.style.position = 'relative';

    46     }

    47     if (overflow !== 'hidden') {

    48       $container.style.overflow = 'hidden';

    49     }

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

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

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

    53       $container.style.display = 'block';

    54     }

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

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

    57     }

    58 

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

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

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

    62     }

    63   };

    64 

    65   /**

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

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

    68    *

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

    70    */

    71   var checkMediaProperties = function($media) {

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

    73     var constraints = {

    74       'max-width': 'none',

    75       'max-height': 'none',

    76       'min-width': '0px',

    77       'min-height': '0px',

    78       top: 'auto',

    79       right: 'auto',

    80       bottom: 'auto',

    81       left: 'auto',

    82       'margin-top': '0px',

    83       'margin-right': '0px',

    84       'margin-bottom': '0px',

    85       'margin-left': '0px',

    86     };

    87 

    88     for (var property in constraints) {

    89       var constraint = styles.getPropertyValue(property);

    90 

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

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

    93       }

    94     }

    95   };

    96 

    97   /**

    98    * Calculate & set object-position

    99    *

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

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

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

   103    */

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

   105     var position, other, start, end, side;

   106     objectPosition = objectPosition.split(' ');

   107 

   108     if (objectPosition.length < 2) {

   109       objectPosition[1] = objectPosition[0];

   110     }

   111 

   112     /* istanbul ignore else */

   113     if (axis === 'x') {

   114       position = objectPosition[0];

   115       other = objectPosition[1];

   116       start = 'left';

   117       end = 'right';

   118       side = $media.clientWidth;

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

   120       position = objectPosition[1];

   121       other = objectPosition[0];

   122       start = 'top';

   123       end = 'bottom';

   124       side = $media.clientHeight;

   125     } else {

   126       return; // Neither x or y axis specified

   127     }

   128 

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

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

   131       return;

   132     }

   133 

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

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

   136       return;

   137     }

   138 

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

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

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

   142       return;

   143     }

   144 

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

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

   147       position = parseInt(position, 10);

   148 

   149       if (position < 50) {

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

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

   152       } else {

   153         position = 100 - position;

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

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

   156       }

   157 

   158       return;

   159     }

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

   161     else {

   162       $media.style[start] = position;

   163     }

   164   };

   165 

   166   /**

   167    * Calculate & set object-fit

   168    *

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

   170    */

   171   var objectFit = function($media) {

   172     // IE 10- data polyfill

   173     var fit = $media.dataset

   174       ? $media.dataset.objectFit

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

   176     var position = $media.dataset

   177       ? $media.dataset.objectPosition

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

   179 

   180     // Default fallbacks

   181     fit = fit || 'cover';

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

   183 

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

   185     var $container = $media.parentNode;

   186     checkParentContainer($container);

   187 

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

   189     checkMediaProperties($media);

   190 

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

   192     $media.style.position = 'absolute';

   193     $media.style.width = 'auto';

   194     $media.style.height = 'auto';

   195 

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

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

   198       if (

   199         $media.clientWidth < $container.clientWidth &&

   200         $media.clientHeight < $container.clientHeight

   201       ) {

   202         fit = 'none';

   203       } else {

   204         fit = 'contain';

   205       }

   206     }

   207 

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

   209     if (fit === 'none') {

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

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

   212       return;

   213     }

   214 

   215     if (fit === 'fill') {

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

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

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

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

   220       return;

   221     }

   222 

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

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

   225 

   226     if (

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

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

   229     ) {

   230       $media.style.top = '0';

   231       $media.style.marginTop = '0';

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

   233     } else {

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

   235       $media.style.height = 'auto';

   236       $media.style.left = '0';

   237       $media.style.marginLeft = '0';

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

   239     }

   240   };

   241 

   242   /**

   243    * Initialize plugin

   244    *

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

   246    */

   247   var objectFitPolyfill = function(media) {

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

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

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

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

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

   253       media = [media];

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

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

   256       media = media;

   257     } else {

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

   259       return false;

   260     }

   261 

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

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

   264 

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

   266 

   267       if (mediaType === 'img') {

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

   269 

   270         if (media[i].complete) {

   271           objectFit(media[i]);

   272         } else {

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

   274             objectFit(this);

   275           });

   276         }

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

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

   279           objectFit(media[i]);

   280         } else {

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

   282             objectFit(this);

   283           });

   284         }

   285       } else {

   286         objectFit(media[i]);

   287       }

   288     }

   289 

   290     return true;

   291   };

   292 

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

   294     // Loading hasn't finished yet

   295     document.addEventListener('DOMContentLoaded', objectFitPolyfill);

   296   } else {

   297     // `DOMContentLoaded` has already fired

   298     objectFitPolyfill();

   299   }

   300 

   301   window.addEventListener('resize', objectFitPolyfill);

   302 

   303   window.objectFitPolyfill = objectFitPolyfill;

   304 })();