perfect-gui 3.1.0 → 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 +15 -2
- package/package.json +1 -1
- package/src/index.js +12 -12
- package/src/styles.js +1 -0
- package/test/src/index.html +15 -8
- package/test/src/js/basics.js +2 -4
- package/test/src/js/folders.js +1 -1
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>
|
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', () => {
|
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>
|
|
@@ -169,7 +176,7 @@
|
|
|
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: #a6e22e">folder_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">slider</span><span style="color: #f8f8f2">(</span
|
|
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>
|
|
173
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>
|
|
174
181
|
<span style="color: #f8f8f2">});</span>
|
|
175
182
|
|
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
|
@@ -15,7 +15,7 @@ export default function folders() {
|
|
|
15
15
|
element.style.backgroundColor = getRandomColor();
|
|
16
16
|
});
|
|
17
17
|
|
|
18
|
-
folder_1.slider('Size',
|
|
18
|
+
folder_1.slider({ name: 'Size', value: 1 }, value => {
|
|
19
19
|
element.style.transform = `scale(${value})`;
|
|
20
20
|
});
|
|
21
21
|
|