subscribe-ui-event - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

dist/AugmentedEvent.js

@@ -15,4 +15,8 @@ /**
     this.type = option.type || '';
+    this.scroll = {
+        delta: 0,
+        top: 0
+    };
 }
 
 module.exports = ArgmentedEvent;

dist/eventHandlers/index.js

@@ -68,3 +68,9 @@ /**
 function generateEdgeEventHandler(target, eventType, eventStart) {
-    return function(eeType, throttleRate, throttle) {
+    return function(eeType, options) {
+        if (ee.listeners(eeType, true)) {
+            return;
+        }
+
+        var throttleRate = options.throttleRate;
+        var throttle = options.throttleFunc;
         var augmentedEvent = new AugmentedEvent({type: eventType + (eventStart ? 'Start' : 'End')});
@@ -115,6 +121,22 @@ var timer;
 function generateContinuousEventHandler(target, eventType, noThrottle) {
-    return function(eeType, throttleRate, throttle) {
+    var enableScrollTop = false;
+    return function(eeType, options) {
+        if (ee.listeners(eeType, true)) {
+            return;
+        }
+
+        var throttleRate = options.throttleRate;
+        var throttle = options.throttleFunc;
         var augmentedEvent = new AugmentedEvent({type: eventType});
+        enableScrollTop = enableScrollTop || options.enableScrollTop;
+
         function eventHandler(e) {
-            ee.emit(eeType, e, augmentedEvent);
+            var ae = augmentedEvent;
+            var top;
+            if (enableScrollTop && ae.type === 'scroll') {
+                top = document.documentElement.scrollTop + document.body.scrollTop;
+                ae.scroll.delta = top - ae.scroll.top;
+                ae.scroll.top = top;
+            }
+            ee.emit(eeType, e, ae);
         }
@@ -127,3 +149,9 @@
 
-function viewportchange(eeType, throttleRate, throttle) {
+function viewportchange(eeType, options) {
+    if (ee.listeners(eeType, true)) {
+        return;
+    }
+
+    var throttleRate = options.throttleRate;
+    var throttle = options.throttleFunc;
     var augmentedEvent = new AugmentedEvent({type: 'viewportchange'});
@@ -130,0 +158,0 @@ function eventHandler(e) {

dist/subscribe.js

@@ -36,2 +36,3 @@ /**
     var eeType; // emitEmitterType =  eventType + ':' + throttle
+    var enableScrollTop = options.enableScrollTop || false;
     var sub;
@@ -57,6 +58,9 @@ var throttleFunc;
     // wire UI event to throttled event, for example, wire "window.scroll" to "scroll:50"
-    if (!ee.listeners(eeType, true)) {
-        // add event listeners to UI event for the same throttled event
-        eventHandlers[eventType](eeType, throttleRate, throttleFunc);
-    }
+    // add event listeners to UI event for the same throttled event
+    eventHandlers[eventType](eeType, {
+        enableScrollTop: enableScrollTop,
+        throttleFunc: throttleFunc,
+        throttleRate: throttleRate
+    });
+
     // wire to throttled event
@@ -63,0 +67,0 @@ ee.on(eeType, cb, context);

package.json

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

README.md

@@ -8,10 +8,14 @@ # subscribe-ui-event
 
-`subscribe-ui-event` provides an cross-browser and performant way to subscribe to browser UI Events.
+`subscribe-ui-event` provides an cross-browser and performant way to subscribe to browser UI Events and some higher level events.
 
-Instead of calling `window.addEvenListener('scroll', eventHandler);`, you can call `subscribe('scroll', eventHandler)` and you can get lots of benifits:
+Instead of calling `window.addEvenListener('scroll', eventHandler);`, you can call `subscribe('scroll', eventHandler)`, and it will help you hook `eventHandler` to `window.scroll` only once for multiple subscriptions.
 
+The benefit is some global variables, such like `document.body.scrollTop`, can be retrieved only once for all subscriptions, which is better for performance. Throttling for all subscriptions is another benefit, which also can increase the performance.
+
+**The list of benefits:**
+
 1. Do throttling by default.
 2. Provide `requestAnimationFrame` throttle for the need of high performance.
 3. Attach to UI event only once for multiple subscriptions, and broadcast via [eventemitter3](https://github.com/primus/EventEmitter3),
-4. (In the near future) Provide single access to UI variables (such like `scrollTop`) to avoid multiple reflows.
+4. Provide single access to UI variables (such like `scrollTop`) to avoid multiple reflows.
 
@@ -51,2 +55,19 @@ ## Install
 
+**Addtional Payload**
+
+The format of the payload is:
+```js
+{
+    type: <String>, // could be 'scroll', 'resize' ...
+    // you need to pass options.enableScrollTop = true to subscribe to get the following data
+    scroll: {
+        top: <Number>, // The scroll position, i.g., document.body.scrollTop
+        prevTop: <Number>, // The previous scroll position
+        delta: <Number> // The delta of scroll position, it is helpful for scroll direction
+    }
+}
+```
+
+**Options**
+
 `options.throttleRate` allows of changing the throttle rate, and the default value is 50 (ms). Set 0 for no throttle. **On IE8, there will be no throttle, because throttling will use setTimeout or rAF to achieve, and the event object passed into event handler will be overwritten.**
@@ -56,4 +77,6 @@
 
-`options.useRAF = true` allows of using `requestAnimationFrame` instead of `setTimeout`. If `true`, the default value of throttle rate will be 15 (ms).
+`options.useRAF = true` allows of using `requestAnimationFrame` instead of `setTimeout`.
 
+`options.enableScrollTop = true` allows of getting `scrollTop`.
+
 `eventType` could be one of the following:
@@ -60,0 +83,0 @@

No alert changes

Improved metrics

Number of lines in readme file

102

increased by29.11%

Worsened metrics

Total package byte prevSize

29950

decreased by-24.89%

Number of package files

14

decreased by-17.65%

Lines of code

644

decreased by-27.64%

No dependency changes