nav move on mouse move instead of dragging, first draft

This commit is contained in:
Bachir Soussi Chiadmi
2015-03-24 19:55:08 +01:00
parent c5e1e193e7
commit 3b69b020d4
+44 -47
View File
@@ -33,7 +33,8 @@ jQuery(document).ready(function($) {
_mouse_down_pos = {x:0,y:0}, _mouse_down_pos = {x:0,y:0},
_prev_mouse_pos = {x:0,y:0}, _prev_mouse_pos = {x:0,y:0},
_fps = 1000/12, _fps = 1000/12,
_dragging = false, _timeout_dragging; _dragging = false, _timeout_dragging,
_previewed_chapter = false;
var _$chapter_wrapper = $('<div>').attr('id', 'chapter-wrapper').appendTo(_$container), var _$chapter_wrapper = $('<div>').attr('id', 'chapter-wrapper').appendTo(_$container),
_loaded_chapter = false; _loaded_chapter = false;
@@ -138,43 +139,30 @@ jQuery(document).ready(function($) {
| | | __|__ | -| | | | | | __| | __| | | __| | | | | | |__ | | | | __|__ | -| | | | | | __| | __| | | __| | | | | | |__ |
|____/|_____|_____|__|__| |_| |_____|__| |_____|\___/|_____|_|___| |_| |_____| |____/|_____|_____|__|__| |_| |_____|__| |_____|\___/|_____|_|___| |_| |_____|
*/ */
.bind('mousedown', function(e){ .on('mousemove', function(e){
console.log('document mousedown'); console.log('document mousedown');
clearTimeout(_timeout_dragging); clearTimeout(_timeout_dragging);
if(_loaded_chapter || _loaded_static) if(_previewed_chapter || _loaded_chapter || _loaded_static)
return false; 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 // activate dragging if already activated
if(!_dragging){ if(!_dragging){
_dragging = true; _dragging = true;
startMoveNav(); startMoveNav();
}else{
updateNavPos(e.clientX, e.clientY, false, false);
} }
}) })
.bind('mouseup', function(e){ .on('mouseup', function(e){
console.log('document mouseup'); console.log('document mouseup');
if(_loaded_chapter || _loaded_static) if(_loaded_chapter || _loaded_static)
return false; return false;
stopMoveNav(); for (var i = _chapitres_len - 1; i >= 0; i--)
$(this).unbind('mousemove'); _chapters[i].closePreview().unMitigate();
// 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();
}) })
/* /*
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____
@@ -182,7 +170,7 @@ jQuery(document).ready(function($) {
| | | | | | | --| | | __| | | __| | | | | | |__ | | | | | | | | --| | | __| | | __| | | | | | |__ |
|_| |_____|_____|_____|__|__| |_____|\___/|_____|_|___| |_| |_____| |_| |_____|_____|_____|__|__| |_____|\___/|_____|_|___| |_| |_____|
*/ */
.bind('document touchstart', function(e){ .on('document touchstart', function(e){
console.log('touchstart'); console.log('touchstart');
clearTimeout(_timeout_dragging); clearTimeout(_timeout_dragging);
@@ -190,7 +178,7 @@ jQuery(document).ready(function($) {
return false; return false;
// set initial pos // set initial pos
updateNavPos(e.originalEvent.touches[0].clientX, e.originalEvent.touches[0].clientY, true); updateNavPos(e.originalEvent.touches[0].clientX, e.originalEvent.touches[0].clientY, true, true);
// activate dragging if already activated // activate dragging if already activated
if(!_dragging){ if(!_dragging){
@@ -198,15 +186,15 @@ jQuery(document).ready(function($) {
startMoveNav(); startMoveNav();
} }
}) })
.bind('touchmove', function(e){ .on('touchmove', function(e){
console.log('document touchmove'); console.log('document touchmove');
if(_loaded_chapter || _loaded_static) if(_loaded_chapter || _loaded_static)
return false; return false;
updateNavPos(e.originalEvent.touches[0].clientX, e.originalEvent.touches[0].clientY, false); updateNavPos(e.originalEvent.touches[0].clientX, e.originalEvent.touches[0].clientY, true, false);
}) })
.bind('touchend', function(e){ .on('touchend', function(e){
console.log("document touchend"); console.log("document touchend");
if(_loaded_chapter || _loaded_static) if(_loaded_chapter || _loaded_static)
@@ -218,25 +206,31 @@ jQuery(document).ready(function($) {
// TODO : nav on scroll events // TODO : nav on scroll events
}; };
function updateNavPos(x,y,init){ function updateNavPos(x,y,touch,init){
if(!init){ if(touch){
_nav_pos.x += x - _prev_mouse_pos.x; if(!init){
_nav_pos.y += y - _prev_mouse_pos.y; _nav_pos.x += x - _prev_mouse_pos.x;
// constrain nav pos on container _nav_pos.y += y - _prev_mouse_pos.y;
_nav_pos.x = _nav_pos.x < -_center.x*2
? -_center.x*2 // constrain nav pos on container
: _nav_pos.x > _center.x*2 _nav_pos.x = _nav_pos.x < -_center.x*2
? _center.x*2 ? -_center.x*2
: _nav_pos.x; : _nav_pos.x > _center.x*2
_nav_pos.y = _nav_pos.y < -_center.y*2 ? _center.x*2
? -_center.y*2 : _nav_pos.x;
: _nav_pos.y > _center.y*2 _nav_pos.y = _nav_pos.y < -_center.y*2
? _center.y*2 ? -_center.y*2
: _nav_pos.y; : _nav_pos.y > _center.y*2
? _center.y*2
: _nav_pos.y;
}
}else{
_nav_pos.x = (_center.x -x)*0.5;
_nav_pos.y = (_center.y -y)*0.5;
} }
_prev_mouse_pos.x = x; _prev_mouse_pos.x = x;
_prev_mouse_pos.y = y; _prev_mouse_pos.y = y;
// debuging cursor // debuging cursor
if(_debug) if(_debug)
moveDebugCursor(); moveDebugCursor();
@@ -292,9 +286,9 @@ jQuery(document).ready(function($) {
_prev_mouse_pos.y = _nav_pos.y; _prev_mouse_pos.y = _nav_pos.y;
// calculate the second pos of faked mousemove // calculate the second pos of faked mousemove
var xl = _center.x - chapter.pos.x - chapter.geom.w/2; _nav_pos.x = - (chapter.pos.x - _center.x) - chapter.geom.w/2;
var yl = 100 - chapter.pos.y; _nav_pos.y = 100 - chapter.pos.y;
updateNavPos(xl, yl, false);
startMoveNav(); startMoveNav();
stopMoveNav(); stopMoveNav();
}; };
@@ -412,7 +406,7 @@ jQuery(document).ready(function($) {
this.setInitPos(); this.setInitPos();
this.drawLines(); this.drawLines();
this.setEvents(); this.setEvents();
this.initDrifiting(); // this.initDrifiting();
// enable nodes after intro anime // enable nodes after intro anime
setTimeout( setTimeout(
@@ -536,6 +530,8 @@ jQuery(document).ready(function($) {
// don't relaunch preview more that one time // don't relaunch preview more that one time
if(this.is_previewed) return; if(this.is_previewed) return;
_previewed_chapter = this;
console.log('preview', this.i); console.log('preview', this.i);
this.unMitigate(); this.unMitigate();
@@ -603,6 +599,7 @@ jQuery(document).ready(function($) {
.css({transform:"none"}); .css({transform:"none"});
requestAnimationFrame(this.animeLines.bind(this)); requestAnimationFrame(this.animeLines.bind(this));
this.is_previewed = false; this.is_previewed = false;
_previewed_chapter = false;
return this; return this;
}; };