Skip to content

Commit

Permalink
New features added
Browse files Browse the repository at this point in the history 
Can now do more advanced item counts + use an existing button rather than create a new one, which means improved progressive enhancement possibilities.
  • Loading branch information
@voxpelli
voxpelli committed Nov 12, 2015
1 parent 44b7d5b commit 01f0a6f
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 36 deletions.
9 changes: 7 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,15 @@ Advanced:
* **page** - the current page in the list
* **rowsPerPage** - how many elements should be expected on a new page? If less than this amount is received we've reached the end and will remove the pager
* **maxPageCount** - the maximum numbers of pages to fetch at once - used by the History API integration
* **pageParam** - the query parameter used to specify which page to fetch
* **pageStartParam** - when more than one page is fetched at once this is the query parameter used to specify the page to start from
* **pageParam** - the query parameter used to specify which page to fetch. If set to `false` no param will be specified.
* **pageStartParam** - when more than one page is fetched at once this is the query parameter used to specify the page to start from. If set to `false` no param will be specified.
* **complete** - a function to execute once a new page has been loaded, return false if the pager should be removed
* **useHistoryAPI** - whether to use the History API in supported browsers or not
* **useOffset** – whether to use offsets rather than page numbers
* **useExistingButton** – rather than creating a new button, use an existing one matching this selector / element
* **filterResult** – filter the received result by these selectors
* **itemSelector** – the selector used to count items
* **baseOffset** – an offset to add to all offsets. Will be parsed from any `pageParam` or `pageStartParam` query params on an existing button.

### Events

Expand Down
23 changes: 14 additions & 9 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,29 @@ <h1>jQuery Loadmore</h1>

<div class="list">
<ul>
<li>One</li>
<li>Two</li>
<li class="item">One</li>
<li class="item">Two</li>
<li class="item">Three</li>
</ul>
<ul>
<li>Three</li>
<li>Four</li>
<li class="item">Four</li>
<li class="item">Five</li>
</ul>
</div>

<a class="button" href="?foo=12">Next</a>

<script type="text/javascript">
$('.list').loadmore('', {
// 'className' : '',
text : 'More',
loadingText : 'Loading',
filterResult: '.list',
// page : 0,
// pageSize : false,
// 'pageParam' : 'page'
useExistingButton: '.button',
useOffset: true,
rowsPerPage: 5,
baseOffset: -1,
itemSelector: '.item',
pageParam : false,
pageStartParam: 'foo'
});
</script>
</body>
82 changes: 57 additions & 25 deletions loadmore.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
(function ($) {
"use strict";

var maybeCall, update, moreClick, supportsHistory, idCount = 0;
var maybeCall, update, getItemCount, moreClick, supportsHistory, idCount = 0;

// Below taken from tipsy.js
maybeCall = function (value, context) {
Expand All @@ -14,7 +14,7 @@
var $this = $(this),
options = $this.data('loadmore-options'),
$text = $this.children('span.text'),
currentPage = (options.useOffset ? $this.siblings().length : $this.data('loadmore-page')),
currentPage = (options.useOffset ? getItemCount($this, options) : $this.data('loadmore-page')),
params = {};

if ($this.hasClass('loading') || pageTarget <= currentPage) {
Expand All @@ -24,13 +24,15 @@
$this.addClass('loading');
$text.text(maybeCall(options.loadingText, $text[0]));

if (pageTarget - currentPage > 1) {
params[options.pageStartParam] = currentPage + 1;
if (pageTarget - currentPage > 1 && options.pageStartParam) {
params[options.pageStartParam] = currentPage + 1 + options.baseOffset;
if (options.maxPageCount !== false && (options.maxPageCount * (options.useOffset ? options.rowsPerPage : 1)) < pageTarget - currentPage) {
pageTarget = currentPage + options.maxPageCount;
pageTarget = currentPage + options.maxPageCount + options.baseOffset;
}
}
params[options.pageParam] = pageTarget;
if (options.pageParam) {
params[options.pageParam] = pageTarget + options.baseOffset;
}

$.get(options.url, params)
.fail(function () {
Expand All @@ -56,7 +58,7 @@

$newData = $(data).filter(options.filterResult).insertBefore($this);

if (options.rowsPerPage !== false && $newData.length < (options.useOffset ? 1 : options.rowsPerPage) * (pageTarget - currentPage)) {
if (options.rowsPerPage !== false && $(options.itemSelector || '*', $newData).length < (options.useOffset ? 1 : options.rowsPerPage) * (pageTarget - currentPage)) {
$this.trigger('loadmore:last').remove();
}

Expand All @@ -67,10 +69,14 @@
return false;
};

moreClick = function () {
getItemCount = function ($this, options) {
return (options.itemSelector ? $(options.itemSelector) : $this.siblings()).length;
};

moreClick = function (e) {
var page, $this = $(this), options = $this.data('loadmore-options');
if (options.useOffset && options.rowsPerPage) {
page = $this.siblings().length + options.rowsPerPage;
if (options.useOffset) {
page = getItemCount($this, options) + options.rowsPerPage;
}
else
{
Expand All @@ -88,11 +94,9 @@
}

this.each(function () {
if (options.rowsPerPage !== false && $(this).children().length < options.rowsPerPage) {
return;
}
var $more, $text, id, itemCount, idDuplicates = 0;

var $more, $text, id, idDuplicates = 0;
itemCount = (options.itemSelector ? $(options.itemSelector) : $(this).children()).length;

if (options.id) {
id = options.id;
Expand All @@ -105,22 +109,48 @@
id = 'loadmore-' + idCount;
}

$more = $('<a />', {
'id' : id,
'class' : options.className,
'href' : '#'
})
.data('loadmore-options', options);
if (options.useExistingButton) {
$more = $(options.useExistingButton);

options.text = $more.text();

$more.get(0).search.substr(1).split('&').some(function (pair) {
pair = pair.split('=');
if (pair[0] === options.pageParam) {
options.baseOffset = parseInt(pair[1]) + options.baseOffset;
return true;
} else if (pair[0] === options.pageStartParam) {
options.baseOffset = parseInt(pair[1]) + options.baseOffset - itemCount;
return true;
}
});
} else {
$more = $('<a />', {
'id' : id,
'class' : options.className,
'href' : '#'
});

$text = $('<span />', {'class' : 'text'});
$text.appendTo($more)
.text(maybeCall(options.text, $text[0]));
}

$more.data('loadmore-options', options);

if (!options.useOffset) {
$more.data('loadmore-page', options.page);
}

$text = $('<span />', {'class' : 'text'});
$text.appendTo($more)
.text(maybeCall(options.text, $text[0]));
if (!options.useExistingButton) {
if (options.rowsPerPage !== false && itemCount < options.rowsPerPage) {
return;
}

$more.appendTo(this);
}

$more.appendTo(this).click(moreClick);
$more.click(moreClick);

if (supportsHistory && options.useHistoryAPI && window.history.state && window.history.state.loadmore && window.history.state.loadmore[id]) {
update.call($more[0], window.history.state.loadmore[id]);
Expand All @@ -133,6 +163,7 @@
$.fn.loadmore.defaults = {
id : null,
className : 'more',
useExistingButton: false,
text : 'More',
loadingText : 'Loading',
page : 0,
Expand All @@ -143,7 +174,8 @@
filterResult: '*',
complete : false,
useHistoryAPI : true,
useOffset : false
useOffset : false,
baseOffset: 0
};

// Below partly taken from jquery.pjax.js
Expand Down

0 comments on commit 01f0a6f

Please sign in to comment.