Add classes on the widgets.
Chris Pressey
3 years ago
| 113 | 113 |
more explicit access to its arguments. Thus it is often called directly in
|
| 114 | 114 |
widget makers.
|
| 115 | 115 |
|
|
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 |
|
| 116 | 123 |
Related work
|
| 117 | 124 |
------------
|
| 118 | 125 |
|
|
| 136 | 143 |
TODO
|
| 137 | 144 |
----
|
| 138 | 145 |
|
| 139 | |
Classes on widgets for styling (DAM_checkbox, DAM_panel, etc)
|
| 140 | |
|
| 141 | 146 |
Function to set the value of a DAM range control in an orderly fashion
|
| 2 | 2 |
<meta charset="utf-8">
|
| 3 | 3 |
<title>DAM panel demo</title>
|
| 4 | 4 |
</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>
|
| 5 | 17 |
<body>
|
| 6 | 18 |
|
| 7 | 19 |
<h1>DAM panel demo</h1>
|
| 8 | 20 |
|
| 9 | 21 |
<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>
|
| 11 | 23 |
|
| 12 | 24 |
<div id="installation"></div>
|
| 13 | 25 |
|
|
| 27 | 39 |
button("Knob 2", { onclick: function(e) { updateStatus("Knob 2"); }})
|
| 28 | 40 |
),
|
| 29 | 41 |
DAM.makePanel(
|
| 30 | |
{ title: "Doohickeys", isOpen: true },
|
|
42 |
{ title: "Doohickeys", isOpen: false },
|
| 31 | 43 |
button("Doohickey 1", { onclick: function(e) { updateStatus("Doohickey 1"); }}),
|
| 32 | 44 |
button("Doohickey 2", { onclick: function(e) { updateStatus("Doohickey 2"); }})
|
| 33 | 45 |
),
|
| 16 | 16 |
for(var i = 0; i < args.length; ++i) {
|
| 17 | 17 |
args[i] = arguments[i];
|
| 18 | 18 |
}
|
| 19 | |
args[0] = { 'for': checkboxId }
|
|
19 |
args[0] = { 'for': checkboxId, 'class': "dam-widget dam-checkbox" }
|
| 20 | 20 |
|
| 21 | 21 |
return DAM.makeElem('span', [
|
| 22 | 22 |
DAM.makeElem('input', [
|
|
| 66 | 66 |
}
|
| 67 | 67 |
]);
|
| 68 | 68 |
|
| 69 | |
return DAM.makeElem("div", [
|
| 70 | |
button,
|
| 71 | |
innerContainer
|
| 72 | |
]);
|
|
69 |
return DAM.makeElem("div", [{ 'class': "dam-widget dam-panel" }, button, innerContainer]);
|
| 73 | 70 |
};
|
| 74 | 71 |
|
| 75 | 72 |
/*
|
|
| 91 | 88 |
select.addEventListener('change', function(e) {
|
| 92 | 89 |
onchange(options[select.selectedIndex]);
|
| 93 | 90 |
});
|
| 94 | |
return DAM.makeElem('label', [title, select]);
|
|
91 |
return DAM.makeElem('label', [{ 'class': "dam-widget dam-select" }, title, select]);
|
| 95 | 92 |
};
|
| 96 | 93 |
|
| 97 | 94 |
/*
|
|
| 162 | 159 |
}
|
| 163 | 160 |
]);
|
| 164 | 161 |
|
| 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]);
|
| 166 | 163 |
};
|