nav move on mouse move instead of dragging, first draft
This commit is contained in:
@@ -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;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user