utils202108/myJs/js/progLoading.js

//
//  需要 progFunction.js 支持
//

/**
 * 数据加载蒙版
 * @param property
 * @constructor
 */
function ProgLoading(property) {
    let baseProperty = {
        style: {
            masking: {
                'width': '100%',
                'height': '100%',
                'top': '0',
                'left': '0',
                'position': 'absolute',
                'text-align': 'center',
                'background-color': '#00000077',
            },
            box: {
                'background-color': '#000161',
                'color': '#00ffd5',
                'top': '50%',
                'left': '50%',
                'position': 'absolute',
                'transform': 'translate(-50%, -50%)',
                'padding': '20px 50px',
            },
        },
        class: {
            masking_class: [],
            masking_style: {},
            box_class: [],
            box_style: {},
        },
        info: {
            div: null,
            content: "数据加载中......",
        },
    };
    let div;//蒙版
    let box;//对话框
    let autoClose = false;
    let nowShowState = false;
    initProgLoading(property);

    /**
     * 参数合并初始化
     * @param property
     */
    function initProgLoading(property) {
        console.log('参数初始化');
        if (typeof (property) === "string") {
            //字符串的话就作为信息传入处理
            property = {info: {content: property,}}
        }
        progFunction.assignObj(baseProperty, property);
    }

    /**
     * 添加class
     * @param item
     * @param classList
     */
    function addClass(item, classList) {
        for (let i = 0, len = classList.length; i < len; i++) {
            item.classList.add(classList[i]);
        }
    }

    /**
     * 添加样式
     * @param item
     * @param styles
     */
    function addStyle(item, styles) {
        for (let key in styles) {
            if (styles.hasOwnProperty(key)) {
                item.style[key] = styles[key];
            }
        }
    }

    /**
     * 显示loading
     * @param property
     */
    this.show = function (property) {
        initProgLoading(property);
        if (div === undefined) {
            let nowZIndex = progFunction.getMaxZIndex() + 100;
            div = document.createElement("div");
            div.style['z-index'] = nowZIndex;
            if (autoClose) {
                let _this = this;
                div.onclick = _this.close;
            }
        }
        else {
            //样式 class 清理
        }
        //region 蒙版样式设定
        if (baseProperty.class.masking_class.length > 0) {
            addClass(div, baseProperty.class.masking_class);
            addStyle(div, baseProperty.class.masking_style);
        }
        else {
            addStyle(div, baseProperty.style.masking);
        }
        //endregion
        if (box === undefined) {
            box = document.createElement("div");
            div.appendChild(box);
        }
        //region box样式设定
        if (baseProperty.class.box_class.length > 0) {
            addClass(box, baseProperty.class.box_class);
            addStyle(box, baseProperty.class.box_style);
        }
        else {
            addStyle(box, baseProperty.style.box);
        }
        box.innerHTML = baseProperty.info.content;
        document.body.append(div);
        nowShowState = true;
        return this;
    }
    this.close = function () {
        if (div !== undefined && nowShowState) {
            nowShowState = false;
            document.body.removeChild(div);
        }
    }
    /**
     * 显示信息到时间自动关闭
     * @author LiuHuiYu
     * Created DateTime 2021-02-18 10:36
     * @param property 参数
     * @param time 显示时间（毫秒）
     * @return
     */
    this.showInfo = function (property, time) {
        autoClose = true;
        if (time === undefined) {
            time = 3000;
        }
        this.show(property);
        let _this = this;
        setTimeout(function () {
            _this.close();
        }, time);
        return this;
    }
}