Edit File by line

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

[0] Fix | Delete

* objectFitPolyfill 2.3.5

[1] Fix | Delete

[2] Fix | Delete

* Made by Constance Chen

[3] Fix | Delete

* Released under the ISC license

[4] Fix | Delete

[5] Fix | Delete

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

[6] Fix | Delete

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

[7] Fix | Delete

[8] Fix | Delete

(function() {

[9] Fix | Delete

'use strict';

[10] Fix | Delete

[11] Fix | Delete

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

[12] Fix | Delete

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

[13] Fix | Delete

[14] Fix | Delete

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

[15] Fix | Delete

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

[16] Fix | Delete

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

[17] Fix | Delete

var edgePartialSupport = edgeVersion

[18] Fix | Delete

? edgeVersion >= 16 && edgeVersion <= 18

[19] Fix | Delete

: false;

[20] Fix | Delete

[21] Fix | Delete

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

[22] Fix | Delete

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

[23] Fix | Delete

if (hasSupport && !edgePartialSupport) {

[24] Fix | Delete

window.objectFitPolyfill = function() {

[25] Fix | Delete

return false;

[26] Fix | Delete

};

[27] Fix | Delete

return;

[28] Fix | Delete

}

[29] Fix | Delete

[30] Fix | Delete

/**

[31] Fix | Delete

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

[32] Fix | Delete

* correctly handle and clip absolutely positioned children

[33] Fix | Delete

[34] Fix | Delete

* @param {node} $container - parent element

[35] Fix | Delete

[36] Fix | Delete

var checkParentContainer = function($container) {

[37] Fix | Delete

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

[38] Fix | Delete

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

[39] Fix | Delete

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

[40] Fix | Delete

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

[41] Fix | Delete

[42] Fix | Delete

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

[43] Fix | Delete

$container.style.position = 'relative';

[44] Fix | Delete

}

[45] Fix | Delete

if (overflow !== 'hidden') {

[46] Fix | Delete

$container.style.overflow = 'hidden';

[47] Fix | Delete

}

[48] Fix | Delete

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

[49] Fix | Delete

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

[50] Fix | Delete

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

[51] Fix | Delete

$container.style.display = 'block';

[52] Fix | Delete

}

[53] Fix | Delete

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

[54] Fix | Delete

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

[55] Fix | Delete

}

[56] Fix | Delete

[57] Fix | Delete

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

[58] Fix | Delete

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

[59] Fix | Delete

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

[60] Fix | Delete

}

[61] Fix | Delete

};

[62] Fix | Delete

[63] Fix | Delete

/**

[64] Fix | Delete

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

[65] Fix | Delete

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

[66] Fix | Delete

[67] Fix | Delete

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

[68] Fix | Delete

[69] Fix | Delete

var checkMediaProperties = function($media) {

[70] Fix | Delete

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

[71] Fix | Delete

var constraints = {

[72] Fix | Delete

'max-width': 'none',

[73] Fix | Delete

'max-height': 'none',

[74] Fix | Delete

'min-width': '0px',

[75] Fix | Delete

'min-height': '0px',

[76] Fix | Delete

top: 'auto',

[77] Fix | Delete

right: 'auto',

[78] Fix | Delete

bottom: 'auto',

[79] Fix | Delete

left: 'auto',

[80] Fix | Delete

'margin-top': '0px',

[81] Fix | Delete

'margin-right': '0px',

[82] Fix | Delete

'margin-bottom': '0px',

[83] Fix | Delete

'margin-left': '0px',

[84] Fix | Delete

};

[85] Fix | Delete

[86] Fix | Delete

for (var property in constraints) {

[87] Fix | Delete

var constraint = styles.getPropertyValue(property);

[88] Fix | Delete

[89] Fix | Delete

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

[90] Fix | Delete

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

[91] Fix | Delete

}

[92] Fix | Delete

}

[93] Fix | Delete

};

[94] Fix | Delete

[95] Fix | Delete

/**

[96] Fix | Delete

* Calculate & set object-position

[97] Fix | Delete

[98] Fix | Delete

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

[99] Fix | Delete

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

[100] Fix | Delete

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

[101] Fix | Delete

[102] Fix | Delete

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

[103] Fix | Delete

var position, other, start, end, side;

[104] Fix | Delete

objectPosition = objectPosition.split(' ');

[105] Fix | Delete

[106] Fix | Delete

if (objectPosition.length < 2) {

[107] Fix | Delete

objectPosition[1] = objectPosition[0];

[108] Fix | Delete

}

[109] Fix | Delete

[110] Fix | Delete

/* istanbul ignore else */

[111] Fix | Delete

if (axis === 'x') {

[112] Fix | Delete

position = objectPosition[0];

[113] Fix | Delete

other = objectPosition[1];

[114] Fix | Delete

start = 'left';

[115] Fix | Delete

end = 'right';

[116] Fix | Delete

side = $media.clientWidth;

[117] Fix | Delete

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

[118] Fix | Delete

position = objectPosition[1];

[119] Fix | Delete

other = objectPosition[0];

[120] Fix | Delete

start = 'top';

[121] Fix | Delete

end = 'bottom';

[122] Fix | Delete

side = $media.clientHeight;

[123] Fix | Delete

} else {

[124] Fix | Delete

return; // Neither x or y axis specified

[125] Fix | Delete

}

[126] Fix | Delete

[127] Fix | Delete

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

[128] Fix | Delete

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

[129] Fix | Delete

return;

[130] Fix | Delete

}

[131] Fix | Delete

[132] Fix | Delete

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

[133] Fix | Delete

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

[134] Fix | Delete

return;

[135] Fix | Delete

}

