From a295c10155e28d189ede50e56cd78a8e379ebb23 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Fri, 6 Mar 2015 12:50:14 +0100 Subject: [PATCH] first step of refactoring created Chapter object and initPos him self --- sites/all/themes/gui/jee/js/jee.js | 170 +++++++++++++++++++---------- 1 file changed, 110 insertions(+), 60 deletions(-) diff --git a/sites/all/themes/gui/jee/js/jee.js b/sites/all/themes/gui/jee/js/jee.js index 8d7e65d..448694a 100755 --- a/sites/all/themes/gui/jee/js/jee.js +++ b/sites/all/themes/gui/jee/js/jee.js @@ -26,54 +26,34 @@ Drupal.behaviors.init_theme = function (context) { jQuery(document).ready(function($) { console.log('Hello Jee'); - var $header = $("#header"), - $chapitres = $('.node-chapitre', '#main'), - chapitres_len = $chapitres.length, - $container = $('#main'), - centerX = $container.width()/2, - centerY = $container.height()/2, - // radius = Math.min($container.width(), $container.height())/2.5, - // angle = Math.random() * 360, - - // is_dragging = false, - nav_pos = {x:0, y:0}, - nav_timer; + var _$header = $("#header"), + _$chapitres = $('.node-chapitre', '#main'), + _chapitres_len = _$chapitres.length, + _chapters = [], + _$container = $('#main'), + _container = { + w:_$container.width(), + h:_$container.height() + }, + _center = {x:_container.w/2,y:_container.h/2}, + _nav_pos = {x:0, y:0}, + _nav_timer; function init(){ - placeChapters(); + initChapters(); launchNav(); }; - function placeChapters(){ + function initChapters(){ // Place each chapters on the ellipse contained on the screen - var w2, h2, angle, c, s, radius, x, y, a = Math.random() *360; - $chapitres.each(function(i, e) { + var angle, a = Math.random() *360; + _$chapitres.each(function(i, e) { + // distribute elements arround the center + angle = (360/_chapitres_len*i+a)*Math.PI/180; - w2 = $(e).outerWidth(true)/2; - h2 = $(e).outerHeight(true)/2; + // Lets create the chapter object and place him self + _chapters.push(new Chapter($(e), angle)); - angle = (360/chapitres_len*i+a)*Math.PI/180; - // angle = randB(angle*0.95, angle*1.05); - - c = Math.abs(Math.cos(angle)); - s = Math.abs(Math.sin(angle)); - - if (c * $container.height() > s * $container.width()) { // It crosses left or right side - radius = (($container.width()/2) / c)*0.5; - }else { // Top or bottom side - radius = (($container.height()/2) / s)*0.5; - } - - // change randomly radius - radius = randB(radius, radius*2); - - x = Math.round(centerX+radius * Math.cos(angle)); - y = Math.round(centerY+radius * -Math.sin(angle)); - - $(e).css({ - left:x-w2, - top:y-h2 - }); }); }; @@ -88,22 +68,22 @@ jQuery(document).ready(function($) { last_clientX = e.clientX; last_clientY = e.clientY; - $chapitres.each(function(i, e) { + _$chapitres.each(function(i, e) { td = randB(0.1, 0.3);//Math.random() * (0.3 - 0.1) + 0.1; $(e).css({"transitionDuration":td+"s"}); }); - nav_timer = setInterval(moveNav, 1000/24); + _nav_timer = setInterval(moveNav, 1000/24); $(this).bind('mousemove', function(e){ - nav_pos.x += e.clientX - last_clientX; - nav_pos.y += e.clientY - last_clientY; + _nav_pos.x += e.clientX - last_clientX; + _nav_pos.y += e.clientY - last_clientY; last_clientX = e.clientX; last_clientY = e.clientY; }); }) .bind('mouseup', function(e){ - clearInterval(nav_timer); + clearInterval(_nav_timer); $(this).unbind('mousemove'); }) // @@ -114,42 +94,42 @@ jQuery(document).ready(function($) { last_clientX = e.originalEvent.touches[0].clientX; last_clientY = e.originalEvent.touches[0].clientY; - $chapitres.each(function(i, e) { + _$chapitres.each(function(i, e) { td = randB(0.1, 0.3); //Math.random() * (0.3 - 0.1) + 0.1; $(e).css({"transitionDuration":td+"s"}); }); - nav_timer = setInterval(moveNav, 1000/12); + _nav_timer = setInterval(moveNav, 1000/12); }) .bind('touchmove', function(e){ // console.log('touchmove', e); - nav_pos.x += e.originalEvent.touches[0].clientX - last_clientX; - nav_pos.y += e.originalEvent.touches[0].clientY - last_clientY; + _nav_pos.x += e.originalEvent.touches[0].clientX - last_clientX; + _nav_pos.y += e.originalEvent.touches[0].clientY - last_clientY; last_clientX = e.originalEvent.touches[0].clientX; last_clientY = e.originalEvent.touches[0].clientY; }) .bind('touchend', function(e){ // console.log("touchend", e); - clearInterval(nav_timer); + clearInterval(_nav_timer); }); // click to preview chapter - $('h2.node-title, .field-name-field-partie:first>.field-name-field-vignette', $chapitres).bind('click', previewChapter); + $('h2.node-title, .field-name-field-partie:first>.field-name-field-vignette', _$chapitres).bind('click', previewChapter); - $('.links a', $chapitres).on('click', openChapter); + $('.links a', _$chapitres).on('click', openChapter); }; function moveNav(){ // console.log("moveNav"); - $chapitres.each(function(i, e){ + _$chapitres.each(function(i, e){ $(e).stop(true, false).css({ - translate:[nav_pos.x, nav_pos.y] + translate:[_nav_pos.x, _nav_pos.y] }); - // $(e).transition({translate:[nav_pos.x, nav_pos.y]}, 200, 'out'); + // $(e).transition({translate:[_nav_pos.x, _nav_pos.y]}, 200, 'out'); }); - $header.stop(true, false).css({ - translate:[nav_pos.x*0.2, nav_pos.y*0.2] - // WebkitTransform:'translate('+nav_pos.x*0.2+', '+nav_pos.y*0.2+')' + _$header.stop(true, false).css({ + translate:[_nav_pos.x*0.2, _nav_pos.y*0.2] + // WebkitTransform:'translate('+_nav_pos.x*0.2+', '+_nav_pos.y*0.2+')' }); }; @@ -197,7 +177,7 @@ jQuery(document).ready(function($) { }; // previewChapter function closePreview($active){ - $chapitres + _$chapitres .filter('.previewed').not($active) .removeClass('previewed') .find('.field-name-field-partie') @@ -220,7 +200,7 @@ jQuery(document).ready(function($) { var $chapterwrapper; function displayChapter(json, textStatus) { - $chapterwrapper = $('
').addClass('chapter-wrapper').append(json.node).appendTo($container); + $chapterwrapper = $('
').addClass('chapter-wrapper').append(json.node).appendTo(_$container); // $chapterwrapper.append(json.node); console.log('displayChapter :: json', json); @@ -228,6 +208,75 @@ jQuery(document).ready(function($) { console.log('displayChapter :: chapterwrapper', $chapterwrapper); }; //displayChapter + /* + * Chapter + * + */ + function Chapter($e, angle){ + + this.$e = $e; + this.geom = { + a:angle, + r:0 + } + this.pos = {x:0,y:0}; + this.translation = {x:0, y:0}; + + + // prototypes + if (typeof Chapter.initialized == "undefined") { + + Chapter.prototype.setInitPos = function(){ + // console.log("Chapter :: setInitPos", this.$e); + this.geom.c = Math.cos(this.geom.a); + this.geom.s = Math.sin(this.geom.a); + this.geom.abs_c = Math.abs(this.geom.c); + this.geom.abs_s = Math.abs(this.geom.s); + + if (this.geom.abs_c * _container.h > this.geom.abs_s * _container.w) { + // It crosses left or right side + this.geom.r = ((_container.w/2) / this.geom.abs_c)*0.5; + }else { + // Top or bottom side + this.geom.r = ((_container.h/2) / this.geom.abs_s)*0.5; + } + + // change randomly radius + this.geom.r = randB(this.geom.r, this.geom.r*2); + + this.pos.x = Math.round(_center.x+this.geom.r * this.geom.c) - this.$e.outerWidth(true)/2; + this.pos.y = Math.round(_center.y+this.geom.r * -this.geom.s) - this.$e.outerHeight(true)/2; + + console.log('this', this); + this.$e.css({ + left:this.pos.x, + top:this.pos.y + }); + };// setIniPos() + + Chapter.prototype.move = function(){ + + }; + + Chapter.prototype.preview = function(){ + + }; + + Chapter.prototype.closePreview = function(){ + + }; + + Chapter.prototype.open = function(){ + + }; + + Node.initialized = true; + } + + this.setInitPos(); + + };//Chapter + /* HELPERS */ function randB(min, max){ @@ -235,5 +284,6 @@ jQuery(document).ready(function($) { } + init(); }); \ No newline at end of file