nav move on mouse move instead of dragging, first draft

sites/all/themes/gui/jee/js/jee.js

@@ -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;
       };