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 })();