neo.mjs 5.6.12 → 5.7.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.6.12'
+         * @member {String} version='5.7.0'
          */
-        version: '5.6.12'
+        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/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.12'
+         * @member {String} version='5.7.0'
          */
-        version: '5.6.12'
+        version: '5.7.0'
     }
 
     /**

package/package.json

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

package/src/DefaultConfig.mjs

@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.6.12'
+     * @default '5.7.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.6.12'
+    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/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
@@ -31,70 +35,112 @@ class ScrollSync extends Base {
     }
 
     /**
-     * @member {Object} items=[]
+     * @member {Object} sourceMap={}
      * @protected
      */
-    items = []
+    sourceMap = {}
 
     /**
-     * @param {Object} data
-     * @param {String} data.sourceId
-     * @param {String} data.targetId
+     * @param {Object} config
      */
-    register(data) {
-        let me       = this,
-            items    = me.items,
-            sourceId = data.sourceId,
-            targetId = data.targetId;
-
-        // ensure that there are no duplicate entries
-        me.removeItem(sourceId, targetId);
-
-        items.push({
-            source: {id: sourceId},
-            target: {id: targetId}
-        })
+    construct(config = {}) {
+        super.construct(config);
 
-        console.log('register', data, items)
+        document.addEventListener('scroll', this.onDocumentScroll.bind(this), true)
     }
 
     /**
-     * @param {String} sourceId
-     * @param {String} targetId
-     * @returns {Boolean}
+     * @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>
      */
-    removeItem(sourceId, targetId) {
-        let items = this.items,
-            i     = 0,
-            len   = items.length,
-            item;
-
-        for (; i < len; i++) {
-            item = items[i];
-
-            if (item.source.id === sourceId && item.target.id === targetId) {
-                items.splice(i, 1);
-                return true
+    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 false
+        return true
     }
 
     /**
      * @param {Object} data
      * @param {String} data.sourceId
      * @param {String} data.targetId
+     * @returns {Boolean}
      */
     unregister(data) {
-        this.removeItem(data.sourceId, data.targetId)
-    }
-}
+        let sourceId   = data.sourceId,
+            sourceMap  = this.sourceMap,
+            sourceNode = document.getElementById(sourceId),
+            parentNode = sourceNode.parentNode,
+            parentId;
 
-Neo.applyClassConfig(ScrollSync);
+        while (parentNode && parentNode.id) {
+            parentId = parentNode.id;
 
-let instance = Neo.create(ScrollSync);
+            if (sourceMap[parentId]) {
+                [...sourceMap[parentId]].forEach((item, index) => {
+                    if (item.sourceId === sourceId && item.targetId === data.targetId) {
+                        sourceMap[parentId].splice(index, 1)
+                    }
+                })
+
+                if (sourceMap[parentId].length < 1) {
+                    delete sourceMap[parentId]
+                }
+            }
+
+            parentNode = parentNode.parentNode
+        }
+
+        return true
+    }
+}
 
-Neo.applyToGlobalNs(instance);
+let instance = Neo.applyClassConfig(ScrollSync);
 
 export default instance;