flot - npm Package Compare versions

Comparing version 2.3.2 to 3.0.0

docs/navigate.md

@@ -16,3 +16,4 @@ ## jquery.flot.navigate.js
         active: false,
-        amount: 1.5         // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
+        amount: 1.5,         // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
+        enableTouch: false
     }
@@ -30,2 +31,9 @@
 
+    recenter: {
+        interactive: true,
+        enableTouch: true
+    }
+
+    propagateSupportedGesture: false,
+
     xaxis: {
@@ -47,3 +55,3 @@ axisZoom: true, //zoom axis when mouse over it is allowed
 interactive for pan, then you'll have a basic plot that supports moving
-around; the same for zoom.
+around; the same for zoom and recenter.
 
@@ -73,4 +81,4 @@ **active** is true after a touch tap on plot. This enables plot navigation.
 
-**enableTouch** enables the touch support, including pan (to drag), pinch (to zoom and move),
-and double tap (to recenter).
+**enableTouch** enables the touch support, for pan (to drag), pinch (to zoom and move),
+or double tap (to recenter).
 
@@ -80,2 +88,5 @@ **touchMode** a string specifies the pan mode of touch pan.
 
+**propagateSupportedGesture** set true to allow the propagation of origin touch events
+(e.g. 'touchstart') that is already handled for pan or pinch. Default: false.
+
 Example API usage:
@@ -82,0 +93,0 @@ ```js

package.json

 {
   "name": "flot",
-  "version": "2.3.2",
+  "version": "3.0.0",
   "main": "dist/es5/jquery.flot.js",
@@ -5,0 +5,0 @@ "scripts": {

source/jquery.flot.navigate.js

@@ -120,2 +120,5 @@ /* Flot plugin for adding the ability to pan and zoom the plot.
         },
+        recenter: {
+            interactive: true
+        },
         xaxis: {
@@ -366,5 +369,11 @@ axisZoom: true, //zoom axis when mouse over it is allowed
             plot.activate();
+            var o = plot.getOptions()
 
+            if (!o.recenter.interactive) { return; }
+
             var axes = plot.getTouchedAxis(e.clientX, e.clientY),
                 event;
+
+            plot.recenter({ axes: axes[0] ? axes : null });
+
             if (axes[0]) {
@@ -375,3 +384,3 @@ event = new $.Event('re-center', { detail: {
             } else {
-                event = new $.Event('re-center', {detail: e});
+                event = new $.Event('re-center', { detail: e });
             }
@@ -378,0 +387,0 @@ plot.getPlaceholder().trigger(event);

source/jquery.flot.touch.js

@@ -8,5 +8,3 @@
     var options = {
-        pan: {
-            enableTouch: false
-        }
+        propagateSupportedGesture: false
     };
@@ -26,3 +24,3 @@
                 interceptedLongTap: false,
-                allowEventPropagation: false,
+                isUnsupportedGesture: false,
                 prevTapTime: null,
@@ -80,4 +78,2 @@ tapStartTime: null,
                     break;
-                default:
-                    break;
             }
@@ -113,3 +109,3 @@ }
             touchmove: function(e) {
-                preventEventPropagation(e);
+                preventEventBehaviors(e);
 
@@ -119,3 +115,3 @@ updateCurrentForDoubleTap(e);
 
-                if (!gestureState.allowEventPropagation) {
+                if (!gestureState.isUnsupportedGesture) {
                     mainEventHolder.dispatchEvent(new CustomEvent('pandrag', { detail: e }));
@@ -126,3 +122,3 @@ }
             touchend: function(e) {
-                preventEventPropagation(e);
+                preventEventBehaviors(e);
 
@@ -144,5 +140,5 @@ if (wasPinchEvent(e)) {
             touchmove: function(e) {
-                preventEventPropagation(e);
+                preventEventBehaviors(e);
                 gestureState.twoTouches = isPinchEvent(e);
-                if (!gestureState.allowEventPropagation) {
+                if (!gestureState.isUnsupportedGesture) {
                     mainEventHolder.dispatchEvent(new CustomEvent('pinchdrag', { detail: e }));
@@ -153,3 +149,3 @@ }
             touchend: function(e) {
-                preventEventPropagation(e);
+                preventEventBehaviors(e);
             }
@@ -160,3 +156,3 @@ };
             onDoubleTap: function(e) {
-                preventEventPropagation(e);
+                preventEventBehaviors(e);
                 mainEventHolder.dispatchEvent(new CustomEvent('doubletap', { detail: e }));
@@ -217,3 +213,3 @@ }
                     mainEventHolder.dispatchEvent(new CustomEvent('tap', { detail: e }));
-                    preventEventPropagation(e);
+                    preventEventBehaviors(e);
                 }
@@ -234,3 +230,3 @@ },
 
-        if (options.pan.enableTouch === true) {
+        if (options.pan.enableTouch === true || options.zoom.enableTouch) {
             plot.hooks.bindEvents.push(bindEvents);
@@ -289,6 +285,8 @@ plot.hooks.shutdown.push(shutdown);
 
-        function preventEventPropagation(e) {
-            if (!gestureState.allowEventPropagation) {
+        function preventEventBehaviors(e) {
+            if (!gestureState.isUnsupportedGesture) {
                 e.preventDefault();
-                e.stopPropagation();
+                if (!plot.getOptions().propagateSupportedGesture) {
+                    e.stopPropagation();
+                }
             }
@@ -311,5 +309,5 @@ }
             if (e.touches.length >= 3) {
-                gestureState.allowEventPropagation = true;
+                gestureState.isUnsupportedGesture = true;
             } else {
-                gestureState.allowEventPropagation = false;
+                gestureState.isUnsupportedGesture = false;
             }
@@ -316,0 +314,0 @@ }

source/jquery.flot.touchNavigate.js

@@ -7,5 +7,11 @@ /* global jQuery */
     var options = {
+        zoom: {
+            enableTouch: false
+        },
         pan: {
             enableTouch: false,
             touchMode: 'manual'
+        },
+        recenter: {
+            enableTouch: true
         }
@@ -35,5 +41,5 @@ };
             },
-            useManualPan = options.pan.touchMode === 'manual',
+            useManualPan = options.pan.interactive && options.pan.touchMode === 'manual',
             smartPanLock = options.pan.touchMode === 'smartLock',
-            useSmartPan = smartPanLock || options.pan.touchMode === 'smart',
+            useSmartPan = options.pan.interactive && (smartPanLock || options.pan.touchMode === 'smart'),
             pan, pinch, doubleTap;
@@ -44,9 +50,15 @@
 
-            if (o.pan.interactive) {
+            if (o.zoom.interactive && o.zoom.enableTouch) {
+                eventHolder[0].addEventListener('pinchstart', pinch.start, false);
+                eventHolder[0].addEventListener('pinchdrag', pinch.drag, false);
+                eventHolder[0].addEventListener('pinchend', pinch.end, false);
+            }
+
+            if (o.pan.interactive && o.pan.enableTouch) {
                 eventHolder[0].addEventListener('panstart', pan.start, false);
                 eventHolder[0].addEventListener('pandrag', pan.drag, false);
                 eventHolder[0].addEventListener('panend', pan.end, false);
-                eventHolder[0].addEventListener('pinchstart', pinch.start, false);
-                eventHolder[0].addEventListener('pinchdrag', pinch.drag, false);
-                eventHolder[0].addEventListener('pinchend', pinch.end, false);
+            }
+
+            if ((o.recenter.interactive && o.recenter.enableTouch)) {
                 eventHolder[0].addEventListener('doubletap', doubleTap.recenterPlot, false);
@@ -158,11 +170,10 @@ }
             recenterPlot: function(e) {
-                if (e && e.detail && e.detail.type === 'touchmove') {
-                    // do not recenter during touch moving;
-                    return;
+                if (e && e.detail && e.detail.type === 'touchstart') {
+                    // only do not recenter for touch start;
+                    recenterPlotOnDoubleTap(plot, e, gestureState, navigationState);
                 }
-                recenterPlotOnDoubleTap(plot, e, gestureState, navigationState);
             }
         };
 
-        if (options.pan.enableTouch === true) {
+        if (options.pan.enableTouch === true || options.zoom.enableTouch === true) {
             plot.hooks.bindEvents.push(bindEvents);
@@ -194,3 +205,12 @@ plot.hooks.shutdown.push(shutdown);
             (navigationState.currentTouchedAxis === 'none' && navigationState.prevTouchedAxis === 'none')) {
+            var event;
+
             plot.recenter({ axes: navigationState.touchedAxis });
+
+            if (navigationState.touchedAxis) {
+                event = new $.Event('re-center', { detail: { axisTouched: navigationState.touchedAxis } });
+            } else {
+                event = new $.Event('re-center', { detail: e });
+            }
+            plot.getPlaceholder().trigger(event);
         }
@@ -197,0 +217,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

973749

increased by0.19%

Lines of code

19384

increased by0.11%

No dependency changes