')
+ .on("click", closeChapterWrapper)
+ .appendTo(_$chapter_wrapper);
+ };
+
+ function closeChapterWrapper(e){
+ _loaded_chapter = false;
+ _$chapter_wrapper.removeClass('visible');
+ _$body.removeClass('chapter-displayed');
+ };
+
function initChapters(){
// Place each chapters on the ellipse contained on the screen
var base_a = Math.random() *360;
@@ -165,6 +178,10 @@ jQuery(document).ready(function($) {
.bind('document touchstart', function(e){
console.log('touchstart');
clearTimeout(_timeout_dragging);
+
+ if(_loaded_chapter)
+ return false;
+
// set initial pos
updateNavPos(e.originalEvent.touches[0].clientX, e.originalEvent.touches[0].clientY, true);
@@ -176,12 +193,22 @@ jQuery(document).ready(function($) {
})
.bind('touchmove', function(e){
console.log('document touchmove');
+
+ if(_loaded_chapter)
+ return false;
+
updateNavPos(e.originalEvent.touches[0].clientX, e.originalEvent.touches[0].clientY, false);
})
.bind('touchend', function(e){
console.log("document touchend");
+
+ if(_loaded_chapter)
+ return false;
+
stopMoveNav();
});
+
+ // TODO : nav on scroll events
};
function updateNavPos(x,y,init){
@@ -299,6 +326,15 @@ jQuery(document).ready(function($) {
this.trans = {x:0, y:0,z:0};
this.ease = randB(0.05, 0.3);
+ //drifting
+ this.$title = $('h2.node-title', this.$e);
+ this.$content = $('.content:first', this.$e);
+ this.title_x = 0;
+ this.content_x = 0;
+ this.drifting_direction = Math.random()-0.5 > 0 ? 1 : -1;
+ this.drifting_time = null;
+
+
//preview
this.is_previewed = false;
@@ -315,9 +351,12 @@ jQuery(document).ready(function($) {
// chapter
this.$n = false;
this.$blocks = false;
+ this.$vids_container = false;
this.$vids = false;
this.texts_pos = shuffleArray([1,2,3]);
this.dimvideo = {w:0, h:0};
+ this.$slider = null;
+ this.cur_vid_playing = 0;
// prototypes
if (typeof Chapter.initialized == "undefined") {
@@ -326,6 +365,7 @@ jQuery(document).ready(function($) {
this.setInitPos();
this.drawLines();
this.setEvents();
+ this.initDrifiting();
};
Chapter.prototype.setInitPos = function(){
@@ -348,9 +388,9 @@ jQuery(document).ready(function($) {
// change randomly radius
if(this.i%2){
- this.geom.r = randB(this.geom.r*2, this.geom.r*3);
+ this.geom.r = randB(this.geom.r*1.5, this.geom.r*2);
}else{
- this.geom.r = randB(this.geom.r, this.geom.r*2);
+ this.geom.r = randB(this.geom.r*0.8, this.geom.r*1.5);
}
this.pos.x = Math.round(_center.x+this.geom.r * this.geom.c) - this.geom.w/2;
@@ -384,6 +424,40 @@ jQuery(document).ready(function($) {
});
};
+ Chapter.prototype.initDrifiting = function(){
+ // an other option could be to drift the whole page with the same engine than draging
+ requestAnimationFrame(this.drift.bind(this));
+ };
+
+ Chapter.prototype.drift = function(timestamp){
+ requestAnimationFrame(this.drift.bind(this));
+
+ var now = new Date().getTime(),
+ dt = now - (this.drifting_time || now);
+
+ this.drifting_time = now;
+
+ if(!this.is_previewed){
+
+ this.title_x += (10/1000)*dt*this.drifting_direction;
+ this.content_x += (6/1000)*dt*this.drifting_direction;
+
+ this.drifting_direction =
+ this.content_x > randB(100,130)
+ ? -1
+ : this.content_x < -randB(100,130)
+ ? 1
+ : this.drifting_direction;
+
+ this.$title.css({
+ transform:"translate3d("+this.title_x+"px,0,0)",
+ });
+ this.$content.css({
+ transform:"translate3d("+this.content_x+"px,0,0)",
+ });
+ }
+ };
+
Chapter.prototype.move = function(){
this.trans.x += (_nav_pos.x - this.trans.x)*this.ease;
this.trans.y += (_nav_pos.y - this.trans.y)*this.ease;
@@ -545,6 +619,12 @@ jQuery(document).ready(function($) {
};
};
+
+ // _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____
+ // | | _ | __| | | | | | | _ | _ |_ _| __| __ |
+ // | | | __| __| | | | | --| | | __| | | | __| -|
+ // |_____|__| |_____|_|___| |_____|__|__|__|__|__| |_| |_____|__|__|
+
Chapter.prototype.loadNode = function(e){
// console.log("Chapter :: open : nid", this.nid);
$.getJSON(
@@ -558,14 +638,17 @@ jQuery(document).ready(function($) {
Chapter.prototype.nodeLoaded = function(json, textstatus){
console.log('Chapter :: nodeLoaded '+this.nid+' : json', json);
+ // remove previous loaded nodes
+ _$chapter_wrapper.find('.node').remove();
+
// insert ajax loaded into dom
- _$chapter_wrapper.html(json.node);
+ _$chapter_wrapper.append(json.node);
// record some usefull data
this.$n = $('.node-chapitre', _$chapter_wrapper);
this.$blocks = $('.field-type-text-long', this.$n);
- this.$vids = $('.field-name-field-partie', this.$n);
-
+ this.$vids_container = $('.field-name-field-partie', this.$n);
+ this.$vids = $('iframe', this.$vids_container);
// record the current loaded chapter
// this will stop first interface to run
_loaded_chapter = this;
@@ -590,10 +673,10 @@ jQuery(document).ready(function($) {
// build video player
this.buildVideos();
- $('.node-title', this.$n).pep();
-
// show the whole thing
_$chapter_wrapper.addClass('visible');
+
+ // this.$vids.eq(this.cur_vid_playing).vimeo('play');
};
Chapter.prototype.placeText = function(i, e){
@@ -629,22 +712,24 @@ jQuery(document).ready(function($) {
Chapter.prototype.buildVideos = function(){
console.log('Chapter :: buildVideos');
- this.dimvideo.h = this.$vids.height();
+ this.dimvideo.h = this.$vids_container.height();
// redim each iframe to fit
// add a mask on top of each iframe to avoid bad interaction with vimeo
- $('iframe', this.$vids)
- .each(this.redimVideo.bind(this))
- .after('
');
+ this.$vids
+ .after('
')
+ .each(this.redimVideo.bind(this));
- this.$vids.css({
- width:this.dimvideo.w*1.3,
+ this.$vids_container.css({
+ width:this.dimvideo.w*1.2,
height:this.dimvideo.h,
- marginLeft:(_container.w-this.dimvideo.w*1.3)/2
+ marginLeft:(_container.w-this.dimvideo.w*1.2)/2
});
// create the slider with peppermint
- $('.field-items', this.$vids).Peppermint();
+ this.$slider = $('.field-items', this.$vids_container).Peppermint({
+ onSlideChange:this.onSlideChange.bind(this)
+ });
};
Chapter.prototype.redimVideo = function(i,e){
@@ -655,10 +740,45 @@ jQuery(document).ready(function($) {
.css({ width:this.dimvideo.w, height:this.dimvideo.h })
.attr({ width:this.dimvideo.w, height:this.dimvideo.h })
// add some paading to parent for slider display
- .parent().css({
+ .parent()
+ .css({
paddingLeft:this.dimvideo.w*0.15,
paddingright:this.dimvideo.w*0.15
- });
+ })
+ .on("click", this.onClickVid.bind(this));
+ };
+
+ Chapter.prototype.onClickVid = function(e){
+ e.stopPropagation();
+ e.preventDefault();
+ console.log('Chapter :: onClickVid '+this.nid, e);
+
+ var $vid = $('iframe', e.currentTarget);
+
+ $vid.vimeo('paused', function(data){
+
+ console.log('paused : ', data);
+
+ if(data){
+ $vid.vimeo('play');
+ }else{
+ $vid.vimeo('pause');
+ }
+ });
+
+
+ return false;
+ };
+
+ Chapter.prototype.onSlideChange = function(){
+ console.log('onSlideChange '+this.nid, this.$slider.data('Peppermint').getCurrentPos());
+
+ //stop current video playing
+ this.$vids.eq(this.cur_vid_playing).vimeo('pause');
+
+ // start new current video
+ this.cur_vid_playing = this.$slider.data('Peppermint').getCurrentPos();
+ this.$vids.eq(this.cur_vid_playing).vimeo('play');
};
Node.initialized = true;
@@ -708,6 +828,65 @@ jQuery(document).ready(function($) {
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();
+ }
+}
+
+
/*
____ __ __ _____________ _______
/ __ \/ / / / / / ____/ _/ | / / ___/
@@ -758,64 +937,9 @@ jQuery(document).ready(function($) {
// }
// })(jQuery);
-/*
- ____ __________ __ ___________________ ___ _ ________ ______ ______________ _ __ __________ ___ __ _________
- / __ \/ ____/ __ \/ / / / ____/ ___/_ __/ / | / | / / _/ |/ / |/_ __/ _/ __ \/ | / / / ____/ __ \/ | / |/ / ____/
- / /_/ / __/ / / / / / / / __/ \__ \ / / / /| | / |/ // // /|_/ / /| | / / / // / / / |/ / / /_ / /_/ / /| | / /|_/ / __/
- / _, _/ /___/ /_/ / /_/ / /___ ___/ // / / ___ |/ /| // // / / / ___ |/ / _/ // /_/ / /| / / __/ / _, _/ ___ |/ / / / /___
-/_/ |_/_____/\___\_\____/_____//____//_/ /_/ |_/_/ |_/___/_/ /_/_/ |_/_/ /___/\____/_/ |_/ /_/ /_/ |_/_/ |_/_/ /_/_____/
-
-*/
-(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