neo.mjs 5.6.11 → 5.7.0

package/apps/ServiceWorker.mjs

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

package/apps/covid/neo-config.json

@@ -3,6 +3,6 @@
     "basePath"        : "../../",
     "environment"     : "development",
     "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["AmCharts", "DragDrop", "MapboxGL", "Stylesheet"],
+    "mainThreadAddons": ["AmCharts", "DragDrop", "MapboxGL", "ScrollSync", "Stylesheet"],
     "themes"          : ["neo-theme-dark", "neo-theme-light"]
 }

package/apps/form/neo-config.json

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

package/apps/form/view/FormPageContainer.mjs

@@ -21,6 +21,10 @@ class FormPageContainer extends FormContainer {
          * @member {Object} layout={ntype:'vbox'}
          */
         layout: {ntype: 'vbox'},
+        /**
+         * @member {Object} style={overflow:'auto'}
+         */
+        style: {overflow: 'auto'},
         /**
          * @member {Object} _vdom
          */

package/apps/form/view/pages/Page2.mjs

@@ -18,7 +18,8 @@ class Page2 extends FormPageContainer {
         items: [{
             module   : DateField,
             labelText: 'Birthday',
-            name     : 'birthday'
+            name     : 'birthday',
+            style    : {marginBottom: '800px', marginTop: '800px'}
         }]
     }
 }

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.6.11",
+    "version": "5.7.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -57,7 +57,7 @@
         "neo-jsdoc-x": "^1.0.5",
         "postcss": "^8.4.23",
         "sass": "^1.62.1",
-        "webpack": "^5.82.0",
+        "webpack": "^5.82.1",
         "webpack-cli": "^5.1.1",
         "webpack-dev-server": "4.15.0",
         "webpack-hook-plugin": "^1.0.7",

package/src/DefaultConfig.mjs

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

package/src/Main.mjs

@@ -431,14 +431,22 @@ class Main extends core.Base {
     }
 
     /**
-     * Open a new popup window
+     * Open a new popup window and return if successfull
      * @param {Object} data
      * @param {String} data.url
      * @param {String} data.windowFeatures
      * @param {String} data.windowName
-     */
+     * @return {Boolean}
+     */    
     windowOpen(data) {
-        this.openWindows[data.windowName] = window.open(data.url, data.windowName, data.windowFeatures);
+        let openedWindow = window.open(data.url, data.windowName, data.windowFeatures),
+            success      = !!openedWindow;
+
+        if (success) {
+            this.openWindows[data.windowName] = openedWindow;
+        }
+
+        return success;
     }
 
     /**

package/src/form/field/Picker.mjs

@@ -270,9 +270,16 @@ class Picker extends Text {
         // avoid breaking selection model cls updates
         await Neo.timeout(30);
 
-        me.pickerIsMounted && picker.unmount();
+        if (me.pickerIsMounted) {
+            picker.unmount();
+
+            me.pickerIsMounted = false;
 
-        me.pickerIsMounted = false;
+            Neo.main.addon.ScrollSync.unregister({
+                sourceId: me.id,
+                targetId: picker.id
+            })
+        }
     }
 
     /**
@@ -372,6 +379,11 @@ class Picker extends Text {
             });
 
             picker.render(true);
+
+            Neo.main.addon.ScrollSync.register({
+                sourceId: me.id,
+                targetId: picker.id
+            })
         }
     }
 

package/src/form/field/Select.mjs

@@ -637,7 +637,7 @@ class Select extends Picker {
                 cls: ['neo-input-field-wrapper'],
                 cn : [{
                     tag         : 'input',
-                    autocomplete: 'off',
+                    autocomplete: 'no',
                     autocorrect : 'off',
                     cls         : ['neo-textfield-input', 'neo-typeahead-input'],
                     id          : me.getInputHintId(),

package/src/form/field/Text.mjs

@@ -258,12 +258,13 @@ class Text extends Base {
 
     /**
      * Triggered after the autoComplete config got changed
+     * Chrome ignores a value of "off", so we stick to a different value instead
      * @param {Boolean} value
      * @param {Boolean} oldValue
      * @protected
      */
     afterSetAutoComplete(value, oldValue) {
-        this.changeInputElKey('autocomplete', value ? null : 'off');
+        this.changeInputElKey('autocomplete', value ? null : 'no');
     }
 
     /**

package/src/main/addon/DragDrop.mjs

@@ -310,10 +310,13 @@ class DragDrop extends Base {
         }
 
         if (!me.dragProxyElement || me.alwaysFireDragMove) {
+            const originalEvent = event.detail.originalEvent;
             DomEvents.sendMessageToApp({
                 ...me.getEventData(event),
                 offsetX: me.offsetX,
                 offsetY: me.offsetY,
+                screenX: originalEvent.screenX,
+                screenY: originalEvent.screenY,
                 type   : 'drag:move'
             });
         }

package/src/main/addon/GoogleMaps.mjs

@@ -167,8 +167,6 @@ class GoogleMaps extends Base {
         let key = Neo.config.googleMapsApiKey,
             url = ' https://maps.googleapis.com/maps/api/js';
 
-        window.foo = Neo.emptyFn;
-
         DomAccess.loadScript(`${url}?key=${key}&v=weekly&callback=Neo.emptyFn`).then(() => {
             console.log('GoogleMaps API loaded');
         })

package/src/main/addon/ScrollSync.mjs

@@ -1,6 +1,10 @@
-import Base from '../../core/Base.mjs';
+import Base      from '../../core/Base.mjs';
+import DomEvents from '../DomEvents.mjs'
 
 /**
+ * This addon keeps the position of overlays in sync with an anchor element,
+ * when scrolling inside any parent node.
+ * A prominent use case is Neo.form.field.Picker.
  * @class Neo.main.addon.ScrollSync
  * @extends Neo.core.Base
  * @singleton
@@ -30,29 +34,113 @@ class ScrollSync extends Base {
         singleton: true
     }
 
+    /**
+     * @member {Object} sourceMap={}
+     * @protected
+     */
+    sourceMap = {}
+
+    /**
+     * @param {Object} config
+     */
+    construct(config = {}) {
+        super.construct(config);
+
+        document.addEventListener('scroll', this.onDocumentScroll.bind(this), true)
+    }
+
+    /**
+     * @param {Event} event
+     */
+    onDocumentScroll(event) {
+        let me         = this,
+            scrollNode = event.target,
+            sourceRect, targetNode;
+
+        me.sourceMap[scrollNode.id]?.forEach(item => {
+            sourceRect = document.getElementById(item.sourceId).getBoundingClientRect();
+            targetNode = document.getElementById(item.targetId)
+
+            targetNode.style.left = `${sourceRect.x + item.deltaX}px`;
+            targetNode.style.top  = `${sourceRect.y + item.deltaY}px`
+        })
+    }
+
     /**
      * @param {Object} data
      * @param {String} data.sourceId
      * @param {String} data.targetId
+     * @returns Promise<Boolean>
      */
