Commit 7209dcf4545236264520eaf6c7a67b2d3f4dc4b6 - DAM

+22

-6

README.md less more

9	9
10	10	DAM is a tiny library for creating bits of an HTML5 document.
11	11	(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
14	14	comes with a "standard widget library" that bloats it to about 6K.
15	15
16		The current version of DAM is 0.1.
	16	The current version of DAM is 0.1-PRE.
17	17
18	18	Basic usage
19	19	-----------
20	20
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:
22	23
23		<script src="dam.js"></script>
	24	<script>var module = {};</script><script src="dam.js"></script><script>var DAM = module.exports;</script>
24	25	<script>
25	26	var div=DAM.maker('div'), p=DAM.maker('p'), span=DAM.maker('span'), button=DAM.maker('button');
26	27	var d = div(

58	59
59	60	A simple example based on the code above:
60	61
61		<script src="dam.js"></script>
	62	<script>var module = {};</script><script src="dam.js"></script><script>var DAM = module.exports;</script>
62	63	<script>
63	64	var div=DAM.maker('div'), p=DAM.maker('p'), span=DAM.maker('span'), button=DAM.maker('button');
64	65	function makeGreeting(config) {

101	102	* [Panel widget](demo/panel.html)
102	103	* [Select widget](demo/select.html)
103	104	* [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.
104	120
105	121	### Advanced widget creation
106	122

+9

-4

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.
	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. */
4	6
5	7	if (typeof window === 'undefined' \|\| window.DAM === undefined) DAM = {};
6	8

29	31	}
30	32	return elem;
31	33	};
	34
32	35	DAM.maker = function(tag) {
33	36	return function() {
34	37	return DAM.makeElem(tag, arguments);

195	198
196	199	return DAM.makeElem('span', [{ 'class': "dam-widget dam-range" }, DAM.makeElem('label', [title, slider]), textInput, decButton, incButton]);
197	200	};
	201
	202	if (typeof module !== 'undefined') module.exports = DAM;

+17

-6

src/dam-widgets.js less more

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. */
1	1
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'
3	7
4	8	/*
5	9	* A labelled checkbox, where the checkbox appears to the left of the label.
6	10	* Arguments after the first (config) argument will be applied to the label element.
7	11	*/
8		DAM.makeCheckbox = function(config) {
	12	var makeCheckbox = function(config) {
9	13	if (typeof DAM.makeCheckboxCounter === 'undefined') DAM.makeCheckboxCounter = 0;
10	14	var checkboxId = 'cfzzzb_' + (DAM.makeCheckboxCounter++);
11	15

37	41	* A collapsible panel.
38	42	* Arguments after the first (config) argument will be applied to the inner container div element.
39	43	*/
40		DAM.makePanel = function(config) {
	44	var makePanel = function(config) {
41	45	var isOpen = !!(config.isOpen);
42	46	var title = config.title \|\| "";
43	47

72	76	/*
73	77	* A select dropdown.
74	78	*/
75		DAM.makeSelect = function(config) {
	79	var makeSelect = function(config) {
76	80	var title = config.title \|\| "";
77	81	var options = config.options \|\| [];
78	82	var onchange = config.onchange \|\| function(v) {};

94	98	/*
95	99	* A range control.
96	100	*/
97		DAM.makeRange = function(config) {
	101	var makeRange = function(config) {
98	102	var title = config.title \|\| "";
99	103	var min_ = config['min'];
100	104	var max_ = config['max'];

161	165
162	166	return DAM.makeElem('span', [{ 'class': "dam-widget dam-range" }, DAM.makeElem('label', [title, slider]), textInput, decButton, incButton]);
163	167	};
	168
	169	if (typeof module !== 'undefined') module.exports = {
	170	makeCheckbox: makeCheckbox,
	171	makePanel: makePanel,
	172	makeSelect: makeSelect,
	173	makeRange: makeRange
	174	};

+4

-1

src/dam.js less more

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. */
1	1
2	2	if (typeof window === 'undefined' \|\| window.DAM === undefined) DAM = {};
3	3

26	26	}
27	27	return elem;
28	28	};
	29
29	30	DAM.maker = function(tag) {
30	31	return function() {
31	32	return DAM.makeElem(tag, arguments);
32	33	};
33	34	};
	35
	36	if (typeof module !== 'undefined') module.exports = DAM;