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> |