[136] Fix | Delete

[137] Fix | Delete

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

[138] Fix | Delete

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

[139] Fix | Delete

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

[140] Fix | Delete

return;

[141] Fix | Delete

}

[142] Fix | Delete

[143] Fix | Delete

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

[144] Fix | Delete

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

[145] Fix | Delete

position = parseInt(position, 10);

[146] Fix | Delete

[147] Fix | Delete

if (position < 50) {

[148] Fix | Delete

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

[149] Fix | Delete

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

[150] Fix | Delete

} else {

[151] Fix | Delete

position = 100 - position;

[152] Fix | Delete

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

[153] Fix | Delete

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

[154] Fix | Delete

}

[155] Fix | Delete

[156] Fix | Delete

return;

[157] Fix | Delete

}

[158] Fix | Delete

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

[159] Fix | Delete

else {

[160] Fix | Delete

$media.style[start] = position;

[161] Fix | Delete

}

[162] Fix | Delete

};

[163] Fix | Delete

[164] Fix | Delete

/**

[165] Fix | Delete

* Calculate & set object-fit

[166] Fix | Delete

[167] Fix | Delete

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

[168] Fix | Delete

[169] Fix | Delete

var objectFit = function($media) {

[170] Fix | Delete

// IE 10- data polyfill

[171] Fix | Delete

var fit = $media.dataset

[172] Fix | Delete

? $media.dataset.objectFit

[173] Fix | Delete

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

[174] Fix | Delete

var position = $media.dataset

[175] Fix | Delete

? $media.dataset.objectPosition

[176] Fix | Delete

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

[177] Fix | Delete

[178] Fix | Delete

// Default fallbacks

[179] Fix | Delete

fit = fit || 'cover';

[180] Fix | Delete

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

[181] Fix | Delete

[182] Fix | Delete

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

[183] Fix | Delete

var $container = $media.parentNode;

[184] Fix | Delete

checkParentContainer($container);

[185] Fix | Delete

[186] Fix | Delete

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

[187] Fix | Delete

checkMediaProperties($media);

[188] Fix | Delete

[189] Fix | Delete

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

[190] Fix | Delete

$media.style.position = 'absolute';

[191] Fix | Delete

$media.style.width = 'auto';

[192] Fix | Delete

$media.style.height = 'auto';

[193] Fix | Delete

[194] Fix | Delete

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

[195] Fix | Delete

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

[196] Fix | Delete

if (

[197] Fix | Delete

$media.clientWidth < $container.clientWidth &&

[198] Fix | Delete

$media.clientHeight < $container.clientHeight

[199] Fix | Delete

) {

[200] Fix | Delete

fit = 'none';

[201] Fix | Delete

} else {

[202] Fix | Delete

fit = 'contain';

[203] Fix | Delete

}

[204] Fix | Delete

}

[205] Fix | Delete

[206] Fix | Delete

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

[207] Fix | Delete

if (fit === 'none') {

[208] Fix | Delete

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

[209] Fix | Delete

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

[210] Fix | Delete

return;

[211] Fix | Delete

}

[212] Fix | Delete

[213] Fix | Delete

if (fit === 'fill') {

[214] Fix | Delete

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

[215] Fix | Delete

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

[216] Fix | Delete

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

[217] Fix | Delete

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

[218] Fix | Delete

return;

[219] Fix | Delete

}

[220] Fix | Delete

[221] Fix | Delete

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

[222] Fix | Delete

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

[223] Fix | Delete

[224] Fix | Delete

if (

[225] Fix | Delete

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

[226] Fix | Delete

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

[227] Fix | Delete

) {

[228] Fix | Delete

$media.style.top = '0';

[229] Fix | Delete

$media.style.marginTop = '0';

[230] Fix | Delete

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

[231] Fix | Delete

} else {

[232] Fix | Delete

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

[233] Fix | Delete

$media.style.height = 'auto';

[234] Fix | Delete

$media.style.left = '0';

[235] Fix | Delete

$media.style.marginLeft = '0';

[236] Fix | Delete

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

[237] Fix | Delete

}

[238] Fix | Delete

};

[239] Fix | Delete

[240] Fix | Delete

/**

[241] Fix | Delete

* Initialize plugin

[242] Fix | Delete

[243] Fix | Delete

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

[244] Fix | Delete

[245] Fix | Delete

var objectFitPolyfill = function(media) {

[246] Fix | Delete

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

[247] Fix | Delete

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

[248] Fix | Delete

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

[249] Fix | Delete

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

[250] Fix | Delete

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

[251] Fix | Delete

media = [media];

[252] Fix | Delete

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

[253] Fix | Delete

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

[254] Fix | Delete

media = media;

[255] Fix | Delete

} else {

[256] Fix | Delete

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

[257] Fix | Delete

return false;

[258] Fix | Delete

}

[259] Fix | Delete

[260] Fix | Delete

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

[261] Fix | Delete

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

[262] Fix | Delete

[263] Fix | Delete

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

[264] Fix | Delete

[265] Fix | Delete

if (mediaType === 'img') {

[266] Fix | Delete

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

[267] Fix | Delete

[268] Fix | Delete

if (media[i].complete) {

[269] Fix | Delete

objectFit(media[i]);

[270] Fix | Delete

} else {

[271] Fix | Delete

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

[272] Fix | Delete

objectFit(this);

[273] Fix | Delete

});

[274] Fix | Delete

}

[275] Fix | Delete

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

[276] Fix | Delete

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

[277] Fix | Delete

objectFit(media[i]);

[278] Fix | Delete

} else {

[279] Fix | Delete

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

[280] Fix | Delete

objectFit(this);

[281] Fix | Delete

});

[282] Fix | Delete

}

[283] Fix | Delete

} else {

[284] Fix | Delete

objectFit(media[i]);

[285] Fix | Delete

}

[286] Fix | Delete

}

[287] Fix | Delete

[288] Fix | Delete

return true;

[289] Fix | Delete

};

[290] Fix | Delete

[291] Fix | Delete

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

[292] Fix | Delete

// Loading hasn't finished yet

[293] Fix | Delete

document.addEventListener('DOMContentLoaded', objectFitPolyfill);

[294] Fix | Delete

} else {

[295] Fix | Delete

// `DOMContentLoaded` has already fired

[296] Fix | Delete

objectFitPolyfill();

[297] Fix | Delete

}

[298] Fix | Delete

[299] Fix | Delete

window.addEventListener('resize', objectFitPolyfill);

[300] Fix | Delete

[301] Fix | Delete

window.objectFitPolyfill = objectFitPolyfill;

[302] Fix | Delete

})();

[303] Fix | Delete

[304] Fix | Delete