patternLock.min.js

/*
    patternLock.js v 0.7.0
    Author: Sudhanshu Yadav
    Copyright (c) 2015,2016 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
    Demo on: ignitersworld.com/lab/patternLock.html
*/

!function(t){var e=Function("return this")()||(42,eval)("this");"function"==typeof define&&define.amd?define(["jquery"],function(n){return e.PatternLock=t(n,e)}):"object"==typeof module&&module.exports?module.exports=e.document?t(require("jquery"),e):function(e){if(!e.document)throw new Error("patternLock requires a window with a document");return t(require("jquery")(e),e)}:e.PatternLock=t(e.jQuery,e)}(function(t,e,n){"use strict";function r(t){for(var e=t.holder,n=t.option,r=n.matrix,i=n.margin,o=n.radius,a=['<ul class="patt-wrap" style="padding:'+i+'px">'],s=0,l=r[0]*r[1];l>s;s++)a.push('<li class="patt-circ" style="margin:'+i+"px; width : "+2*o+"px; height : "+2*o+"px; -webkit-border-radius: "+o+"px; -moz-border-radius: "+o+"px; border-radius: "+o+'px; "><div class="patt-dots"></div></li>');a.push("</ul>"),e.html(a.join("")).css({width:r[1]*(2*o+2*i)+2*i+"px",height:r[0]*(2*o+2*i)+2*i+"px"}),t.pattCircle=t.holder.find(".patt-circ")}function i(t,e,n,r){var i=e-t,o=r-n;return{length:Math.ceil(Math.sqrt(i*i+o*o)),angle:Math.round(180*Math.atan2(o,i)/Math.PI)}}function o(){}function a(e,n){var i=this,s=i.token=Math.random(),d=p[s]=new o,c=d.holder=t(e);if(0!=c.length){d.object=i,n=d.option=t.extend({},a.defaults,n),r(d),c.addClass("patt-holder"),"static"==c.css("position")&&c.css("position","relative"),c.on("touchstart mousedown",function(t){u.call(this,t,i)}),d.option.onDraw=n.onDraw||l;var h=n.mapper;"object"==typeof h?d.mapperFunc=function(t){return h[t]}:"function"==typeof h?d.mapperFunc=h:d.mapperFunc=l,d.option.mapper=null}}var s=e.document,l=function(){},p={},u=function(e,n){e.preventDefault();var r=p[n.token];if(!r.disabled){r.option.patternVisible||r.holder.addClass("patt-hidden");var i="touchstart"==e.type?"touchmove":"mousemove",o="touchstart"==e.type?"touchend":"mouseup";t(this).on(i+".pattern-move",function(t){d.call(this,t,n)}),t(s).one(o,function(){c.call(this,e,n)});var a=r.holder.find(".patt-wrap"),l=a[0].getBoundingClientRect();r.wrapTop=l.top,r.wrapLeft=l.left,n.reset()}},d=function(e,n){e.preventDefault();var r=e.clientX||e.originalEvent.touches[0].clientX,o=e.clientY||e.originalEvent.touches[0].clientY,a=p[n.token],s=a.pattCircle,l=a.patternAry,u=a.option.lineOnMove,d=a.getIdxFromPoint(r,o),c=d.idx,h=a.mapperFunc(c)||c;if(l.length>0){var f=i(a.lineX1,d.x,a.lineY1,d.y);a.line.css({width:f.length+10+"px",transform:"rotate("+f.angle+"deg)"})}if(c){if(-1==l.indexOf(h)){var v,m=t(s[c-1]);if(a.lastPosObj){for(var g=a.lastPosObj,x=g.i,w=g.j,j=Math.abs(d.i-x),b=Math.abs(d.j-w);(0==j&&b>1||0==b&&j>1||b==j&&b>1)&&(w!=d.j||x!=d.i);){x=j?Math.min(d.i,x)+1:x,w=b?Math.min(d.j,w)+1:w,j=Math.abs(d.i-x),b=Math.abs(d.j-w);var y=(w-1)*a.option.matrix[1]+x,k=a.mapperFunc(y)||y;-1==l.indexOf(k)&&(t(s[y-1]).addClass("hovered"),l.push(k))}v=[],d.j-g.j>0?v.push("s"):d.j-g.j<0?v.push("n"):0,d.i-g.i>0?v.push("e"):d.i-g.i<0?v.push("w"):0,v=v.join("-")}m.addClass("hovered"),l.push(h);var M=a.option.margin,P=a.option.radius,C=(d.i-1)*(2*M+2*P)+2*M+P,F=(d.j-1)*(2*M+2*P)+2*M+P;if(1!=l.length){var O=i(a.lineX1,C,a.lineY1,F);a.line.css({width:O.length+10+"px",transform:"rotate("+O.angle+"deg)"}),u||a.line.show()}v&&(a.lastElm.addClass(v+" dir"),a.line.addClass(v+" dir"));var q=t('<div class="patt-lines" style="top:'+(F-5)+"px; left:"+(C-5)+'px"></div>');a.line=q,a.lineX1=C,a.lineY1=F,a.holder.append(q),u||a.line.hide(),a.lastElm=m}a.lastPosObj=d}},c=function(t,e){t.preventDefault();var n=p[e.token],r=n.patternAry.join(n.option.delimiter);n.holder.off(".pattern-move").removeClass("patt-hidden"),r&&(n.option.onDraw(r),n.line.remove(),n.rightPattern&&(r==n.rightPattern?n.onSuccess():(n.onError(),e.error())))};return o.prototype={constructor:o,getIdxFromPoint:function(t,e){var n=this.option,r=n.matrix,i=t-this.wrapLeft,o=e-this.wrapTop,a=null,s=n.margin,l=2*n.radius+2*s,p=Math.ceil(i/l),u=Math.ceil(o/l),d=i%l,c=o%l;return p<=r[1]&&u<=r[0]&&d>2*s&&c>2*s&&(a=(u-1)*r[1]+p),{idx:a,i:p,j:u,x:i,y:o}}},a.prototype={constructor:a,option:function(t,e){var i=p[this.token],o=i.option;return e===n?o[t]:(o[t]=e,void(("margin"==t||"matrix"==t||"radius"==t)&&r(i)))},getPattern:function(){var t=p[this.token];return(t.patternAry||[]).join(t.option.delimiter)},setPattern:function(t){var e=p[this.token],n=e.option,r=n.matrix,i=n.margin,o=n.radius;if(n.enableSetPattern){this.reset(),e.wrapLeft=0,e.wrapTop=0;for(var a=0;a<t.length;a++){var s=t[a]-1,u=s%r[1],c=Math.floor(s/r[1]),h=u*(2*i+2*o)+2*i+o,f=c*(2*i+2*o)+2*i+o;d.call(null,{clientX:h,clientY:f,preventDefault:l},this)}}},enable:function(){var t=p[this.token];t.disabled=!1},disable:function(){var t=p[this.token];t.disabled=!0},reset:function(){var t=p[this.token];t.pattCircle.removeClass("hovered dir s n w e s-w s-e n-w n-e"),t.holder.find(".patt-lines").remove(),t.patternAry=[],t.lastPosObj=null,t.holder.removeClass("patt-error")},error:function(){p[this.token].holder.addClass("patt-error")},checkForPattern:function(t,e,n){var r=p[this.token];r.rightPattern=t,r.onSuccess=e||l,r.onError=n||l}},a.defaults={matrix:[3,3],margin:20,radius:25,patternVisible:!0,lineOnMove:!0,delimiter:"",enableSetPattern:!1},a});