1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | ;(function (root, factory) {
|
7 | if (typeof define === 'function' && define.amd) {
|
8 | define(factory);
|
9 | } else if (typeof exports === 'object') {
|
10 | module.exports = factory();
|
11 | } else {
|
12 | root.RVerify = factory();
|
13 | }
|
14 | })(this, function () {
|
15 | 'use strict';
|
16 |
|
17 | var RVerify = {};
|
18 |
|
19 | RVerify.version = '0.1.1';
|
20 |
|
21 | var Settings = {
|
22 | mask: 0.5,
|
23 | maskClosable: false,
|
24 | closeIcon:
|
25 | '<svg t="1590331085919" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3734" width="20" height="20"><path d="M512 451.67l225.835-225.835a42.667 42.667 0 0 1 60.33 60.33L572.331 512l225.834 225.835a42.667 42.667 0 0 1-60.33 60.33L512 572.331 286.165 798.165a42.667 42.667 0 1 1-60.33-60.33L451.669 512 225.835 286.165a42.667 42.667 0 0 1 60.33-60.33L512 451.669z" p-id="3735" fill="#8a8a8a"></path></svg>',
|
26 | sliderIcon:
|
27 | '<svg t="1590338601818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6547" width="20" height="20"><path d="M512.299934 1023.800044c-10.797617 0-21.595234-3.999117-29.993381-11.797396-17.496139-16.496359-18.195984-44.090269-1.799602-61.586408l412.508958-437.10353c8.398147-8.898036 8.298169-23.894726-0.599868-32.692784L481.606708 74.409578c-17.096227-16.896271-17.296183-44.490181-0.299934-61.586408 16.896271-16.896271 44.390203-17.196205 61.586408-0.299934l410.809333 406.11037c42.290666 41.790777 43.590379 111.075485 2.699404 154.465909l-412.508958 437.003552c-8.69808 9.097992-20.195543 13.696977-31.593027 13.696977z" p-id="6548"></path><path d="M86.093999 924.821889c-10.697639 0-21.495256-3.999117-29.793425-11.897374-17.496139-16.496359-18.295962-44.090269-1.799603-61.586408l315.930274-334.626147c8.398147-9.097992 8.298169-24.094682-0.599868-32.792762L55.500751 173.587689c-16.996249-16.896271-17.196205-44.490181-0.299934-61.686386 16.896271-16.996249 44.390203-17.296183 61.586408-0.199956L431.017873 422.032856c42.290666 41.790777 43.490402 111.075485 2.799382 154.465909l-315.930273 334.626147c-8.69808 9.097992-20.195543 13.696977-31.792983 13.696977z" p-id="6549"></path></svg>',
|
28 | extraIcon:
|
29 | '<svg t="1590289223124" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2770" width="15" height="15"><path d="M512.002558 64.24521c-247.292176 0-447.75786 200.464661-447.75786 447.756837 0 247.287059 200.464661 447.752744 447.75786 447.752744 247.286036 0 447.75172-200.464661 447.75172-447.752744C959.754279 264.710894 759.288594 64.24521 512.002558 64.24521zM512.010745 735.87586c-20.602224 0-37.319977-16.718777-37.319977-37.323047 0-20.597107 16.717753-37.319977 37.319977-37.319977 20.60427 0 37.297464 16.72287 37.297464 37.319977C549.308209 719.158107 532.613992 735.87586 512.010745 735.87586zM549.308209 567.969733c0 20.600177-16.693194 37.293371-37.297464 37.293371-20.602224 0-37.319977-16.693194-37.319977-37.293371L474.690768 325.420581c0-20.605294 16.717753-37.297464 37.319977-37.297464 20.60427 0 37.297464 16.693194 37.297464 37.297464L549.308209 567.969733z" p-id="2771" fill="#4E6EF2"></path></svg>',
|
30 | tolerance: 10,
|
31 | duration: 500,
|
32 | title: '身份验证',
|
33 | text: '拖动滑块,使图片角度为正',
|
34 | extra: null,
|
35 | extraColor: '#4E6EF2',
|
36 | extraLink: 'https://github.com/zpfz',
|
37 | zIndex: 9999,
|
38 | album: [],
|
39 | };
|
40 |
|
41 | var checkFlag = false;
|
42 |
|
43 |
|
44 | RVerify.configure = function (options) {
|
45 | checkFlag = true;
|
46 | var key, value;
|
47 | for (key in options) {
|
48 | value = options[key];
|
49 | if (value !== undefined && options.hasOwnProperty(key)){
|
50 | Settings[key] = value;
|
51 | }
|
52 | }
|
53 | return this;
|
54 | };
|
55 |
|
56 |
|
57 | RVerify.action = function (callback) {
|
58 | if (!checkFlag){
|
59 | throw new Error('Please make sure RVerify.configure method is executed before RVerify.action');
|
60 | }
|
61 |
|
62 | if (Settings.extra !== null && typeof Settings.extra !== 'undefined') {
|
63 | var _extra;
|
64 | _extra =
|
65 | '<div class="rv-extra"><span>' +
|
66 | Settings.extraIcon +
|
67 | '</span><a href="' +
|
68 | Settings.extraLink +
|
69 | '" target="_blank" rel="noopener noreferrer">' +
|
70 | Settings.extra +
|
71 | '</a></div>';
|
72 | } else {
|
73 | _extra = '';
|
74 | }
|
75 |
|
76 | var modal =
|
77 | '<div class="rv-root"><div class="rv-mask"></div><div class="rv-wrap"><div class="rv-close">' +
|
78 | Settings.closeIcon +
|
79 | '</div><div class="rv-title">' +
|
80 | Settings.title +
|
81 | '</div><div class="rv-content"><div class="rv-text">' +
|
82 | Settings.text +
|
83 | '</div><div class="rv-image"><img src="' +
|
84 | getRandomImg(Settings.album) +
|
85 | '" draggable="false" class="rv-img"><div class="rv-image-mask"><svg t="1590812400512" class="rv-image-mask-success" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2647" width="80" height="80"><path d="M927.97968 108.360629a50.575037 50.575037 0 0 0-69.085501 18.517689l-391.898737 678.933747-316.000056-182.409708A50.575037 50.575037 0 0 0 100.427574 711.005546l359.812488 207.690002a50.553362 50.553362 0 0 0 69.078276-18.517689L946.504593 177.44613a50.575037 50.575037 0 0 0-18.524913-69.085501z" fill="#ffffff" p-id="2648"></path></svg><svg t="1590815914523" class="rv-image-mask-error" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3574" width="80" height="80"><path d="M441.23 511.44L79.4 149.62c-17.44-19.25-16.72-48.81 1.65-67.18 18.38-18.37 47.93-19.1 67.18-1.65l361.83 361.82L871.89 80.79a48.718 48.718 0 0 1 47.95-14.55 48.725 48.725 0 0 1 35.43 35.43 48.728 48.728 0 0 1-14.54 47.95L578.89 511.44l361.83 361.83a48.734 48.734 0 0 1 14.54 47.95 48.709 48.709 0 0 1-35.43 35.43 48.768 48.768 0 0 1-47.95-14.55L510.06 580.27 148.23 942.1c-19.25 17.44-48.8 16.72-67.18-1.65-18.37-18.37-19.09-47.93-1.65-67.18l361.83-361.83z" p-id="3575" fill="#ffffff"></path></svg></div></div><div class="rv-control"><div class="rv-bar">' +
|
86 | '</div><div class="rv-slider">' +
|
87 | Settings.sliderIcon +
|
88 | '</div></div>' +
|
89 | _extra +
|
90 | '</div></div></div>';
|
91 |
|
92 | var createNode = document.createElement('div');
|
93 | createNode.innerHTML = modal;
|
94 | $('body').appendChild(createNode);
|
95 |
|
96 | var root = $('.rv-root'),
|
97 | bar = $('.rv-bar'),
|
98 | slider = $('.rv-slider'),
|
99 | close = $('.rv-close'),
|
100 | img = $('.rv-img'),
|
101 | control = $('.rv-control'),
|
102 | wrap = $('.rv-wrap'),
|
103 | mask = $('.rv-mask'),
|
104 | maskImg = $('.rv-image-mask'),
|
105 | maskSuccess = $('.rv-image-mask-success'),
|
106 | maskError = $('.rv-image-mask-error'),
|
107 | footer = $('.rv-extra');
|
108 |
|
109 | var distance = bar.offsetWidth - slider.offsetWidth;
|
110 |
|
111 | var result = 0;
|
112 |
|
113 |
|
114 | var touchMove,
|
115 | inMobile = isMobile(),
|
116 | downX,
|
117 | touching = false;
|
118 | if (isMobile()) {
|
119 | slider.ontouchstart = touchStart;
|
120 | document.ontouchmove = touchMove;
|
121 | document.ontouchend = touchEnd;
|
122 | } else {
|
123 | slider.onmousedown = touchStart;
|
124 | document.onmousemove = touchMove;
|
125 | document.onmouseup = touchEnd;
|
126 | }
|
127 |
|
128 |
|
129 | mask.style['background-color'] = 'rgba(0, 0, 0,' + Settings.mask + ')';
|
130 | mask.style['z-index'] = Settings.zIndex;
|
131 | wrap.style['z-index'] = Settings.zIndex;
|
132 | img.style.transform = 'rotate(' + RandomAngle(Settings.tolerance) + 'deg)';
|
133 | if (Settings.extra !== null && typeof Settings.extra !== 'undefined') {
|
134 | footer.style.color = Settings.extraColor;
|
135 | }
|
136 |
|
137 | var currentAngle = getImgAngle();
|
138 |
|
139 |
|
140 | close.onclick = function () {
|
141 | result = 2;
|
142 | root.parentNode.remove();
|
143 | callback(result);
|
144 | };
|
145 |
|
146 |
|
147 | mask.onclick = function () {
|
148 | if (Settings.maskClosable == true) {
|
149 | result = 2;
|
150 | root.parentNode.remove();
|
151 | callback(result);
|
152 | }
|
153 | };
|
154 |
|
155 |
|
156 | function touchMove(e) {
|
157 | if (!touching) return;
|
158 | var e = e || window.event;
|
159 | var moveX = inMobile ? e.touches[0].clientX : e.clientX;
|
160 | var offsetX = moveX - downX;
|
161 | var targetAngle = (offsetX / distance) * 360;
|
162 |
|
163 | if (offsetX > distance) {
|
164 | offsetX = distance;
|
165 | } else if (offsetX < 0) {
|
166 | offsetX = 0;
|
167 | } else {
|
168 | slider.style.left = offsetX + 'px';
|
169 | targetAngle = currentAngle + targetAngle;
|
170 | img.style.transform = 'rotate(' + targetAngle + 'deg)';
|
171 | }
|
172 | }
|
173 |
|
174 |
|
175 | function touchStart(e) {
|
176 |
|
177 | slider.style.transition = '';
|
178 | img.style.transition = '';
|
179 | slider.classList.add('rv-slider-normal');
|
180 |
|
181 | var e = e || window.event;
|
182 | downX = inMobile ? e.touches[0].clientX : e.clientX;
|
183 | touching = true;
|
184 | }
|
185 |
|
186 |
|
187 | function touchEnd() {
|
188 | slider.classList.remove('rv-slider-normal');
|
189 |
|
190 | if (!touching) return;
|
191 | if (ReturnResult(getImgAngle())) {
|
192 | maskImg.style.cssText = 'visibility: visible;opacity: 1';
|
193 | maskSuccess.style.cssText = 'visibility: visible;opacity: 1';
|
194 | slider.style['pointer-events'] = 'none';
|
195 | slider.classList.add('rv-slider-success');
|
196 |
|
197 |
|
198 | setTimeout(function () {
|
199 | result = 1;
|
200 | root.parentNode.remove();
|
201 | callback(result);
|
202 | }, Settings.duration);
|
203 | } else {
|
204 | maskImg.style.cssText = 'visibility: visible;opacity: 1';
|
205 | maskError.style.cssText = 'visibility: visible;opacity: 1';
|
206 | slider.style['pointer-events'] = 'none';
|
207 | control.style.animation = 'shake .15s infinite';
|
208 | slider.classList.add('rv-slider-error');
|
209 | setTimeout(function () {
|
210 | img.src = getRandomImg(Settings.album);
|
211 | maskImg.style.cssText = '';
|
212 | maskError.style.cssText = '';
|
213 | slider.classList.remove('rv-slider-error');
|
214 | control.style.animation = '';
|
215 | slider.style.left = 0;
|
216 | img.style.transform = 'rotate(' + RandomAngle(Settings.tolerance) + 'deg)';
|
217 | currentAngle = getImgAngle();
|
218 | slider.style.transition =
|
219 | 'background .2s ease-in-out,border-color .2s ease-in-out,box-shadow .2s ease-in-out,left .5s ease-in-out';
|
220 | img.style.transition = 'transform .5s ease-in-out';
|
221 | slider.style['pointer-events'] = '';
|
222 | }, 500);
|
223 | callback(result);
|
224 | }
|
225 | touching = false;
|
226 | }
|
227 | };
|
228 |
|
229 |
|
230 | function getRandomNumber(a, b) {
|
231 | return Math.round(Math.random() * (b - a) + a);
|
232 | }
|
233 |
|
234 |
|
235 | function getRandomImg(imgArr) {
|
236 | return imgArr[getRandomNumber(0, imgArr.length - 1)];
|
237 | }
|
238 |
|
239 | function RandomAngle(tolerance) {
|
240 | if (tolerance < 5 || tolerance > 45) {
|
241 | console.error('Please make sure the tolerance value is between 5°~45°.');
|
242 | } else {
|
243 | return (
|
244 | Math.floor(Math.random() * (360 - tolerance - 1 - (tolerance + 1))) +
|
245 | (tolerance + 1)
|
246 | );
|
247 | }
|
248 | }
|
249 |
|
250 |
|
251 | function getImgAngle() {
|
252 | return parseFloat(
|
253 | $('.rv-img').style['transform'].replace(/[^0-9\\.\\^0-9]/gi, '')
|
254 | );
|
255 | }
|
256 |
|
257 |
|
258 | function ReturnResult(angle) {
|
259 | if (angle > 360) {
|
260 | angle = angle - 360;
|
261 | return VerifyAngle(angle);
|
262 | } else {
|
263 | return VerifyAngle(angle);
|
264 | }
|
265 | }
|
266 |
|
267 | function VerifyAngle(angle) {
|
268 | if (angle <= Settings.tolerance || angle >= 360 - Settings.tolerance) {
|
269 | return true;
|
270 | } else {
|
271 | return false;
|
272 | }
|
273 | }
|
274 |
|
275 |
|
276 | function isMobile() {
|
277 | return 'ontouchstart' in window;
|
278 | }
|
279 |
|
280 |
|
281 | var $ = function (selector) {
|
282 | return document.querySelector(selector);
|
283 | };
|
284 |
|
285 | if (typeof window !== 'undefined') {
|
286 | window.RVerify = RVerify;
|
287 | }
|
288 |
|
289 | return RVerify;
|
290 | });
|