github.com/dahs81/otto@v0.2.1-0.20160126165905-6400716cf085/website/source/assets/javascripts/app/DotLockup.js (about)

     1  (function(){
     2  
     3  DotLockup = Base.extend({
     4  
     5  	$keyWrap: null,
     6  	$keys: null,
     7  
     8  	constructor: function(){
     9  		var _this = this;
    10  
    11  		_this.$keyWrap = $('.keys');
    12  		_this.$keys = $('.keys span');
    13  
    14  		//(3000)
    15  
    16  		_this.addEventListeners();
    17  		_this.animateFull()
    18  			.then(_this.animateOff.bind(this))
    19  			.then(_this.animateFull.bind(this))
    20  			.then(_this.animatePress.bind(this))
    21  			.then(_this.resetKeys.bind(this));
    22  	},
    23  
    24  	addEventListeners: function(){
    25  		var _this = this;
    26  	},
    27  
    28  	animateFull: function(uberDelay){
    29  		var _this = this,
    30  			uberDelay = uberDelay || 0,
    31  			deferred = $.Deferred();
    32  
    33  		setTimeout( function(){
    34  			_this.updateEachKeyClass('full', 'off', 1000, 150, deferred.resolve);
    35  		}, uberDelay)
    36  
    37  		return deferred;
    38  	},
    39  
    40  	animateOff: function(){
    41  		var deferred = $.Deferred();
    42  
    43  		this.updateEachKeyClass('full off', '', 1000, 150, deferred.resolve, true);
    44  		
    45  		return deferred;
    46  	},
    47  
    48  	animatePress: function(){
    49  		var _this = this,
    50  			deferred = $.Deferred(),
    51  			len = _this.$keys.length,
    52  			presses = _this.randomNumbersIn(len),
    53  			delay = 250,
    54  			interval = 600;
    55  
    56  		for(var i=0; i < len; i++){
    57  			(function(index){
    58  				setTimeout(function(){
    59  					_this.$keys.eq(presses[index]).addClass('press');
    60  					if(index == len -1 ){
    61  						deferred.resolve();
    62  					}				
    63  				}, delay)
    64  
    65  				delay += interval;
    66  			}(i))
    67  		}
    68  
    69  		return deferred;
    70  	},
    71  
    72  	resetKeys: function(){
    73  		var _this = this,
    74  			len = _this.$keys.length,
    75  			delay = 2500,
    76  			interval = 250;
    77  
    78  		setTimeout(function(){
    79  			_this.$keys.removeClass('full press');	
    80  		}, delay)
    81  		/*for(var i=0; i < len; i++){
    82  			(function(index){
    83  				setTimeout(function(){
    84  					_this.$keys.eq(index).removeClass('full press');	
    85  				}, delay)
    86  
    87  				delay += interval;
    88  			}(i))
    89  		}*/		
    90  	},
    91  
    92  	updateEachKeyClass: function(clsAdd, clsRemove, delay, interval, resolve, reverse){
    93  		var delay = delay;
    94  		this.$keys.each(function(index){
    95  			var span = this;
    96  			var finishIndex = (reverse) ? 0 : 9; // final timeout at 0 or 9 depending on if class removal is reversed on the span list
    97  			setTimeout( function(){ 
    98  				$(span).removeClass(clsRemove).addClass(clsAdd);
    99  				if(index == finishIndex ){
   100  					resolve();
   101  				}
   102  			}, delay);
   103  
   104  			if(reverse){
   105  				delay -= interval;
   106  			}else{
   107  				delay += interval;
   108  			}
   109  		})		
   110  
   111  	},
   112  
   113  	randomNumbersIn: function(len){
   114  		var arr = [];
   115  		while(arr.length < len){
   116  		  	var randomnumber=Math.floor(Math.random()*len)
   117  		  	var found=false;
   118  		  	for(var i=0;i<arr.length;i++){
   119  				if(arr[i]==randomnumber){found=true;break}
   120  		  	}
   121  		  	if(!found)arr[arr.length]=randomnumber;
   122  		}
   123  		return arr;
   124  	}
   125  
   126  });
   127  
   128  window.DotLockup = DotLockup;
   129  
   130  })();