Add classes on the widgets.
Chris Pressey
2 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 |
};
|