diff --git a/src/js/select2/dropdown/infiniteScroll.js b/src/js/select2/dropdown/infiniteScroll.js index 41d85de0..00cc1340 100644 --- a/src/js/select2/dropdown/infiniteScroll.js +++ b/src/js/select2/dropdown/infiniteScroll.js @@ -18,6 +18,7 @@ define([ if (this.showLoadingMore(data)) { this.$results.append(this.$loadingMore); + this.loadMoreIfNeeded(); } }; @@ -36,25 +37,27 @@ define([ self.loading = true; }); - this.$results.on('scroll', function () { - var isLoadMoreVisible = $.contains( - document.documentElement, - self.$loadingMore[0] - ); + this.$results.on('scroll', this.loadMoreIfNeeded.bind(this)); + }; - if (self.loading || !isLoadMoreVisible) { - return; - } + InfiniteScroll.prototype.loadMoreIfNeeded = function () { + var isLoadMoreVisible = $.contains( + document.documentElement, + this.$loadingMore[0] + ); - var currentOffset = self.$results.offset().top + - self.$results.outerHeight(false); - var loadingMoreOffset = self.$loadingMore.offset().top + - self.$loadingMore.outerHeight(false); + if (this.loading || !isLoadMoreVisible) { + return; + } - if (currentOffset + 50 >= loadingMoreOffset) { - self.loadMore(); - } - }); + var currentOffset = this.$results.offset().top + + this.$results.outerHeight(false); + var loadingMoreOffset = this.$loadingMore.offset().top + + this.$loadingMore.outerHeight(false); + + if (currentOffset + 50 >= loadingMoreOffset) { + this.loadMore(); + } }; InfiniteScroll.prototype.loadMore = function () { diff --git a/tests/results/infiniteScroll-tests.js b/tests/results/infiniteScroll-tests.js new file mode 100644 index 00000000..a8ddc99a --- /dev/null +++ b/tests/results/infiniteScroll-tests.js @@ -0,0 +1,126 @@ +module('Results - Infinite scrolling'); + +test('loadingMore is triggered even without a scrollbar', function (assert) { + assert.expect(1); + + var $ = require('jquery'); + + var $select = $(''); + + var $container = $(''); + var container = new MockContainer(); + + var Utils = require('select2/utils'); + var Options = require('select2/options'); + + var Results = require('select2/results'); + var InfiniteScroll = require('select2/dropdown/infiniteScroll'); + + var InfiniteScrollResults = Utils.Decorate(Results, InfiniteScroll); + + var results = new InfiniteScrollResults($select, new Options({})); + + // Fake the data adapter for the `setClasses` method + results.data = {}; + results.data.current = function (callback) { + callback([{ id: 'test' }]); + }; + + $('#qunit-fixture').append(results.render()); + + results.bind(container, $container); + + results.on('query:append', function () { + assert.ok(true, 'It tried to load more immediately'); + }); + + container.trigger('results:all', { + data: { + results: [ + { + id: 'test', + text: 'Test' + } + ], + pagination: { + more: true + } + } + }); +}); + +test('loadingMore is not triggered without scrolling', function (assert) { + assert.expect(0); + + var $ = require('jquery'); + + var $select = $(''); + + var $container = $(''); + var container = new MockContainer(); + + var Utils = require('select2/utils'); + var Options = require('select2/options'); + + var Results = require('select2/results'); + var InfiniteScroll = require('select2/dropdown/infiniteScroll'); + + var InfiniteScrollResults = Utils.Decorate(Results, InfiniteScroll); + + var results = new InfiniteScrollResults($select, new Options({})); + + // Fake the data adapter for the `setClasses` method + results.data = {}; + results.data.current = function (callback) { + callback([{ id: 'test' }]); + }; + + var $results = results.render(); + + $('#qunit-fixture').append($results); + $results.css('max-height', '100px'); + + results.bind(container, $container); + + results.on('query:append', function () { + assert.ok(false, 'It tried to load more immediately'); + }); + + container.trigger('results:all', { + data: { + results: [ + { + id: 'test', + text: 'Test' + }, + { + id: 'test', + text: 'Test' + }, + { + id: 'test', + text: 'Test' + }, + { + id: 'test', + text: 'Test' + }, + { + id: 'test', + text: 'Test' + }, + { + id: 'test', + text: 'Test' + }, + { + id: 'test', + text: 'Test' + } + ], + pagination: { + more: true + } + } + }); +}); diff --git a/tests/unit-jq1.html b/tests/unit-jq1.html index ce66eee6..e0b33216 100644 --- a/tests/unit-jq1.html +++ b/tests/unit-jq1.html @@ -82,6 +82,7 @@ + diff --git a/tests/unit-jq2.html b/tests/unit-jq2.html index b1c2cf33..a35b26e5 100644 --- a/tests/unit-jq2.html +++ b/tests/unit-jq2.html @@ -82,6 +82,7 @@ + diff --git a/tests/unit-jq3.html b/tests/unit-jq3.html index 687eafc2..31259ea3 100644 --- a/tests/unit-jq3.html +++ b/tests/unit-jq3.html @@ -82,6 +82,7 @@ +