git @ Cat's Eye Technologies Erratic-Turtle-Graphics / 904ad9f
Upgrade the version of DAM used in the demo to version 0.2. Chris Pressey 1 year, 1 month ago
3 changed file(s) with 2 addition(s) and 209 deletion(s). Raw diff Collapse all Expand all
0 !function e(t,n,a){function o(u,r){if(!n[u]){if(!t[u]){var i="function"==typeof require&&require;if(!r&&i)return i(u,!0);if(l)return l(u,!0);var c=new Error("Cannot find module '"+u+"'");throw c.code="MODULE_NOT_FOUND",c}var f=n[u]={exports:{}};t[u][0].call(f.exports,function(e){return o(t[u][1][e]||e)},f,f.exports,e,t,n,a)}return n[u].exports}for(var l="function"==typeof require&&require,u=0;u<a.length;u++)o(a[u]);return o}({1:[function(e,t,n){"use strict";var a,o=(a=e("./dam.js"))&&a.__esModule?a:{default:a},l=e("./dam-widgets.js");window.DAM=o.default,o.default.makeCheckbox=l.makeCheckbox,o.default.makePanel=l.makePanel,o.default.makeSelect=l.makeSelect,o.default.makeRange=l.makeRange},{"./dam-widgets.js":2,"./dam.js":3}],2:[function(e,t,n){"use strict";var a,o=(a=e("./dam.js"))&&a.__esModule?a:{default:a};void 0!==t&&(t.exports={makeCheckbox:function(e){void 0===o.default.makeCheckboxCounter&&(o.default.makeCheckboxCounter=0);for(var t="cfzzzb_"+o.default.makeCheckboxCounter++,n=e.onchange||function(e){},a=new Array(arguments.length),l=0;l<a.length;++l)a[l]=arguments[l];return a[0]={for:t,class:"dam-widget dam-checkbox"},o.default.makeElem("span",[o.default.makeElem("input",[{type:"checkbox",id:t,onchange:function(e){n(e.target.checked)}},e.checkboxAttrs||{}]),o.default.makeElem("label",a)])},makePanel:function(e){var t=!!e.isOpen,n=e.title||"";function a(){return(t?"∇":"⊳")+" "+n}for(var l=new Array(arguments.length),u=0;u<l.length;++u)l[u]=arguments[u];l[0]={};var r=o.default.makeElem("div",l);r.style.display=t?"block":"none";var i=o.default.makeElem("button",[a(),{onclick:function(e){t=!t,i.textContent=a(),r.style.display=t?"block":"none"}}]);return o.default.makeElem("div",[{class:"dam-widget dam-panel"},i,r])},makeSelect:function(e){for(var t=e.title||"",n=e.options||[],a=e.onchange||function(e){},l=o.default.makeElem("select"),u=0;u<n.length;u++){var r=o.default.makeElem("option");r.value=n[u].value,r.text=n[u].text,r.selected=!!n[u].selected,l.options.add(r)}return l.addEventListener("change",function(e){a(n[l.selectedIndex])}),o.default.makeElem("label",[{class:"dam-widget dam-select"},t,l])},makeRange:function(e){var t,n,a=e.title||"",l=e.min,u=e.max,r=e.value||l,i=e.onchange||function(e){},c=e.textInputSize||5;n=o.default.makeElem("input",[{type:"range",min:l,max:u,value:r,onchange:function(e){var a=parseInt(n.value,10);!isNaN(a)&&a>=l&&a<=u&&(t.value=""+a,i(a))}}]),t=o.default.makeElem("input",[{size:""+c,value:""+r,onchange:function(e){var a=parseInt(t.value,10);!isNaN(a)&&a>=l&&a<=u&&(n.value=""+a,i(a))}}]);var f=o.default.makeElem("button",["+",{onclick:function(e){var a=parseInt(t.value,10);!isNaN(a)&&a<u&&(a++,t.value=""+a,n.value=""+a,i(a))}}]),d=o.default.makeElem("button",["-",{onclick:function(e){var a=parseInt(t.value,10);!isNaN(a)&&a>l&&(a--,t.value=""+a,n.value=""+a,i(a))}}]),m=o.default.makeElem("span",[{class:"dam-widget dam-range"},o.default.makeElem("label",[a,n]),t,d,f]);return m.setValue=function(e){!isNaN(e)&&e>=l&&e<=u&&(t.value=""+e,n.value=""+e,i(e))},m}})},{"./dam.js":3}],3:[function(e,t,n){"use strict";function a(e){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var o;o={makeElem:function(e,t){t=t||[];for(var n=document.createElement(e),o=0;o<t.length;o++){var l=t[o];l instanceof Element?n.appendChild(l):"string"==typeof l||l instanceof String?n.appendChild(document.createTextNode(l)):"object"===a(l)&&null!==l?Object.keys(l).forEach(function(e){"on"===e.substring(0,2)?n.addEventListener(e.substring(2),l[e]):null===l[e]?n.removeAttribute(e):n.setAttribute(e,l[e])}):console.log(l)}return n},maker:function(e){return function(){return o.makeElem(e,arguments)}}},void 0!==t?t.exports=o:"undefined"!=typeof window&&(window.DAM=o)},{}]},{},[1]);
+0
-208
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;
1414 <div id="installation"></div>
1515 </article>
1616
17 <script src="dam-plus-widgets-web.js"></script>
17 <script src="dam-plus-widgets-0.2.min.js"></script>
1818 <script src="../src/erratic-turtle.js"></script>
1919 <script src="../src/erratic-logo.js"></script>
2020 <script src="erratic-turtle-graphics-launcher.js"></script>