Permalink
Browse files

First import

  • Loading branch information...
1 parent b7ad7a7 commit 6fde7336f4c68342c42db2d0bacae32cab6586de @wassimchegham wassimchegham committed Jun 11, 2012
@@ -0,0 +1,47 @@
+window.addEventListener('load', function() {
+ var app = (new PatternLockScreen("lock-screen")).start();
+ var unlockButton = document.getElementById('unlock-button');
+ var savePatternButton = document.getElementById('save-pattern-button');
+ var resetButton = document.getElementById('reset-button');
+ var showHint = true;
+
+ savePatternButton.addEventListener('click', function(){
+ var span = this.getElementsByClassName('gray');
+ if( span.className==='red' ){
+ this.innerHTML = '<span class="gray"></span>Record Pattern';
+ span.className = 'gray';
+ app.stopRecordPattern();
+ unlockButton.style.display = 'inline';
+ }
+ else {
+ this.innerHTML = '<span class="red"></span>Recording...';
+ span.className = 'red';
+ app.startRecordPattern();
+ unlockButton.style.display = 'none';
+ }
+ }, false);
+ unlockButton.addEventListener('click', function(){
+ var btn = this;
+ if( !app.unlock() ){
+ this.className = "button red";
+ setTimeout(function(){
+ btn.className = "button blue";
+ }, 1000);
+ }
+ else {
+ btn.className = "button green";
+ alert('Access Granted!');
+ }
+ }, false);
+ resetButton.addEventListener('click', function(){
+ app.reset();
+ });
+ document.addEventListener('keyup', function(e){
+ app.showHint(showHint);
+ var code = e.keyCode || e.which;
+ if( code === 72 ){
+ showHint = !showHint;
+ }
+ });
+
+}, false);
@@ -0,0 +1,102 @@
+function Dot(o){
+ var self = this;
+ this.x = o.x;
+ this.y = o.y;
+ this.dotInnerLayer = o.innerLayer;
+ this.listenerLayer = o.listenerLayer;
+ this.pattern = o.pattern;
+
+ this.innerCircleRadius = 5;
+ this.strokeWidth = 4;
+ this.innerCircleFill = "rgba(255,255,255,0)";
+ this.innerCircleStroke = "#aaa";
+
+ var stage = this.dotInnerLayer.getStage();
+ var m = Math.min(
+ stage.getWidth(),
+ stage.getHeight()
+ );
+ this.outerCircleConfig = {
+ radius : m/10,
+ fill : "rgba(255,255,255,0)",
+ stroke : "lime",
+ strokeWidth : self.strokeWidth,
+ };
+
+ this.innerCircle = new Kinetic.Circle({
+ x: self.x,
+ y: self.y,
+ radius: self.innerCircleRadius,
+ fill: self.innerCircleFill,
+ stroke: self.innerCircleStroke,
+ strokeWidth: self.strokeWidth
+ });
+ this.listenerCircle = new Kinetic.Circle({
+ x: self.x,
+ y: self.y,
+ radius: self.outerCircleConfig.radius,
+ fill: 'transparent'
+ });
+ this.listenerCircle.on("mousedown mousemove touchmove", this.addOuterCircle.bind(this));
+ this.listenerCircle.on("mouseout", this.mouseout.bind(this));
+ this.listenerCircle.on("mouseup touchend", this.isValid.bind(this));
+ this.listenerLayer.add(this.listenerCircle);
+ this.dotInnerLayer.add(this.innerCircle);
+ this.dotInnerLayer.draw();
+
+ return this;
+};
+Dot.prototype.isValid = function(){
+ if( this.pattern.isRecording ){
+ return;
+ }
+
+ var event;
+ if (document.createEvent) {
+ event = document.createEvent("HTMLEvents");
+ event.initEvent("click", true, true);
+ } else {
+ event = document.createEventObject();
+ event.eventType = "click";
+ };
+
+ var btn = document.getElementById('unlock-button');
+ if( btn.dispatchEvent ){
+ btn.dispatchEvent(event);
+ }
+ else if( btn.fireEvent ){
+ btn.fireEvent('on'+event.eventTye, event);
+ }
+};
+Dot.prototype.addOuterCircle = function(e) {
+
+ document.body.style.cursor = 'pointer';
+
+ // hide the inner circle
+ this.innerCircle.setStrokeWidth(2);
+ this.dotInnerLayer.draw();
+
+ // add an outer circle if needed
+ var self = this;
+ var outerCircle = new Kinetic.Circle({
+ x: self.innerCircle.getX(),
+ y: self.innerCircle.getY(),
+ radius: 0,
+ fill: self.outerCircleConfig.fill,
+ stroke: self.outerCircleConfig.stroke,
+ strokeWidth: self.outerCircleConfig.strokeWidth
+ });
+ this.pattern.addDot(outerCircle, this.outerCircleConfig);
+
+};
+Dot.prototype.mouseover = function() {
+ document.body.style.cursor = 'pointer';
+};
+Dot.prototype.mouseout = function() {
+ document.body.style.cursor = 'default';
+};
+Dot.prototype.clear = function(){
+ this.innerCircle.setFill(this.innerCircleFill);
+ this.innerCircle.setRadius(this.innerCircleRadius);
+ this.dotInnerLayer.draw();
+};
@@ -0,0 +1,176 @@
+function Pattern(o){
+ this.userDots = [];
+ this.savedPattern = [];
+ var stage = o.patternLayer.getStage();
+ var mousePos = stage.getMousePosition() || {x: stage.getWidth()/2, y: stage.getHeight()/2};
+ this._x0 = mousePos.x;
+ this._y0 = mousePos.y;
+ this._x = this._x0 ;
+ this._y = this._y0;
+ this.patternLayer = o.patternLayer;
+ this.lineLayer = o.lineLayer;
+ this.hintLayer = o.hintLayer;
+ this.isRecording = false;
+ this.toBeClearedOnNextUse = false;
+};
+Pattern.prototype.setRecording = function(state){
+ this.isRecording = state;
+};
+Pattern.prototype.setToBeClearedOnNextUse = function(state){
+ this.toBeClearedOnNextUse = state;
+};
+Pattern.prototype.show = function(){
+ this.hintLayer.show();
+ this.hintLayer.draw();
+};
+Pattern.prototype.hide = function(){
+ this.hintLayer.hide();
+ this.hintLayer.draw();
+};
+Pattern.prototype.buildHint = function(){
+ line = this.getLine(this.savedPattern);
+ this.lineLayer.removeChildren();
+ this.hintLayer.add(line);
+};
+Pattern.prototype.addDot = function(dot, config){
+ if( this.toBeClearedOnNextUse ){
+ this.clear();
+ this.toBeClearedOnNextUse = false;
+ }
+
+ if( this.shouldDrawDot(dot) ){
+
+ if( this.isRecording ){
+ this.savePatternDot(dot);
+ }
+ else {
+ if( this.shouldDrawDot(dot) ){
+ this.saveUserDot(dot);
+ }
+ }
+
+ this.patternLayer.add(dot);
+ this.setTransition(dot, config);
+ this.patternLayer.draw();
+ }
+
+};
+Pattern.prototype.shouldDrawDot = function(dot){
+ var dots = this.isRecording ? this.savedPattern : this.userDots;
+ for(var i=0; i<dots.length; i+=1){
+ var o = dots[i];
+ if( o.getX() === dot.getX() && o.getY() === dot.getY() ){
+ return false;
+ }
+ };
+ return true;
+};
+Pattern.prototype.setTransition = function(dot, config){
+ var self = this;
+ dot.transitionTo({
+ radius: config.radius,
+ duration: 0.1,
+ callback: self.drawLine()
+ });
+};
+Pattern.prototype.saveUserDot = function(dot){
+ this.userDots.push(dot);
+};
+Pattern.prototype.drawLine = function(){
+ var line;
+ var dot1;
+ var dot2;
+ var dots = this.isRecording ? this.savedPattern : this.userDots;
+ var l = dots.length;
+ if( l >= 2 ){
+ line = this.getLine(dots);
+ this.lineLayer.removeChildren();
+ this.lineLayer.add(line);
+ this.lineLayer.draw();
+ }
+};
+Pattern.prototype.getLine = function(dots){
+ return new Kinetic.Shape({
+ drawFunc: function() {
+ var ctx = this.getContext();
+ var dot1 = dots[0];
+ var dot;
+ ctx.beginPath();
+ ctx.moveTo(dot1.getX(), dot1.getY());
+ for(var i=1; i<dots.length; i+=1){
+ dot = dots[i];
+ ctx.lineTo(dot.getX(), dot.getY());
+ }
+ ctx.lineJoin = "round";
+ ctx.lineCap = "round";
+ ctx.strokeStyle = "rgba(255,255,255,0.5)";
+ ctx.lineWidth = 5;
+ ctx.stroke();
+ ctx.closePath();
+ },
+ stroke: "rgba(255,255,255,0.5)",
+ strokeWidth: 5
+ });
+};
+Pattern.prototype.isValid = function(){
+ if( this.savedPattern.length !== this.userDots.length ){
+ return false;
+ };
+ for(var i=0; i<this.savedPattern.length; i++){
+ var savedDot = this.savedPattern[i];
+ var userDot = this.userDots[i];
+ if( savedDot.getX() !== userDot.getX() || savedDot.getY() !== userDot.getY() ){
+ return false;
+ }
+ };
+ return true;
+};
+Pattern.prototype.getDots = function(){
+ return this.userDots;
+};
+Pattern.prototype.clear = function(){
+ this.clearUserDots();
+ this.clearLayers();
+ return this;
+};
+Pattern.prototype.clearUserDots = function(){
+ this.userDots = [];
+};
+Pattern.prototype.clearLayers = function(){
+ var self = this;
+ var dots = this.patternLayer.getChildren();
+ var l = dots.length;
+ for(var i=0; i<l; i+=1){
+ var dot = dots[i];
+ dot.transitionTo({
+ radius: 0,
+ duration: 0.1,
+ callback: function(){
+ if( l-1 === i ){
+ self.patternLayer.clear();
+ self.patternLayer.removeChildren();
+ self.patternLayer.draw();
+ }
+ }
+ });
+ };
+
+ self.lineLayer.clear();
+ self.lineLayer.removeChildren();
+ self.lineLayer.draw();
+
+};
+Pattern.prototype.savePatternDot = function(dot){
+ this.savedPattern.push({
+ x: dot.getX(),
+ y: dot.getY(),
+ getX: function(){ return this.x; },
+ getY: function(){ return this.y; }
+ });
+};
+Pattern.prototype.clearSavedPattern = function(){
+ this.savedPattern = [];
+ this.hintLayer.removeChildren();
+ this.hintLayer.clear();
+ this.hintLayer.draw();
+};
Oops, something went wrong.

0 comments on commit 6fde733

Please sign in to comment.