patternLock.min.js

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