From dc60add7f16a025e4a52e214345941d22b8b8ea4 Mon Sep 17 00:00:00 2001 From: Lauren Tan Date: Mon, 27 Apr 2015 21:18:56 -0400 Subject: [PATCH 1/5] Fixed incorrect default value for buildOptions --- addon/mixins/in-viewport.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addon/mixins/in-viewport.js b/addon/mixins/in-viewport.js index f97f5472..bcd1fd7e 100644 --- a/addon/mixins/in-viewport.js +++ b/addon/mixins/in-viewport.js @@ -50,7 +50,7 @@ export default Ember.Mixin.create({ setProperties(this, options); }), - _buildOptions(defaultOptions = []) { + _buildOptions(defaultOptions = {}) { if (this.container) { return merge(defaultOptions, this.container.lookup('config:in-viewport')); } From 1cdb48a33aee95a7343accca9f3d05455850ad73 Mon Sep 17 00:00:00 2001 From: Lauren Tan Date: Mon, 27 Apr 2015 21:34:05 -0400 Subject: [PATCH 2/5] Install ember-suave to enforce DockYard styleguide. Updates to pass rules. --- addon/mixins/in-viewport.js | 32 ++++++++++++------- addon/utils/can-use-raf.js | 11 ++++--- addon/utils/check-scroll-direction.js | 28 ++++++++++++---- addon/utils/is-in-viewport.js | 16 +++++----- package.json | 3 +- tests/acceptance/integration-test.js | 2 +- tests/dummy/app/app.js | 4 +-- tests/dummy/app/components/foo-bar.js | 6 ++-- tests/dummy/app/router.js | 2 +- tests/helpers/resolver.js | 10 ++++-- tests/helpers/start-app.js | 4 +-- .../unit/initializers/viewport-config-test.js | 2 +- tests/unit/mixins/in-viewport-test.js | 4 +-- .../unit/utils/check-scroll-direction-test.js | 18 +++++------ tests/unit/utils/is-in-viewport-test.js | 32 +++++++++---------- 15 files changed, 102 insertions(+), 72 deletions(-) diff --git a/addon/mixins/in-viewport.js b/addon/mixins/in-viewport.js index bcd1fd7e..7a926bef 100644 --- a/addon/mixins/in-viewport.js +++ b/addon/mixins/in-viewport.js @@ -4,9 +4,10 @@ import canUseRAF from 'ember-in-viewport/utils/can-use-raf'; import isInViewport from 'ember-in-viewport/utils/is-in-viewport'; import checkScrollDirection from 'ember-in-viewport/utils/check-scroll-direction'; +const get = Ember.get; +const set = Ember.set; + const { - get: get, - set: set, setProperties, computed, merge, @@ -42,9 +43,9 @@ export default Ember.Mixin.create({ _setInitialState: on('init', function() { const options = merge({ - viewportUseRAF : canUseRAF(), - viewportEntered : false, - viewportListeners : defaultListeners + viewportUseRAF: canUseRAF(), + viewportEntered: false, + viewportListeners: defaultListeners }, this._buildOptions()); setProperties(this, options); @@ -57,7 +58,9 @@ export default Ember.Mixin.create({ }, _setupElement: on('didInsertElement', function() { - if (!canUseDOM) { return; } + if (!canUseDOM) { + return; + } this._setInitialViewport(window); this._addObserverIfNotSpying(); @@ -88,7 +91,9 @@ export default Ember.Mixin.create({ const element = get(this, 'element'); - if (!element) { return; } + if (!element) { + return; + } const elementId = get(this, 'elementId'); const viewportUseRAF = get(this, 'viewportUseRAF'); @@ -118,8 +123,8 @@ export default Ember.Mixin.create({ const lastDirectionForEl = lastDirection[elementId]; const lastPositionForEl = lastPosition[elementId]; const newPosition = { - top : $contextEl.scrollTop(), - left : $contextEl.scrollLeft() + top: $contextEl.scrollTop(), + left: $contextEl.scrollLeft() }; const scrollDirection = checkScrollDirection(lastPositionForEl, newPosition, sensitivity); @@ -139,8 +144,13 @@ export default Ember.Mixin.create({ const didLeave = viewportEntered && !hasEnteredViewport; let triggeredEventName = ''; - if (didEnter) { triggeredEventName = 'didEnterViewport'; } - if (didLeave) { triggeredEventName = 'didExitViewport'; } + if (didEnter) { + triggeredEventName = 'didEnterViewport'; + } + + if (didLeave) { + triggeredEventName = 'didExitViewport'; + } this.trigger(triggeredEventName); diff --git a/addon/utils/can-use-raf.js b/addon/utils/can-use-raf.js index b77efa3b..769ed98e 100644 --- a/addon/utils/can-use-raf.js +++ b/addon/utils/can-use-raf.js @@ -13,9 +13,9 @@ function checkRAF(window, rAF, cAF) { let vendors = [ 'ms', 'moz', 'webkit', 'o' ]; for (x = 0; x < vendors.length && !window[rAF]; ++x) { - window[rAF] = window[vendors[x] + 'RequestAnimationFrame']; - window[cAF] = window[vendors[x] + 'CancelAnimationFrame'] || - window[vendors[x] + 'CancelRequestAnimationFrame']; + window[rAF] = window[`${vendors[x]}RequestAnimationFrame`]; + window[cAF] = window[`${vendors[x]}CancelAnimationFrame`] || + window[`${vendors[x]}CancelRequestAnimationFrame`]; } if (window[rAF] && window[cAF]) { @@ -25,9 +25,10 @@ function checkRAF(window, rAF, cAF) { } } - export default function canUseRAF() { - if (!canUseDOM) { return false; } + if (!canUseDOM) { + return false; + } return checkRAF(window, 'requestAnimationFrame', 'cancelAnimationFrame'); } diff --git a/addon/utils/check-scroll-direction.js b/addon/utils/check-scroll-direction.js index 8252a4d5..0e529141 100644 --- a/addon/utils/check-scroll-direction.js +++ b/addon/utils/check-scroll-direction.js @@ -3,7 +3,9 @@ import Ember from 'ember'; const { floor } = Math; export default function checkScrollDirection(lastPosition = null, newPosition = {}, sensitivity = 1) { - if (!lastPosition) { return 'none'; } + if (!lastPosition) { + return 'none'; + } Ember.assert('sensitivity cannot be 0', sensitivity); @@ -11,12 +13,24 @@ export default function checkScrollDirection(lastPosition = null, newPosition = const { top: lastTop, left: lastLeft } = lastPosition; const delta = { - top : floor((top - lastTop) / sensitivity) * sensitivity, - left : floor((left - lastLeft) / sensitivity) * sensitivity + top: floor((top - lastTop) / sensitivity) * sensitivity, + left: floor((left - lastLeft) / sensitivity) * sensitivity }; - if (delta.top > 0) { return 'down'; } - if (delta.top < 0) { return 'up'; } - if (delta.left > 0) { return 'right'; } - if (delta.left < 0) { return 'left'; } + if (delta.top > 0) { + return 'down'; + } + + if (delta.top < 0) { + return 'up'; + } + + if (delta.left > 0) { + return 'right'; + } + + if (delta.left < 0) { + return 'left'; + } + } diff --git a/addon/utils/is-in-viewport.js b/addon/utils/is-in-viewport.js index bfa1e628..7c8fbef5 100644 --- a/addon/utils/is-in-viewport.js +++ b/addon/utils/is-in-viewport.js @@ -3,20 +3,20 @@ import Ember from 'ember'; const { merge } = Ember; const defaultTolerance = { - top : 0, - left : 0, - bottom : 0, - right : 0 + top: 0, + left: 0, + bottom: 0, + right: 0 }; export default function isInViewport(boundingClientRect = {}, height = 0, width = 0, tolerance = defaultTolerance) { const { top, left, bottom, right } = boundingClientRect; const tolerances = merge(defaultTolerance, tolerance); const { - top : topTolerance, - left : leftTolerance, - bottom : bottomTolerance, - right : rightTolerance + top: topTolerance, + left: leftTolerance, + bottom: bottomTolerance, + right: rightTolerance } = tolerances; return ( diff --git a/package.json b/package.json index e46d0531..dc42e3f7 100644 --- a/package.json +++ b/package.json @@ -28,8 +28,9 @@ "ember-cli-inject-live-reload": "^1.3.0", "ember-cli-qunit": "0.3.10", "ember-cli-uglify": "1.0.1", - "ember-export-application-global": "^1.0.2", "ember-disable-prototype-extensions": "^1.0.0", + "ember-export-application-global": "^1.0.2", + "ember-suave": "0.1.7", "ember-try": "0.0.4" }, "keywords": [ diff --git a/tests/acceptance/integration-test.js b/tests/acceptance/integration-test.js index e620e562..e2cd5889 100644 --- a/tests/acceptance/integration-test.js +++ b/tests/acceptance/integration-test.js @@ -7,7 +7,7 @@ import { import startApp from '../helpers/start-app'; import { lookupComponent } from '../helpers/utils/lookup'; -var application; +let application; const { run } = Ember; module('Acceptance: Integration', { diff --git a/tests/dummy/app/app.js b/tests/dummy/app/app.js index 8d66b958..8b234d6d 100644 --- a/tests/dummy/app/app.js +++ b/tests/dummy/app/app.js @@ -3,14 +3,14 @@ import Resolver from 'ember/resolver'; import loadInitializers from 'ember/load-initializers'; import config from './config/environment'; -var App; +let App; Ember.MODEL_FACTORY_INJECTIONS = true; App = Ember.Application.extend({ modulePrefix: config.modulePrefix, podModulePrefix: config.podModulePrefix, - Resolver: Resolver + Resolver }); loadInitializers(App, config.modulePrefix); diff --git a/tests/dummy/app/components/foo-bar.js b/tests/dummy/app/components/foo-bar.js index c3878a08..fbfe5dce 100644 --- a/tests/dummy/app/components/foo-bar.js +++ b/tests/dummy/app/components/foo-bar.js @@ -2,10 +2,10 @@ import Ember from 'ember'; import InViewportMixin from 'ember-in-viewport'; export default Ember.Component.extend(InViewportMixin, { - classNames : [ 'fooBar' ], - classNameBindings : [ 'viewportEntered:active:inactive' ], + classNames: [ 'fooBar' ], + classNameBindings: [ 'viewportEntered:active:inactive' ], viewportOptionsOverride: Ember.on('didInsertElement', function() { Ember.set(this, 'viewportUseRAF', false); - }), + }) }); diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index dce59942..800b5bd9 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -1,7 +1,7 @@ import Ember from 'ember'; import config from './config/environment'; -var Router = Ember.Router.extend({ +const Router = Ember.Router.extend({ location: config.locationType }); diff --git a/tests/helpers/resolver.js b/tests/helpers/resolver.js index 28f4ece4..f04a2db9 100644 --- a/tests/helpers/resolver.js +++ b/tests/helpers/resolver.js @@ -1,11 +1,15 @@ import Resolver from 'ember/resolver'; import config from '../../config/environment'; -var resolver = Resolver.create(); +const resolver = Resolver.create(); +const { + modulePrefix, + podModulePrefix +} = config; resolver.namespace = { - modulePrefix: config.modulePrefix, - podModulePrefix: config.podModulePrefix + modulePrefix, + podModulePrefix }; export default resolver; diff --git a/tests/helpers/start-app.js b/tests/helpers/start-app.js index 16cc7c39..39eed65d 100644 --- a/tests/helpers/start-app.js +++ b/tests/helpers/start-app.js @@ -4,9 +4,9 @@ import Router from '../../router'; import config from '../../config/environment'; export default function startApp(attrs) { - var application; + let application; - var attributes = Ember.merge({}, config.APP); + let attributes = Ember.merge({}, config.APP); attributes = Ember.merge(attributes, attrs); // use defaults, but you can override; Ember.run(function() { diff --git a/tests/unit/initializers/viewport-config-test.js b/tests/unit/initializers/viewport-config-test.js index 551da27a..8d3f5596 100644 --- a/tests/unit/initializers/viewport-config-test.js +++ b/tests/unit/initializers/viewport-config-test.js @@ -7,7 +7,7 @@ const { keys } = Ember; let container, application; module('ViewportConfigInitializer', { - beforeEach: function() { + beforeEach() { Ember.run(function() { application = Ember.Application.create(); container = application.__container__; diff --git a/tests/unit/mixins/in-viewport-test.js b/tests/unit/mixins/in-viewport-test.js index 93a790ad..1097da16 100644 --- a/tests/unit/mixins/in-viewport-test.js +++ b/tests/unit/mixins/in-viewport-test.js @@ -6,7 +6,7 @@ module('InViewportMixin'); // Replace this with your real tests. test('it works', function(assert) { - var InViewportObject = Ember.Object.extend(InViewportMixin); - var subject = InViewportObject.create(); + const InViewportObject = Ember.Object.extend(InViewportMixin); + const subject = InViewportObject.create(); assert.ok(subject); }); diff --git a/tests/unit/utils/check-scroll-direction-test.js b/tests/unit/utils/check-scroll-direction-test.js index 6745c21d..e6be2bd1 100644 --- a/tests/unit/utils/check-scroll-direction-test.js +++ b/tests/unit/utils/check-scroll-direction-test.js @@ -9,18 +9,18 @@ const { forEach } = Ember.EnumerableUtils; module('checkScrollDirection', { beforeEach() { lastPosition = { - top : 300, - left : 150 + top: 300, + left: 150 }; } }); test('returns the right direction', function(assert) { const movements = [ - { direction: 'down', position: { top: 400, left: 150 }}, - { direction: 'up', position: { top: 200, left: 150 }}, - { direction: 'right', position: { top: 300, left: 250 }}, - { direction: 'left', position: { top: 300, left: 100 }} + { direction: 'down', position: { top: 400, left: 150 } }, + { direction: 'up', position: { top: 200, left: 150 } }, + { direction: 'right', position: { top: 300, left: 250 } }, + { direction: 'left', position: { top: 300, left: 100 } } ]; assert.expect(movements.length); @@ -35,9 +35,9 @@ test('returns the right direction', function(assert) { test('adjusts for sensitivity', function(assert) { const movements = [ - { direction: undefined, position: { top: 399, left: 150 }}, - { direction: 'down', position: { top: 400, left: 150 }}, - { direction: 'down', position: { top: 500, left: 250 }} + { direction: undefined, position: { top: 399, left: 150 } }, + { direction: 'down', position: { top: 400, left: 150 } }, + { direction: 'down', position: { top: 500, left: 250 } } ]; assert.expect(movements.length); diff --git a/tests/unit/utils/is-in-viewport-test.js b/tests/unit/utils/is-in-viewport-test.js index 4b281469..d5e650da 100644 --- a/tests/unit/utils/is-in-viewport-test.js +++ b/tests/unit/utils/is-in-viewport-test.js @@ -6,34 +6,34 @@ let fakeRectNotInViewport, fakeRectInViewport, fakeWindow, fakeNoTolerance, fake module('isInViewport', { beforeEach() { fakeRectNotInViewport = { - top : 450, - left : 150, - bottom : 550, - right : 1130 + top: 450, + left: 150, + bottom: 550, + right: 1130 }; fakeRectInViewport = { - top : 300, - left : 150, - bottom : 400, - right : 1130 + top: 300, + left: 150, + bottom: 400, + right: 1130 }; fakeWindow = { - innerHeight : 400, - innerWidth : 1280 + innerHeight: 400, + innerWidth: 1280 }; fakeNoTolerance = { - top : 0, - left : 0, - bottom : 0, - right : 0 + top: 0, + left: 0, + bottom: 0, + right: 0 }; fakeTolerance = { - top : 200, - bottom : 200 + top: 200, + bottom: 200 }; } }); From dec68a620269f66c96191c8054816321b9de24ec Mon Sep 17 00:00:00 2001 From: Lauren Tan Date: Wed, 29 Apr 2015 09:38:45 -0400 Subject: [PATCH 3/5] Set `viewportEntered` before triggering the `didEnterViewport` hook. This prevents an issue where `viewportEntered` would be `false` when `didEnterViewport` fires, and vice versa. --- addon/mixins/in-viewport.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/addon/mixins/in-viewport.js b/addon/mixins/in-viewport.js index 7a926bef..3f679892 100644 --- a/addon/mixins/in-viewport.js +++ b/addon/mixins/in-viewport.js @@ -152,9 +152,9 @@ export default Ember.Mixin.create({ triggeredEventName = 'didExitViewport'; } - this.trigger(triggeredEventName); - set(this, 'viewportEntered', hasEnteredViewport); + + this.trigger(triggeredEventName); }, _unbindIfEntered() { From 53f607c825595995d1acc10cde7a6872314f7bae Mon Sep 17 00:00:00 2001 From: Lauren Tan Date: Wed, 29 Apr 2015 13:20:00 -0400 Subject: [PATCH 4/5] Set default value for `viewportConfig`. Prevents an error when `viewportConfig` is not defined in the app's config. --- app/initializers/viewport-config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/initializers/viewport-config.js b/app/initializers/viewport-config.js index aebe2be7..d31dd525 100644 --- a/app/initializers/viewport-config.js +++ b/app/initializers/viewport-config.js @@ -1,7 +1,7 @@ import config from '../config/environment'; export function initialize(_container, application) { - const { viewportConfig } = config; + const { viewportConfig = {} } = config; application.register('config:in-viewport', viewportConfig, { instantiate: false }); } From 59cbc37d285db2cba0bd17c081a15ce659242405 Mon Sep 17 00:00:00 2001 From: Lauren Tan Date: Wed, 29 Apr 2015 13:37:47 -0400 Subject: [PATCH 5/5] Version bump to 1.2.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index dc42e3f7..24e407df 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ember-in-viewport", - "version": "1.2.0", + "version": "1.2.1", "description": "Detect if an Ember View or Component is in the viewport @ 60FPS", "directories": { "doc": "doc",