neo.mjs 7.0.6 → 7.1.0

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. 
-

package/resources/data/deck/learnneo/pages/Earthquakes-Lab-01-generate-a-workspace.md

@@ -1,47 +0,0 @@
-In this lab, you'll generate a Neo.mjs workspace and run the starter app.
-
-<details>
-<summary>Wait!</summary>
-You may already have a workspace! If so, you can skip this lab. For example, if you followed the <a href="#/learn/Setup">Getting Started > Setup</a> topic, above, you should already have a workspace.
-
-If you don't have a workspace, then continue on to the next step.
-</details>
-
-<details>
-<summary>Use the command-line to generate the workspace</summary>
-
-Use a terminal window to navigate to some parent folder, 
-then run 
-
-    npx neo-app@latest
-
-You'll be prompted for a workspace name, starter app name, etc &mdash; accept the default for everything.
-As the command finishes it starts a server and opens a browser window.
-</details>
-
-<details>
-<summary>Inspect the workspace</summary>
-
-The workspace contains a local copy of the API docs, an `apps` directory (where your apps are found), 
-and some other directories.
-</details>
-
-<details>
-<summary>Start the server</summary>
-From the root of the `workspace` start the server via `npm run server-start`. That starts a server
-at port 8080 and opens a new browser window.
-
-<img src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/StartServer.png" style="width:80%"/>
-
-</details>
-
-
-<details>
-<summary>Run the starter app</summary>
-
-By default, an app named `myapp` was created. You can run it by entering the `apps` directory and 
-clicking `myapp`. It's a folder containing an `index.html` along with the source code for the app.
-
-<img src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/RunTheStarterApp.png" style="width:80%"/>
-
-</details>

package/resources/data/deck/learnneo/pages/Earthquakes-Lab-02-generate-the-starter-app.md

