Upgrade the version of DAM used in the demo to version 0.2.
Chris Pressey
1 year, 8 months ago
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 | /* 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; |
14 | 14 | <div id="installation"></div> |
15 | 15 | </article> |
16 | 16 | |
17 | <script src="dam-plus-widgets-web.js"></script> | |
17 | <script src="dam-plus-widgets-0.2.min.js"></script> | |
18 | 18 | <script src="../src/erratic-turtle.js"></script> |
19 | 19 | <script src="../src/erratic-logo.js"></script> |
20 | 20 | <script src="erratic-turtle-graphics-launcher.js"></script> |