Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Item14243: rewrite serial pager javascript code
  • Loading branch information
MichaelDaum committed Dec 1, 2016
1 parent 1b7c5b7 commit 85561c6
Show file tree
Hide file tree
Showing 8 changed files with 163 additions and 96 deletions.
2 changes: 2 additions & 0 deletions .gitignore
@@ -1,3 +1,5 @@
*~
*.jslint
igp_*
*.gz
genpdf_*
Expand Down
7 changes: 3 additions & 4 deletions data/System/JQSerialPagerContrib.txt
Expand Up @@ -26,7 +26,7 @@ the serial pager widget is available for use on the current page. This will proc
wrapped into a DIV element using the =jqSerialPager= class.

<verbatim class="html">
<div class="jqSeriaPager {parameters}">
<div class="jqSeriaPager" data-parameters="...">
* list item
* list item
* ...
Expand All @@ -42,14 +42,12 @@ This will process all list items inside according to the given parameters.
| duration | speed of animation effect flipping pages | 500 |
| cycle | boolean flag whether to jump to the first page when proceeding after the last one | true |
| counter | boolean flag whether to display the page indicator at the bottom, e.g. 1/7 means: page one of seven | true |
| prevText | label of the previous page link | prev |
| nextText | label of the next page link | next |

---++ Examples

%JQREQUIRE{"serialpager"}%

<div class="jqSerialPager myPager {pagesize:5, width:200}">
<div class="jqSerialPager myPager" data-pagesize="5" data-width="200">
* item 1
* item 2
* item 3
Expand Down Expand Up @@ -95,6 +93,7 @@ register the serial pager widget to Foswiki.
%$DEPENDENCIES%

---++ Change History
| 01 Nov 2016: | added filter feature to search in large lists |
| 02 Sep 2016: | fixed calculation of width of lists items in pager |
| 11 Jul 2012: | initial release |

Expand Down
4 changes: 2 additions & 2 deletions lib/Foswiki/Contrib/JQSerialPagerContrib.pm
Expand Up @@ -18,8 +18,8 @@ package Foswiki::Contrib::JQSerialPagerContrib;
use strict;
use warnings;

our $VERSION = '1.01';
our $RELEASE = '02 Sep 2016';
our $VERSION = '2.00';
our $RELEASE = '01 Dec 2016';
our $SHORTDESCRIPTION = 'Splits up a list and makes it a pager scroller thingy';
our $NO_PREFS_IN_TOPIC = 1;

