462 lines
15 KiB
JavaScript
462 lines
15 KiB
JavaScript
|
/*
|
||
|
|
* This file is part of Toolkit.
|
||
|
|
*
|
||
|
|
* Toolkit is free software; you can redistribute it and/or
|
||
|
|
* modify it under the terms of the GNU General Public
|
||
|
|
* License as published by the Free Software Foundation; either
|
||
|
|
* version 3 of the License, or (at your option) any later version.
|
||
|
|
*
|
||
|
|
* Toolkit is distributed in the hope that it will be useful,
|
||
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||
|
|
* Lesser General Public License for more details.
|
||
|
|
*
|
||
|
|
* You should have received a copy of the GNU General
|
||
|
|
* Public License along with this program; if not, write to the
|
||
|
|
* Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
|
||
|
|
* Boston, MA 02110-1301 USA
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The <code>useraction</code> event is emitted when a widget gets modified by user interaction.
|
||
|
|
* The event is emitted for the option <code>show</code>.
|
||
|
|
*
|
||
|
|
* @event TK.Pager#useraction
|
||
|
|
*
|
||
|
|
* @param {string} name - The name of the option which was changed due to the users action
|
||
|
|
* @param {mixed} value - The new value of the option
|
||
|
|
*/
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
(function(w, TK){
|
||
|
|
TK.Pager = TK.class({
|
||
|
|
/**
|
||
|
|
* TK.Pager, also known as Notebook in other UI toolkits, provides
|
||
|
|
* multiple containers for displaying contents which are switchable
|
||
|
|
* via a {@link TK.ButtonArray}.
|
||
|
|
*
|
||
|
|
* @class TK.Pager
|
||
|
|
*
|
||
|
|
* @param {Object} [options={ }] - An object containing initial options.
|
||
|
|
*
|
||
|
|
* @property {String} [options.position="top"] - The position of the ButtonArray. Can either be `top`, `right`, `left` or `bottom`.
|
||
|
|
* @property {Array<Object>} [options.pages=[]] -
|
||
|
|
* An array of objects with the following members:
|
||
|
|
* @property {String|Object} [options.pages.label=""] - A string
|
||
|
|
* used as the buttons label or an object containing options for
|
||
|
|
* a {@link TK.Button}.
|
||
|
|
* @property {TK.Container|DOMNode|String} [options.pages.content]
|
||
|
|
* - The content of the page. Can be
|
||
|
|
* either an instance of {@link TK.Container} (or derivate),
|
||
|
|
* a DOMNode or a string which gets wrapped in a new {@link TK.Container}.
|
||
|
|
* @property {Integer} [options.show=-1] - The page to show.
|
||
|
|
*
|
||
|
|
* @extends TK.Container
|
||
|
|
*
|
||
|
|
* @example
|
||
|
|
* var pager = new TK.Pager({
|
||
|
|
* pages: [
|
||
|
|
* {
|
||
|
|
* label: "Empty Page 1",
|
||
|
|
* content: document.createElement("span")
|
||
|
|
* },
|
||
|
|
* {
|
||
|
|
* label: { label:"Foobar", class:"foobar" },
|
||
|
|
* content: "<h1>Foobar</h1><p>Lorem ipsum dolor sit amet</p>"
|
||
|
|
* }
|
||
|
|
* ]
|
||
|
|
* });
|
||
|
|
*/
|
||
|
|
_class: "Pager",
|
||
|
|
Extends: TK.Container,
|
||
|
|
_options: Object.assign(Object.create(TK.Container.prototype._options), {
|
||
|
|
position: "string",
|
||
|
|
direction: "string",
|
||
|
|
pages: "array",
|
||
|
|
show: "int",
|
||
|
|
resized: "boolean",
|
||
|
|
}),
|
||
|
|
options: {
|
||
|
|
position: "top",
|
||
|
|
direction: "forward",
|
||
|
|
pages: [],
|
||
|
|
show: -1,
|
||
|
|
resized: false,
|
||
|
|
},
|
||
|
|
static_events: {
|
||
|
|
set_show: function(value) {
|
||
|
|
var page = this.current();
|
||
|
|
|
||
|
|
if (page) {
|
||
|
|
page.set("active", true);
|
||
|
|
this.show_child(page);
|
||
|
|
/**
|
||
|
|
* The page to show has changed.
|
||
|
|
*
|
||
|
|
* @param {TK.Container} page - The {@link TK.Container} instance of the newly selected page.
|
||
|
|
* @param {number} id - The ID of the page.
|
||
|
|
*
|
||
|
|
* @event TK.Pager#changed
|
||
|
|
*/
|
||
|
|
this.fire_event("changed", page, value);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
set_pages: function(value) {
|
||
|
|
for (var i = 0; i < this.pages.length; i++)
|
||
|
|
this.pages[i].destroy();
|
||
|
|
this.pages = [];
|
||
|
|
this.add_pages(value);
|
||
|
|
},
|
||
|
|
set_position: function(value) {
|
||
|
|
var badir;
|
||
|
|
if (value === "top" || value === "bottom") {
|
||
|
|
badir = "horizontal";
|
||
|
|
} else {
|
||
|
|
badir = "vertical";
|
||
|
|
}
|
||
|
|
this.buttonarray.set("direction", badir);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
initialize: function (options) {
|
||
|
|
this.pages = [];
|
||
|
|
TK.Container.prototype.initialize.call(this, options);
|
||
|
|
/**
|
||
|
|
* The main DIV element. Has the class <code>toolkit-pager</code>.
|
||
|
|
*
|
||
|
|
* @member TK.Pager#element
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* @member {HTMLDivElement} TK.Pager#_buttonarray_wrapper - An internal container for layout purposes containing the #TK.ButtonArray.
|
||
|
|
* Has classes <code>toolkit-buttonarray-wrapper</code> and <code>toolkit-wrapper</code>.
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* @member {HTMLDivElement} TK.Pager#_container_wrapper - An internal container for layout purposes containing the _clip element.
|
||
|
|
* Has classes <code>toolkit-wrapper</code> and <code>toolkit-container-wrapper</code>.
|
||
|
|
*/
|
||
|
|
/**
|
||
|
|
* @member {HTMLDivElement} TK.Pager#_clip - The clipping area containing the pages.
|
||
|
|
* Has class <code>toolkit-clip</code>.
|
||
|
|
*/
|
||
|
|
TK.add_class(this.element, "toolkit-pager");
|
||
|
|
/**
|
||
|
|
* The {@link TK.ButtonArray} instance acting as the menu.
|
||
|
|
*
|
||
|
|
* @member TK.Pager#buttonarray
|
||
|
|
*/
|
||
|
|
this.buttonarray = new TK.ButtonArray({
|
||
|
|
container: this.element,
|
||
|
|
});
|
||
|
|
this.buttonarray.add_event("userset", function(key, value) {
|
||
|
|
this.parent.userset(key, value);
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
var b_o = this.buttonarray._options;
|
||
|
|
var _o = this._options;
|
||
|
|
for (var k in b_o) {
|
||
|
|
if (!b_o.hasOwnProperty(k)) continue;
|
||
|
|
var o = "buttonarray." + k;
|
||
|
|
_o[o] = b_o[k];
|
||
|
|
this.add_event("set_" + o, (function (t,k) {
|
||
|
|
return function (v) {
|
||
|
|
t.buttonarray.set(k, v);
|
||
|
|
}
|
||
|
|
})(this, k));
|
||
|
|
if (typeof this.options[o] !== "undefined")
|
||
|
|
this.set(o, this.options[o]);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @member {HTMLDivElement} TK.Pager#_clip - The clipping of the pages.
|
||
|
|
* Has class <code>toolkit-clip</code>.
|
||
|
|
*/
|
||
|
|
this._clip = TK.element("div", "toolkit-clip");
|
||
|
|
this.element.appendChild(this._clip);
|
||
|
|
|
||
|
|
this.add_child(this.buttonarray);
|
||
|
|
this.add_pages(this.options.pages);
|
||
|
|
this.set("position", this.options.position);
|
||
|
|
this.set("show", this.options.show);
|
||
|
|
},
|
||
|
|
|
||
|
|
redraw: function () {
|
||
|
|
TK.Container.prototype.redraw.call(this);
|
||
|
|
var O = this.options;
|
||
|
|
var I = this.invalid;
|
||
|
|
var E = this.element;
|
||
|
|
|
||
|
|
if (I.overlap)
|
||
|
|
TK[(O.overlap ? "add_" : "remove_") + "class"](E, "toolkit-overlap");
|
||
|
|
|
||
|
|
if (I.direction) {
|
||
|
|
I.direction = false;
|
||
|
|
TK.remove_class(E, "toolkit-forward", "toolkit-backward");
|
||
|
|
TK.add_class(E, "toolkit-" + O.direction);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (I.position) {
|
||
|
|
I.position = false;
|
||
|
|
TK.remove_class(E, "toolkit-top", "toolkit-right", "toolkit-bottom",
|
||
|
|
"toolkit-left", "toolkit-vertical", "toolkit-horizontal");
|
||
|
|
switch (O.position) {
|
||
|
|
case "top":
|
||
|
|
TK.add_class(E, "toolkit-top", "toolkit-vertical");
|
||
|
|
break;
|
||
|
|
case "bottom":
|
||
|
|
TK.add_class(E, "toolkit-bottom", "toolkit-vertical");
|
||
|
|
break;
|
||
|
|
case "left":
|
||
|
|
TK.add_class(E, "toolkit-left", "toolkit-horizontal");
|
||
|
|
break;
|
||
|
|
case "right":
|
||
|
|
TK.add_class(E, "toolkit-right", "toolkit-horizontal");
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
TK.warn("Unsupported position", O.position);
|
||
|
|
}
|
||
|
|
I.layout = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (I.show) {
|
||
|
|
I.show = false;
|
||
|
|
for (var i = 0; i < this.pages.length; i ++) {
|
||
|
|
var page = this.pages[i];
|
||
|
|
if (i === O.show)
|
||
|
|
page.add_class("toolkit-active");
|
||
|
|
else
|
||
|
|
page.remove_class("toolkit-active");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Adds an array of pages.
|
||
|
|
*
|
||
|
|
* @method TK.Pager#add_pages
|
||
|
|
*
|
||
|
|
* @param {Array<Object>} options - An Array of objects with members
|
||
|
|
* `label` and `content`. `label` is a string with the {@link TK.Button}s label or
|
||
|
|
* an object containing options for the {@link TK.Button} instance.
|
||
|
|
* `content` is either a {@link TK.Container} (or derivate) widget,
|
||
|
|
* a DOMNode (needs option `options` to be set) or a string which
|
||
|
|
* gets wrapped in a new {@link TK.Container} with options from
|
||
|
|
* argument `options`.
|
||
|
|
*
|
||
|
|
* @example
|
||
|
|
* var p = new TK.Pager();
|
||
|
|
* p.add_pages([
|
||
|
|
* {
|
||
|
|
* label: "Page 1",
|
||
|
|
* content: "<h1>Page1</h1>",
|
||
|
|
* }
|
||
|
|
* ]);
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
add_pages: function (options) {
|
||
|
|
for (var i = 0; i < options.length; i++)
|
||
|
|
this.add_page(options[i].label, options[i].content);
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Adds a {@link TK.Container} to the pager and a corresponding {@link TK.Button}
|
||
|
|
* to the pagers {@link TK.ButtonArray}.
|
||
|
|
*
|
||
|
|
* @method TK.Pager#add_page
|
||
|
|
*
|
||
|
|
* @param {string|Object} button - A string with the {@link TK.Button}s label or
|
||
|
|
* an object containing options for the {@link TK.Button} instance.
|
||
|
|
* @param {TK.Widget|Class|string} content - The content of the page.
|
||
|
|
* Either a {@link TK.Container} (or derivate) widget,
|
||
|
|
* a DOMNode (needs option `options` to be set) or a string which
|
||
|
|
* gets wrapped in a new {@link TK.Container} with options from
|
||
|
|
* argument `options`.
|
||
|
|
* @param {Object} [options={ }] - An object containing options for
|
||
|
|
* the {@link TK.Container} to be added as page if `content` is
|
||
|
|
* either a string or a DOMNode.
|
||
|
|
* @param {integer|undefined} position - The position to add the new
|
||
|
|
* page to. If undefined, the page is added at the end.
|
||
|
|
* @emits TK.Pager#added
|
||
|
|
*/
|
||
|
|
add_page: function (button, content, position, options) {
|
||
|
|
var p;
|
||
|
|
if (typeof button === "string")
|
||
|
|
button = {label: button};
|
||
|
|
this.buttonarray.add_button(button, position);
|
||
|
|
|
||
|
|
if (typeof content === "string" || TK.is_dom_node(content)) {
|
||
|
|
if (!options) options = {};
|
||
|
|
options.content = content;
|
||
|
|
p = new TK.Container(options);
|
||
|
|
} else if (typeof content === "function") {
|
||
|
|
// assume here content is a subclass of Container
|
||
|
|
p = new content(options);
|
||
|
|
} else {
|
||
|
|
p = content;
|
||
|
|
}
|
||
|
|
|
||
|
|
p.add_class("toolkit-page");
|
||
|
|
p.set("container", this._clip);
|
||
|
|
|
||
|
|
var len = this.pages.length;
|
||
|
|
|
||
|
|
if (position >= 0 && position < len - 1) {
|
||
|
|
this.pages.splice(position, 0, p);
|
||
|
|
this._clip.insertBefore(p.element, this._clip.childNodes[position]);
|
||
|
|
} else {
|
||
|
|
position = len;
|
||
|
|
this.pages.push(p);
|
||
|
|
this._clip.appendChild(p.element);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* A page was added to the TK.Pager.
|
||
|
|
*
|
||
|
|
* @event TK.Pager#added
|
||
|
|
*
|
||
|
|
* @param {TK.Container} page - The {@link TK.Container} which was added as a page.
|
||
|
|
*/
|
||
|
|
this.fire_event("added", p);
|
||
|
|
|
||
|
|
this.add_child(p);
|
||
|
|
|
||
|
|
// TODO: not always necessary
|
||
|
|
if (this.current() === p) {
|
||
|
|
this.options.show = position;
|
||
|
|
this.buttonarray.set("show", position);
|
||
|
|
p.set("active", true);
|
||
|
|
p.set("display_state", "show");
|
||
|
|
} else {
|
||
|
|
/* do not use animation */
|
||
|
|
p.force_hide();
|
||
|
|
this.hide_child(p);
|
||
|
|
}
|
||
|
|
this.invalid.layout = true;
|
||
|
|
this.trigger_draw();
|
||
|
|
return p;
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Removes a page from the TK.Pager.
|
||
|
|
*
|
||
|
|
* @method TK.Pager#remove_page
|
||
|
|
*
|
||
|
|
* @param {integer|TK.Container} page - The container to remove. Either a
|
||
|
|
* position or the {@link TK.Container} widget generated by <code>add_page</code>.
|
||
|
|
*
|
||
|
|
* @emits TK.Pager#removed
|
||
|
|
*/
|
||
|
|
remove_page: function (page) {
|
||
|
|
if (typeof page === "object")
|
||
|
|
page = this.pages.indexOf(page);
|
||
|
|
if (page < 0 || page >= this.pages.length)
|
||
|
|
return;
|
||
|
|
this.buttonarray.remove_button(page);
|
||
|
|
if (page < this.options.show)
|
||
|
|
this.set("show", this.options.show-1);
|
||
|
|
else if (page === this.options.show)
|
||
|
|
this.set("show", this.options.show);
|
||
|
|
var p = this.pages[page];
|
||
|
|
this.pages.splice(page, 1);
|
||
|
|
p.destroy();
|
||
|
|
this.remove_child(p);
|
||
|
|
this.invalid.layout = true;
|
||
|
|
this.trigger_draw();
|
||
|
|
/**
|
||
|
|
* A page was removed from the Pager
|
||
|
|
*
|
||
|
|
* @event TK.Pager#removed
|
||
|
|
*
|
||
|
|
* @param {TK.Container} page - The {@link TK.Container} which was removed.
|
||
|
|
*/
|
||
|
|
this.fire_event("removed", p);
|
||
|
|
},
|
||
|
|
|
||
|
|
current: function() {
|
||
|
|
/**
|
||
|
|
* Returns the currently displayed page or null.
|
||
|
|
*
|
||
|
|
* @method TK.Pager#current
|
||
|
|
*/
|
||
|
|
var n = this.options.show;
|
||
|
|
if (n >= 0 && n < this.pages.length) {
|
||
|
|
return this.pages[n];
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Opens the first page of the pager. Returns <code>true</code> if a
|
||
|
|
* first page exists, <code>false</code> otherwise.
|
||
|
|
*
|
||
|
|
* @method TK.Pager#first
|
||
|
|
*/
|
||
|
|
first: function() {
|
||
|
|
if (this.pages.length) {
|
||
|
|
this.set("show", 0);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* Opens the last page of the pager. Returns <code>true</code> if a
|
||
|
|
* last page exists, <code>false</code> otherwise.
|
||
|
|
*
|
||
|
|
* @method TK.Pager#last
|
||
|
|
*/
|
||
|
|
last: function() {
|
||
|
|
if (this.pages.length) {
|
||
|
|
this.set("show", this.pages.length-1);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Opens the next page of the pager. Returns <code>true</code> if a
|
||
|
|
* next page exists, <code>false</code> otherwise.
|
||
|
|
*
|
||
|
|
* @method TK.Pager#next
|
||
|
|
*/
|
||
|
|
next: function() {
|
||
|
|
var c = this.options.show;
|
||
|
|
return this.set("show", c+1) !== c;
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* Opens the previous page of the pager. Returns <code>true</code> if a
|
||
|
|
* previous page exists, <code>false</code> otherwise.
|
||
|
|
*
|
||
|
|
* @method TK.Pager#prev
|
||
|
|
*/
|
||
|
|
prev: function() {
|
||
|
|
var c = this.options.show;
|
||
|
|
return this.set("show", c-1) !== c;
|
||
|
|
},
|
||
|
|
|
||
|
|
set: function (key, value) {
|
||
|
|
var page;
|
||
|
|
if (key === "show") {
|
||
|
|
if (value < 0) value = 0;
|
||
|
|
else if (value >= this.pages.length) value = this.pages.length - 1;
|
||
|
|
|
||
|
|
if (value === this.options.show) return value;
|
||
|
|
if (value > this.options.show) {
|
||
|
|
this.set("direction", "forward");
|
||
|
|
} else {
|
||
|
|
this.set("direction", "backward");
|
||
|
|
}
|
||
|
|
page = this.current();
|
||
|
|
if (page) {
|
||
|
|
this.hide_child(page);
|
||
|
|
page.set("active", false);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.buttonarray.set("show", value);
|
||
|
|
}
|
||
|
|
return TK.Container.prototype.set.call(this, key, value);
|
||
|
|
},
|
||
|
|
get: function (key) {
|
||
|
|
if (key === "pages") return this.pages;
|
||
|
|
return TK.Container.prototype.get.call(this, key);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})(this, this.TK);
|