sookie
662b22576d
Convert captcha vendor templates and DOM selectors from id-based tianai naming to class-based captcha naming. Update the shared captcha container, common tips/loading helpers, and slider/rotate/concat/disable/image-click implementations so template markup, DOM queries, and less selectors stay aligned. Keep captcha.js as the single style entry for the captcha module and remove per-component less imports from the submodule JavaScript files.
135 lines
3.8 KiB
JavaScript
135 lines
3.8 KiB
JavaScript
import {
|
|
CommonCaptcha,
|
|
down,
|
|
initConfig,
|
|
destroyEvent,
|
|
} from "../common/common.js";
|
|
|
|
/**
|
|
* 滑动验证码
|
|
*/
|
|
|
|
const TYPE = "ROTATE";
|
|
function getTemplate(styleConfig) {
|
|
return `
|
|
<div class="captcha captcha-slider captcha-rotate">
|
|
<div class="slider-tip">
|
|
<span class="captcha-slider-move-track-font" style="font-size: ${styleConfig.i18n.rotate_title_size}">${styleConfig.i18n.rotate_title}</span>
|
|
</div>
|
|
<div class="content">
|
|
<div class="bg-img-div">
|
|
<img class="captcha-slider-bg-img" src="" alt/>
|
|
<canvas class="captcha-slider-bg-canvas"></canvas>
|
|
</div>
|
|
<div class="rotate-img-div captcha-slider-img-div">
|
|
<img class="captcha-slider-move-img" src="" alt/>
|
|
</div>
|
|
<div class="captcha-tips"></div>
|
|
</div>
|
|
<div class="slider-move">
|
|
<div class="slider-move-track">
|
|
<div class="captcha-slider-move-track-mask"></div>
|
|
<div class="slider-move-shadow"></div>
|
|
</div>
|
|
<div class="slider-move-btn captcha-slider-move-btn">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
class Rotate extends CommonCaptcha {
|
|
constructor(boxEl, styleConfig) {
|
|
super();
|
|
this.boxEl = boxEl;
|
|
this.styleConfig = styleConfig;
|
|
this.type = TYPE;
|
|
this.currentCaptchaData = {};
|
|
}
|
|
init(captchaData, endCallback, loadSuccessCallback) {
|
|
// 重载样式
|
|
this.destroy();
|
|
this.boxEl.append(getTemplate(this.styleConfig));
|
|
this.el = this.boxEl.find(".captcha");
|
|
this.loadStyle();
|
|
// 按钮绑定事件
|
|
this.el
|
|
.find(".captcha-slider-move-btn")
|
|
.mousedown(down.bind(null, this));
|
|
this.el
|
|
.find(".captcha-slider-move-btn")
|
|
.touchstart(down.bind(null, this));
|
|
// 绑定全局
|
|
// window.currentCaptcha = this;
|
|
// 载入验证码
|
|
this.loadCaptchaForData(this, captchaData);
|
|
this.endCallback = endCallback;
|
|
if (loadSuccessCallback) {
|
|
// 加载成功
|
|
loadSuccessCallback(this);
|
|
}
|
|
return this;
|
|
}
|
|
|
|
destroy() {
|
|
const existsCaptchaEl = this.boxEl.children(".captcha");
|
|
if (existsCaptchaEl) {
|
|
existsCaptchaEl.remove();
|
|
}
|
|
destroyEvent();
|
|
}
|
|
doMove() {
|
|
const moveX = this.currentCaptchaData.moveX;
|
|
this.el
|
|
.find(".captcha-slider-move-btn")
|
|
.css("transform", "translate(" + moveX + "px, 0px)");
|
|
this.el
|
|
.find(".captcha-slider-move-img")
|
|
.css(
|
|
"transform",
|
|
"rotate(" + moveX / (this.currentCaptchaData.end / 360) + "deg)",
|
|
);
|
|
this.el
|
|
.find(".captcha-slider-move-track-mask")
|
|
.css("width", moveX + "px");
|
|
}
|
|
loadStyle() {
|
|
let sliderImg = "";
|
|
let moveTrackMaskBorderColor = "#00f4ab";
|
|
let moveTrackMaskBgColor = "#a9ffe5";
|
|
const styleConfig = this.styleConfig;
|
|
if (styleConfig) {
|
|
sliderImg = styleConfig.btnUrl;
|
|
moveTrackMaskBgColor = styleConfig.moveTrackMaskBgColor;
|
|
moveTrackMaskBorderColor = styleConfig.moveTrackMaskBorderColor;
|
|
}
|
|
this.el
|
|
.find(".slider-move .slider-move-btn")
|
|
.css("background-image", "url(" + sliderImg + ")");
|
|
// this.el.find(".captcha-slider-move-track-font").text(title);
|
|
this.el
|
|
.find(".captcha-slider-move-track-mask")
|
|
.css("border-color", moveTrackMaskBorderColor);
|
|
this.el
|
|
.find(".captcha-slider-move-track-mask")
|
|
.css("background-color", moveTrackMaskBgColor);
|
|
}
|
|
loadCaptchaForData(that, data) {
|
|
const bgImg = that.el.find(".captcha-slider-bg-img");
|
|
const sliderImg = that.el.find(".captcha-slider-move-img");
|
|
bgImg.attr("src", data.data.backgroundImage);
|
|
sliderImg.attr("src", data.data.templateImage);
|
|
bgImg.on("load", () => {
|
|
that.currentCaptchaData = initConfig(
|
|
bgImg.width(),
|
|
bgImg.height(),
|
|
sliderImg.width(),
|
|
sliderImg.height(),
|
|
300 - 63 + 5,
|
|
);
|
|
that.currentCaptchaData.currentCaptchaId = data.data.id;
|
|
});
|
|
}
|
|
}
|
|
|
|
export default Rotate;
|