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 = $('