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

refactoring finished AND lines developed

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2015-03-06 19:52:51 +01:00
parent a295c10155
commit 570d31ea3b
8 changed files with 356 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/gui/jee/js/jee.js
+246 -150
View File
@@ -1,27 +1,7 @@
Drupal.behaviors.init_theme = function (context) {
// Growl-style system messages
$('#messages-and-help > div.messages:not(.processed)')
.addClass('processed')
.each(function() {
// If a message meets these criteria, we don't autoclose
// - contains a link
// - is an error or warning
// - contains a lenghthy amount of text
if ($('a', this).size() || $(this).is('.error') || $(this).is('.warning') || $(this).text().length > 100) {
$(this).prepend("<span class='close'>X</span>");
$('span.close', this).click(function() {
$(this).parent().slideUp('fast');
});
}
else {
// This essentially adds a 3 second pause before hiding the message.
$(this).animate({opacity:1}, 5000, 'linear', function() {
$(this).slideUp('fast');
});
}
});
};
//
// by Bachir Soussi Chiadmi
// 2015
//
jQuery(document).ready(function($) {
console.log('Hello Jee');
@@ -37,7 +17,10 @@ jQuery(document).ready(function($) {
},
_center = {x:_container.w/2,y:_container.h/2},
_nav_pos = {x:0, y:0},
_nav_timer;
_nav_timer,
_last_client = {x:0,y:0},
_fps = 1000/12,
_dragging = false;
function init(){
initChapters();
@@ -46,187 +29,141 @@ jQuery(document).ready(function($) {
function initChapters(){
// Place each chapters on the ellipse contained on the screen
var angle, a = Math.random() *360;
var base_a = Math.random() *360;
_$chapitres.each(function(i, e) {
// distribute elements arround the center
angle = (360/_chapitres_len*i+a)*Math.PI/180;
// Lets create the chapter object and place him self
_chapters.push(new Chapter($(e), angle));
_chapters.push(new Chapter(i, $(e), base_a));
});
};
function launchNav(){
var last_clientX,
last_clientY,
td;
$(document)
_$container
// DESKTOP EVENTS
.bind('mousedown', function(e){
last_clientX = e.clientX;
last_clientY = e.clientY;
if(_dragging) return false;
_dragging = true;
console.log('mousedown');
_last_client.x=e.clientX;
_last_client.y=e.clientY;
_$chapitres.each(function(i, e) {
td = randB(0.1, 0.3);//Math.random() * (0.3 - 0.1) + 0.1;
$(e).css({"transitionDuration":td+"s"});
$(e).css({"transitionDuration":randB(0.1, 0.3)+"s"});
});
_nav_timer = setInterval(moveNav, 1000/24);
_nav_timer = setInterval(moveNav, _fps);
$(this).bind('mousemove', function(e){
_nav_pos.x += e.clientX - last_clientX;
_nav_pos.y += e.clientY - last_clientY;
last_clientX = e.clientX;
last_clientY = e.clientY;
console.log('mousemove');
_nav_pos.x += e.clientX - _last_client.x;
_nav_pos.y += e.clientY - _last_client.y;
_last_client.x = e.clientX;
_last_client.y = e.clientY;
// moveNav();
});
})
.bind('mouseup', function(e){
clearInterval(_nav_timer);
console.log('mouseup');
_dragging = false;
// clearInterval(_nav_timer);
$(this).unbind('mousemove');
})
//
// TOUCH EVENTS - - - - - - - - - - - - - -
//
.bind('touchstart', function(e){
// console.log('touchstart', e);
last_clientX = e.originalEvent.touches[0].clientX;
last_clientY = e.originalEvent.touches[0].clientY;
if(_dragging) return false;
_dragging = true;
console.log('touchstart');
_$chapitres.each(function(i, e) {
td = randB(0.1, 0.3); //Math.random() * (0.3 - 0.1) + 0.1;
$(e).css({"transitionDuration":td+"s"});
});
_last_client.x = e.originalEvent.touches[0].clientX;
_last_client.y = e.originalEvent.touches[0].clientY;
_nav_timer = setInterval(moveNav, 1000/12);
_$chapitres.each(function(i, e) {
$(e).css({"transitionDuration":randB(0.1, 0.3)+"s"});
});
_nav_timer = setInterval(moveNav, _fps);
})
.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;
last_clientX = e.originalEvent.touches[0].clientX;
last_clientY = e.originalEvent.touches[0].clientY;
console.log('touchmove');
_nav_pos.x += e.originalEvent.touches[0].clientX - _last_client.x;
_nav_pos.y += e.originalEvent.touches[0].clientY - _last_client.y;
_last_client.x = e.originalEvent.touches[0].clientX;
_last_client.y = e.originalEvent.touches[0].clientY;
// moveNav();
})
.bind('touchend', function(e){
// console.log("touchend", e);
clearInterval(_nav_timer);
console.log("touchend");
_dragging = false;
// 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){
$(e).stop(true, false).css({
translate:[_nav_pos.x, _nav_pos.y]
});
// $(e).transition({translate:[_nav_pos.x, _nav_pos.y]}, 200, 'out');
});
// move chapters
for (var i = _chapitres_len - 1; i >= 0; i--) {
_chapters[i].move();
};
// move header
_$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+')'
});
};
var $chapt, $parties, px, py;
function previewChapter(e){
e.preventDefault();
// console.log('hello', this);
$chapt = $(this).parents('.node-chapitre');
closePreview($chapt);
$parties = $('.field-name-field-partie', $chapt);
$parties.each(function(i, e) {
switch(i){
case 0:
px=randB(-40, 40); py=randB(40, 60);
break;
case 1:
px=randB(100, 200); py=randB(120,220);
break;
case 2:
px=randB(-200, -100); py=randB(250,320);
break;
case 3:
px=randB(-100, 100); py=randB(320,350)+100;
break;
}
setTimeout(
(function($chapt, $part, px, py){
$part
.css({
translate:[px, py],
// opacity:1
});
// console.log('part', $part);
// console.log('part left', $part.height());
})($chapt, $(e), px, py),10);
}); // each $parties
$chapt.addClass('previewed');
return false;
}; // previewChapter
function closePreview($active){
_$chapitres
.filter('.previewed').not($active)
.removeClass('previewed')
.find('.field-name-field-partie')
.css({transform:"none"});
}; // closePreview
var nid;
function openChapter(e){
e.preventDefault();
nid = $(this).attr("href").match(/^\/node\/(\d+)/);
console.log(nid);
$.getJSON(
'/jee/chapter/'+nid[1],
{},
displayChapter
);
return false;
}; // openChapter
var $chapterwrapper;
function displayChapter(json, textStatus) {
$chapterwrapper = $('<div>').addClass('chapter-wrapper').append(json.node).appendTo(_$container);
// $chapterwrapper.append(json.node);
console.log('displayChapter :: json', json);
console.log('displayChapter :: chapterwrapper', $chapterwrapper);
}; //displayChapter
/*
* Chapter
*
*/
function Chapter($e, angle){
function Chapter(i, $e, base_a){
$e.obj = this;
this.i = i;
this.$e = $e;
this.nid = $e.attr("id").match(/^node-(\d+)/)[1];
this.geom = {
a:angle,
base_a:base_a,
a:0,
r:0
}
this.pos = {x:0,y:0};
this.translation = {x:0, y:0};
//parties
this.$parties = $('.field-name-field-partie', $e);
this.lines = new Array();
this.linesAnimeInterval = null;
this.linesAnimeCounter = 0;
this.linesAnimeTime = 5; // sec
// prototypes
if (typeof Chapter.initialized == "undefined") {
Chapter.prototype.init = function(){
// var _this = this;
// this.$parties.each(function(i, e){
// _this.partie.push({$partie:$(this)});
// });
this.setInitPos();
this.drawLines();
this.setEvents();
};
Chapter.prototype.setInitPos = function(){
// distribute elements arround the center
this.geom.a = (360/_chapitres_len*this.i+this.geom.base_a)*Math.PI/180;
// console.log("Chapter :: setInitPos", this.$e);
this.geom.c = Math.cos(this.geom.a);
this.geom.s = Math.sin(this.geom.a);
@@ -254,26 +191,154 @@ jQuery(document).ready(function($) {
});
};// setIniPos()
Chapter.prototype.move = function(){
Chapter.prototype.setEvents = function(){
//http://technify.me/user-experience/javascript/jquery/trigger-custom-events-with-jquery/
// click to preview chapter
$('h2.node-title, .field-name-field-partie:first>.field-name-field-vignette', this.$e)
.on('click', this, function(e){
e.stopPropagation();
e.preventDefault();
e.data.preview(e);
return false;
});
$('.links a', this.$e)
.on('click', this, function(e){
e.stopPropagation();
e.preventDefault();
e.data.loadNode();
return false;
});
};
Chapter.prototype.preview = function(){
Chapter.prototype.move = function(){
this.$e.css({ //.stop(true, false)
translate:[_nav_pos.x, _nav_pos.y]
});
// $(e).transition({translate:[_nav_pos.x, _nav_pos.y]}, 200, 'out');
};
Chapter.prototype.preview = function(e){
console.log('preview', this.i);
for (var i = _chapitres_len - 1; i >= 0; i--) {
if(i !== this.i)
_chapters[i].closePreview();
};
var px, py;
this.$parties.each(function(i, e) {
switch(i){
case 0:
px=randB(-40, 40); py=randB(40, 60);
break;
case 1:
px=randB(100, 200); py=randB(120,220);
break;
case 2:
px=randB(-200, -100); py=randB(250,320);
break;
}
setTimeout(
(function(e, px, py){
return function(){
$(e)
.css({
translate:[px, py],
// opacity:1
});
}
}(e, px, py)),
10);
}); // each $parties
this.$e.addClass('previewed');
this.animeLines();
};
Chapter.prototype.closePreview = function(){
this.$e.removeClass('previewed')
.find('.field-name-field-partie')
.css({transform:"none"});
};
Chapter.prototype.drawLines = function(){
for (var i = 0; i < 2; i++) {
this.lines.push({
$line:$("<div>").addClass('line', 'line-'+i).prependTo(this.$parties[i])
});
};
};
Chapter.prototype.animeLines = function(){
this.linesAnimeCounter = 0;
this.linesAnimeInterval = setInterval(
(function(_this){
return function(){
// console.log("partie pos : ", _this.$parties.eq(2).position());
// get the lines length
var l, a, pos1, pos2;
for (var i = 0; i < _this.lines.length; i++) {
pos1 = _this.$parties.eq(i).position();
pos2 = _this.$parties.eq(i+1).position();
l = Math.sqrt(
Math.pow(
pos2.left - pos1.left
,2
)
+
Math.pow(
pos2.top - pos1.top
,2
)
);
// get the rotation
a = 180 / 3.14 * Math.acos((pos2.top - pos1.top) / l);
if(pos2.left > pos1.left)
a *= -1;
// console.log("a = "+a);
_this.lines[i].$line.css({
'height':l,
rotate:a+"deg"
});
};
// limit the naimation time
_this.linesAnimeCounter ++;
if(_this.linesAnimeCounter > (1000/_fps)*_this.linesAnimeTime)
clearInterval(_this.linesAnimeInterval);
};
}(this)),
_fps);
};
Chapter.prototype.open = function(){
Chapter.prototype.loadNode = function(e){
// console.log("Chapter :: open : nid", this.nid);
$.getJSON(
'/jee/chapter/'+this.nid,
{},
this.displayNode
);
};
Chapter.prototype.displayNode = function(json, textstatus){
console.log('Chapter :: displayNode : json', json);
};
Node.initialized = true;
}
this.setInitPos();
this.init();
};//Chapter
@@ -286,4 +351,35 @@ jQuery(document).ready(function($) {
init();
});
});
// Drupal.behaviors.init_theme = function (context) {
// // Growl-style system messages
// $('#messages-and-help > div.messages:not(.processed)')
// .addClass('processed')
// .each(function() {
// // If a message meets these criteria, we don't autoclose
// // - contains a link
// // - is an error or warning
// // - contains a lenghthy amount of text
// if ($('a', this).size() || $(this).is('.error') || $(this).is('.warning') || $(this).text().length > 100) {
// $(this).prepend("<span class='close'>X</span>");
// $('span.close', this).click(function() {
// $(this).parent().slideUp('fast');
// });
// }
// else {
// // This essentially adds a 3 second pause before hiding the message.
// $(this).animate({opacity:1}, 5000, 'linear', function() {
// $(this).slideUp('fast');
// });
// }
// });
// };