Merge pull request #1 from FriendsOfECMAScript/refactor/es6

Refactor/es6

Author: mktoast

.gitignore

@@ -5,8 +5,8 @@
 # For the full copyright and license information, please view the LICENSE
 # file that was distributed with this source code.
 
-/bower_components
 /coverage
 /dist
 /node_modules
 /npm-debug.log
+/demo

package.json

@@ -1,6 +1,6 @@
 {
   "name": "foes-scrollproxy",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "license": "MIT",
   "description": "",
   "keywords": [
@@ -28,6 +28,7 @@
     "prebuild": "rimraf dist",
     "build": "npm-run-all --parallel build:*",
     "build:main": "webpack --output-filename foes-scrollproxy.js",
+    "build:main.min": "webpack --output-filename foes-scrollproxy.min.js -p",
     "build:umd": "webpack --output-filename foes-scrollproxy.umd.js --env.libraryTarget umd",
     "build:umd.min": "webpack --output-filename foes-scrollproxy.umd.min.js --env.libraryTarget umd -p"
   },
@@ -51,15 +52,15 @@
     "babel-plugin-transform-array-from": "^1.0.0",
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-stage-2": "^6.13.0",
+    "gsap": "^1.19.0",
     "jest": "^15.1.1",
     "jsdom": "^9.3.0",
+    "lodash.debounce": "^4.0.8",
     "npm-run-all": "^3.1.0",
     "rimraf": "^2.5.4",
-    "webpack": "^2.1.0-beta.21"
+    "webpack": "^2.1.0-beta.26"
   },
   "peerDependencies": {
-    "gsap": "^1.19.0",
-    "lodash.throttle": "^4.1.0",
-    "jquery": "^2.2.0"
+    "gsap": "^1.19.0"
   }
 }

src/Core/ScrollProxy.js

@@ -1,88 +1,70 @@
 /*
- * @author Mikel Tuesta <[email protected]>
+ * This file is part of the FoesScrollProxy library.
+ *
+ * (c) Mikel Tuesta <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
  */
-'use strict';
 
