t-comm/es/morse-pwd/morse-pwd.mjs

专业、稳定、纯粹的工具库

var MorsePwd = /** @class */function () {
  /**
   * 摩斯密码初始化
   * @constructor
   * @param {Object} options 选项
   * @param {Array<number>} options.pwd 密码
   * @param {Function} options.cb 成功回调
   * @param {Boolean} options.quiet 是否安静模式（不打印日志）
   * @param {number} options.holdTime 等待多久后就恢复原位
   * @param {'H5' | 'h5' | 'mp' | 'MP'} options.envType 环境类型
   * @param {String} options.selector h5模式下的选择器
   */
  function MorsePwd(options) {
    var DEFAULT_CODE_MAP = {
      CLICK: 1,
      LONG_PRESS: 2
    };
    var pwd = options.pwd,
      cb = options.cb,
      _a = options.quiet,
      quiet = _a === void 0 ? false : _a,
      _b = options.holdTime,
      holdTime = _b === void 0 ? 5000 : _b,
      _c = options.envType,
      envType = _c === void 0 ? 'H5' : _c,
      selector = options.selector;
    this.pwd = pwd || [];
    this.cb = cb;
    this.holdTime = holdTime;
    this.quiet = quiet;
    this.selector = selector;
    this.envType = envType;
    this.clickCode = DEFAULT_CODE_MAP.CLICK;
    this.longPressCode = DEFAULT_CODE_MAP.LONG_PRESS;
    this.curIdx = 0;
    this.holdTimer = null;
    this.h5Dom = null;
    this.longPressTimer = null;
    this.isLongTouch = false;
    if (this.envType === 'H5') {
      this.bindEvent();
    }
  }
  /**
   * 初始化
   * @static
   * @param {Object} options 选项
   * @param {Array<number>} options.pwd 密码
   * @param {Function} options.cb 成功回调
   * @param {Boolean} options.quiet 是否安静模式（不打印日志）
   * @param {number} options.holdTime 等待多久后就恢复原位
   * @param {'H5' | 'h5' | 'mp' | 'MP'} options.envType 环境类型
   * @param {String} options.selector h5模式下的选择器
   *
   * @example <caption>小程序环境</caption>
   * <template>
   *   <div
   *     class="tip-match-header"
   *     /@longpress="onLongPressWrap"
   *     /@click.stop="onClickWrap"
   *   >
   * </template>
   *
   * <script>
   * export default {
   *   data() {
   *     return {
   *       morsePwd: null,
   *     };
   *   },
   *   mounted() {
   *     this.morsePwd = MorsePwd.init({
   *       pwd: [1, 1, 1, 2, 2, 2, 1, 1, 1],
   *       cb: () => {
   *         this.showToast('hhh');
   *       },
   *       envType: 'MP',
   *     });
   *   },
   *   beforeDestroy() {
   *     this.morsePwd.clear();
   *   },
   *   methods: {
   *     onLongPressWrap() {
   *       this.morsePwd.longPress();
   *     },
   *     onClickWrap() {
   *       this.morsePwd.click();
   *     },
   *   }
   * }
   * </script>
   * @example <caption>H5环境</caption>
   * <script>
   * export default {
   *   data() {
   *     return {
   *       morsePwd: null,
   *     };
   *   },
   *   mounted() {
   *     this.morsePwd = MorsePwd.init({
   *       pwd: [1, 1, 1, 2, 2, 2, 1, 1, 1],
   *       cb: () => {
   *         this.showToast('xxx');
   *       },
   *       selector: '#app',
   *       envType: 'H5',
   *     });
   *   },
   *   beforeDestroy() {
   *     this.morsePwd.clear();
   *   },
   * }
   * </script>
   *
   * @returns {Object} MorsePwd实例
   */
  MorsePwd.init = function (options) {
    return new MorsePwd(options);
  };
  MorsePwd.prototype.bindEvent = function () {
    if (!this.selector) return;
    this.h5Dom = document.querySelector(this.selector);
    if (!this.h5Dom) return;
    this.h5Dom.addEventListener('touchstart', this.onTouchStart.bind(this));
    this.h5Dom.addEventListener('touchend', this.onTouchEnd.bind(this));
    this.h5Dom.addEventListener('touchmove', this.onTouchMove.bind(this));
  };
  MorsePwd.prototype.onTouchStart = function () {
    var _this = this;
    clearTimeout(this.longPressTimer);
    this.longPressTimer = setTimeout(function () {
      // 处理长按事件
      _this.log('longPress');
      _this.isLongTouch = true;
      _this.longPress();
    }, 350);
  };
  MorsePwd.prototype.onTouchEnd = function () {
    clearTimeout(this.longPressTimer);
    if (this.isLongTouch) {
      // 重置标志位
      this.isLongTouch = false;
    } else {
      // 处理点击事件
      this.log('click');
      this.click();
    }
  };
  MorsePwd.prototype.onTouchMove = function () {
    clearTimeout(this.longPressTimer);
  };
  /**
   * 清除监听事件
   * @example
   * beforeDestroy() {
   *   this.morsePwd.clear();
   * }
   */
  MorsePwd.prototype.clear = function () {
    if (!this.h5Dom) return;
    this.h5Dom.removeEventListener('touchstart', this.onTouchStart.bind(this));
    this.h5Dom.removeEventListener('touchend', this.onTouchEnd.bind(this));
    this.h5Dom.removeEventListener('touchmove', this.onTouchMove.bind(this));
  };
  MorsePwd.prototype.operation = function (type) {
    var _this = this;
    this.log("type: ".concat(type, ", curIdx: ").concat(this.curIdx, ", pwd: ").concat(this.pwd));
    clearTimeout(this.holdTimer);
    if (this.pwd[this.curIdx] === type) {
      this.curIdx += 1;
      if (this.curIdx === this.pwd.length) {
        this.suc();
      } else {
        clearTimeout(this.holdTimer);
        this.holdTimer = setTimeout(function () {
          _this.reset();
        }, this.holdTime);
      }
    } else {
      this.reset();
    }
  };
  MorsePwd.prototype.reset = function () {
    this.curIdx = 0;
  };
  MorsePwd.prototype.click = function () {
    this.operation(this.clickCode);
  };
  MorsePwd.prototype.suc = function () {
    if (typeof this.cb === 'function') {
      this.cb();
      this.reset();
    }
  };
  MorsePwd.prototype.longPress = function () {
    this.operation(this.longPressCode);
  };
  MorsePwd.prototype.log = function () {
    var args = [];
    for (var _i = 0; _i < arguments.length; _i++) {
      args[_i] = arguments[_i];
    }
    if (this.quiet) return;
    console.log.apply(console, args);
  };
  return MorsePwd;
}();

export { MorsePwd };