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

nav code is now fully fonctional

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2015-03-08 18:46:39 +01:00
parent 526fbaf57d
commit 10b99958e2
3 changed files with 499 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/gui/jee/js/jee.js
+280 -90
View File
@@ -1,12 +1,25 @@
//
// by Bachir Soussi Chiadmi
// 2015
//
/*
_ _
|_|___ _ _ ___ ___ ___ ___| |_ ___ ___ ___ ___ ___ ___ ___
| | -_| | | | -_|_ -| | -_| _| | -_| | . | .'| . | -_|_ -|
_| |___|___|_|_|___|___| |___|_| |___|_|_|_ |__,|_ |___|___|
|___| |___| |___|
Bachir Soussi Chiadmi
2015
*/
jQuery(document).ready(function($) {
console.log('Hello Jee');
var _$header = $("#header"),
var _debug = true,
_avgDelay = 1,
_lastDraw = new Date,
_fps,
_$nav_cursor;
var _$body = $('body'),
_$header = $("#header"),
_$chapitres = $('.node-chapitre', '#main'),
_chapitres_len = _$chapitres.length,
_chapters = [],
@@ -17,14 +30,52 @@ jQuery(document).ready(function($) {
},
_center = {x:_container.w/2,y:_container.h/2},
_nav_pos = {x:0, y:0},
_nav_timer,
_last_client = {x:0,y:0},
_prev_mouse_pos = {x:0,y:0},
_fps = 1000/12,
_dragging = false;
_dragging = false, _timeout_dragging;
function init(){
if(_debug)
initDebug();
initChapters();
launchNav();
var $fullscreenBtn = $('<div>enter</div>').attr('id','fullscreen-btn').appendTo("#root");
// Launch fullscreen for browsers that support it!
$fullscreenBtn.on('click', function(e){
// launchIntoFullscreen(document.documentElement); // the whole page
launchIntoFullscreen(document.getElementById("root")); // any individual element
});
};
function initDebug(){
$('<p>').attr('id', 'fps').appendTo(_$body);
_fps = document.getElementById('fps');
requestAnimationFrame(displayFps);
_$nav_cursor = $('<div id="nav-cursor"></div>').appendTo('body');
moveDebugCursor();
};
function displayFps(){
requestAnimationFrame(displayFps);
var now = new Date;
var delay = now - _lastDraw;
_avgDelay += (delay - _avgDelay) / 10;
_lastDraw = now;
_fps.innerHTML = (1000/_avgDelay).toFixed(1) + " fps";
};
function moveDebugCursor(){
_$nav_cursor.css({
left:_nav_pos.x+_center.x+"px",
top:_nav_pos.y+_center.y+"px"
});
};
function initChapters(){
@@ -32,129 +83,147 @@ jQuery(document).ready(function($) {
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));
_chapters.push(new Chapter(i, e, base_a));
});
};
function launchNav(){
_$container
$(document)
// 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);
clearTimeout(_timeout_dragging);
// set initial cursor pos
updateNavPos(e.clientX, e.clientY, true);
$(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();
updateNavPos(e.clientX, e.clientY, false);
});
// activate dragging if already activated
if(!_dragging){
_dragging = true;
window.requestAnimationFrame(moveNav);
}
})
.bind('mouseup', function(e){
console.log('mouseup');
_dragging = false;
// clearInterval(_nav_timer);
stopMoveNav();
$(this).unbind('mousemove');
})
//
// TOUCH EVENTS - - - - - - - - - - - - - -
//
.bind('touchstart', function(e){
if(_dragging) return false;
_dragging = true;
console.log('touchstart');
clearTimeout(_timeout_dragging);
// set initial pos
updateNavPos(e.originalEvent.touches[0].clientX, e.originalEvent.touches[0].clientY, true);
_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);
// activate dragging if already activated
if(!_dragging){
_dragging = true;
window.requestAnimationFrame(moveNav);
}
})
.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();
updateNavPos(e.originalEvent.touches[0].clientX, e.originalEvent.touches[0].clientY, false);
})
.bind('touchend', function(e){
console.log("touchend");
_dragging = false;
// clearInterval(_nav_timer);
stopMoveNav();
});
};
// click to preview chapter
// $('h2.node-title, .field-name-field-partie:first>.field-name-field-vignette', _$chapitres).bind('click', previewChapter);
function updateNavPos(x,y,init){
if(!init){
_nav_pos.x += x - _prev_mouse_pos.x;
_nav_pos.y += y - _prev_mouse_pos.y;
// constrain nav pos on container
_nav_pos.x = _nav_pos.x < -_center.x
? -_center.x
: _nav_pos.x > _center.x
? _center.x
: _nav_pos.x;
_nav_pos.y = _nav_pos.y < -_center.y
? -_center.y
: _nav_pos.y > _center.y
? _center.y
: _nav_pos.y;
}
_prev_mouse_pos.x = x;
_prev_mouse_pos.y = y;
// $('.links a', _$chapitres).on('click', openChapter);
// debuging cursor
if(_debug)
moveDebugCursor();
};
function moveNav(){
// console.log("moveNav");
if(!_dragging) return;
window.requestAnimationFrame(moveNav);
// move chapters
for (var i = _chapitres_len - 1; i >= 0; i--) {
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]
_$header.css({
transform:"translate3d("+(_nav_pos.x)*0.2+"px, "+(_nav_pos.y)*0.2+"px,0)"
});
};
/*
* Chapter
*
*/
function Chapter(i, $e, base_a){
function stopMoveNav(){
console.log('stopMoveNav');
clearTimeout(_timeout_dragging);
_timeout_dragging = setTimeout(function(){
console.log("dragging stoped");
_dragging = false;
},3000);
};
$e.obj = this;
/*
________ __
/ ____/ /_ ____ _____ / /____ _____
/ / / __ \/ __ `/ __ \/ __/ _ \/ ___/
/ /___/ / / / /_/ / /_/ / /_/ __/ /
\____/_/ /_/\__,_/ .___/\__/\___/_/
/_/
*/
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.e = e;
this.$e = $(e);
this.nid = this.$e.attr("id").match(/^node-(\d+)/)[1];
this.$backdom = $('<div>').attr('id', 'backdom-'+this.nid).addClass('backdom').appendTo(_$body);
this.geom = {
base_a:base_a,
a:0,
r:0
}
this.pos = {x:0,y:0};
this.translation = {x:0, y:0};
this.trans = {x:0, y:0};
this.ease = randB(0.05, 0.3);
//parties
this.$parties = $('.field-name-field-partie', $e);
this.$parties = $('.field-name-field-partie', e);
this.lines = new Array();
this.linesAnimeInterval = null;
this.linesAnimeCounter = 0;
this.linesAnimeTime = 5; // sec
this.linesAnimeTime = 2; // 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();
@@ -172,10 +241,10 @@ jQuery(document).ready(function($) {
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;
this.geom.r = (_center.x / this.geom.abs_c)*0.5;
}else {
// Top or bottom side
this.geom.r = ((_container.h/2) / this.geom.abs_s)*0.5;
this.geom.r = (_center.y / this.geom.abs_s)*0.5;
}
// change randomly radius
@@ -212,44 +281,56 @@ jQuery(document).ready(function($) {
};
Chapter.prototype.move = function(){
this.$e.css({ //.stop(true, false)
translate:[_nav_pos.x, _nav_pos.y]
this.trans.x += (_nav_pos.x - this.trans.x)*this.ease;
this.trans.y += (_nav_pos.y - this.trans.y)*this.ease;
this.$e.css({
transform:'translate3d('+this.trans.x+'px,'+this.trans.y+'px,0)'
});
// $(e).transition({translate:[_nav_pos.x, _nav_pos.y]}, 200, 'out');
};
Chapter.prototype.preview = function(e){
console.log('preview', this.i);
// close other chapters
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) {
// define randomly position of parties
var px, py, tXt = new Array(), tYt = new Array();
for (var i = 0; i < 3; i++) {
switch(i){
case 0:
px=randB(-40, 40); py=randB(40, 60);
px=randB(-30, 30); py=randB(40, 60);
break;
case 1:
px=randB(100, 200); py=randB(120,220);
px=randB(180, 280); py=randB(200,300);
break;
case 2:
px=randB(-200, -100); py=randB(250,320);
px=randB(-280, -180); py=randB(380,480);
break;
}
tXt.push(px);
tYt.push(py);
};
console.log("tXt", tXt);
console.log("tYt", tYt);
tXt = shuffleArray(tXt);
tYt = shuffleArray(tYt);
// apply new position to parties
this.$parties.each(function(i, e) {
setTimeout(
(function(e, px, py){
(function(i, e, tXt, tYt){
return function(){
$(e)
.css({
translate:[px, py],
// opacity:1
translate:[tXt[i], tYt[i]],
});
}
}(e, px, py)),
}(i, e, tXt, tYt)),
10);
}); // each $parties
@@ -273,7 +354,6 @@ jQuery(document).ready(function($) {
};
};
Chapter.prototype.animeLines = function(){
this.linesAnimeCounter = 0;
this.linesAnimeInterval = setInterval(
@@ -312,7 +392,7 @@ jQuery(document).ready(function($) {
};
console.log("anime line interval");
// limit the naimation time
_this.linesAnimeCounter ++;
if(_this.linesAnimeCounter > (1000/_fps)*_this.linesAnimeTime)
@@ -320,7 +400,6 @@ jQuery(document).ready(function($) {
};
}(this)),
_fps);
};
Chapter.prototype.loadNode = function(e){
@@ -340,22 +419,133 @@ jQuery(document).ready(function($) {
}
this.init();
};//Chapter
/* HELPERS */
/*
__ __________ ____ __________ _____
/ / / / ____/ / / __ \/ ____/ __ \/ ___/
/ /_/ / __/ / / / /_/ / __/ / /_/ /\__ \
/ __ / /___/ /___/ ____/ /___/ _, _/___/ /
/_/ /_/_____/_____/_/ /_____/_/ |_|/____/
*/
function randB(min, max){
return Math.random() * (max - min) + min;
}
};
//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/array/shuffle [v1.0]
function shuffleArray(o){ //v1.0
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
init();
});
/*
____ __________ __ ___________________ ___ _ ________ ______ ______________ _ __ __________ ___ __ _________
/ __ \/ ____/ __ \/ / / / ____/ ___/_ __/ / | / | / / _/ |/ / |/_ __/ _/ __ \/ | / / / ____/ __ \/ | / |/ / ____/
/ /_/ / __/ / / / / / / / __/ \__ \ / / / /| | / |/ // // /|_/ / /| | / / / // / / / |/ / / /_ / /_/ / /| | / /|_/ / __/
/ _, _/ /___/ /_/ / /_/ / /___ ___/ // / / ___ |/ /| // // / / / ___ |/ / _/ // /_/ / /| / / __/ / _, _/ ___ |/ / / / /___
/_/ |_/_____/\___\_\____/_____//____//_/ /_/ |_/_/ |_/___/_/ /_/_/ |_/_/ /___/\____/_/ |_/ /_/ /_/ |_/_/ |_/_/ /_/_____/
*/
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
/* ____ ____
/ __/_ __/ / / __________________ ___ ____
/ /_/ / / / / / / ___/ ___/ ___/ _ \/ _ \/ __ \
/ __/ /_/ / / / (__ ) /__/ / / __/ __/ / / /
/_/ \__,_/_/_/ /____/\___/_/ \___/\___/_/ /_/
*/
// http://davidwalsh.name/fullscreen
// http://www.sitepoint.com/html5-full-screen-api/
// Find the right method, call on correct element
function launchIntoFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// remove navbar
// $(document).ready(function() {
// if (navigator.userAgent.match(/Android/i)) {
// window.scrollTo(0,0); // reset in case prev not scrolled
// var nPageH = $(document).height();
// var nViewH = window.outerHeight;
// if (nViewH > nPageH) {
// nViewH -= 250;
// $('BODY').css('height',nViewH + 'px');
// }
// window.scrollTo(0,1);
// }
// });
// OR
// function hideAddressBar(){
// if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
// document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
// setTimeout(window.scrollTo(1,1),0);
// }
// window.addEventListener("load",function(){hideAddressBar();});
// window.addEventListener("orientationchange",function(){hideAddressBar();});
// OR
// function hideAddressBar() {
// if(!window.location.hash) {
// if(document.height < window.outerHeight)
// document.body.style.height = (window.outerHeight + 50) + 'px';
// setTimeout( function(){
// window.scrollTo(0, 1);
// document.body.style.height = 'auto';
// }, 50 );
// }
// }
// window.addEventListener("load",function(){hideAddressBar();});
// window.addEventListener("orientationchange",function(){hideAddressBar();});
// Drupal.behaviors.init_theme = function (context) {