-(function (window, GeometricHelpers, DomHelpers, ScrollProxyListener, _) {
+import DOMHelpers from '../Helpers/DOMHelpers';
+import ScrollProxyObserver from './ScrollProxyObserver';
+import debounce from 'lodash.debounce';
 
-  /**
-   * ParallaxController - Singleton
-   *
-   * @constructor
-   */
-  var ScrollProxy = (function () {
-    var instance;
+class ScrollProxy {
 
-    function ScrollProxy() {
-      var latestKnownScrollPosition = DomHelpers.getScrollPosition(),
-        viewportSize = DomHelpers.getViewportSize(),
-        listeners = [],
-        rendering = false;
+  constructor() {
+    this.observers = new Map();
+    this.isUpdatingDOM = false;
 
-      var notifyListeners = function () {
-        var args = Array.prototype.slice.call(arguments),
-          methodName = args.splice(0, 1);
-        for (var i = 0; i < listeners.length; i++) {
-          listeners[i][methodName].apply(listeners[i], args);
-        }
-      };
-      var requestFrame = function () {
-        if (!rendering) {
-          window.requestAnimationFrame(render);
-        }
-        rendering = true;
-      };
-      var render = function () {
-        notifyListeners('render');
-        rendering = false;
-      };
-      var onScroll = function () {
-        latestKnownScrollPosition = DomHelpers.getScrollPosition();
-        notifyListeners('onScroll', latestKnownScrollPosition);
-        requestFrame();
-      };
-      var onResize = function () {
-        viewportSize = DomHelpers.getViewportSize();
-        notifyListeners('onResize', viewportSize);
-      };
-      var bindListeners = function () {
-        window.addEventListener('scroll', onScroll);
-        window.addEventListener('resize', _.debounce(onResize, 200));
-      };
-      var addListener = function (listener) {
-        if (!(listener instanceof ScrollProxyListener)) {
-          throw 'Provided listener must be an instance of ScrollProxyListener.';
-        }
-        listeners.push(listener);
-      };
-      var removeListener = function (listener) {
-        var listenerIndex = listeners.indexOf(listener);
-        if (listenerIndex !== -1) {
-          listeners.splice(listenerIndex, 1);
-        }
-      };
-      var init = function () {
-        bindListeners();
-      };
-      init();
+    this.onScroll = () => {
+      const scrollPosition = DOMHelpers.getScrollPosition();
+      this.notifyObservers('onScroll', scrollPosition);
+      this.requestDOMUpdate();
+    };
 
-      return {
-        addListener: addListener,
-        removeListener: removeListener
-      }
-    }
+    this.onResize = () => {
+      const viewportSize = DOMHelpers.getViewportSize();
+      this.notifyObservers('onResize', viewportSize);
+    };
 
-    return {
-      getInstance: function () {
-        if (!instance) {
-          instance = new ScrollProxy();
-        }
-        return instance;
+    this.requestDOMUpdate = () => {
+      if (!this.isUpdatingDOM) {
+        window.requestAnimationFrame(this.updateDOM);
       }
+      this.isUpdatingDOM = true;
     };
-  })();
 
-  // Expose ScrollProxy
-  window.ScrollProxy = ScrollProxy;
+    this.updateDOM = () => {
+      this.notifyObservers('updateDOM');
+      this.isUpdatingDOM = false;
+    };
+
+    this.notifyObservers = (methodName, ...methodParams) => {
+      this.observers.forEach((observer, uuid) => {
+        observer[methodName](...methodParams);
+      });
+    };
+
+    window.addEventListener('scroll', this.onScroll);
+    window.addEventListener('resize', debounce(this.onResize, 200));
+  }
+
+  addObserver(observer) {
+    if (!(observer instanceof ScrollProxyObserver)) {
+      throw new TypeError('Provided object must inherit from ScrollProxyObserver abstract class.');
+    }
+
+    const uuid = Symbol();
+    this.observers.set(uuid, observer);
+    return uuid;
+  };
+
+  removeObserver(uuid) {
+    return this.observers.delete(uuid);
+  };
+}
+
+const instance = new ScrollProxy();
 
-})(window, window.GeometricHelpers, window.DomHelpers, window.ScrollProxyListener, _);
+export default instance;

src/Core/ScrollProxyListener.js

@@ -0,0 +1,72 @@
+/*
+ * This file is part of the FoesScrollProxy library.
+ *
+ * (c) Mikel Tuesta <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import DOMHelpers from '../Helpers/DOMHelpers';
+import ScrollProxy from './ScrollProxy';
+
+class ScrollProxyObserver {
+
+  static STATE = {
+    IDLE: 'IDLE',
+    RUNNING: 'RUNNING'
+  };
+
+  constructor() {
+    // Abstract class
+    if (this.constructor === ScrollProxyObserver) {
+      throw new TypeError("Abstract class ScrollProxyObserver cannot be instantiated directly.");
+    }
+
+    this.state = ScrollProxyObserver.STATE.RUNNING;
+    this.scrollPosition = DOMHelpers.getScrollPosition();
+    this.viewportSize = DOMHelpers.getViewportSize();
+    // Add self as observer
+    this.uuid = ScrollProxy.addObserver(this);
+
+    this.setScrollPosition = (scrollPosition) => {
+      this.scrollPosition = scrollPosition;
+    };
+  }
+
+  setState(state) {
+    this.state = state;
+    this.onStateChanged(this.state);
+  }
+
+  onStateChanged(state) {
+  }
+
+  isRunning() {
+    return this.state !== ScrollProxyObserver.STATE.IDLE;
+  }
+
+  onScroll(scrollPosition) {
+    if (!this.isRunning()) {
+      return;
+    }
+
+    this.setScrollPosition(scrollPosition);
+  }
+
+  updateDOM() {
+    throw new TypeError("In order to extend ScrollProxyObserver class you must implement updateDOM method.");
+  }
+
+  onResize(viewportSize) {
+    this.viewportSize = viewportSize;
+  }
+
+  destroy() {
+    // Remove self from observers
+    ScrollProxy.removeObserver(this.uuid);
+  }
+
+}
+
+export default ScrollProxyObserver;