387 lines
10 KiB
JavaScript
Executable File
387 lines
10 KiB
JavaScript
Executable File
//
|
|
// by Bachir Soussi Chiadmi
|
|
// 2015
|
|
//
|
|
|
|
jQuery(document).ready(function($) {
|
|
console.log('Hello Jee');
|
|
|
|
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,
|
|
_last_client = {x:0,y:0},
|
|
_fps = 1000/12,
|
|
_dragging = false;
|
|
|
|
function init(){
|
|
initChapters();
|
|
launchNav();
|
|
};
|
|
|
|
function initChapters(){
|
|
// Place each chapters on the ellipse contained on the screen
|
|
var base_a = Math.random() *360;
|
|
_$chapitres.each(function(i, e) {
|
|
// Lets create the chapter object and place him self
|
|
_chapters.push(new Chapter(i, $(e), base_a));
|
|
|
|
});
|
|
};
|
|
|
|
function launchNav(){
|
|
|
|
_$container
|
|
// DESKTOP EVENTS
|
|
.bind('mousedown', function(e){
|
|
if(_dragging) return false;
|
|
_dragging = true;
|
|
|
|
console.log('mousedown');
|
|
_last_client.x=e.clientX;
|
|
_last_client.y=e.clientY;
|
|
|
|
_$chapitres.each(function(i, e) {
|
|
$(e).css({"transitionDuration":randB(0.1, 0.3)+"s"});
|
|
});
|
|
|
|
_nav_timer = setInterval(moveNav, _fps);
|
|
|
|
$(this).bind('mousemove', function(e){
|
|
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){
|
|
console.log('mouseup');
|
|
_dragging = false;
|
|
// clearInterval(_nav_timer);
|
|
$(this).unbind('mousemove');
|
|
})
|
|
//
|
|
// TOUCH EVENTS - - - - - - - - - - - - - -
|
|
//
|
|
.bind('touchstart', function(e){
|
|
if(_dragging) return false;
|
|
_dragging = true;
|
|
console.log('touchstart');
|
|
|
|
_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, _fps);
|
|
})
|
|
.bind('touchmove', function(e){
|
|
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");
|
|
_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);
|
|
|
|
// $('.links a', _$chapitres).on('click', openChapter);
|
|
};
|
|
|
|
function moveNav(){
|
|
// console.log("moveNav");
|
|
// 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]
|
|
});
|
|
};
|
|
|
|
/*
|
|
* Chapter
|
|
*
|
|
*/
|
|
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 = {
|
|
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);
|
|
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.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.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"});
|
|
this.animeLines();
|
|
};
|
|
|
|
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.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.init();
|
|
|
|
};//Chapter
|
|
|
|
|
|
/* HELPERS */
|
|
function randB(min, max){
|
|
return Math.random() * (max - min) + min;
|
|
}
|
|
|
|
|
|
|
|
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');
|
|
// });
|
|
// }
|
|
// });
|
|
// };
|
|
|
|
|
|
|