neo.mjs 6.5.10 → 6.6.0

package/src/dialog/Base.mjs

@@ -1,5 +1,5 @@
-import Panel    from '../container/Panel.mjs';
 import NeoArray from '../util/Array.mjs';
+import Panel    from '../container/Panel.mjs';
 import Toolbar  from './header/Toolbar.mjs';
 import VDomUtil from '../util/VDom.mjs';
 
@@ -45,6 +45,10 @@ class Base extends Panel {
          * @member {Boolean} autoRender=true
          */
         autoRender: true,
+        /**
+         * @member {Boolean} autoShow=true
+         */
+        autoShow: true,
         /**
          * @member {String[]} baseCls=['neo-dialog','neo-panel','neo-container']
          * @protected
@@ -79,6 +83,10 @@ class Base extends Panel {
          * @member {Object} dragZoneConfig=null
          */
         dragZoneConfig: null,
+        /**
+         * @member {Boolean} floating=true
+         */
+        floating: true,
         /**
          * @member {Object} headerConfig=null
          */
@@ -104,6 +112,10 @@ class Base extends Panel {
          * @member {String} minimizeCls='far fa-window-minimize'
          */
         minimizeCls: 'far fa-window-minimize',
+        /**
+         * @member {Boolean} modal_=false
+         */
+        modal_: false,
         /**
          * @member {Boolean} resizable_=true
          */
@@ -115,14 +127,7 @@ class Base extends Panel {
         /**
          * @member {String|null} title_=null
          */
-        title_: null,
-        /**
-         * @member {Object} _vdom
-         */
-        _vdom:
-        {cls: ['neo-dialog-wrapper'], cn: [
-            {cn: []}
-        ]}
+        title_: null
     }
 
     /**
@@ -133,11 +138,9 @@ class Base extends Panel {
 
         let me = this;
 
-        me.vdom.id = me.getWrapperId();
-
         me.createHeader();
 
-        me.animateTargetId && me.animateShow();
+        me.autoShow && me.show()
     }
 
     /**
@@ -148,7 +151,7 @@ class Base extends Panel {
      */
     afterSetAnimateTargetId(value, oldValue) {
         this.autoMount  = !value;
-        this.autoRender = !value;
+        this.autoRender = !value
     }
 
     /**
@@ -162,14 +165,14 @@ class Base extends Panel {
             resizable = me.getPlugin({flag: 'resizable'});
 
         if (me.dragZone) {
-            me.dragZone.appName = value;
+            me.dragZone.appName = value
         }
 
         if (resizable) {
-            resizable.appName = value;
+            resizable.appName = value
         }
 
-        super.afterSetAppName(value, oldValue);
+        super.afterSetAppName(value, oldValue)
     }
 
     /**
@@ -186,7 +189,7 @@ class Base extends Panel {
         if (oldValue !== undefined && me.headerToolbar) {
             cls = me.headerToolbar.cls;
             NeoArray[value ? 'add' : 'remove'](cls, 'neo-draggable');
-            me.headerToolbar.cls = cls;
+            me.headerToolbar.cls = cls
         }
 
         value && import('../draggable/DragZone.mjs').then(module => {
@@ -201,13 +204,13 @@ class Base extends Panel {
                 if (me.dragZoneConfig?.alwaysFireDragMove) {
                     domListeners.push(
                         {'drag:move': me.onDragMove, scope: me, delegate: '.neo-header-toolbar'}
-                    );
+                    )
                 }
 
                 me.domListeners       = domListeners;
-                me.dragListenersAdded = true;
+                me.dragListenersAdded = true
             }
-        });
+        })
     }
 
     /**
@@ -217,29 +220,29 @@ class Base extends Panel {
      * @protected
      */
     afterSetMaximized(value, oldValue) {
-        let me   = this,
-            cls  = me.vdom.cls; // todo: using wrapperCls
+        let me  = this,
+            cls = me.vdom.cls; // todo: using wrapperCls
 
-        NeoArray[value ? 'add' : 'remove'](cls, 'neo-maximized');
+        NeoArray.toggle(cls, 'neo-maximized', value);
         me.update();
     }
 
     /**
-     * Triggered after the mounted config got changed
+     * Triggered after the modal config got changed
      * @param {Boolean} value
      * @param {Boolean} oldValue
      * @protected
      */
-    afterSetMounted(value, oldValue) {
-        super.afterSetMounted(value, oldValue);
+    afterSetModal(value, oldValue) {
+        const
+            me      = this,
+            { cls } = me.vdom;
 
-        let me = this;
+        NeoArray.toggle(cls, 'neo-modal', value);
+        me.update();
 
-        if (value && me.animateTargetId) {
-            Neo.applyDeltas(me.appName, {
-                action: 'removeNode',
-                id    : me.getAnimateTargetId()
-            })
+        if (me.rendered) {
+            me.syncModalMask()
         }
     }
 
@@ -263,9 +266,9 @@ class Base extends Panel {
                     ...me.resizablePluginConfig
                 });
 
-                me.plugins = plugins;
+                me.plugins = plugins
             }
-        });
+        })
     }
 
     /**
@@ -276,7 +279,7 @@ class Base extends Panel {
      */
     afterSetTitle(value, oldValue) {
         if (this.headerToolbar) {
-            this.headerToolbar.title = value;
+            this.headerToolbar.title = value
         }
     }
 
