@wezom/zz-load
Version:
Lazy loader based on IntersectionObserver API
112 lines (111 loc) • 3.41 kB
JavaScript
;
var __importDefault =
(this && this.__importDefault) ||
function (mod) {
return mod && mod.__esModule ? mod : { default: mod };
};
Object.defineProperty(exports, '__esModule', { value: true });
const mark_as_1 = __importDefault(require('../utils/mark-as'));
const attrs_1 = __importDefault(require('../config/attrs'));
const events_1 = __importDefault(require('../config/events'));
const check_1 = __importDefault(require('../utils/check'));
const sanitize_attrs_1 = __importDefault(require('../utils/sanitize-attrs'));
const source_img_1 = __importDefault(require('./source-img'));
const source_bg_img_1 = __importDefault(require('./source-bg-img'));
const source_iframe_1 = __importDefault(require('./source-iframe'));
const source_picture_1 = __importDefault(require('./source-picture'));
function default_1(element, options, asPromise) {
const load = (resolve, reject) => {
mark_as_1.default(element, attrs_1.default.processed, events_1.default.processed);
if (options.onProcess !== undefined) {
options.onProcess(element);
}
function loadActions(loadEvent, resource) {
if (options.clearSourceAttrs && !check_1.default(element, 'inView')) {
sanitize_attrs_1.default(element);
}
mark_as_1.default(element, attrs_1.default.loaded, events_1.default.loaded, {
loadEvent,
resource
});
if (options.onLoad !== undefined) {
options.onLoad(element, resource);
}
resolve(element, resource);
}
function errorActions(errorEvent, resource) {
mark_as_1.default(element, attrs_1.default.failed, events_1.default.failed, {
errorEvent,
resource
});
if (options.onFail !== undefined) {
options.onFail(element, resource);
}
reject(element);
}
// img
const sourceImg = element.getAttribute(attrs_1.default.sourceImg);
if (typeof sourceImg === 'string' && element instanceof HTMLImageElement) {
source_img_1.default(element, sourceImg, options, loadActions, errorActions);
return;
}
// style="background-image: url(...)"
const sourceBgImg = element.getAttribute(attrs_1.default.sourceBgImg);
if (typeof sourceBgImg === 'string' && element instanceof HTMLElement) {
source_bg_img_1.default(
element,
sourceBgImg,
options,
loadActions,
errorActions
);
return;
}
// iframe
const sourceIframe = element.getAttribute(attrs_1.default.sourceIframe);
if (typeof sourceIframe === 'string' && element instanceof HTMLPictureElement) {
source_iframe_1.default(
element,
sourceIframe,
options,
loadActions,
errorActions
);
return;
}
// picture
if (element instanceof HTMLPictureElement) {
const img = element.querySelector('img');
if (img instanceof HTMLImageElement) {
const sourceImg = img.getAttribute(attrs_1.default.sourceImg);
if (typeof sourceImg === 'string') {
source_picture_1.default(
element,
img,
sourceImg,
options,
loadActions,
errorActions
);
return;
}
}
}
// container
if (element.hasAttribute(attrs_1.default.sourceContainer)) {
loadActions();
return;
}
console.log(element);
console.log('▲ element has no zz-load source');
};
if (asPromise && window.Promise) {
return new Promise((resolve, reject) => load(resolve, reject));
} else {
return load(
() => undefined,
() => undefined
);
}
}
exports.default = default_1;