perfect-gui 3.5.1 → 3.5.3

package/package.json

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

package/src/index.js

@@ -2,6 +2,7 @@ import styles from './styles';
 
 export default class GUI {
     constructor(options = {}) {
+        // Process options
         if ( options.container ) {
             this.container = typeof options.container == "string" ? document.querySelector(options.container) : options.container;
             this.position_type = 'absolute';
@@ -18,8 +19,17 @@ export default class GUI {
         }
 
         this.name = (options != undefined && typeof options.name == "string") ? options.name : ''; 
+        
         this.backgroundColor = options.color || null; 
 
+        this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight)
+        if ( options.maxHeight ) {
+            this.initMaxHeight = options.maxHeight;
+            this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight);
+        }
+
+        this.screenCorner = this._parseScreenCorner(options.position);
+
         if ( this instanceof GUI ) {
             if ( typeof GUI[GUI.instanceCounter] != 'number' ) {
                 GUI[GUI.instanceCounter] = 0;
@@ -39,11 +49,35 @@ export default class GUI {
         // Common styles
         if (this.instanceId == 0) {
             this._addStyles(`${styles(this.position_type)}`);
+        }        
+
+        // Instance specific styles
+        this._styleInstance();        
+
+        if (options.autoRepositioning != false) {
+            window.addEventListener('resize', this._handleResize.bind(this));
         }
-       
-        // Instance styles
-        this.screenCorner = this._parseScreenCorner(options.position);
-        this.xOffset = this.screenCorner.x == 'left' ? 0 : this.container.clientWidth - this.wrapperWidth;
+                
+        this._addWrapper();
+        this.wrapper.setAttribute('data-corner-x', this.screenCorner.x);
+        this.wrapper.setAttribute('data-corner-y', this.screenCorner.y);
+    
+        this.hasBeenDragged = false;
+        if (options.draggable == true) this._makeDraggable();
+
+        this.closed = false;
+        if (options.closed) this.toggleClose();
+
+        this.folders = [];
+    }
+
+    _styleInstance() {
+        if (this.screenCorner.x == 'left') {
+            this.xOffset = 0;
+        } else {
+            this.xOffset = this.container.clientWidth - this.wrapperWidth - this._getScrollbarWidth(this.container);
+        }
+
         if (this.instanceId > 0) {
             let existingDomInstances = this.container.querySelectorAll('.p-gui');
             for (let i = 0; i < existingDomInstances.length; i++) {
@@ -58,16 +92,13 @@ export default class GUI {
             }
         }
         this.yOffset = 0;
-        this.position = {prevX:this.xOffset, prevY:this.yOffset, x:this.xOffset, y:this.yOffset};
+        this.position = {
+            prevX: this.xOffset, 
+            prevY: this.yOffset, 
+            x: this.xOffset, 
+            y: this.yOffset
+        };
 
-        if ( options.maxHeight ) {
-            this.maxHeight = options.maxHeight;
-        } else {
-            this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight)
-        }
-        window.addEventListener('resize', () => {
-            this.maxHeight = Math.min(options.maxHeight || '', Math.min(this.container.clientHeight, window.innerHeight));
-        });
         this._addStyles(`#p-gui-${this.instanceId} {
             width: ${this.wrapperWidth}px;
             max-height: ${this.maxHeight}px;
@@ -75,20 +106,6 @@ export default class GUI {
             ${ this.screenCorner.y == 'top' ? '' : 'top: auto; bottom: 0;' }
             ${ this.backgroundColor ? 'background: ' + this.backgroundColor + ';' : '' }
         }`);
-
-        if (options.autoRepositioning != false) window.addEventListener('resize', this._handleResize.bind(this));
-                
-        this._addWrapper();
-        this.wrapper.setAttribute('data-corner-x', this.screenCorner.x);
-        this.wrapper.setAttribute('data-corner-y', this.screenCorner.y);
-    
-        this.hasBeenDragged = false;
-        if (options.draggable == true) this._makeDraggable();
-
-        this.closed = false;
-        if (options.closed) this.toggleClose();
-
-        this.folders = [];
     }
 
     _folderConstructor(folderOptions) {
@@ -107,8 +124,20 @@ export default class GUI {
         return parsedPosition;
     }
 
+    _getScrollbarWidth(element) {
+        if (element === document.body) {
+            return window.innerWidth - document.documentElement.clientWidth;
+        } else {
+            return element.offsetWidth - element.clientWidth;
+        }
+    }
+
     _handleResize() {
-        if (this.hasBeenDragged) return;
+        this.maxHeight = Math.min(this.initMaxHeight, Math.min(this.container.clientHeight, window.innerHeight));
+
+        if (this.hasBeenDragged) {
+            return;
+        }
 
         this.xOffset = this.screenCorner.x == 'left' ? 0 : this.container.clientWidth - this.wrapperWidth;
         if (this.instanceId > 0) {
@@ -131,8 +160,7 @@ export default class GUI {
     }
 
     _createElement(element) {
-        // DOM
-        element.el = element.el ? element.el : 'div';
+        element.el = element.el || 'div';
         var domElement = document.createElement(element.el);
         if (element.id) domElement.id = element.id;
         if (element.class) domElement.className = element.class;

package/test/src/js/other.js

@@ -7,7 +7,7 @@ export default function other() {
     const gui_1 = new GUI({
         container,
         name: 'GUI 1 (drag me!)',
-        width: 500,
+        width: 450,
         draggable: true,
     });
     gui_1.button('Custom width using the `width` option', () => {});