@@ -286,79 +289,90 @@ class Base extends Panel {
     async animateHide() {
         let me      = this,
             appName = me.appName,
-            id      = me.getAnimateTargetId(),
-            rects   = await me.getDomRect([me.id, me.animateTargetId]);
-
-        await Neo.currentWorker.promiseMessage('main', {
-            action  : 'mountDom',
-            appName,
-            html    : `<div id="${id}" class="neo-animate-dialog neo-hide" style="height:${rects[0].height}px;left:${rects[0].left}px;top:${rects[0].top}px;width:${rects[0].width}px;"></div>`,
-            parentId: 'document.body'
+            { id }  = me,
+            rects   = await me.getDomRect([id, me.animateTargetId]);
+
+        await Neo.applyDeltas(appName, {
+            id,
+            style: {
+                height   : `${rects[0].height}px`,
+                left     : `${rects[0].left  }px`,
+                top      : `${rects[0].top   }px`,
+                transform: 'none',
+                width    : `${rects[0].width }px`
+            }
         });
 
-        me.closeOrHide(false);
-
         await me.timeout(30);
 
-        await Neo.currentWorker.promiseMessage('main', {
-            action: 'updateDom',
-            appName,
-            deltas: [{
-                id,
-                style: {
-                    height: `${rects[1].height}px`,
-                    left  : `${rects[1].left  }px`,
-                    top   : `${rects[1].top   }px`,
-                    width : `${rects[1].width }px`
-                }
-            }]
+        await Neo.applyDeltas(appName, {
+            id,
+            cls: {
+                add: ['animated-hiding-showing']
+            },
+            style: {
+                height: `${rects[1].height}px`,
+                left  : `${rects[1].left  }px`,
+                top   : `${rects[1].top   }px`,
+                width : `${rects[1].width }px`
+            }
         });
 
         await me.timeout(250);
 
-        await Neo.currentWorker.promiseMessage('main', {
-            action: 'updateDom',
-            appName,
-            deltas: [{action: 'removeNode', id}]
-        });
+        me.closeOrHide(false);
+
+        await Neo.applyDeltas(appName, [
+            {id, cls: {remove: ['animated-hiding-showing']}},
+            {id, action: 'removeNode'}
+        ])
     }
 
     /**
      *
      */
     async animateShow() {
-        let me           = this,
-            appName      = me.appName,
-            id           = me.getAnimateTargetId(),
-            wrapperStyle = me.wrapperStyle,
-            rect         = await me.getDomRect(me.animateTargetId);
-
-        await Neo.currentWorker.promiseMessage('main', {
-            action  : 'mountDom',
-            appName,
-            html    : `<div id="${id}" class="neo-animate-dialog" style="height:${rect.height}px;left:${rect.left}px;top:${rect.top}px;width:${rect.width}px;"></div>`,
-            parentId: 'document.body'
+        let me            = this,
+            appName       = me.appName,
+            { id, style } = me,
+            rect          = await me.getDomRect(me.animateTargetId);
+
+        await me.render(true);
+
+        // Move to cover the animation target
+        await Neo.applyDeltas(appName, {
+            id,
+            style : {
+                height: `${rect.height}px`,
+                left  : `${rect.left  }px`,
+                top   : `${rect.top   }px`,
+                width : `${rect.width }px`
+            }
         });
 
-        await me.timeout(30);
-
-        await Neo.currentWorker.promiseMessage('main', {
-            action: 'updateDom',
-            appName,
-            deltas: [{
-                id,
-                style: {
-                    height   : wrapperStyle?.height    || '50%',
-                    left     : wrapperStyle?.left      || '50%',
-                    top      : wrapperStyle?.top       || '50%',
-                    transform: wrapperStyle?.transform || 'translate(-50%, -50%)',
-                    width    : wrapperStyle?.width     || '50%'
-                }
-            }]
+        // Wait for the element to achieve its initial rectangle
+        await me.timeout(50);
+
+        // Expand to final state
+        await Neo.applyDeltas(appName, {
+            id,
+            cls: {
+                add: ['animated-hiding-showing']
+            },
+            style: {
+                height   : style?.height    || '',
+                left     : style?.left      || '50%',
+                top      : style?.top       || '50%',
+                transform: style?.transform || 'translate(-50%, -50%)',
+                width    : style?.width     || '50%'
+            }
         });
 
         await me.timeout(200);
 
+        // Remove the animation class
+        await Neo.applyDeltas(appName, {id, cls: {remove: ['animated-hiding-showing']}});
+
         me.show(false)
     }
 
@@ -369,28 +383,34 @@ class Base extends Panel {
      * @protected
      */
     beforeSetCloseAction(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'closeAction');
+        return this.beforeSetEnumValue(value, oldValue, 'closeAction')
     }
 
     /**
-     * @param {Boolean} [animate=!!this.animateTargetId]
+     * @param {Boolean} animate=!!this.animateTargetId
      */
     close(animate=!!this.animateTargetId) {
         let me = this;
 
         if (animate) {
-            me.animateHide();
+            me.animateHide()
         } else {
             me.fire('close');
-            me.destroy(true);
+            me.destroy(true)
         }
     }
 
     /**
-     * @param {Boolean} [animate=!!this.animateTargetId]
+     * @param {Boolean} animate=!!this.animateTargetId
      */
-    closeOrHide(animate=!!this.animateTargetId) {
-        this[this.closeAction](animate);
+    async closeOrHide(animate=!!this.animateTargetId) {
+        const
+            me     = this,
+            { id } = me;
+
+        me[me.closeAction](animate);
+        await me.timeout(30);
+        me.syncModalMask(id)
     }
 
     /**
@@ -417,7 +437,7 @@ class Base extends Panel {
 
         headers.unshift(me.headerToolbar);
 
-        me.headers = headers;
+        me.headers = headers
     }
 
     /**
@@ -444,7 +464,7 @@ class Base extends Panel {
      * @returns {String}
      */
     getAnimateTargetId() {
-        return this.id + '-animate';
+        return this.id + '-animate'
     }
 
     /**
@@ -452,56 +472,32 @@ class Base extends Panel {
      * @returns {String}
      */
     getHeaderToolbarId() {
-        return this.id + '-header-toolbar';
+        return this.id + '-header-toolbar'
     }
 
     /**
      * @returns {Object} vdom
      */
     getProxyVdom() {
-        let vdom = VDomUtil.clone(this.vdom);
-
-        // this call expects a fixed dialog structure
-        // todo: a panel content container could get a flag which we can query for instead
-        vdom.cn[0].cn[1].cn = [];
-
-        return vdom;
-    }
-
-    /**
-     * @returns {Object} The new vdom root
-     */
-    getVdomRoot() {
-        return this.vdom.cn[0];
-    }
-
-    /**
-     * @returns {Object} The new vnode root
-     */
-    getVnodeRoot() {
-        return this.vnode.childNodes[0];
-    }
-
-    /**
-     * Returns the id of the header toolbar
-     * @returns {String}
-     */
-    getWrapperId() {
-        return this.id + '-wrapper';
+        return VDomUtil.clone(this.vdom)
     }
 
     /**
-     * @param {Boolean} [animate=!!this.animateTargetId]
+     * @param {Boolean} animate=!!this.animateTargetId
      */
-    hide(animate=!!this.animateTargetId) {
+    async hide(animate=!!this.animateTargetId) {
         let me = this;
 
         if (animate) {
-            me.animateHide();
+            me.animateHide()
         } else {
             me.unmount();
-            me.fire('hide');
+            me.fire('hide')
         }
+
+        await me.timeout(30);
+
+        me.syncModalMask()
     }
 
     /**
@@ -512,7 +508,7 @@ class Base extends Panel {
 
         data.component.iconCls = me.maximized ? me.maximizeCls : me.minimizeCls;
 
-        me.maximized = !me.maximized;
+        me.maximized = !me.maximized
     }
 
     /**
@@ -525,7 +521,7 @@ class Base extends Panel {
 
         me.headerToolbar = me.down({
             id: me.getHeaderToolbarId()
-        });
+        })
     }
 
     /**
@@ -533,13 +529,13 @@ class Base extends Panel {
      */
     onDragEnd(data) {
         let me = this,
-            initialTransitionProperty, wrapperStyle;
+            initialTransitionProperty, style;
 
         if (!me.maximized) {
             me.getDomRect(me.dragZone.dragProxy.id).then(rect => {
-                wrapperStyle = me.wrapperStyle;
+                style = me.style;
 
-                Object.assign(wrapperStyle, {
+                Object.assign(style, {
                     height   : `${rect.height}px`,
                     left     : `${rect.left}px`,
                     opacity  : 1,
@@ -549,27 +545,27 @@ class Base extends Panel {
                 });
 
                 if (!me.animateOnDragEnd) {
-                    initialTransitionProperty = wrapperStyle.transitionProperty || null;
+                    initialTransitionProperty = style.transitionProperty || null;
 
-                    wrapperStyle.transitionProperty = 'none';
+                    style.transitionProperty = 'none';
 
                     setTimeout(() => {
-                        wrapperStyle = me.wrapperStyle;
+                        style = me.style;
 
-                        wrapperStyle.transitionProperty = initialTransitionProperty;
+                        style.transitionProperty = initialTransitionProperty;
 
-                        me.wrapperStyle = wrapperStyle;
-                    }, 50);
+                        me.style = style
+                    }, 50)
                 }
 
-                me.wrapperStyle = wrapperStyle;
+                me.style = style;
 
                 me.dragZone.dragEnd(data);
 
                 // we need a reset, otherwise we do not get a change event for the next onDragStart() call
                 me.dragZone.boundaryContainerId = null;
-                me.isDragging                   = false;
-            });
+                me.isDragging                   = false
+            })
         }
     }
 
@@ -578,25 +574,20 @@ class Base extends Panel {
      * @param data
      */
     onDragMove(data) {
-        this.dragZone.dragMove(data);
+        this.dragZone.dragMove(data)
     }
 
     /**
      * @param data
      */
     onDragStart(data) {
-        let me           = this,
-            wrapperStyle = me.wrapperStyle || {},
-            resizablePlugin;
+        let me    = this,
+            style = me.style || {};
 
         if (!me.maximized) {
             me.isDragging = true;
 
-            resizablePlugin = me.getPlugin({flag: 'resizable'});
-
-            if (resizablePlugin) {
-                resizablePlugin.removeAllNodes();
-            }
+            me.getPlugin({flag: 'resizable'})?.removeAllNodes();
 
             if (!me.dragZone) {
                 me.dragZone = Neo.create({
@@ -614,21 +605,21 @@ class Base extends Panel {
                 me.fire('dragZoneCreated', {
                     dragZone: me.dragZone,
                     id      : me.id
-                });
+                })
             } else {
-                me.dragZone.boundaryContainerId = me.boundaryContainerId;
+                me.dragZone.boundaryContainerId = me.boundaryContainerId
             }
 
             me.dragZone.dragStart(data);
 
-            wrapperStyle.opacity = 0.7;
+            style.opacity = 0.7;
 
-            me.wrapperStyle = wrapperStyle;
+            me.style = style
         }
     }
 
     /**
-     * @param {Boolean} [animate=!!this.animateTargetId]
+     * @param {Boolean} animate=!!this.animateTargetId
      */
     show(animate=!!this.animateTargetId) {
         let me = this;
@@ -636,9 +627,22 @@ class Base extends Panel {
         if (animate) {
             me.animateShow();
         } else {
-            me.render(true);
-            me.fire('show');
+            if (!me.rendered) {
+                me.render(true)
+            }
+
+            me.fire('show')
         }
+
+        me.syncModalMask()
+    }
+
+    /**
+     * @param {String} id=this.id
+     */
+    syncModalMask(id=this.id) {
+        // This should sync the visibility and position of the modal mask element.
+        Neo.main.DomAccess.syncModalMask({ id, modal: this.modal });
     }
 }
 

package/src/form/field/FileUpload.mjs

@@ -459,6 +459,10 @@ class FileUpload extends Base {
         me.update();
         me.state = 'uploading';
 
+        // This means no progress as opposed to zero, but still during a currently successful ongoing upload.
+        // When it is NaN, the error display does not attempt to show progress.
+        me.progress = NaN;
+
         fileData.append("file", file);
 
         // React to upload state changes
@@ -517,28 +521,38 @@ class FileUpload extends Base {
 
         me.xhr = null;
 
-        if (loaded !== 0) {
-            const response = JSON.parse(xhr.response);
-
-            if (response.success) {
-                me.documentId = response[me.documentIdParameter];
-
-                // The status check phase is optional.
-                // If no URL specified, the file is taken to be downloadable.
-                if (me.documentStatusUrl) {
-                    me.state = 'processing';
-
-                    // Start polling the server to see when the scan has a result;
-                    me.checkDocumentStatus();
+        // Successful network request.
+        // Check the resulting JSON packet for details and any error.
+        if (String(xhr.status).startsWith('2')) {
+            if (loaded !== 0) {
+                const response = JSON.parse(xhr.response);
+
+                if (response.success) {
+                    me.documentId = response[me.documentIdParameter];
+
+                    // The status check phase is optional.
+                    // If no URL specified, the file is taken to be downloadable.
+                    if (me.documentStatusUrl) {
+                        me.state = 'processing';
+
+                        // Start polling the server to see when the scan has a result;
+                        me.checkDocumentStatus();
+                    }
+                    else {
+                        me.state = 'downloadable';
+                    }
                 }
                 else {
-                    me.state = 'downloadable';
+                    me.error = response.message;
+                    me.state = 'upload-failed';
                 }
             }
-            else {
-                me.error = response.message;
-                me.state = 'upload-failed';
-            }
+        }
+        // Failed network request
+        else {
+            me.progress = NaN;
+            me.error = `HTTP status : ${xhr.statusText}`;
+            me.state = 'upload-failed';
         }
     }
 
@@ -693,7 +707,7 @@ class FileUpload extends Base {
                 anchor.href = '';
                 break;
             case 'upload-failed':
-                status.innerHTML = `${me.uploadFailed}... (${Math.round(me.progress * 100)}%)`;
+                status.innerHTML = `${me.uploadFailed}${isNaN(me.progress) ? '' : `... (${Math.round(me.progress * 100)}%)`}`;
                 break;
             case 'processing':
                 status.innerHTML = `${me.scanning}... (${me.formatSize(me.uploadSize)})`;
@@ -806,9 +820,9 @@ class FileUpload extends Base {
         if (bytes) {
             const
                 sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'],
-                i     = Math.min(parseInt(Math.floor(Math.log(bytes) / Math.log(1024)).toString(), 10), sizes.length - 1);
+                i     = Math.min(parseInt(Math.floor(Math.log(bytes) / Math.log(1000)).toString(), 10), sizes.length - 1);
 
-            return `${(bytes / (1024 ** i)).toFixed(i ? 1 : 0)}${separator}${sizes[i]}${postFix}`;
+            return `${(bytes / (1000 ** i)).toFixed(i ? 1 : 0)}${separator}${sizes[i]}${postFix}`;
         }
         return 'n/a';
     }