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

main nav optimized on mousemove AND touchmove + misc

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2015-03-25 16:28:31 +01:00
parent 3b69b020d4
commit 9bda2a72a3
9 changed files with 346 additions and 1402 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/gui/jee/js/jee.js
+153 -230
View File
@@ -10,7 +10,10 @@
*/
jQuery(document).ready(function($) {
console.log('Hello Jee');
// console.log('Hello Jee');
// http://stackoverflow.com/questions/2890898/preventing-mouse-emulation-events-ie-click-from-touch-events-in-mobile-safari
// FastClick.attach(document.body);
var _debug = true,
_avgDelay = 1,
@@ -49,6 +52,8 @@ jQuery(document).ready(function($) {
var _$loader = $('<div>').attr('id','loader').appendTo(_$body);
var _touch_started = false;
function init(){
if(_debug)
initDebug();
@@ -132,7 +137,7 @@ jQuery(document).ready(function($) {
function launchNav(){
$(document)
$("#block-system-main")
/*
____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____
| \| __| __| | |_ _| | _ | | __| | | __| | |_ _| __|
@@ -140,11 +145,17 @@ jQuery(document).ready(function($) {
|____/|_____|_____|__|__| |_| |_____|__| |_____|\___/|_____|_|___| |_| |_____|
*/
.on('mousemove', function(e){
console.log('document mousedown');
e.preventDefault();
// prevent firing mousemove with touch events
if(_touch_started)
return false;
console.log('document mousemove');
clearTimeout(_timeout_dragging);
if(_previewed_chapter || _loaded_chapter || _loaded_static)
return false;
// if(_previewed_chapter || _loaded_chapter || _loaded_static)
// return false;
// activate dragging if already activated
if(!_dragging){
@@ -156,6 +167,7 @@ jQuery(document).ready(function($) {
}
})
.on('mouseup', function(e){
e.preventDefault();
console.log('document mouseup');
if(_loaded_chapter || _loaded_static)
@@ -170,8 +182,12 @@ jQuery(document).ready(function($) {
| | | | | | | --| | | __| | | __| | | | | | |__ |
|_| |_____|_____|_____|__|__| |_____|\___/|_____|_|___| |_| |_____|
*/
.on('document touchstart', function(e){
console.log('touchstart');
.on('touchstart', function(e){
// e.preventDefault();
console.log('document touchstart');
_touch_started = true;
clearTimeout(_timeout_dragging);
if(_loaded_chapter || _loaded_static)
@@ -187,6 +203,7 @@ jQuery(document).ready(function($) {
}
})
.on('touchmove', function(e){
// e.preventDefault();
console.log('document touchmove');
if(_loaded_chapter || _loaded_static)
@@ -195,12 +212,16 @@ jQuery(document).ready(function($) {
updateNavPos(e.originalEvent.touches[0].clientX, e.originalEvent.touches[0].clientY, true, false);
})
.on('touchend', function(e){
// e.preventDefault();
console.log("document touchend");
if(_loaded_chapter || _loaded_static)
return false;
stopMoveNav();
setTimeout(function(){_touch_started = false;}, 500);
});
// TODO : nav on scroll events
@@ -279,19 +300,19 @@ jQuery(document).ready(function($) {
},3000);
};
function moveToChapter(chapter){
// 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;
// // 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
_nav_pos.x = - (chapter.pos.x - _center.x) - chapter.geom.w/2;
_nav_pos.y = 100 - chapter.pos.y;
// // calculate the second pos of faked mousemove
// _nav_pos.x = - (chapter.pos.x - _center.x) - chapter.geom.w/2;
// _nav_pos.y = 100 - chapter.pos.y;
startMoveNav();
stopMoveNav();
};
// startMoveNav();
// stopMoveNav();
// };
function onFullScreen(e){
if(_$body.is('fullscreen')){
@@ -339,6 +360,7 @@ jQuery(document).ready(function($) {
function onCloseStatic(e){
_$static_wrapper.removeClass('visible');
_loaded_static = false;
};
/*
@@ -365,7 +387,8 @@ jQuery(document).ready(function($) {
}
this.pos = {x:0,y:0};
this.trans = {x:0, y:0,z:0};
this.ease = randB(0.05, 0.3);
this.trans_previewed = {x:0, y:0,z:0};
this.ease = randB(0.05, 0.2);
//drifting
this.$title = $('h2.node-title', this.$e);
@@ -386,8 +409,9 @@ jQuery(document).ready(function($) {
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
this.displayPreviewAnimeStartTime = 0,
this.displayPreviewAnimeDuration = 4000, // milli sec
this.are_lines_animated = false;
// chapter
this.$n = false;
@@ -446,7 +470,10 @@ jQuery(document).ready(function($) {
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);
// calculate the translation needed for the previewed position (center top)
this.trans_previewed.x = -(this.pos.x - _center.x) - this.geom.w*0.5;
this.trans_previewed.y = -this.pos.y+this.$e.find('.node-title').height()*1.3;
this.$e.css({
left:this.pos.x,
top:this.pos.y
@@ -456,11 +483,14 @@ jQuery(document).ready(function($) {
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)
// $('h2.node-title, .field-name-field-partie:first>.field-name-field-vignette', this.$e)
this.$e
.on('click', this, function(e){
// e.stopImmediatePropagation();
console.log('click on chapter');
e.stopPropagation();
e.preventDefault();
e.data.preview(e);
return false;
});
@@ -505,6 +535,9 @@ jQuery(document).ready(function($) {
};
Chapter.prototype.move = function(){
if(this.is_previewed)
return false;
this.trans.x += (_nav_pos.x - this.trans.x)*this.ease;
this.trans.y += (_nav_pos.y - this.trans.y)*this.ease;
@@ -528,7 +561,7 @@ jQuery(document).ready(function($) {
Chapter.prototype.preview = function(){
// don't relaunch preview more that one time
if(this.is_previewed) return;
if(this.is_previewed) return false;
_previewed_chapter = this;
@@ -545,41 +578,31 @@ jQuery(document).ready(function($) {
this.displayPreview();
moveToChapter(this);
// 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).translate3d({x:xs[i],y:ys[i]});
}
}(i, e, that.parts_pos.xs, that.parts_pos.ys)),
10);
}); // each $parties
this.$e.addClass('previewed');
requestAnimationFrame(this.animeLines.bind(this));
this.are_lines_animated = false;
requestAnimationFrame(this.animePreviewDisplay.bind(this));
};
Chapter.prototype.resetPartsPos = function(){
this.parts_pos = {xs:new Array(), ys:new Array()};
var h = _container.h * 0.6;
for (var i = 0; i < 2; i++) {
switch(i){
case 0:
this.parts_pos.xs.push(randB(180,280));
this.parts_pos.ys.push(randB(250,350));
this.parts_pos.ys.push(randB(h*0.55,h*0.6));
break;
case 1:
this.parts_pos.xs.push(randB(-280,-180));
this.parts_pos.ys.push(randB(430,530));
this.parts_pos.ys.push(randB(h*0.65,h));
break;
}
};
@@ -588,7 +611,7 @@ jQuery(document).ready(function($) {
// always place the first circle on top center
this.parts_pos.xs.unshift(randB(-30,30));
this.parts_pos.ys.unshift(randB(120,140));
this.parts_pos.ys.unshift(120);
};
Chapter.prototype.closePreview = function(){
@@ -597,9 +620,11 @@ jQuery(document).ready(function($) {
this.$e.removeClass('previewed')
.find('.field-name-field-partie')
.css({transform:"none"});
requestAnimationFrame(this.animeLines.bind(this));
this.is_previewed = false;
_previewed_chapter = false;
requestAnimationFrame(this.animePreviewDisplay.bind(this));
return this;
};
@@ -623,52 +648,79 @@ jQuery(document).ready(function($) {
};
};
Chapter.prototype.animeLines = function(timestamp){
Chapter.prototype.animePreviewDisplay = function(timestamp){
// console.log("anime line "+this.nid);
// get the time on first anime launch
if(this.linesAnimeStartTime === 0)
this.linesAnimeStartTime = timestamp;
if(this.displayPreviewAnimeStartTime === 0)
this.displayPreviewAnimeStartTime = timestamp;
// limit the animation time
if(timestamp - this.linesAnimeStartTime < this.linesAnimeDuration){
requestAnimationFrame(this.animeLines.bind(this));
if(timestamp - this.displayPreviewAnimeStartTime < this.displayPreviewAnimeDuration){
requestAnimationFrame(this.animePreviewDisplay.bind(this));
}else{
this.linesAnimeStartTime = 0;
this.displayPreviewAnimeStartTime = 0;
}
// get the lines length
var l, a, pos1, pos2;
for (var i = 0; i < this.lines.length; i++) {
pos1 = this.$parties.eq(i).position();
pos2 = this.$parties.eq(i+1).position();
// first move chapter to previewed pos (center top screen)
if(this.is_previewed && !this.are_lines_animated){
this.trans.x = this.trans.x + (this.trans_previewed.x - this.trans.x)*0.4;
this.trans.y = this.trans.y + (this.trans_previewed.y - this.trans.y)*0.4;
this.$e.translate3d({x:this.trans.x,y:this.trans.y});
l = Math.sqrt(
Math.pow(
pos2.left - pos1.left
,2
)
+
Math.pow(
pos2.top - pos1.top
,2
)
);
// append just once when positioning is done
if(Math.abs(this.trans_previewed.x - this.trans.x) < 5){
// apply new position to parties
var that = this;
this.$parties.each(function(i, e) {
setTimeout(
(function(i, e, xs, ys){
return function(){
$(e).translate3d({x:xs[i],y:ys[i]});
}
}(i, e, that.parts_pos.xs, that.parts_pos.ys)),
10);
}); // each $parties
// get the rotation
a = 180 / 3.14 * Math.acos((pos2.top - pos1.top) / l);
if(pos2.left > pos1.left)
a *= -1;
//activate lines anime for next frame
this.are_lines_animated = true;
this.$e.addClass('previewed');
}
}
// console.log("a = "+a);
this.lines[i].$line.css({
'height':l,
transform:"rotate3d(0,0,1,"+a+"deg)"
});
// after positiong juste anime lines
if(this.are_lines_animated){
// get the lines length
var l, a, pos1, pos2;
for (var i = 0; i < this.lines.length; i++) {
pos1 = this.$parties.eq(i).position();
pos2 = this.$parties.eq(i+1).position();
};
l = Math.sqrt(
Math.pow(
pos2.left - pos1.left
,2
)
+
Math.pow(
pos2.top - pos1.top
,2
)
);
// get the rotation
a = 180 / 3.14 * Math.acos((pos2.top - pos1.top) / l);
if(pos2.left > pos1.left)
a *= -1;
// console.log("a = "+a);
this.lines[i].$line.css({
'height':l,
transform:"rotate3d(0,0,1,"+a+"deg)"
});
};
}
};
// _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____
// | | _ | __| | | | | | | _ | _ |_ _| __| __ |
// | | | __| __| | | | | --| | | __| | | | __| -|
@@ -866,9 +918,31 @@ jQuery(document).ready(function($) {
};
}
// function translate3d(x, y, z){
// // return
// };
// http://davidwalsh.name/fullscreen
// http://www.sitepoint.com/html5-full-screen-api/
function launchIntoFullscreen(element) {
// Find the right method, call on correct element
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// Whack fullscreen
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
/*
_ _ __
@@ -915,41 +989,6 @@ jQuery(document).ready(function($) {
}());
/*
____ ____
/ __/_ __/ / / __________________ ___ ____
/ /_/ / / / / / / ___/ ___/ ___/ _ \/ _ \/ __ \
/ __/ /_/ / / / (__ ) /__/ / / __/ __/ / / /
/_/ \__,_/_/_/ /____/\___/_/ \___/\___/_/ /_/
*/
// 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();
}
}
// Whack fullscreen
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
/*
____ __ __ _____________ _______
/ __ \/ / / / / / ____/ _/ | / / ___/
@@ -972,119 +1011,3 @@ function exitFullscreen() {
};
})(jQuery);
// https://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
// (function($) {
// $.fn.drags = function(opt) {
// opt = $.extend({handle:"",cursor:"move"}, opt);
// if(opt.handle === "") {
// var $el = this;
// } else {
// var $el = this.find(opt.handle);
// }
// return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
// if(opt.handle === "") {
// var $drag = $(this).addClass('draggable');
// } else {
// var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
// }
// var z_idx = $drag.css('z-index'),
// drg_h = $drag.outerHeight(),
// drg_w = $drag.outerWidth(),
// pos_y = $drag.offset().top + drg_h - e.pageY,
// pos_x = $drag.offset().left + drg_w - e.pageX;
// $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
// $('.draggable').offset({
// top:e.pageY + pos_y - drg_h,
// left:e.pageX + pos_x - drg_w
// }).on("mouseup", function() {
// $(this).removeClass('draggable').css('z-index', z_idx);
// });
// });
// e.preventDefault(); // disable selection
// }).on("mouseup", function() {
// if(opt.handle === "") {
// $(this).removeClass('draggable');
// } else {
// $(this).removeClass('active-handle').parent().removeClass('draggable');
// }
// });
// }
// })(jQuery);
// 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) {
// // 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');
// });
// }
// });
// };