diff --git a/addon/components/infinity-loader.js b/addon/components/infinity-loader.js index e32fa606..5929d5f9 100644 --- a/addon/components/infinity-loader.js +++ b/addon/components/infinity-loader.js @@ -14,43 +14,44 @@ export default Ember.Component.extend({ developmentMode: false, scrollable: null, - didInsertElement: function() { + didInsertElement() { + this._super(...arguments); this._setupScrollable(); this.set('guid', Ember.guidFor(this)); this._bindScroll(); this._checkIfInView(); }, - willDestroyElement: function() { + willDestroyElement() { + this._super(...arguments); this._unbindScroll(); }, - _bindScroll: function() { - var _this = this; - this.get("scrollable").on("scroll."+this.get('guid'), function() { - Ember.run.debounce(_this, _this._checkIfInView, _this.get('scrollDebounce')); + _bindScroll() { + this.get("scrollable").on(`scroll.${this.get('guid')}`, () => { + Ember.run.debounce(this, this._checkIfInView, this.get('scrollDebounce')); }); }, - _unbindScroll: function() { - this.get("scrollable").off("scroll."+this.get('guid')); + _unbindScroll() { + this.get("scrollable").off(`scroll.${this.get('guid')}`); }, - _checkIfInView: function() { + _checkIfInView() { var selfOffset = this.$().offset().top; var scrollable = this.get("scrollable"); var scrollableBottom = scrollable.height() + scrollable.scrollTop(); - var inView = selfOffset < scrollableBottom ? true : false; + var inView = selfOffset < scrollableBottom; if (inView && !this.get('developmentMode')) { this.sendAction('loadMoreAction'); } }, - _setupScrollable: function() { + _setupScrollable() { var scrollable = this.get('scrollable'); - if (Ember.$.type(scrollable) === 'string') { + if (Ember.typeOf(scrollable) === 'string') { var items = Ember.$(scrollable); if (items.length === 1) { this.set('scrollable', items.eq(0)); @@ -64,7 +65,9 @@ export default Ember.Component.extend({ } }, - loadedStatusDidChange: Ember.observer('infinityModel.reachedInfinity', 'destroyOnInfinity', function() { - if (this.get('infinityModel.reachedInfinity') && this.get('destroyOnInfinity')) { this.destroy(); } + loadedStatusDidChange: Ember.observer('infinityModel.reachedInfinity', 'destroyOnInfinity', function () { + if (this.get('infinityModel.reachedInfinity') && this.get('destroyOnInfinity')) { + this.destroy(); + } }) }); diff --git a/addon/mixins/route.js b/addon/mixins/route.js index bd16301a..bced854e 100644 --- a/addon/mixins/route.js +++ b/addon/mixins/route.js @@ -101,7 +101,7 @@ export default Ember.Mixin.create({ _canLoadMore: Ember.computed('_totalPages', '_currentPage', function() { var totalPages = this.get('_totalPages'); var currentPage = this.get('_currentPage'); - return totalPages && currentPage ? currentPage < totalPages : false; + return (totalPages && currentPage) ? (currentPage < totalPages) : false; }), /** @@ -113,8 +113,7 @@ export default Ember.Mixin.create({ @param {Object} options Optional, the perPage and startingPage to load from. @return {Ember.RSVP.Promise} */ - infinityModel: function(modelName, options) { - var _this = this; + infinityModel(modelName, options) { if (Ember.isEmpty(this.store) || Ember.isEmpty(this.store.find)){ throw new Ember.Error("Ember Data store is not available to infinityModel"); @@ -147,10 +146,14 @@ export default Ember.Mixin.create({ promise.then( infinityModel => { var totalPages = infinityModel.get(this.get('totalPagesParam')); - _this.set('_currentPage', startingPage); - _this.set('_totalPages', totalPages); - infinityModel.set('reachedInfinity', !_this.get('_canLoadMore')); - Ember.run.scheduleOnce('afterRender', _this, 'infinityModelUpdated', { lastPageLoaded: startingPage, totalPages: totalPages, newObjects: infinityModel }); + this.set('_currentPage', startingPage); + this.set('_totalPages', totalPages); + infinityModel.set('reachedInfinity', !this.get('_canLoadMore')); + Ember.run.scheduleOnce('afterRender', this, 'infinityModelUpdated', { + lastPageLoaded: startingPage, + totalPages: totalPages, + newObjects: infinityModel + }); }, () => { throw new Ember.Error("Could not fetch Infinity Model. Please check your serverside configuration."); @@ -166,8 +169,7 @@ export default Ember.Mixin.create({ @method infinityLoad @return {Boolean} */ - _infinityLoad: function() { - var _this = this; + _infinityLoad() { var nextPage = this.get('_currentPage') + 1; var perPage = this.get('_perPage'); var totalPages = this.get('_totalPages'); @@ -179,33 +181,40 @@ export default Ember.Mixin.create({ var params = Ember.merge({ page: nextPage, per_page: perPage }, this.get('_extraParams')); var promise = this.store.find(modelName, params); + promise.then( - function(infinityModel) { + infinityModel => { model.pushObjects(infinityModel.get('content')); - _this.set('_loadingMore', false); - _this.set('_currentPage', nextPage); - Ember.run.scheduleOnce('afterRender', _this, 'infinityModelUpdated', { lastPageLoaded: nextPage, totalPages: totalPages, newObjects: infinityModel }); - if (!_this.get('_canLoadMore')) { - _this.set(_this.get('_modelPath') + '.reachedInfinity', true); - Ember.run.scheduleOnce('afterRender', _this, 'infinityModelLoaded', { totalPages: totalPages }); + this.set('_loadingMore', false); + this.set('_currentPage', nextPage); + Ember.run.scheduleOnce('afterRender', this, 'infinityModelUpdated', { + lastPageLoaded: nextPage, + totalPages: totalPages, + newObjects: infinityModel + }); + if (!this.get('_canLoadMore')) { + this.set(this.get('_modelPath') + '.reachedInfinity', true); + Ember.run.scheduleOnce('afterRender', this, 'infinityModelLoaded', { + totalPages: totalPages + }); } }, - function() { - _this.set('_loadingMore', false); + () => { + this.set('_loadingMore', false); throw new Ember.Error("You must pass a Model Name to infinityModel"); } ); } else { if (!this.get('_canLoadMore')) { this.set(this.get('_modelPath') + '.reachedInfinity', true); - Ember.run.scheduleOnce('afterRender', _this, 'infinityModelLoaded', { totalPages: totalPages }); + Ember.run.scheduleOnce('afterRender', this, 'infinityModelLoaded', { totalPages: totalPages }); } } return false; }, actions: { - infinityLoad: function() { + infinityLoad() { this._infinityLoad(); } } diff --git a/tests/acceptance/infinity-route-with-meta-test.js b/tests/acceptance/infinity-route-with-meta-test.js index 1f9e0c52..e92076c5 100644 --- a/tests/acceptance/infinity-route-with-meta-test.js +++ b/tests/acceptance/infinity-route-with-meta-test.js @@ -15,14 +15,14 @@ var posts = [ ]; module('Acceptance: Infinity Route', { - setup: function() { + setup() { App = startApp(); server = new Pretender(function() { this.get('/posts', function(request) { var body, subset, perPage, startPage, offset; if (request.queryParams.category) { - subset = posts.filter(function(post) { + subset = posts.filter(post => { return post.category === request.queryParams.category; }); } else { @@ -41,16 +41,16 @@ module('Acceptance: Infinity Route', { }); }); }, - teardown: function() { + teardown() { Ember.run(App, 'destroy'); server.shutdown(); } }); -test('it works when meta is present in payload', function(assert) { +test('it works when meta is present in payload', assert => { visit('/'); - andThen(function() { + andThen(() => { var postsTitle = find('#posts-title'); var postList = find('ul'); var infinityLoader = find('.infinity-loader'); @@ -61,10 +61,10 @@ test('it works when meta is present in payload', function(assert) { }); }); -test('it works with parameters', function(assert) { +test('it works with parameters', assert => { visit('/category/a?per_page=2'); - andThen(function() { + andThen(() => { var postsTitle = find('#posts-title'); var postList = find('ul'); var infinityLoader = find('.infinity-loader'); diff --git a/tests/acceptance/infinity-route-without-meta-test.js b/tests/acceptance/infinity-route-without-meta-test.js index 2f7d2456..575ae455 100644 --- a/tests/acceptance/infinity-route-without-meta-test.js +++ b/tests/acceptance/infinity-route-without-meta-test.js @@ -6,28 +6,28 @@ import Pretender from 'pretender'; var App, server; module('Acceptance: Infinity Route', { - setup: function() { + setup() { App = startApp(); server = new Pretender(function() { - this.get('/posts', function(request) { + this.get('/posts', request => { var posts = [ { id: 1, name: "Squarepusher" }, { id: 2, name: "Aphex Twin" } ]; - return [200, {"Content-Type": "application/json"}, JSON.stringify({posts: posts})]; + return [200, {"Content-Type": "application/json"}, JSON.stringify({posts})]; }); }); }, - teardown: function() { + teardown() { Ember.run(App, 'destroy'); server.shutdown(); } }); -test('it works when meta is not present in payload', function(assert) { +test('it works when meta is not present in payload', assert => { visit('/'); - andThen(function() { + andThen(() => { var postsTitle = find('#posts-title'); var postList = find('ul'); var infinityLoader = find('.infinity-loader'); diff --git a/tests/dummy/app/routes/category.js b/tests/dummy/app/routes/category.js index 8b98bca6..c62536bf 100644 --- a/tests/dummy/app/routes/category.js +++ b/tests/dummy/app/routes/category.js @@ -2,7 +2,7 @@ import Ember from 'ember'; import InfinityRoute from 'ember-infinity/mixins/route'; export default Ember.Route.extend(InfinityRoute, { - model: function(params) { + model(params) { return this.infinityModel('post', { category: params.category, perPage: 2 }); } diff --git a/tests/helpers/start-app.js b/tests/helpers/start-app.js index 16cc7c39..e08b02d1 100644 --- a/tests/helpers/start-app.js +++ b/tests/helpers/start-app.js @@ -9,7 +9,7 @@ export default function startApp(attrs) { var attributes = Ember.merge({}, config.APP); attributes = Ember.merge(attributes, attrs); // use defaults, but you can override; - Ember.run(function() { + Ember.run(() => { application = Application.create(attributes); application.setupForTesting(); application.injectTestHelpers(); diff --git a/tests/unit/mixins/route-test.js b/tests/unit/mixins/route-test.js index 9b7e50ba..4fe7305f 100644 --- a/tests/unit/mixins/route-test.js +++ b/tests/unit/mixins/route-test.js @@ -4,15 +4,15 @@ import { module, test } from 'qunit'; module('RouteMixin'); -test('it works', function(assert) { +test('it works', assert => { var RouteObject = Ember.Route.extend(RouteMixin); var route = RouteObject.create(); assert.ok(route); }); -test('it can not use infinityModel without Ember Data Store', function(assert) { +test('it can not use infinityModel without Ember Data Store', assert => { var RouteObject = Ember.Route.extend(RouteMixin, { - model: function() { + model() { return this.infinityModel('post'); } }); @@ -29,9 +29,9 @@ test('it can not use infinityModel without Ember Data Store', function(assert) { assert.equal(infinityError.message, "Ember Data store is not available to infinityModel"); }); -test('it can not use infinityModel without a Model Name', function(assert) { +test('it can not use infinityModel without a Model Name', assert => { var RouteObject = Ember.Route.extend(RouteMixin, { - model: function() { + model() { return this.infinityModel(); } }); @@ -51,18 +51,18 @@ test('it can not use infinityModel without a Model Name', function(assert) { assert.equal(infinityError.message, "You must pass a Model Name to infinityModel"); }); -test('it sets state before it reaches the end', function(assert) { +test('it sets state before it reaches the end', assert => { var RouteObject = Ember.Route.extend(RouteMixin, { - model: function() { + model() { return this.infinityModel('item'); } }); var route = RouteObject.create(); var dummyStore = { - find: function() { - return new Ember.RSVP.Promise(function(resolve) { + find() { + return new Ember.RSVP.Promise(resolve => { Ember.run(this, resolve, Ember.Object.create({ items: [{id: 1, name: 'Test'}], meta: { @@ -76,8 +76,8 @@ test('it sets state before it reaches the end', function(assert) { route.store = dummyStore; var model; - Ember.run(function() { - route.model().then(function(result) { + Ember.run(() => { + route.model().then(result => { model = result; }); }); @@ -113,8 +113,8 @@ test('it allows customizations of request params', assert => { route.store = dummyStore; var model; - Ember.run(function() { - route.model().then(function(result) { + Ember.run(() => { + route.model().then(result => { model = result; }); }); @@ -145,8 +145,8 @@ test('it allows customizations of meta parsing params', assert => { route.store = dummyStore; var model; - Ember.run(function() { - route.model().then(function(result) { + Ember.run(() => { + route.model().then(result => { model = result; }); }); @@ -154,18 +154,18 @@ test('it allows customizations of meta parsing params', assert => { assert.equal(22, route.get('_totalPages')); }); -test('it sets state when it reaches the end', function(assert) { +test('it sets state when it reaches the end', assert => { var RouteObject = Ember.Route.extend(RouteMixin, { - model: function() { + model() { return this.infinityModel('item', {startingPage: 31}); } }); var route = RouteObject.create(); var dummyStore = { - find: function() { - return new Ember.RSVP.Promise(function(resolve) { + find() { + return new Ember.RSVP.Promise(resolve => { Ember.run(this, resolve, Ember.Object.create({ items: [{id: 1, name: 'Test'}], meta: { @@ -179,8 +179,8 @@ test('it sets state when it reaches the end', function(assert) { route.store = dummyStore; var model; - Ember.run(function() { - route.model().then(function(result) { + Ember.run(() => { + route.model().then(result => { model = result; }); }); @@ -192,21 +192,21 @@ test('it sets state when it reaches the end', function(assert) { assert.ok(model.get('reachedInfinity'), 'Should reach infinity'); }); -test('it uses extra params when loading more data', function(assert) { +test('it uses extra params when loading more data', assert => { assert.expect(8); var RouteObject = Ember.Route.extend(RouteMixin, { - model: function() { + model() { return this.infinityModel('item', {extra: 'param'}); } }); var route = RouteObject.create(); var dummyStore = { - find: function(name, params) { + find(name, params) { assert.equal('param', params.extra); - return new Ember.RSVP.Promise(function(resolve) { + return new Ember.RSVP.Promise(resolve => { Ember.run(this, resolve, Ember.Object.create({ items: [{id: 1, name: 'Test'}], pushObjects: Ember.K, @@ -221,8 +221,8 @@ test('it uses extra params when loading more data', function(assert) { route.store = dummyStore; var model; - Ember.run(function() { - route.model().then(function(result) { + Ember.run(() => { + route.model().then(result => { model = result; }); }); @@ -230,7 +230,7 @@ test('it uses extra params when loading more data', function(assert) { // The controller needs to be set so _infinityLoad() can call // pushObjects() var dummyController = Ember.Object.create({ - model: model + model }); route.set('controller', dummyController); @@ -238,7 +238,7 @@ test('it uses extra params when loading more data', function(assert) { assert.equal(true, route.get('_canLoadMore')); // Load more - Ember.run(function() { + Ember.run(() => { route._infinityLoad(); });