/* _ _ |_|___ _ _ ___ ___ ___ ___| |_ ___ ___ ___ ___ ___ ___ ___ | | -_| | | | -_|_ -| | -_| _| | -_| | . | .'| . | -_|_ -| _| |___|___|_|_|___|___| |___|_| |___|_|_|_ |__,|_ |___|___| |___| |___| |___| Bachir Soussi Chiadmi 2015 */ jQuery(document).ready(function($) { console.log('Hello Jee'); 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 = [], _$container = $('#main'), _container = { w:_$container.width(), h:_$container.height() }, _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 _$chapter_wrapper = $('
').attr('id', 'fps').appendTo(_$container); _fps = document.getElementById('fps'); requestAnimationFrame(displayFps); _$nav_cursor = $('
').appendTo(_$container); 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(){ // 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(){ $(document) /* ____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ | \| __| __| | |_ _| | _ | | __| | | __| | |_ _| __| | | | __|__ | -| | | | | | __| | __| | | __| | | | | | |__ | |____/|_____|_____|__|__| |_| |_____|__| |_____|\___/|_____|_|___| |_| |_____| */ .bind('mousedown', function(e){ console.log('document mousedown'); clearTimeout(_timeout_dragging); if(_loaded_chapter) return false; // 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){ console.log('document mousemove'); updateNavPos(e.clientX, e.clientY, false); }); // activate dragging if already activated if(!_dragging){ _dragging = true; startMoveNav(); } }) .bind('mouseup', function(e){ console.log('document mouseup'); if(_loaded_chapter) return false; 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(); }) /* _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ |_ _| | | | | | | | __| | | __| | |_ _| __| | | | | | | | --| | | __| | | __| | | | | | |__ | |_| |_____|_____|_____|__|__| |_____|\___/|_____|_|___| |_| |_____| */ .bind('document touchstart', function(e){ console.log('touchstart'); clearTimeout(_timeout_dragging); // set initial pos updateNavPos(e.originalEvent.touches[0].clientX, e.originalEvent.touches[0].clientY, true); // activate dragging if already activated if(!_dragging){ _dragging = true; startMoveNav(); } }) .bind('touchmove', function(e){ console.log('document touchmove'); updateNavPos(e.originalEvent.touches[0].clientX, e.originalEvent.touches[0].clientY, false); }) .bind('touchend', function(e){ console.log("document touchend"); stopMoveNav(); }); }; 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*2 ? -_center.x*2 : _nav_pos.x > _center.x*2 ? _center.x*2 : _nav_pos.x; _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; _prev_mouse_pos.y = y; // debuging cursor if(_debug) moveDebugCursor(); }; function startMoveNav(){ window.requestAnimationFrame(moveNav); }; function moveNav(){ // console.log("moveNav"); if(!_dragging) return; window.requestAnimationFrame(moveNav); // move chapters for (var i = _chapitres_len - 1; i >= 0; i--) _chapters[i].move(); // move header _$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(){ console.log('stopMoveNav'); clearTimeout(_timeout_dragging); _timeout_dragging = setTimeout(function(){ console.log("dragging stoped"); _dragging = false; },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(); }; function onFullScreen(e){ launchIntoFullscreen(document.getElementById("root")); if(_loaded_chapter) setTimeout(_loaded_chapter.buildVideos(), 100); }; /* ________ __ / ____/ /_ ____ _____ / /____ _____ / / / __ \/ __ `/ __ \/ __/ _ \/ ___/ / /___/ / / / /_/ / /_/ / /_/ __/ / \____/_/ /_/\__,_/ .___/\__/\___/_/ /_/ */ function Chapter(i, e, base_a){ // $e.obj = this; this.i = i; this.e = e; this.$e = $(e); this.nid = this.$e.attr("id").match(/^node-(\d+)/)[1]; this.geom = { base_a:base_a, a: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,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()}; this.lines = new Array(); this.linesAnimeStartTime = 0, this.linesAnimeDuration = 2000; // milli sec // chapter this.$n = false; this.$blocks = false; this.$vids = false; this.texts_pos = shuffleArray([1,2,3]); this.dimvideo = {w:0, h:0}; // prototypes if (typeof Chapter.initialized == "undefined") { Chapter.prototype.init = function(){ 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 = (_center.x / this.geom.abs_c)*0.5; }else { // Top or bottom side this.geom.r = (_center.y / this.geom.abs_s)*0.5; } // change randomly radius 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.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({ 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.stopImmediatePropagation(); 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.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(){ // 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--) if(i !== this.i) _chapters[i].closePreview().mitigate(); this.displayPreview(); moveToChapter(this); }; Chapter.prototype.displayPreview = function(e){ // define randomly position of parties this.resetPartsPos(); // apply new position to parties var that = this; this.$parties.each(function(i, e) { setTimeout( (function(i, e, xs, ys){ return function(){ $(e) .css({ transform:"translate3d("+xs[i]+"px,"+ys[i]+"px,0)", }); } }(i, e, that.parts_pos.xs, that.parts_pos.ys)), 10); }); // each $parties this.$e.addClass('previewed'); requestAnimationFrame(this.animeLines.bind(this)); }; Chapter.prototype.resetPartsPos = function(){ this.parts_pos = {xs:new Array(), ys:new Array()}; for (var i = 0; i < 3; i++) { switch(i){ case 0: this.parts_pos.xs.push(randB(-30,30)); this.parts_pos.ys.push(randB(90,110)); break; case 1: this.parts_pos.xs.push(randB(180,280)); this.parts_pos.ys.push(randB(250,350)); break; case 2: this.parts_pos.xs.push(randB(-280,-180)); this.parts_pos.ys.push(randB(430,530)); break; } }; this.parts_pos.xs = shuffleArray(this.parts_pos.xs); this.parts_pos.ys = shuffleArray(this.parts_pos.ys); }; 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(){ for (var i = 0; i < 2; i++) { this.lines.push({ $line:$("