patternlock
Version:
Pattern Lock is a light weight plugin to simulate android like pattern lock mechanism for your hybrid app or for a website. It's easy to configure and style so you can have different type of pattern lock according to your need. Is also provide some method
2 lines (1 loc) • 7.67 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.PatternLock=e()}(this,function(){"use strict";function d(){}function e(t){return t instanceof NodeList||t instanceof HTMLCollection?Array.prototype.slice.call(t):[t]}function P(n,i){if("string"==typeof i)return window.getComputedStyle(n)[i];Object.keys(i).forEach(function(t){var e=i[t];n.style[t]=e})}function s(e,t){var n=t.split(" ");1<n.length?n.forEach(function(t){return s(e,t)}):e.classList?e.classList.add(t):e.className+=" "+t}function r(e,t){var n=t.split(" ");1<n.length?n.forEach(function(t){return r(e,t)}):e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\b)"+t.split(" ").join("|")+"(\\b|$)","gi")," ")}function o(t){e(t).forEach(function(t){t.parentNode.removeChild(t)})}function k(t,e,n,i){var r=e-t,o=i-n;return{length:Math.ceil(Math.sqrt(r*r+o*o)),angle:Math.round(180*Math.atan2(o,r)/Math.PI)}}var u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n=function(){function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}}();function c(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var L=new WeakMap,h=function(){function t(){c(this,t),this.holder=null,this.option=null,this.mapperFunc=d,this.wrapLeft=0,this.wrapTop=0,this.disabled=!1,this.patternAry=[],this.lastPosObj=[],this.rightPattern=null,this.onSuccess=d,this.onError=d,this.pattCircle=null,this.lineX1=0,this.lineY1=0,this.line=null,this.lastPosObj=null}return n(t,[{key:"getIdxFromPoint",value:function(t,e){var n=this.option,i=n.matrix,r=n.margin,o=t-this.wrapLeft,a=e-this.wrapTop,l=2*n.radius+2*r,s=Math.ceil(o/l),u=Math.ceil(a/l),c=o%l,h=a%l,p=null;return s<=i[1]&&u<=i[0]&&2*r<c&&2*r<h&&(p=(u-1)*i[1]+s),{idx:p,i:s,j:u,x:o,y:a}}},{key:"markPoint",value:function(t,e){s(t,"hovered"),this.patternAry.push(e),this.lastElm=t}},{key:"addLine",value:function(t){var e=this.patternAry,n=this.option,i=n.lineOnMove,r=n.margin,o=n.radius,a=(t.i-1)*(2*r+2*o)+2*r+o,l=(t.j-1)*(2*r+2*o)+2*r+o;if(1<e.length){var s=k(this.lineX1,a,this.lineY1,l),u=s.length,c=s.angle;P(this.line,{width:u+10+"px",transform:"rotate("+c+"deg)"}),i||P(this.line,{display:"block"})}var h,p,d=(h='<div class="patt-lines" style="top:'+(l-5)+"px; left: "+(a-5)+'px;"></div>',(p=document.createElement("div")).innerHTML=h,p.children[0]);this.line=d,this.lineX1=a,this.lineY1=l,this.holder.appendChild(d),i||P(this.line,{display:"none"})}},{key:"addDirectionClass",value:function(t){var e=this.lastElm,n=this.line,i=this.lastPosObj,r=[];if(0<t.j-i.j?r.push("s"):t.j-i.j<0&&r.push("n"),0<t.i-i.i?r.push("e"):t.i-i.i<0&&r.push("w"),r=r.join("-")){var o=r+" dir";s(e,o),s(n,o)}}}]),t}(),t=function(){function l(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};c(this,l),p.call(this);var n=new h,i=document.querySelector(t);if(i&&0!==i.length){var r={onDraw:d},o=e.matrix;o&&9<o[0]*o[1]&&(r.delimiter=","),n.option=function(n){for(var t=arguments.length,e=Array(1<t?t-1:0),i=1;i<t;i++)e[i-1]=arguments[i];return e.forEach(function(e){Object.keys(e).forEach(function(t){n[t]=e[t]})}),n}({},l.defaults,r,e);var a=n.option.mapper;"object"===(void 0===a?"undefined":u(a))?n.mapperFunc=function(t){return a[t]}:n.mapperFunc="function"==typeof a?a:d,n.option.mapper=null,n.holder=i,L.set(this,n),this._render(),s(i,"patt-holder"),"static"===P(i,"position")&&P(i,{position:"relative"}),i.addEventListener("touchstart",this._onStart),i.addEventListener("mousedown",this._onStart)}}return n(l,[{key:"getPattern",value:function(){var t=L.get(this),e=t.patternAry,n=t.option;return(e||[]).join(n.delimiter)}},{key:"setPattern",value:function(t){var e=L.get(this),n=e.option,i=n.matrix,r=n.margin,o=n.radius,a=n.enableSetPattern,l=n.delimiter;if(a){var s="string"==typeof t?t.split(l):t;this.reset(),e.wrapLeft=0;for(var u=e.wrapTop=0;u<s.length;u+=1){var c=s[u]-1,h=c%i[1]*(2*r+2*o)+2*r+o,p=Math.floor(c/i[1])*(2*r+2*o)+2*r+o;this._onMove.call(null,{clientX:h,clientY:p,preventDefault:d},this)}}}},{key:"enable",value:function(){L.get(this).disabled=!1}},{key:"disable",value:function(){L.get(this).disabled=!0}},{key:"reset",value:function(){var t=L.get(this);e(t.pattCircle).forEach(function(t){return r(t,"hovered dir s n w e s-w s-e n-w n-e")}),o(t.holder.querySelectorAll(".patt-lines")),t.patternAry=[],t.lastPosObj=null,r(t.holder,"patt-error")}},{key:"error",value:function(){s(L.get(this).holder,"patt-error")}},{key:"checkForPattern",value:function(t,e,n){var i=L.get(this);i.rightPattern=t,i.onSuccess=e||d,i.onError=n||d}},{key:"_render",value:function(){var t=L.get(this),e=t.option,n=t.holder,i=e.matrix,r=e.margin,o=e.radius,a='<ul class="patt-wrap" style="padding: '+r+'px">\n '+Array.apply(void 0,function(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e<t.length;e++)n[e]=t[e];return n}return Array.from(t)}({length:i[0]*i[1]})).map(this._renderCircle).join("")+"\n </ul>";n.innerHTML=a,P(n,{width:i[1]*(2*o+2*r)+2*r+"px",height:i[0]*(2*o+2*r)+2*r+"px"}),t.pattCircle=t.holder.querySelectorAll(".patt-circ")}},{key:"option",value:function(t,e){var n=L.get(this).option;return void 0===e?n[t]:(n[t]=e,"margin"!==t&&"matrix"!==t&&"radius"!==t||this._render(),this)}}]),l}(),p=function(){var x=this;this._onStart=function(t){t.preventDefault();var e=L.get(x),n=e.holder;if(!e.disabled){e.option.patternVisible||s(e.holder,"patt-hidden"),x.moveEvent="touchstart"===t.type?"touchmove":"mousemove",x.endEvent="touchstart"===t.type?"touchend":"mouseup",n.addEventListener(x.moveEvent,x._onMove),document.addEventListener(x.endEvent,x._onEnd);var i=e.holder.querySelector(".patt-wrap").getBoundingClientRect();e.wrapTop=i.top,e.wrapLeft=i.left,x.reset()}},this._onMove=function(t){t.preventDefault();var e=L.get(x),n=e.option,i=e.patternAry,r=t.clientX||t.touches[0].clientX,o=t.clientY||t.touches[0].clientY,a=e.pattCircle,l=e.getIdxFromPoint(r,o),s=l.idx,u=e.mapperFunc(s)||s;if(0<i.length){var c=k(e.lineX1,l.x,e.lineY1,l.y),h=c.length,p=c.angle;P(e.line,{width:h+10+"px",transform:"rotate("+p+"deg)"})}if(s&&(n.allowRepeat&&i[i.length-1]!==u||-1===i.indexOf(u))){var d=a[s-1];if(e.lastPosObj)for(var f=e.lastPosObj,v=0<l.i-f.i?1:-1,m=0<l.j-f.j?1:-1,y=f.i,g=f.j,b=Math.abs(l.i-y),w=Math.abs(l.j-g);0===b&&1<w||0===w&&1<b||w===b&&1<w;){y=b?y+v:y,g=w?g+m:g,b=Math.abs(l.i-y),w=Math.abs(l.j-g);var j=(g-1)*n.matrix[1]+y,E=e.mapperFunc(j)||j;(n.allowRepeat||-1===i.indexOf(E))&&(e.addDirectionClass({i:y,j:g}),e.markPoint(a[E-1],E),e.addLine({i:y,j:g}))}e.lastPosObj&&e.addDirectionClass(l),e.markPoint(d,u),e.addLine(l),e.lastPosObj=l}},this._onEnd=function(t){t.preventDefault();var e=L.get(x),n=e.option,i=e.patternAry.join(n.delimiter);e.holder.removeEventListener(x.moveEvent,x._onMove),document.removeEventListener(x.endEvent,x._onEnd),r(e.holder,"patt-hidden"),i&&(o(e.line),n.onDraw(i),e.rightPattern&&(i===e.rightPattern?e.onSuccess():(e.onError(),x.error())))},this._renderCircle=function(){var t=L.get(x).option,e=t.margin,n=t.radius;return'<li \n class="patt-circ"\n style="margin: '+e+"px; width: "+2*n+"px; height: "+2*n+"px; border-radius: "+n+'px;"\n >\n <div class="patt-dots"></div>\n </li>'}};return t.defaults={matrix:[3,3],margin:20,radius:25,patternVisible:!0,lineOnMove:!0,delimiter:"",enableSetPattern:!1,allowRepeat:!1},t});