aboutsummaryrefslogtreecommitdiff
path: root/views/default/js/infinite_scroll
diff options
context:
space:
mode:
Diffstat (limited to 'views/default/js/infinite_scroll')
-rw-r--r--views/default/js/infinite_scroll/automatic_pagination.php34
-rw-r--r--views/default/js/infinite_scroll/infinite_scroll.php88
-rw-r--r--views/default/js/infinite_scroll/new_items.php62
3 files changed, 184 insertions, 0 deletions
diff --git a/views/default/js/infinite_scroll/automatic_pagination.php b/views/default/js/infinite_scroll/automatic_pagination.php
new file mode 100644
index 000000000..6d296bb2d
--- /dev/null
+++ b/views/default/js/infinite_scroll/automatic_pagination.php
@@ -0,0 +1,34 @@
+<?php
+/**
+ * Load next page of a listing through ajax automatically
+ *
+ * @package ElggInfiniteScroll
+ */
+?>
+
+elgg.require('elgg.infinite_scroll');
+elgg.provide('elgg.infinite_scroll.automatic_pagination');
+
+elgg.infinite_scroll.automatic_pagination.add_waypoint = function() {
+ $(this).unbind('append');
+ $(this).waypoint(elgg.infinite_scroll.automatic_pagination.remove_waypoint, {
+ offset: '100%',
+ });
+
+};
+
+elgg.infinite_scroll.automatic_pagination.remove_waypoint = function() {
+ $(this).waypoint('destroy');
+ $(this).click();
+ $(this).bind('append', elgg.infinite_scroll.automatic_pagination.add_waypoint);
+};
+
+elgg.infinite_scroll.automatic_pagination.init = function() {
+ $('.elgg-infinite-scroll-bottom .elgg-button').waypoint(
+ elgg.infinite_scroll.automatic_pagination.remove_waypoint, {
+ offset: '100%',
+ }
+ );
+};
+
+elgg.register_hook_handler('init', 'system', elgg.infinite_scroll.automatic_pagination.init);
diff --git a/views/default/js/infinite_scroll/infinite_scroll.php b/views/default/js/infinite_scroll/infinite_scroll.php
new file mode 100644
index 000000000..98b7fac05
--- /dev/null
+++ b/views/default/js/infinite_scroll/infinite_scroll.php
@@ -0,0 +1,88 @@
+<?php
+/**
+ * Load next page of a listing through ajax when a button clicked
+ *
+ * @package ElggInfiniteScroll
+ */
+?>
+
+elgg.provide('elgg.infinite_scroll');
+
+elgg.infinite_scroll.load = function($list, offset, callback) {
+ var $params = elgg.parse_str(elgg.parse_url(location.href).query);
+ $params = $.extend($params, {
+ path: elgg.parse_url(location.href).path,
+ items_type: $list.hasClass('elgg-list-entity') ? 'entity' :
+ $list.hasClass('elgg-gallery') ? 'entity' :
+ $list.hasClass('elgg-list-river') ? 'river' :
+ $list.hasClass('elgg-list-annotation') ? 'annotation' : false,
+ offset: offset,
+ });
+
+ var url = "/ajax/view/infinite_scroll/list?" + $.param($params);
+ elgg.get(url, callback);
+}
+
+elgg.infinite_scroll.load_next = function(event, direction) {
+ var $bottom = $(this).parent();
+ elgg.infinite_scroll.bottom = $bottom;
+
+ $bottom.addClass('elgg-infinite-scroll-ajax-loading')
+ .find('.elgg-button').css('visibility', 'hidden');
+
+ var $list = $bottom.siblings('.elgg-list, .elgg-gallery');
+ var offset = $list.children().length;
+ elgg.infinite_scroll.load($list, offset, elgg.infinite_scroll.append);
+
+ return false;
+}
+
+elgg.infinite_scroll.append = function(data) {
+ var $bottom = elgg.infinite_scroll.bottom;
+ $bottom.removeClass('elgg-infinite-scroll-ajax-loading');
+ var $list = $bottom.siblings('.elgg-list, .elgg-gallery');
+
+ var more = false;
+ if (data) {
+ $list.append($(data).children());
+ if ($(data).children().length == $list.data('elgg-infinite-scroll-limit')) {
+ $bottom.find('.elgg-button').css('visibility', 'visible');
+ more = true;
+ }
+ }
+ if (!more) {
+ $bottom.html(elgg.echo('infinite_scroll:list_end'));
+ }
+ $bottom.find('.elgg-button').trigger('append', data);
+}
+
+elgg.infinite_scroll.init = function() {
+
+ // Select all paginated .elgg-list or .elgg-gallery witch aren't into widgets
+ $list = $('.elgg-pagination').siblings('.elgg-list, .elgg-gallery').filter(':not(.elgg-module *)')
+
+ // Hide pagination
+ .siblings('.elgg-pagination').hide().end()
+
+ // Set limit as HTML5 data attribute
+ .each(function(){
+ $(this).data('elgg-infinite-scroll-limit', $(this).children().length);
+ })
+
+ // Add load more button at the final of the list
+ .after(
+ $('<div class="elgg-infinite-scroll-bottom"></div>')
+ .append(
+ $('<?php
+ echo elgg_view('output/url', array(
+ 'text' => elgg_echo('infinite_scroll:load_more'),
+ 'href' => '',
+ 'class' => 'elgg-button',
+ ));
+ ?>').click(elgg.infinite_scroll.load_next)
+ )
+ );
+
+};
+
+elgg.register_hook_handler('init', 'system', elgg.infinite_scroll.init);
diff --git a/views/default/js/infinite_scroll/new_items.php b/views/default/js/infinite_scroll/new_items.php
new file mode 100644
index 000000000..f686b8c3f
--- /dev/null
+++ b/views/default/js/infinite_scroll/new_items.php
@@ -0,0 +1,62 @@
+<?php
+/**
+ * Load new items of a list through ajax when a button clicked
+ *
+ * @package ElggInfiniteScroll
+ */
+?>
+
+elgg.provide('elgg.infinite_scroll.new_items');
+
+elgg.infinite_scroll.new_items.prepend = function(data) {
+ var $list = $('.elgg-pagination').siblings('.elgg-list, .elgg-gallery').filter(':not(.elgg-module *)');
+ if (data) {
+ var n = $list.children(":hidden").length + $(data).children().length;
+ $list.prepend($(data).children().hide());
+ $('.elgg-infinite-scroll-top').find('.elgg-button').text(
+ elgg.echo('infinite_scroll:new_items', [n])
+ ).end().show();
+ }
+ $list.trigger('prepend', data);
+};
+
+elgg.infinite_scroll.new_items.check = function() {
+ // Select all paginated .elgg-list or .elgg-gallery witch aren't into widgets
+ var $list = $('.elgg-pagination').siblings('.elgg-list, .elgg-gallery').filter(':not(.elgg-module *)');
+
+ elgg.infinite_scroll.load($list, 0, function(data){
+ elgg.infinite_scroll.new_items.prepend(data);
+ setTimeout(elgg.infinite_scroll.new_items.check, 30000);
+ });
+};
+
+elgg.infinite_scroll.new_items.init = function() {
+
+ // Select all paginated .elgg-list or .elgg-gallery witch aren't into widgets
+ $list = $('.elgg-pagination').siblings('.elgg-list, .elgg-gallery').filter(':not(.elgg-module *)')
+
+ // Add new items button at the begining of the list
+ .before(
+ $('<div class="elgg-infinite-scroll-top"></div>')
+ .append(
+ $('<?php
+ echo elgg_view('output/url', array(
+ 'text' => '',
+ 'href' => '',
+ 'class' => 'elgg-button',
+ ));
+ ?>').click(function(){
+ $list.children().slideDown({
+ duration: 700,
+ easing: 'easeInCubic',
+ });
+ $(this).parent().hide();
+ return false;
+ })
+ ).hide()
+ );
+ // Check for new items each 30s.
+ setTimeout(elgg.infinite_scroll.new_items.check, 0);
+};
+
+elgg.register_hook_handler('init', 'system', elgg.infinite_scroll.new_items.init);