From 23a8b6873b2c88dcc9e79650aa2ff66bfcc31060 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Sun, 20 Nov 2016 01:29:33 -0600 Subject: rename pager.js to pager.js.es6 --- app/assets/javascripts/pager.js.es6 | 64 +++++++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 app/assets/javascripts/pager.js.es6 (limited to 'app/assets/javascripts/pager.js.es6') diff --git a/app/assets/javascripts/pager.js.es6 b/app/assets/javascripts/pager.js.es6 new file mode 100644 index 00000000000..d22d2d9dbae --- /dev/null +++ b/app/assets/javascripts/pager.js.es6 @@ -0,0 +1,64 @@ +/* eslint-disable func-names, space-before-function-paren, object-shorthand, quotes, no-undef, prefer-template, wrap-iife, comma-dangle, no-return-assign, no-else-return, consistent-return, no-unused-vars, padded-blocks, max-len */ +(function() { + this.Pager = { + init: function(limit, preload, disable, callback) { + this.limit = limit != null ? limit : 0; + this.disable = disable != null ? disable : false; + this.callback = callback != null ? callback : $.noop; + this.loading = $('.loading').first(); + if (preload) { + this.offset = 0; + this.getOld(); + } else { + this.offset = this.limit; + } + return this.initLoadMore(); + }, + getOld: function() { + this.loading.show(); + return $.ajax({ + type: "GET", + url: $(".content_list").data('href') || location.href, + data: "limit=" + this.limit + "&offset=" + this.offset, + complete: (function(_this) { + return function() { + return _this.loading.hide(); + }; + })(this), + success: function(data) { + Pager.append(data.count, data.html); + return Pager.callback(); + }, + dataType: "json" + }); + }, + append: function(count, html) { + $(".content_list").append(html); + if (count > 0) { + return this.offset += count; + } else { + return this.disable = true; + } + }, + initLoadMore: function() { + $(document).unbind('scroll'); + return $(document).endlessScroll({ + bottomPixels: 400, + fireDelay: 1000, + fireOnce: true, + ceaseFire: function() { + return Pager.disable; + }, + callback: (function(_this) { + return function(i) { + if (!_this.loading.is(':visible')) { + _this.loading.show(); + return Pager.getOld(); + } + }; + })(this) + }); + } + }; + +}).call(this); -- cgit v1.2.1 From 324482659a6fe463afb1547a96ecd2f61570a60e Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Sun, 20 Nov 2016 00:11:30 -0600 Subject: convert pager.js to es6 syntax --- app/assets/javascripts/pager.js.es6 | 64 ++++++++++++++++--------------------- 1 file changed, 28 insertions(+), 36 deletions(-) (limited to 'app/assets/javascripts/pager.js.es6') diff --git a/app/assets/javascripts/pager.js.es6 b/app/assets/javascripts/pager.js.es6 index d22d2d9dbae..25033ea659f 100644 --- a/app/assets/javascripts/pager.js.es6 +++ b/app/assets/javascripts/pager.js.es6 @@ -1,7 +1,6 @@ -/* eslint-disable func-names, space-before-function-paren, object-shorthand, quotes, no-undef, prefer-template, wrap-iife, comma-dangle, no-return-assign, no-else-return, consistent-return, no-unused-vars, padded-blocks, max-len */ -(function() { - this.Pager = { - init: function(limit, preload, disable, callback) { +(() => { + const Pager = { + init(limit, preload, disable, callback) { this.limit = limit != null ? limit : 0; this.disable = disable != null ? disable : false; this.callback = callback != null ? callback : $.noop; @@ -12,53 +11,46 @@ } else { this.offset = this.limit; } - return this.initLoadMore(); + this.initLoadMore(); }, - getOld: function() { + getOld() { this.loading.show(); - return $.ajax({ - type: "GET", - url: $(".content_list").data('href') || location.href, - data: "limit=" + this.limit + "&offset=" + this.offset, - complete: (function(_this) { - return function() { - return _this.loading.hide(); - }; - })(this), - success: function(data) { + $.ajax({ + type: 'GET', + url: $('.content_list').data('href') || window.location.href, + data: `limit=${this.limit}&offset=${this.offset}`, + complete: () => this.loading.hide(), + success: (data) => { Pager.append(data.count, data.html); - return Pager.callback(); + Pager.callback(); }, - dataType: "json" + dataType: 'json', }); }, - append: function(count, html) { - $(".content_list").append(html); + append(count, html) { + $('.content_list').append(html); if (count > 0) { - return this.offset += count; + this.offset += count; } else { - return this.disable = true; + this.disable = true; } }, - initLoadMore: function() { + initLoadMore() { $(document).unbind('scroll'); - return $(document).endlessScroll({ + $(document).endlessScroll({ bottomPixels: 400, fireDelay: 1000, fireOnce: true, - ceaseFire: function() { - return Pager.disable; + ceaseFire: () => Pager.disable !== true, + callback: () => { + if (!this.loading.is(':visible')) { + this.loading.show(); + Pager.getOld(); + } }, - callback: (function(_this) { - return function(i) { - if (!_this.loading.is(':visible')) { - _this.loading.show(); - return Pager.getOld(); - } - }; - })(this) }); - } + }, }; -}).call(this); + window.Pager = Pager; +})(); -- cgit v1.2.1 From 283bca3a2e06a2326a71ad4fcbf663da09cd0982 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Sun, 20 Nov 2016 00:23:12 -0600 Subject: use param defaults and add spacing for readability --- app/assets/javascripts/pager.js.es6 | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'app/assets/javascripts/pager.js.es6') diff --git a/app/assets/javascripts/pager.js.es6 b/app/assets/javascripts/pager.js.es6 index 25033ea659f..2497c9e22b5 100644 --- a/app/assets/javascripts/pager.js.es6 +++ b/app/assets/javascripts/pager.js.es6 @@ -1,9 +1,9 @@ (() => { const Pager = { - init(limit, preload, disable, callback) { - this.limit = limit != null ? limit : 0; - this.disable = disable != null ? disable : false; - this.callback = callback != null ? callback : $.noop; + init(limit = 0, preload = false, disable = false, callback = $.noop) { + this.limit = limit; + this.disable = disable; + this.callback = callback; this.loading = $('.loading').first(); if (preload) { this.offset = 0; @@ -13,6 +13,7 @@ } this.initLoadMore(); }, + getOld() { this.loading.show(); $.ajax({ @@ -27,6 +28,7 @@ dataType: 'json', }); }, + append(count, html) { $('.content_list').append(html); if (count > 0) { @@ -35,6 +37,7 @@ this.disable = true; } }, + initLoadMore() { $(document).unbind('scroll'); $(document).endlessScroll({ -- cgit v1.2.1 From 8d39770680499407e6468a345389cd58a1682a80 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Sun, 20 Nov 2016 01:02:33 -0600 Subject: continue to auto-load content while the window is not scrollable --- app/assets/javascripts/pager.js.es6 | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) (limited to 'app/assets/javascripts/pager.js.es6') diff --git a/app/assets/javascripts/pager.js.es6 b/app/assets/javascripts/pager.js.es6 index 2497c9e22b5..c4cfd011e0f 100644 --- a/app/assets/javascripts/pager.js.es6 +++ b/app/assets/javascripts/pager.js.es6 @@ -20,10 +20,17 @@ type: 'GET', url: $('.content_list').data('href') || window.location.href, data: `limit=${this.limit}&offset=${this.offset}`, - complete: () => this.loading.hide(), + error: () => this.loading.hide(), success: (data) => { - Pager.append(data.count, data.html); - Pager.callback(); + this.append(data.count, data.html); + this.callback(); + + // keep loading until we've filled the viewport height + if (!this.isScrollable()) { + this.getOld(); + } else { + this.loading.hide(); + } }, dataType: 'json', }); @@ -38,17 +45,21 @@ } }, + isScrollable() { + return $(document).height() > $(window).height() + $(window).scrollTop() + 400; + }, + initLoadMore() { $(document).unbind('scroll'); $(document).endlessScroll({ bottomPixels: 400, fireDelay: 1000, fireOnce: true, - ceaseFire: () => Pager.disable !== true, + ceaseFire: () => this.disable === true, callback: () => { if (!this.loading.is(':visible')) { this.loading.show(); - Pager.getOld(); + this.getOld(); } }, }); -- cgit v1.2.1 From 1166b380cd2fba7bd5ee99f3fe7d0c5b1a677e73 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Sun, 20 Nov 2016 01:11:47 -0600 Subject: prevent infinite loop when no content is returned --- app/assets/javascripts/pager.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets/javascripts/pager.js.es6') diff --git a/app/assets/javascripts/pager.js.es6 b/app/assets/javascripts/pager.js.es6 index c4cfd011e0f..f0ae8950c5f 100644 --- a/app/assets/javascripts/pager.js.es6 +++ b/app/assets/javascripts/pager.js.es6 @@ -26,7 +26,7 @@ this.callback(); // keep loading until we've filled the viewport height - if (!this.isScrollable()) { + if (data.count > 0 && !this.isScrollable()) { this.getOld(); } else { this.loading.hide(); -- cgit v1.2.1 From 0dd95ca98381b4c6fc7016dd50dd3052051491b0 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Mon, 21 Nov 2016 10:17:11 -0600 Subject: fix some code style issues according to feedback --- app/assets/javascripts/pager.js.es6 | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) (limited to 'app/assets/javascripts/pager.js.es6') diff --git a/app/assets/javascripts/pager.js.es6 b/app/assets/javascripts/pager.js.es6 index f0ae8950c5f..e35cf6d295e 100644 --- a/app/assets/javascripts/pager.js.es6 +++ b/app/assets/javascripts/pager.js.es6 @@ -1,15 +1,17 @@ (() => { + const ENDLESS_SCROLL_BOTTOM_PX = 400; + const ENDLESS_SCROLL_FIRE_DELAY_MS = 1000; + const Pager = { init(limit = 0, preload = false, disable = false, callback = $.noop) { this.limit = limit; + this.offset = this.limit; this.disable = disable; this.callback = callback; this.loading = $('.loading').first(); if (preload) { this.offset = 0; this.getOld(); - } else { - this.offset = this.limit; } this.initLoadMore(); }, @@ -20,19 +22,19 @@ type: 'GET', url: $('.content_list').data('href') || window.location.href, data: `limit=${this.limit}&offset=${this.offset}`, + dataType: 'json', error: () => this.loading.hide(), success: (data) => { this.append(data.count, data.html); this.callback(); // keep loading until we've filled the viewport height - if (data.count > 0 && !this.isScrollable()) { + if (!this.disable && !this.isScrollable()) { this.getOld(); } else { this.loading.hide(); } }, - dataType: 'json', }); }, @@ -46,14 +48,15 @@ }, isScrollable() { - return $(document).height() > $(window).height() + $(window).scrollTop() + 400; + const $w = $(window); + return $(document).height() > $w.height() + $w.scrollTop() + ENDLESS_SCROLL_BOTTOM_PX; }, initLoadMore() { $(document).unbind('scroll'); $(document).endlessScroll({ - bottomPixels: 400, - fireDelay: 1000, + bottomPixels: ENDLESS_SCROLL_BOTTOM_PX, + fireDelay: ENDLESS_SCROLL_FIRE_DELAY_MS, fireOnce: true, ceaseFire: () => this.disable === true, callback: () => { -- cgit v1.2.1