neo.mjs 5.16.2 → 5.16.4

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.16.2'
+         * @member {String} version='5.16.4'
          */
-        version: '5.16.2'
+        version: '5.16.4'
     }
 
     /**

package/docs/app/view/MainContainer.mjs

@@ -58,6 +58,10 @@ class MainContainer extends Viewport {
                 sortable: true,
                 width   : 290,
 
+                domListeners: {
+                    resize: 'onNavTabContainerResize'
+                },
+
                 items: [{
                     module   : ApiTreeList,
                     listeners: {leafItemClick: 'onApiListLeafClick'},

package/docs/app/view/MainContainerController.mjs

@@ -143,6 +143,13 @@ class MainContainerController extends Component {
         me.getReference('tutorials-treelist').filter('name', value, null);
     }
 
+    /**
+     * @param {Object} data
+     */
+    onNavTabContainerResize(data) {
+        console.log('onNavTabContainerResize', data)
+    }
+
     /**
      *
      */

package/docs/neo-config.json

@@ -3,5 +3,5 @@
     "basePath"        : "../",
     "environment"     : "development",
     "mainPath"        : "../src/Main.mjs",
-    "mainThreadAddons": ["DragDrop", "HighlightJS", "Stylesheet"]
+    "mainThreadAddons": ["DragDrop", "HighlightJS", "ResizeObserver", "Stylesheet"]
 }

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.16.2'
+         * @member {String} version='5.16.4'
          */
-        version: '5.16.2'
+        version: '5.16.4'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.16.2",
+    "version": "5.16.4",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/form/field/Switch.scss

