73 lines
1.9 KiB
JavaScript
73 lines
1.9 KiB
JavaScript
import { remove } from "./util.mjs";
|
|
const defaultOptions = {
|
|
selector: "img"
|
|
};
|
|
class LazyContainer {
|
|
constructor({ el, binding, vnode, lazy }) {
|
|
this.el = null;
|
|
this.vnode = vnode;
|
|
this.binding = binding;
|
|
this.options = {};
|
|
this.lazy = lazy;
|
|
this.queue = [];
|
|
this.update({ el, binding });
|
|
}
|
|
update({ el, binding }) {
|
|
this.el = el;
|
|
this.options = Object.assign({}, defaultOptions, binding.value);
|
|
const imgs = this.getImgs();
|
|
imgs.forEach((el2) => {
|
|
this.lazy.add(
|
|
el2,
|
|
Object.assign({}, this.binding, {
|
|
value: {
|
|
src: "dataset" in el2 ? el2.dataset.src : el2.getAttribute("data-src"),
|
|
error: ("dataset" in el2 ? el2.dataset.error : el2.getAttribute("data-error")) || this.options.error,
|
|
loading: ("dataset" in el2 ? el2.dataset.loading : el2.getAttribute("data-loading")) || this.options.loading
|
|
}
|
|
}),
|
|
this.vnode
|
|
);
|
|
});
|
|
}
|
|
getImgs() {
|
|
return Array.from(this.el.querySelectorAll(this.options.selector));
|
|
}
|
|
clear() {
|
|
const imgs = this.getImgs();
|
|
imgs.forEach((el) => this.lazy.remove(el));
|
|
this.vnode = null;
|
|
this.binding = null;
|
|
this.lazy = null;
|
|
}
|
|
}
|
|
class LazyContainerManager {
|
|
constructor({ lazy }) {
|
|
this.lazy = lazy;
|
|
this.queue = [];
|
|
}
|
|
bind(el, binding, vnode) {
|
|
const container = new LazyContainer({
|
|
el,
|
|
binding,
|
|
vnode,
|
|
lazy: this.lazy
|
|
});
|
|
this.queue.push(container);
|
|
}
|
|
update(el, binding, vnode) {
|
|
const container = this.queue.find((item) => item.el === el);
|
|
if (!container) return;
|
|
container.update({ el, binding, vnode });
|
|
}
|
|
unbind(el) {
|
|
const container = this.queue.find((item) => item.el === el);
|
|
if (!container) return;
|
|
container.clear();
|
|
remove(this.queue, container);
|
|
}
|
|
}
|
|
export {
|
|
LazyContainerManager as default
|
|
};
|