1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 |
- 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
- };
|