-    register(data) {
-        console.log('register', data)
+    async register(data) {
+        // short delay to ensure the target node got mounted
+        await Neo.timeout(50)
+
+        let sourceId   = data.sourceId,
+            sourceMap  = this.sourceMap,
+            sourceNode = document.getElementById(sourceId),
+            sourceRect = sourceNode.getBoundingClientRect(),
+            parentNode = sourceNode.parentNode,
+            targetId   = data.targetId,
+            targetRect = document.getElementById(targetId).getBoundingClientRect(),
+            deltaX     = targetRect.x - sourceRect.x,
+            deltaY     = targetRect.y - sourceRect.y,
+            overflowX, overflowY, parentId;
+
+        while (parentNode && parentNode.id) {
+            parentId = parentNode.id;
+
+            ({overflowX, overflowY} = getComputedStyle(parentNode))
+
+            if (overflowX === 'auto' || overflowX === 'scroll' || overflowY === 'auto' || overflowY === 'scroll') {
+                if (!sourceMap[parentId]) {
+                    sourceMap[parentId] = []
+                }
+
+                sourceMap[parentId].push({deltaX, deltaY, sourceId, targetId})
+            }
+
+            parentNode = parentNode.parentNode
+        }
+
+        return true
     }
 
     /**
      * @param {Object} data
      * @param {String} data.sourceId
      * @param {String} data.targetId
+     * @returns {Boolean}
      */
     unregister(data) {
-        console.log('unregister', data)
-    }
-}
+        let sourceId   = data.sourceId,
+            sourceMap  = this.sourceMap,
+            sourceNode = document.getElementById(sourceId),
+            parentNode = sourceNode.parentNode,
+            parentId;
+
+        while (parentNode && parentNode.id) {
+            parentId = parentNode.id;
+
+            if (sourceMap[parentId]) {
+                [...sourceMap[parentId]].forEach((item, index) => {
+                    if (item.sourceId === sourceId && item.targetId === data.targetId) {
+                        sourceMap[parentId].splice(index, 1)
+                    }
+                })
 
-Neo.applyClassConfig(ScrollSync);
+                if (sourceMap[parentId].length < 1) {
+                    delete sourceMap[parentId]
+                }
+            }
 
-let instance = Neo.create(ScrollSync);
+            parentNode = parentNode.parentNode
+        }
+
+        return true
+    }
+}
 
-Neo.applyToGlobalNs(instance);
+let instance = Neo.applyClassConfig(ScrollSync);
 
 export default instance;