/** * Plugin: 图片旋转验证; * @example * pc: * let ImgCheck = require('path/to/img-check') * let imgCheck = new ImgCheck('#js-img-check', { * template: require('path/to/hbs'), * refreshURI: 'path/to/refresh/src' * }) * * imgCheck.init() * * imgCheck.getResult() // '1230' *- ---------------------------------------- * @example * wap: * let imgCheck = new ImgCheck('#js-img-check', { * useREM: { * rootFontSize: 40, * picWidth: 150 * } * }) * imgCheck.init() * * imgCheck.getResult() // '1112' */ /** * @param selector|jQuery|Element container * @param object options 配置选项 * pc: * { * template, * refreshURI * } * * wap: * { * useREM: { * rootFontSize, // 设计稿基准字体大小 * picWidth // 设计稿的验证图片宽度 * }, * template, * refreshURI * } * * @param object data 初始值 * { * imgSrc: '图片src' * } * */ const ImgCheck = function(container, options) { let optionDefault = { useREM: null, template: require('common/img-check.hbs'), refreshURI: '/passport/captcha/get', imgProcess: '', }; $.extend(this, optionDefault, options); this.$container = $(container); this.$imgCheck = null; this.$imgPics = null; this.picWidth = null; this.atWorking = false; return this; }; ImgCheck.prototype = { init: function() { if (this.atWorking) { return; } let self = this; if (this.useREM) { this.picWidth = this.useREM.picWidth / this.useREM.rootFontSize; } this.refresh(); self.bindEvents(); this.atWorking = true; }, /** * method: 绑定事件 */ bindEvents: function() { this.$container .on('click.refresh', '.img-check-refresh', $.proxy(this.refresh, this)) .on('click.rotate', '.img-check-pic', $.proxy(this.rotateImg, this)); }, /** * method: 渲染 dom * @param obj data 渲染数据 * { * imgSrc: 'src' //图片src * } */ render: function(data) { let self = this; this.$container.html(this.template(data)); this.$imgPics = this.$container.find('.img-check-pic'); if (!this.useREM && !this.picWidth) { this.picWidth = this.$imgPics.width(); } this.$imgPics.each(function(index, elem) { let $elem = $(elem); let position = self.calcPosition($elem); $elem.css('backgroundPosition', position); }); }, /** * method: 计算 background-position * @param num index img-check-pic 的index * @param num count img-check-pic */ calcPosition: function($elem) { let positionX, positionY; let index = $elem.index(); let count = parseInt($elem.attr('data-val'), 10); let unit = this.useREM ? 'rem' : 'px'; count = count % 4; positionX = -index * this.picWidth + unit; positionY = -count * this.picWidth + unit; return [positionX, positionY].join(' '); }, /** * Handler method: 刷新验证码 */ refresh: function() { const self = this; self.render({imgSrc: `/passport/img-check.jpg?t=${Date.now()}`}); }, /** * Handler method: 旋转图片 */ rotateImg: function(event) { let $pic = $(event.target); let prevRotateCount = parseInt($pic.attr('data-val'), 10); $pic.attr('data-val', prevRotateCount + 1); $pic.css({ backgroundPosition: this.calcPosition($pic) }); }, /** * method: 获取结果 * @return string '0123' */ getResults: function() { let result = []; this.$container.find('.img-check-pic') .each(function() { let $elem = $(this); let val = $elem.attr('data-val'); val = parseInt(val, 10); result.push(val % 4); }); return result.join(','); } }; ImgCheck.prototype.construct = ImgCheck; module.exports = ImgCheck;