@@ -1,150 +0,0 @@
-In this lab you'll create a starter app and add a single component.
-
-<details>
-
-<summary>Use the command-line to create a starter app</summary>
-
-Use a terminal window to navigate to the workspace and run the following script. Use "Earthquakes"
-as the app name, and defaults for everything else.
-
-    npm run create-app-minimal
-
-After the script runs yous should see these files in the `app/earthquakes` directory.
-
-`view/MainContainer.mjs`
-- `app.mjs`
-- `index.html`
-- `neo-config.json`
-
-If you look in `neo-config.json` you should see this content. Note the `mainThreadAddons` block 
-&mdash; it reflects the add-ons you chose when you followed the instructions in the script.
-<pre>
-{
-    "appPath": "../../apps/earthquakes/app.mjs",
-    "basePath": "../../",
-    "environment": "development",
-    "mainPath": "../node_modules/neo.mjs/src/Main.mjs",
-    "mainThreadAddons": [
-        "DragDrop",
-        "Stylesheet"
-    ],
-    "workerBasePath": "../../node_modules/neo.mjs/src/worker/"
-}</pre>
-
-You're free to edit `neo-config.json` if you were to change your mind later about the theme or need for other add-ons.
-
-If you refresh browser at <a href="http://localhost:8080/apps/" target="apps">http://localhost:8080/apps/</a>
-you'll see the new _earthquakes_ app listed, and if you run it you'll see... nothing! That's because the 
-minimal starter app is the shell of an application without any view content. We'll add a little content
-later in the lab.
-
-<img style="width:80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EmptyEarthquakes.png"></img>
-
-</details>
-
-<details>
-<summary>Look at the main view source</summary>
-
-Use a code editor and look at `workspace/apps/earthquakes/src/view/MainView.mjs`. You'll see the 
-following class definition: 
-
-<pre data-javascript>
-
-import Base       from '../../../node_modules/neo.mjs/src/container/Base.mjs';
-import Controller from './MainViewController.mjs';
-import ViewModel  from './MainViewModel.mjs';
-
-class MainView extends Base {
-    static config = {
-        className: 'Earthquakes.view.MainView',
-        ntype: 'earthquakes-main',
-        
-        controller: {module: Controller},
-        model: {module: ViewModel},
-
-        layout: {ntype: 'fit'},
-        items: [],
-    }
-}
-
-Neo.setupClass(MainView);
-
-export default MainView;
-</pre>
-
-As you can see, `MainView extends Base`, and `Base` is a _container_ (`Neo.container.Base`). 
-A container is a component &mdash; it holds other components, specified in `items:[]`. There 
-are no items in the starter app. The `layout` config specifies how the items are arranged.
-
-</details>
-
-<details>
-<summary>Add a component</summary>
-
-Let's add a button. To do that, add an import for the button base class, then configure it
-in the container's `items:[]`. If you were to read the API docs for buttons, you'd see 
-that buttons have various configs, such as `text`, which is the button text, `iconCls`, which
-is typically a FontAwesome CSS class used to show an icon, and `handler`, which specifies
-which method to run when the button is clicked. We'll use `text`.
-
-<pre data-javascript>
-
-import Base       from '../../../node_modules/neo.mjs/src/container/Base.mjs';
-import Button     from '../../../node_modules/neo.mjs/src/button/Base.mjs';
-import Controller from './MainViewController.mjs';
-import ViewModel  from './MainViewModel.mjs';
-
-class MainView extends Base {
-    static config = {
-        className: 'Earthquakes.view.MainView',
-        ntype: 'earthquakes-main',
-
-        controller: {module: Controller},
-        model: {module: ViewModel},
-
-        layout: {ntype: 'fit'},
-        items: [{
-            module: Button,
-            text: 'Button!'
-        }],
-    }
-}
-
-Neo.setupClass(MainView);
-
-export default MainView;
-</pre>
-
-
-When you run the app you'll see the single button.
-
-<img src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EarthquakesSingleFitButton.png" style="width:80%"/>
-
-The button takes up the full width. Buttons look different depending on the theme. We're using
-the _neo-theme-neo-light_ theme, which controls button height. Otherwise, child items a using the _fit_ layout
-take up the full window.
-</details>
-
-
-<details>
-<summary>Modify the layout</summary>
-The `layout` configures how child items are visually arranged. First, note that the config
-specifies `ntype`. We used `module` for the button config. An `ntype` is a class alias &mdash; if a class
-has already been imported, you can use the `ntype` rather than importing it again and using the `module`
-config. We haven't imported any layouts, but it turns out that `Neo.container.Base` _does_ import all the 
-layout types, which means we're always free to use `ntype` with layouts. You're free to specify an `ntype`
-for the classes you define.
-
-Let's change the layout to arrange items vertically, with items aligned horizontally at the start.
-
-<pre data-javascript>
-layout: {
-    ntype: 'vbox',
-    align: 'start'
-}
-</pre>
-
-<img src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EarthquakesSingleVoxStartButton.png" style="width:80%"/>
-
-
-</details>

package/resources/data/deck/learnneo/pages/Earthquakes-Lab-03-debugging.md

