Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added pagesToKeep

  • Loading branch information...
commit 98156443872a061a488e719a082ebb29adab80e2 1 parent a3d82c3
@fredwu authored
View
6 README.md
@@ -13,6 +13,11 @@ There are a few options to customise the behaviour of this plugin:
<td><strong>Description</strong></td>
</tr>
<tr>
+ <td>pagesToKeep</td>
+ <td>Integer</td>
+ <td>The number of 'pages' to keep before either end of the scrolling content are discarded.</td>
+ </tr>
+ <tr>
<td>inflowPixels</td>
<td>Integer</td>
<td>The number of pixels from the boundary of the element that triggers the event.</td>
@@ -127,6 +132,7 @@ master
- Fixed `$(window)` uses.
- Added `ceaseFireOnEmpty`.
+- Added `pagesToKeep`.
v1.7.1 [2012-04-16]
View
20 index.html
@@ -22,6 +22,7 @@
<script type="text/javascript" charset="utf-8">
$(function() {
$('#list').endlessScroll({
+ pagesToKeep: 10,
fireOnce: false,
insertBefore: "#list div:first",
insertAfter: "#list div:last",
@@ -37,22 +38,15 @@
intervalFrequency: 5
});
- $('#images').scrollTop(501);
+ $('#images').scrollTop(101);
+ var images = $("ul#images").clone().find("li");
$('#images').endlessScroll({
- inflowPixels: 500,
+ pagesToKeep: 5,
+ inflowPixels: 100,
fireDelay: 10,
- callback: function(i, p, d) {
+ content: function(i, p, d) {
console.log(i, p, d)
- switch(d) {
- case 'next':
- var lastImg = $("ul#images li:last");
- lastImg.after(lastImg.prev().prev().prev().prev().prev().prev().prev().clone());
- break;
- case 'prev':
- var firstImg = $("ul#images li:first");
- firstImg.before(firstImg.next().next().next().next().next().next().next().clone());
- break;
- }
+ return images.eq(Math.floor(Math.random()*8))[0].outerHTML;
}
});
});
View
49 js/jquery.endless-scroll.js
@@ -29,6 +29,7 @@
Configuration options:
+ pagesToKeep integer the number of 'pages' to keep before either end of the scrolling content are discarded
inflowPixels integer the number of pixels from the boundary of the element that triggers the event
fireOnce boolean only fire once until the execution of the current event is completed
fireDelay integer delay the subsequent firing, in milliseconds, 0 or false to disable delay
@@ -65,6 +66,7 @@ EndlessScroll = (function() {
EndlessScroll.name = 'EndlessScroll';
defaults = {
+ pagesToKeep: null,
inflowPixels: 50,
fireOnce: true,
fireDelay: 150,
@@ -88,7 +90,7 @@ EndlessScroll = (function() {
function EndlessScroll(scope, options) {
var _this = this;
this.options = $.extend({}, defaults, options);
- this.contentStack = [];
+ this.pagesStack = [0];
this.scrollDirection = 'next';
this.firing = true;
this.fired = false;
@@ -131,7 +133,8 @@ EndlessScroll = (function() {
if (_this.hasContent()) {
_this.showContent();
_this.fireCallback();
- _this.delayFireingWhenNecessary();
+ _this.cleanUpPagesWhenNecessary();
+ _this.delayFiringWhenNecessary();
}
_this.removeLoader();
return _this.lastContent = _this.content;
@@ -148,11 +151,13 @@ EndlessScroll = (function() {
};
EndlessScroll.prototype.setInsertPositionsWhenNecessary = function() {
+ var container;
+ container = "" + this.target.selector + " div.endless_scroll_inner_wrap";
if (defaults.insertBefore === null) {
- this.options.insertBefore = "" + this.target.selector + " div:first";
+ this.options.insertBefore = "" + container + " div:first";
}
if (defaults.insertAfter === null) {
- return this.options.insertAfter = "" + this.target.selector + " div:last";
+ return this.options.insertAfter = "" + container + " div:last";
}
};
@@ -202,6 +207,9 @@ EndlessScroll = (function() {
switch (this.scrollDirection) {
case 'next':
margin = innerWrap.height() - $(target).height() <= $(target).scrollTop() + this.options.inflowPixels;
+ if (margin) {
+ target.scrollTop(innerWrap.height() - $(target).height() - this.options.inflowPixels);
+ }
break;
case 'prev':
margin = $(target).scrollTop() <= this.options.inflowPixels;
@@ -274,14 +282,43 @@ EndlessScroll = (function() {
EndlessScroll.prototype.showContent = function() {
$('#endless_scroll_content_current').removeAttr('id');
- return this.insertContent("<div id=\"endless_scroll_content_current\" class=\"endless_scroll_content\" rel=\"" + this.pageSequence + "\">" + this.content + "</div>");
+ return this.insertContent("<div id=\"endless_scroll_content_current\" class=\"endless_scroll_content\" data-page=\"" + this.pageSequence + "\">" + this.content + "</div>");
};
EndlessScroll.prototype.fireCallback = function() {
return this.options.callback.apply(this.target, [this.fireSequence, this.pageSequence, this.scrollDirection]);
};
- EndlessScroll.prototype.delayFireingWhenNecessary = function() {
+ EndlessScroll.prototype.cleanUpPagesWhenNecessary = function() {
+ var pageToRemove;
+ if (!(this.options.pagesToKeep >= 1)) {
+ return;
+ }
+ switch (this.scrollDirection) {
+ case 'next':
+ this.pagesStack.push(this.pageSequence);
+ break;
+ case 'prev':
+ this.pagesStack.unshift(this.pageSequence);
+ }
+ if (this.pagesStack.length > this.options.pagesToKeep) {
+ switch (this.scrollDirection) {
+ case 'next':
+ pageToRemove = this.prevSequence = this.pagesStack.shift();
+ break;
+ case 'prev':
+ pageToRemove = this.nextSequence = this.pagesStack.pop();
+ }
+ }
+ this.removePage(pageToRemove);
+ return this.calculateScrollableCanvas();
+ };
+
+ EndlessScroll.prototype.removePage = function(page) {
+ return $(".endless_scroll_content[data-page='" + page + "']", this.target).remove();
+ };
+
+ EndlessScroll.prototype.delayFiringWhenNecessary = function() {
var _this = this;
if (this.options.fireDelay > 0) {
$('body').after('<div id="endless_scroll_marker"></div>');
View
37 src/jquery.endless-scroll.coffee
@@ -28,6 +28,7 @@
Configuration options:
+ pagesToKeep integer the number of 'pages' to keep before either end of the scrolling content are discarded
inflowPixels integer the number of pixels from the boundary of the element that triggers the event
fireOnce boolean only fire once until the execution of the current event is completed
fireDelay integer delay the subsequent firing, in milliseconds, 0 or false to disable delay
@@ -58,6 +59,7 @@
class EndlessScroll
defaults =
+ pagesToKeep: null
inflowPixels: 50
fireOnce: true
fireDelay: 150
@@ -73,7 +75,7 @@ class EndlessScroll
constructor: (scope, options) ->
@options = $.extend({}, defaults, options)
- @contentStack = []
+ @pagesStack = [0]
@scrollDirection = 'next'
@firing = true
@fired = false
@@ -111,7 +113,8 @@ class EndlessScroll
if @hasContent()
@showContent()
@fireCallback()
- @delayFireingWhenNecessary()
+ @cleanUpPagesWhenNecessary()
+ @delayFiringWhenNecessary()
@removeLoader()
@lastContent = @content
@@ -122,8 +125,10 @@ class EndlessScroll
@options.inflowPixels = @options.bottomPixels if @options.bottomPixels
setInsertPositionsWhenNecessary: ->
- @options.insertBefore = "#{@target.selector} div:first" if defaults.insertBefore is null
- @options.insertAfter = "#{@target.selector} div:last" if defaults.insertAfter is null
+ container = "#{@target.selector} div.endless_scroll_inner_wrap"
+
+ @options.insertBefore = "#{container} div:first" if defaults.insertBefore is null
+ @options.insertAfter = "#{container} div:last" if defaults.insertAfter is null
detectTarget: (scope) ->
@target = scope
@@ -163,6 +168,7 @@ class EndlessScroll
switch @scrollDirection
when 'next'
margin = innerWrap.height() - $(target).height() <= $(target).scrollTop() + @options.inflowPixels
+ target.scrollTop(innerWrap.height() - $(target).height() - @options.inflowPixels) if margin
when 'prev'
margin = $(target).scrollTop() <= @options.inflowPixels
target.scrollTop(@options.inflowPixels) if margin
@@ -217,19 +223,38 @@ class EndlessScroll
@content = @options.content.apply(@target, [@fireSequence, @pageSequence, @scrollDirection])
else
@content = @options.content
+
@content isnt false
showContent: ->
$('#endless_scroll_content_current').removeAttr 'id'
@insertContent(
"<div id=\"endless_scroll_content_current\"
- class=\"endless_scroll_content\" rel=\"#{@pageSequence}\">#{@content}</div>"
+ class=\"endless_scroll_content\" data-page=\"#{@pageSequence}\">#{@content}</div>"
)
fireCallback: ->
@options.callback.apply @target, [@fireSequence, @pageSequence, @scrollDirection]
- delayFireingWhenNecessary: ->
+ cleanUpPagesWhenNecessary: ->
+ return unless @options.pagesToKeep >= 1
+
+ switch @scrollDirection
+ when 'next' then @pagesStack.push(@pageSequence)
+ when 'prev' then @pagesStack.unshift(@pageSequence)
+
+ if @pagesStack.length > @options.pagesToKeep
+ switch @scrollDirection
+ when 'next' then pageToRemove = @prevSequence = @pagesStack.shift()
+ when 'prev' then pageToRemove = @nextSequence = @pagesStack.pop()
+
+ @removePage(pageToRemove)
+ @calculateScrollableCanvas()
+
+ removePage: (page) ->
+ $(".endless_scroll_content[data-page='#{page}']", @target).remove()
+
+ delayFiringWhenNecessary: ->
if @options.fireDelay > 0
$('body').after '<div id="endless_scroll_marker"></div>'
$('#endless_scroll_marker').fadeTo @options.fireDelay, 1, =>
Please sign in to comment.
Something went wrong with that request. Please try again.