Merge pull request #16 from nasa-gibs/wv-1071.e_w_scrolling_with_mous…

…e_pans_timeline Wv 1071.e w scrolling with mouse pans timeline
nasa-gibs · Dec 23, 2014 · 806fd9f · 806fd9f
2 parents 719c64d + 8eb29c5
commit 806fd9f
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 47 deletions.
diff --git a/web/index.html b/web/index.html
@@ -121,8 +121,6 @@
     <!-- link.dev  -->      <script type="text/javascript" src="ext/date/mobiscroll-2.6.0/mobiscroll.js"></script>
     <!-- link.prod --> <!-- <script type="text/javascript" src="ext/date/mobiscroll-2.6.0/mobiscroll.min.js"></script> -->
 
-                            <script type="text/javascript" src="ext/date/jquery.mousewheel-3.1.12/jquery.mousewheel.min.js"></script>
-
     <!-- link.dev  -->      <script type="text/javascript" src="ext/palettes/jquery.dd-3.3/jquery.dd.js"></script>
     <!-- link.prod --> <!-- <script type="text/javascript" src="ext/palettes/jquery.dd-3.3/jquery.dd.min.js"></script> -->
 

diff --git a/web/js/date/wv.date.timeline.js b/web/js/date/wv.date.timeline.js
@@ -31,7 +31,7 @@ wv.date.timeline = wv.date.timeline || function(models, config, ui) {
     var dataEndDate = new Date(new Date(wv.util.today()).setUTCDate(wv.util.today().getUTCDate()+1));
     var boundaryTicks,normalTicks,allTicks,allBoundaryTickForegrounds,offscreenBoundaryTickText, tooSmall;
     var x,xAxis,y,yAxis,zoom;
-    var zoomInterval,zoomStep,subInterval,subStep,zoomTimeFormat,zoomLvl;
+    var zoomInterval,zoomStep,subInterval,subStep,zoomTimeFormat,zoomLvl,zoomTranslate;
     var timelineSVG,timeline,verticalAxis,guitarPick,pickWidth,drag,dataBars,gpLocation,halfPickWidth,pickOffset,pickTipDate,prevChange,nextChange;
     var activeLayers,activeLayersDynamic,activeLayersInvisible,layerCount,activeLayersTitles;
     var timer, rollingDate;
@@ -256,16 +256,16 @@ wv.date.timeline = wv.date.timeline || function(models, config, ui) {
 
     };
     var moveToPick = function(){
-        var zt = zoom.translate()[0];
-
+        var zt = zoomTranslate;
         if(x(model.selected) >= (width-15)){
             if (mousedown){
                 zoom.translate([zt - x(model.selected)+(width-15),0]);
             }
             else{
                 zoom.translate([zt - x(model.selected) + (width/8)*7,0]);
             }
-            panAxis();
+            zoomTranslate = zoom.translate()[0];
+            self.panAxis();
         }
         else if(x(model.selected) < 15){
             if (mousedown){
@@ -274,7 +274,8 @@ wv.date.timeline = wv.date.timeline || function(models, config, ui) {
             else{
                 zoom.translate([zt - x(model.selected) + width/8,0]);
             }
-            panAxis();
+            zoomTranslate = zoom.translate()[0];
+            self.panAxis();
         }
         $('#guitarpick').show();
     };
@@ -573,9 +574,18 @@ wv.date.timeline = wv.date.timeline || function(models, config, ui) {
         }
         return rt;
     };
-    var panAxis = function(){  //TODO: Draw y axis
 
-        timeline.select(".x.axis")
+    self.panAxis = function(event){  //TODO: Draw y axis
+        if(event){
+            var evt = event.sourceEvent || event;
+            var delX = evt.deltaX;
+            if((evt.type === "wheel") && ((evt.deltaX < 0) || (evt.deltaX > 0))){
+                zoom.translate([zoomTranslate+delX,0]);
+                zoomTranslate = zoom.translate()[0];
+            }
+        }
+
+        d3.select("#timeline-footer svg .x.axis")
             .call(xAxis);
 
         setTicks();
@@ -867,8 +877,7 @@ wv.date.timeline = wv.date.timeline || function(models, config, ui) {
         var mouseBool,mousePos,mouseOffset;
 
         if (event){
-            var parentOffset = $(event.currentTarget).offset();
-            var relX = event.clientX - parentOffset.left;
+            var relX = event.offsetX || (event.clientX - $('#timeline-footer').offset().left);
             mousePos = x.invert(relX);
             mouseBool = true;
             mouseOffset = (width-margin.left-margin.right)/2 - relX;
@@ -1023,8 +1032,9 @@ wv.date.timeline = wv.date.timeline || function(models, config, ui) {
             .x(x)
             .scale(1)
             .scaleExtent([1, 1]) //don't use default zoom provided by d3
-            .xExtent(dataLimits)
-            .on("zoom", onPan, d3.event);
+            .xExtent(dataLimits);
+
+        wv.ui.mouse.wheel(zoom,ui).change(zoomed);
 
         timelineSVG.call(zoom);
 
@@ -1034,7 +1044,7 @@ wv.date.timeline = wv.date.timeline || function(models, config, ui) {
         else{
             zoom.translate([-x(model.selected)+(width-margin.left-margin.right)/2,0]);
         }
-
+        zoomTranslate = zoom.translate()[0];
         timeline.selectAll('.x.axis').remove();
 
 
@@ -1468,6 +1478,7 @@ wv.date.timeline = wv.date.timeline || function(models, config, ui) {
                 .attr("x2",width);//+margin.left+margin.right);
 
         zoom.translate([width/2 - x(model.selected),0]); //go to selected date
+        zoomTranslate = zoom.translate()[0];
 
         timeline.select(".x.axis")
             .call(xAxis); //update view after translate
@@ -1679,7 +1690,7 @@ wv.date.timeline = wv.date.timeline || function(models, config, ui) {
                     break;
                 }
                 if((selectedDateObj > dataLimits[0]) && (selectedDateObj <= wv.util.today())){
-                    var ztw = zoom.translate()[0];
+                    var ztw = zoom.translate()[0]; //FIXME: Is this needed?
                     var sib =  selected.parent().next('div.input-wrapper').find('input.button-input-group');
                     if ( entered && sib.length < 1 ) {
                         $('#focus-guard-2').focus();
@@ -1757,12 +1768,6 @@ wv.date.timeline = wv.date.timeline || function(models, config, ui) {
             setZoom('days');
 
         });
-        /*d3.select("#zoom-weeks").on("click",function(d){
-            $('.zoom-btn').removeClass("zoom-btn-selected");
-            $(this).addClass("zoom-btn-selected");
-            setZoom('week');
-
-        });*/
 
         $('#timeline-hide').click(function() { self.toggle(); });
 
@@ -1777,16 +1782,10 @@ wv.date.timeline = wv.date.timeline || function(models, config, ui) {
         models.layers.events.on("change",function(){
             setData();
         });
-        models.layers.events.on('update',function(){
-
-        });
-        models.layers.events.on('visibility',function(){
-
-        });
 
         updateTime();
         resizeWindow();
-        wv.ui.mouse.wheel($("#timeline-footer svg")).change(zoomed);
+
         $('#timeline-footer').css('margin-left',margin.left-1 + 'px');
         $('#timeline-footer').css('margin-right',margin.right-1 + 'px');
     }; // end init()
@@ -1833,7 +1832,7 @@ wv.date.timeline = wv.date.timeline || function(models, config, ui) {
     };
 
     var zoomed = function(amount, event) {
-        zoomLvl += amount;
+        zoomLvl += -amount;
         if ( zoomLvl < 0 ) {
             zoomLvl = 0;
         }
@@ -1843,11 +1842,8 @@ wv.date.timeline = wv.date.timeline || function(models, config, ui) {
 
         setZoom.call(this, zoomLvl, event);
     };
-
-    var onPan = function(event) {
-        if ( !(tooSmall) ) { //pan by mousedown and drag
-            panAxis();
-        }
+    self.smallSize = function(){
+        return tooSmall;
     };
 
     var updateDateInputs = function(date) {

diff --git a/web/js/ui/wv.ui.mouse.js b/web/js/ui/wv.ui.mouse.js
@@ -49,8 +49,7 @@ wv.ui.mouse.click = wv.ui.mouse.click || function($element, callback) {
 
 };
 
-wv.ui.mouse.wheel = wv.ui.mouse.wheel || function($element, options) {
-
+wv.ui.mouse.wheel = wv.ui.mouse.wheel || function(element, ui, options) {
     options = options || {};
 
     var self = {};
@@ -64,29 +63,37 @@ wv.ui.mouse.wheel = wv.ui.mouse.wheel || function($element, options) {
     var lastEvent = null;
 
     var init = function() {
-        $element.on("mousewheel", wheel);
+        element.on("zoom", wheel);
     };
 
     self.change = function(listener) {
         self.events.on("change", listener);
         return self;
     };
 
-    var wheel = function(event) {
-        lastEvent = event;
-        delta += event.deltaY;
-        if ( !timer ) {
-            zoomed = false;
+    var wheel = function() {
+        var evt = d3.event.sourceEvent;
+        if(Math.abs(evt.deltaX) <= Math.abs(evt.deltaY)){
+            lastEvent = evt;
+            delta += evt.deltaY;
+            if ( !timer ) {
+                zoomed = false;
+            }
+            clearTimeout(timer);
+            timer = setTimeout(end, self.timeout);
+            update(evt);
+        }
+        else{
+            if(!(ui.timeline.smallSize())){
+                ui.timeline.panAxis(d3.event);
+            }
         }
-        clearTimeout(timer);
-        timer = setTimeout(end, self.timeout);
-        update(event);
     };
 
     var update = function(event) {
         var change = Math.floor(Math.abs(delta) / self.threshold);
         if ( change >= 1 ) {
-            var sign = Math.sign(delta);
+            var sign = delta?delta<0?-1:1:0;
             self.events.trigger("change", sign * change, event);
             delta = delta % self.threshold;
             zoomed = true;

diff --git a/web/js/wv.main.js b/web/js/wv.main.js
@@ -166,7 +166,7 @@ $(function() {
         ui.tour = wv.tour(models, ui, config);
         ui.info = wv.ui.info(ui, config);
 
-
+        //FIXME: Old hack
         $(window).resize(function() {
           if ($(window).width() < 720) {
             $('#productsHoldertabs li.first a').trigger('click');