yuxuannnn_utils/lib/lazyImageControl/index.js

xs开发的前端工具包

"use strict";
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m") throw new TypeError("Private method is not writable");
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var _LazyImageControl_instances, _LazyImageControl_needLazyImageList, _LazyImageControl_isAddDocumentEvent, _LazyImageControl_eleMap, _LazyImageControl_customCanShow, _LazyImageControl_canShow;
Object.defineProperty(exports, "__esModule", { value: true });
exports.lazyImageControl = void 0;
const index_1 = require("../index");
class LazyImageControl {
    constructor() {
        _LazyImageControl_instances.add(this);
        _LazyImageControl_needLazyImageList.set(this, []);
        _LazyImageControl_isAddDocumentEvent.set(this, false);
        _LazyImageControl_eleMap.set(this, new WeakMap());
        _LazyImageControl_customCanShow.set(this, null);
    }
    addSome(items) {
        items.forEach((it) => this.add(it));
    }
    /**
     * 添加懒加载配置对象
     * @param item
     */
    add(item) {
        __classPrivateFieldGet(this, _LazyImageControl_needLazyImageList, "f").push(item);
        item.ele && __classPrivateFieldGet(this, _LazyImageControl_eleMap, "f").set(item.ele, item);
    }
    init() {
        if (__classPrivateFieldGet(this, _LazyImageControl_isAddDocumentEvent, "f"))
            return;
        document.addEventListener('scroll', (0, index_1.debounce)(this.update.bind(this), 300));
        __classPrivateFieldSet(this, _LazyImageControl_isAddDocumentEvent, true, "f");
        // 暴露其他注册事件的接口
    }
    /**
     * 用于注册其他DOM的滚动事件
     * @param dom
     */
    extends(dom) {
        dom === null || dom === void 0 ? void 0 : dom.addEventListener('scroll', (0, index_1.debounce)(this.update.bind(this), 300));
    }
    /**
     * 更新状态，可以在页面开始时手动调用
     */
    update() {
        __classPrivateFieldGet(this, _LazyImageControl_needLazyImageList, "f").forEach((it) => {
            let canShow = __classPrivateFieldGet(this, _LazyImageControl_customCanShow, "f") || __classPrivateFieldGet(this, _LazyImageControl_instances, "m", _LazyImageControl_canShow);
            canShow = canShow.bind(this);
            if (it.ele && canShow(it)) {
                // 可以更新
                (0, index_1.loadImage)(it.src).then(() => {
                    typeof it.onShow === 'function' && it.onShow();
                });
                it.loaded = true;
            }
        });
        this.remove();
    }
    remove() {
        __classPrivateFieldSet(this, _LazyImageControl_needLazyImageList, __classPrivateFieldGet(this, _LazyImageControl_needLazyImageList, "f").filter((it) => !it.loaded), "f");
    }
    /**
     * 移除某一个图片配置对象
     * 例如组件卸载之后 防止因为调用hook带来的闭包泄露问题
     */
    removeItem(ele) {
        if (!ele) {
            return;
        }
        const lazyControl = __classPrivateFieldGet(this, _LazyImageControl_eleMap, "f").get(ele);
        if (!lazyControl)
            return;
        lazyControl.ele = null;
        lazyControl.loaded = true;
    }
    /** 用户可以自定义化加载规则 */
    setCanShow(canShow) {
        __classPrivateFieldSet(this, _LazyImageControl_customCanShow, canShow, "f");
    }
}
_LazyImageControl_needLazyImageList = new WeakMap(), _LazyImageControl_isAddDocumentEvent = new WeakMap(), _LazyImageControl_eleMap = new WeakMap(), _LazyImageControl_customCanShow = new WeakMap(), _LazyImageControl_instances = new WeakSet(), _LazyImageControl_canShow = function _LazyImageControl_canShow(item) {
    const { ele } = item;
    if (!ele)
        return false;
    const domInfo = ele.getBoundingClientRect();
    const viewInfo = (0, index_1.getViewportOffset)();
    return domInfo.top - viewInfo.h < 10;
};
exports.lazyImageControl = new LazyImageControl();
if (index_1.isBrowser) {
    exports.lazyImageControl.init();
}