/*
patternLock.js v 0.5.2
Author: Sudhanshu Yadav
Copyright (c) 2015 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
Demo on: ignitersworld.com/lab/patternLock.html
*/
!function(t,e,n,r){"use strict";function i(t){for(var e=t.holder,n=t.option,r=n.matrix,i=n.margin,a=n.radius,o=['<ul class="patt-wrap" style="padding:'+i+'px">'],s=0,l=r[0]*r[1];l>s;s++)o.push('<li class="patt-circ" style="margin:'+i+"px; width : "+2*a+"px; height : "+2*a+"px; -webkit-border-radius: "+a+"px; -moz-border-radius: "+a+"px; border-radius: "+a+'px; "><div class="patt-dots"></div></li>');o.push("</ul>"),e.html(o.join("")).css({width:r[1]*(2*a+2*i)+2*i+"px",height:r[0]*(2*a+2*i)+2*i+"px"}),t.pattCircle=t.holder.find(".patt-circ")}function a(t,e,n,r){var i=e-t,a=r-n;return{length:Math.ceil(Math.sqrt(i*i+a*a)),angle:Math.round(180*Math.atan2(a,i)/Math.PI)}}function o(){}function s(e,n){var r=this,a=r.token=Math.random(),h=p[a]=new o,u=h.holder=t(e);if(0!=u.length){h.object=r,n=h.option=t.extend({},s.defaults,n),i(h),u.addClass("patt-holder"),"static"==u.css("position")&&u.css("position","relative"),u.on("touchstart mousedown",function(t){d.call(this,t,r)}),h.option.onDraw=n.onDraw||l;var c=n.mapper;h.mapperFunc="object"==typeof c?function(t){return c[t]}:"function"==typeof c?c:l,h.option.mapper=null}}var l=function(){},p={},d=function(e,r){e.preventDefault();var i=p[r.token];if(!i.disabled){i.option.patternVisible||i.holder.addClass("patt-hidden");var a="touchstart"==e.type?"touchmove":"mousemove",o="touchstart"==e.type?"touchend":"mouseup";t(this).on(a+".pattern-move",function(t){h.call(this,t,r)}),t(n).one(o,function(){u.call(this,e,r)});var s=i.holder.find(".patt-wrap"),l=s.offset();i.wrapTop=l.top,i.wrapLeft=l.left,r.reset()}},h=function(e,n){e.preventDefault();var r=e.pageX||e.originalEvent.touches[0].pageX,i=e.pageY||e.originalEvent.touches[0].pageY,o=p[n.token],s=o.pattCircle,l=o.patternAry,d=o.option.lineOnMove,h=o.getIdxFromPoint(r,i),u=h.idx,c=o.mapperFunc(u)||u;if(l.length>0){var f=a(o.lineX1,h.x,o.lineY1,h.y);o.line.css({width:f.length+10+"px",transform:"rotate("+f.angle+"deg)"})}if(u){if(-1==l.indexOf(c)){var v,m=t(s[u-1]);if(o.lastPosObj){for(var g=o.lastPosObj,x=g.i,w=g.j,b=Math.abs(h.i-x),j=Math.abs(h.j-w);(0==b&&j>1||0==j&&b>1||j==b&&j>1)&&(w!=h.j||x!=h.i);){x=b?Math.min(h.i,x)+1:x,w=j?Math.min(h.j,w)+1:w,b=Math.abs(h.i-x),j=Math.abs(h.j-w);var M=(w-1)*o.option.matrix[1]+x,y=o.mapperFunc(M)||M;-1==l.indexOf(y)&&(t(s[M-1]).addClass("hovered"),l.push(y))}v=[],h.j-g.j>0?v.push("s"):h.j-g.j<0?v.push("n"):0,h.i-g.i>0?v.push("e"):h.i-g.i<0?v.push("w"):0,v=v.join("-")}m.addClass("hovered"),l.push(c);var P=o.option.margin,k=o.option.radius,C=(h.i-1)*(2*P+2*k)+2*P+k,O=(h.j-1)*(2*P+2*k)+2*P+k;if(1!=l.length){var D=a(o.lineX1,C,o.lineY1,O);o.line.css({width:D.length+10+"px",transform:"rotate("+D.angle+"deg)"}),d||o.line.show()}v&&(o.lastElm.addClass(v+" dir"),o.line.addClass(v+" dir"));var E=t('<div class="patt-lines" style="top:'+(O-5)+"px; left:"+(C-5)+'px"></div>');o.line=E,o.lineX1=C,o.lineY1=O,o.holder.append(E),d||o.line.hide(),o.lastElm=m}o.lastPosObj=h}},u=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())))};o.prototype={constructor:o,getIdxFromPoint:function(t,e){var n=this.option,r=n.matrix,i=t-this.wrapLeft,a=e-this.wrapTop,o=null,s=n.margin,l=2*n.radius+2*s,p=Math.ceil(i/l),d=Math.ceil(a/l),h=i%l,u=a%l;return p<=r[1]&&d<=r[0]&&h>2*s&&u>2*s&&(o=(d-1)*r[1]+p),{idx:o,i:p,j:d,x:i,y:a}}},s.prototype={constructor:s,option:function(t,e){var n=p[this.token],a=n.option;return e===r?a[t]:(a[t]=e,void(("margin"==t||"matrix"==t||"radius"==t)&&i(n)))},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,a=n.radius;if(n.enableSetPattern){this.reset(),e.wrapLeft=0,e.wrapTop=0;for(var o=0;o<t.length;o++){var s=t[o]-1,d=s%r[1],u=Math.floor(s/r[1]),c=d*(2*i+2*a)+2*i+a,f=u*(2*i+2*a)+2*i+a;h.call(null,{pageX:c,pageY:f,preventDefault:l,originalEvent:{touches:[{pageX:c,pageY:f}]}},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}},s.defaults={matrix:[3,3],margin:20,radius:25,patternVisible:!0,lineOnMove:!0,delimiter:"",enableSetPattern:!1},e.PatternLock=s}(jQuery,window,document);
|
Download
