git @ Cat's Eye Technologies Maze-Clouds / 9d7e20a
Have HTML5 demo use dam-plus-widgets-web.js from DAM 0.1. Chris Pressey 5 years ago
5 changed file(s) with 210 addition(s) and 204 deletion(s). Raw diff Collapse all Expand all
+208
-0
demo/dam-plus-widgets-web.js less more
0 /* dam-plus-widgets-web.js version 0.1. This file is in the public domain. */
1
2 /* This file is recommended if you just want to use DAM and its standard
3 widget library on an HTML page without bothering with JS build stuff.
4 It consists of dam.js followed by dam-widgets.js, both with only small
5 hand modifications to make them load as-is in ES5. */
6
7 var DAM = (function() {
8 var DAM = {};
9 DAM.makeElem = function(tag, args) {
10 args = args || [];
11 var elem = document.createElement(tag);
12 for (var i = 0; i < args.length; i++) {
13 var arg = args[i];
14 if (arg instanceof Element) {
15 elem.appendChild(arg);
16 } else if (typeof arg === 'string' || arg instanceof String) {
17 elem.appendChild(document.createTextNode(arg));
18 } else if (typeof arg === 'object' && arg !== null) {
19 Object.keys(arg).forEach(function(key) {
20 if (key.substring(0, 2) === 'on') {
21 elem.addEventListener(key.substring(2), arg[key]);
22 } else if (arg[key] === null) {
23 elem.removeAttribute(key);
24 } else {
25 elem.setAttribute(key, arg[key]);
26 }
27 });
28 } else {
29 console.log(arg);
30 }
31 }
32 return elem;
33 };
34 DAM.maker = function(tag) {
35 return function() {
36 return DAM.makeElem(tag, arguments);
37 };
38 };
39 return DAM;
40 })();
41
42 (function(DAM) { // ENTER-SCOPE
43
44 /*
45 * A labelled checkbox, where the checkbox appears to the left of the label.
46 * Arguments after the first (config) argument will be applied to the label element.
47 */
48 DAM.makeCheckbox = function(config) {
49 if (typeof DAM.makeCheckboxCounter === 'undefined') DAM.makeCheckboxCounter = 0;
50 var checkboxId = 'cfzzzb_' + (DAM.makeCheckboxCounter++);
51
52 var onchange = config.onchange || function(b) {};
53
54 // config label: make copy of arguments, replace first with a bespoke config
55 var args = new Array(arguments.length);
56 for(var i = 0; i < args.length; ++i) {
57 args[i] = arguments[i];
58 }
59 args[0] = { 'for': checkboxId, 'class': "dam-widget dam-checkbox" }
60
61 return DAM.makeElem('span', [
62 DAM.makeElem('input', [
63 {
64 type: 'checkbox',
65 id: checkboxId,
66 onchange: function(e) {
67 onchange(e.target.checked);
68 }
69 },
70 config.checkboxAttrs || {}
71 ]),
72 DAM.makeElem('label', args)
73 ]);
74 };
75
76 /*
77 * A collapsible panel.
78 * Arguments after the first (config) argument will be applied to the inner container div element.
79 */
80 DAM.makePanel = function(config) {
81 var isOpen = !!(config.isOpen);
82 var title = config.title || "";
83
84 function getLabel() {
85 return (isOpen ? "∇" : "⊳") + " " + title;
86 }
87
88 // config inner container
89 var args = new Array(arguments.length);
90 for(var i = 0; i < args.length; ++i) {
91 args[i] = arguments[i];
92 }
93 args[0] = {}
94
95 var innerContainer = DAM.makeElem('div', args);
96 innerContainer.style.display = isOpen ? "block" : "none";
97
98 var button = DAM.makeElem('button', [
99 getLabel(),
100 {
101 onclick: function(e) {
102 isOpen = !isOpen;
103 button.textContent = getLabel();
104 innerContainer.style.display = isOpen ? "block" : "none";
105 }
106 }
107 ]);
108
109 return DAM.makeElem("div", [{ 'class': "dam-widget dam-panel" }, button, innerContainer]);
110 };
111
112 /*
113 * A select dropdown.
114 */
115 DAM.makeSelect = function(config) {
116 var title = config.title || "";
117 var options = config.options || [];
118 var onchange = config.onchange || function(v) {};
119
120 var select = DAM.makeElem('select');
121 for (var i = 0; i < options.length; i++) {
122 var op = DAM.makeElem('option');
123 op.value = options[i].value;
124 op.text = options[i].text;
125 op.selected = !!(options[i].selected);
126 select.options.add(op);
127 }
128 select.addEventListener('change', function(e) {
129 onchange(options[select.selectedIndex]);
130 });
131 return DAM.makeElem('label', [{ 'class': "dam-widget dam-select" }, title, select]);
132 };
133
134 /*
135 * A range control.
136 */
137 DAM.makeRange = function(config) {
138 var title = config.title || "";
139 var min_ = config['min'];
140 var max_ = config['max'];
141 var value = config.value || min_;
142 var onchange = config.onchange || function(v) {};
143 var textInputSize = config.textInputSize || 5;
144
145 var textInput; var slider;
146
147 slider = DAM.makeElem('input', [
148 {
149 type: "range", min: min_, max: max_, value: value,
150 onchange: function(e) {
151 var v = parseInt(slider.value, 10);
152 if (!isNaN(v)) {
153 textInput.value = "" + v;
154 onchange(v);
155 }
156 }
157 }
158 ]);
159
160 textInput = DAM.makeElem('input', [
161 {
162 size: "" + textInputSize,
163 value: "" + value,
164 onchange: function(e) {
165 var v = parseInt(textInput.value, 10);
166 if (!isNaN(v) && v >= min_ && v <= max_) {
167 slider.value = "" + v;
168 onchange(v);
169 }
170 }
171 }
172 ]);
173
174 var incButton = DAM.makeElem('button', ['+',
175 {
176 onclick: function(e) {
177 var v = parseInt(textInput.value, 10);
178 if ((!isNaN(v)) && v < max_) {
179 v++;
180 textInput.value = "" + v;
181 slider.value = "" + v;
182 onchange(v);
183 }
184 }
185 }
186 ]);
187
188 var decButton = DAM.makeElem('button', ['-',
189 {
190 onclick: function(e) {
191 var v = parseInt(textInput.value, 10);
192 if ((!isNaN(v)) && v > min_) {
193 v--;
194 textInput.value = "" + v;
195 slider.value = "" + v;
196 onchange(v);
197 }
198 }
199 }
200 ]);
201
202 return DAM.makeElem('span', [{ 'class': "dam-widget dam-range" }, DAM.makeElem('label', [title, slider]), textInput, decButton, incButton]);
203 };
204
205 })(DAM); // EXIT-SCOPE
206
207 if (typeof module !== 'undefined') module.exports = DAM;
+0
-167
demo/dam-widgets.js less more
0 /* dam-widgets.js version 0.0. This file is in the public domain. */
1
2 /* dam.js should be included before this source. */
3
4 /*
5 * A labelled checkbox, where the checkbox appears to the left of the label.
6 * Arguments after the first (config) argument will be applied to the label element.
7 */
8 DAM.makeCheckbox = function(config) {
9 if (typeof DAM.makeCheckboxCounter === 'undefined') DAM.makeCheckboxCounter = 0;
10 var checkboxId = 'cfzzzb_' + (DAM.makeCheckboxCounter++);
11
12 var onchange = config.onchange || function(b) {};
13
14 // config label: make copy of arguments, replace first with a bespoke config
15 var args = new Array(arguments.length);
16 for(var i = 0; i < args.length; ++i) {
17 args[i] = arguments[i];
18 }
19 args[0] = { 'for': checkboxId }
20
21 return DAM.makeElem('span', [
22 DAM.makeElem('input', [
23 {
24 type: 'checkbox',
25 id: checkboxId,
26 onchange: function(e) {
27 onchange(e.target.checked);
28 }
29 },
30 config.checkboxAttrs || {}
31 ]),
32 DAM.makeElem('label', args)
33 ]);
34 };
35
36 /*
37 * A collapsible panel.
38 * Arguments after the first (config) argument will be applied to the inner container div element.
39 */
40 DAM.makePanel = function(config) {
41 var isOpen = !!(config.isOpen);
42 var title = config.title || "";
43
44 function getLabel() {
45 return (isOpen ? "∇" : "⊳") + " " + title;
46 }
47
48 // config inner container
49 var args = new Array(arguments.length);
50 for(var i = 0; i < args.length; ++i) {
51 args[i] = arguments[i];
52 }
53 args[0] = {}
54
55 var innerContainer = DAM.makeElem('div', args);
56 innerContainer.style.display = isOpen ? "block" : "none";
57
58 var button = DAM.makeElem('button', [
59 getLabel(),
60 {
61 onclick: function(e) {
62 isOpen = !isOpen;
63 button.innerHTML = getLabel();
64 innerContainer.style.display = isOpen ? "block" : "none";
65 }
66 }
67 ]);
68
69 return DAM.makeElem("div", [
70 button,
71 innerContainer
72 ]);
73 };
74
75 /*
76 * A select dropdown.
77 */
78 DAM.makeSelect = function(config) {
79 var title = config.title || "";
80 var options = config.options || [];
81 var onchange = config.onchange || function(v) {};
82
83 var select = DAM.makeElem('select');
84 for (var i = 0; i < options.length; i++) {
85 var op = DAM.makeElem('option');
86 op.value = options[i].value;
87 op.text = options[i].text;
88 op.selected = !!(options[i].selected);
89 select.options.add(op);
90 }
91 select.addEventListener('change', function(e) {
92 onchange(options[select.selectedIndex]);
93 });
94 return DAM.makeElem('label', [title, select]);
95 };
96
97 /*
98 * A range control.
99 */
100 DAM.makeRange = function(config) {
101 var title = config.title || "";
102 var min_ = config['min'];
103 var max_ = config['max'];
104 var value = config.value || min_;
105 var onchange = config.onchange || function(v) {};
106 var textInputSize = config.textInputSize || 5;
107
108 var textInput; var slider;
109
110 slider = DAM.makeElem('input', [
111 {
112 type: "range", min: min_, max: max_, value: value,
113 onchange: function(e) {
114 var v = parseInt(slider.value, 10);
115 if (!isNaN(v)) {
116 textInput.value = "" + v;
117 onchange(v);
118 }
119 }
120 }
121 ]);
122
123 textInput = DAM.makeElem('input', [
124 {
125 size: "" + textInputSize,
126 value: "" + value,
127 onchange: function(e) {
128 var v = parseInt(textInput.value, 10);
129 if (!isNaN(v) && v >= min_ && v <= max_) {
130 slider.value = "" + v;
131 onchange(v);
132 }
133 }
134 }
135 ]);
136
137 var incButton = DAM.makeElem('button', ['+',
138 {
139 onclick: function(e) {
140 var v = parseInt(textInput.value, 10);
141 if ((!isNaN(v)) && v < max_) {
142 v++;
143 textInput.value = "" + v;
144 slider.value = "" + v;
145 onchange(v);
146 }
147 }
148 }
149 ]);
150
151 var decButton = DAM.makeElem('button', ['-',
152 {
153 onclick: function(e) {
154 var v = parseInt(textInput.value, 10);
155 if ((!isNaN(v)) && v > min_) {
156 v--;
157 textInput.value = "" + v;
158 slider.value = "" + v;
159 onchange(v);
160 }
161 }
162 }
163 ]);
164
165 return DAM.makeElem('span', [DAM.makeElem('label', [title, slider]), textInput, decButton, incButton]);
166 };
+0
-34
demo/dam.js less more
0 /* dam.js version 0.0. This file is in the public domain. */
1
2 if (typeof window === 'undefined' || window.DAM === undefined) DAM = {};
3
4 DAM.makeElem = function(tag, args) {
5 args = args || [];
6 var elem = document.createElement(tag);
7 for (var i = 0; i < args.length; i++) {
8 var arg = args[i];
9 if (arg instanceof Element) {
10 elem.appendChild(arg);
11 } else if (typeof arg === 'string' || arg instanceof String) {
12 elem.appendChild(document.createTextNode(arg));
13 } else if (typeof arg === 'object' && arg !== null) {
14 Object.keys(arg).forEach(function(key) {
15 if (key.substring(0, 2) === 'on') {
16 elem.addEventListener(key.substring(2), arg[key]);
17 } else if (arg[key] === null) {
18 elem.removeAttribute(key);
19 } else {
20 elem.setAttribute(key, arg[key]);
21 }
22 });
23 } else {
24 console.log(arg);
25 }
26 }
27 return elem;
28 };
29 DAM.maker = function(tag) {
30 return function() {
31 return DAM.makeElem(tag, arguments);
32 };
33 };
+1
-1
demo/maze-clouds-svg-launcher.js less more
00 /*
1 * dam.js, dam-widgets.js, and maze-clouds.js should be loaded before this.
1 * dam-plus-widgets-web.js and maze-clouds.js should be loaded before this.
22 * After this is loaded, call launch() to start the gewgaw.
33 */
44
+1
-2
demo/maze-clouds.html less more
1717 <div id="installation"></div>
1818 </article>
1919
20 <script src="dam.js"></script>
21 <script src="dam-widgets.js"></script>
20 <script src="dam-plus-widgets-web.js"></script>
2221 <script src="../src/maze-clouds.js"></script>
2322 <script src="maze-clouds-svg-launcher.js"></script>
2423 <script>