Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apply IIFE to avoid reference issues #14

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Apply IIFE to avoid reference issues #14

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 74 additions & 72 deletions lib/fitie.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,95 +1,97 @@
this.fitie = function (node) {
// restrict to valid object-fit value
var objectFit = node.currentStyle ? node.currentStyle['object-fit'] : null;
(function(){
function fitie(node) {
// restrict to valid object-fit value
var objectFit = node.currentStyle ? node.currentStyle['object-fit'] : null;

if (!objectFit || !/^(contain|cover|fill)$/.test(objectFit)) return;
if (!objectFit || !/^(contain|cover|fill)$/.test(objectFit)) return;

// prepare container styles
var outerWidth = node.clientWidth;
var outerHeight = node.clientHeight;
var outerRatio = outerWidth / outerHeight;
// prepare container styles
var outerWidth = node.clientWidth;
var outerHeight = node.clientHeight;
var outerRatio = outerWidth / outerHeight;

var name = node.nodeName.toLowerCase();
var name = node.nodeName.toLowerCase();

var setCSS = node.runtimeStyle;
var getCSS = node.currentStyle;
var setCSS = node.runtimeStyle;
var getCSS = node.currentStyle;

var addEventListener = node.addEventListener || node.attachEvent;
var removeEventListener = node.removeEventListener || node.detachEvent;
var on = node.addEventListener ? '' : 'on';
var img = name === 'img';
var type = img ? 'load' : 'loadedmetadata';
var addEventListener = node.addEventListener || node.attachEvent;
var removeEventListener = node.removeEventListener || node.detachEvent;
var on = node.addEventListener ? '' : 'on';
var img = name === 'img';
var type = img ? 'load' : 'loadedmetadata';

addEventListener.call(node, on + type, onload);
addEventListener.call(node, on + type, onload);

if (node.complete) onload();
if (node.complete) onload();

function onload() {
removeEventListener.call(node, on + type, onload);
function onload() {
removeEventListener.call(node, on + type, onload);

// prepare container styles
var imgCSS = {
boxSizing: 'content-box',
display: 'inline-block',
overflow: 'hidden'
};
// prepare container styles
var imgCSS = {
boxSizing: 'content-box',
display: 'inline-block',
overflow: 'hidden'
};

'backgroundColor backgroundImage borderColor borderStyle borderWidth bottom fontSize lineHeight height left opacity margin position right top visibility width'.replace(/\w+/g, function (key) {
imgCSS[key] = getCSS[key];
});

'backgroundColor backgroundImage borderColor borderStyle borderWidth bottom fontSize lineHeight height left opacity margin position right top visibility width'.replace(/\w+/g, function (key) {
imgCSS[key] = getCSS[key];
});
// prepare image styles
setCSS.border = setCSS.margin = setCSS.padding = 0;
setCSS.display = 'block';
setCSS.height = setCSS.width = 'auto';
setCSS.opacity = 1;

// prepare image styles
setCSS.border = setCSS.margin = setCSS.padding = 0;
setCSS.display = 'block';
setCSS.height = setCSS.width = 'auto';
setCSS.opacity = 1;
var innerWidth = node.videoWidth || node.width;
var innerHeight = node.videoHeight || node.height;
var innerRatio = innerWidth / innerHeight;

var innerWidth = node.videoWidth || node.width;
var innerHeight = node.videoHeight || node.height;
var innerRatio = innerWidth / innerHeight;
// style container
var imgx = document.createElement('object-fit');

// style container
var imgx = document.createElement('object-fit');
imgx.appendChild(node.parentNode.replaceChild(imgx, node));

imgx.appendChild(node.parentNode.replaceChild(imgx, node));
for (var key in imgCSS) imgx.runtimeStyle[key] = imgCSS[key];

for (var key in imgCSS) imgx.runtimeStyle[key] = imgCSS[key];
// style image
var newSize;

// style image
var newSize;
if (objectFit === 'fill') {
if (img) {
setCSS.width = outerWidth;
setCSS.height = outerHeight;
} else {
setCSS['-ms-transform-origin'] = '0% 0%';
setCSS['-ms-transform'] = 'scale(' + outerWidth / innerWidth + ',' + outerHeight / innerHeight + ')';
}
} else if (innerRatio < outerRatio ? objectFit === 'contain' : objectFit === 'cover') {
newSize = outerHeight * innerRatio;

if (objectFit === 'fill') {
if (img) {
setCSS.width = outerWidth;
setCSS.height = outerHeight;
setCSS.width = Math.round(newSize) + 'px';
setCSS.height = outerHeight + 'px';
setCSS.marginLeft = Math.round((outerWidth - newSize) / 2) + 'px';
} else {
setCSS['-ms-transform-origin'] = '0% 0%';
setCSS['-ms-transform'] = 'scale(' + outerWidth / innerWidth + ',' + outerHeight / innerHeight + ')';
newSize = outerWidth / innerRatio;

setCSS.width = outerWidth + 'px';
setCSS.height = Math.round(newSize) + 'px';
setCSS.marginTop = Math.round((outerHeight - newSize) / 2) + 'px';
}
} else if (innerRatio < outerRatio ? objectFit === 'contain' : objectFit === 'cover') {
newSize = outerHeight * innerRatio;
}
}

setCSS.width = Math.round(newSize) + 'px';
setCSS.height = outerHeight + 'px';
setCSS.marginLeft = Math.round((outerWidth - newSize) / 2) + 'px';
} else {
newSize = outerWidth / innerRatio;
if (/MSIE|Trident/.test(navigator.userAgent)) {
if (document.body) {
var all = document.querySelectorAll('img,video');
var index = -1;

setCSS.width = outerWidth + 'px';
setCSS.height = Math.round(newSize) + 'px';
setCSS.marginTop = Math.round((outerHeight - newSize) / 2) + 'px';
while (all[++index]) fitie(all[index]);
} else {
var _fitie = fitie;
setTimeout(_fitie);
}
}
};
this.fitie.init = function () {
if (document.body) {
var all = document.querySelectorAll('img,video');
var index = -1;

while (all[++index]) fitie(all[index]);
} else {
setTimeout(fitie.init);
}
};

if (/MSIE|Trident/.test(navigator.userAgent)) this.fitie.init();
})();