@gdjiami/jslib/ie8/dom.js

Jiami FrontEnd helpers and Services

import _regeneratorRuntime from "@babel/runtime/regenerator";

/**
 * DOM 相关的函数
 */

/**
 * 隐藏元素
 * 运用于应用的开场动画或者动画切换
 *
 * @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 hide() {
    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 _regeneratorRuntime.async(function importScript$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          return _context.abrupt("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;
          }));

        case 1:
        case "end":
          return _context.stop();
      }
    }
  });
}
/**
 * 动态生成 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) {
  for (var _len = arguments.length, other = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
    other[_key - 1] = arguments[_key];
  }

  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 () {
    if (pending) {
      return;
    }

    pending = true;
    setTimeout(function () {
      pending = false;
    }, duration);
    fn.apply(void 0, arguments);
  };
}
/**
 * 获取限制了最大的宽度或高度后的图片的缩放大小
 * 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
    };
  }
}