neo.mjs 6.8.3 → 6.9.1

package/src/tooltip/Base.mjs

@@ -1,6 +1,8 @@
 import Container from '../container/Base.mjs';
 import Label     from '../component/Label.mjs';
 
+let singletons = {};
+
 /**
  * Base class for component tooltips
  * @class Neo.tooltip.Base
@@ -44,6 +46,10 @@ class Base extends Container {
          * @protected
          */
         dismissDelayTaskId: null,
+        /**
+         * @member {Boolean} floating=true
+         */
+        floating: true,
         /**
          * The delay in ms before the tooltip gets shown
          * @member {Number|null} hideDelay=400
@@ -78,6 +84,18 @@ class Base extends Container {
         text_: null
     }
 
+    /**
+     * @param {String} id
+     * @param {Function} callback
+     * @param {Number} delay
+     */
+    addTimeout(id, callback, delay) {
+        id += 'DelayTaskId';
+
+        this.clearTimeout(this[id]);
+        this[id] = setTimeout(callback, delay);
+    }
+
     /**
      * Triggered after the componentId config got changed
      * @param {String} value
@@ -93,8 +111,8 @@ class Base extends Container {
             let me = this;
 
             Neo.getComponent(value).addDomListeners({
-                mouseenter: me.showDelayed,
-                mouseleave: me.hideDelayed,
+                mouseenter: me.onDelegateMouseEnter,
+                mouseleave: me.onDelegateMouseLeave,
                 delegate  : me.delegate,
                 scope     : me
             })
@@ -137,12 +155,10 @@ class Base extends Container {
             if (item?.ntype === 'label') {
                 item.text = value;
             } else {
-                items.push({
+                me.add({
                     module: Label,
                     text  : value
                 });
-
-                me.items = items;
             }
         }
     }
@@ -169,11 +185,49 @@ class Base extends Container {
         });
     }
 
+    /**
+     * @param {Neo.controller.Application} app
+     * @returns {Neo.tooltip.Base}
+     */
+    static createSingleton(app) {
+        if (!singletons[app.name]) {
+            singletons[app.name] = Neo.create('Neo.tooltip.Base', {
+                appName     : app.name,
+                componentId : app.mainView.id,
+                resetCfg    : {},
+                isShared    : true,
+                delegate    : this.delegateFilter,
+                listeners : {
+                    // Reconfigure on over a target
+                    async targetOver({ target, data }) {
+                        // Revert last pointerOver config set to initial setting.
+                        this.set(this.resetCfg);
+                        this.resetCfg = {};
+
+                        // Use the tooltip config block that the target was configured with
+                        // to reconfigure this instance, or if there was none, check the
+                        // data-neo-tooltip property for a text string.
+                        const config = target?._tooltip || { text : data.target.data.neoTooltip };
+
+                        // Cache things we have to reset
+                        for (const key in config) {
+                            this.resetCfg[key] = this[key];
+                        }
+
+                        // Set ourself up as the target wants
+                        this.set(config);
+                    }
+                }
+            });
+        }
+
+        return singletons[app.name];
+    }
+
     /**
      * Instantly hides the tooltip
-     * @param {Object|null} data
      */
