perfect-gui 3.5.16 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -99
- package/package.json +1 -1
- package/src/index.js +173 -121
- package/src/styles.js +17 -8
- package/test/src/index.html +390 -102
- package/test/src/index.js +21 -7
- package/test/src/js/{basics.js → methods/basics.js} +12 -12
- package/test/src/js/methods/button.js +15 -0
- package/test/src/js/methods/color.js +14 -0
- package/test/src/js/methods/folder.js +34 -0
- package/test/src/js/methods/image.js +17 -0
- package/test/src/js/methods/list.js +14 -0
- package/test/src/js/methods/slider.js +26 -0
- package/test/src/js/methods/toggle.js +15 -0
- package/test/src/js/methods/vector2.js +21 -0
- package/test/src/js/vectors.js +6 -6
- package/test/src/styles/_sidebar.css +45 -0
- package/test/src/styles/_table.css +21 -0
- package/test/src/styles/styles.css +26 -54
- package/test/src/js/folders.js +0 -27
package/test/src/index.html
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="utf-8" />
|
|
6
6
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
7
|
-
<title>Perfect GUI</title>
|
|
7
|
+
<title>Perfect GUI | Documentation</title>
|
|
8
8
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
9
9
|
|
|
10
10
|
<meta name="author" content="Thibaut Foussard">
|
|
@@ -36,13 +36,13 @@
|
|
|
36
36
|
src="https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/fav/180x180.png">
|
|
37
37
|
</div>
|
|
38
38
|
<a class="sidebar__title" href="#basics">Methods</a>
|
|
39
|
-
<a class="sidebar__item" href="#
|
|
40
|
-
<a class="sidebar__item" href="#
|
|
41
|
-
<a class="sidebar__item" href="#
|
|
42
|
-
<a class="sidebar__item" href="#
|
|
43
|
-
<a class="sidebar__item" href="#
|
|
44
|
-
<a class="sidebar__item" href="#
|
|
45
|
-
<a class="sidebar__item" href="#
|
|
39
|
+
<a class="sidebar__item" href="#button">.button()</a>
|
|
40
|
+
<a class="sidebar__item" href="#slider">.slider()</a>
|
|
41
|
+
<a class="sidebar__item" href="#toggle">.toggle()</a>
|
|
42
|
+
<a class="sidebar__item" href="#list">.list()</a>
|
|
43
|
+
<a class="sidebar__item" href="#image">.image()</a>
|
|
44
|
+
<a class="sidebar__item" href="#color">.color()</a>
|
|
45
|
+
<a class="sidebar__item" href="#vector2">.vector2()</a>
|
|
46
46
|
<a class="sidebar__item" href="#folders">.folder()</a>
|
|
47
47
|
<a class="sidebar__item" href="#other-options">.toggleClose()</a>
|
|
48
48
|
<a class="sidebar__title" href="#other-options">Options</a>
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
</div>
|
|
57
57
|
<div class="main">
|
|
58
58
|
<div class="title">
|
|
59
|
-
<h1>Perfect GUI</h1>
|
|
59
|
+
<h1>Perfect GUI <i>v4</i></h1>
|
|
60
60
|
|
|
61
61
|
<a class="link" target="_blank" href="https://github.com/thibka/perfect-gui">Github</a>
|
|
62
62
|
<a class="link" target="_blank" href="https://www.npmjs.com/package/perfect-gui">NPM</a>
|
|
@@ -64,10 +64,13 @@
|
|
|
64
64
|
</div>
|
|
65
65
|
<p class="subtitle">A nice, simple and (<span id="subtitle-random">probably not</span>) perfect GUI for JavaScript.</p>
|
|
66
66
|
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
67
70
|
<h2 id="basics">Basics</h2>
|
|
68
71
|
|
|
69
72
|
<div id="container-1" class="container">
|
|
70
|
-
<div class="element"></div>
|
|
73
|
+
<div class="element left"></div>
|
|
71
74
|
</div>
|
|
72
75
|
|
|
73
76
|
<div class="code-button" onclick="document.getElementById('code-block-basics').classList.toggle('code-block--hidden')">See code</div>
|
|
@@ -93,77 +96,392 @@ gui.slider({
|
|
|
93
96
|
element.style.transform = `translateX(${position.x}px)`;
|
|
94
97
|
});
|
|
95
98
|
|
|
96
|
-
gui.toggle('Switch', true, state => {
|
|
99
|
+
gui.toggle({ name: 'Switch', state: true }, state => {
|
|
97
100
|
if (state) element.classList.remove('round');
|
|
98
101
|
else element.classList.add('round');
|
|
99
102
|
});
|
|
100
103
|
|
|
101
|
-
gui.list('List', ['red', 'pink', 'yellow', 'blue'],
|
|
102
|
-
element.style.backgroundColor =
|
|
104
|
+
gui.list({ name: 'List', options: ['red', 'pink', 'yellow', 'blue'] }, option => {
|
|
105
|
+
element.style.backgroundColor = option;
|
|
103
106
|
});
|
|
104
107
|
|
|
105
|
-
gui.image('Image 1', 'path/to/image-1.jpg', e => {
|
|
108
|
+
gui.image({ name: 'Image 1', path: 'path/to/image-1.jpg' }, e => {
|
|
106
109
|
element.style.backgroundImage = `url(${e.path})`;
|
|
107
110
|
});
|
|
108
111
|
|
|
109
|
-
gui.image('Image 2', 'path/to/image-2.jpg', e => {
|
|
112
|
+
gui.image({ name: 'Image 2', path: 'path/to/image-2.jpg' }, e => {
|
|
110
113
|
element.style.backgroundImage = `url(${e.path})`;
|
|
111
114
|
});
|
|
112
115
|
|
|
113
|
-
gui.image('Image 3', 'path/to/image-3.jpg', e => {
|
|
116
|
+
gui.image({ name: 'Image 3', path: 'path/to/image-3.jpg' }, e => {
|
|
114
117
|
element.style.backgroundImage = `url(${e.path})`;
|
|
115
118
|
});
|
|
116
119
|
|
|
117
|
-
gui.color('Color', '#ff0000', color => {
|
|
120
|
+
gui.color({ name: 'Color', value: '#ff0000' }, color => {
|
|
118
121
|
element.style.backgroundColor = color;
|
|
119
122
|
});
|
|
120
123
|
</code></pre>
|
|
121
|
-
|
|
122
124
|
</div>
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
<h2 id="button">.button( parameters, callback )</h2>
|
|
130
|
+
<table cellspacing="0">
|
|
131
|
+
<tr>
|
|
132
|
+
<th>Parameter</th>
|
|
133
|
+
<th>Type</th>
|
|
134
|
+
<th>Description</th>
|
|
135
|
+
</tr>
|
|
136
|
+
<tr>
|
|
137
|
+
<td>name</td>
|
|
138
|
+
<td>string</td>
|
|
139
|
+
<td>Optional.</td>
|
|
140
|
+
</tr>
|
|
141
|
+
</table>
|
|
142
|
+
<div id="container-button" class="container container--small">
|
|
143
|
+
<div class="element left"></div>
|
|
144
|
+
</div>
|
|
145
|
+
<div id="code-block-button" class="code-block">
|
|
146
|
+
<pre><code class="language-js">import GUI from 'perfect-gui';
|
|
147
|
+
|
|
148
|
+
const gui = new GUI();
|
|
149
|
+
|
|
150
|
+
gui.button({ name: 'Button' }, changeColor);</code></pre>
|
|
151
|
+
// or
|
|
152
|
+
gui.button('Button', changeColor);
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
<h2 id="slider">.slider( parameters, callback )</h2>
|
|
158
|
+
<table cellspacing="0">
|
|
159
|
+
<tr>
|
|
160
|
+
<th>Parameter</th>
|
|
161
|
+
<th>Type</th>
|
|
162
|
+
<th>Description</th>
|
|
163
|
+
</tr>
|
|
164
|
+
<tr>
|
|
165
|
+
<td>name</td>
|
|
166
|
+
<td>string</td>
|
|
167
|
+
<td>Optional. Defaults to the <span class="code-inline">prop</span> (or <span class="code-inline">property</span>) parameter if one is provided.</td>
|
|
168
|
+
</tr>
|
|
169
|
+
<tr>
|
|
170
|
+
<td>value</td>
|
|
171
|
+
<td>number</td>
|
|
172
|
+
<td>Optional. Defaults to the average value between <span class="code-inline">min</span> and <span class="code-inline">max</span> properties.</td>
|
|
173
|
+
</tr>
|
|
174
|
+
<tr>
|
|
175
|
+
<td>min</td>
|
|
176
|
+
<td>number</td>
|
|
177
|
+
<td>Optional. Default is 0.</td>
|
|
178
|
+
</tr>
|
|
179
|
+
<tr>
|
|
180
|
+
<td>max</td>
|
|
181
|
+
<td>number</td>
|
|
182
|
+
<td>Optional. Default is 1.</td>
|
|
183
|
+
</tr>
|
|
184
|
+
<tr>
|
|
185
|
+
<td>step</td>
|
|
186
|
+
<td>number</td>
|
|
187
|
+
<td>Increment by which to change value.<br>
|
|
188
|
+
Optional. Default is calculated so that there are 100 steps between <span class="code-inline">min</span> and <span class="code-inline">max</span>.</td>
|
|
189
|
+
</tr>
|
|
190
|
+
<tr>
|
|
191
|
+
<td>obj || object</td>
|
|
192
|
+
<td>object</td>
|
|
193
|
+
<td>Optional. Target object. Ignored if a <span class="code-inline">value</span> is specified.</td>
|
|
194
|
+
</tr>
|
|
195
|
+
<tr>
|
|
196
|
+
<td>prop || property</td>
|
|
197
|
+
<td>string</td>
|
|
198
|
+
<td>Optional. Target object property. Ignored if a <span class="code-inline">value</span> is specified.</td>
|
|
199
|
+
</tr>
|
|
200
|
+
</table>
|
|
201
|
+
<p>This method can be used in 2 ways:
|
|
202
|
+
<ul>
|
|
203
|
+
<li>with a <span class="code-inline">value</span> parameter and a callback function to create a "simple" slider (see first example below). The current value will then be passed to the callback.</li>
|
|
204
|
+
<li>with an <span class="code-inline">object</span> and its target <span class="code-inline">property</span> to bind the slider and the property together (see second example below).
|
|
205
|
+
Such a slider will automatically update the value of the object property, therefore a callback isn't necessarily needed.
|
|
206
|
+
Directly updating the property would also update the slider.</li>
|
|
207
|
+
</ul>
|
|
208
|
+
</p>
|
|
209
|
+
<div id="container-slider" class="container container--small">
|
|
210
|
+
<div class="element left"></div>
|
|
211
|
+
</div>
|
|
212
|
+
<div id="code-block-button" class="code-block">
|
|
213
|
+
<pre><code class="language-js">import GUI from 'perfect-gui';
|
|
214
|
+
|
|
215
|
+
const position = { x: 0 };
|
|
216
|
+
const gui = new GUI();
|
|
217
|
+
|
|
218
|
+
// Simple slider with value & callback
|
|
219
|
+
gui.slider({ name: 'Simple slider (value & callback)', value: 1 },
|
|
220
|
+
value => {
|
|
221
|
+
element.style.opacity = value;
|
|
222
|
+
}
|
|
223
|
+
);
|
|
224
|
+
|
|
225
|
+
// Object binding
|
|
226
|
+
gui.slider({ name: 'Slider with object binding', obj: position, prop: 'x', min: -30, max: 30 },
|
|
227
|
+
() => {
|
|
228
|
+
element.style.transform = `translateX(${position.x}px)`;
|
|
229
|
+
}
|
|
230
|
+
);</code></pre>
|
|
231
|
+
</div>
|
|
232
|
+
|
|
233
|
+
|
|
123
234
|
|
|
124
|
-
<h2 id="vectors">Vectors</h2>
|
|
125
235
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
</
|
|
236
|
+
<h2 id="toggle">.toggle( parameters, callback )</h2>
|
|
237
|
+
<table cellspacing="0">
|
|
238
|
+
<tr>
|
|
239
|
+
<th>Parameter</th>
|
|
240
|
+
<th>Type</th>
|
|
241
|
+
<th>Description</th>
|
|
242
|
+
</tr>
|
|
243
|
+
<tr>
|
|
244
|
+
<td>name</td>
|
|
245
|
+
<td>string</td>
|
|
246
|
+
<td>Optional.</td>
|
|
247
|
+
</tr>
|
|
248
|
+
<tr>
|
|
249
|
+
<td>value</td>
|
|
250
|
+
<td>boolean</td>
|
|
251
|
+
<td>Optional. Default is false.</td>
|
|
252
|
+
</tr>
|
|
253
|
+
</table>
|
|
254
|
+
<div id="container-toggle" class="container container--small">
|
|
255
|
+
<div class="element left"></div>
|
|
256
|
+
</div>
|
|
257
|
+
<div id="code-block-toggle" class="code-block">
|
|
258
|
+
<pre><code class="language-js">import GUI from 'perfect-gui';
|
|
259
|
+
|
|
260
|
+
const gui = new GUI();
|
|
261
|
+
|
|
262
|
+
gui.toggle({ name: 'Toggle', value: true }, value => {
|
|
263
|
+
if ( value ) element.classList.remove('round');
|
|
264
|
+
else element.classList.add('round');
|
|
265
|
+
});</code></pre>
|
|
266
|
+
</div>
|
|
267
|
+
|
|
130
268
|
|
|
131
|
-
<div class="code-button" onclick="document.getElementById('code-block-vectors').classList.toggle('code-block--hidden')">See code</div>
|
|
132
|
-
<div id="code-block-vectors" class="code-block code-block--hidden">
|
|
133
|
-
<pre><code class="language-js">const position = {
|
|
134
|
-
x: 0,
|
|
135
|
-
y: 0
|
|
136
|
-
}
|
|
137
269
|
|
|
138
|
-
|
|
139
|
-
|
|
270
|
+
|
|
271
|
+
<h2 id="list">.list( parameters, callback )</h2>
|
|
272
|
+
<table cellspacing="0">
|
|
273
|
+
<tr>
|
|
274
|
+
<th>Parameter</th>
|
|
275
|
+
<th>Type</th>
|
|
276
|
+
<th>Description</th>
|
|
277
|
+
</tr>
|
|
278
|
+
<tr>
|
|
279
|
+
<td>name</td>
|
|
280
|
+
<td>string</td>
|
|
281
|
+
<td>Optional.</td>
|
|
282
|
+
</tr>
|
|
283
|
+
<tr>
|
|
284
|
+
<td>values</td>
|
|
285
|
+
<td>array</td>
|
|
286
|
+
<td>Options to be displayed.</td>
|
|
287
|
+
</tr>
|
|
288
|
+
</table>
|
|
289
|
+
<div id="container-list" class="container container--small">
|
|
290
|
+
<div class="element left" style="background-color: red;"></div>
|
|
291
|
+
</div>
|
|
292
|
+
<div id="code-block-list" class="code-block">
|
|
293
|
+
<pre><code class="language-js">import GUI from 'perfect-gui';
|
|
294
|
+
|
|
295
|
+
const gui = new GUI();
|
|
296
|
+
|
|
297
|
+
gui.list({ name: 'List', values: ['red', 'pink', 'yellow', 'blue'] }, selected_value => {
|
|
298
|
+
element.style.backgroundColor = selected_value;
|
|
140
299
|
});
|
|
141
300
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
301
|
+
// alternatively you could also call it this way
|
|
302
|
+
gui.options({ name: 'List', values: ['red', 'pink', 'yellow', 'blue'] }, selected_value => {
|
|
303
|
+
element.style.backgroundColor = selected_value;
|
|
145
304
|
});
|
|
305
|
+
</code></pre>
|
|
306
|
+
</div>
|
|
146
307
|
|
|
147
|
-
function loop() {
|
|
148
|
-
element.style.transform = `translate(${position.x}px, ${-position.y}px)`;
|
|
149
|
-
requestAnimationFrame(loop);
|
|
150
|
-
}
|
|
151
308
|
|
|
152
|
-
loop();</code></pre>
|
|
153
|
-
</div>
|
|
154
309
|
|
|
155
|
-
|
|
310
|
+
<h2 id="image">.image( parameters, callback )</h2>
|
|
311
|
+
<table cellspacing="0">
|
|
312
|
+
<tr>
|
|
313
|
+
<th>Parameter</th>
|
|
314
|
+
<th>Type</th>
|
|
315
|
+
<th>Description</th>
|
|
316
|
+
</tr>
|
|
317
|
+
<tr>
|
|
318
|
+
<td>name</td>
|
|
319
|
+
<td>string</td>
|
|
320
|
+
<td>Optional. Default is the image file name.</td>
|
|
321
|
+
</tr>
|
|
322
|
+
<tr>
|
|
323
|
+
<td>path</td>
|
|
324
|
+
<td>string</td>
|
|
325
|
+
<td>Image file path.</td>
|
|
326
|
+
</tr>
|
|
327
|
+
</table>
|
|
328
|
+
<div id="container-image" class="container container--small">
|
|
329
|
+
<div class="element left"></div>
|
|
330
|
+
</div>
|
|
331
|
+
<div id="code-block-image" class="code-block">
|
|
332
|
+
<pre><code class="language-js">import GUI from 'perfect-gui';
|
|
333
|
+
|
|
334
|
+
const gui = new GUI();
|
|
335
|
+
|
|
336
|
+
gui.image({ name: 'Lorem ipsum', path: 'path/to/image.jpg'}, evt => {
|
|
337
|
+
element.style.backgroundImage = `url( ${ evt.path } )`;
|
|
338
|
+
});
|
|
339
|
+
</code></pre>
|
|
340
|
+
</div>
|
|
341
|
+
|
|
342
|
+
|
|
156
343
|
|
|
157
|
-
<p>GUI instances can be positioned in any corner of the screen / container.</p>
|
|
158
|
-
<p>When multiple instances share the same position (like GUI 1 and GUI 2 in the example below), they are stacked next to each other.</p>
|
|
159
344
|
|
|
160
|
-
|
|
161
|
-
|
|
345
|
+
<h2 id="color">.color( parameters, callback )</h2>
|
|
346
|
+
<table cellspacing="0">
|
|
347
|
+
<tr>
|
|
348
|
+
<th>Parameter</th>
|
|
349
|
+
<th>Type</th>
|
|
350
|
+
<th>Description</th>
|
|
351
|
+
</tr>
|
|
352
|
+
<tr>
|
|
353
|
+
<td>name</td>
|
|
354
|
+
<td>string</td>
|
|
355
|
+
<td>Optional.</td>
|
|
356
|
+
</tr>
|
|
357
|
+
<tr>
|
|
358
|
+
<td>value</td>
|
|
359
|
+
<td>string</td>
|
|
360
|
+
<td>Hexadecimal color value.<br>
|
|
361
|
+
Optional. Default is <span class="code-inline">#000000</span>.</td>
|
|
362
|
+
</tr>
|
|
363
|
+
</table>
|
|
364
|
+
<div id="container-color" class="container container--small">
|
|
365
|
+
<div class="element left"></div>
|
|
366
|
+
</div>
|
|
367
|
+
<div id="code-block-color" class="code-block">
|
|
368
|
+
<pre><code class="language-js">import GUI from 'perfect-gui';
|
|
369
|
+
|
|
370
|
+
const gui = new GUI();
|
|
371
|
+
|
|
372
|
+
gui.color({ name: 'Color', value: '#06ff89' }, color => {
|
|
373
|
+
element.style.backgroundColor = color;
|
|
374
|
+
});
|
|
375
|
+
</code></pre>
|
|
376
|
+
</div>
|
|
377
|
+
|
|
378
|
+
|
|
379
|
+
|
|
380
|
+
|
|
381
|
+
<h2 id="vector2">vector2( parameters, callback );</h2>
|
|
382
|
+
<table cellspacing="0">
|
|
383
|
+
<tr>
|
|
384
|
+
<th>Parameter</th>
|
|
385
|
+
<th>Type</th>
|
|
386
|
+
<th>Description</th>
|
|
387
|
+
</tr>
|
|
388
|
+
<tr>
|
|
389
|
+
<td>name</td>
|
|
390
|
+
<td>string</td>
|
|
391
|
+
<td>Optional.</td>
|
|
392
|
+
</tr>
|
|
393
|
+
<tr>
|
|
394
|
+
<td>x</td>
|
|
395
|
+
<td>object</td>
|
|
396
|
+
<td>An object containing the x-axis properties<br>
|
|
397
|
+
<span class="code-inline">{ obj<object>, prop<string>, min<number>, max<number> }</span></td>
|
|
398
|
+
</tr>
|
|
399
|
+
<tr>
|
|
400
|
+
<td>y</td>
|
|
401
|
+
<td>object</td>
|
|
402
|
+
<td>An object containing the y-axis properties<br>
|
|
403
|
+
<span class="code-inline">{ obj<object>, prop<string>, min<number>, max<number> }</span></td>
|
|
404
|
+
</tr>
|
|
405
|
+
</table>
|
|
406
|
+
<p>A vector2() component will automatically update the value of the target object property, therefore a callback isn't necessarily needed. Directly updating the object property will also update the vector2() component.</p>
|
|
407
|
+
<div id="container-vector2" class="container" style="height: 340px;">
|
|
408
|
+
<div class="element left"></div>
|
|
409
|
+
<p class="note"></p>
|
|
410
|
+
</div>
|
|
411
|
+
<div id="code-block-vector2" class="code-block">
|
|
412
|
+
<pre><code class="language-js">import GUI from 'perfect-gui';
|
|
413
|
+
|
|
414
|
+
const position = { x: 0, y: 0 };
|
|
415
|
+
const gui = new GUI();
|
|
416
|
+
|
|
417
|
+
gui.vector2({ name: 'Position',
|
|
418
|
+
x: { obj: position, prop: 'x', min: -50, max: 50 },
|
|
419
|
+
y: { obj: position, prop: 'y', min: -50, max: 50 },
|
|
420
|
+
}, (x, y) => {
|
|
421
|
+
element.style.transform = `translate(${x}px, ${-y}px)`;
|
|
422
|
+
});</code></pre>
|
|
162
423
|
</div>
|
|
163
424
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
425
|
+
|
|
426
|
+
|
|
427
|
+
|
|
428
|
+
<h2 id="folders">folder( parameters )</h2>
|
|
429
|
+
<table cellspacing="0">
|
|
430
|
+
<tr>
|
|
431
|
+
<th>Parameter</th>
|
|
432
|
+
<th>Type</th>
|
|
433
|
+
<th>Description</th>
|
|
434
|
+
</tr>
|
|
435
|
+
<tr>
|
|
436
|
+
<td>name</td>
|
|
437
|
+
<td>string</td>
|
|
438
|
+
<td>Optional.</td>
|
|
439
|
+
</tr>
|
|
440
|
+
<tr>
|
|
441
|
+
<td>closed</td>
|
|
442
|
+
<td>boolean</td>
|
|
443
|
+
<td>Optional. Default is <span class="code-inline">false</span>.</td>
|
|
444
|
+
</tr>
|
|
445
|
+
<tr>
|
|
446
|
+
<td>color</td>
|
|
447
|
+
<td>string</td>
|
|
448
|
+
<td>Optional. Background color of the folder.</td>
|
|
449
|
+
</tr>
|
|
450
|
+
</table>
|
|
451
|
+
<div id="container-folder" class="container" style="height: 280px;">
|
|
452
|
+
<div class="element left"></div>
|
|
453
|
+
</div>
|
|
454
|
+
<div id="code-block-folder" class="code-block">
|
|
455
|
+
<pre><code class="language-js">import GUI from 'perfect-gui';
|
|
456
|
+
|
|
457
|
+
const gui = new GUI();
|
|
458
|
+
|
|
459
|
+
let folder_1 = gui.folder({ name: 'Folder 1' });
|
|
460
|
+
folder_1.button('Random color', changeColor);
|
|
461
|
+
folder_1.slider({ name: 'Size', value: 1 }, changeScale);
|
|
462
|
+
|
|
463
|
+
let folder_2 = gui.folder({ name: 'Folder 2', color: '#993333' });
|
|
464
|
+
folder_2.button('Random color', changeColor);
|
|
465
|
+
|
|
466
|
+
let folder_3 = gui.folder({ name: 'Folder 3', closed: true });
|
|
467
|
+
folder_3.button('Random color', changeColor);</code></pre>
|
|
468
|
+
</div>
|
|
469
|
+
|
|
470
|
+
|
|
471
|
+
|
|
472
|
+
|
|
473
|
+
<h2 id="positioning">Positioning</h2>
|
|
474
|
+
|
|
475
|
+
<p>GUI instances can be positioned in any corner of the screen / container.</p>
|
|
476
|
+
<p>When multiple instances share the same position (like GUI 1 and GUI 2 in the example below), they are stacked next to each other.</p>
|
|
477
|
+
|
|
478
|
+
<div id="container-2" class="container">
|
|
479
|
+
<div class="element"></div>
|
|
480
|
+
</div>
|
|
481
|
+
|
|
482
|
+
<div class="code-button" onclick="document.getElementById('code-block-positioning').classList.toggle('code-block--hidden')">See code</div>
|
|
483
|
+
<div id="code-block-positioning" class="code-block code-block--hidden">
|
|
484
|
+
<pre><code class="language-js">const gui_1 = new GUI({
|
|
167
485
|
name: 'GUI 1',
|
|
168
486
|
width: 200
|
|
169
487
|
});
|
|
@@ -192,57 +510,25 @@ const gui_4 = new GUI({
|
|
|
192
510
|
});
|
|
193
511
|
|
|
194
512
|
gui_4.button('Button', () => element.style.backgroundColor = getRandomColor() );</code></pre>
|
|
513
|
+
</div>
|
|
195
514
|
|
|
196
|
-
</div>
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
<h2 id="folders">Folders</h2>
|
|
200
|
-
|
|
201
|
-
<p>Folders can be closed by default by setting the <i>closed</i> option to <span class="code-inline">true</span>.</p>
|
|
202
|
-
<p>Each folder can have a different color with the <span class="code-inline">color</span> option.</p>
|
|
203
|
-
|
|
204
|
-
<div id="container-3" class="container">
|
|
205
|
-
<div class="element"></div>
|
|
206
|
-
</div>
|
|
207
|
-
|
|
208
|
-
<div class="code-button" onclick="document.getElementById('code-block-folders').classList.toggle('code-block--hidden')">See code</div>
|
|
209
|
-
<div id="code-block-folders" class="code-block code-block--hidden">
|
|
210
|
-
<pre><code class="language-js">const gui = new perfectGUI({
|
|
211
|
-
name: 'Folders'
|
|
212
|
-
});
|
|
213
515
|
|
|
214
|
-
let folder_1 = gui.folder({ name: 'Folder 1' });
|
|
215
516
|
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
});
|
|
219
|
-
|
|
220
|
-
folder_1.slider({ name: 'Size', value: 1 }, value => {
|
|
221
|
-
element.style.transform = `scale(${value})`;
|
|
222
|
-
});
|
|
517
|
+
|
|
518
|
+
<h2 id="other-options">Options</h2>
|
|
223
519
|
|
|
224
|
-
|
|
520
|
+
<p>GUI panels can be dragged around with the <span class="code-inline">draggable</span> option.</p>
|
|
521
|
+
<p>They can also have a custom width, by using the <span class="code-inline">width</span> option.</p>
|
|
522
|
+
<p>The <span class="code-inline">toggleClose()</span> method can be used to open / close a GUI panel.</p>
|
|
523
|
+
<p>Just like folders, GUI panels can be closed by default by setting the <span class="code-inline">close</span> option to <span class="code-inline">true</span>.</p>
|
|
524
|
+
<p>The <span class="code-inline">maxHeight</span> option can be used to define the maximum height of a panel beyond which scrolling is necessary. Default is the smallest value between the height of the window and the height of the container.</p>
|
|
525
|
+
<p>The <span class="code-inline">color</span> option can be used for both GUI panels and folders to customize their background color.</p>
|
|
225
526
|
|
|
226
|
-
|
|
227
|
-
element.style.backgroundColor = getRandomColor();
|
|
228
|
-
});</code></pre>
|
|
229
|
-
|
|
230
|
-
</div>
|
|
231
|
-
|
|
232
|
-
<h2 id="other-options">Other options</h2>
|
|
233
|
-
|
|
234
|
-
<p>GUI panels can be dragged around with the <span class="code-inline">draggable</span> option.</p>
|
|
235
|
-
<p>They can also have a custom width, by using the <span class="code-inline">width</span> option.</p>
|
|
236
|
-
<p>The <span class="code-inline">toggleClose()</span> method can be used to open / close a GUI panel.</p>
|
|
237
|
-
<p>Just like folders, GUI panels can be closed by default by setting the <span class="code-inline">close</span> option to <span class="code-inline">true</span>.</p>
|
|
238
|
-
<p>The <span class="code-inline">maxHeight</span> option can be used to define the maximum height of a panel beyond which scrolling is necessary. Default is the smallest value between the height of the window and the height of the container.</p>
|
|
239
|
-
<p>The <span class="code-inline">color</span> option can be used for both GUI panels and folders to customize their background color.</p>
|
|
240
|
-
|
|
241
|
-
<div id="container-4" class="container"></div>
|
|
527
|
+
<div id="container-4" class="container"></div>
|
|
242
528
|
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
529
|
+
<div class="code-button" onclick="document.getElementById('code-block-containers').classList.toggle('code-block--hidden')">See code</div>
|
|
530
|
+
<div id="code-block-containers" class="code-block code-block--hidden">
|
|
531
|
+
<pre><code class="language-js">const gui_1 = new GUI({
|
|
246
532
|
name: 'GUI 1 (drag me!)',
|
|
247
533
|
width: 500,
|
|
248
534
|
draggable: true
|
|
@@ -284,18 +570,20 @@ const gui_4 = new GUI({
|
|
|
284
570
|
});
|
|
285
571
|
|
|
286
572
|
gui_4.button('lorem', () => {});</code></pre>
|
|
573
|
+
</div>
|
|
287
574
|
|
|
288
|
-
</div>
|
|
289
575
|
|
|
290
|
-
<h2 id="killing-creating">Killing and creating dynamically</h2>
|
|
291
576
|
|
|
292
|
-
<p>There is no .kill() method at the moment, so instances have to be killed "manually".</p>
|
|
293
577
|
|
|
294
|
-
|
|
578
|
+
<h2 id="killing-creating">Killing and creating dynamically</h2>
|
|
295
579
|
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
580
|
+
<p>There is no .kill() method at the moment, so instances have to be killed "manually".</p>
|
|
581
|
+
|
|
582
|
+
<div id="container-5" class="container"></div>
|
|
583
|
+
|
|
584
|
+
<div class="code-button" onclick="document.getElementById('code-block-killing').classList.toggle('code-block--hidden')">See code</div>
|
|
585
|
+
<div id="code-block-killing" class="code-block code-block--hidden">
|
|
586
|
+
<pre><code class="language-js">const guis = [];
|
|
299
587
|
|
|
300
588
|
let gui_1 = new GUI({
|
|
301
589
|
name: 'GUI 1',
|
|
@@ -323,8 +611,8 @@ gui_1.button('Kill GUI panel', () => {
|
|
|
323
611
|
guis.splice(index, 1);
|
|
324
612
|
}
|
|
325
613
|
});</code></pre>
|
|
326
|
-
|
|
327
|
-
|
|
614
|
+
</div>
|
|
615
|
+
</div>
|
|
328
616
|
</div>
|
|
329
617
|
</body>
|
|
330
618
|
|
package/test/src/index.js
CHANGED
|
@@ -1,27 +1,41 @@
|
|
|
1
1
|
import './styles/prism.css';
|
|
2
2
|
import './styles/styles.css';
|
|
3
|
+
import './styles/_sidebar.css';
|
|
4
|
+
import './styles/_table.css';
|
|
3
5
|
//import demo from './js/demo';
|
|
4
6
|
import './js/prism';
|
|
5
|
-
import basics from './js/basics';
|
|
6
|
-
import
|
|
7
|
+
import basics from './js/methods/basics';
|
|
8
|
+
import button from './js/methods/button';
|
|
9
|
+
import slider from './js/methods/slider';
|
|
10
|
+
import toggle from './js/methods/toggle';
|
|
11
|
+
import list from './js/methods/list';
|
|
12
|
+
import image from './js/methods/image';
|
|
13
|
+
import color from './js/methods/color';
|
|
14
|
+
import vector2 from './js/methods/vector2';
|
|
15
|
+
import folder from './js/methods/folder';
|
|
16
|
+
|
|
7
17
|
import multiple from './js/multiple';
|
|
8
|
-
import folders from './js/folders';
|
|
9
18
|
import other from './js/other';
|
|
10
19
|
import kill_create from './js/kill_create';
|
|
11
20
|
|
|
12
|
-
let subtitle = ['probably not', 'maybe not', 'almost', 'nearly'];
|
|
21
|
+
let subtitle = ['probably not', 'maybe not so', 'almost', 'nearly'];
|
|
13
22
|
subtitle = subtitle[Math.floor(Math.random() * subtitle.length)];
|
|
14
23
|
document.getElementById('subtitle-random').textContent = subtitle;
|
|
15
24
|
|
|
16
25
|
//demo();
|
|
17
|
-
|
|
18
26
|
basics();
|
|
27
|
+
button();
|
|
28
|
+
slider();
|
|
29
|
+
toggle();
|
|
30
|
+
list();
|
|
31
|
+
image();
|
|
32
|
+
color();
|
|
33
|
+
vector2();
|
|
34
|
+
folder();
|
|
19
35
|
|
|
20
|
-
vectors();
|
|
21
36
|
|
|
22
37
|
multiple();
|
|
23
38
|
|
|
24
|
-
folders();
|
|
25
39
|
|
|
26
40
|
other();
|
|
27
41
|
|