83 lines
2.1 KiB
JavaScript
83 lines
2.1 KiB
JavaScript
|
(function(){
|
||
|
|
|
||
|
|
CubeDraw = Base.extend({
|
||
|
|
|
||
|
|
$cube: null,
|
||
|
|
ROWS: 4,
|
||
|
|
PADDING: 64, // 44 pixel base square + 20 padding
|
||
|
|
previousRowTop: null,
|
||
|
|
previousRowLeft: null,
|
||
|
|
lastCube: null,
|
||
|
|
|
||
|
|
constructor: function(){
|
||
|
|
this.$cube = $('.cube');
|
||
|
|
this.$cubes = $('#cubes');
|
||
|
|
|
||
|
|
this.lastCube = this.$cube;
|
||
|
|
this.previousRowLeft = parseInt(this.lastCube.css('left'), 10)
|
||
|
|
this.previousRowTop = parseInt(this.lastCube.css('top'), 10);
|
||
|
|
|
||
|
|
this.addEventListeners();
|
||
|
|
},
|
||
|
|
|
||
|
|
addEventListeners: function(){
|
||
|
|
var angle = this.getRadiansForAngle(30);
|
||
|
|
var sin = Math.sin(angle) * this.PADDING;
|
||
|
|
var cos = Math.cos(angle) * this.PADDING;
|
||
|
|
|
||
|
|
//sett up our parent columns
|
||
|
|
for(var i = 0; i < this.ROWS; i++){
|
||
|
|
var cube = this.lastCube.clone();
|
||
|
|
|
||
|
|
cube.css({ top: this.previousRowTop - sin, left: this.previousRowLeft - cos});
|
||
|
|
this.$cubes.prepend(cube);
|
||
|
|
this.lastCube = cube;
|
||
|
|
this.previousRowLeft = parseInt(this.lastCube.css('left'), 10)
|
||
|
|
this.previousRowTop = parseInt(this.lastCube.css('top'), 10)
|
||
|
|
}
|
||
|
|
|
||
|
|
//use the parent cubes as starting point for rows
|
||
|
|
var $allParentCubes = $('.cube');
|
||
|
|
var angle = this.getRadiansForAngle(150);
|
||
|
|
var sin = Math.sin(angle) * this.PADDING;
|
||
|
|
var cos = Math.cos(angle) * this.PADDING;
|
||
|
|
|
||
|
|
for(var j = this.ROWS; j > -1 ; j--){
|
||
|
|
var baseCube = $($allParentCubes[j]);
|
||
|
|
|
||
|
|
this.previousRowLeft = parseInt(baseCube.css('left'), 10)
|
||
|
|
this.previousRowTop = parseInt(baseCube.css('top'), 10)
|
||
|
|
|
||
|
|
for(var n = 0; n < this.ROWS; n++){
|
||
|
|
var cube = baseCube.clone();
|
||
|
|
cube.css({ top: this.previousRowTop - sin, left: this.previousRowLeft - cos});
|
||
|
|
|
||
|
|
this.$cubes.prepend(cube);
|
||
|
|
|
||
|
|
this.lastCube = cube;
|
||
|
|
this.previousRowLeft = parseInt(this.lastCube.css('left'), 10)
|
||
|
|
this.previousRowTop = parseInt(this.lastCube.css('top'), 10)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var $all = $('.cube');
|
||
|
|
for(var c = 0; c < $all.length; c++){
|
||
|
|
(function(index){
|
||
|
|
setTimeout(function(){
|
||
|
|
var $theCube = $($all[index]);
|
||
|
|
$theCube.addClass('in')
|
||
|
|
}, 100*c)
|
||
|
|
})(c)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
getRadiansForAngle: function(angle) {
|
||
|
|
return angle * (Math.PI/180);
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
window.CubeDraw = CubeDraw;
|
||
|
|
|
||
|
|
})();
|