@gdjiami/jslib/dom.js

Jiami FrontEnd helpers and Services

/**
 * DOM 相关的函数
 */
import * as tslib_1 from "tslib";
/**
 * 隐藏元素
 * 运用于应用的开场动画或者动画切换
 *
 * @param element CSS 选择器
 * @param className 隐藏效果类名
 * @param timeout 延迟隐藏时间
 *
 * @example
 *
 * ```js
 * hide('.my-el', 'hide')
 * ```
 */
export function hide(element, className, timeout) {
    if (timeout === void 0) { timeout = 1000; }
    var ele = document.querySelector(element);
    if (ele == null) {
        return;
    }
    var timer;
    var hide = function () {
        ele.style.display = 'none';
        window.clearTimeout(timer);
    };
    timer = window.setTimeout(hide, timeout);
    ele.addEventListener('animationend', hide);
    ele.addEventListener('webkitAnimationEnd', hide);
    ele.classList.add(className);
}
/**
 * 全局存储 importScript 资源
 */
var _importedScript = {};
/**
 * 通过 script 异步加载资源，用于动态导入外部链接资源
 * 在需要使用到某个外部资源时，通过动态导入，实现按需加载
 *
 * @param src 注入的脚本字符串
 *
 * @example
 *
 * ```js
 * importScript(`http://xxx.js`)
 * ```
 */
export function importScript(src) {
    return tslib_1.__awaiter(this, void 0, void 0, function () {
        return tslib_1.__generator(this, function (_a) {
            return [2 /*return*/, new Promise(function (resolve, reject) {
                    var headElement = document.head || document.getElementsByTagName('head')[0];
                    if (src in _importedScript) {
                        resolve();
                        return;
                    }
                    var script = document.createElement('script');
                    script.type = 'text/javascript';
                    script.onerror = function (err) {
                        reject(new URIError("The Script " + src + " is no accessible."));
                    };
                    script.onload = function () {
                        _importedScript[src] = true;
                        resolve();
                    };
                    headElement.appendChild(script);
                    script.src = src;
                })];
        });
    });
}
/**
 * 动态生成 css 类名
 * 通过传入kv对象，在判断value值，动态计算节点类名
 * 运用于状态切换时，类名的变化
 *
 * @param opt key-value 对象，通过判断 value 是否添加 key
 * @param other 静态类名
 *
 * @example
 *
 * ```js
 * cls({ active: true }, 'tab')  // => 'active tab'
 * cls({ active: false }, 'tab')  // => ' tab'
 * ```
 */
export function cls(opt) {
    var other = [];
    for (var _i = 1; _i < arguments.length; _i++) {
        other[_i - 1] = arguments[_i];
    }
    return Object.keys(opt)
        .filter(function (key) { return !!opt[key]; })
        .concat(other)
        .join(' ');
}
/**
 * 在指定时间内避免重复执行操作，避免用户多次点击，触发执行操作
 *
 * @param fn 执行的操作
 * @param duration 规定时间
 *
 * @example
 *
 * ```js
 * const openIndex = preventReEnter(() => openPage('index'), 1000)
 * <button onClick={openIndex}>打开首页</button>
 * ```
 */
export function preventReEnter(fn, duration) {
    if (duration === void 0) { duration = 1000; }
    var pending = false;
    return (function () {
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i] = arguments[_i];
        }
        if (pending) {
            return;
        }
        pending = true;
        setTimeout(function () {
            pending = false;
        }, duration);
        fn.apply(void 0, tslib_1.__spread(args));
    });
}
/**
 * 获取限制了最大的宽度或高度后的图片的缩放大小
 * const max = Math.max(w, h, maxSize)
 * 当图片的宽度 === max 时，需要计算出等比情况下的图片高度；
 * 当图片的高度 === max 时，需要计算出等比情况下的图片宽度；
 * 否则返回原图片宽高。
 *
 * @param w 图片宽度
 * @param h 图片高度
 * @param maxSize 图片缩放的最大尺寸
 *
 * @example
 *
 * ```js
 * getImgWHByMax(100, 100, 200)
 * // => { w: 100, h: 100}
 * ```
 */
export function getImgWHByMax(w, h, maxSize) {
    var rate = w / h;
    var max = Math.max(w, h, maxSize);
    if (w === max) {
        return { w: maxSize, h: maxSize / rate };
    }
    else if (h === max) {
        return { w: maxSize * rate, h: maxSize };
    }
    else {
        return { w: w, h: h };
    }
}