bachir/jeunes-et-engages-d7
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first step of refactoring

Browse Source 
created Chapter object and initPos him self
This commit is contained in:
Bachir Soussi Chiadmi
2015-03-06 12:50:14 +01:00
parent 81f57b8f4e
commit a295c10155
1 changed files with 110 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/gui/jee/js/jee.js
+110 -60
View File
@@ -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 = $('<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();
});