github.com/kardianos/nomad@v0.1.3-0.20151022182107-b13df73ee850/website/source/assets/javascripts/app/CubeDraw.js (about)

     1  (function(){
     2  
     3  CubeDraw = Base.extend({
     4  
     5  	$cube: null,
     6  	ROWS: 4,
     7  	PADDING: 64, // 44 pixel base square + 20 padding
     8  	previousRowTop: null,
     9  	previousRowLeft: null,
    10  	lastCube: null,
    11  
    12  	constructor: function(){
    13  		this.$cube = $('.cube');
    14  		this.$cubes = $('#cubes');
    15  
    16  		this.lastCube = this.$cube;
    17  		this.previousRowLeft = parseInt(this.lastCube.css('left'), 10)
    18  		this.previousRowTop = parseInt(this.lastCube.css('top'), 10);
    19  
    20  		this.addEventListeners();
    21  	},
    22  
    23  	addEventListeners: function(){
    24  		var angle = this.getRadiansForAngle(30);
    25  		var sin = Math.sin(angle) * this.PADDING;
    26  		var cos = Math.cos(angle) * this.PADDING;
    27  
    28  		//sett up our parent columns
    29  		for(var i = 0; i < this.ROWS; i++){
    30  			var cube = this.lastCube.clone();
    31  
    32  			cube.css({ top: this.previousRowTop - sin, left: this.previousRowLeft - cos});
    33  			this.$cubes.prepend(cube);
    34  			this.lastCube = cube;
    35  			this.previousRowLeft = parseInt(this.lastCube.css('left'), 10)
    36  			this.previousRowTop = parseInt(this.lastCube.css('top'), 10)
    37  		}
    38  
    39  		//use the parent cubes as starting point for rows
    40  		var $allParentCubes = $('.cube');
    41  		var angle = this.getRadiansForAngle(150);
    42  		var sin = Math.sin(angle) * this.PADDING;
    43  		var cos = Math.cos(angle) * this.PADDING;
    44  
    45  		for(var j = this.ROWS; j > -1 ; j--){
    46  			var baseCube = $($allParentCubes[j]);
    47  
    48  			this.previousRowLeft = parseInt(baseCube.css('left'), 10)
    49  			this.previousRowTop = parseInt(baseCube.css('top'), 10)
    50  
    51  			for(var n = 0; n < this.ROWS; n++){
    52  				var cube = baseCube.clone();
    53  				cube.css({ top: this.previousRowTop - sin, left: this.previousRowLeft - cos});
    54  
    55  				this.$cubes.prepend(cube);
    56  
    57  				this.lastCube = cube;
    58  				this.previousRowLeft = parseInt(this.lastCube.css('left'), 10)
    59  				this.previousRowTop = parseInt(this.lastCube.css('top'), 10)
    60  			}
    61  		}
    62  
    63  		var $all = $('.cube');
    64  		for(var c = 0; c < $all.length; c++){
    65  			(function(index){
    66  				setTimeout(function(){
    67  					var $theCube = $($all[index]);
    68  					$theCube.addClass('in')
    69  				}, 100*c)
    70  			})(c)
    71  		}
    72  	},
    73  
    74  	getRadiansForAngle: function(angle) {
    75  		return angle * (Math.PI/180);
    76  	}
    77  
    78  });
    79  
    80  window.CubeDraw = CubeDraw;
    81  
    82  })();