refactor: simplify captcha selector naming
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.
This commit is contained in:
parent
e0f6175fed
commit
662b22576d
GPG Key ID:
0599BECB75C1E68D
26
src/vendor/tianai-captcha/captcha/captcha.js
vendored
26
src/vendor/tianai-captcha/captcha/captcha.js
vendored
@ -8,20 +8,20 @@ import WordImageClick from "./word_image_click/word_image_click";
|
||||
import { CaptchaConfig, wrapConfig, wrapStyle } from "./config/config";
|
||||
import { clearAllPreventDefault } from "./common/common";
|
||||
const template = `
|
||||
<div id="tianai-captcha-parent">
|
||||
<div id="tianai-captcha-bg-img"></div>
|
||||
<div id="tianai-captcha-box">
|
||||
<div id="tianai-captcha-loading" class="loading"></div>
|
||||
<div class="captcha-parent">
|
||||
<div class="captcha-bg-img"></div>
|
||||
<div class="captcha-box">
|
||||
<div class="captcha-loading loading"></div>
|
||||
</div>
|
||||
<!-- 底部 -->
|
||||
<div class="slider-bottom">
|
||||
<div class="refresh-btn" id="tianai-captcha-slider-refresh-btn"></div>
|
||||
<div class="close-btn" id="tianai-captcha-slider-close-btn"></div>
|
||||
<div class="refresh-btn"></div>
|
||||
<div class="close-btn"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
function createCaptchaByType(type, tac) {
|
||||
const box = tac.config.domBindEl.find("#tianai-captcha-box");
|
||||
const box = tac.config.domBindEl.find(".captcha-box");
|
||||
const styleConfig = tac.style;
|
||||
switch (type) {
|
||||
case "SLIDER":
|
||||
@ -55,17 +55,17 @@ class TianAiCaptcha {
|
||||
init() {
|
||||
this.destroyWindow();
|
||||
this.config.domBindEl.append(template);
|
||||
this.domTemplate = this.config.domBindEl.find("#tianai-captcha-parent");
|
||||
this.domTemplate = this.config.domBindEl.find(".captcha-parent");
|
||||
clearAllPreventDefault(this.domTemplate);
|
||||
this.loadStyle();
|
||||
// 绑定按钮事件
|
||||
this.config.domBindEl
|
||||
.find("#tianai-captcha-slider-refresh-btn")
|
||||
.find(".refresh-btn")
|
||||
.click((el) => {
|
||||
this.btnRefreshFun(el, this);
|
||||
});
|
||||
this.config.domBindEl
|
||||
.find("#tianai-captcha-slider-close-btn")
|
||||
.find(".close-btn")
|
||||
.click((el) => {
|
||||
this.btnCloseFun(el, this);
|
||||
});
|
||||
@ -88,13 +88,13 @@ class TianAiCaptcha {
|
||||
}
|
||||
showLoading() {
|
||||
this.config.domBindEl
|
||||
.find("#tianai-captcha-loading")
|
||||
.find(".captcha-loading")
|
||||
.css("display", "block");
|
||||
}
|
||||
|
||||
closeLoading() {
|
||||
this.config.domBindEl
|
||||
.find("#tianai-captcha-loading")
|
||||
.find(".captcha-loading")
|
||||
.css("display", "none");
|
||||
}
|
||||
|
||||
@ -104,7 +104,7 @@ class TianAiCaptcha {
|
||||
if (bgUrl) {
|
||||
// 背景图片
|
||||
this.config.domBindEl
|
||||
.find("#tianai-captcha-bg-img")
|
||||
.find(".captcha-bg-img")
|
||||
.css("background-image", "url(" + bgUrl + ")");
|
||||
}
|
||||
}
|
||||
|
||||
16
src/vendor/tianai-captcha/captcha/captcha.less
vendored
16
src/vendor/tianai-captcha/captcha/captcha.less
vendored
@ -1,4 +1,4 @@
|
||||
#tianai-captcha-parent {
|
||||
.captcha-parent {
|
||||
box-shadow: 0 0 11px 0 #999999;
|
||||
width: 318px;
|
||||
overflow: hidden;
|
||||
@ -7,7 +7,7 @@
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
padding: 8px;
|
||||
#tianai-captcha-box {
|
||||
.captcha-box {
|
||||
height: 260px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
@ -25,14 +25,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
#tianai-captcha {
|
||||
.captcha {
|
||||
transform-style: preserve-3d;
|
||||
will-change: transform;
|
||||
transition-duration: 0.45s;
|
||||
transform: translateX(-300px);
|
||||
}
|
||||
}
|
||||
#tianai-captcha-bg-img {
|
||||
.captcha-bg-img {
|
||||
background-color: #fff;
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
@ -78,7 +78,7 @@
|
||||
box-shadow: 1px 1px 1px #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#tianai-captcha-slider-move-track-mask {
|
||||
.captcha-slider-move-track-mask {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #00f4ab;
|
||||
@ -92,4 +92,10 @@
|
||||
left: -1px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
@import "./common/common.less";
|
||||
@import "./slider/slider.less";
|
||||
@import "./rotate/rotate.less";
|
||||
@import "./concat/concat.less";
|
||||
@import "./disable/disable.less";
|
||||
@import "./image_click/image_click.less";
|
||||
}
|
||||
|
||||
@ -191,10 +191,10 @@ function initConfig(
|
||||
}
|
||||
|
||||
function closeTips(el, callback) {
|
||||
const tipEl = Dom(el).find("#tianai-captcha-tips");
|
||||
tipEl.removeClass("tianai-captcha-tips-on");
|
||||
// tipEl.removeClass("tianai-captcha-tips-success")
|
||||
// tipEl.removeClass("tianai-captcha-tips-error")
|
||||
const tipEl = Dom(el).find(".captcha-tips");
|
||||
tipEl.removeClass("captcha-tips-on");
|
||||
// tipEl.removeClass("captcha-tips-success")
|
||||
// tipEl.removeClass("captcha-tips-error")
|
||||
// 延时
|
||||
if (callback) {
|
||||
setTimeout(callback, 0.35);
|
||||
@ -202,18 +202,18 @@ function closeTips(el, callback) {
|
||||
}
|
||||
|
||||
function showTips(el, msg, type, callback) {
|
||||
const tipEl = Dom(el).find("#tianai-captcha-tips");
|
||||
const tipEl = Dom(el).find(".captcha-tips");
|
||||
tipEl.text(msg);
|
||||
if (type === 1) {
|
||||
// 成功
|
||||
tipEl.removeClass("tianai-captcha-tips-error");
|
||||
tipEl.addClass("tianai-captcha-tips-success");
|
||||
tipEl.removeClass("captcha-tips-error");
|
||||
tipEl.addClass("captcha-tips-success");
|
||||
} else {
|
||||
// 失败
|
||||
tipEl.removeClass("tianai-captcha-tips-success");
|
||||
tipEl.addClass("tianai-captcha-tips-error");
|
||||
tipEl.removeClass("captcha-tips-success");
|
||||
tipEl.addClass("captcha-tips-error");
|
||||
}
|
||||
tipEl.addClass("tianai-captcha-tips-on");
|
||||
tipEl.addClass("captcha-tips-on");
|
||||
// 延时
|
||||
setTimeout(callback, 1000);
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
#tianai-captcha {
|
||||
.captcha {
|
||||
text-align: left;
|
||||
box-sizing: content-box;
|
||||
width: 300px;
|
||||
@ -12,7 +12,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
.content {
|
||||
.tianai-captcha-tips {
|
||||
.captcha-tips {
|
||||
height: 25px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
@ -29,17 +29,17 @@
|
||||
/* transition: max-height 0.5s; */
|
||||
transition: bottom 0.3s ease-in-out;
|
||||
}
|
||||
.tianai-captcha-tips.tianai-captcha-tips-error {
|
||||
.captcha-tips.captcha-tips-error {
|
||||
background-color: #ff5d39;
|
||||
}
|
||||
.tianai-captcha-tips.tianai-captcha-tips-success {
|
||||
.captcha-tips.captcha-tips-success {
|
||||
background-color: #39c522;
|
||||
}
|
||||
.tianai-captcha-tips.tianai-captcha-tips-on {
|
||||
.captcha-tips.captcha-tips-on {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#tianai-captcha-loading {
|
||||
.captcha-loading {
|
||||
z-index: 9999;
|
||||
background-color: #f5f5f5;
|
||||
text-align: center;
|
||||
@ -56,7 +56,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
#tianai-captcha-slider-bg-canvas {
|
||||
.captcha-slider-bg-canvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -64,13 +64,13 @@
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#tianai-captcha-slider-bg-div {
|
||||
.captcha-slider-bg-div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.tianai-captcha-slider-bg-div-slice {
|
||||
.captcha-slider-bg-div-slice {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
import "../common/common.less";
|
||||
import "../slider/slider.less";
|
||||
import "./concat.less";
|
||||
import {
|
||||
Dom,
|
||||
CommonCaptcha,
|
||||
@ -14,23 +11,23 @@ const TYPE = "CONCAT";
|
||||
|
||||
function getTemplate(styleConfig) {
|
||||
return `
|
||||
<div id="tianai-captcha" class="tianai-captcha-slider tianai-captcha-concat">
|
||||
<div class="captcha captcha-slider captcha-concat">
|
||||
<div class="slider-tip">
|
||||
<span id="tianai-captcha-slider-move-track-font" >拖动滑块完成拼图</span>
|
||||
<span class="captcha-slider-move-track-font" >拖动滑块完成拼图</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="tianai-captcha-slider-concat-img-div" id="tianai-captcha-slider-concat-img-div">
|
||||
<img id="tianai-captcha-slider-concat-slider-img" src="" alt/>
|
||||
<div class="captcha-slider-concat-img-div">
|
||||
<img class="captcha-slider-concat-slider-img" src="" alt/>
|
||||
</div>
|
||||
<div class="tianai-captcha-slider-concat-bg-img"></div>
|
||||
<div class="tianai-captcha-tips" id="tianai-captcha-tips"></div>
|
||||
<div class="captcha-slider-concat-bg-img"></div>
|
||||
<div class="captcha-tips"></div>
|
||||
</div>
|
||||
<div class="slider-move">
|
||||
<div class="slider-move-track">
|
||||
<div id="tianai-captcha-slider-move-track-mask"></div>
|
||||
<div class="captcha-slider-move-track-mask"></div>
|
||||
<div class="slider-move-shadow"></div>
|
||||
</div>
|
||||
<div class="slider-move-btn" id="tianai-captcha-slider-move-btn">
|
||||
<div class="slider-move-btn captcha-slider-move-btn">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -50,14 +47,14 @@ class Concat extends CommonCaptcha {
|
||||
// 重载样式
|
||||
this.destroy();
|
||||
this.boxEl.append(getTemplate(this.styleConfig));
|
||||
this.el = this.boxEl.find("#tianai-captcha");
|
||||
this.el = this.boxEl.find(".captcha");
|
||||
this.loadStyle();
|
||||
// 按钮绑定事件
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-btn")
|
||||
.find(".captcha-slider-move-btn")
|
||||
.mousedown(down.bind(null, this));
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-btn")
|
||||
.find(".captcha-slider-move-btn")
|
||||
.touchstart(down.bind(null, this));
|
||||
clearAllPreventDefault(this.el);
|
||||
// 绑定全局
|
||||
@ -74,7 +71,7 @@ class Concat extends CommonCaptcha {
|
||||
|
||||
destroy() {
|
||||
destroyEvent();
|
||||
const existsCaptchaEl = this.boxEl.children("#tianai-captcha");
|
||||
const existsCaptchaEl = this.boxEl.children(".captcha");
|
||||
if (existsCaptchaEl) {
|
||||
existsCaptchaEl.remove();
|
||||
}
|
||||
@ -83,13 +80,13 @@ class Concat extends CommonCaptcha {
|
||||
doMove() {
|
||||
const moveX = this.currentCaptchaData.moveX;
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-btn")
|
||||
.find(".captcha-slider-move-btn")
|
||||
.css("transform", "translate(" + moveX + "px, 0px)");
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-concat-img-div")
|
||||
.find(".captcha-slider-concat-img-div")
|
||||
.css("background-position-x", moveX + "px");
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-track-mask")
|
||||
.find(".captcha-slider-move-track-mask")
|
||||
.css("width", moveX + "px");
|
||||
}
|
||||
|
||||
@ -106,18 +103,18 @@ class Concat extends CommonCaptcha {
|
||||
this.el
|
||||
.find(".slider-move .slider-move-btn")
|
||||
.css("background-image", "url(" + sliderImg + ")");
|
||||
// this.el.find("#tianai-captcha-slider-move-track-font").text(title);
|
||||
// this.el.find(".captcha-slider-move-track-font").text(title);
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-track-mask")
|
||||
.find(".captcha-slider-move-track-mask")
|
||||
.css("border-color", moveTrackMaskBorderColor);
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-track-mask")
|
||||
.find(".captcha-slider-move-track-mask")
|
||||
.css("background-color", moveTrackMaskBgColor);
|
||||
}
|
||||
|
||||
loadCaptchaForData(that, data) {
|
||||
const bgImg = that.el.find(".tianai-captcha-slider-concat-bg-img");
|
||||
const sliderImg = that.el.find("#tianai-captcha-slider-concat-img-div");
|
||||
const bgImg = that.el.find(".captcha-slider-concat-bg-img");
|
||||
const sliderImg = that.el.find(".captcha-slider-concat-img-div");
|
||||
bgImg.css("background-image", "url(" + data.data.backgroundImage + ")");
|
||||
sliderImg.css("background-image", "url(" + data.data.backgroundImage + ")");
|
||||
sliderImg.css("background-position", "0px 0px");
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
#tianai-captcha.tianai-captcha-concat {
|
||||
.tianai-captcha-slider-concat-img-div {
|
||||
.captcha.captcha-concat {
|
||||
.captcha-slider-concat-img-div {
|
||||
background-size: 100% 180px;
|
||||
position: absolute;
|
||||
transform: translate(0px, 0px);
|
||||
@ -7,7 +7,7 @@
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
}
|
||||
.tianai-captcha-slider-concat-bg-img {
|
||||
.captcha-slider-concat-bg-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
const TYPE = "DISABLE";
|
||||
import "./disable.less";
|
||||
|
||||
function getTemplate(styleConfig) {
|
||||
return `
|
||||
<div id="tianai-captcha" class="tianai-captcha-disable">
|
||||
<div class="captcha captcha-disable">
|
||||
<div class="slider-tip">
|
||||
<span id="tianai-captcha-slider-move-track-font" style="font-size: ${styleConfig.i18n.disable_title_size}">${styleConfig.i18n.disable_title}</span>
|
||||
<span class="captcha-slider-move-track-font" style="font-size: ${styleConfig.i18n.disable_title_size}">${styleConfig.i18n.disable_title}</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="bg-img-div">
|
||||
@ -13,7 +12,7 @@ function getTemplate(styleConfig) {
|
||||
<!-- <polygon points="50,10 90,90 10,90" fill="none" stroke="#FF9900" stroke-width="4"/>-->
|
||||
<!-- <path d="M50 35V65 M50 75V75" stroke="#FF9900" stroke-width="4" stroke-linecap="round"/>-->
|
||||
<!-- </svg>-->
|
||||
<span id="content-span"></span>
|
||||
<span class="content-span"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -30,7 +29,7 @@ class Disable {
|
||||
// 重载样式
|
||||
this.destroy();
|
||||
this.boxEl.append(getTemplate(this.styleConfig));
|
||||
this.el = this.boxEl.find("#tianai-captcha");
|
||||
this.el = this.boxEl.find(".captcha");
|
||||
// 绑定全局
|
||||
// window.currentCaptcha = this;
|
||||
// 载入验证码
|
||||
@ -44,14 +43,14 @@ class Disable {
|
||||
}
|
||||
|
||||
destroy() {
|
||||
const existsCaptchaEl = this.boxEl.find("#tianai-captcha");
|
||||
const existsCaptchaEl = this.boxEl.find(".captcha");
|
||||
if (existsCaptchaEl) {
|
||||
existsCaptchaEl.remove();
|
||||
}
|
||||
}
|
||||
loadCaptchaForData(that, data) {
|
||||
const msg = data.msg || data.message || "接口异常";
|
||||
that.el.find("#content-span").text(msg);
|
||||
that.el.find(".content-span").text(msg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
#tianai-captcha.tianai-captcha-disable {
|
||||
.captcha.captcha-disable {
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -13,7 +13,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
#content-span {
|
||||
.content-span {
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
margin-top: 132px;
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "./image_click.less";
|
||||
import {
|
||||
CommonCaptcha,
|
||||
move,
|
||||
@ -13,18 +12,18 @@ import {
|
||||
const TYPE = "IMAGE_CLICK";
|
||||
function getTemplate(styleConfig) {
|
||||
return `
|
||||
<div id="tianai-captcha" class="tianai-captcha-slider tianai-captcha-word-click">
|
||||
<div class="captcha captcha-slider captcha-word-click">
|
||||
<div class="click-tip">
|
||||
<span id="tianai-captcha-click-track-font" style="font-size: ${styleConfig.i18n.image_click_title_size}">${styleConfig.i18n.image_click_title}</span>
|
||||
<img src="" id="tianai-captcha-tip-img" class="tip-img">
|
||||
<span class="captcha-click-track-font" style="font-size: ${styleConfig.i18n.image_click_title_size}">${styleConfig.i18n.image_click_title}</span>
|
||||
<img src="" class="captcha-tip-img tip-img">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="bg-img-div">
|
||||
<img id="tianai-captcha-slider-bg-img" src="" alt/>
|
||||
<canvas id="tianai-captcha-slider-bg-canvas"></canvas>
|
||||
<div id="bg-img-click-mask"></div>
|
||||
<img class="captcha-slider-bg-img" src="" alt/>
|
||||
<canvas class="captcha-slider-bg-canvas"></canvas>
|
||||
<div class="bg-img-click-mask"></div>
|
||||
</div>
|
||||
<div class="tianai-captcha-tips" id="tianai-captcha-tips"></div>
|
||||
<div class="captcha-tips"></div>
|
||||
</div>
|
||||
<div class="click-confirm-btn">确定</div>
|
||||
</div>
|
||||
@ -42,7 +41,7 @@ class ImageClick extends CommonCaptcha {
|
||||
// 重载样式
|
||||
this.destroy();
|
||||
this.boxEl.append(getTemplate(this.styleConfig));
|
||||
this.el = this.boxEl.find("#tianai-captcha");
|
||||
this.el = this.boxEl.find(".captcha");
|
||||
// 绑定全局
|
||||
// window.currentCaptcha = this;
|
||||
// 载入验证码
|
||||
@ -50,7 +49,7 @@ class ImageClick extends CommonCaptcha {
|
||||
this.endCallback = endCallback;
|
||||
const moveFun = move.bind(null, this);
|
||||
// 绑定事件
|
||||
this.el.find("#bg-img-click-mask").click((event) => {
|
||||
this.el.find(".bg-img-click-mask").click((event) => {
|
||||
if (event.target.className === "click-span") {
|
||||
return;
|
||||
}
|
||||
@ -73,7 +72,7 @@ class ImageClick extends CommonCaptcha {
|
||||
const left = event.offsetX - 10;
|
||||
const top = event.offsetY - 10;
|
||||
this.el
|
||||
.find("#bg-img-click-mask")
|
||||
.find(".bg-img-click-mask")
|
||||
.append(
|
||||
"<span class='click-span' style='left:" +
|
||||
left +
|
||||
@ -106,15 +105,15 @@ class ImageClick extends CommonCaptcha {
|
||||
return this;
|
||||
}
|
||||
destroy() {
|
||||
const existsCaptchaEl = this.boxEl.children("#tianai-captcha");
|
||||
const existsCaptchaEl = this.boxEl.children(".captcha");
|
||||
if (existsCaptchaEl) {
|
||||
existsCaptchaEl.remove();
|
||||
}
|
||||
destroyEvent();
|
||||
}
|
||||
loadCaptchaForData(that, data) {
|
||||
const bgImg = that.el.find("#tianai-captcha-slider-bg-img");
|
||||
const tipImg = that.el.find("#tianai-captcha-tip-img");
|
||||
const bgImg = that.el.find(".captcha-slider-bg-img");
|
||||
const tipImg = that.el.find(".captcha-tip-img");
|
||||
bgImg.on("load", () => {
|
||||
that.currentCaptchaData = initConfig(
|
||||
bgImg.width(),
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
#tianai-captcha.tianai-captcha-word-click {
|
||||
.captcha.captcha-word-click {
|
||||
box-sizing: border-box;
|
||||
.click-tip {
|
||||
position: relative;
|
||||
@ -9,7 +9,7 @@
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
#tianai-captcha-click-track-font {
|
||||
.captcha-click-track-font {
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
@ -22,7 +22,7 @@
|
||||
top: 6px;
|
||||
}
|
||||
.content {
|
||||
#bg-img-click-mask {
|
||||
.bg-img-click-mask {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import "../slider/slider.less";
|
||||
import "./rotate.less";
|
||||
import {
|
||||
CommonCaptcha,
|
||||
down,
|
||||
@ -14,26 +12,26 @@ import {
|
||||
const TYPE = "ROTATE";
|
||||
function getTemplate(styleConfig) {
|
||||
return `
|
||||
<div id="tianai-captcha" class="tianai-captcha-slider tianai-captcha-rotate">
|
||||
<div class="captcha captcha-slider captcha-rotate">
|
||||
<div class="slider-tip">
|
||||
<span id="tianai-captcha-slider-move-track-font" style="font-size: ${styleConfig.i18n.rotate_title_size}">${styleConfig.i18n.rotate_title}</span>
|
||||
<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 id="tianai-captcha-slider-bg-img" src="" alt/>
|
||||
<canvas id="tianai-captcha-slider-bg-canvas"></canvas>
|
||||
<img class="captcha-slider-bg-img" src="" alt/>
|
||||
<canvas class="captcha-slider-bg-canvas"></canvas>
|
||||
</div>
|
||||
<div class="rotate-img-div" id="tianai-captcha-slider-img-div">
|
||||
<img id="tianai-captcha-slider-move-img" src="" alt/>
|
||||
<div class="rotate-img-div captcha-slider-img-div">
|
||||
<img class="captcha-slider-move-img" src="" alt/>
|
||||
</div>
|
||||
<div class="tianai-captcha-tips" id="tianai-captcha-tips"></div>
|
||||
<div class="captcha-tips"></div>
|
||||
</div>
|
||||
<div class="slider-move">
|
||||
<div class="slider-move-track">
|
||||
<div id="tianai-captcha-slider-move-track-mask"></div>
|
||||
<div class="captcha-slider-move-track-mask"></div>
|
||||
<div class="slider-move-shadow"></div>
|
||||
</div>
|
||||
<div class="slider-move-btn" id="tianai-captcha-slider-move-btn">
|
||||
<div class="slider-move-btn captcha-slider-move-btn">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -51,14 +49,14 @@ class Rotate extends CommonCaptcha {
|
||||
// 重载样式
|
||||
this.destroy();
|
||||
this.boxEl.append(getTemplate(this.styleConfig));
|
||||
this.el = this.boxEl.find("#tianai-captcha");
|
||||
this.el = this.boxEl.find(".captcha");
|
||||
this.loadStyle();
|
||||
// 按钮绑定事件
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-btn")
|
||||
.find(".captcha-slider-move-btn")
|
||||
.mousedown(down.bind(null, this));
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-btn")
|
||||
.find(".captcha-slider-move-btn")
|
||||
.touchstart(down.bind(null, this));
|
||||
// 绑定全局
|
||||
// window.currentCaptcha = this;
|
||||
@ -73,7 +71,7 @@ class Rotate extends CommonCaptcha {
|
||||
}
|
||||
|
||||
destroy() {
|
||||
const existsCaptchaEl = this.boxEl.children("#tianai-captcha");
|
||||
const existsCaptchaEl = this.boxEl.children(".captcha");
|
||||
if (existsCaptchaEl) {
|
||||
existsCaptchaEl.remove();
|
||||
}
|
||||
@ -82,16 +80,16 @@ class Rotate extends CommonCaptcha {
|
||||
doMove() {
|
||||
const moveX = this.currentCaptchaData.moveX;
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-btn")
|
||||
.find(".captcha-slider-move-btn")
|
||||
.css("transform", "translate(" + moveX + "px, 0px)");
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-img")
|
||||
.find(".captcha-slider-move-img")
|
||||
.css(
|
||||
"transform",
|
||||
"rotate(" + moveX / (this.currentCaptchaData.end / 360) + "deg)",
|
||||
);
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-track-mask")
|
||||
.find(".captcha-slider-move-track-mask")
|
||||
.css("width", moveX + "px");
|
||||
}
|
||||
loadStyle() {
|
||||
@ -107,17 +105,17 @@ class Rotate extends CommonCaptcha {
|
||||
this.el
|
||||
.find(".slider-move .slider-move-btn")
|
||||
.css("background-image", "url(" + sliderImg + ")");
|
||||
// this.el.find("#tianai-captcha-slider-move-track-font").text(title);
|
||||
// this.el.find(".captcha-slider-move-track-font").text(title);
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-track-mask")
|
||||
.find(".captcha-slider-move-track-mask")
|
||||
.css("border-color", moveTrackMaskBorderColor);
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-track-mask")
|
||||
.find(".captcha-slider-move-track-mask")
|
||||
.css("background-color", moveTrackMaskBgColor);
|
||||
}
|
||||
loadCaptchaForData(that, data) {
|
||||
const bgImg = that.el.find("#tianai-captcha-slider-bg-img");
|
||||
const sliderImg = that.el.find("#tianai-captcha-slider-move-img");
|
||||
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", () => {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
#tianai-captcha.tianai-captcha-rotate {
|
||||
.captcha.captcha-rotate {
|
||||
.rotate-img-div {
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import "../common/common.less";
|
||||
import "./slider.less";
|
||||
import {
|
||||
CommonCaptcha,
|
||||
closeTips,
|
||||
@ -16,27 +14,27 @@ import {
|
||||
const TYPE = "SLIDER";
|
||||
function getTemplate(styleConfig) {
|
||||
return `
|
||||
<div id="tianai-captcha" class="tianai-captcha-slider">
|
||||
<div class="captcha captcha-slider">
|
||||
<div class="slider-tip">
|
||||
<span id="tianai-captcha-slider-move-track-font" style="font-size: ${styleConfig.i18n.slider_title_size}">${styleConfig.i18n.slider_title}</span>
|
||||
<span class="captcha-slider-move-track-font" style="font-size: ${styleConfig.i18n.slider_title_size}">${styleConfig.i18n.slider_title}</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="bg-img-div">
|
||||
<img id="tianai-captcha-slider-bg-img" src="" alt/>
|
||||
<canvas id="tianai-captcha-slider-bg-canvas"></canvas>
|
||||
<div id="tianai-captcha-slider-bg-div"></div>
|
||||
<img class="captcha-slider-bg-img" src="" alt/>
|
||||
<canvas class="captcha-slider-bg-canvas"></canvas>
|
||||
<div class="captcha-slider-bg-div"></div>
|
||||
</div>
|
||||
<div class="slider-img-div" id="tianai-captcha-slider-img-div">
|
||||
<img id="tianai-captcha-slider-move-img" src="" alt/>
|
||||
<div class="slider-img-div captcha-slider-img-div">
|
||||
<img class="captcha-slider-move-img" src="" alt/>
|
||||
</div>
|
||||
<div class="tianai-captcha-tips" id="tianai-captcha-tips"></div>
|
||||
<div class="captcha-tips"></div>
|
||||
</div>
|
||||
<div class="slider-move">
|
||||
<div class="slider-move-track">
|
||||
<div id="tianai-captcha-slider-move-track-mask"></div>
|
||||
<div class="captcha-slider-move-track-mask"></div>
|
||||
<div class="slider-move-shadow"></div>
|
||||
</div>
|
||||
<div class="slider-move-btn" id="tianai-captcha-slider-move-btn">
|
||||
<div class="slider-move-btn captcha-slider-move-btn">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -56,14 +54,14 @@ class Slider extends CommonCaptcha {
|
||||
// 重载样式
|
||||
this.destroy();
|
||||
this.boxEl.append(getTemplate(this.styleConfig));
|
||||
this.el = this.boxEl.find("#tianai-captcha");
|
||||
this.el = this.boxEl.find(".captcha");
|
||||
this.loadStyle();
|
||||
// 按钮绑定事件
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-btn")
|
||||
.find(".captcha-slider-move-btn")
|
||||
.mousedown(down.bind(null, this));
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-btn")
|
||||
.find(".captcha-slider-move-btn")
|
||||
.touchstart(down.bind(null, this));
|
||||
// 绑定全局
|
||||
// window.currentCaptcha = this;
|
||||
@ -84,7 +82,7 @@ class Slider extends CommonCaptcha {
|
||||
}
|
||||
|
||||
destroy() {
|
||||
const existsCaptchaEl = this.boxEl.children("#tianai-captcha");
|
||||
const existsCaptchaEl = this.boxEl.children(".captcha");
|
||||
if (existsCaptchaEl) {
|
||||
existsCaptchaEl.remove();
|
||||
}
|
||||
@ -93,13 +91,13 @@ class Slider extends CommonCaptcha {
|
||||
doMove() {
|
||||
const moveX = this.currentCaptchaData.moveX;
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-btn")
|
||||
.find(".captcha-slider-move-btn")
|
||||
.css("transform", "translate(" + moveX + "px, 0px)");
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-img-div")
|
||||
.find(".captcha-slider-img-div")
|
||||
.css("transform", "translate(" + moveX + "px, 0px)");
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-track-mask")
|
||||
.find(".captcha-slider-move-track-mask")
|
||||
.css("width", moveX + "px");
|
||||
}
|
||||
loadStyle() {
|
||||
@ -115,17 +113,17 @@ class Slider extends CommonCaptcha {
|
||||
this.el
|
||||
.find(".slider-move .slider-move-btn")
|
||||
.css("background-image", "url(" + sliderImg + ")");
|
||||
// this.el.find("#tianai-captcha-slider-move-track-font").text(title);
|
||||
// this.el.find(".captcha-slider-move-track-font").text(title);
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-track-mask")
|
||||
.find(".captcha-slider-move-track-mask")
|
||||
.css("border-color", moveTrackMaskBorderColor);
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-track-mask")
|
||||
.find(".captcha-slider-move-track-mask")
|
||||
.css("background-color", moveTrackMaskBgColor);
|
||||
}
|
||||
loadCaptchaForData(that, data) {
|
||||
const bgImg = that.el.find("#tianai-captcha-slider-bg-img");
|
||||
const sliderImg = that.el.find("#tianai-captcha-slider-move-img");
|
||||
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", () => {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
#tianai-captcha.tianai-captcha-slider {
|
||||
.captcha.captcha-slider {
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -24,7 +24,7 @@
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transform: translate(0px, 0px);
|
||||
#tianai-captcha-slider-move-img {
|
||||
.captcha-slider-move-img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user