@@ -1,136 +0,0 @@
-In this lab you'll get a little debugging practice by getting component references, changing properties,
-and runing methods.
-
-Remember that when using the debugger console you need to be in the _neo-app-worker_ context.
-
-<details>
-<summary>Use `Neo.manager.Component.items`</summary>
-
-While running the _earthquakes_ app, open Chrome devtools, choose the _neomjs-app-worker_ JavaScript
-context, and run this statement:
-
-    Neo.manager.Component.items
-
-The `items` property is an array of all created components. The array may have a lot of entries, depending on
-the complexity of an app and how much you've done while running it. But it's an easy way to explore what's
-been created.
-
-</details>
-
-<details>
-<summary>Store as global variable</summary>
-
-Any time you have a object reference in the console &mdash; even if it's nested within an array or object &mdash;
-you can right click on the object and choose _Store as global_ variable. Chrome will create a variable named
-`temp1`, `temp2`, etc., that references the object. That  can make it easier to inspect the object and run its methods..
-
-
-<img src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/StoreAsGlobal.png" style="width:80%"/>
-
-</details>
-
-
-<details>
-<summary>Use `Neo.find()` and `Neo.findFirst()`</summary>
-
-If you know what you're looking for, and don't want to bother inspecting everything in `Neo.manager.Component.items`,
-you can use `Neo.find()`, passing an object used to match against what you're searching for.
-
-`Neo.find()` returns an array of matching instances, and `Neo.findFirst()` returns the first matching item.
-Often you know there's only a single instance, so in practice `Neo.findFirst()` is more commonly used.
-
-You could find the button via Neo.find({ntype:'button'}) or Neo.find({text:'Button!'} (assuming you haven't changed
-the button's text.) You can even match a property you give the button. For example, if you configured it with a made-up
-property `foo:true`, you could find it via `Neo.findFirst({foo:true})`. The point is you can search for any properties
-you'd like.
-
-Try this out.
-
-`Neo.findFirst({text:'Button!'}).text = 'Foo!'
-
-You should see the button's text change immediately.
-
-</details>
-
-
-<details>
-<summary>Use `Shift-Ctrl-right-click`</summary>
-
-With your cursor over the button, press _Shift-Ctrl-right-click_. The console will log the button, its parent `MainView`
-and the subsequent parent `Viewport. The button reference shows up as `Base` because the button class name is `Neo.button.Base`.
-
-<img width="80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EarthquakesDemoShiftCtrl.png">
-
-Note that _Shift-Ctrl-right-click_ is only available during development &mdash; it isn't available in a build.
-
-</details>
-
-
-<details>
-<summary>Add a method</summary>
-
-As we mentioned, when debugging, if you a have a reference you can access or update its properties, or run
-its methods. Let's try that out by adding a method.
-
-Edit `apps/earthquakes/view/MainView.mjs` and add a method.
-
-<pre data-javascript>
-
-import Base       from '../../../node_modules/neo.mjs/src/container/Base.mjs';
-import Button     from '../../../node_modules/neo.mjs/src/button/Base.mjs';
-import Controller from './MainViewController.mjs';
-import ViewModel  from './MainViewModel.mjs';
-
-class MainView extends Base {
-    static config = {
-        className: 'Earthquakes.view.MainView',
-        ntype: 'earthquakes-main',
-
-        controller: {module: Controller},
-        model: {module: ViewModel},
-
-        layout: {
-            ntype: 'vbox',
-            align: 'start'
-        },
-        items: [{
-            module: Button,
-            foo: true,
-            text: 'Button!'
-        }],
-    }
-    doFoo() {
-        console.log('foo!');
-    }
-}
-
-Neo.setupClass(MainView);
-
-export default MainView;
-</pre>
-
-Save your changes.
-
-As you can see, the code defined an instance method `doFoo()` that simply logs a message. We'll run the method via debugging techniques in the next step.
-
-</details>
-
-<details>
-<summary>Use `Neo.component.Manager.items` to run the method</summary>
-
-On the console run `Neo.component.Manager.items`. Expand the array and right-click on the entry for `MainView` and
-choose `Store object as global variable`. Then type `temp1.doFoo()` &mdash; you should see "foo!" being logged.
-
-Remember that you _must_ run console statement in the _neomjs-app-worker_ context, and every time your choose
-`Store object as global variable` it'll increment the name of the temp variable: `temp1`, `temp2`, etc.
-</details>
-
-<details>
-<summary>Use _Shift-Ctrl-right-click_ to run the method</summary>
-
-Now try the _Shift-Ctrl-right-click_ technique.
-
-With your cursor over the button, do a _Shift-Ctrl-right-click_ &mdash; you'll see the component hierarchy logged.
-As you did in the previous step, right-click on the entry for `MainView` and choose `Store object as global variable`.
-Then run `doFoo()` using that variable.
-</details>