use subscribe-ui-event

README.md

@@ -15,7 +15,7 @@ Typically, you have to manually add instrumentation code throughout your applica
 * **Pluggable** - A pluggable interface lets you integrate any data analytics library (i.e. Google Analytics, Segment, etc). Take a look at the [available plugins](#available-plugins).
 * **Performant** - Tracking data (`i13nModel`) can be a plain JS object or custom function. This means you can [dynamically change tracking data](./docs/guides/integrateWithComponents.md#dynamic-i13n-model) without causing unnecessary re-renders.
 * **Adaptable** - If you are using an isomorphic framework (e.g. [Fluxible](http://fluxible.io)) to build your app, you can easily [change the tracking implementation](./docs/guides/createPlugins.md) on the server and client side. For example, to track page views, you can fire an http request on server and xhr request on the client.
-* **Optimizable** - We provide an option to enable viewport checking for each `I13nNode`. Which means that data will only be beaconed when the node is in the viewport. This reduces the network usage for the user and provides better tracking details.
+* **Optimizable** - We provide an option to enable viewport (integrating [subscribe-ui-event](https://github.com/yahoo/subscribe-ui-event)) checking for each `I13nNode`. Which means that data will only be beaconed when the node is in the viewport. This reduces the network usage for the user and provides better tracking details.
 * **Auto Scan Links** - Support [auto scan links](./docs/api/createI13nNode.md) for the cases you are not able to replace the component you are using to get it tracked, e.g., if you have dependencies or you are using `dangerouslySetInnerHTML`. We scan the tags you define on client side, track them and build nodes for them in i13n tree.
 
 ## Install

package.json

@@ -14,11 +14,11 @@
   },
   "dependencies": {
     "debug": "^2.1.3",
-    "eventemitter3": "^1.0.0",
     "hoist-non-react-statics": "^1.0.0",
     "object-assign": "^4.0.0",
     "promise": "^7.0.1",
-    "setimmediate": "^1.0.2"
+    "setimmediate": "^1.0.2",
+    "subscribe-ui-event": "^0.2.2"
   },
   "devDependencies": {
     "coveralls": "^2.11.1",

src/mixins/I13nMixin.js

@@ -316,7 +316,7 @@ var I13nMixin = {
     _recursiveDetectViewport: function () {
         var self = this;
         // detect viewport from the root, and skip all children's detection if it's not in the viewport
-        self._detectViewport(function detectCallback () {
+        self._detectViewport(null, null, function detectCallback () {
             if (self._i13nNode.isInViewport()) {
                 self._i13nNode.getChildrenNodes().forEach(function detectChildrenViewport (childNode) {
                     var reactComponent = childNode.getReactComponent();

src/mixins/viewport/ViewportMixin.js

@@ -6,18 +6,11 @@
 'use strict';
 
 var React = require('react/addons');
-
-var MsgMixin = require('./MessageMixin');
-
-if (typeof window !== 'undefined') {
-    require('./scroll');
-    require('./visibility');
-}
+var subscribe = require('subscribe-ui-event').subscribe;
 
 /* Viewport mixin assumes you are on browser and already have the scroll lib */
 var Viewport = {
-    mixins: [MsgMixin],
-
+
     propTypes: {
         viewport: React.PropTypes.shape({
             margins: React.PropTypes.shape({
@@ -53,7 +46,7 @@ var Viewport = {
         callback && callback();
     },
 
-    _detectViewport: function (callback) {
+    _detectViewport: function (err, payload, callback) {
         var self = this;
         if (!self.isMounted()) {
             return;
@@ -75,11 +68,11 @@ var Viewport = {
     },
 
     subscribeViewportEvents: function () {
-        this.subscribe('scroll', this._detectViewport);
+        this.subscription = subscribe('scrollEnd', this._detectViewport);
     },
 
     unsubscribeViewportEvents: function () {
-        this.unsubscribe('scroll');
+        this.subscription.unsubscribe();
     },
 
     onEnterViewport: function (callback) {