git @ Cat's Eye Technologies DAM / 7209dcf
Hurl ourselves gormlessly towards ES6. Chris Pressey 3 years ago
4 changed file(s) with 52 addition(s) and 17 deletion(s). Raw diff Collapse all Expand all
99
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.)
12 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). It
12 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). It
1414 comes with a "standard widget library" that bloats it to about 6K.
1515
16 The current version of DAM is 0.1.
16 The current version of DAM is 0.1-PRE.
1717
1818 Basic usage
1919 -----------
2020
21 Basically you can use it like this:
21 If you want to just drop DAM's basic functionality into a web page,
22 you can use it like this:
2223
23 <script src="dam.js"></script>
24 <script>var module = {};</script><script src="dam.js"></script><script>var DAM = module.exports;</script>
2425 <script>
2526 var div=DAM.maker('div'), p=DAM.maker('p'), span=DAM.maker('span'), button=DAM.maker('button');
2627 var d = div(
5859
5960 A simple example based on the code above:
6061
61 <script src="dam.js"></script>
62 <script>var module = {};</script><script src="dam.js"></script><script>var DAM = module.exports;</script>
6263 <script>
6364 var div=DAM.maker('div'), p=DAM.maker('p'), span=DAM.maker('span'), button=DAM.maker('button');
6465 function makeGreeting(config) {
101102 * [Panel widget](demo/panel.html)
102103 * [Select widget](demo/select.html)
103104 * [Range widget](demo/range.html)
105
106 Unlike the other files, `dam-widgets.js` is written in ES6. If you want to
107 use it in an ES6 project, you can, for example,
108
109 import DAM from "./dam.js"
110 import { makeCheckbox, makePanel } from "./dam-widgets.js"
111
112 However, you're not required to do this. If you just want an ES5 file that
113 you can drop onto a web page, DAM ships with `dam-plus-widgets-web.js` for
114 this purpose. Just:
115
116 <script src="dam-plus-widgets-web.js">
117
118 and then you will have `DAM` as well as all the standard widget makers (nested
119 under `DAM`) at your fingertips.
104120
105121 ### Advanced widget creation
106122
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.
0 /* dam-plus-widgets-web.js version 0.1-PRE. 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. */
46
57 if (typeof window === 'undefined' || window.DAM === undefined) DAM = {};
68
2931 }
3032 return elem;
3133 };
34
3235 DAM.maker = function(tag) {
3336 return function() {
3437 return DAM.makeElem(tag, arguments);
195198
196199 return DAM.makeElem('span', [{ 'class': "dam-widget dam-range" }, DAM.makeElem('label', [title, slider]), textInput, decButton, incButton]);
197200 };
201
202 if (typeof module !== 'undefined') module.exports = DAM;
0 /* dam-widgets.js version 0.0. This file is in the public domain. */
0 /* dam-widgets.js version 0.1-PRE. This file is in the public domain. */
11
2 /* dam.js should be included before this source. */
2 /* if you want to use this file in an ES5 context, either remove the following line
3 and ensure dam.js has already been loaded, or just use `dam-plus-widgets-web.js`
4 instead of this file, it's probably easier to do that, just do that instead. */
5
6 import DAM from './dam.js'
37
48 /*
59 * A labelled checkbox, where the checkbox appears to the left of the label.
610 * Arguments after the first (config) argument will be applied to the label element.
711 */
8 DAM.makeCheckbox = function(config) {
12 var makeCheckbox = function(config) {
913 if (typeof DAM.makeCheckboxCounter === 'undefined') DAM.makeCheckboxCounter = 0;
1014 var checkboxId = 'cfzzzb_' + (DAM.makeCheckboxCounter++);
1115
3741 * A collapsible panel.
3842 * Arguments after the first (config) argument will be applied to the inner container div element.
3943 */
40 DAM.makePanel = function(config) {
44 var makePanel = function(config) {
4145 var isOpen = !!(config.isOpen);
4246 var title = config.title || "";
4347
7276 /*
7377 * A select dropdown.
7478 */
75 DAM.makeSelect = function(config) {
79 var makeSelect = function(config) {
7680 var title = config.title || "";
7781 var options = config.options || [];
7882 var onchange = config.onchange || function(v) {};
9498 /*
9599 * A range control.
96100 */
97 DAM.makeRange = function(config) {
101 var makeRange = function(config) {
98102 var title = config.title || "";
99103 var min_ = config['min'];
100104 var max_ = config['max'];
161165
162166 return DAM.makeElem('span', [{ 'class': "dam-widget dam-range" }, DAM.makeElem('label', [title, slider]), textInput, decButton, incButton]);
163167 };
168
169 if (typeof module !== 'undefined') module.exports = {
170 makeCheckbox: makeCheckbox,
171 makePanel: makePanel,
172 makeSelect: makeSelect,
173 makeRange: makeRange
174 };
0 /* dam.js version 0.0. This file is in the public domain. */
0 /* dam.js version 0.1-PRE. This file is in the public domain. */
11
22 if (typeof window === 'undefined' || window.DAM === undefined) DAM = {};
33
2626 }
2727 return elem;
2828 };
29
2930 DAM.maker = function(tag) {
3031 return function() {
3132 return DAM.makeElem(tag, arguments);
3233 };
3334 };
35
36 if (typeof module !== 'undefined') module.exports = DAM;