first step of refactoring

created Chapter object and initPos him self

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"),
+  var _$header = $("#header"),
-        $chapitres = $('.node-chapitre', '#main'),
+      _$chapitres = $('.node-chapitre', '#main'),
-        chapitres_len = $chapitres.length,
+      _chapitres_len = _$chapitres.length,
-        $container = $('#main'),
+      _chapters = [],
-        centerX = $container.width()/2,
+      _$container = $('#main'),
-        centerY = $container.height()/2,
+      _container = {
-        // radius = Math.min($container.width(), $container.height())/2.5,
+        w:_$container.width(),
-        // angle = Math.random() * 360,
+        h:_$container.height()
-
+      },
-        // is_dragging = false,
+      _center = {x:_container.w/2,y:_container.h/2},
-        nav_pos = {x:0, y:0},
+      _nav_pos = {x:0, y:0},
-        nav_timer;
+      _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;
+    var angle, a = Math.random() *360;
-    $chapitres.each(function(i, e) {
+    _$chapitres.each(function(i, e) {
+      // distribute elements arround the center
+      angle = (360/_chapitres_len*i+a)*Math.PI/180;
 
-      w2 = $(e).outerWidth(true)/2;
+      // Lets create the chapter object and place him self
-      h2 = $(e).outerHeight(true)/2;
+      _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.x += e.clientX - last_clientX;
-          nav_pos.y += e.clientY - last_clientY;
+          _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.x += e.originalEvent.touches[0].clientX - last_clientX;
-          nav_pos.y += e.originalEvent.touches[0].clientY - last_clientY;
+          _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({
+    _$header.stop(true, false).css({
-      translate:[nav_pos.x*0.2, nav_pos.y*0.2]
+      translate:[_nav_pos.x*0.2, _nav_pos.y*0.2]
-      // WebkitTransform:'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 = $('<div>').addClass('chapter-wrapper').append(json.node).appendTo($container);
+    $chapterwrapper = $('<div>').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();
 });