mirror of
https://github.com/Ardour/ardour.git
synced 2026-01-04 12:45:45 +01:00
WS: Improve mixer demo
This commit is contained in:
Luciano Iam
Robin Gareus
parent
2987350892
commit
1109fc7983
192 changed files with 29395 additions and 548 deletions
461
share/web_surfaces/builtin/mixer/toolkit/widgets/pager.js
Normal file
461
share/web_surfaces/builtin/mixer/toolkit/widgets/pager.js
Normal file
|
|
@ -0,0 +1,461 @@
|
|||
/*
|
||||
* 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);
|
||||
Loading…
Add table
Add a link
Reference in a new issue