git @ Cat's Eye Technologies DAM / 8451a0f
Add dam-plus-widgets-web.js as easy all-in-one drop-in solution. Chris Pressey 4 years ago
8 changed file(s) with 206 addition(s) and 13 deletion(s). Raw diff Collapse all Expand all
+3
-2
README.md less more
1010 **DAM** is a tiny library for creating bits of an HTML5 document.
1111 (I'd say "for creating UIs" but that may be overstating it a tad.)
1212 It's written in ES5 Javascript (so it can be used directly by most
13 modern web browsers) and it's about 1K in size (uncompressed).
13 modern web browsers) and it's about 1K in size (uncompressed). It
14 comes with a "standard widget library" that bloats it to about 6K.
1415
15 *NOTE: this is version 0.0: everything is subject to change*
16 The current version of DAM is 0.1.
1617
1718 Basic usage
1819 -----------
+1
-2
demo/checkbox.html less more
1111
1212 <div id="installation"></div>
1313
14 <script src="../src/dam.js"></script>
15 <script src="../src/dam-widgets.js"></script>
14 <script src="../src/dam-plus-widgets-web.js"></script>
1615 <script>
1716 var div=DAM.maker('div'), span=DAM.maker('span');
1817 var understood = false;
+0
-1
demo/index.html less more
1414 <div id="installation"></div>
1515
1616 <script src="../src/dam.js"></script>
17 <script src="../src/dam-widgets.js"></script>
1817 <script>
1918 var div=DAM.maker("div"), p=DAM.maker("p"), span=DAM.maker("span"), button=DAM.maker("button"),
2019 canvas=DAM.maker("canvas"), label=DAM.maker("label"), br=DAM.maker("br"), input=DAM.maker("input"),
+1
-2
demo/panel.html less more
2323
2424 <div id="installation"></div>
2525
26 <script src="../src/dam.js"></script>
27 <script src="../src/dam-widgets.js"></script>
26 <script src="../src/dam-plus-widgets-web.js"></script>
2827 <script>
2928 var div=DAM.maker("div"), p=DAM.maker("p"), span=DAM.maker("span"), button=DAM.maker("button");
3029 var statusBar = span();
+1
-2
demo/range.html less more
1111
1212 <div id="installation"></div>
1313
14 <script src="../src/dam.js"></script>
15 <script src="../src/dam-widgets.js"></script>
14 <script src="../src/dam-plus-widgets-web.js"></script>
1615 <script>
1716 var div=DAM.maker("div"), p=DAM.maker("p"), span=DAM.maker("span"), button=DAM.maker("button");
1817 document.getElementById('installation').appendChild(
+1
-2
demo/select.html less more
1111
1212 <div id="installation"></div>
1313
14 <script src="../src/dam.js"></script>
15 <script src="../src/dam-widgets.js"></script>
14 <script src="../src/dam-plus-widgets-web.js"></script>
1615 <script>
1716 var div=DAM.maker("div"), p=DAM.maker("p"), span=DAM.maker("span"), button=DAM.maker("button");
1817 document.getElementById('installation').appendChild(
+1
-2
demo/storeon.html less more
1313
1414 <div id="installation"></div>
1515
16 <script src="../src/dam.js"></script>
17 <script src="../src/dam-widgets.js"></script>
16 <script src="../src/dam-plus-widgets-web.js"></script>
1817
1918 <script>var module = {};</script>
2019 <script src="https://unpkg.com/storeon@0.8.2/index.js"></script>
+198
-0
src/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
5 if (typeof window === 'undefined' || window.DAM === undefined) DAM = {};
6
7 DAM.makeElem = function(tag, args) {
8 args = args || [];
9 var elem = document.createElement(tag);
10 for (var i = 0; i < args.length; i++) {
11 var arg = args[i];
12 if (arg instanceof Element) {
13 elem.appendChild(arg);
14 } else if (typeof arg === 'string' || arg instanceof String) {
15 elem.appendChild(document.createTextNode(arg));
16 } else if (typeof arg === 'object' && arg !== null) {
17 Object.keys(arg).forEach(function(key) {
18 if (key.substring(0, 2) === 'on') {
19 elem.addEventListener(key.substring(2), arg[key]);
20 } else if (arg[key] === null) {
21 elem.removeAttribute(key);
22 } else {
23 elem.setAttribute(key, arg[key]);
24 }
25 });
26 } else {
27 console.log(arg);
28 }
29 }
30 return elem;
31 };
32 DAM.maker = function(tag) {
33 return function() {
34 return DAM.makeElem(tag, arguments);
35 };
36 };
37
38 /*
39 * A labelled checkbox, where the checkbox appears to the left of the label.
40 * Arguments after the first (config) argument will be applied to the label element.
41 */
42 DAM.makeCheckbox = function(config) {
43 if (typeof DAM.makeCheckboxCounter === 'undefined') DAM.makeCheckboxCounter = 0;
44 var checkboxId = 'cfzzzb_' + (DAM.makeCheckboxCounter++);
45
46 var onchange = config.onchange || function(b) {};
47
48 // config label: make copy of arguments, replace first with a bespoke config
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] = { 'for': checkboxId, 'class': "dam-widget dam-checkbox" }
54
55 return DAM.makeElem('span', [
56 DAM.makeElem('input', [
57 {
58 type: 'checkbox',
59 id: checkboxId,
60 onchange: function(e) {
61 onchange(e.target.checked);
62 }
63 },
64 config.checkboxAttrs || {}
65 ]),
66 DAM.makeElem('label', args)
67 ]);
68 };
69
70 /*
71 * A collapsible panel.
72 * Arguments after the first (config) argument will be applied to the inner container div element.
73 */
74 DAM.makePanel = function(config) {
75 var isOpen = !!(config.isOpen);
76 var title = config.title || "";
77
78 function getLabel() {
79 return (isOpen ? "∇" : "⊳") + " " + title;
80 }
81
82 // config inner container
83 var args = new Array(arguments.length);
84 for(var i = 0; i < args.length; ++i) {
85 args[i] = arguments[i];
86 }
87 args[0] = {}
88
89 var innerContainer = DAM.makeElem('div', args);
90 innerContainer.style.display = isOpen ? "block" : "none";
91
92 var button = DAM.makeElem('button', [
93 getLabel(),
94 {
95 onclick: function(e) {
96 isOpen = !isOpen;
97 button.textContent = getLabel();
98 innerContainer.style.display = isOpen ? "block" : "none";
99 }
100 }
101 ]);
102
103 return DAM.makeElem("div", [{ 'class': "dam-widget dam-panel" }, button, innerContainer]);
104 };
105
106 /*
107 * A select dropdown.
108 */
109 DAM.makeSelect = function(config) {
110 var title = config.title || "";
111 var options = config.options || [];
112 var onchange = config.onchange || function(v) {};
113
114 var select = DAM.makeElem('select');
115 for (var i = 0; i < options.length; i++) {
116 var op = DAM.makeElem('option');
117 op.value = options[i].value;
118 op.text = options[i].text;
119 op.selected = !!(options[i].selected);
120 select.options.add(op);
121 }
122 select.addEventListener('change', function(e) {
123 onchange(options[select.selectedIndex]);
124 });
125 return DAM.makeElem('label', [{ 'class': "dam-widget dam-select" }, title, select]);
126 };
127
128 /*
129 * A range control.
130 */
131 DAM.makeRange = function(config) {
132 var title = config.title || "";
133 var min_ = config['min'];
134 var max_ = config['max'];
135 var value = config.value || min_;
136 var onchange = config.onchange || function(v) {};
137 var textInputSize = config.textInputSize || 5;
138
139 var textInput; var slider;
140
141 slider = DAM.makeElem('input', [
142 {
143 type: "range", min: min_, max: max_, value: value,
144 onchange: function(e) {
145 var v = parseInt(slider.value, 10);
146 if (!isNaN(v)) {
147 textInput.value = "" + v;
148 onchange(v);
149 }
150 }
151 }
152 ]);
153
154 textInput = DAM.makeElem('input', [
155 {
156 size: "" + textInputSize,
157 value: "" + value,
158 onchange: function(e) {
159 var v = parseInt(textInput.value, 10);
160 if (!isNaN(v) && v >= min_ && v <= max_) {
161 slider.value = "" + v;
162 onchange(v);
163 }
164 }
165 }
166 ]);
167
168 var incButton = DAM.makeElem('button', ['+',
169 {
170 onclick: function(e) {
171 var v = parseInt(textInput.value, 10);
172 if ((!isNaN(v)) && v < max_) {
173 v++;
174 textInput.value = "" + v;
175 slider.value = "" + v;
176 onchange(v);
177 }
178 }
179 }
180 ]);
181
182 var decButton = DAM.makeElem('button', ['-',
183 {
184 onclick: function(e) {
185 var v = parseInt(textInput.value, 10);
186 if ((!isNaN(v)) && v > min_) {
187 v--;
188 textInput.value = "" + v;
189 slider.value = "" + v;
190 onchange(v);
191 }
192 }
193 }
194 ]);
195
196 return DAM.makeElem('span', [{ 'class': "dam-widget dam-range" }, DAM.makeElem('label', [title, slider]), textInput, decButton, incButton]);
197 };