t-comm
Version:
专业、稳定、纯粹的工具库
247 lines (240 loc) • 7.05 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
var _createClass = require('@babel/runtime/helpers/createClass');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
var MorsePwd = /*#__PURE__*/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) {
_classCallCheck__default["default"](this, MorsePwd);
var DEFAULT_CODE_MAP = {
CLICK: 1,
LONG_PRESS: 2
};
var pwd = options.pwd,
cb = options.cb,
_options$quiet = options.quiet,
quiet = _options$quiet === void 0 ? false : _options$quiet,
_options$holdTime = options.holdTime,
holdTime = _options$holdTime === void 0 ? 5000 : _options$holdTime,
_options$envType = options.envType,
envType = _options$envType === void 0 ? 'H5' : _options$envType,
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();
}
}
return _createClass__default["default"](MorsePwd, [{
key: "bindEvent",
value: function bindEvent() {
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));
}
}, {
key: "onTouchStart",
value: function onTouchStart() {
var _this = this;
clearTimeout(this.longPressTimer);
this.longPressTimer = setTimeout(function () {
// 处理长按事件
_this.log('longPress');
_this.isLongTouch = true;
_this.longPress();
}, 350);
}
}, {
key: "onTouchEnd",
value: function onTouchEnd() {
clearTimeout(this.longPressTimer);
if (this.isLongTouch) {
// 重置标志位
this.isLongTouch = false;
} else {
// 处理点击事件
this.log('click');
this.click();
}
}
}, {
key: "onTouchMove",
value: function onTouchMove() {
clearTimeout(this.longPressTimer);
}
/**
* 清除监听事件
* @example
* beforeDestroy() {
* this.morsePwd.clear();
* }
*/
}, {
key: "clear",
value: function clear() {
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));
}
}, {
key: "operation",
value: function operation(type) {
var _this2 = 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 () {
_this2.reset();
}, this.holdTime);
}
} else {
this.reset();
}
}
}, {
key: "reset",
value: function reset() {
this.curIdx = 0;
}
}, {
key: "click",
value: function click() {
this.operation(this.clickCode);
}
}, {
key: "suc",
value: function suc() {
if (typeof this.cb === 'function') {
this.cb();
this.reset();
}
}
}, {
key: "longPress",
value: function longPress() {
this.operation(this.longPressCode);
}
}, {
key: "log",
value: function log() {
var _console;
if (this.quiet) return;
(_console = console).log.apply(_console, arguments);
}
}], [{
key: "init",
value:
/**
* 初始化
* @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实例
*/
function init(options) {
return new MorsePwd(options);
}
}]);
}();
exports.MorsePwd = MorsePwd;