Expand Down
5 changes: 3 additions & 2 deletions lib/Foswiki/Contrib/JQSerialPagerContrib/Core.pm
Expand Up @@ -27,14 +27,15 @@ sub new {
my $this = bless(
$class->SUPER::new(
name => 'SerialPager',
version => '1.01',
version => '2.00',
author => 'Michael Daum',
homepage => 'http://foswiki.org/Extensions/JQSerialPagerContrib',
documentation => 'JQSerialPagerContrib',
css => ['jquery.serialpager.css'],
javascript => ['jquery.serialpager.js'],
puburl => '%PUBURLPATH%/%SYSTEMWEB%/JQSerialPagerContrib',
dependencies => ['livequery', 'serialscroll'],
i18n => $Foswiki::cfg{SystemWebName} . "/JQSerialPagerContrib/i18n",
dependencies => ['livequery', 'serialscroll', 'i18n'],
),
$class
);
Expand Down
3 changes: 3 additions & 0 deletions lib/Foswiki/Contrib/JQSerialPagerContrib/MANIFEST
@@ -1,7 +1,10 @@
data/System/JQSerialPagerContrib.txt 0644
lib/Foswiki/Contrib/JQSerialPagerContrib/Config.spec 0644
lib/Foswiki/Contrib/JQSerialPagerContrib/Core.pm 0644
lib/Foswiki/Contrib/JQSerialPagerContrib/DEPENDENCIES 0644
lib/Foswiki/Contrib/JQSerialPagerContrib.pm 0644
pub/System/JQSerialPagerContrib/i18n/de.js 0644
pub/System/JQSerialPagerContrib/i18n/en.js 0644
pub/System/JQSerialPagerContrib/JQSerialPagerContribSnap1.png 0644
pub/System/JQSerialPagerContrib/jquery.serialpager.css 0644
pub/System/JQSerialPagerContrib/jquery.serialpager.css.gz 0644
Expand Down
5 changes: 5 additions & 0 deletions pub/System/JQSerialPagerContrib/i18n/de.js
@@ -0,0 +1,5 @@
{
"prev": "zurück",
"next": "weiter"
}

4 changes: 4 additions & 0 deletions pub/System/JQSerialPagerContrib/i18n/en.js
@@ -0,0 +1,4 @@
{
"prev": "prev",
"next": "next"
}
229 changes: 141 additions & 88 deletions pub/System/JQSerialPagerContrib/jquery.serialpager.uncompressed.js
@@ -1,8 +1,9 @@
/*
* serial scroller
*
* (c)opyright 2012 Michael Daum http://michaeldaumconsulting.com
* (c)opyright 2012-2016 Michael Daum http://michaeldaumconsulting.com
*/
"use strict";
(function($) {

var defaults = {
Expand All @@ -12,116 +13,168 @@
duration: 500,
cycle: true,
counter: true,
prevText: 'prev',
nextText: 'next',
widthElem: undefined
};

/* impl */
$.fn.serialPager = function(opts) {
var $pager = this, // already a jquery object
$ul = $pager.find("ul:first"),
nrVals = $ul.children("li").length;
function SerialPager(elem, opts) {
var self = this;

//console.log("pager=",$pager);
//console.log("opts=",opts);
//console.log("nrVals="+nrVals);
self.elem = $(elem);
self.opts = $.extend({}, defaults, opts, self.elem.data());
self.init();
}

// add pager if pagesize is exceeded
if ($pager.length && nrVals > opts.pagesize) {

// propagate to data cache
$pager.data(opts);
SerialPager.prototype.init = function () {
var self = this;

// create pane holding lists if items
var $pane = $("<div class='jqSerialPagerScrollPane'></div>").appendTo($pager),
nrPages = Math.ceil(nrVals / opts.pagesize);
self.elem.on("refresh", function(ev, filter) {
//console.log("got a refresh event",filter);
self.undoPager();
if (typeof(filter)) {
self.opts.filter = filter;
} else {
self.opts.filter = undefined;
}
self.setupPager();
});

//console.log($pane, "nrVals="+nrVals,"pagesize="+opts.pagesize,"nrPages="+nrPages);
self.setupPager();
};

for (var page = 0; page < nrPages; page++) {
var $newUl = $("<ul class='jqSerialPagerPage'></ul>").appendTo($pane);
$ul.find("li:lt("+opts.pagesize+")").appendTo($newUl);
}
$("<span class='foswikiClear' />").appendTo($pane);

// remove the old list as everything has been moved over to the pane
$ul.remove();

// create pager ui
var $buttons = $("<div class='jqSerialPagerButtons'></div>").width(opts.width).insertAfter($pager);
var $prev = $("<a href='#' class='jqSerialPagerPrev'>"+opts.prevText+"</a>").appendTo($buttons);
var $next = $("<a href='#' class='jqSerialPagerNext'>"+opts.nextText+"</a>").appendTo($buttons);
var $counter;

if(opts.counter) {
$counter = $("<div class='jqSerialPagerCounter'>1/"+nrPages+"</div>").appendTo($buttons);
}
SerialPager.prototype.setupPager = function() {
var self = this,
nrVals, page,
$ul = self.elem.find("ul"),
$newUl, $prev, $next, $counter,
nrPages, $pane, filterRegExp;

if (typeof(self.buttons) !== 'undefined') {
self.buttons.remove();
self.buttons = undefined;
}

if (self.opts.filter) {
filterRegExp = new RegExp(self.opts.filter, "i");
$ul.children("li").each(function() {
var li = $(this);
if (filterRegExp.test(li.text())) {
li.removeClass("foswikiHidden");
} else {
li.addClass("foswikiHidden");
}
});
} else {
$ul.children("li").removeClass("foswikiHidden");
}

nrVals = $ul.children("li").not(".foswikiHidden").length;

$("<span class='foswikiClear' />").appendTo($buttons);

// init the serial scroll
$pager.serialScroll({
items:'.jqSerialPagerPage',
prev:$prev,
next:$next,
constant:false,
duration:opts.duration,
start:0,
force:false,
cycle:opts.cycle,
lock:false,
easing:opts.easing,
onBefore:function(e, elem, $pane, items, pos) {
var cycle = $pane.data("cycle"),
counter = $pane.data("counter");
if(counter) {
$counter.html((pos+1)+"/"+nrPages);
// add pager if pagesize is exceeded
if (nrVals <= self.opts.pagesize) {
return 0;
}

// create pane holding lists if items
$pane = $("<div class='jqSerialPagerScrollPane clearfix'></div>").appendTo(self.elem);
nrPages = Math.ceil(nrVals / self.opts.pagesize);

//console.log("nrVals="+nrVals,"pagesize="+self.opts.pagesize,"nrPages="+nrPages);

for (page = 0; page < nrPages; page++) {
$newUl = $("<ul class='jqSerialPagerPage'></ul>").appendTo($pane);
$ul.find("li:lt("+self.opts.pagesize+")").appendTo($newUl);
}

// remove the old list as everything has been moved over to the pane
$ul.remove();

// create pager ui
self.buttons = $("<div class='jqSerialPagerButtons clearfix'></div>").width(self.opts.width).insertAfter(self.elem);
$prev = $("<a href='#' class='jqSerialPagerPrev i18n'>prev</a>").appendTo(self.buttons);
$next = $("<a href='#' class='jqSerialPagerNext i18n'>next</a>").appendTo(self.buttons);

if(self.opts.counter) {
$counter = $("<div class='jqSerialPagerCounter'>1/"+nrPages+"</div>").appendTo(self.buttons);
}

// init the serial scroll
self.elem.serialScroll({
items:'.jqSerialPagerPage',
prev:$prev,
next:$next,
constant:false,
duration:self.opts.duration,
start:0,
force:false,
cycle:self.opts.cycle,
lock:false,
easing:self.opts.easing,
onBefore:function(e, elem, $pane, items, pos) {
var cycle = $pane.data("cycle");
if (typeof($counter) !== 'undefined') {
$counter.html((pos+1)+"/"+nrPages);
}
if (!cycle) {
if (pos === 0) {
$prev.css("visibility", "hidden");
} else {
$prev.css("visibility", "visible");
}
if (!cycle) {
if (pos == 0) {
$prev.css("visibility", "hidden");
} else {
$prev.css("visibility", "visible");
}
if (pos+1 === nrPages) {
$next.css("visibility", "hidden");
} else {
$next.css("visibility", "visible");
}
if (pos+1 === nrPages) {
$next.css("visibility", "hidden");
} else {
$next.css("visibility", "visible");
}
}
});
}
});

// initial button state
if (!opts.cycle) {
$prev.css("visibility", "hidden");
// fix width of pages
setTimeout(function() {
var $widthElem = self.opts.widthElem?self.elem.find(self.opts.widthElem).first():self.elem,
width = $widthElem.width();
if (width) {
self.elem.find(".jqSerialPagerPage").css("width", width);
}
}, 0);

self.elem.width(self.opts.width);

// initial button state
if (!self.opts.cycle) {
$prev.css("visibility", "hidden");
}

//$pager.find(".foswikiClear").insertAfter($buttons);
return nrPages;
};

SerialPager.prototype.undoPager = function() {
var self = this,
$newUl = $("<ul></ul>");

// fix width of pages
setTimeout(function() {
var $widthElem = opts.widthElem?$pager.find(opts.widthElem).first():$pager,
width = $widthElem.width();
if (width) {
$pager.find(".jqSerialPagerPage").css("width", width);
}
}, 0);
self.elem.find(".jqSerialPagerPage>li").each(function() {
$newUl.append(this);
});

$pager.width(opts.width);
}
self.elem.find(".jqSerialPagerScrollPane").remove();
$newUl.appendTo(self.elem);

return $newUl.length;
};

return $pager;
$.fn.serialPager = function (opts) {
return this.each(function () {
if (!$.data(this, "SerialPager")) {
$.data(this, "SerialPager", new SerialPager(this, opts));
}
});
};

/* init */
$(function() {
$(".jqSerialPager:not(.jqInitedSerialPager)").livequery(function() {
var $this = $(this),
opts = $.extend({}, defaults, $this.data(), $this.metadata());
var $this = $(this);

$this.serialPager(opts).addClass("jqInitedSerialPager");
$this.serialPager().addClass("jqInitedSerialPager");
});
});
})(jQuery);

0 comments on commit 85561c6

Please sign in to comment.