subscribe-ui-event - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

dist/AugmentedEvent.js

@@ -16,2 +16,9 @@ /**
 };
+var touch = {
+    axisIntention: '',
+    startX: 0,
+    startY: 0,
+    deltaX: 0,
+    deltaY: 0
+};
 
@@ -24,2 +31,4 @@ // global variables
 
+var INTENTION_THRESHOLD = 5;
+
 if (typeof window !== 'undefined') {
@@ -39,13 +48,34 @@ win = window;
     option = option || {};
-    this.type = option.type || '';
+    var mainType = (option.mainType || '').toLowerCase();
+    var subType = (option.subType || '').toLowerCase();
+
+    this.mainType = mainType;
+    this.subType = subType;
+    this.type = mainType + subType.charAt(0).toUpperCase() + subType.slice(1) || '';
     this.scroll = scroll;
     this.resize = resize;
+    this.touch = touch;
 }
 
 ArgmentedEvent.prototype = {
-    update: function update(mainType) {
-        var top;
+    getXY: function getXY(touch) {
+        var t = { x: 0, y: 0 };
 
+        if (touch.pageX || touch.pageY) {
+            t.x = touch.pageX;
+            t.y = touch.pageY;
+        } else {
+            t.x = touch.clientX + docBody.scrollLeft + docEl.scrollLeft;
+            t.y = touch.clientY + docBody.scrollTop + docEl.scrollTop;
+        }
+
+        return t;
+    },
+
+    update: function update(e) {
+        var mainType = this.mainType;
+        var subType = this.subType;
+
         if (globalVars.enableScrollInfo && (mainType === 'scroll' || mainType === 'touchmove')) {
-            top = docEl.scrollTop + docBody.scrollTop;
+            var top = docEl.scrollTop + docBody.scrollTop;
             // Prevent delta from being 0
@@ -61,2 +91,28 @@ if (top !== this.scroll.top) {
         }
+        if (globalVars.enableTouchInfo && e.touches && (mainType === 'touchstart' || mainType === 'touchmove' || mainType === 'touchend')) {
+            var pos;
+            var absX;
+            var absY;
+            if (mainType === 'touchstart' || subType === 'start') {
+                pos = this.getXY(e.touches[0]);
+                this.touch.axisIntention = '';
+                this.touch.startX = pos.x;
+                this.touch.startY = pos.y;
+                this.touch.deltaX = 0;
+                this.touch.deltaY = 0;
+            } else if (mainType === 'touchmove') {
+                pos = this.getXY(e.touches[0]);
+                this.touch.deltaX = pos.x - this.touch.startX;
+                this.touch.deltaY = pos.y - this.touch.startY;
+                if (this.touch.axisIntention === '') {
+                    absX = Math.abs(this.touch.deltaX);
+                    absY = Math.abs(this.touch.deltaY);
+                    if (absX > INTENTION_THRESHOLD && absX >= absY) {
+                        this.touch.axisIntention = 'x';
+                    } else if (absY > INTENTION_THRESHOLD && absY > absX) {
+                        this.touch.axisIntention = 'y';
+                    }
+                }
+            }
+        }
     }
@@ -63,0 +119,0 @@ };

dist/mainEventConnectors.js

@@ -27,2 +27,4 @@ /**
 var win;
+var body;
+var hashId = 0;
 
@@ -32,4 +34,9 @@ if (typeof window !== 'undefined') {
     doc = win.document || document;
+    body = doc.body;
 }
 
+function getHash(domNode) {
+    return domNode.id || 'target-id-' + hashId++;
+}
+
 /**
@@ -90,7 +97,11 @@ * Connect a throttled event to a throttled main event, and return an event remover.
 function connectContinuousEvent(target, mainEvent, event) {
-    return function throttleEvent(throttleRate, cb, context) {
+    return function throttleEvent(throttleRate, cb, options) {
+        var context = options.context;
+        var domTarget = options.target;
+        var domId = domTarget && getHash(domTarget);
+
         var throttledStartEvent = mainEvent + 'Start:' + throttleRate;
         var throttledEndEvent = mainEvent + 'End:' + throttleRate;
-        var throttledMainEvent = mainEvent + ':' + throttleRate;
-        var throttledEvent = event + ':' + throttleRate;
+        var throttledMainEvent = mainEvent + ':' + throttleRate + (domId ? ':' + domId : '');
+        var throttledEvent = event + ':' + throttleRate + (domId ? ':' + domId : '');
 
@@ -105,5 +116,5 @@ var remover = connectThrottle(throttledEvent, cb, context, throttledMainEvent);
         var ae = {
-            start: new AugmentedEvent({ type: mainEvent + 'Start' }), // start
-            main: new AugmentedEvent({ type: mainEvent }), // main
-            end: new AugmentedEvent({ type: mainEvent + 'End' }) };
+            start: new AugmentedEvent({ mainType: mainEvent, subType: 'start' }), // start
+            main: new AugmentedEvent({ mainType: mainEvent }), // main
+            end: new AugmentedEvent({ mainType: mainEvent, subType: 'end' }) };
 
@@ -121,3 +132,3 @@ // No throttle for throttleRate = 0
         function endCallback(e) {
-            ae.end.update(mainEvent);
+            ae.end.update(e);
             EE.emit(throttledEndEvent, e, ae.end);
@@ -127,4 +138,4 @@ timer = null;
         function handler(e) {
-            ae.start.update(mainEvent);
             if (!timer) {
+                ae.start.update(e);
                 EE.emit(throttledStartEvent, e, ae.start);
@@ -134,3 +145,3 @@ }
 
-            // No need to call ae.main.update(), because ae.start.update is called, everything is update-to-date.
+            ae.main.update(e);
             EE.emit(throttledMainEvent, e, ae.main);
@@ -148,3 +159,3 @@ if (!leIE8) {
 
-        listeners[throttledMainEvent] = listen(target, mainEvent, handler);
+        listeners[throttledMainEvent] = listen(domTarget || target, mainEvent, handler);
         return remover;
@@ -155,5 +166,9 @@ };
 function connectDiscreteEvent(target, event) {
-    return function throttleEvent(throttleRate, cb, context) {
+    return function throttleEvent(throttleRate, cb, options) {
+        var context = options.context;
+        var domTarget = options.target;
+        var domId = domTarget && getHash(domTarget);
+
         // no throttling for discrete event
-        var throttledEvent = event + ':0';
+        var throttledEvent = event + ':0' + (domId ? ':' + domId : '');
 
@@ -167,10 +182,10 @@ var remover = connectThrottle(throttledEvent, cb, context);
 
-        var ae = new AugmentedEvent({ type: event });
+        var ae = new AugmentedEvent({ mainType: event });
 
         function handler(e) {
-            ae.update(event);
+            ae.update(e);
             EE.emit(throttledEvent, e, ae);
         }
 
-        listeners[throttledEvent] = listen(target, event, handler);
+        listeners[throttledEvent] = listen(domTarget || target, event, handler);
         return remover;
@@ -188,7 +203,7 @@ };
     visibilitychange: connectDiscreteEvent(doc, 'visibilitychange'),
-    touchmoveStart: connectContinuousEvent(win, 'touchmove', 'touchmoveStart'),
-    touchmoveEnd: connectContinuousEvent(win, 'touchmove', 'touchmoveEnd'),
-    touchmove: connectContinuousEvent(win, 'touchmove', 'touchmove'),
-    touchstart: connectDiscreteEvent(doc, 'touchstart'),
-    touchend: connectDiscreteEvent(doc, 'touchend')
+    touchmoveStart: connectContinuousEvent(body, 'touchmove', 'touchmoveStart'),
+    touchmoveEnd: connectContinuousEvent(body, 'touchmove', 'touchmoveEnd'),
+    touchmove: connectContinuousEvent(body, 'touchmove', 'touchmove'),
+    touchstart: connectDiscreteEvent(body, 'touchstart'),
+    touchend: connectDiscreteEvent(body, 'touchend')
 };

dist/subscribe.js

@@ -47,6 +47,7 @@ /**
     globalVars.enableResizeInfo = globalVars.enableResizeInfo || options.enableResizeInfo || false;
+    globalVars.enableTouchInfo = globalVars.enableTouchInfo || options.enableTouchInfo || false;
 
-    return mainEventConnectors[type](throttleRate, cb, options.context);
+    return mainEventConnectors[type](throttleRate, cb, options);
 }
 
 module.exports = subscribe;

package.json

 {
   "name": "subscribe-ui-event",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "A single, throttle built-in solution to subscribe to browser UI Events.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -81,2 +81,10 @@ # subscribe-ui-event
         height: <Number> // The client height
+    },
+    // you need to pass options.enableTouchInfo = true to subscribe to get the following data
+    touch: {
+        axisIntention: <String>, // 'x', 'y', or ''.
+        startX: <Number>,
+        startY: <Number>,
+        deltaX: <Number>,
+        deltaY: <Number>
     }
@@ -98,2 +106,4 @@ }
 
+`options.enableTouchInfo = true` allows of getting touch information (see above).
+
 `eventType` could be one of the following:
@@ -100,0 +110,0 @@

No alert changes

Improved metrics

Total package byte prevSize

36162

increased by8.83%

Lines of code

777

increased by8.98%

Number of lines in readme file

135

increased by8%

No dependency changes