Add infinite pagination js library

Braulio Bhavamitra
1 parent e2b6c2fa
Showing 2 changed files with 60 additions and 0 deletions Show diff stats
public/javascripts/application.js
public/javascripts/pagination.js
@@ -23,6 +23,7 @@
 *= require_self
 *= require modal.js
 *= require loading-overlay.js
+*= require pagination.js
 * views speficics
 *= require add-and-join.js
 *= require report-abuse.js
@@ -0,0 +1,59 @@
+
+pagination = {
+  loading: false,
+
+  showMore: function(newPagination, appendFunction) {
+    if (newPagination) {
+      jQuery('.pagination').replaceWith(newPagination);
+      jQuery('.pagination').addClass('infinite-scroll');
+    } else
+      jQuery('.pagination').remove();
+
+    appendFunction();
+  },
+
+  click: function(callback) {
+    jQuery(document).on('click', '.pagination a', function(e) {
+      e.preventDefault();
+      if (callback)
+        callback(e, this)
+      else {
+        // what to have as default?
+      }
+    });
+  },
+
+  // inspired by http://stackoverflow.com/questions/13555101/infinite-scroll-and-will-paginate-appending-the-next-page-of-items-multiple-ti
+  infiniteScroll: function(text, options) {
+    options = options || {};
+
+    jQuery(function() {
+      jQuery('.pagination').addClass('infinite-scroll');
+    });
+
+    jQuery(window).scroll(function () {
+      // Bail out right away if we're busy loading the next chunk.
+      if (pagination.loading)
+        return;
+
+      var url = jQuery('.pagination .next_page').attr('href')
+      if (url && jQuery(window).scrollTop() > (jQuery('.pagination').offset().top - jQuery(window).height() - 50)) {
+
+        jQuery('.pagination').html(
+          jQuery('<div class=loading>').text(text)
+        );
+
+        pagination.loading = true
+
+        if (options.load)
+          // don't forget to set pagination.loading to false!
+          options.load(url)
+        else
+          jQuery.getScript(url).always(function() {
+            pagination.loading = false
+          });
+      }
+    });
+  },
+
+};
@@ -0,0 +1,59 @@		@@ -0,0 +1,59 @@
	1	+
	2	+pagination = {
	3	+ loading: false,
	4	+
	5	+ showMore: function(newPagination, appendFunction) {
	6	+ if (newPagination) {
	7	+ jQuery('.pagination').replaceWith(newPagination);
	8	+ jQuery('.pagination').addClass('infinite-scroll');
	9	+ } else
	10	+ jQuery('.pagination').remove();
	11	+
	12	+ appendFunction();
	13	+ },
	14	+
	15	+ click: function(callback) {
	16	+ jQuery(document).on('click', '.pagination a', function(e) {
	17	+ e.preventDefault();
	18	+ if (callback)
	19	+ callback(e, this)
	20	+ else {
	21	+ // what to have as default?
	22	+ }
	23	+ });
	24	+ },
	25	+
	26	+ // inspired by http://stackoverflow.com/questions/13555101/infinite-scroll-and-will-paginate-appending-the-next-page-of-items-multiple-ti
	27	+ infiniteScroll: function(text, options) {
	28	+ options = options \|\| {};
	29	+
	30	+ jQuery(function() {
	31	+ jQuery('.pagination').addClass('infinite-scroll');
	32	+ });
	33	+
	34	+ jQuery(window).scroll(function () {
	35	+ // Bail out right away if we're busy loading the next chunk.
	36	+ if (pagination.loading)
	37	+ return;
	38	+
	39	+ var url = jQuery('.pagination .next_page').attr('href')
	40	+ if (url && jQuery(window).scrollTop() > (jQuery('.pagination').offset().top - jQuery(window).height() - 50)) {
	41	+
	42	+ jQuery('.pagination').html(
	43	+ jQuery('<div class=loading>').text(text)
	44	+ );
	45	+
	46	+ pagination.loading = true
	47	+
	48	+ if (options.load)
	49	+ // don't forget to set pagination.loading to false!
	50	+ options.load(url)
	51	+ else
	52	+ jQuery.getScript(url).always(function() {
	53	+ pagination.loading = false
	54	+ });
	55	+ }
	56	+ });
	57	+ },
	58	+
	59	+};