@exadel/esl
Version:
Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components
65 lines (64 loc) • 2.16 kB
JavaScript
import { sanitize } from '../../esl-utils/dom/sanitize';
export const EMPTY_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
export const isEmptyImage = (src) => src === EMPTY_IMAGE;
export const STRATEGIES = {
'cover': {
apply(img, shadowImg) {
const src = shadowImg.src;
const isEmpty = !src || isEmptyImage(src);
img.style.backgroundImage = isEmpty ? '' : `url("${src}")`;
},
clear(img) {
img.style.backgroundImage = '';
}
},
'save-ratio': {
apply(img, shadowImg) {
const src = shadowImg.src;
const isEmpty = !src || isEmptyImage(src);
img.style.backgroundImage = isEmpty ? '' : `url("${src}")`;
if (shadowImg.width === 0)
return;
img.style.paddingTop = isEmpty ? '' : `${(shadowImg.height * 100 / shadowImg.width)}%`;
},
clear(img) {
img.style.paddingTop = '';
img.style.backgroundImage = '';
}
},
'fit': {
apply(img, shadowImg) {
const innerImg = img.attachInnerImage();
innerImg.src = shadowImg.src;
innerImg.removeAttribute('width');
},
clear(img) {
img.removeInnerImage();
}
},
'origin': {
apply(img, shadowImg) {
const innerImg = img.attachInnerImage();
innerImg.src = shadowImg.src;
innerImg.width = shadowImg.width / window.devicePixelRatio;
},
clear(img) {
img.removeInnerImage();
}
},
'inner-svg': {
apply(img, shadowImg) {
const request = new XMLHttpRequest();
request.open('GET', shadowImg.src, true);
request.onreadystatechange = () => {
if (request.readyState !== 4 || request.status !== 200)
return;
img.innerHTML = sanitize(request.responseText, { allowedRoots: ['svg'] });
};
request.send();
},
clear(img) {
img.innerHTML = '';
}
}
};