Introduce pagination panel (fixes #141)
Change-Id: Ib8522c4d154b96630abcd23c7115b2fb4633bdfb
diff --git a/dev/js/src/buttongroup.js b/dev/js/src/buttongroup.js
index 85c6555..31f60c8 100644
--- a/dev/js/src/buttongroup.js
+++ b/dev/js/src/buttongroup.js
@@ -129,12 +129,13 @@
this._omOutside ? true : false,
);
- this.add(title, data, function (e) {
+ let b = this.add(title, data, function (e) {
list.show();
list.button(this.button);
list.focus();
});
- return list;
+ b.list = list;
+ return b;
},
/**
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 54ffd98..724cfb3 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -28,6 +28,7 @@
'selectMenu',
'panel/result',
'panel/query',
+ 'panel/pagination',
'tour/tours',
'plugin/server',
'pipe',
@@ -46,6 +47,7 @@
selectMenuClass,
resultPanelClass,
queryPanelClass,
+ paginationPanelClass,
tourClass,
pluginClass,
pipeClass) {
@@ -255,7 +257,7 @@
* Add result panel
*/
var resultPanel = resultPanelClass.create(show);
-
+
if (resultInfo != null) {
// Move buttons to resultinfo
@@ -435,7 +437,18 @@
// The views are below the query bar
sform.insertBefore(queryPanel.element(), vcView);
KorAP.Panel['query'] = queryPanel;
- }
+ };
+
+
+ /**
+ * Add pagination panel
+ */
+ const paginationPanel = paginationPanelClass.create();
+
+ if (paginationPanel) {
+ paginationPanel.addRandomPage();
+ KorAP.Panel['pagination'] = paginationPanel;
+ };
/**
diff --git a/dev/js/src/loc/de.js b/dev/js/src/loc/de.js
index a7c0080..dec8970 100644
--- a/dev/js/src/loc/de.js
+++ b/dev/js/src/loc/de.js
@@ -74,6 +74,7 @@
loc.TOUR_treeb = loc.TOUR_tree || "Anzeige weiterer Ansichten"
loc.TOUR_tree = loc.TOUR_tree || "Weitere Ansichten können als Baum- oder Bogenansichten angezeigt werden.";
loc.TOUR_tourdone = "Viel Spaß mit KorAP!";
-
-
+
+ // Pagination panel
+ loc.RANDOM_PAGE = 'Zufallsseite';
});
diff --git a/dev/js/src/panel/pagination.js b/dev/js/src/panel/pagination.js
new file mode 100644
index 0000000..f084e51
--- /dev/null
+++ b/dev/js/src/panel/pagination.js
@@ -0,0 +1,92 @@
+/**
+ * The pagination panel
+ *
+ * @author Nils Diewald
+ */
+"use strict";
+
+define([
+ 'panel',
+ 'buttongroup',
+ 'pageInfo'
+], function (panelClass, buttonGroupClass, pageInfoClass) {
+
+ const d = document;
+
+ // Localization values
+ const loc = KorAP.Locale;
+ loc.RANDOM_PAGE = loc.RANDOM_PAGE || 'Random page';
+
+
+ return {
+ create : function () {
+ return Object.create(panelClass)._init(['pagination']).upgradeTo(this)._init();
+ },
+
+ // Initialize panel
+ _init : function () {
+
+ // Override existing button group
+ // This allows actions.add() ... to work for list items in server.js
+ let pagEl = document.getElementById("pagination");
+ if (pagEl === null) {
+ return null;
+ };
+
+ // Do not show if no pages exist
+ if (pagEl.getAttribute('data-total') === '0') {
+ return null;
+ };
+
+ this._actions.panel = undefined;
+ this._actions.clear();
+
+ const bg = buttonGroupClass.adopt(pagEl);
+ bg._omOutside = true;
+ bg._omLeft = true;
+
+ bg.anchor(pagEl.lastElementChild);
+
+ let button = bg.addList("More", {'cls':['button-group-list','button-icon']});
+ this._actions = button.list;
+ this._bg = bg;
+
+ button.setAttribute('data-icon',"\uf0c9");
+
+ // Warning: This is circular
+ this._actions.panel = this;
+
+ this.prepend = true;
+
+ return this;
+ },
+
+ /**
+ * The buttongroup holding the pagination panel.
+ * This differs from action, as action contains the list.
+ */
+ buttonGroup : function () {
+ return this._bg;
+ },
+
+
+ /**
+ * Add random paginator to list
+ */
+ addRandomPage : function () {
+ const pi = pageInfoClass.create();
+
+ const button = this.actions().add(
+ loc.RANDOM_PAGE,
+ {},
+ function () {
+ if (pi.total() > 0) {
+ const sp = new URLSearchParams(window.location.search);
+ sp.set("p", Math.floor(Math.random() * pi.total()) + 1);
+ window.location.search = sp.toString();
+ };
+ }
+ )
+ }
+ }
+});