"
23 | + "Thanks for testing TK. We hope you like "
24 | + "the functionality, complexity and style. If you have any "
25 | + "sugestions or bug reports, please let us know.
7 | .toolkit-clock {
8 | width: 40%;
9 | height: 40%;
10 | }
11 |
21 | .toolkit-frequency-response {
22 | margin: 10px;
23 | width: calc(100% - 20px);
24 | height: calc(100% - 20px);
25 | }
26 |
20 | .toolkit-toggle {
21 | margin-right: 10px;
22 | }
23 |
30 | .toolkit-dynamics {
31 | width: 250px;
32 | height: 250px;
33 | }
34 | | Title | [title] |
| Name | [name] |
| Family | [family] |
| CSS-File | [name].css |
| TTF-File | [name].ttf |
| HTML | <link href="[name].css" rel="stylesheet" type="text/css"> |
36 | .toolkit-slider {
37 | width: 64px;
38 | height: 64px;
39 | margin: 8px;
40 | }
41 | .toolkit-root {
42 | background: url(images/background_plugin.png);
43 | }
44 |
46 | .toolkit-scale {
47 | display: block;
48 | position: absolute;
49 | }
50 | #sc_scale_v_l {
51 | height: calc(100% - 60px);
52 | top: 30px;
53 | left: 10px;
54 | }
55 | #sc_scale_v_r {
56 | height: calc(100% - 60px);
57 | top: 30px;
58 | right: 10px;
59 |
60 | }
61 | #sc_scale_h_t {
62 | width: calc(100% - 94px);
63 | left: 47px;
64 | top: 10px;
65 | }
66 | #sc_scale_h_b {
67 | width: calc(100% - 94px);
68 | left: 47px;
69 | bottom: 10px;
70 | }
71 | toolkit-frame.
44 | */
45 | TK.add_class(this.element, "toolkit-frame");
46 | },
47 | });
48 | /**
49 | * @member {TK.Label} TK.Frame#label - The {@link TK.Label} of the frame.
50 | */
51 | TK.ChildWidget(TK.Frame, "label", {
52 | create: TK.Label,
53 | option: "label",
54 | inherit_options: true,
55 | default_options: {
56 | class: "toolkit-frame-label"
57 | },
58 | });
59 | })(this, this.TK);
60 |
--------------------------------------------------------------------------------
/toolkit/styles/2013/css/select.css:
--------------------------------------------------------------------------------
1 | /*
2 | * This file is part of Toolkit.
3 | *
4 | * Toolkit is free software; you can redistribute it and/or
5 | * modify it under the terms of the GNU General Public
6 | * License as published by the Free Software Foundation; either
7 | * version 3 of the License, or (at your option) any later version.
8 | *
9 | * Toolkit is distributed in the hope that it will be useful,
10 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
12 | * Lesser General Public License for more details.
13 | *
14 | * You should have received a copy of the GNU General
15 | * Public License along with this program; if not, write to the
16 | * Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
17 | * Boston, MA 02110-1301 USA
18 | */
19 | .toolkit-button.toolkit-select {
20 | padding-left: 8px;
21 | padding-right: 8px;
22 | }
23 |
24 | .toolkit-button.toolkit-select > .toolkit-cell > .toolkit-label {
25 | margin-right: 20px;
26 | }
27 | .toolkit-button.toolkit-select > .toolkit-cell > .toolkit-arrow {
28 | background: url(../images/select/arrow_down.png) 50% 50% no-repeat;
29 | width: 16px;
30 | position: absolute;
31 | top: 0;
32 | right: 0;
33 | bottom: 0;
34 | }
35 |
36 | .toolkit-select-list {
37 | background: #efefef;
38 | border: 1px solid white;
39 | margin: 0;
40 | padding: 0;
41 | -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
42 | -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
43 | box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
44 | transition: opacity 200ms;
45 | text-align: left;
46 | }
47 |
48 | .toolkit-select-list > .toolkit-option {
49 | list-style: none;
50 | margin: 0;
51 | padding: 0 5px;
52 | line-height: 2em;
53 | cursor: pointer;
54 | transition: background 0.25s ease-in-out, color 0.25s ease-in-out;
55 | }
56 |
57 | .toolkit-select-list > .toolkit-option:hover {
58 | background: #002f42;
59 | color: white;
60 | }
61 | .toolkit-select-list > .toolkit-option.toolkit-active {
62 | background: #dfdfdf;
63 | }
64 |
--------------------------------------------------------------------------------
/toolkit/styles/plain/css/select.css:
--------------------------------------------------------------------------------
1 | /*
2 | * This file is part of Toolkit.
3 | *
4 | * Toolkit is free software; you can redistribute it and/or
5 | * modify it under the terms of the GNU General Public
6 | * License as published by the Free Software Foundation; either
7 | * version 3 of the License, or (at your option) any later version.
8 | *
9 | * Toolkit is distributed in the hope that it will be useful,
10 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
12 | * Lesser General Public License for more details.
13 | *
14 | * You should have received a copy of the GNU General
15 | * Public License along with this program; if not, write to the
16 | * Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
17 | * Boston, MA 02110-1301 USA
18 | */
19 | .toolkit-button.toolkit-select {
20 | padding-left: 8px;
21 | padding-right: 8px;
22 | }
23 |
24 | .toolkit-button.toolkit-select > .toolkit-cell > .toolkit-label {
25 | margin-right: 20px;
26 | }
27 | .toolkit-button.toolkit-select > .toolkit-cell > .toolkit-arrow {
28 | width: 12px;
29 | height: 6px;
30 | position: absolute;
31 | top: 50%;
32 | right: 0;
33 | bottom: 0;
34 | border-width: 8px 6px 0 6px;
35 | border-style: solid;
36 | border-color: white transparent transparent transparent;
37 |
38 | -webkit-transform: translateY(-50%);
39 | -moz-transform: translateY(-50%);
40 | -ms-transform: translateY(-50%);
41 | -o-transform: translateY(-50%);
42 | transform: translateY(-50%);
43 | }
44 |
45 | .toolkit-select-list {
46 | margin: 0;
47 | padding: 0;
48 | transition: opacity 0.25s;
49 | text-align: left;
50 | }
51 |
52 | .toolkit-select-list > .toolkit-option {
53 | list-style: none;
54 | margin: 0;
55 | padding: 0 5px;
56 | line-height: 2em;
57 | cursor: pointer;
58 | transition: background 0.25s ease-in-out, color 0.25s ease-in-out;
59 | display: block;
60 | }
61 |
62 | .toolkit-select-list > .toolkit-option:hover {
63 |
64 | }
65 | .toolkit-select-list > .toolkit-option.toolkit-active {
66 |
67 | }
68 |
--------------------------------------------------------------------------------
/doc/tutorials/ValueButton.md:
--------------------------------------------------------------------------------
1 | function run_valuebutton(root) {
2 | thres = new TK.ValueButton({
3 | label: "Threshold",
4 | icon: "images/icons_small/threshold.png",
5 | value_position: "bottom",
6 | value_format: TK.FORMAT("%.1f dB"),
7 | min: -96,
8 | max: 24,
9 | step: 1,
10 | basis: 300,
11 | shift_up: 4,
12 | shift_down: 0.25,
13 | value: 0,
14 | });
15 |
16 | attack = new TK.ValueButton({
17 | "class": "attack",
18 | label: "Attack",
19 | icon: "images/icons_small/attack.png",
20 | value_position: "bottom",
21 | value_format: TK.FORMAT("%.1f ms"),
22 | min: 1,
23 | max: 1000,
24 | step: 1,
25 | basis: 300,
26 | shift_up: 4,
27 | shift_down: 0.25,
28 | value: 100,
29 | scale: "frequency"
30 | });
31 |
32 | ratio = new TK.ValueButton({
33 | label: "Ratio",
34 | icon: "images/icons_small/ratio.png",
35 | value_position: "bottom",
36 | value_format: TK.FORMAT("%.1f : 1"),
37 | min: 1,
38 | max: 10,
39 | step: 1,
40 | basis: 300,
41 | shift_up: 4,
42 | shift_down: 0.25,
43 | value: 2
44 | });
45 |
46 | release = new TK.ValueButton({
47 | label: "Release",
48 | icon: "images/icons_small/release.png",
49 | value_position: "bottom",
50 | value_format: TK.FORMAT("%.1f ms"),
51 | min: 1,
52 | max: 1000,
53 | step: 1,
54 | basis: 300,
55 | shift_up: 4,
56 | shift_down: 0.25,
57 | value: 100,
58 | scale: "frequency"
59 | });
60 |
61 | root.append_children([ thres, attack, ratio, release ]);
62 | }
63 |
64 | .toolkit-valuebutton {
65 | width: 240px;
66 | }
67 | toolkit-response-handler.
42 | */
43 | TK.add_class(this.element, "toolkit-response-handler");
44 | /**
45 | * @member {SVGImage} TK.ResponseHandler#_handles - An SVG group element containing all {@link TK.ResponseHandle} graphics.
46 | * Has class toolkit-response-handles.
47 | */
48 | TK.add_class(this._handles, "toolkit-response-handles");
49 | },
50 | });
51 | })(this, this.TK);
52 |
--------------------------------------------------------------------------------
/doc/tutorials/MeterBase.md:
--------------------------------------------------------------------------------
1 | function run_meterbase(root) {
2 | mbvl = new TK.MeterBase({
3 | layout: "right",
4 | scale: "decibel",
5 | segment: 2,
6 | min: -60,
7 | max: 3,
8 | value: 18,
9 | scale_base: 0,
10 | title: "left",
11 | show_title: true,
12 | show_label: true,
13 | gradient: {"-96": "#001f83", "-0.1": "#008bea", "0": "#ff6000", "24": "#ffa000"},
14 | levels: [1, 3, 6, 12],
15 | gap_labels: 20
16 | });
17 | mbvr = new TK.MeterBase({
18 | layout: "left",
19 | segment: 2,
20 | min: -96,
21 | max: 24,
22 | value: 6,
23 | scale_base: 0,
24 | title: "right",
25 | show_title: true,
26 | show_label: true,
27 | gradient: {"-96": "#001f83", "-0.1": "#008bea", "0": "#ff6000", "24": "#ffa000"},
28 | levels: [1, 6, 12],
29 | gap_labels: 30
30 | });
31 | mbhb = new TK.MeterBase({
32 | layout: "bottom",
33 | segment: 2,
34 | min: -15,
35 | max: 15,
36 | value: -6.25,
37 | base: 0,
38 | scale_base: 0,
39 | title: "left",
40 | show_title: true,
41 | show_label: true,
42 | gradient: {"-15": "#001f83", "0": "#008bea", "15": "#001f83"},
43 | levels: [1, 5]
44 | });
45 | mbht = new TK.MeterBase({
46 | layout: "top",
47 | segment: 2,
48 | min: -15,
49 | max: 15,
50 | value: 12.5,
51 | base: 0,
52 | scale_base: 0,
53 | title: "right",
54 | show_title: true,
55 | show_label: true,
56 | gradient: {"-15": "#001f83", "0": "#008bea", "15": "#001f83"},
57 | levels: [1, 5]
58 | });
59 | root.append_children([ mbvl, mbvr, mbhb, mbht ]);
60 | }
61 |
62 | .toolkit-meter-base {
63 | float: left;
64 | }
65 |
70 | .toolkit-state {
71 | float: left;
72 | }
73 | .toolkit-state.on_air {
74 | width: 250px;
75 | height: 70px;
76 | }
77 | .toolkit-state.on_air {
78 | background: url(images/on_air.png) no-repeat 50% 51%;
79 | cursor: pointer;
80 | }
81 |
51 | .toolkit-expander {
52 | margin: 10px;
53 | width: calc(100% - 20px);
54 | height: calc(100% - 20px);
55 | }
56 | .toolkit-chart {
57 | width: 100%;
58 | height: 100%;
59 | }
60 |
61 | this.element for a certain
23 | * period of time. It is used e.g. in {@link TK.ResponseHandle} or {@link TK.Knob} when the value
24 | * exceeds the range.
25 | *
26 | * @mixin TK.Warning
27 | */
28 | TK.Warning = TK.class({
29 | _class: "Warning",
30 | /**
31 | * Adds the class toolkit-warn to the given element and
32 | * sets a timeout after which the class is removed again. If there
33 | * already is a timeout waiting it gets updated.
34 | *
35 | * @method TK.Warning#warning
36 | *
37 | * @emits TK.Warning#warning
38 | *
39 | * @param {HTMLElement|SVGElement} element - The DOM node the class should be added to.
40 | * @param {Number} [timeout=250] - The timeout in ms until the class should be removed again.
41 | */
42 | warning: function (element, timeout) {
43 | if (!timeout) timeout = 250;
44 | if (this.__wto) window.clearTimeout(this.__wto);
45 | this.__wto = null;
46 | TK.add_class(element, "toolkit-warn");
47 | this.__wto = window.setTimeout(function () {
48 | TK.remove_class(element, "toolkit-warn");
49 | }.bind(this), timeout);
50 | /**
51 | * Gets fired when {@link TK.Warning#warning} was called.
52 | *
53 | * @event TK.Warning#warning
54 | */
55 | this.fire_event("warning");
56 | }
57 | });
58 | })(this, this.TK);
59 |
--------------------------------------------------------------------------------
/toolkit/styles/2013/css/expander.css:
--------------------------------------------------------------------------------
1 | /*
2 | * This file is part of Toolkit.
3 | *
4 | * Toolkit is free software; you can redistribute it and/or
5 | * modify it under the terms of the GNU General Public
6 | * License as published by the Free Software Foundation; either
7 | * version 3 of the License, or (at your option) any later version.
8 | *
9 | * Toolkit is distributed in the hope that it will be useful,
10 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
12 | * Lesser General Public License for more details.
13 | *
14 | * You should have received a copy of the GNU General
15 | * Public License along with this program; if not, write to the
16 | * Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
17 | * Boston, MA 02110-1301 USA
18 | */
19 |
20 | /* POPUP */
21 | .toolkit-expander.toolkit-popup {
22 | background: rgba(216, 216, 216, 0.9);
23 | }
24 | .toolkit-expander.toolkit-popup.toolkit-expanded > .toolkit-toggle-expand {
25 | width: 42px;
26 | height: 42px;
27 | }
28 | .toolkit-expander.toolkit-popup.toolkit-expanded > .toolkit-toggle-expand::after,
29 | .toolkit-expander.toolkit-popup.toolkit-expanded > .toolkit-toggle-expand::before {
30 | content: "";
31 | display: block;
32 | position: absolute;
33 | height: 4px;
34 | width: 32px;
35 | top: 19px;
36 | left: 5px;
37 | transform: rotate(45deg);
38 | background: #003050;
39 | }
40 | .toolkit-expander.toolkit-popup.toolkit-expanded > .toolkit-toggle-expand::before {
41 | transform: rotate(135deg);
42 | }
43 |
44 | /* POPUP INPLACE */
45 |
46 | .toolkit-expander.toolkit-popup-inplace {
47 | background: rgba(216, 216, 216, 0.9);
48 | }
49 |
50 | .toolkit-expander.toolkit-popup-inplace.toolkit-expanded > .toolkit-toggle-expand {
51 | width: 42px;
52 | height: 42px;
53 | }
54 | .toolkit-expander.toolkit-popup-inplace.toolkit-expanded > .toolkit-toggle-expand::after,
55 | .toolkit-expander.toolkit-popup-inplace.toolkit-expanded > .toolkit-toggle-expand::before {
56 | content: "";
57 | display: block;
58 | position: absolute;
59 | height: 4px;
60 | width: 32px;
61 | top: 19px;
62 | left: 5px;
63 | transform: rotate(45deg);
64 | background: #003050;
65 | }
66 | .toolkit-expander.toolkit-popup.toolkit-expanded > .toolkit-toggle-expand::before {
67 | transform: rotate(135deg);
68 | }
69 |
--------------------------------------------------------------------------------
/toolkit/styles/plain/css/expander.css:
--------------------------------------------------------------------------------
1 | /*
2 | * This file is part of Toolkit.
3 | *
4 | * Toolkit is free software; you can redistribute it and/or
5 | * modify it under the terms of the GNU General Public
6 | * License as published by the Free Software Foundation; either
7 | * version 3 of the License, or (at your option) any later version.
8 | *
9 | * Toolkit is distributed in the hope that it will be useful,
10 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
12 | * Lesser General Public License for more details.
13 | *
14 | * You should have received a copy of the GNU General
15 | * Public License along with this program; if not, write to the
16 | * Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
17 | * Boston, MA 02110-1301 USA
18 | */
19 |
20 | /* POPUP */
21 | .toolkit-expander.toolkit-popup {
22 | background: rgba(216, 216, 216, 0.9);
23 | }
24 | .toolkit-expander.toolkit-popup.toolkit-expanded > .toolkit-toggle-expand {
25 | width: 42px;
26 | height: 42px;
27 | }
28 | .toolkit-expander.toolkit-popup.toolkit-expanded > .toolkit-toggle-expand::after,
29 | .toolkit-expander.toolkit-popup.toolkit-expanded > .toolkit-toggle-expand::before {
30 | content: "";
31 | display: block;
32 | position: absolute;
33 | height: 4px;
34 | width: 32px;
35 | top: 19px;
36 | left: 5px;
37 | transform: rotate(45deg);
38 | background: #003050;
39 | }
40 | .toolkit-expander.toolkit-popup.toolkit-expanded > .toolkit-toggle-expand::before {
41 | transform: rotate(135deg);
42 | }
43 |
44 | /* POPUP INPLACE */
45 |
46 | .toolkit-expander.toolkit-popup-inplace {
47 | background: rgba(216, 216, 216, 0.9);
48 | }
49 |
50 | .toolkit-expander.toolkit-popup-inplace.toolkit-expanded > .toolkit-toggle-expand {
51 | width: 42px;
52 | height: 42px;
53 | }
54 | .toolkit-expander.toolkit-popup-inplace.toolkit-expanded > .toolkit-toggle-expand::after,
55 | .toolkit-expander.toolkit-popup-inplace.toolkit-expanded > .toolkit-toggle-expand::before {
56 | content: "";
57 | display: block;
58 | position: absolute;
59 | height: 4px;
60 | width: 32px;
61 | top: 19px;
62 | left: 5px;
63 | transform: rotate(45deg);
64 | background: #003050;
65 | }
66 | .toolkit-expander.toolkit-popup.toolkit-expanded > .toolkit-toggle-expand::before {
67 | transform: rotate(135deg);
68 | }
69 |
--------------------------------------------------------------------------------
/toolkit/widgets/notifications.js:
--------------------------------------------------------------------------------
1 | /*
2 | * This file is part of Toolkit.
3 | *
4 | * Toolkit is free software; you can redistribute it and/or
5 | * modify it under the terms of the GNU General Public
6 | * License as published by the Free Software Foundation; either
7 | * version 3 of the License, or (at your option) any later version.
8 | *
9 | * Toolkit is distributed in the hope that it will be useful,
10 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
12 | * Lesser General Public License for more details.
13 | *
14 | * You should have received a copy of the GNU General
15 | * Public License along with this program; if not, write to the
16 | * Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
17 | * Boston, MA 02110-1301 USA
18 | */
19 | "use strict";
20 | (function (w, TK) {
21 |
22 | /**
23 | * TK.Notifications is a {@link TK.Container} displaying {@link TK.Notification}
24 | * popups.
25 | *
26 | * @class TK.Notifications
27 | *
28 | * @extends TK.Container
29 | *
30 | * @param {Object} [options={ }] - An object containing initial options.
31 | *
32 | * @property {String} [options.stack="end"] - Define the position a new {@link TK.Notification}
33 | * is appended to the container, either `end` or `start`.
34 | */
35 |
36 | TK.Notifications = TK.class({
37 |
38 | _class: "Notifications",
39 | Extends: TK.Container,
40 |
41 | _options: Object.assign(TK.Container.prototype._options, {
42 | stack: "string",
43 | }),
44 | options: {
45 | stack: "start",
46 | },
47 |
48 | initialize: function (options) {
49 | TK.Container.prototype.initialize.call(this, options);
50 | TK.add_class(this.element, "toolkit-notifications");
51 | },
52 |
53 | notify: function (options) {
54 | /**
55 | * Create and show a new notification.
56 | *
57 | * @method TK.Notifications#notify
58 | *
59 | * @param {Object} [options={ }] - An object containing initial options. - Options for the {@link TK.Notification} to add
60 | *
61 | */
62 | var n = new TK.Notification(options);
63 | this.add_child(n);
64 | if (this.options.stack == "start")
65 | this.element.insertBefore(n.element, this.element.firstChild);
66 | else
67 | this.element.appendChild(n.element);
68 | return n;
69 | }
70 | });
71 |
72 | })(this, this.TK);
73 |
--------------------------------------------------------------------------------
/doc/tutorials/Knob.md:
--------------------------------------------------------------------------------
1 | function run_knob(root) {
2 | knob1 = new TK.Knob({
3 | id: "knob1",
4 | min: -96,
5 | max: 24,
6 | value: -20,
7 | markers: [
8 | {from: 0, to: 24}
9 | ],
10 | dots: [
11 | {pos: -96}, {pos: -84}, {pos: -72}, {pos: -60}, {pos: -48}, {pos: -36}, {pos: -24},
12 | {pos: -12}, {pos: 0}, {pos: 12}, {pos: 24}
13 | ],
14 | labels: [
15 | {pos: -96}, {pos: -72}, {pos: -48}, {pos: -24}, {pos: -12}, {pos: 0, label: "\u00B10"}, {pos: 12}, {pos: 24}
16 | ]
17 | });
18 | knob2 = new TK.Knob({
19 | id: "knob2",
20 | margin: 0,
21 | thickness: 4,
22 | min: 20,
23 | max: 20000,
24 | value: 1000,
25 | scale: "frequency",
26 | dot: {length: 4, margin: 0, width: 1},
27 | label: {align: "inner", margin: 3},
28 | dots: [
29 | {pos: 20}, {pos: 30}, {pos: 40}, {pos: 50}, {pos: 60}, {pos: 70}, {pos: 80}, {pos: 90},
30 | {pos: 100}, {pos: 200}, {pos: 300}, {pos: 400}, {pos: 500}, {pos: 600}, {pos: 700}, {pos: 800}, {pos: 900},
31 | {pos: 1000}, {pos: 2000}, {pos: 3000}, {pos: 4000}, {pos: 5000}, {pos: 6000}, {pos: 7000}, {pos: 8000}, {pos: 9000},
32 | {pos: 10000}, {pos: 20000}
33 | ],
34 | labels: [
35 | {pos: 20}, {pos: 100}, {pos: 1000, label: "1k"}, {pos: 2000, label: "2k"}, {pos: 3000, label: "3k"}, {pos: 4000, label: "4k"},
36 | {pos: 10000, label: "10k"}, {pos: 20000, label:"20k"}
37 | ],
38 | hand: {width: 3, length: 3, margin: 24},
39 | styles: {backgroundImage: "url(images/knob2.png)"}
40 | });
41 | root.append_children([ knob1, knob2 ]);
42 | }
43 |
44 | .toolkit-knob {
45 | margin: 10px;
46 | }
47 |
48 | #knob1 {
49 | width: 80px;
50 | height: 80px;
51 | }
52 |
53 | #knob2 {
54 | width: 120px;
55 | heigh: 120px;
56 | background-size: 75%;
57 | }
58 | #knob2 .toolkit-value {
59 | fill: rgba(0, 47, 66, 1);
60 | }
61 | #knob2 .toolkit-warn .toolkit-value {
62 | fill: #c00;
63 | }
64 | #knob2 .toolkit-dot {
65 | fill: white;
66 | }
67 | #knob2 .toolkit-base {
68 | fill: rgba(0, 47, 66, 0.5);
69 | }
70 |
71 | toolkit-label.
49 | */
50 | if (!(E = this.element)) this.element = E = TK.element("div");
51 | TK.add_class(E, "toolkit-label");
52 | this._text = document.createTextNode("");
53 | E.appendChild(this._text);
54 | this.widgetize(E, true, true, true);
55 | },
56 |
57 | redraw: function () {
58 | var I = this.invalid;
59 | var O = this.options;
60 |
61 | TK.Widget.prototype.redraw.call(this);
62 |
63 | if (I.label || I.format) {
64 | I.label = I.format = false;
65 | this._text.data = O.format ? O.format.call(this, O.label) : O.label;
66 | }
67 | },
68 | });
69 | })(this, this.TK);
70 |
--------------------------------------------------------------------------------
/toolkit/widgets/colorpickerdialog.js:
--------------------------------------------------------------------------------
1 | /*
2 | * This file is part of Toolkit.
3 | *
4 | * Toolkit is free software; you can redistribute it and/or
5 | * modify it under the terms of the GNU General Public
6 | * License as published by the Free Software Foundation; either
7 | * version 3 of the License, or (at your option) any later version.
8 | *
9 | * Toolkit is distributed in the hope that it will be useful,
10 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
12 | * Lesser General Public License for more details.
13 | *
14 | * You should have received a copy of the GNU General
15 | * Public License along with this program; if not, write to the
16 | * Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
17 | * Boston, MA 02110-1301 USA
18 | */
19 | "use strict";
20 | (function (w, TK) {
21 |
22 | function cancel () {
23 | var self = this.parent;
24 | self.fire_event.call(self, "cancel");
25 | self.close();
26 | }
27 |
28 | function apply (color) {
29 | var self = this.parent;
30 | self.fire_event.call(self, "apply", color);
31 | self.close();
32 | }
33 |
34 | /**
35 | * A {@link TK.Dialog} window containing a {@link TK.ColorPicker}. It can be opened
36 | * programatically and closes automatically on the appropriate user
37 | * interactions like hitting ESC or clicking `apply`. TK.ColorPickerDialog
38 | * inherits all options of TK.ColorPicker.
39 | *
40 | * @class TK.ColorPickerDialog
41 | *
42 | * @extends TK.Dialog
43 | *
44 | * @param {Object} [options={ }] options - An object containing initial options.
45 | *
46 | */
47 | TK.ColorPickerDialog = TK.class({
48 |
49 | _class: "ColorPickerDialog",
50 | Extends: TK.Dialog,
51 |
52 | initialize: function (options) {
53 | TK.Dialog.prototype.initialize.call(this, options);
54 | /** @member {HTMLDivElement} TK.ColorPickerDialog#element - The main DIV container.
55 | * Has class toolkit-color-picker-dialog.
56 | */
57 | TK.add_class(this.element, "toolkit-color-picker-dialog");
58 | },
59 | });
60 |
61 | /**
62 | * @member {TK.ColorPicker} TK.ColorPickerDialog#colorpicker - The {@ink TK.ColorPicker} widget.
63 | */
64 | TK.ChildWidget(TK.ColorPickerDialog, "colorpicker", {
65 | create: TK.ColorPicker,
66 | show: true,
67 | inherit_options: true,
68 | userset_delegate: true,
69 | static_events: {
70 | cancel: cancel,
71 | apply: apply,
72 | },
73 | });
74 |
75 | })(this, this.TK);
76 |
--------------------------------------------------------------------------------
/toolkit/widgets/sortablelist.js:
--------------------------------------------------------------------------------
1 | /*
2 | * This file is part of Toolkit.
3 | *
4 | * Toolkit is free software; you can redistribute it and/or
5 | * modify it under the terms of the GNU General Public
6 | * License as published by the Free Software Foundation; either
7 | * version 3 of the License, or (at your option) any later version.
8 | *
9 | * Toolkit is distributed in the hope that it will be useful,
10 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
12 | * Lesser General Public License for more details.
13 | *
14 | * You should have received a copy of the GNU General
15 | * Public License along with this program; if not, write to the
16 | * Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
17 | * Boston, MA 02110-1301 USA
18 | */
19 | "use strict";
20 | (function (w, TK) {
21 |
22 | /* TODO */
23 |
24 | var build_dragcapture = function () {
25 | this.dragcapture = new TK.DragCapture(this, {
26 | state: true,
27 | onstartcapture: function (state) {
28 | console.log(state, "start");
29 | return true;
30 | },
31 | onmovecapture: function (state) {
32 | console.log(state, "move");
33 | },
34 | onstopcapture: function () {
35 | console.log("stop");
36 | }
37 | });
38 | }
39 |
40 | TK.SortableList = TK.class({
41 |
42 | _class: "SortableList",
43 | Extends: TK.List,
44 |
45 | _options: Object.assign(Object.create(TK.Container.prototype._options), {
46 | sortable: "boolean",
47 | }),
48 | options: {
49 | sortable: false,
50 | item_class: TK.SortableListItem,
51 | },
52 | initialize: function (options) {
53 | TK.List.prototype.initialize.call(this, options);
54 | this.element.add_class("toolkit-sortable-list");
55 | },
56 | add_item: function (item, pos) {
57 | var O = this.options;
58 | var item = TK.List.prototype.add_item.call(this, item, pos);
59 | item.set("sortable", O.sortable);
60 | },
61 | set: function (key, value) {
62 | switch (key) {
63 | case "sortable":
64 | var I = this.options.items;
65 | for (var i = 0; i < I.length; i++)
66 | I[i].set("sortable", value);
67 | if (value && !this.dragcapture)
68 | build_dragcapture.call(this);
69 | break;
70 | }
71 | return TK.List.prototype.set.call(this, key, value);
72 | }
73 | });
74 |
75 |
76 | })(this, this.TK);
77 |
--------------------------------------------------------------------------------
/doc/tutorials/Equalizer.md:
--------------------------------------------------------------------------------
1 | function run_equalizer (root) {
2 | eq = new TK.Equalizer({
3 | styles: {
4 | "margin": "10px",
5 | },
6 | width: "calc(100% - 20px)",
7 | height: "calc(100% - 20px)",
8 | depth: 120,
9 | db_grid: 12,
10 | range_z: {min: 0.4, max: 4, step: 0.1, shift_up: 10, shift_down: 0.2, reverse: true},
11 | bands: [
12 | {freq:600, gain:-12, q:3, type:"parametric",
13 | z_handle: "right", title:"Band 1", z_min: 0.4, z_max: 4},
14 | {freq:2000, gain:12, q:1, type:"parametric",
15 | z_handle: "right", title:"Band 1", z_min: 0.4, z_max: 4},
16 | {freq:200, gain:-12, q:1, type:"low-shelf",
17 | z_handle: "right", title:"Low Shelf",
18 | preferences: ["top-right", "top", "top-left",
19 | "right", "center", "left",
20 | "bottom-right", "bottom", "bottom-left"],
21 | z_min: 0.4, z_max: 4},
22 | {freq:7000, gain: 12, q:1, type:"high-shelf",
23 | z_handle: "left", title:"High Shelf",
24 | preferences: ["top-left", "top", "top-right",
25 | "left", "center", "right",
26 | "bottom-left", "bottom", "bottom-right"],
27 | z_min: 0.4, z_max: 4},
28 | {freq:40, q: 1, type:"highpass2", title:"High Pass",
29 | preferences: ["top-right", "top", "top-left",
30 | "right", "center", "left",
31 | "bottom-right", "bottom", "bottom-left"],
32 | label: function (title, x, y, z) { return title + "\n" + TK.sprintf("%.2f", x) + " Hz"; } },
33 | {freq:15000, q: 1, type:"lowpass2", title:"Low Pass",
34 | preferences: ["top-left", "top", "top-right",
35 | "left", "center", "right",
36 | "bottom-left", "bottom", "bottom-right"],
37 | label: function (title, x, y, z) { return title + "\n" + TK.sprintf("%.2f", x) + " Hz"; } }]
38 | });
39 | root.append_child(eq);
40 | TK.seat_all_svg()
41 | }
42 |
43 | .toolkit-equalizer {
44 | margin: 10px;
45 | width: calc(100% - 20px);
46 | height: calc(100% - 20px);
47 | }
48 |
70 | .toolkit-chart {
71 | margin: 10px;
72 | width: calc(100% - 20px);
73 | height: calc(100% - 20px);
74 | }
75 | toolkit-root.
69 | */
70 | TK.add_class(this.element, "toolkit-root");
71 | this._resize_cb = resized.bind(this);
72 | this._visibility_cb = visibility_change.bind(this);
73 | this.resize_event = false;
74 | },
75 | });
76 | })(this, this.TK);
77 |
--------------------------------------------------------------------------------
/toolkit/styles/plain/css/buttonarray.css:
--------------------------------------------------------------------------------
1 | /*
2 | * This file is part of Toolkit.
3 | *
4 | * Toolkit is free software; you can redistribute it and/or
5 | * modify it under the terms of the GNU General Public
6 | * License as published by the Free Software Foundation; either
7 | * version 3 of the License, or (at your option) any later version.
8 | *
9 | * Toolkit is distributed in the hope that it will be useful,
10 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
12 | * Lesser General Public License for more details.
13 | *
14 | * You should have received a copy of the GNU General
15 | * Public License along with this program; if not, write to the
16 | * Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
17 | * Boston, MA 02110-1301 USA
18 | */
19 | .toolkit-buttonarray {
20 | height: 36px;
21 | }
22 |
23 | .toolkit-buttonarray.toolkit-vertical {
24 | text-align: left;
25 | }
26 | .toolkit-buttonarray.toolkit-horizontal > .toolkit-previous {
27 | width: 40px;
28 | padding-left: 4px;
29 | padding-right: 4px;
30 | }
31 | .toolkit-buttonarray.toolkit-horizontal > .toolkit-next {
32 | width: 40px;
33 | padding-left: 4px;
34 | padding-right: 4px;
35 | }
36 |
37 | .toolkit-buttonarray > .toolkit-clip {
38 | transition: left 0.5s ease-in-out, top 0.5s ease-in-out, right 0.5s ease-in-out, bottom 0.5s ease-in-out;
39 | }
40 | .toolkit-buttonarray.toolkit-over.toolkit-horizontal > .toolkit-clip {
41 |
42 | }
43 | .toolkit-buttonarray.toolkit-over.toolkit-vertical > .toolkit-clip {
44 |
45 | }
46 |
47 | .toolkit-buttonarray > .toolkit-clip > .toolkit-container {
48 | transition: left 0.5s ease-in-out, top 0.5s ease-in-out;
49 | }
50 |
51 | .toolkit-buttonarray.toolkit-horizontal > .toolkit-clip > .toolkit-container {
52 |
53 | }
54 | .toolkit-buttonarray.toolkit-vertical > .toolkit-clip > .toolkit-container {
55 |
56 | }
57 |
58 | .toolkit-buttonarray > .toolkit-clip > .toolkit-container > .toolkit-button {
59 | margin: 0;
60 | }
61 | .toolkit-buttonarray > .toolkit-clip > .toolkit-container > .toolkit-button.toolkit-active {
62 |
63 | }
64 | .toolkit-buttonarray > .toolkit-clip > .toolkit-container > .toolkit-button > .toolkit-label {
65 | white-space: nowrap;
66 | width: 100%;
67 | box-sizing: border-box;
68 | }
69 | .toolkit-buttonarray.toolkit-horizontal > .toolkit-clip > .toolkit-container > .toolkit-button {
70 | height: 100%;
71 | }
72 | .toolkit-buttonarray.toolkit-vertical > .toolkit-clip > .toolkit-container > .toolkit-button {
73 | display: flex;
74 | width: 100%;
75 | }
76 | .toolkit-buttonarray.toolkit-vertical > .toolkit-clip > .toolkit-container > .toolkit-button:hover,
77 | .toolkit-buttonarray.toolkit-vertical > .toolkit-clip > .toolkit-container > .toolkit-button:active
78 | {
79 |
80 | }
81 |
--------------------------------------------------------------------------------
/toolkit/widgets/tags.js:
--------------------------------------------------------------------------------
1 | /*
2 | * This file is part of Toolkit.
3 | *
4 | * Toolkit is free software; you can redistribute it and/or
5 | * modify it under the terms of the GNU General Public
6 | * License as published by the Free Software Foundation; either
7 | * version 3 of the License, or (at your option) any later version.
8 | *
9 | * Toolkit is distributed in the hope that it will be useful,
10 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
12 | * Lesser General Public License for more details.
13 | *
14 | * You should have received a copy of the GNU General
15 | * Public License along with this program; if not, write to the
16 | * Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
17 | * Boston, MA 02110-1301 USA
18 | */
19 | "use strict";
20 | (function (w, TK) {
21 |
22 | TK.Tags = TK.class({
23 |
24 | Extends: TK.Widget,
25 |
26 | _options: Object.assign(Object.create(TK.Widget.prototype._options), {
27 | tag_class: "object",
28 | }),
29 | options: {
30 | tag_class: TK.Tag,
31 | },
32 |
33 | initialize: function (options) {
34 | this.tags = new Map();
35 | this.tag_to_name = new Map();
36 | TK.Widget.prototype.initialize.call(this, options);
37 | },
38 | tag_to_string: function (tag) {
39 | if (typeof tag == "string") {
40 | return tag
41 | } else if (TK.Tag.prototype.isPrototypeOf(tag)) {
42 | if (!tag.is_destructed()) {
43 | return tag.options.tag;
44 | } else {
45 | return this.tag_to_name.get(tag);
46 | }
47 | } else {
48 | return tag.tag;
49 | }
50 | },
51 | find_tag: function (tag) {
52 | return this.tags.get(this.tag_to_string(tag));
53 | },
54 | request_tag: function (tag, options) {
55 | var C = this.options.tag_class;
56 | var t = this.tag_to_string(tag);
57 |
58 | if (this.tags.has(t)) {
59 | tag = this.tags.get(t);
60 | if (!tag.is_destructed()) return tag;
61 | }
62 |
63 | if (typeof tag == "string") {
64 | var o = Object.assign(options || {}, {tag:tag});
65 | tag = new C(o);
66 | } else if (C.prototype.isPrototypeOf(tag)) {
67 | tag = tag;
68 | } else {
69 | tag = new C(tag);
70 | }
71 | tag.show();
72 | this.tags.set(t, tag);
73 | this.tag_to_name.set(tag, t);
74 | return tag;
75 | },
76 | remove_tag: function (tag) {
77 | tag = this.find_tag(tag);
78 | this.tags.delete(this.tag_to_string(tag));
79 | this.tag_to_name.delete(tag);
80 | },
81 | empty: function() {
82 | this.tags = new Map();
83 | this.tag_to_name = new Map();
84 | },
85 | });
86 |
87 | })(this, this.TK);
88 |
--------------------------------------------------------------------------------
/toolkit/implements/globalcursor.js:
--------------------------------------------------------------------------------
1 | /*
2 | * This file is part of Toolkit.
3 | *
4 | * Toolkit is free software; you can redistribute it and/or
5 | * modify it under the terms of the GNU General Public
6 | * License as published by the Free Software Foundation; either
7 | * version 3 of the License, or (at your option) any later version.
8 | *
9 | * Toolkit is distributed in the hope that it will be useful,
10 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
12 | * Lesser General Public License for more details.
13 | *
14 | * You should have received a copy of the GNU General
15 | * Public License along with this program; if not, write to the
16 | * Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
17 | * Boston, MA 02110-1301 USA
18 | */
19 | "use strict";
20 | (function(w, TK){
21 | /**
22 | * TK.GlobalCursor adds global cursor classes to ensure
23 | * one of the standard cursors
24 | * is shown in the overall application.
25 | *
26 | * @mixin TK.GlobalCursor
27 | */
28 | TK.GlobalCursor = TK.class({
29 | _class: "GlobalCursor",
30 | /**
31 | * Adds a class "toolkit-cursor-" + cursor to the document.body to show a specific cursor.
32 | *
33 | * @method TK.GlobalCursor#global_cursor
34 | *
35 | * @param {string} cursor - The name of the cursor to show.
36 | *
37 | * @emits TK.GlobalCursor#globalcursor
38 | */
39 | global_cursor: function (cursor) {
40 | TK.add_class(document.body, "toolkit-cursor-" + cursor);
41 | /**
42 | * Is fired when a cursor gets set.
43 | *
44 | * @event TK.GlobalCursor#globalcursor
45 | *
46 | * @param {string} cursor - The name of the cursor to show.
47 | */
48 | this.fire_event("globalcursor", cursor);
49 | },
50 | /**
51 | * Removes the class from document.body node.
52 | *
53 | * @method TK.GlobalCursor#remove_cursor
54 | *
55 | * @param {string} cursor - The name of the cursor to remome.
56 | *
57 | * @emits TK.GlobalCursor#cursorremoved
58 | */
59 | remove_cursor: function (cursor) {
60 | TK.remove_class(document.body, "toolkit-cursor-" + cursor);
61 | /**
62 | * Is fired when a cursor is removed.
63 | *
64 | * @event TK.GlobalCursor#cursorremoved
65 | *
66 | * @param {string} cursor - The name of the cursor to remove.
67 | */
68 | this.fire_event("cursorremoved", cursor);
69 | }
70 | });
71 | })(this, this.TK);
72 |
--------------------------------------------------------------------------------
/toolkit/styles/plain/css/window.css:
--------------------------------------------------------------------------------
1 | /*
2 | * This file is part of Toolkit.
3 | *
4 | * Toolkit is free software; you can redistribute it and/or
5 | * modify it under the terms of the GNU General Public
6 | * License as published by the Free Software Foundation; either
7 | * version 3 of the License, or (at your option) any later version.
8 | *
9 | * Toolkit is distributed in the hope that it will be useful,
10 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
12 | * Lesser General Public License for more details.
13 | *
14 | * You should have received a copy of the GNU General
15 | * Public License along with this program; if not, write to the
16 | * Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
17 | * Boston, MA 02110-1301 USA
18 | */
19 | .toolkit-window {
20 | -webkit-box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.33);
21 | -moz-box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.33);
22 | box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.33);
23 | opacity: 1;
24 | }
25 | .toolkit-window.toolkit-inactive {
26 | opacity: 0.5;
27 | -webkit-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.2);
28 | -moz-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.2);
29 | box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.2);
30 | }
31 |
32 | .toolkit-window.toolkit-resizing,
33 | .toolkit-window.toolkit-dragging {
34 | opacity: 0.7;
35 | }
36 |
37 | .toolkit-window > .toolkit-content {
38 | margin: 4px;
39 | }
40 |
41 | .toolkit-window > .toolkit-header {
42 | line-height: 30px;
43 | background: #00ccff;
44 | color: white;
45 | }
46 | .toolkit-window > .toolkit-footer {
47 | line-height: 30px;
48 | border-top: 1px solid white;
49 | }
50 |
51 | .toolkit-window > .toolkit-header > .toolkit-title,
52 | .toolkit-window > .toolkit-footer > .toolkit-title {
53 | text-align: left;
54 | font-size: bold;
55 | }
56 | .toolkit-window > .toolkit-header > .toolkit-status,
57 | .toolkit-window > .toolkit-footer > .toolkit-status {
58 | text-align: left;
59 | margin: 0 5px;
60 | }
61 | .toolkit-window > .toolkit-header > .toolkit-icon,
62 | .toolkit-window > .toolkit-footer > .toolkit-icon {
63 | width: 24px;
64 | height: 24px;
65 | margin: 3px;
66 | }
67 | .toolkit-window > .toolkit-header > .toolkit-button,
68 | .toolkit-window > .toolkit-footer > .toolkit-button {
69 | background: transparent;
70 | border-color: transparent;
71 | position: relative;
72 | padding: 0;
73 | width: 24px;
74 | height: 24px;
75 | margin: 0 2px;
76 | }
77 |
78 | .toolkit-window > .toolkit-header > .toolkit-button .toolkit-icon,
79 | .toolkit-window > .toolkit-footer > .toolkit-button .toolkit-icon {
80 | height: 16px;
81 | margin: 0;
82 | font-size: 16px;
83 | line-height: 16px;
84 | text-shadow: none !important;
85 | }
86 |
87 |
88 | .toolkit-window.toolkit-shrinked {
89 | height: 32px !important;
90 | }
91 |
--------------------------------------------------------------------------------
/doc/tutorials/ButtonArray.md:
--------------------------------------------------------------------------------
1 | function run_buttonarray(root) {
2 | ba_horiz1 = new TK.ButtonArray({
3 | buttons: [
4 | {label: "Button 1"},
5 | {label: "Button 2"},
6 | {label: "Button 3"},
7 | {label: "Button 4"},
8 | ],
9 | show: 3
10 | });
11 | ba_horiz2 = new TK.ButtonArray({
12 | buttons: [
13 | {label: "Button 1"},
14 | {label: "Button 2"},
15 | {label: "Button 3"},
16 | {label: "Button 4"},
17 | {label: "Button 5"},
18 | {label: "Button 6"},
19 | {label: "Button 7"},
20 | {label: "Button 8"},
21 | {label: "Button 9"},
22 | {label: "Button 10"},
23 | {label: "Button 11"},
24 | {label: "Button 12"},
25 | {label: "Button 13"},
26 | {label: "Button 14"},
27 | {label: "Button 15"},
28 | {label: "Button 16"}
29 | ],
30 | show: 1
31 | });
32 | ba_vert1 = new TK.ButtonArray({
33 | direction: "vertical",
34 | buttons: [
35 | {label: "Button 1"},
36 | {label: "Button 2"},
37 | {label: "Button 3"},
38 | {label: "Button 4"},
39 | {label: "Button 5"},
40 | {label: "Button 6"},
41 | {label: "Button 7"},
42 | {label: "Button 8"},
43 | ],
44 | show: 8
45 | });
46 | ba_vert2 = new TK.ButtonArray({
47 | direction: "vertical",
48 | buttons: [
49 | {label: "Button 1"},
50 | {label: "Button 2"},
51 | {label: "Button 3"},
52 | {label: "Button 4"},
53 | {label: "Button 5"},
54 | {label: "Button 6"},
55 | {label: "Button 7"},
56 | {label: "Button 8"},
57 | {label: "Button 9"},
58 | {label: "Button 10"},
59 | {label: "Button 11"},
60 | {label: "Button 12"},
61 | {label: "Button 13"},
62 | {label: "Button 14"},
63 | {label: "Button 15"},
64 | {label: "Button 16"}
65 | ],
66 | show: 15
67 | });
68 | root.append_child(ba_vert1);
69 | root.append_child(ba_horiz1);
70 | root.append_child(ba_vert2);
71 | root.append_child(ba_horiz2);
72 | }
73 |
74 | .toolkit-buttonarray.toolkit-vertical {
75 | height: 400px;
76 | margin-right: 20px;
77 | float: left;
78 | }
79 | .toolkit-buttonarray.toolkit-horizontal {
80 | width: calc(100% - 250px);
81 | float: right;
82 | margin-bottom: 20px;
83 | }
84 | This is Page #1.
") }, 5 | {label: "Page #2", content: TK.html("This is Page #2.
") }, 6 | {label: "Page #3", content: TK.html("This is Page #3.
") }, 7 | {label: "Page #4", content: TK.html("This is Page #4.
") }, 8 | {label: "Page #5", content: TK.html("This is Page #5.
") }, 9 | {label: "Page #6", content: TK.html("This is Page #6.
") }, 10 | {label: "Page #7", content: TK.html("This is Page #7.
") }, 11 | {label: "Page #8", content: TK.html("This is Page #8.
") }, 12 | {label: "Page #9", content: TK.html("This is Page #9.
") }, 13 | {label: "Page #10", content: TK.html("This is Page #10.
") }, 14 | {label: "Page #11", content: TK.html("This is Page #11.
") }, 15 | {label: "Page #12", content: TK.html("This is Page #12.
") } 16 | ], 17 | show: 4, 18 | position: "right", 19 | "class": "pager-newspaper", 20 | }); 21 | pager2 = new TK.Pager({ 22 | pages: [ 23 | {label: "Page #1", content: TK.html("This is Page #1.
") }, 24 | {label: "Page #2", content: TK.html("This is Page #2.
") }, 25 | {label: "Page #3", content: TK.html("This is Page #3.
") }, 26 | {label: "Page #4", content: TK.html("This is Page #4.
") }, 27 | {label: "Page #5", content: TK.html("This is Page #5.
") }, 28 | {label: "Page #6", content: TK.html("This is Page #6.
") }, 29 | {label: "Page #7", content: TK.html("This is Page #7.
") }, 30 | {label: "Page #8", content: TK.html("This is Page #8.
") }, 31 | {label: "Page #9", content: TK.html("This is Page #9.
") }, 32 | {label: "Page #10", content: TK.html("This is Page #10.
") }, 33 | {label: "Page #11", content: TK.html("This is Page #11.
") }, 34 | {label: "Page #12", content: TK.html("This is Page #12.
") } 35 | ], 36 | show: 4, 37 | }); 38 | root.append_child(pager1); 39 | root.append_child(pager2); 40 | } 41 |
42 | .toolkit-pager {
43 | width: 100%;
44 | height: 200px;
45 | margin-bottom: 30px;
46 | }
47 | center
25 | * needs to subtract half of its width from y and half of its height
26 | * from x to appear at the correct position.
27 | *
28 | * @mixin TK.Anchor
29 | */
30 | TK.Anchor = TK.class({
31 | /**
32 | * Returns real x and y values from a relative positioning.
33 | *
34 | * @method TK.Anchor#translate_anchor
35 | *
36 | * @param {string} [anchor="top-left"] - Position of the anchor.
37 | * @param {number} x - X position to translate.
38 | * @param {number} y - Y position to translate.
39 | * @param {number} width - Width of the element.
40 | * @param {number} height - Height of the element.
41 | *
42 | * @returns {object} Object with members x and y as numbers
43 | */
44 | translate_anchor: function (anchor, x, y, width, height) {
45 | switch (anchor) {
46 | case "top-left":
47 | break;
48 | case "top":
49 | x += width / 2;
50 | break;
51 | case "top-right":
52 | x += width;
53 | break;
54 | case "left":
55 | y += height / 2;
56 | break;
57 | case "center":
58 | x += width / 2;
59 | y += height / 2;
60 | break;
61 | case "right":
62 | x += width;
63 | y += height / 2;
64 | break;
65 | case "bottom-left":
66 | y += height;
67 | break;
68 | case "bottom":
69 | x += width / 2;
70 | y += height;
71 | break;
72 | case "bottom-right":
73 | x += width;
74 | y += height;
75 | break;
76 | default:
77 | throw new Error("Unsupported anchor position");
78 | }
79 | return {x: Math.round(x), y: Math.round(y)};
80 | }
81 | });
82 | })(this, this.TK);
83 |
--------------------------------------------------------------------------------
/doc/tutorials/Fader.md:
--------------------------------------------------------------------------------
1 | function run_fader(root) {
2 | function delay (v) {
3 | var t = this;
4 | setTimeout( function () {
5 | if (parseInt(t.options.id) > 1)
6 | t.set("pointer", v);
7 | else
8 | t.set("bar", v);
9 | }, 200);
10 | }
11 | faders = [];
12 | var options = {
13 | id: "0",
14 | min: -580,
15 | max: 60,
16 | value: 0,
17 | labels: TK.FORMAT("%d", "%/4"),
18 | format: TK.FORMAT("%.2fdB", "%/4"),
19 | "value.set": function (v) { return parseFloat(v)*4; },
20 | tooltip: false,
21 | step: 1,
22 | base: 0,
23 | gap_dots: 5,
24 | gap_labels: 20,
25 | log_factor: 2,
26 | division: 1,
27 | snap: 1,
28 | scale:"decibel",
29 | show_label: true,
30 | show_value: true,
31 | bar: 0,
32 | onset_value: function (v) { delay.call(this, v); },
33 | bind_click: true,
34 | }
35 | options.layout = "right";
36 | options.label = "Left";
37 | options.id = "0";
38 | options.fixed_dots = [60, 40, 20, 0, -20, -40, -60, -80, -120, -160, -200, -280, -580];
39 | options.fixed_labels = [60, 40, 20, 0, -20, -40, -60, -80, -120, -160, -200, -280, -580];
40 | faders.push(new TK.Fader(options));
41 |
42 | options.layout = "left";
43 | options.label = "Right";
44 | options.id = "1";
45 | faders.push(new TK.Fader(options));
46 |
47 | options.layout = "bottom";
48 | options.label = "Left";
49 | options.id = "2";
50 | options.fixed_dots = false;
51 | options.fixed_labels = false;
52 | options.gap_labels = 20;
53 | options.levels = [4, 20];
54 | options.bar = false;
55 | options.pointer = 0;
56 | faders.push(new TK.Fader(options));
57 |
58 | options.layout = "top";
59 | options.label = "Right";
60 | options.id = "3";
61 | faders.push(new TK.Fader(options));
62 |
63 | root.append_children(faders);
64 |
65 | fadertt = new TK.Toggle({
66 | label: "Tooltips",
67 | onToggled: function (state) {
68 | var t = state ? TK.FORMAT("%.2f dB", "%/4") : false;
69 | for (var i = 0; i < faders.length; i++) {
70 | faders[i].set("tooltip", t);
71 | }
72 | }
73 | });
74 | root.append_child(fadertt);
75 | }
76 |
77 | .toolkit-fader {
78 | vertical-align: top;
79 | float: left;
80 | margin: 8px;
81 | }
82 | .toolkit-fader:nth-child(2),
83 | .toolkit-fader:nth-child(3) {
84 | height: 400px;
85 | }
86 | .toolkit-fader:nth-child(4),
87 | .toolkit-fader:nth-child(5) {
88 | width: 400px;
89 | }
90 | .toolkit-fader .toolkit-input {
91 | font-size: 12px !important;
92 | }
93 | name is set and this.options[name]
37 | * exists, is an object and from is an object, too, both are merged
38 | * before a range is created.
39 | *
40 | * @method TK.Ranges#add_range
41 | *
42 | * @param {Function|Object} from - A function returning a {@link TK.Range}
43 | * instance or an object containing options for a new {@link TK.Range}.
44 | * @param {string} name - Designator of the {@link TK.Range}.
45 | * If a name is set a new set function is added to the item to
46 | * set the options of the {@link TK.Range}. Use the set function like this:
47 | * this.set("name", {key: value});
48 | *
49 | * @emits TK.Ranges#rangeadded
50 | *
51 | * @returns {TK.Range} The new {@link TK.Range}.
52 | */
53 | add_range: function (from, name) {
54 | var r;
55 | if (typeof from === "function") {
56 | r = from();
57 | } else if (TK.Ranged.prototype.isPrototypeOf(from)) {
58 | r = TK.Range(from.options);
59 | } else if (TK.Range.prototype.isPrototypeOf(from)) {
60 | r = from;
61 | } else {
62 | if (name
63 | && this.options[name]
64 | && typeof this.options[name] === "object")
65 | from = Object.assign({}, this.options[name], from)
66 | r = new TK.Range(from);
67 | }
68 | if (name) {
69 | this[name] = r;
70 | this.add_event("set_"+name, range_changed);
71 | }
72 | /**
73 | * Gets fired when a new range is added
74 | *
75 | * @event TK.Ranges#rangeadded
76 | *
77 | * @param {TK.Range} range - The {@link TK.Range} that was added.
78 | */
79 | this.fire_event("rangeadded", r);
80 | return r;
81 | }
82 | })
83 | })(this, this.TK);
84 |
--------------------------------------------------------------------------------
/toolkit/widgets/icon.js:
--------------------------------------------------------------------------------
1 | /*
2 | * This file is part of Toolkit.
3 | *
4 | * Toolkit is free software; you can redistribute it and/or
5 | * modify it under the terms of the GNU General Public
6 | * License as published by the Free Software Foundation; either
7 | * version 3 of the License, or (at your option) any later version.
8 | *
9 | * Toolkit is distributed in the hope that it will be useful,
10 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
12 | * Lesser General Public License for more details.
13 | *
14 | * You should have received a copy of the GNU General
15 | * Public License along with this program; if not, write to the
16 | * Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
17 | * Boston, MA 02110-1301 USA
18 | */
19 |
20 | "use strict";
21 | (function(w, TK){
22 |
23 | TK.Icon = TK.class({
24 | /**
25 | * TK.Icon represents a <DIV> element showing either
26 | * icons from the toolkit font or dedicated image files as CSS background.
27 | *
28 | * @class TK.Icon
29 | *
30 | * @extends TK.Widget
31 | *
32 | * @param {Object} [options={ }] - An object containing initial options.
33 | *
34 | * @property {String} [options.icon] - The icon to show. It can either be
35 | * a string which is interpreted as class name (if [A-Za-z0-9_\-]) or as URI.
36 | */
37 | _class: "Icon",
38 | Extends: TK.Widget,
39 | _options: Object.assign(Object.create(TK.Widget.prototype._options), {
40 | icon: "string",
41 | }),
42 | options: {
43 | icon: false,
44 | },
45 | initialize: function (options) {
46 | var E;
47 | TK.Widget.prototype.initialize.call(this, options);
48 | /**
49 | * @member {HTMLDivElement} TK.Icon#element - The main DIV element. Has class toolkit-icon
50 | */
51 | if (!(E = this.element)) this.element = E = TK.element("div");
52 | TK.add_class(E, "toolkit-icon");
53 | this.widgetize(E, true, true, true);
54 | this._icon_old = [];
55 | },
56 | redraw: function() {
57 | var O = this.options;
58 | var I = this.invalid;
59 | var E = this.element;
60 |
61 | TK.Widget.prototype.redraw.call(this);
62 |
63 | if (I.icon) {
64 | I.icon = false;
65 | var old = this._icon_old;
66 | for (var i = 0; i < old.length; i++) {
67 | if (old[i] && TK.is_class_name(old[i])) {
68 | TK.remove_class(E, old[i]);
69 | }
70 | }
71 | this._icon_old = [];
72 | if (TK.is_class_name(O.icon)) {
73 | E.style["background-image"] = null;
74 | if (O.icon)
75 | TK.add_class(E, O.icon);
76 | } else if (O.icon) {
77 | E.style["background-image"] = "url(\"" + O.icon + "\")";
78 | }
79 | }
80 | },
81 | set: function (key, val) {
82 | if (key == "icon") {
83 | this._icon_old.push(this.options.icon);
84 | }
85 | return TK.Widget.prototype.set.call(this, key, val);
86 | },
87 | });
88 | })(this, this.TK);
89 |
--------------------------------------------------------------------------------
/toolkit/styles/2013/css/notification.css:
--------------------------------------------------------------------------------
1 | .toolkit-notification {
2 | background: rgba(238, 238, 238, 0.9);
3 | border: 1px solid rgba(255, 255, 255, 0.9);
4 | margin: 4px;
5 | padding: 4px 8px;
6 | min-height: 32px;
7 |
8 | font-size: 1rem;
9 | text-align: left;
10 |
11 | -webkit-box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.25);
12 | -moz-box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.25);
13 | box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.25);
14 |
15 | -webkit-border-radius: 6px;
16 | -moz-border-radius: 6px;
17 | border-radius: 6px;
18 |
19 | display: block;
20 | }
21 |
22 | .toolkit-notification > .toolkit-button {
23 | background: transparent !important;
24 | border: none !important;
25 | position: absolute;
26 | top: 4px;
27 | right: 4px;
28 | width: 20px !important;
29 | height: 20px !important;
30 | margin: 0;
31 | padding: 0;
32 | box-shadow: none !important;
33 | }
34 | .toolkit-notification > .toolkit-button.toolkit-close .toolkit-icon {
35 | font-size: 20px !important;
36 | line-height: 20px !important;
37 | width: 20px !important;
38 | height: 20px !important;
39 | }
40 |
41 | .toolkit-notification > .toolkit-icon {
42 | position: absolute;
43 | font-size: 32px;
44 | line-height: 32px;
45 | color: #002A42;
46 | top: 8px;
47 | left: 8px;
48 | }
49 |
50 | .toolkit-notification.toolkit-has-icon {
51 | padding-left: 56px;
52 | }
53 |
54 | .toolkit-notification.toolkit-has-close {
55 | padding-right: 48px;
56 | }
57 |
58 |
59 | .toolkit-notification {
60 | opacity: 0;
61 |
62 | -webkit-animation: -webkit-fade-in 0.5s;
63 | -moz-animation: -moz-fade-in 0.5s;
64 | -ms-animation: -ms-fade-in 0.5s;
65 | -o-animation: -o-fade-in 0.5s;
66 | animation: fade-in 0.5s;
67 |
68 | -webkit-transform: scale(1);
69 | -moz-transform: scale(1);
70 | -ms-transform: scale(1);
71 | -o-transform: scale(1);
72 | transform: scale(1);
73 | }
74 |
75 | .toolkit-notification.toolkit-show {
76 | opacity: 1;
77 | }
78 | .toolkit-notification.toolkit-hiding {
79 | opacity: 0;
80 |
81 | -webkit-transition: opacity 0.5s, transform 0.5s;
82 | -moz-transition: opacity 0.5s, transform 0.5s;
83 | -ms-transition: opacity 0.5s, transform 0.5s;
84 | -o-transition: opacity 0.5s, transform 0.5s;
85 | transition: opacity 0.5s, transform 0.5s;
86 |
87 | -webkit-transform: scale(0);
88 | -moz-transform: scale(0);
89 | -ms-transform: scale(0);
90 | -o-transform: scale(0);
91 | transform: scale(0);
92 | }
93 |
94 | @-webkit-keyframes -webit-fade-in {
95 | 0% { opacity: 0; -webit-transform: scale(1); }
96 | 100% { opacity: 1; -webit-transform: scale(1);}
97 | }
98 | @-moz-keyframes -moz-fade-in {
99 | 0% { opacity: 0; -moz-transform: scale(1); }
100 | 100% { opacity: 1; -moz-transform: scale(1);}
101 | }
102 | @-ms-keyframes -ms-fade-in {
103 | 0% { opacity: 0; -ms-transform: scale(1); }
104 | 100% { opacity: 1; -ms-transform: scale(1);}
105 | }
106 | @-o-keyframes -o-fade-in {
107 | 0% { opacity: 0; -o-transform: scale(1); }
108 | 100% { opacity: 1; -o-transform: scale(1);}
109 | }
110 | @keyframes fade-in {
111 | 0% { opacity: 0; transform: scale(1); }
112 | 100% { opacity: 1; transform: scale(1);}
113 | }
114 |
--------------------------------------------------------------------------------