Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Deprecated didScroll{Up,Down,Left,Right} in favour of didScroll(...) #24

Merged
merged 1 commit into from
Jun 1, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 4 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
});
```
Expand Down
65 changes: 41 additions & 24 deletions addon/mixins/in-viewport.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@ const set = Ember.set;

const {
setProperties,
deprecate,
computed,
merge,
typeOf,
assert,
run,
on,
$
Expand All @@ -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 = {};

Expand Down Expand Up @@ -62,6 +64,7 @@ export default Ember.Mixin.create({
return;
}

this._deprecateOldTriggers();
this._setInitialViewport(window);
this._addObserverIfNotSpying();
this._bindScrollDirectionListener(window, get(this, 'viewportScrollSensitivity'));
Expand All @@ -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(
Expand All @@ -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');
Expand All @@ -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;
}
Expand Down Expand Up @@ -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);

Expand All @@ -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');

Expand All @@ -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);
});
},
Expand All @@ -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
);
});
}
});