289 lines
7.7 KiB
JavaScript
Executable File
289 lines
7.7 KiB
JavaScript
Executable File
|
|
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');
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
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;
|
|
|
|
function init(){
|
|
initChapters();
|
|
launchNav();
|
|
};
|
|
|
|
function initChapters(){
|
|
// Place each chapters on the ellipse contained on the screen
|
|
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;
|
|
|
|
// Lets create the chapter object and place him self
|
|
_chapters.push(new Chapter($(e), angle));
|
|
|
|
});
|
|
};
|
|
|
|
function launchNav(){
|
|
var last_clientX,
|
|
last_clientY,
|
|
td;
|
|
|
|
$(document)
|
|
// DESKTOP EVENTS
|
|
.bind('mousedown', function(e){
|
|
last_clientX = e.clientX;
|
|
last_clientY = 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"});
|
|
});
|
|
|
|
_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;
|
|
last_clientX = e.clientX;
|
|
last_clientY = e.clientY;
|
|
});
|
|
})
|
|
.bind('mouseup', function(e){
|
|
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;
|
|
|
|
_$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);
|
|
})
|
|
.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;
|
|
})
|
|
.bind('touchend', function(e){
|
|
// console.log("touchend", e);
|
|
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");
|
|
_$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');
|
|
});
|
|
_$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){
|
|
|
|
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){
|
|
return Math.random() * (max - min) + min;
|
|
}
|
|
|
|
|
|
|
|
init();
|
|
}); |