fix(#IXT5R): IE浏览器登录页面js异常
#Comment comment #IXT5R #Issue close https://gitee.com/LongbowEnterprise/dashboard/issues?id=IXT5R
This commit is contained in:
Argo Zhang
parent
b48277c426
commit
9be7f7acdf
|
|
@ -33,7 +33,7 @@
|
|||
var data = $this.data('lgb.SliderCaptcha');
|
||||
var options = typeof option === 'object' && option;
|
||||
|
||||
if (!data && /init|reset|verify/.test(option)) return;
|
||||
if (data && !/reset/.test(option)) return;
|
||||
if (!data) $this.data('lgb.SliderCaptcha', data = new SliderCaptcha(this, options));
|
||||
if (typeof option === 'string') data[option]();
|
||||
});
|
||||
|
|
@ -63,8 +63,8 @@
|
|||
return canvas;
|
||||
};
|
||||
|
||||
var canvas = createCanvas(this.options.width - 2, this.options.height) // 画布
|
||||
var block = canvas.cloneNode(true) // 滑块
|
||||
var canvas = createCanvas(this.options.width - 2, this.options.height); // 画布
|
||||
var block = canvas.cloneNode(true); // 滑块
|
||||
var sliderContainer = createElement('div', 'sliderContainer');
|
||||
var refreshIcon = createElement('i', 'refreshIcon ' + this.options.repeatIcon);
|
||||
var sliderMask = createElement('div', 'sliderMask');
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
var sliderIcon = createElement('i', 'fa fa-arrow-right sliderIcon');
|
||||
var text = createElement('span', 'sliderText');
|
||||
|
||||
block.className = 'block'
|
||||
block.className = 'block';
|
||||
text.innerHTML = this.options.barText;
|
||||
|
||||
var el = this.$element;
|
||||
|
|
@ -87,18 +87,25 @@
|
|||
sliderContainer.appendChild(text);
|
||||
el.append($(sliderContainer));
|
||||
|
||||
Object.assign(this, {
|
||||
canvas,
|
||||
block,
|
||||
var _canvas = {
|
||||
canvas: canvas,
|
||||
block: block,
|
||||
sliderContainer: $(sliderContainer),
|
||||
refreshIcon,
|
||||
slider,
|
||||
sliderMask,
|
||||
sliderIcon,
|
||||
refreshIcon: refreshIcon,
|
||||
slider: slider,
|
||||
sliderMask: sliderMask,
|
||||
sliderIcon: sliderIcon,
|
||||
text: $(text),
|
||||
canvasCtx: canvas.getContext('2d'),
|
||||
blockCtx: block.getContext('2d')
|
||||
})
|
||||
};
|
||||
|
||||
if ($.isFunction(Object.assign)) {
|
||||
Object.assign(this, _canvas);
|
||||
}
|
||||
else {
|
||||
$.extend(this, _canvas);
|
||||
}
|
||||
};
|
||||
|
||||
_proto.initImg = function () {
|
||||
|
|
@ -111,22 +118,22 @@
|
|||
var PI = that.options.PI;
|
||||
var x = that.x;
|
||||
var y = that.y;
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x, y)
|
||||
ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI)
|
||||
ctx.lineTo(x + l, y)
|
||||
ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI)
|
||||
ctx.lineTo(x + l, y + l)
|
||||
ctx.lineTo(x, y + l)
|
||||
ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true)
|
||||
ctx.lineTo(x, y)
|
||||
ctx.lineWidth = 2
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'
|
||||
ctx.stroke()
|
||||
ctx[operation]()
|
||||
ctx.globalCompositeOperation = isIE ? 'xor' : 'overlay'
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y);
|
||||
ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
|
||||
ctx.lineTo(x + l, y);
|
||||
ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);
|
||||
ctx.lineTo(x + l, y + l);
|
||||
ctx.lineTo(x, y + l);
|
||||
ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);
|
||||
ctx.lineTo(x, y);
|
||||
ctx.lineWidth = 2;
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
|
||||
ctx.stroke();
|
||||
ctx[operation]();
|
||||
ctx.globalCompositeOperation = isIE ? 'xor' : 'destination-over';
|
||||
};
|
||||
|
||||
var getRandomNumberByRange = function (start, end) {
|
||||
return Math.round(Math.random() * (end - start) + start);
|
||||
|
|
@ -168,14 +175,14 @@
|
|||
if ($.isFunction(that.options.setSrc)) src = that.options.setSrc();
|
||||
if (!src || src === '') src = 'https://picsum.photos/' + that.options.width + '/' + that.options.height + '/?image=' + Math.round(Math.random() * 20);
|
||||
if (isIE) { // IE浏览器无法通过img.crossOrigin跨域，使用ajax获取图片blob然后转为dataURL显示
|
||||
var xhr = new XMLHttpRequest()
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onloadend = function (e) {
|
||||
var file = new FileReader(); // FileReader仅支持IE10+
|
||||
file.readAsDataURL(e.target.response);
|
||||
file.onloadend = function (e) {
|
||||
img.src = e.target.result;
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
xhr.open('GET', src);
|
||||
xhr.responseType = 'blob';
|
||||
xhr.send();
|
||||
|
|
@ -184,7 +191,7 @@
|
|||
img.setSrc();
|
||||
this.text.attr('data-text', this.options.barText);
|
||||
this.text.text(this.options.loadingText);
|
||||
this.img = img
|
||||
this.img = img;
|
||||
};
|
||||
|
||||
_proto.clean = function () {
|
||||
|
|
@ -206,7 +213,7 @@
|
|||
});
|
||||
|
||||
var originX, originY, trail = [],
|
||||
isMouseDown = false
|
||||
isMouseDown = false;
|
||||
|
||||
var handleDragStart = function (e) {
|
||||
if (that.text.hasClass('text-danger')) return;
|
||||
|
|
@ -216,6 +223,7 @@
|
|||
};
|
||||
|
||||
var handleDragMove = function (e) {
|
||||
e.preventDefault();
|
||||
if (!isMouseDown) return false;
|
||||
var eventX = e.clientX || e.touches[0].clientX;
|
||||
var eventY = e.clientY || e.touches[0].clientY;
|
||||
|
|
@ -232,23 +240,20 @@
|
|||
};
|
||||
|
||||
var handleDragEnd = function (e) {
|
||||
if (!isMouseDown) return false
|
||||
isMouseDown = false
|
||||
var eventX = e.clientX || e.changedTouches[0].clientX
|
||||
if (eventX == originX) return false
|
||||
if (!isMouseDown) return false;
|
||||
isMouseDown = false;
|
||||
var eventX = e.clientX || e.changedTouches[0].clientX;
|
||||
if (eventX === originX) return false;
|
||||
that.sliderContainer.removeClass('sliderContainer_active');
|
||||
that.trail = trail
|
||||
var {
|
||||
spliced,
|
||||
verified
|
||||
} = that.verify()
|
||||
if (spliced && verified) {
|
||||
that.trail = trail;
|
||||
var data = that.verify();
|
||||
if (data.spliced && data.verified) {
|
||||
that.sliderContainer.addClass('sliderContainer_success');
|
||||
if ($.isFunction(that.options.onSuccess)) that.options.onSuccess.call(that.$element);
|
||||
} else {
|
||||
that.sliderContainer.addClass('sliderContainer_fail');
|
||||
if ($.isFunction(that.options.onFail)) that.options.onFail.call(that.$element);
|
||||
setTimeout(() => {
|
||||
setTimeout(function () {
|
||||
that.text.text(that.options.failedText);
|
||||
that.reset();
|
||||
}, 1000);
|
||||
|
|
@ -264,28 +269,29 @@
|
|||
|
||||
document.addEventListener('mousedown', function () { return false; });
|
||||
document.addEventListener('touchstart', function () { return false; });
|
||||
document.addEventListener('swipe', function () { return false; });
|
||||
};
|
||||
|
||||
_proto.verify = function () {
|
||||
var sum = function (x, y) { return x + y; };
|
||||
var square = function (x) { return x * x; };
|
||||
var arr = this.trail // 拖动时y轴的移动距离
|
||||
var arr = this.trail; // 拖动时y轴的移动距离
|
||||
var average = arr.reduce(sum) / arr.length;
|
||||
var deviations = arr.map(function (x) { return x - average; });
|
||||
var stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length);
|
||||
var left = parseInt(this.block.style.left);
|
||||
return {
|
||||
spliced: Math.abs(left - this.x) < this.options.offset,
|
||||
verified: stddev !== 0, // 简单验证下拖动轨迹，为零时表示Y轴上下没有波动，可能非人为操作
|
||||
}
|
||||
verified: stddev !== 0 // 简单验证下拖动轨迹，为零时表示Y轴上下没有波动，可能非人为操作
|
||||
};
|
||||
};
|
||||
|
||||
_proto.reset = function () {
|
||||
this.sliderContainer.removeClass('sliderContainer_fail sliderContainer_success');
|
||||
this.slider.style.left = 0
|
||||
this.block.style.left = 0
|
||||
this.sliderMask.style.width = 0
|
||||
this.clean()
|
||||
this.slider.style.left = 0;
|
||||
this.block.style.left = 0;
|
||||
this.sliderMask.style.width = 0;
|
||||
this.clean();
|
||||
this.text.attr('data-text', this.text.text());
|
||||
this.text.text(this.options.loadingText);
|
||||
this.img.setSrc();
|
||||
|
|
|
|||
Loading…
Reference in New Issue