|
|
@@ -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;
|
|
|
+
|
|
|
+ _$chapitres.each(function(i, e) {
|
|
|
+ $(e).css({"transitionDuration":randB(0.1, 0.3)+"s"});
|
|
|
+ });
|
|
|
|
|
|
- _nav_timer = setInterval(moveNav, 1000/12);
|
|
|
+ _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');
|
|
|
+// });
|
|
|
+// }
|
|
|
+// });
|
|
|
+// };
|
|
|
+
|
|
|
+
|
|
|
+
|
Bachir Soussi Chiadmi