Skip to content
Browse files

Added infinite pagination

  • Loading branch information...
1 parent 68a7cfb commit 8bd955df461f2813de643cc47b9d8e032b1cec9c @iHiD committed
View
3 Gruntfile.js
@@ -65,7 +65,8 @@ module.exports = function(grunt) {
'vendor/javascripts/handlebars.js',
'vendor/javascripts/emblem.min.js',
'vendor/javascripts/ember.js',
- 'vendor/javascripts/ember-data.js']
+ 'vendor/javascripts/ember-data.js',
+ 'vendor/javascripts/jquery.inview.js']
}
}
},
View
7 app/controllers/mixins.coffee
@@ -0,0 +1,7 @@
+Meducation.LoadMoreMixin = Ember.Mixin.create Ember.Evented,
+ canLoadMore: true
+ currentPage: 1
+ isLoading: false
+ resetLoadMore: -> @set('currentPage', 1)
+
+ loadMore: Ember.K
View
18 app/controllers/resources_controller.coffee
@@ -1 +1,17 @@
-Meducation.ResourcesController = Ember.ArrayController.extend()
+Meducation.ResourcesController = Ember.ArrayController.extend(
+ Meducation.LoadMoreMixin,
+
+ {
+ canLoadMore: (->
+ @get('currentPage') < 10
+ ).property('currentPage')
+
+ loadMore: ->
+ if @get('canLoadMore')
+ page = @incrementProperty('currentPage')
+ @set('isLoading', true)
+
+ Meducation.MediaFile.find(page: page).addObserver 'isLoaded', =>
+ @set('isLoading', false)
+ }
+)
View
7 app/templates/load_more.emblem
@@ -0,0 +1,7 @@
+if isLoading
+ | fetching some more stuff <img width="10" src="img/ajax-loader.gif" >
+else
+ if canLoadMore
+ a{{action "loadMore" target="controller" }} click to load more
+ else
+ | <strong><em>no more items</em></strong>
View
2 app/templates/resources/index.emblem
@@ -1,4 +1,4 @@
input type="search" name="search" class="search" value=""
each resource in controller
=partial 'resource'
-
+Meducation.LoadMoreView controllerBinding="view.controller"
View
5 app/views/load_more_view.coffee
@@ -0,0 +1,5 @@
+Meducation.LoadMoreView = Ember.View.extend
+ templateName: 'load_more'
+ didInsertElement: ->
+ @$().bind 'inview', (event, isInView, visiblePartX, visiblePartY) =>
+ Ember.tryInvoke(@get('controller'), 'loadMore') if isInView
View
118 vendor/javascripts/jquery.inview.js
@@ -0,0 +1,118 @@
+/**
+ * author Christopher Blum
+ * - based on the idea of Remy Sharp, http://remysharp.com/2009/01/26/element-in-view-event-plugin/
+ * - forked from http://github.com/zuk/jquery.inview/
+ */
+(function ($) {
+ var inviewObjects = {}, viewportSize, viewportOffset,
+ d = document, w = window, documentElement = d.documentElement, expando = $.expando;
+
+ $.event.special.inview = {
+ add: function(data) {
+ inviewObjects[data.guid + "-" + this[expando]] = { data: data, $element: $(this) };
+ },
+
+ remove: function(data) {
+ try { delete inviewObjects[data.guid + "-" + this[expando]]; } catch(e) {}
+ }
+ };
+
+ function getViewportSize() {
+ var mode, domObject, size = { height: w.innerHeight, width: w.innerWidth };
+
+ // if this is correct then return it. iPad has compat Mode, so will
+ // go into check clientHeight/clientWidth (which has the wrong value).
+ if (!size.height) {
+ mode = d.compatMode;
+ if (mode || !$.support.boxModel) { // IE, Gecko
+ domObject = mode === 'CSS1Compat' ?
+ documentElement : // Standards
+ d.body; // Quirks
+ size = {
+ height: domObject.clientHeight,
+ width: domObject.clientWidth
+ };
+ }
+ }
+
+ return size;
+ }
+
+ function getViewportOffset() {
+ return {
+ top: w.pageYOffset || documentElement.scrollTop || d.body.scrollTop,
+ left: w.pageXOffset || documentElement.scrollLeft || d.body.scrollLeft
+ };
+ }
+
+ function checkInView() {
+ var $elements = $(), elementsLength, i = 0;
+
+ $.each(inviewObjects, function(i, inviewObject) {
+ var selector = inviewObject.data.selector,
+ $element = inviewObject.$element;
+ $elements = $elements.add(selector ? $element.find(selector) : $element);
+ });
+
+ elementsLength = $elements.length;
+ if (elementsLength) {
+ viewportSize = viewportSize || getViewportSize();
+ viewportOffset = viewportOffset || getViewportOffset();
+
+ for (; i<elementsLength; i++) {
+ // Ignore elements that are not in the DOM tree
+ if (!$.contains(documentElement, $elements[i])) {
+ continue;
+ }
+
+ var $element = $($elements[i]),
+ elementSize = { height: $element.height(), width: $element.width() },
+ elementOffset = $element.offset(),
+ inView = $element.data('inview'),
+ visiblePartX,
+ visiblePartY,
+ visiblePartsMerged;
+
+ // Don't ask me why because I haven't figured out yet:
+ // viewportOffset and viewportSize are sometimes suddenly null in Firefox 5.
+ // Even though it sounds weird:
+ // It seems that the execution of this function is interferred by the onresize/onscroll event
+ // where viewportOffset and viewportSize are unset
+ if (!viewportOffset || !viewportSize) {
+ return;
+ }
+
+ if (elementOffset.top + elementSize.height > viewportOffset.top &&
+ elementOffset.top < viewportOffset.top + viewportSize.height &&
+ elementOffset.left + elementSize.width > viewportOffset.left &&
+ elementOffset.left < viewportOffset.left + viewportSize.width) {
+ visiblePartX = (viewportOffset.left > elementOffset.left ?
+ 'right' : (viewportOffset.left + viewportSize.width) < (elementOffset.left + elementSize.width) ?
+ 'left' : 'both');
+ visiblePartY = (viewportOffset.top > elementOffset.top ?
+ 'bottom' : (viewportOffset.top + viewportSize.height) < (elementOffset.top + elementSize.height) ?
+ 'top' : 'both');
+ visiblePartsMerged = visiblePartX + "-" + visiblePartY;
+ if (!inView || inView !== visiblePartsMerged) {
+ $element.data('inview', visiblePartsMerged).trigger('inview', [true, visiblePartX, visiblePartY]);
+ }
+ } else if (inView) {
+ $element.data('inview', false).trigger('inview', [false]);
+ }
+ }
+ }
+ }
+
+ $(w).bind("scroll resize", function() {
+ viewportSize = viewportOffset = null;
+ });
+
+ // Use setInterval in order to also make sure this captures elements within
+ // "overflow:scroll" elements or elements that appeared in the dom tree due to
+ // dom manipulation and reflow
+ // old: $(window).scroll(checkInView);
+ //
+ // By the way, iOS (iPad, iPhone, ...) seems to not execute, or at least delays
+ // intervals while the user scrolls. Therefore the inview event might fire a bit late there
+ setInterval(checkInView, 250);
+})(jQuery);

2 comments on commit 8bd955d

@iHiD
Owner

Big :heart: to @pangratz for lots of the code behind this and for answering on Stackoverflow!

@pangratz

Glad I could help! Cheers! :satisfied:

Please sign in to comment.
Something went wrong with that request. Please try again.