Merge pull request #24 from dockyard/feature/refactor-triggers

Deprecated `didScroll{Up,Down,Left,Right}` in favour of `didScroll(...)`
DockYard · Jun 1, 2015 · 7ab2c4f · 7ab2c4f
2 parents bc588f5 + d1ef674
commit 7ab2c4f
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -40,25 +40,13 @@ export default Ember.Component.extend(InViewportMixin, {
 });
 ```
 
-##### `didScroll{Up,Down,Left,Right}`
-The appropriate scroll hook fires when an element enters the viewport. For example, if you scrolled down in order to move the element in the viewport, the `didScrollDown` hook would fire. You can then handle it like another hook as in the above example. Optionally, you can also receive the direction as a string by passing a single argument to the hook.
+##### `didScroll(up,down,left,right)`
+The `didScroll` hook fires when an element enters the viewport. For example, if you scrolled down in order to move the element in the viewport, the `didScroll` hook would fire and also receieve the direction as a string. You can then handle it like another hook as in the above example. 
 
 ```js
 export default Ember.Component.extend(InViewportMixin, {
-  didScrollUp(direction) {
-    console.log(direction); // 'up'
-  },
-
-  didScrollDown(direction) {
-    console.log(direction); // 'down'
-  },
-
-  didScrollLeft(direction) {
-    console.log(direction); // 'left'
-  },
-
-  didScrollRight(direction) {
-    console.log(direction); // 'right'
+  didScroll(direction) {
+    console.log(direction); // 'up' || 'down' || 'left' || 'right'
   }
 });
 ```

diff --git a/addon/mixins/in-viewport.js b/addon/mixins/in-viewport.js
@@ -9,9 +9,11 @@ const set = Ember.set;
 
 const {
   setProperties,
+  deprecate,
   computed,
   merge,
   typeOf,
+  assert,
   run,
   on,
   $
@@ -24,17 +26,17 @@ const {
   next
 } = run;
 
-const { not }      = computed;
-const { forEach }  = Ember.EnumerableUtils;
+const { not } = computed;
+const { forEach } = Ember.EnumerableUtils;
 const { classify } = Ember.String;
 
 const defaultListeners = [
-  { context: window,   event: 'scroll.scrollable' },
-  { context: window,   event: 'resize.resizable' },
+  { context: window, event: 'scroll.scrollable' },
+  { context: window, event: 'resize.resizable' },
   { context: document, event: 'touchmove.scrollable' }
 ];
 
-const rAFIDS        = {};
+const rAFIDS = {};
 const lastDirection = {};
 const lastPosition  = {};
 
@@ -62,6 +64,7 @@ export default Ember.Mixin.create({
       return;
     }
 
+    this._deprecateOldTriggers();
     this._setInitialViewport(window);
     this._addObserverIfNotSpying();
     this._bindScrollDirectionListener(window, get(this, 'viewportScrollSensitivity'));
@@ -87,20 +90,20 @@ export default Ember.Mixin.create({
   },
 
   _setViewportEntered(context = null) {
-    Ember.assert('You must pass a valid context to _setViewportEntered', context);
+    assert('You must pass a valid context to _setViewportEntered', context);
 
     const element = get(this, 'element');
 
     if (!element) {
       return;
     }
 
-    const elementId          = get(this, 'elementId');
-    const viewportUseRAF     = get(this, 'viewportUseRAF');
-    const viewportTolerance  = get(this, 'viewportTolerance');
-    const $contextEl         = $(context);
-    const height             = $contextEl.height();
-    const width              = $contextEl.width();
+    const elementId = get(this, 'elementId');
+    const viewportUseRAF = get(this, 'viewportUseRAF');
+    const viewportTolerance = get(this, 'viewportTolerance');
+    const $contextEl = $(context);
+    const height = $contextEl.height();
+    const width = $contextEl.width();
     const boundingClientRect = element.getBoundingClientRect();
 
     this._triggerDidAccessViewport(
@@ -115,8 +118,8 @@ export default Ember.Mixin.create({
   },
 
   _triggerDidScrollDirection($contextEl = null, sensitivity = 1) {
-    Ember.assert('You must pass a valid context element to _triggerDidScrollDirection', $contextEl);
-    Ember.assert('sensitivity cannot be 0', sensitivity);
+    assert('You must pass a valid context element to _triggerDidScrollDirection', $contextEl);
+    assert('sensitivity cannot be 0', sensitivity);
 
     const elementId          = get(this, 'elementId');
     const viewportEntered    = get(this, 'viewportEntered');
@@ -131,6 +134,7 @@ export default Ember.Mixin.create({
     const directionChanged = scrollDirection !== lastDirectionForEl;
 
     if (scrollDirection && directionChanged && viewportEntered) {
+      this.trigger('didScroll', scrollDirection);
       this.trigger(`didScroll${classify(scrollDirection)}`, scrollDirection);
       lastDirection[elementId] = scrollDirection;
     }
@@ -166,26 +170,26 @@ export default Ember.Mixin.create({
   },
 
   _setInitialViewport(context = null) {
-    Ember.assert('You must pass a valid context to _setInitialViewport', context);
+    assert('You must pass a valid context to _setInitialViewport', context);
 
     return scheduleOnce('afterRender', this, () => {
       this._setViewportEntered(context);
     });
   },
 
   _debouncedEventHandler(methodName, ...args) {
-    Ember.assert('You must pass a methodName to _debouncedEventHandler', methodName);
+    assert('You must pass a methodName to _debouncedEventHandler', methodName);
     const validMethodString = typeOf(methodName) === 'string';
-    Ember.assert('methodName must be a string', validMethodString);
+    assert('methodName must be a string', validMethodString);
 
     debounce(this, () => {
       this[methodName](...args);
     }, get(this, 'viewportRefreshRate'));
   },
 
   _bindScrollDirectionListener(context = null, sensitivity = 1) {
-    Ember.assert('You must pass a valid context to _bindScrollDirectionListener', context);
-    Ember.assert('sensitivity cannot be 0', sensitivity);
+    assert('You must pass a valid context to _bindScrollDirectionListener', context);
+    assert('sensitivity cannot be 0', sensitivity);
 
     const $contextEl = $(context);
 
@@ -195,7 +199,7 @@ export default Ember.Mixin.create({
   },
 
   _unbindScrollDirectionListener(context = null) {
-    Ember.assert('You must pass a valid context to _bindScrollDirectionListener', context);
+    assert('You must pass a valid context to _bindScrollDirectionListener', context);
 
     const elementId = get(this, 'elementId');
 
@@ -205,10 +209,10 @@ export default Ember.Mixin.create({
   },
 
   _bindListeners(context = null, event = null) {
-    Ember.assert('You must pass a valid context to _bindListeners', context);
-    Ember.assert('You must pass a valid event to _bindListeners', event);
+    assert('You must pass a valid context to _bindListeners', context);
+    assert('You must pass a valid event to _bindListeners', event);
 
-    $(context).on(`${event}#${get(this, 'elementId')}`, () => {
+    $(context).on(`${event}.${get(this, 'elementId')}`, () => {
       this._debouncedEventHandler('_setViewportEntered', context);
     });
   },
@@ -226,9 +230,22 @@ export default Ember.Mixin.create({
 
     forEach(listeners, (listener) => {
       const { context, event } = listener;
-      $(context).off(`${event}#${elementId}`);
+      $(context).off(`${event}.${elementId}`);
     });
 
     this._unbindScrollDirectionListener(window);
+  },
+
+  _deprecateOldTriggers() {
+    const directions = [ 'Up', 'Down', 'Left', 'Right' ];
+
+    forEach(directions, (direction) => {
+      const triggerName = `didScroll${direction}`;
+      const isListening = this.has(triggerName);
+      deprecate(
+        `[ember-in-viewport] ${triggerName} is deprecated, please use \`didScroll(direction)\` instead.`,
+        isListening
+      );
+    });
   }
 });