neo.mjs 7.0.6 → 7.2.0

package/src/controller/Component.mjs

@@ -1,5 +1,6 @@
-import Base   from './Base.mjs';
-import Logger from '../util/Logger.mjs';
+import Base              from './Base.mjs';
+import {resolveCallback} from '../util/Function.mjs';
+import Logger            from '../util/Logger.mjs';
 
 /**
  * @class Neo.controller.Component
@@ -71,7 +72,7 @@ class Component extends Base {
 
     /**
      * @param {String} handlerName
-     * @param {Neo.component.Base} component
+     * @param {Neo.component.Base} [component]
      * @returns {Neo.controller.Component|Boolean|null}
      */
     getHandlerScope(handlerName, component) {
@@ -81,7 +82,7 @@ class Component extends Base {
         if (component) {
             // Look for ths function *name* first in the Component itself.
             // If we find it, return true so calling code knows not to continue to search.
-            const handlerCb = component.resolveCallback(handlerName, component);
+            const handlerCb = resolveCallback(handlerName, component);
 
             // Handler fn is resolved in the Component or its own parent chain.
             // Return a status indicating that we do not need an early binding
@@ -91,8 +92,7 @@ class Component extends Base {
         }
 
         return Neo.isFunction(me[handlerName]) ?
-            me : parent ?
-            parent.getHandlerScope(handlerName) : null
+            me : parent?.getHandlerScope(handlerName) || null
     }
 
     /**
@@ -114,7 +114,7 @@ class Component extends Base {
             {parent} = me;
 
         if (parent) {
-            return parent;
+            return parent
         }
 
         return me.component.parent?.getController() || null
@@ -238,9 +238,9 @@ class Component extends Base {
                     if (eventHandler) {
                         scope = me.getHandlerScope(eventHandler);
 
-                        if (!scope) {
-                            Logger.logError('Unknown domEvent handler for', eventHandler, component)
-                        } else {
+                        // There can be string based listeners like 'up.onClick', which will resolved inside manager.DomEvents
+                        // => Do nothing in case there is no match inside the controller hierarchy.
+                        if (scope) {
                             domListener[key] = scope[eventHandler].bind(scope)
                         }
                     }

package/src/core/Observable.mjs

@@ -1,4 +1,5 @@
-import Base from './Base.mjs';
+import Base              from './Base.mjs';
+import {resolveCallback} from '../util/Function.mjs';
 
 /**
  * @class Neo.core.Observable
@@ -136,7 +137,7 @@ class Observable extends Base {
      */
     callback(fn, scope=this, args) {
         if (fn) {
-            const handler = this.resolveCallback(fn, scope);
+            const handler = resolveCallback(fn, scope);
             handler.fn.apply(handler.scope, args)
         }
     }
@@ -172,7 +173,7 @@ class Observable extends Base {
 
                 // Resolve function name on the scope (or me), or, if it starts with 'up.'
                 // look in the ownership hierarchy from me.
-                const cb = me.resolveCallback(handler.fn, handler.scope || me);
+                const cb = resolveCallback(handler.fn, handler.scope || me);
 
                 // remove the listener if the scope no longer exists
                 if (cb.scope && !cb.scope.id) {
@@ -338,30 +339,6 @@ class Observable extends Base {
 
     // }
 
-    /**
-     * Locate a callable function by name in the passed scope.
-     *
-     * If the name starts with 'up.', the parent Component chain is searched.
-     *
-     * This is used by Observable.fire and by 'handler' function calls to resolve
-     * string function names in the Component's own hierarchy.
-     * @param {Function|String} fn A function, or the name of a function to find in the passed scope object/
-     * @param {Object} scope The scope to find the function in if it is specified as a string.
-     * @returns {Object}
-     */
-    resolveCallback(fn, scope=this) {
-        if (typeof fn === 'string') {
-            if (!scope[fn] && fn.startsWith('up.')) {
-                fn = fn.slice(3);
-                while (!scope[fn] && (scope = scope.parent));
-            }
-
-            fn = scope[fn]
-        }
-
-        return {fn, scope}
-    }
-
     /**
      * Alias for removeListener
      * @param {Object|String} name

package/src/grid/View.mjs

@@ -23,6 +23,27 @@ class View extends Component {
         baseCls: ['neo-grid-view']
     }
 
+    /**
+     * @param config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.addDomListeners([{
+            click   : me.onCellClick,
+            dblclick: me.onCellDoubleClick,
+            delegate: '.neo-grid-cell',
+            scope   : me
+        }, {
+            click   : me.onRowClick,
+            dblclick: me.onRowDoubleClick,
+            delegate: '.neo-grid-row',
+            scope   : me
+        }])
+    }
+
     /**
      * @param {Array} inputData
      */
@@ -169,6 +190,39 @@ class View extends Component {
         super.destroy(updateParentVdom, silent)
     }
 
+    /**
+     * @param {Object} data
+     * @param {String} eventName
+     */
+    fireCellEvent(data, eventName) {
+        let me        = this,
+            {id}      = data.target,
+            dataField = me.getCellDataField(id),
+            record    = me.getRecord(id);
+
+        me.parent.fire(eventName, {id: me, data, dataField, record})
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} eventName
+     */
+    fireRowEvent(data, eventName) {
+        let me     = this,
+            {id}   = data.target,
+            record = me.getRecord(id);
+
+        me.parent.fire(eventName, {id: me, data, record})
+    }
+
+    /**
+     * @param {String} cellId
+     * @returns {String}
+     */
+    getCellDataField(cellId) {
+        return cellId.split('__')[2]
+    }
+
     /**
      * @param {Object} record
      * @param {String} field
@@ -232,6 +286,34 @@ class View extends Component {
         return ['neo-grid-row']
     }
 
+    /**
+     * @param {Object} data
+     */
+    onCellClick(data) {
+        this.fireCellEvent(data, 'cellClick')
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onCellDoubleClick(data) {
+        this.fireCellEvent(data, 'cellDoubleClick')
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onRowClick(data) {
+        this.fireRowEvent(data, 'rowClick')
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onRowDoubleClick(data) {
+        this.fireRowEvent(data, 'rowDoubleClick')
+    }
+
     /**
      * Gets triggered after changing the value of a record field.
      * E.g. myRecord.foo = 'bar';

package/src/layout/Cube.mjs

@@ -130,7 +130,7 @@ class Cube extends Card {
      * @protected
      */
     async afterSetActiveIndex(value, oldValue) {
-        if (Neo.isNumber(value)) {
+        if (Neo.isNumber(value) && value < 6) {
             let me          = this,
                 {container} = me,
                 item        = container.items[value];
@@ -254,24 +254,26 @@ class Cube extends Card {
     applyChildAttributes(item, index) {
         let {wrapperCls} = item;
 
-        wrapperCls = NeoArray.union(wrapperCls, 'neo-face', Object.keys(Cube.faces)[index]);
-
-        switch(index) {
-            case 0:
-            case 1:
-                wrapperCls = NeoArray.union(wrapperCls, 'neo-face-z');
-                break;
-            case 2:
-            case 3:
-                wrapperCls = NeoArray.union(wrapperCls, 'neo-face-x');
-                break;
-            case 4:
-            case 5:
-                wrapperCls = NeoArray.union(wrapperCls, 'neo-face-y');
-                break;
-        }
+        if (index < 6) {
+            wrapperCls = NeoArray.union(wrapperCls, 'neo-face', Object.keys(Cube.faces)[index]);
+
+            switch(index) {
+                case 0:
+                case 1:
+                    wrapperCls = NeoArray.union(wrapperCls, 'neo-face-z');
+                    break;
+                case 2:
+                case 3:
+                    wrapperCls = NeoArray.union(wrapperCls, 'neo-face-x');
+                    break;
+                case 4:
+                case 5:
+                    wrapperCls = NeoArray.union(wrapperCls, 'neo-face-y');
+                    break;
+            }
 
-        item.wrapperCls = wrapperCls
+            item.wrapperCls = wrapperCls
+        }
     }
 
     /**
@@ -298,7 +300,7 @@ class Cube extends Card {
 
         if (me.hideInactiveCardsOnDestroy) {
             vdom.cn.forEach((item, index) => {
-                if (index !== me.activeIndex) {
+                if (index < 6 && index !== me.activeIndex) {
                     item.removeDom = true
                 }
             })
@@ -334,8 +336,10 @@ class Cube extends Card {
 
         me.timeout(50).then(() => {
             // Important when switching from a card layout to this one
-            container.vdom.cn[0].cn[0].cn.forEach(node => {
-                delete node.removeDom
+            container.vdom.cn[0].cn[0].cn.forEach((node, index) => {
+                if (index < 6) {
+                    delete node.removeDom
+                }
             });
 
             container.update()
@@ -352,24 +356,26 @@ class Cube extends Card {
     removeChildAttributes(item, index) {
         let {wrapperCls} = item;
 
-        NeoArray.remove(wrapperCls, ['neo-face', Object.keys(Cube.faces)[index]]);
-
-        switch(index) {
-            case 0:
-            case 1:
-                NeoArray.remove(wrapperCls, 'neo-face-z');
-                break;
-            case 2:
-            case 3:
-                NeoArray.remove(wrapperCls, 'neo-face-x');
-                break;
-            case 4:
-            case 5:
-                NeoArray.remove(wrapperCls, 'neo-face-y');
-                break;
-        }
+        if (index < 6) {
+            NeoArray.remove(wrapperCls, ['neo-face', Object.keys(Cube.faces)[index]]);
+
+            switch(index) {
+                case 0:
+                case 1:
+                    NeoArray.remove(wrapperCls, 'neo-face-z');
+                    break;
+                case 2:
+                case 3:
+                    NeoArray.remove(wrapperCls, 'neo-face-x');
+                    break;
+                case 4:
+                case 5:
+                    NeoArray.remove(wrapperCls, 'neo-face-y');
+                    break;
+            }
 
-        item.wrapperCls = wrapperCls
+            item.wrapperCls = wrapperCls
+        }
     }
 
     /**

package/src/list/Base.mjs

@@ -409,6 +409,22 @@ class Base extends Component {
         me.cls        = cls
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        super.afterSetWindowId(value, oldValue);
+
+        let {navigator} = this;
+
+        if (navigator) {
+            navigator.windowId = value
+        }
+    }
+
     /**
      * Triggered before the selectionModel config gets changed.
      * @param {Neo.selection.Model} value

package/src/main/addon/DragDrop.mjs

@@ -153,8 +153,8 @@ class DragDrop extends Base {
 
         Promise.all(imports).then(modules => {
             // create the Mouse- and / or TouchSensor
-            Neo.create({
-                module: modules[0].default
+            modules.forEach(module => {
+                Neo.create({module: module.default})
             })
         })
     }
@@ -461,6 +461,7 @@ class DragDrop extends Base {
             node;
 
         delete data.appName;
+        delete data.windowId;
 
         if (data.boundaryContainerId) {
             node = DomAccess.getElementOrBody(data.boundaryContainerId);

package/src/manager/DomEvent.mjs

@@ -1,9 +1,10 @@
-import Base             from '../core/Base.mjs';
-import ComponentManager from './Component.mjs';
-import FocusManager     from './Focus.mjs';
-import Logger           from '../util/Logger.mjs';
-import NeoArray         from '../util/Array.mjs';
-import VDomUtil         from '../util/VDom.mjs';
+import Base              from '../core/Base.mjs';
+import ComponentManager  from './Component.mjs';
+import FocusManager      from './Focus.mjs';
+import Logger            from '../util/Logger.mjs';
+import NeoArray          from '../util/Array.mjs';
+import {resolveCallback} from '../util/Function.mjs';
+import VDomUtil          from '../util/VDom.mjs';
 
 const eventConfigKeys = [
     'bubble',
@@ -192,10 +193,12 @@ class DomEvent extends Base {
      */
     generateListenerConfig(config, scope) {
         return {
+            bubble   : config.bubble,
             delegate : config.delegate,
             eventName: config.eventName,
             id       : scope.id,
             opts     : config,
+            priority : config.priority,
             scope    : config.scope   || scope,
             vnodeId  : config.vnodeId || scope.id
         };
@@ -217,6 +220,7 @@ class DomEvent extends Base {
 
     /**
      * @param {Object} config
+     * @param {Boolean} config.bubble
      * @param {String} config.delegate
      * @param {String} config.eventName
      * @param {String} config.id
@@ -264,9 +268,10 @@ class DomEvent extends Base {
 
             if (localEvents.length > 0) {
                 Neo.worker.App.promiseMessage('main', {
-                    action : 'addDomListener',
-                    appName: component.appName,
-                    events : localEvents
+                    action  : 'addDomListener',
+                    appName : component.appName,
+                    events  : localEvents,
+                    windowId: component.windowId
                 }).then(data => {
                     // console.log('added domListener', data);
                 }).catch(err => {
@@ -278,6 +283,7 @@ class DomEvent extends Base {
 
     /**
      * @param {Object} config
+     * @param {Boolean} config.bubble
      * @param {String} config.delegate
      * @param {String} config.eventName
      * @param {String} config.id
@@ -285,20 +291,23 @@ class DomEvent extends Base {
      * @param {Number} config.opts
      * @param {Number} config.originalConfig
      * @param {String} config.ownerId
-     * @param {Number} config.priority
+     * @param {Number} config.priority=1
      * @param {Object} config.scope
      * @param {String} config.vnodeId
      * @returns {Boolean} true if the listener got registered successfully (false in case it was already there)
      */
     register(config) {
-        let alreadyRegistered            = false,
+        let me                           = this,
+            alreadyRegistered            = false,
             {eventName, id, opts, scope} = config,
-            listeners                    = this.items,
+            listeners                    = me.items,
             fnType                       = typeof opts,
             fn, listener, listenerConfig, listenerId;
 
-        if (fnType === 'function' || fnType === 'string') {
+        if (fnType === 'function') {
             fn = opts
+        } else if (fnType === 'string') {
+            fn = resolveCallback(opts, scope).fn
         } else {
             fn    = opts.fn;
             scope = opts.scope || scope
@@ -343,22 +352,23 @@ class DomEvent extends Base {
             mounted       : !config.local && globalDomEvents.includes(eventName),
             originalConfig: config.originalConfig,
             ownerId       : config.ownerId,
-            priority      : config.priority || 1,
+            priority      : config.priority || opts.priority || 1,
             scope,
             vnodeId       : config.vnodeId
         };
 
-        this.map[listenerId] = listenerConfig;
+        me.map[listenerId] = listenerConfig;
 
         listeners[id][eventName].push(listenerConfig);
 
-        listeners[id][eventName].sort((a, b) => a.priority > b.priority);
+        listeners[id][eventName].sort((a, b) => b.priority - a.priority);
 
         return true
     }
 
     /**
      * @param {Object} config
+     * @param {Boolean} config.bubble
      * @param {String} config.eventName
      * @param {String} config.id
      * @param {Object} config.opts
@@ -414,14 +424,16 @@ class DomEvent extends Base {
                 Object.entries(domListener).forEach(([key, value]) => {
                     if (!eventConfigKeys.includes(key)) {
                         me.register({
+                            bubble        : domListener.bubble   || value.bubble,
                             delegate      : domListener.delegate || value.delegate || '#' + component.id,
                             eventName     : key,
                             id            : component.id,
                             opts          : value,
                             originalConfig: domListener,
                             ownerId       : component.id,
-                            scope         : domListener.scope || component,
-                            vnodeId       : domListener.vnodeId || value.vnodeId || component.id
+                            priority      : domListener.priority || value.priority || 1,
+                            scope         : domListener.scope    || component,
+                            vnodeId       : domListener.vnodeId  || value.vnodeId  || component.id
                         })
                     }
                 })

package/src/table/View.mjs

@@ -50,6 +50,27 @@ class View extends Component {
         {tag: 'tbody', cn: []}
     }
 
+    /**
+     * @param config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.addDomListeners([{
+            click   : me.onCellClick,
+            dblclick: me.onCellDoubleClick,
+            delegate: '.neo-table-cell',
+            scope   : me
+        }, {
+            click   : me.onRowClick,
+            dblclick: me.onRowDoubleClick,
+            delegate: '.neo-table-row',
+            scope   : me
+        }])
+    }
+
     /**
      * @param {Object} data
      * @param {String} [data.cellId]
@@ -246,6 +267,39 @@ class View extends Component {
         super.destroy(...args)
     }
 
+    /**
+     * @param {Object} data
+     * @param {String} eventName
+     */
+    fireCellEvent(data, eventName) {
+        let me        = this,
+            {id}      = data.target,
+            dataField = me.getCellDataField(id),
+            record    = me.getRecord(id);
+
+        me.parent.fire(eventName, {id: me, data, dataField, record})
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} eventName
+     */
+    fireRowEvent(data, eventName) {
+        let me     = this,
+            {id}   = data.target,
+            record = me.getRecord(id);
+
+        me.parent.fire(eventName, {id: me, data, record})
+    }
+
+    /**
+     * @param {String} cellId
+     * @returns {String}
+     */
+    getCellDataField(cellId) {
+        return cellId.split('__')[2]
+    }
+
     /**
      * @param {Object} record
      * @param {String} dataField
@@ -341,6 +395,34 @@ class View extends Component {
         return ['neo-table-row']
     }
 
+    /**
+     * @param {Object} data
+     */
+    onCellClick(data) {
+        this.fireCellEvent(data, 'cellClick')
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onCellDoubleClick(data) {
+        this.fireCellEvent(data, 'cellDoubleClick')
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onRowClick(data) {
+        this.fireRowEvent(data, 'rowClick')
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onRowDoubleClick(data) {
+        this.fireRowEvent(data, 'rowDoubleClick')
+    }
+
     /**
      * Gets triggered after changing the value of a record field.
      * E.g. myRecord.foo = 'bar';

package/src/util/Function.mjs

@@ -123,6 +123,30 @@ export function intercept(target, targetMethodName, interceptFunction, scope, pr
     })
 }
 
+/**
+ * Locate a callable function by name in the passed scope.
+ *
+ * If the name starts with 'up.', the parent Component chain is searched.
+ *
+ * This is used by manager.DomEvents & core.Observable.fire and by 'handler' function calls to resolve
+ * string function names in the Component's own hierarchy.
+ * @param {Function|String} fn A function, or the name of a function to find in the passed scope object/
+ * @param {Object} scope=this The scope to find the function in if it is specified as a string.
+ * @returns {Object}
+ */
+export function resolveCallback(fn, scope=this) {
+    if (typeof fn === 'string') {
+        if (!scope[fn] && fn.startsWith('up.')) {
+            fn = fn.slice(3);
+            while (!scope[fn] && (scope = scope.parent));
+        }
+
+        fn = scope[fn]
+    }
+
+    return {fn, scope}
+}
+
 /**
  * @param {Function} callback
  * @param {Neo.core.Base} scope

package/resources/data/deck/learnneo/pages/Earthquakes-01-goals.md

@@ -1,32 +0,0 @@
-In this topic you'll create an application that fetches data on earthquakes in Iceland,
-and show the information in two views: a table, and a map.
-You'll do this in a series of simple labs. 
-
-What are the goals of this lengthy topic?
-
-- To give you hands-on coding a simple app
-- To introduce fundamental Neo concepts
-
-Most of these labs are copy-and-paste because we're focusing on _what_ the code is doing on rather than _how_.
-
-For this tutorial don't worry about syntax details. Other tutorials and guides will spend more and 
-more time on syntax.e
-
-## Key concepts
-
-A few key concepts we'll be discussing:
-
-- Creating a starter app
-- Configuring components
-- Debugging
-- Class-based coding
-- View models
-- Events
-- Controllers
-
-## Advice
-
-A word of advice: Keep a high-level perspective, especially early on. We'll have plenty of time to get 
-into the code, and we'll do most things multiple times. In other words, focus on what you're accomplishing,
-and don't worry about syntax details. 
-