perfect-gui 3.0.3 → 3.0.5

package/README.md

@@ -91,14 +91,16 @@ gui.image('Click this', 'path/to/image', () => {
 
 ```javascript
 // Simple slider, only returns a value to the callback
-// step parameter is optional
+// min parameter is optional, default is 0
+// max parameter is optional, default is 1
+// step parameter is optional, default is (max - min) * 0.01
 gui.slider('Slide this', { value: 5, min: 0, max: 10, step: .1 }, value => {
     console.log('Slider value : ' + value);
 });
 
 // Object-based slider, automatically updates the value of the object property.
 // Directly updating the property will also update the slider.
-// step parameter is optional
+// callback is optional
 gui.slider('Slide this', { object: foo, prop: 'bar', min: 0, max: 10, step: .1 });
 ```
 </td></tr>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perfect-gui",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "description": "Nice and simple GUI for JavaScript.",
   "main": "src/index.js",
   "directories": {

package/src/index.js

@@ -10,6 +10,8 @@ export default class GUI {
             this.position_type = 'fixed';
         }
 
+        this.propReferences = [];
+
         if ( options.isFolder ) {
             this._folderConstructor(options.folderOptions);
             return;
@@ -77,8 +79,6 @@ export default class GUI {
         if (options.closed) this.toggleClose();
 
         this.folders = [];
-
-        this.propReferences = [];
     }
 
     _folderConstructor(folderOptions) {
@@ -221,16 +221,14 @@ export default class GUI {
     }
     
     slider (text, sliderParams, callback) {
-        this._checkMandatoryParams({
-            min: 'number',
-            max: 'number',
-        }, sliderParams);
-
         let isObject = false;
         let propReferenceIndex = null;
         let object; 
         let prop;
-        let step = sliderParams.step || (sliderParams.max - sliderParams.min) / 100;
+        
+        const min = sliderParams.min ?? 0;
+        const max = sliderParams.max ?? 1;
+        const step = sliderParams.step || (max - min) / 100;
 
         if ( typeof sliderParams.value == 'number' ) {
             this._checkMandatoryParams({
@@ -261,8 +259,8 @@ export default class GUI {
             class: 'p-gui__slider-ctrl',
             customAttributes: {
                 type: 'range',
-                min: sliderParams.min,
-                max: sliderParams.max,
+                min,
+                max,
                 step,
                 value: isObject ? object[prop] : sliderParams.value
             }
@@ -480,8 +478,15 @@ export default class GUI {
         this.imageContainer = null;
 
         let className = 'p-gui__folder';
-        if (this.folders.length == 0) className += ' p-gui__folder--first';
-        if (closed) className += ' p-gui__folder--closed';
+        
+        if (this.folders.length == 0) {
+            className += ' p-gui__folder--first';
+        }
+        
+        if (closed) {
+            className += ' p-gui__folder--closed';
+        }
+        
         let container = this._createElement({
             class: className
         });

package/test/src/js/basics.js

@@ -19,7 +19,7 @@ export default function basics() {
     });
 
     gui.slider('Slider (simple callback)', 
-        { value: 1, min: 0, max: 1 }, 
+        { value: 1 }, 
         value => {
             element.style.opacity = value;
         }

package/test/src/js/folders.js

@@ -15,6 +15,10 @@ export default function folders() {
         element.style.backgroundColor = getRandomColor();
     });
 
+    folder_1.slider("Size", { value: 1 }, value => {
+        element.style.transform = `scale(${value})`;
+    });
+
     let folder_2 = gui.folder('Folder 2 (closed)', { closed: true });
 
     folder_2.button("Random color", () => {