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},
_prev_mouse_pos = {x:0,y:0},
_fps = 1000/12,
_dragging = false, _timeout_dragging;
_dragging = false, _timeout_dragging,
_previewed_chapter = false;
var _$chapter_wrapper = $('<div>').attr('id', 'chapter-wrapper').appendTo(_$container),
_loaded_chapter = false;
@@ -138,43 +139,30 @@ jQuery(document).ready(function($) {
| | | __|__ | -| | | | | | __| | __| | | __| | | | | | |__ |
|____/|_____|_____|__|__| |_| |_____|__| |_____|\___/|_____|_|___| |_| |_____|
*/
.bind('mousedown', function(e){
.on('mousemove', function(e){
console.log('document mousedown');
clearTimeout(_timeout_dragging);
if(_loaded_chapter || _loaded_static)
if(_previewed_chapter || _loaded_chapter || _loaded_static)
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();
}else{
updateNavPos(e.clientX, e.clientY, false, false);
}
})
.bind('mouseup', function(e){
.on('mouseup', function(e){
console.log('document mouseup');
if(_loaded_chapter || _loaded_static)
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();
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');
clearTimeout(_timeout_dragging);
@@ -190,7 +178,7 @@ jQuery(document).ready(function($) {
return false;
// 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
if(!_dragging){
@@ -198,15 +186,15 @@ jQuery(document).ready(function($) {
startMoveNav();
}
})
.bind('touchmove', function(e){
.on('touchmove', function(e){
console.log('document touchmove');
if(_loaded_chapter || _loaded_static)
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");
if(_loaded_chapter || _loaded_static)
@@ -218,25 +206,31 @@ jQuery(document).ready(function($) {
// TODO : nav on scroll events
};
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;
function updateNavPos(x,y,touch,init){
if(touch){
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;
}
}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.y = y;
// debuging cursor
if(_debug)
moveDebugCursor();
@@ -292,9 +286,9 @@ jQuery(document).ready(function($) {
_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);
_nav_pos.x = - (chapter.pos.x - _center.x) - chapter.geom.w/2;
_nav_pos.y = 100 - chapter.pos.y;
startMoveNav();
stopMoveNav();
};
@@ -412,7 +406,7 @@ jQuery(document).ready(function($) {
this.setInitPos();
this.drawLines();
this.setEvents();
this.initDrifiting();
// this.initDrifiting();
// enable nodes after intro anime
setTimeout(
@@ -536,6 +530,8 @@ jQuery(document).ready(function($) {
// don't relaunch preview more that one time
if(this.is_previewed) return;
_previewed_chapter = this;
console.log('preview', this.i);
this.unMitigate();
@@ -603,6 +599,7 @@ jQuery(document).ready(function($) {
.css({transform:"none"});
requestAnimationFrame(this.animeLines.bind(this));
this.is_previewed = false;
_previewed_chapter = false;
return this;
};