perfect-gui 3.0.6 → 3.2.0
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 +18 -4
- package/package.json +1 -1
- package/src/index.js +15 -23
- package/src/styles.js +1 -0
- package/test/src/index.html +25 -13
- package/test/src/js/basics.js +2 -4
- package/test/src/js/folders.js +5 -5
package/README.md
CHANGED
|
@@ -93,14 +93,27 @@ gui.image('Click this', 'path/to/image', () => {
|
|
|
93
93
|
// Simple slider, only returns a value to the callback
|
|
94
94
|
// min and max parameters are optional, default is 0 (min) and 1 (max)
|
|
95
95
|
// step parameter is optional, default is (max - min) * 0.01
|
|
96
|
-
gui.slider(
|
|
96
|
+
gui.slider({
|
|
97
|
+
name: 'Slide this',
|
|
98
|
+
value: 5,
|
|
99
|
+
min: 0, // default is 0
|
|
100
|
+
max: 10, // default is 1
|
|
101
|
+
step: .1 // default is (max - min) * 0.01
|
|
102
|
+
}, value => { // optional callback
|
|
97
103
|
console.log('Slider value : ' + value);
|
|
98
104
|
});
|
|
99
105
|
|
|
100
106
|
// Object-based slider, automatically updates the value of the object property.
|
|
101
107
|
// Directly updating the property will also update the slider.
|
|
102
108
|
// callback is optional
|
|
103
|
-
gui.slider(
|
|
109
|
+
gui.slider({
|
|
110
|
+
name 'Slide this',
|
|
111
|
+
object: foo,
|
|
112
|
+
prop: 'bar',
|
|
113
|
+
min: 0,
|
|
114
|
+
max: 10,
|
|
115
|
+
step: .1
|
|
116
|
+
});
|
|
104
117
|
```
|
|
105
118
|
</td></tr>
|
|
106
119
|
<tr><td>toggle</td><td>
|
|
@@ -123,7 +136,7 @@ gui.list('Select one', ['apple', 'lime', 'peach'], function(item) {
|
|
|
123
136
|
|
|
124
137
|
```javascript
|
|
125
138
|
// min and max parameters are optional, default is 0 (min) and 1 (max)
|
|
126
|
-
|
|
139
|
+
gui.vector2('Position', {
|
|
127
140
|
x: { object: myObject.position, prop: 'x', min: -10, max: 10 },
|
|
128
141
|
y: { object: myObject.position, prop: 'y', min: -10, max: 10 },
|
|
129
142
|
});
|
|
@@ -132,7 +145,8 @@ let folder = gui.vector2('Position', {
|
|
|
132
145
|
<tr><td>folder</td><td>
|
|
133
146
|
|
|
134
147
|
```javascript
|
|
135
|
-
let folder = gui.folder(
|
|
148
|
+
let folder = gui.folder({
|
|
149
|
+
name: 'folder name',
|
|
136
150
|
closed: false // default is false
|
|
137
151
|
});
|
|
138
152
|
folder.button('click me!', callback);
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -220,28 +220,28 @@ export default class GUI {
|
|
|
220
220
|
image.onclick = () => params.callback({ path: params.path, text: params.text });
|
|
221
221
|
}
|
|
222
222
|
|
|
223
|
-
slider (
|
|
223
|
+
slider (params, callback) {
|
|
224
224
|
let isObject = false;
|
|
225
225
|
let propReferenceIndex = null;
|
|
226
226
|
let object;
|
|
227
227
|
let prop;
|
|
228
228
|
|
|
229
|
-
const min =
|
|
230
|
-
const max =
|
|
231
|
-
const step =
|
|
229
|
+
const min = params.min ?? 0;
|
|
230
|
+
const max = params.max ?? 1;
|
|
231
|
+
const step = params.step || (max - min) / 100;
|
|
232
232
|
|
|
233
|
-
if ( typeof
|
|
233
|
+
if ( typeof params.value == 'number' ) {
|
|
234
234
|
this._checkMandatoryParams({
|
|
235
235
|
value: 'number'
|
|
236
|
-
},
|
|
236
|
+
}, params);
|
|
237
237
|
} else {
|
|
238
238
|
this._checkMandatoryParams({
|
|
239
239
|
object: 'object',
|
|
240
240
|
prop: 'string'
|
|
241
|
-
},
|
|
241
|
+
}, params);
|
|
242
242
|
|
|
243
|
-
object =
|
|
244
|
-
prop =
|
|
243
|
+
object = params.object;
|
|
244
|
+
prop = params.prop;
|
|
245
245
|
propReferenceIndex = this.propReferences.push(object[prop]) - 1;
|
|
246
246
|
isObject = true;
|
|
247
247
|
}
|
|
@@ -250,7 +250,7 @@ export default class GUI {
|
|
|
250
250
|
|
|
251
251
|
var container = this._createElement({
|
|
252
252
|
class: 'p-gui__slider',
|
|
253
|
-
textContent:
|
|
253
|
+
textContent: params.name || prop
|
|
254
254
|
});
|
|
255
255
|
|
|
256
256
|
var slider_ctrl = this._createElement({
|
|
@@ -262,14 +262,14 @@ export default class GUI {
|
|
|
262
262
|
min,
|
|
263
263
|
max,
|
|
264
264
|
step,
|
|
265
|
-
value: isObject ? object[prop] :
|
|
265
|
+
value: isObject ? object[prop] : params.value
|
|
266
266
|
}
|
|
267
267
|
});
|
|
268
268
|
|
|
269
269
|
var slider_value = this._createElement({
|
|
270
270
|
parent: container,
|
|
271
271
|
class: 'p-gui__slider-value',
|
|
272
|
-
textContent: isObject ? String(object[prop]) : String(
|
|
272
|
+
textContent: isObject ? String(object[prop]) : String(params.value)
|
|
273
273
|
});
|
|
274
274
|
|
|
275
275
|
slider_ctrl.addEventListener('input', () => {
|
|
@@ -460,17 +460,9 @@ export default class GUI {
|
|
|
460
460
|
});
|
|
461
461
|
}
|
|
462
462
|
|
|
463
|
-
folder(
|
|
463
|
+
folder(options = {}) {
|
|
464
464
|
let closed = typeof options.closed == 'boolean' ? options.closed : false;
|
|
465
|
-
|
|
466
|
-
let params = {
|
|
467
|
-
name,
|
|
468
|
-
closed
|
|
469
|
-
};
|
|
470
|
-
this._checkMandatoryParams({
|
|
471
|
-
name: 'string',
|
|
472
|
-
closed: 'boolean'
|
|
473
|
-
}, params);
|
|
465
|
+
let name = options.name || '';
|
|
474
466
|
|
|
475
467
|
this.imageContainer = null;
|
|
476
468
|
|
|
@@ -489,7 +481,7 @@ export default class GUI {
|
|
|
489
481
|
});
|
|
490
482
|
|
|
491
483
|
let folderHeader = this._createElement({
|
|
492
|
-
innerHTML: `<span class="p-gui__folder-arrow"></span>${
|
|
484
|
+
innerHTML: `<span class="p-gui__folder-arrow"></span>${name}`,
|
|
493
485
|
class: 'p-gui__folder-header',
|
|
494
486
|
onclick: function() {
|
|
495
487
|
this.parentNode.classList.toggle('p-gui__folder--closed');
|
package/src/styles.js
CHANGED
package/test/src/index.html
CHANGED
|
@@ -31,14 +31,21 @@
|
|
|
31
31
|
|
|
32
32
|
<span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'Button'</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">changeColor</span><span style="color: #f8f8f2">);</span>
|
|
33
33
|
|
|
34
|
-
<span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">slider</span><span style="color: #f8f8f2">(</span
|
|
35
|
-
<span style="color: #
|
|
36
|
-
<span style="color: #a6e22e">value</span
|
|
37
|
-
<span style="color: #f8f8f2">
|
|
34
|
+
<span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">slider</span><span style="color: #f8f8f2">({</span>
|
|
35
|
+
<span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'Slider (simple callback)'</span><span style="color: #f8f8f2">,</span>
|
|
36
|
+
<span style="color: #a6e22e">value</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">1</span><span style="color: #f8f8f2">,</span>
|
|
37
|
+
<span style="color: #f8f8f2">},</span> <span style="color: #a6e22e">value</span> <span style="color: #f92672">=></span> <span style="color: #f8f8f2">{</span>
|
|
38
|
+
<span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">style</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">opacity</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">value</span>
|
|
39
|
+
<span style="color: #f8f8f2">});</span>
|
|
38
40
|
|
|
39
|
-
<span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">slider</span><span style="color: #f8f8f2">(</span
|
|
40
|
-
<span style="color: #
|
|
41
|
-
<span style="color: #
|
|
41
|
+
<span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">slider</span><span style="color: #f8f8f2">({</span>
|
|
42
|
+
<span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'Slider 2 (object binding)'</span><span style="color: #f8f8f2">,</span>
|
|
43
|
+
<span style="color: #a6e22e">object</span><span style="color: #f92672">:</span> <span style="color: #a6e22e">position</span><span style="color: #f8f8f2">,</span>
|
|
44
|
+
<span style="color: #a6e22e">prop</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'x'</span><span style="color: #f8f8f2">,</span>
|
|
45
|
+
<span style="color: #a6e22e">min</span><span style="color: #f92672">:</span> <span style="color: #f92672">-</span><span style="color: #ae81ff">30</span><span style="color: #f8f8f2">,</span>
|
|
46
|
+
<span style="color: #a6e22e">max</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">30</span><span style="color: #f8f8f2">,</span>
|
|
47
|
+
<span style="color: #a6e22e">step</span><span style="color: #f92672">:</span> <span style="color: #f8f8f2">.</span><span style="color: #ae81ff">1</span>
|
|
48
|
+
<span style="color: #f8f8f2">});</span>
|
|
42
49
|
|
|
43
50
|
<span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">toggle</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'Switch'</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">state</span> <span style="color: #f92672">=></span> <span style="color: #f8f8f2">{</span>
|
|
44
51
|
<span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(</span> <span style="color: #a6e22e">state</span> <span style="color: #f8f8f2">)</span> <span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">classList</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">remove</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'round'</span><span style="color: #f8f8f2">);</span>
|
|
@@ -151,7 +158,7 @@
|
|
|
151
158
|
|
|
152
159
|
<h2>Folders</h2>
|
|
153
160
|
|
|
154
|
-
<p>Folders can be closed by default by setting the <i>
|
|
161
|
+
<p>Folders can be closed by default by setting the <i>closed</i> parameter to <span class="code-inline">true</span>.</p>
|
|
155
162
|
|
|
156
163
|
<div id="container-3" class="container">
|
|
157
164
|
<div class="element"></div>
|
|
@@ -159,22 +166,27 @@
|
|
|
159
166
|
|
|
160
167
|
<div class="code-button" onclick="document.getElementById('code-block-folders').classList.toggle('code-block--hidden')">See code</div>
|
|
161
168
|
<div id="code-block-folders" class="code-block code-block--hidden">
|
|
162
|
-
<!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;;"><pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">
|
|
169
|
+
<!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;;"><pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
|
|
163
170
|
<span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'Folders'</span>
|
|
164
171
|
<span style="color: #f8f8f2">});</span>
|
|
165
172
|
|
|
166
|
-
<span style="color: #66d9ef">let</span> <span style="color: #a6e22e">folder_1</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">folder</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'Folder 1'</span
|
|
173
|
+
<span style="color: #66d9ef">let</span> <span style="color: #a6e22e">folder_1</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">folder</span><span style="color: #f8f8f2">({</span> <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'Folder 1 (open)'</span> <span style="color: #f8f8f2">});</span>
|
|
167
174
|
|
|
168
|
-
<span style="color: #a6e22e">folder_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74"
|
|
175
|
+
<span style="color: #a6e22e">folder_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'Random color'</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=></span> <span style="color: #f8f8f2">{</span>
|
|
169
176
|
<span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">style</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">backgroundColor</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">getRandomColor</span><span style="color: #f8f8f2">();</span>
|
|
170
177
|
<span style="color: #f8f8f2">});</span>
|
|
171
178
|
|
|
172
|
-
<span style="color: #
|
|
179
|
+
<span style="color: #a6e22e">folder_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">slider</span><span style="color: #f8f8f2">({</span> <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'Size'</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">value</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">1</span> <span style="color: #f8f8f2">},</span> <span style="color: #a6e22e">value</span> <span style="color: #f92672">=></span> <span style="color: #f8f8f2">{</span>
|
|
180
|
+
<span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">style</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">transform</span> <span style="color: #f92672">=</span> <span style="color: #960050; background-color: #1e0010">`</span><span style="color: #a6e22e">scale</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">$</span><span style="color: #f8f8f2">{</span><span style="color: #a6e22e">value</span><span style="color: #f8f8f2">})</span><span style="color: #960050; background-color: #1e0010">`</span><span style="color: #f8f8f2">;</span>
|
|
181
|
+
<span style="color: #f8f8f2">});</span>
|
|
182
|
+
|
|
183
|
+
<span style="color: #66d9ef">let</span> <span style="color: #a6e22e">folder_2</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">folder</span><span style="color: #f8f8f2">({</span> <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'Folder 2 (closed)'</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">closed</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span> <span style="color: #f8f8f2">});</span>
|
|
173
184
|
|
|
174
|
-
<span style="color: #a6e22e">folder_2</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74"
|
|
185
|
+
<span style="color: #a6e22e">folder_2</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'Random color'</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=></span> <span style="color: #f8f8f2">{</span>
|
|
175
186
|
<span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">style</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">backgroundColor</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">getRandomColor</span><span style="color: #f8f8f2">();</span>
|
|
176
187
|
<span style="color: #f8f8f2">});</span>
|
|
177
188
|
</pre></div>
|
|
189
|
+
|
|
178
190
|
</div>
|
|
179
191
|
|
|
180
192
|
<h2>Other options</h2>
|
package/test/src/js/basics.js
CHANGED
|
@@ -18,15 +18,13 @@ export default function basics() {
|
|
|
18
18
|
element.style.backgroundImage = 'none';
|
|
19
19
|
});
|
|
20
20
|
|
|
21
|
-
gui.slider('Slider (simple callback)',
|
|
22
|
-
{ value: 1 },
|
|
21
|
+
gui.slider({ name: 'Slider (simple callback)', value: 1 },
|
|
23
22
|
value => {
|
|
24
23
|
element.style.opacity = value;
|
|
25
24
|
}
|
|
26
25
|
);
|
|
27
26
|
|
|
28
|
-
gui.slider('Slider 2 (object binding)',
|
|
29
|
-
{ object: position, prop: 'x', min: -30, max: 30, step: .1 }
|
|
27
|
+
gui.slider({ name: 'Slider 2 (object binding)', object: position, prop: 'x', min: -30, max: 30, step: .1 }
|
|
30
28
|
);
|
|
31
29
|
|
|
32
30
|
gui.toggle('Switch', true, state => {
|
package/test/src/js/folders.js
CHANGED
|
@@ -9,19 +9,19 @@ export default function folders() {
|
|
|
9
9
|
container: '#container-3'
|
|
10
10
|
});
|
|
11
11
|
|
|
12
|
-
let folder_1 = gui.folder('Folder 1 (open)');
|
|
12
|
+
let folder_1 = gui.folder({ name: 'Folder 1 (open)' });
|
|
13
13
|
|
|
14
|
-
folder_1.button(
|
|
14
|
+
folder_1.button('Random color', () => {
|
|
15
15
|
element.style.backgroundColor = getRandomColor();
|
|
16
16
|
});
|
|
17
17
|
|
|
18
|
-
folder_1.slider(
|
|
18
|
+
folder_1.slider({ name: 'Size', value: 1 }, value => {
|
|
19
19
|
element.style.transform = `scale(${value})`;
|
|
20
20
|
});
|
|
21
21
|
|
|
22
|
-
let folder_2 = gui.folder('Folder 2 (closed)',
|
|
22
|
+
let folder_2 = gui.folder({ name: 'Folder 2 (closed)', closed: true });
|
|
23
23
|
|
|
24
|
-
folder_2.button(
|
|
24
|
+
folder_2.button('Random color', () => {
|
|
25
25
|
element.style.backgroundColor = getRandomColor();
|
|
26
26
|
});
|
|
27
27
|
}
|