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

main interface ok

Browse Source 
added grunt-svg2png and set svg 2 png fall back mixin
added bubbles and stars
added nav_pos move on chapter preview
This commit is contained in:
Bachir Soussi Chiadmi
2015-03-09 18:04:42 +01:00
parent 76c7154f4e
commit d5edfa75c8
810 changed files with 87625 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/gui/jee/js/jee.js
+142 -24
View File
@@ -30,10 +30,15 @@ jQuery(document).ready(function($) {
},
_center = {x:_container.w/2,y:_container.h/2},
_nav_pos = {x:0, y:0},
_mouse_down_pos = {x:0,y:0},
_prev_mouse_pos = {x:0,y:0},
_fps = 1000/12,
_dragging = false, _timeout_dragging;
var _bubbles = new Array(),
_stars = new Array();
function init(){
if(_debug)
initDebug();
@@ -47,6 +52,22 @@ jQuery(document).ready(function($) {
// launchIntoFullscreen(document.documentElement); // the whole page
launchIntoFullscreen(document.getElementById("root")); // any individual element
});
for (var i = 2; i > 0; i--) {
_bubbles.push($('<div>').addClass('bubble bubble-'+i).prependTo(_$container));
};
for (var i = 20; i > 0; i--) {
_stars.push(
$('<div>')
.addClass('star star-'+i)
.css({
left:randB(-400, _container.w+400),
top:randB(-400, _container.h+400)
})
.prependTo(_$container)
);
};
};
function initDebug(){
@@ -88,11 +109,18 @@ jQuery(document).ready(function($) {
function launchNav(){
$(document)
// DESKTOP EVENTS
/*
____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____
| \| __| __| | |_ _| | _ | | __| | | __| | |_ _| __|
| | | __|__ | -| | | | | | __| | __| | | __| | | | | | |__ |
|____/|_____|_____|__|__| |_| |_____|__| |_____|\___/|_____|_|___| |_| |_____|
*/
.bind('mousedown', function(e){
console.log('mousedown');
clearTimeout(_timeout_dragging);
// set initial cursor pos
_mouse_down_pos.x = e.clientX;
_mouse_down_pos.y = e.clientY;
updateNavPos(e.clientX, e.clientY, true);
$(this).bind('mousemove', function(e){
@@ -103,17 +131,25 @@ jQuery(document).ready(function($) {
// activate dragging if already activated
if(!_dragging){
_dragging = true;
window.requestAnimationFrame(moveNav);
startMoveNav();
}
})
.bind('mouseup', function(e){
console.log('mouseup');
stopMoveNav();
$(this).unbind('mousemove');
// close all preview
if(Math.abs(e.clientX - _mouse_down_pos.x) < 2
&& Math.abs(e.clientY - _mouse_down_pos.y) < 2)
for (var i = _chapitres_len - 1; i >= 0; i--)
_chapters[i].closePreview().unMitigate();
})
//
// TOUCH EVENTS - - - - - - - - - - - - - -
//
/*
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____
|_ _| | | | | | | | __| | | __| | |_ _| __|
| | | | | | | --| | | __| | | __| | | | | | |__ |
|_| |_____|_____|_____|__|__| |_____|\___/|_____|_|___| |_| |_____|
*/
.bind('touchstart', function(e){
console.log('touchstart');
clearTimeout(_timeout_dragging);
@@ -123,7 +159,7 @@ jQuery(document).ready(function($) {
// activate dragging if already activated
if(!_dragging){
_dragging = true;
window.requestAnimationFrame(moveNav);
startMoveNav();
}
})
.bind('touchmove', function(e){
@@ -141,15 +177,15 @@ jQuery(document).ready(function($) {
_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.x < -_center.x*2
? -_center.x*2
: _nav_pos.x > _center.x*2
? _center.x*2
: _nav_pos.x;
_nav_pos.y = _nav_pos.y < -_center.y
? -_center.y
: _nav_pos.y > _center.y
? _center.y
_nav_pos.y = _nav_pos.y < -_center.y*2
? -_center.y*2
: _nav_pos.y > _center.y*2
? _center.y*2
: _nav_pos.y;
}
_prev_mouse_pos.x = x;
@@ -160,6 +196,10 @@ jQuery(document).ready(function($) {
moveDebugCursor();
};
function startMoveNav(){
window.requestAnimationFrame(moveNav);
};
function moveNav(){
// console.log("moveNav");
if(!_dragging) return;
@@ -174,6 +214,23 @@ jQuery(document).ready(function($) {
_$header.css({
transform:"translate3d("+(_nav_pos.x)*0.2+"px, "+(_nav_pos.y)*0.2+"px,0)"
});
// bubbles and stars dont move so smoothly on tablette ...
// should keep it only on desktop
// move bubbles
// for (var i = _bubbles.length - 1; i >= 0; i--) {
// _bubbles[i].css({
// transform:"translate3d("+(_nav_pos.x)*0.4+"px, "+(_nav_pos.y)*0.4+"px,0)"
// });
// };
// move stars
// for (var i = _stars.length - 1; i >= 0; i--) {
// _stars[i].css({
// transform:"translate3d("+(_nav_pos.x)*-0.3+"px, "+(_nav_pos.y)*-0.3+"px,0)"
// });
// };
};
function stopMoveNav(){
@@ -185,6 +242,20 @@ jQuery(document).ready(function($) {
},3000);
};
function moveToChapter(chapter){
// fake a mousdown by providing first pos as current pos
_prev_mouse_pos.x = _nav_pos.x;
_prev_mouse_pos.y = _nav_pos.y;
// calculate the second pos of faked mousemove
var xl = _center.x - chapter.pos.x - chapter.geom.w/2;
var yl = 100 - chapter.pos.y;
updateNavPos(xl, yl, false);
startMoveNav();
stopMoveNav();
};
/*
________ __
/ ____/ /_ ____ _____ / /____ _____
@@ -200,19 +271,23 @@ jQuery(document).ready(function($) {
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
r:0,
w:this.$e.outerWidth(true),
h:this.$e.outerHeight(true)
}
this.pos = {x:0,y:0};
this.trans = {x:0, y:0};
this.trans = {x:0, y:0,z:0};
this.ease = randB(0.05, 0.3);
//preview
this.is_previewed = false;
//mitigate
this.is_mitigated = false;
//parties
this.$parties = $('.field-name-field-partie', e);
this.parts_pos = {xs:new Array(), ys:new Array()};
@@ -248,10 +323,14 @@ jQuery(document).ready(function($) {
}
// change randomly radius
this.geom.r = randB(this.geom.r, this.geom.r*2);
if(this.i%2){
this.geom.r = randB(this.geom.r*2, this.geom.r*3);
}else{
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;
this.pos.x = Math.round(_center.x+this.geom.r * this.geom.c) - this.geom.w/2;
this.pos.y = Math.round(_center.y+this.geom.r * -this.geom.s) - this.geom.h/2;
console.log('this', this);
this.$e.css({
@@ -265,6 +344,7 @@ jQuery(document).ready(function($) {
// click to preview chapter
$('h2.node-title, .field-name-field-partie:first>.field-name-field-vignette', this.$e)
.on('click', this, function(e){
// e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
e.data.preview(e);
@@ -284,25 +364,48 @@ jQuery(document).ready(function($) {
this.trans.x += (_nav_pos.x - this.trans.x)*this.ease;
this.trans.y += (_nav_pos.y - this.trans.y)*this.ease;
// this.trans.z = Math.floor(Math.sqrt(
// Math.pow(
// _center.x-(this.pos.x+this.trans.x)
// ,2
// )
// +
// Math.pow(
// _center.y-(this.pos.y+this.trans.y)
// ,2
// )
// ));
if(this.i === 0)
console.log(this.i+" this.trans.z", this.trans.z);
this.$e.css({
transform:'translate3d('+this.trans.x+'px,'+this.trans.y+'px,0)'
// scale:this.trans.z
});
};
Chapter.prototype.preview = function(e){
Chapter.prototype.preview = function(){
// don't relaunch preview more that one time
if(this.is_previewed) return;
console.log('preview', this.i);
this.unMitigate();
this.is_previewed = true;
// close other chapters
for (var i = _chapitres_len - 1; i >= 0; i--) {
for (var i = _chapitres_len - 1; i >= 0; i--)
if(i !== this.i)
_chapters[i].closePreview();
};
_chapters[i].closePreview().mitigate();
this.displayPreview();
moveToChapter(this);
};
Chapter.prototype.displayPreview = function(e){
// define randomly position of parties
this.resetPartsPos();
@@ -343,11 +446,26 @@ jQuery(document).ready(function($) {
};
Chapter.prototype.closePreview = function(){
if(!this.is_previewed) return this;
this.$e.removeClass('previewed')
.find('.field-name-field-partie')
.css({transform:"none"});
requestAnimationFrame(this.animeLines.bind(this));
this.is_previewed = false;
return this;
};
Chapter.prototype.mitigate = function(){
if(this.is_mitigated) return this;
this.$e.addClass('mitigated');
return this;
};
Chapter.prototype.unMitigate = function(){
if(this.is_mitigated) return this;
this.$e.removeClass('mitigated');
return this;
};
Chapter.prototype.drawLines = function(){