-    hide(data) {
+    hide() {
         let me = this;
 
         me.clearTimeout(['dismiss', 'hide', 'show']);
@@ -188,12 +242,70 @@ class Base extends Container {
         let me = this;
 
         if (me.hideDelay) {
-            me.hideDelayTaskId = setTimeout(me.hide.bind(me), me.hideDelay, data);
+            me.addTimeout('hide', me.hide.bind(me), me.hideDelay);
         } else {
             me.hide(data)
         }
     }
 
+    /**
+     * @param {Object} data
+     */
+    onDelegateMouseEnter(data) {
+        const
+            me = this,
+            {
+                currentTarget
+            }  = data;
+
+        // If it's an internal move within the delegate, do nothing
+        if (currentTarget !== me.activeTarget?.id) {
+            me.activeTarget = Neo.get(currentTarget);
+            me.align.target = currentTarget;
+            me.align.targetMargin = 10;
+
+            me.fire('targetOver', {
+                target : me.activeTarget,
+                data
+            });
+
+            // Still visible, just realign
+            if (me.mounted) {
+                me.show();
+                me.alignTo();
+            }
+            else {
+                me.showDelayed(data);
+            }
+        }
+    }
+
+    // Used as a delegate filter to activate on targets which have a tooltip configuration
+    static delegateFilter(path) {
+        for (let i = 0, { length } = path; i < length; i++) {
+            if (path[i].cls.includes('neo-uses-shared-tooltip') || path[i].data['neoTooltip']) {
+                return i;
+            }
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onDelegateMouseLeave(data) {
+        const me = this;
+
+        // If it's an internal move within the delegate, do nothing
+        if (data.currentTarget === me.activeTarget?.id) {
+            me.fire('targetOut', {
+                target : me.activeTarget,
+                data
+            });
+            me.activeTarget = null;
+            me.hideDelayed(data);
+        }
+    }
+
     /**
      * mouseenter event listener for the tooltip element
      * @param {Object} data
@@ -227,10 +339,10 @@ class Base extends Container {
 
         me.showDelayTaskId = null;
 
-        me.clearTimeout('hide');
+        me.clearTimeout(['hide', 'dismiss']);
 
         if (me.dismissDelay) {
-            me.dismissDelayTaskId = setTimeout(me.hide.bind(me), me.dismissDelay, data);
+            me.addTimeout('dismiss', me.hide.bind(me), me.dismissDelay, data);
         }
 
         !me.mounted && me.render(true)
@@ -244,7 +356,7 @@ class Base extends Container {
         let me = this;
 
         if (me.showDelay) {
-            me.showDelayTaskId = setTimeout(me.show.bind(me), me.showDelay, data)
+            me.addTimeout('show', me.show.bind(me), me.showDelay)
         } else {
             me.show(data)
         }

package/src/vdom/Helper.mjs

@@ -750,6 +750,13 @@ class Helper extends Base {
                             node.className = value;
                         }
                         break;
+                    case 'data':
+                        if (value && Neo.typeOf(value) === 'Object') {
+                            Object.entries(value).forEach(([key, val]) => {
+                                node.attributes[`data-${Neo.decamel(key)}`] = val
+                            })
+                        }
+                        break;
                     case 'height':
                     case 'maxHeight':
                     case 'maxWidth':

package/src/worker/App.mjs

@@ -134,6 +134,10 @@ class App extends Base {
                 }
             }
         } else {
+            // default parentId='document.body' => we want it to get shown
+            config.autoMount  = true;
+            config.autoRender = true;
+
             instance = Neo[config.ntype ? 'ntype' : 'create'](config)
         }
 

package/test/components/app.mjs

@@ -0,0 +1,8 @@
+// Important: You need to import all classes which you want to use inside tests here
+// (excluding base classes (prototypes) of already imported classes)
+
+import Button       from '../../src/button/Base.mjs';
+import DateSelector from '../../src/component/DateSelector.mjs';
+import SelectField  from '../../src/form/field/Select.mjs';
+
+export const onStart = () => Neo.app({name: 'AppEmpty'})

package/test/components/files/button/Base.mjs

@@ -0,0 +1,17 @@
+StartTest(t => {
+    t.it('Checking if neo.mjs got started', async t => {
+        if (!globalThis.Neo?.Main) {
+            console.log('Starting the neo.mjs workers setup');
+
+            await import('../../../../src/MicroLoader.mjs');
+        }
+
+        setTimeout(() => {
+            Neo.worker.App.createNeoInstance({
+                ntype  : 'button',
+                iconCls: 'fa fa-home',
+                text   : 'Hello Siesta'
+            })
+        }, 300)
+    });
+});

package/test/components/files/component/DateSelector.mjs

@@ -0,0 +1,18 @@
+StartTest(t => {
+    t.it('Checking if neo.mjs got started', async t => {
+        if (!globalThis.Neo?.Main) {
+            console.log('Starting the neo.mjs workers setup');
+
+            await import('../../../../src/MicroLoader.mjs');
+        }
+
+        setTimeout(() => {
+            Neo.worker.App.createNeoInstance({
+                ntype : 'dateselector',
+                height: 250,
+                value : '2023-10-15',
+                width : 300
+            })
+        }, 300)
+    });
+});

package/test/components/files/form/field/Select.mjs

@@ -0,0 +1,35 @@
+StartTest(t => {
+    t.it('Checking if neo.mjs got started', async t => {
+        if (!globalThis.Neo?.Main) {
+            console.log('Starting the neo.mjs workers setup');
+
+            await import('../../../../../src/MicroLoader.mjs');
+        }
+
+        setTimeout(() => {
+            Neo.worker.App.createNeoInstance({
+                ntype        : 'selectfield',
+                labelPosition: 'inline',
+                labelText    : 'US States',
+                labelWidth   : 80,
+                width        : 300,
+
+                store : {
+                    autoLoad   : true,
+                    keyProperty: 'abbreviation',
+                    url        : '../../resources/examples/data/us_states.json',
+
+                    model: {
+                        fields: [{
+                            name: 'abbreviation',
+                            type: 'string'
+                        }, {
+                            name: 'name',
+                            type: 'string'
+                        }]
+                    }
+                }
+            })
+        }, 300)
+    });
+});

package/test/components/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+    <!-- Web interface -->
+    <link rel="stylesheet" type="text/css" href="../../node_modules/siesta-lite/resources/css/siesta-all.css">
+    <script type="text/javascript" src="../../node_modules/siesta-lite/siesta-all.js"></script>
+
+    <!-- Project file -->
+    <script type="text/javascript" src="siesta.js"></script>
+</head>
+
+<body>
+</body>
+</html>

package/test/components/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "test/components/app.mjs",
+    "basePath"   : "../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}

package/test/components/siesta.js

@@ -0,0 +1,14 @@
+const project = new Siesta.Project.Browser();
+
+project.configure({
+    title       : 'Neo Component Tests',
+    isEcmaModule: true
+});
+
+project.plan(
+    'files/button/Base.mjs',
+    'files/component/DateSelector.mjs',
+    'files/form/field/Select.mjs'
+);
+
+project.start();