@@ -1,14 +1,8 @@
 .neo-switchfield {
-    @keyframes switch-on-position {
-          0% {left:  0;  right: 50%}
-         25% {left:  0;  right: 37.5%}
-        100% {left: 50%; right:  0}
-    }
-
-    @keyframes switch-off-position {
-          0% {left: 50%;   right: 0}
-         25% {left: 37.5%; right: 0}
-        100% {left:  0;    right: 50%}
+    @keyframes switch-off-transform {
+          0% {transform: translate(100%) scaleX(1)}
+         25% {transform: translate(100%) scaleX(1.33)}
+        100% {transform: translate(0)    scaleX(1)}
     }
 
     @keyframes switch-on-transform {
@@ -17,12 +11,6 @@
         100% {transform: translate(100%) scaleX(1)}
     }
 
-    @keyframes switch-off-transform {
-          0% {transform: translate(100%) scaleX(1)}
-         25% {transform: translate(100%) scaleX(1.33)}
-        100% {transform: translate(0)    scaleX(1)}
-    }
-
     .neo-switchfield-input {
         background-clip : padding-box;
         background-color: v(switchfield-background-color);
@@ -40,8 +28,21 @@
         -webkit-appearance         : none;
         -webkit-tap-highlight-color: transparent;
 
+        &::after {
+            content       : "\f00c\f00d";
+            font-family   : "Font Awesome 6 Free";
+            font-size     : 1.25rem;
+            font-weight   : 900;
+            left          : 0.5em;
+            letter-spacing: 1em;
+            line-height   : 1.5;
+            position      : absolute;
+            top           : 0.15em;
+            z-index       : 1;
+        }
 
         &::before {
+            animation       : switch-off-transform 0.25s ease-out forwards;
             background-clip : padding-box;
             background-color: v(switchfield-thumb-color);
             border          : 0.125em solid transparent;
@@ -56,50 +57,19 @@
             z-index         : 2;
         }
 
-        &::after {
-            content       : "\f00c\f00d";
-            font-family   : "Font Awesome 6 Free";
-            font-size     : 1.25rem;
-            font-weight   : 900;
-            left          : 0.5em;
-            letter-spacing: 1em;
-            line-height   : 1.5;
-            position      : absolute;
-            top           : 0.15em;
-            z-index       : 1;
-        }
-
-        &:focus {
-            background-color: v(switchfield-background-color);
-            border-color    : transparent;
-            color           : v(switchfield-active-color);
-            outline         : none;
-        }
-
         &:checked {
             background-color: v(switchfield-checked);
-            border-color    : transparent;
             color           : v(switchfield-inactive-color);
 
             &::before {
+                animation       : switch-on-transform 0.25s ease-out forwards;
                 transform-origin: left center;
             }
         }
 
-        &::before {
-            animation: switch-off-position 0.25s ease-out forwards;
-        }
-
-        &:checked::before {
-            animation: switch-on-position 0.25s ease-out forwards;
-        }
-
-        &::before {
-            animation: switch-off-transform 0.25s ease-out forwards;
-        }
-
-        &:checked::before {
-            animation: switch-on-transform 0.25s ease-out forwards;
+        &:focus {
+            color  : v(switchfield-active-color);
+            outline: none;
         }
     }
 }

package/src/DefaultConfig.mjs

@@ -245,12 +245,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.16.2'
+     * @default '5.16.4'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.16.2'
+    version: '5.16.4'
 };
 
 Object.assign(DefaultConfig, {

package/src/main/DomEvents.mjs

@@ -337,20 +337,7 @@ class DomEvents extends Base {
      */
     getTargetData(node) {
         let r    = node.getBoundingClientRect?.(),
-            rect = {};
-
-        if (r) {
-            Object.assign(rect, {
-                bottom: r.bottom,
-                height: r.height,
-                left  : r.left,
-                right : r.right,
-                top   : r.top,
-                width : r.width,
-                x     : r.x,
-                y     : r.y
-            })
-        }
+            rect = r && this.parseDomRect(r) || {};
 
         return {
             checked          : node.checked,
@@ -633,6 +620,24 @@ class DomEvents extends Base {
         }
     }
 
+    /**
+     * DOMRects are not spreadable => {...DOMRect} => {}
+     * @param {DOMRect} rect
+     * @returns {Object}
+     */
+    parseDomRect(rect) {
+        return {
+            bottom: rect.bottom,
+            height: rect.height,
+            left  : rect.left,
+            right : rect.right,
+            top   : rect.top,
+            width : rect.width,
+            x     : rect.x,
+            y     : rect.y
+        }
+    }
+
     /**
      * Example for Array values: "categories[]=test1&categories[]=test2"
      * @param {String} str

package/src/main/addon/ResizeObserver.mjs

@@ -1,12 +1,13 @@
 import Base      from '../../core/Base.mjs';
-import DomAccess from '../DomAccess.mjs'
+import DomAccess from '../DomAccess.mjs';
+import DomEvents from '../DomEvents.mjs';
 
 /**
  * @class Neo.main.addon.ResizeObserver
  * @extends Neo.core.Base
  * @singleton
  */
-class ResizeObserver extends Base {
+class NeoResizeObserver extends Base {
     static config = {
         /**
          * @member {String} className='Neo.main.addon.ResizeObserver'
@@ -14,7 +15,7 @@ class ResizeObserver extends Base {
          */
         className: 'Neo.main.addon.ResizeObserver',
         /**
-         * @member {#ResizeObserver|null} instance=null
+         * @member {ResizeObserver|null} instance=null
          * @protected
          */
         instance: null,
@@ -40,19 +41,57 @@ class ResizeObserver extends Base {
      * @param {Object} config
      */
     construct(config) {
+        super.construct(config);
+
         let me = this;
 
-        me.resizeObserver = new ResizeObserver(me.onResize.bind(me))
+        me.instance = new ResizeObserver(me.onResize.bind(me))
     }
 
     /**
-     * Internal callback for the ResizeObserver instance
+     * Internal callback for the ResizeObserver instance.
+     * See: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry
      * @param {HTMLElement[]} entries
      * @param {ResizeObserver} observer
      * @protected
      */
     onResize(entries, observer) {
-        console.log('onResize', entries)
+        entries.forEach(entry => {
+            // the content of entry is not spreadable, so we need to manually convert it
+            // structuredClone(entry) throws a JS error => ResizeObserverEntry object could not be cloned.
+
+            let borderBoxSize             = entry.borderBoxSize[0],
+                contentBoxSize            = entry.contentBoxSize[0],
+                devicePixelContentBoxSize = entry.devicePixelContentBoxSize?.[0] || {}, // Not supported in Safari yet
+                path                      = DomEvents.getPathFromElement(entry.target).map(e => DomEvents.getTargetData(e));
+
+            Neo.worker.Manager.sendMessage('app', {
+                action   : 'domEvent',
+                eventName: 'resize',
+
+                data: {
+                    contentRect: DomEvents.parseDomRect(entry.contentRect),
+                    id         : entry.target.id,
+                    path,
+                    rect       : path[0].rect,
+
+                    borderBoxSize: {
+                        blockSize : borderBoxSize.blockSize,
+                        inlineSize: borderBoxSize.inlineSize
+                    },
+
+                    contentBoxSize: {
+                        blockSize : contentBoxSize.blockSize,
+                        inlineSize: contentBoxSize.inlineSize
+                    },
+
+                    devicePixelContentBoxSize: {
+                        blockSize : devicePixelContentBoxSize.blockSize,
+                        inlineSize: devicePixelContentBoxSize.inlineSize
+                    }
+                }
+            })
+        })
     }
 
     /**
@@ -72,8 +111,6 @@ class ResizeObserver extends Base {
     }
 }
 
-Neo.applyClassConfig(ResizeObserver);
-
-let instance = Neo.applyClassConfig(ResizeObserver);
+let instance = Neo.applyClassConfig(NeoResizeObserver);
 
 export default instance;

package/src/manager/DomEvent.mjs

@@ -63,6 +63,22 @@ class DomEvent extends Base {
         singleton: true
     }
 
+    /**
+     *
+     * @param {Neo.component.Base} component
+     * @param {data} event
+     */
+    addResizeObserver(component, event) {
+        if (!Neo.main.addon.ResizeObserver) {
+            console.error('For using resize domListeners, you must include main.addon.ResizeObserver.', event)
+        }
+
+        Neo.main.addon.ResizeObserver.register({
+            appName: component.appName,
+            id     : component.id
+        })
+    }
+
     /**
      * @param {Object} event
      * @protected
@@ -216,16 +232,16 @@ class DomEvent extends Base {
                 value.forEach(event => {
                     eventName = event.eventName;
 
-                    if (eventName && (event.local || !globalDomEvents.includes(eventName))) {
-                        // console.log('localEvents', eventName);
-
+                    if (eventName === 'resize') {
+                        this.addResizeObserver(component, event)
+                    } else if (eventName && (event.local || !globalDomEvents.includes(eventName))) {
                         localEvents.push({
                             name   : eventName,
                             handler: 'domEventListener',
                             vnodeId: event.vnodeId
-                        });
+                        })
                     }
-                });
+                })
             });
 
             if (localEvents.length > 0) {
@@ -236,8 +252,8 @@ class DomEvent extends Base {
                 }).then(data => {
                     // console.log('added domListener', data);
                 }).catch(err => {
-                    console.log('App: Got error attempting to add a domListener', err);
-                });
+                    console.log('App: Got error attempting to add a domListener', err)
+                })
             }
         }
     }
@@ -288,13 +304,13 @@ class DomEvent extends Base {
                 ) {
                     alreadyRegistered = true;
                 }
-            });
+            })
         } else {
             listeners[id][eventName] = [];
         }
 
         if (alreadyRegistered === true) {
-            return false;
+            return false
         }
 
         // console.log('manager.DomEvent register', eventName, config);
@@ -323,9 +339,7 @@ class DomEvent extends Base {
 
         listeners[id][eventName].sort((a, b) => a.priority > b.priority);
 
-        // console.log(this.map);
-
-        return true;
+        return true
     }
 
     /**
@@ -377,7 +391,7 @@ class DomEvent extends Base {
                             }
                         }
                     }
-                });
+                })
             }
 
             // add new listeners
@@ -393,14 +407,14 @@ class DomEvent extends Base {
                             ownerId       : component.id,
                             scope         : domListener.scope || component,
                             vnodeId       : domListener.vnodeId || value.vnodeId || component.id
-                        });
+                        })
                     }
-                });
+                })
             });
 
             if (component.mounted) {
                 setTimeout(() => {
-                    me.mountDomListeners(component);
+                    me.mountDomListeners(component)
                 }, 100)
             }
         } else {
@@ -436,12 +450,12 @@ class DomEvent extends Base {
                 ) {
                     hasMatch = true;
                     targetId = path[j].id;
-                    break;
+                    break
                 }
             }
 
             if (!hasMatch) {
-                return false;
+                return false
             }
         }
 
@@ -452,7 +466,7 @@ class DomEvent extends Base {
             }
         }
 
-        return false;
+        return false
     }
 
     /**
@@ -472,11 +486,11 @@ class DomEvent extends Base {
             // delegationVdom can be undefined when dragging a proxy over the node.
             // see issues/1137 for details.
             if (!delegationVdom || delegationVdom.vdom && VDomUtil.findVdomChild(delegationVdom.vdom, targetId)) {
-                return false;
+                return false
             }
         }
 
-        return true;
+        return true
     }
 }