git @ Cat's Eye Technologies DAM / 6955dd7
Add classes on the widgets. Chris Pressey 3 years ago
3 changed file(s) with 25 addition(s) and 11 deletion(s). Raw diff Collapse all Expand all
113113 more explicit access to its arguments. Thus it is often called directly in
114114 widget makers.
115115
116 Some projects DAM is used in
117 ----------------------------
118
119 * [Cyclobots](https://catseye.tc/installation/Cyclobots)
120 * [Chzrxl](https://catseye.tc/installation/Chzrxl)
121 * [Maze Clouds](https://catseye.tc/installation/Maze_Clouds)
122
116123 Related work
117124 ------------
118125
136143 TODO
137144 ----
138145
139 Classes on widgets for styling (DAM_checkbox, DAM_panel, etc)
140
141146 Function to set the value of a DAM range control in an orderly fashion
22 <meta charset="utf-8">
33 <title>DAM panel demo</title>
44 </head>
5 <style>
6 .dam-panel {
7 border: 1px solid black;
8 margin-bottom: 0.5em;
9 }
10 .dam-panel > button {
11 letter-spacing: 3px;
12 }
13 .dam-panel > div {
14 padding: 0.5em;
15 }
16 </style>
517 <body>
618
719 <h1>DAM panel demo</h1>
820
921 <p>DAM comes with a panel widget. This widget provides a button by which it can
10 be collapsed or expanded.</p>
22 be collapsed or expanded. The styling is just an example.</p>
1123
1224 <div id="installation"></div>
1325
2739 button("Knob 2", { onclick: function(e) { updateStatus("Knob 2"); }})
2840 ),
2941 DAM.makePanel(
30 { title: "Doohickeys", isOpen: true },
42 { title: "Doohickeys", isOpen: false },
3143 button("Doohickey 1", { onclick: function(e) { updateStatus("Doohickey 1"); }}),
3244 button("Doohickey 2", { onclick: function(e) { updateStatus("Doohickey 2"); }})
3345 ),
1616 for(var i = 0; i < args.length; ++i) {
1717 args[i] = arguments[i];
1818 }
19 args[0] = { 'for': checkboxId }
19 args[0] = { 'for': checkboxId, 'class': "dam-widget dam-checkbox" }
2020
2121 return DAM.makeElem('span', [
2222 DAM.makeElem('input', [
6666 }
6767 ]);
6868
69 return DAM.makeElem("div", [
70 button,
71 innerContainer
72 ]);
69 return DAM.makeElem("div", [{ 'class': "dam-widget dam-panel" }, button, innerContainer]);
7370 };
7471
7572 /*
9188 select.addEventListener('change', function(e) {
9289 onchange(options[select.selectedIndex]);
9390 });
94 return DAM.makeElem('label', [title, select]);
91 return DAM.makeElem('label', [{ 'class': "dam-widget dam-select" }, title, select]);
9592 };
9693
9794 /*
162159 }
163160 ]);
164161
165 return DAM.makeElem('span', [DAM.makeElem('label', [title, slider]), textInput, decButton, incButton]);
162 return DAM.makeElem('span', [{ 'class': "dam-widget dam-range" }, DAM.makeElem('label', [title, slider]), textInput, decButton, incButton]);
166163 };