neo.mjs 7.7.0 → 7.9.0

package/src/main/addon/Navigator.mjs

@@ -440,40 +440,42 @@ class Navigator extends Base {
             subject     = data.subject = DomAccess.getElement(data.id),
             eventSource = data.eventSource = data.eventSource ? DomAccess.getElement(data.eventSource) : subject;
 
-        subject.$navigator = data;
+        if (subject) {
+            subject.$navigator = data;
 
-        if (!data.activeCls) {
-            data.activeCls = 'neo-navigator-active-item'
-        }
-
-        // Ensure that only *one* of the child focusables is actually tabbable.
-        // We use arrow keys for internal navigation. TAB must move out.
-        me.fixItemFocusability(data);
-
-        // Finds a focusable item starting from a descendant el within one of our selector items
-        data.findFocusable = el => DomUtils.closest(el, el =>
-            // We're looking for an element that is focusable
-            DomUtils.isFocusable(el) &&
-            // And within our subject element
-            (subject.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_CONTAINED_BY) &&
-            // And within an element that matches our selector
-            el.closest(data.selector)
-        );
-
-        // TreeWalker so that we can easily move between navigable elements within the target.
-        data.treeWalker = document.createTreeWalker(subject, NodeFilter.SHOW_ELEMENT, node => me.navigateNodeFilter(node, data));
-
-        // We have to know when the DOM mutates in case the active item is removed.
-        (data.targetMutationMonitor = new MutationObserver(e => me.navigateTargetChildListChange(e, data))).observe(subject, {
-            childList : true,
-            subtree   : true
-        });
+            if (!data.activeCls) {
+                data.activeCls = 'neo-navigator-active-item'
+            }
 
-        eventSource.addEventListener('keydown', data.l1 = e => me.navigateKeyDownHandler(e, data));
-        subject.addEventListener('mousedown',   data.l2 = e => me.navigateMouseDownHandler(e, data));
-        subject.addEventListener('click',       data.l3 = e => me.navigateClickHandler(e, data));
-        subject.addEventListener('focusin',     data.l4 = e => me.navigateFocusInHandler(e, data));
-        subject.addEventListener('focusout',    data.l5 = e => me.navigateFocusOutHandler(e, data));
+            // Ensure that only *one* of the child focusables is actually tabbable.
+            // We use arrow keys for internal navigation. TAB must move out.
+            me.fixItemFocusability(data);
+
+            // Finds a focusable item starting from a descendant el within one of our selector items
+            data.findFocusable = el => DomUtils.closest(el, el =>
+                // We're looking for an element that is focusable
+                DomUtils.isFocusable(el) &&
+                // And within our subject element
+                (subject.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_CONTAINED_BY) &&
+                // And within an element that matches our selector
+                el.closest(data.selector)
+            );
+
+            // TreeWalker so that we can easily move between navigable elements within the target.
+            data.treeWalker = document.createTreeWalker(subject, NodeFilter.SHOW_ELEMENT, node => me.navigateNodeFilter(node, data));
+
+            // We have to know when the DOM mutates in case the active item is removed.
+            (data.targetMutationMonitor = new MutationObserver(e => me.navigateTargetChildListChange(e, data))).observe(subject, {
+                childList : true,
+                subtree   : true
+            });
+
+            eventSource.addEventListener('keydown', data.l1 = e => me.navigateKeyDownHandler(e, data));
+            subject.addEventListener('mousedown',   data.l2 = e => me.navigateMouseDownHandler(e, data));
+            subject.addEventListener('click',       data.l3 = e => me.navigateClickHandler(e, data));
+            subject.addEventListener('focusin',     data.l4 = e => me.navigateFocusInHandler(e, data));
+            subject.addEventListener('focusout',    data.l5 = e => me.navigateFocusOutHandler(e, data))
+        }
     }
 
     /**

package/src/main/addon/WindowPosition.mjs

@@ -67,13 +67,13 @@ class WindowPosition extends Base {
     construct(config) {
         super.construct(config);
 
-        let me  = this,
-            win = window;
+        let me                      = this,
+            {screenLeft, screenTop} = window;
 
-        me.screenLeft = win.screenLeft;
-        me.screenTop  = win.screenTop;
+        me.screenLeft = screenLeft;
+        me.screenTop  = screenTop;
 
-        win.addEventListener('mouseout', me.onMouseOut.bind(me))
+        window.addEventListener('mouseout', me.onMouseOut.bind(me))
     }
 
     /**
@@ -96,15 +96,13 @@ class WindowPosition extends Base {
      *
      */
     adjustPositions() {
-        let position;
-
         Object.entries(this.windows).forEach(([key, value]) => {
-            position = this.getPosition(value);
+            let {left, top} = this.getPosition(value);
 
             Neo.Main.windowMoveTo({
                 windowName: key,
-                x         : position.left,
-                y         : position.top
+                x         : left,
+                y         : top
             })
         })
     }
@@ -199,7 +197,7 @@ class WindowPosition extends Base {
     /**
      * @param {Object} event
      */
-    onResize(event) { console.log('onResize');
+    onResize(event) {
         let me  = this,
             win = window,
             height, width;

package/src/model/Component.mjs

@@ -155,10 +155,19 @@ class Component extends Base {
      */
     beforeSetStores(value, oldValue) {
         if (value) {
-            let controller = this.component.getController();
+            let me         = this,
+                controller = me.getController();
 
             Object.entries(value).forEach(([key, storeValue]) => {
                 controller?.parseConfig(storeValue);
+
+                // support mapping string based listeners into the model instance
+                Object.entries(storeValue.listeners || {}).forEach(([listenerKey,listener]) => {
+                    if (Neo.isString(listener) && Neo.isFunction(me[listener])) {
+                        storeValue.listeners[listenerKey] = me[listener].bind(me)
+                    }
+                })
+
                 value[key] = ClassSystemUtil.beforeSetInstance(storeValue)
             })
         }

package/src/plugin/Resizable.mjs

@@ -389,12 +389,12 @@ class Resizable extends Base {
      * @param {Object} data
      */
     onDragStart(data) {
-        let me               = this,
-            containerId      = me.boundaryContainerId,
-            i                = 0,
-            len              = data.path.length,
-            {appName, owner} = me,
-            style            = owner.wrapperStyle, // todo: delegation target
+        let me                         = this,
+            containerId                = me.boundaryContainerId,
+            i                          = 0,
+            len                        = data.path.length,
+            {appName, owner, windowId} = me,
+            style                      = owner.wrapperStyle, // todo: delegation target
             target, vdom, vdomStyle;
 
         me.isDragging = true;
@@ -429,11 +429,16 @@ class Resizable extends Base {
             vdom      = Neo.clone(owner.vdom, true);
             vdomStyle = vdom.style;
 
+            delete vdom.height;
+            delete vdom.width;
+
             delete vdomStyle.height;
             delete vdomStyle.left;
             delete vdomStyle.top;
             delete vdomStyle.width;
 
+            vdomStyle.opacity = 0.7;
+
             me.dragZone = Neo.create({
                 module             : DragZone,
                 appName,
@@ -441,6 +446,7 @@ class Resizable extends Base {
                 dragElement        : vdom,
                 moveInMainThread   : false,
                 owner,
+                windowId,
                 ...me.dragZoneConfig
             })
         } else {

package/src/tab/Container.mjs

@@ -57,6 +57,10 @@ class Container extends BaseContainer {
          * @member {Object|null} headerToolbarDefaults=null
          */
         headerToolbarDefaults: null,
+        /**
+         * @member {Object|null} layout=null
+         */
+        layout: null,
         /**
          * True to not apply a background effect to the tab header container
          * @member {Boolean} plain_=true
@@ -514,7 +518,7 @@ class Container extends BaseContainer {
      *
      */
     onConstructed() {
-        this._layout = this.getLayoutConfig(); // silent update
+        this.layout = this.getLayoutConfig(); // silent update
         super.onConstructed()
     }
 

package/src/table/View.mjs

@@ -1,4 +1,5 @@
 import Component from '../component/Base.mjs';
+import NeoArray  from '../util/Array.mjs';
 import VDomUtil  from '../util/VDom.mjs';
 
 /**
@@ -35,6 +36,10 @@ class View extends Component {
          * @member {Object} recordVnodeMap={}
          */
         recordVnodeMap: {},
+        /**
+         * @member {String} selectedRecordField='annotations.selected'
+         */
+        selectedRecordField: 'annotations.selected',
         /**
          * @member {Neo.data.Store|null} store=null
          */
@@ -86,7 +91,7 @@ class View extends Component {
             cellCls     = ['neo-table-cell'],
             colspan     = record[me.colspanField],
             {dataField} = column,
-            fieldValue  = record[dataField],
+            fieldValue  = Neo.ns(dataField, false, record),
             hasStore    = tableContainer.store?.model, // todo: remove as soon as all tables use stores (examples table)
             {vdom}      = me,
             cellConfig, rendererOutput;
@@ -189,6 +194,10 @@ class View extends Component {
 
             trCls = me.getTrClass(record, i);
 
+            if (selectedRows && Neo.ns(me.selectedRecordField, false, record)) {
+                NeoArray.add(selectedRows, id)
+            }
+
             if (selectedRows?.includes(id)) {
                 trCls.push('neo-selected');
 
@@ -432,11 +441,12 @@ class View extends Component {
      * @param {Object} opts.record
      */
     onStoreRecordChange(opts) {
-        let me             = this,
-            fieldNames     = opts.fields.map(field => field.name),
-            needsUpdate    = false,
-            tableContainer = me.parent,
-            {vdom}         = me,
+        let me               = this,
+            fieldNames       = opts.fields.map(field => field.name),
+            needsUpdate      = false,
+            tableContainer   = me.parent,
+            {selectionModel} = tableContainer,
+            {vdom}           = me,
             cellId, cellNode, column, index, scope;
 
         if (fieldNames.includes(me.colspanField)) {
@@ -444,17 +454,23 @@ class View extends Component {
             me.createViewData(me.store.items)
         } else {
             opts.fields.forEach(field => {
-                cellId   = me.getCellId(opts.record, field.name);
-                cellNode = VDomUtil.findVdomChild(vdom, cellId);
+                if (field.name === me.selectedRecordField) {
+                    if (selectionModel.ntype === 'selection-table-rowmodel') {
+                        selectionModel[!field.value && selectionModel.singleSelect ? 'deselect' : 'select'](me.getRowId(opts.record))
+                    }
+                } else {
+                    cellId   = me.getCellId(opts.record, field.name);
+                    cellNode = VDomUtil.findVdomChild(vdom, cellId);
 
-                // the vdom might not exist yet => nothing to do in this case
-                if (cellNode?.vdom) {
-                    column      = me.getColumn(field.name);
-                    index       = cellNode.index;
-                    needsUpdate = true;
-                    scope       = column.rendererScope || tableContainer;
+                    // the vdom might not exist yet => nothing to do in this case
+                    if (cellNode?.vdom) {
+                        column      = me.getColumn(field.name);
+                        index       = cellNode.index;
+                        needsUpdate = true;
+                        scope       = column.rendererScope || tableContainer;
 
-                    cellNode.parentNode.cn[index] = me.applyRendererOutput({cellId, column, record: opts.record, index, tableContainer})
+                        cellNode.parentNode.cn[index] = me.applyRendererOutput({cellId, column, record: opts.record, index, tableContainer})
+                    }
                 }
             })
         }

package/src/table/header/Button.mjs

@@ -1,6 +1,7 @@
-import BaseButton from '../../button/Base.mjs';
-import NeoArray   from '../../util/Array.mjs';
-import TextField  from '../../form/field/Text.mjs';
+import BaseButton        from '../../button/Base.mjs';
+import NeoArray          from '../../util/Array.mjs';
+import TextField         from '../../form/field/Text.mjs';
+import {resolveCallback} from '../../util/Function.mjs';
 
 /**
  * @class Neo.table.header.Button
@@ -75,6 +76,10 @@ class Button extends BaseButton {
          * @protected
          */
         isSorted_: null,
+        /**
+         * @member {Function|String|null} renderer_='cellRenderer'
+         */
+        renderer_: 'cellRenderer',
         /**
          * Scope to execute the column renderer.
          * Defaults to the matching table.Container
@@ -261,7 +266,31 @@ class Button extends BaseButton {
      * @protected
      */
     beforeSetCellAlign(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'cellAlign', 'cellAlignValues');
+        return this.beforeSetEnumValue(value, oldValue, 'cellAlign', 'cellAlignValues')
+    }
+
+    /**
+     * Triggered before the renderer config gets changed
+     * @param {Function|String|null} value
+     * @param {Function|String|null} oldValue
+     * @protected
+     */
+    beforeSetRenderer(value, oldValue) {
+        return resolveCallback(value, this).fn
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Neo.button.Base} data.column
+     * @param {String} data.dataField
+     * @param {Number} data.index
+     * @param {Object} data.record
+     * @param {Neo.table.Container} data.tableContainer
+     * @param {Number|String} data.value
+     * @returns {*}
+     */
+    cellRenderer(data) {
+        return data.value
     }
 
     /**
@@ -461,20 +490,6 @@ class Button extends BaseButton {
         me.cls       = cls;
         me._isSorted = null
     }
-
-    /**
-     * @param {Object} data
-     * @param {Neo.button.Base} data.column
-     * @param {String} data.dataField
-     * @param {Number} data.index
-     * @param {Object} data.record
-     * @param {Neo.table.Container} data.tableContainer
-     * @param {Number|String} data.value
-     * @returns {*}
-     */
-    renderer(data) {
-        return data.value
-    }
 }
 
 export default Neo.setupClass(Button);

package/test/siesta/siesta.js

@@ -20,6 +20,7 @@ project.plan(
     'tests/ClassConfigsAndFields.mjs',
     'tests/ClassSystem.mjs',
     'tests/CollectionBase.mjs',
+    'tests/ManagerInstance.mjs',
     'tests/Rectangle.mjs',
     'tests/VdomHelper.mjs',
     'tests/VdomCalendar.mjs',

package/test/siesta/tests/ManagerInstance.mjs

@@ -0,0 +1,35 @@
+import Neo             from '../../../src/Neo.mjs';
+import * as core       from '../../../src/core/_export.mjs';
+import InstanceManager from '../../../src/manager/Instance.mjs';
+
+let startCount;
+
+StartTest(t => {
+    t.it('Module imports', t => {
+        t.ok(Neo,             'Neo is imported as a JS module');
+        t.ok(InstanceManager, 'InstanceManager is imported as a JS module');
+    });
+
+    t.it('Adding & removing items', t => {
+        startCount = InstanceManager.getCount();
+
+        t.diag("Create 3 Neo instances");
+
+        const
+            item1 = Neo.create('Neo.core.Base'),
+            item2 = Neo.create('Neo.core.Base'),
+            item3 = Neo.create('Neo.core.Base');
+
+        t.is(InstanceManager.getCount() - startCount, 3, '3 instances got added');
+
+        t.is(InstanceManager.findFirst(item2), item2, 'Found item via reference');
+
+        t.is(InstanceManager.findFirst({id: item3.id}), item3, 'Found item via id');
+
+        item1.destroy();
+        item2.destroy();
+        item3.destroy()
+
+        t.is(InstanceManager.getCount(), startCount, '3 instances got removed');
+    });
+});

package/apps/krausest/README.md

@@ -1,3 +0,0 @@
-neo.mjs based demo implementation for:
-
-https://github.com/krausest/js-framework-benchmark

package/apps/krausest/TableCollection.mjs

@@ -1,46 +0,0 @@
-import BaseCollection from '../../src/collection/Base.mjs';
-
-function _random(max) {
-    return Math.round(Math.random()*1000)%max;
-}
-
-/**
- * @class NeoApp.TableCollection
- * @extends Neo.collection.Base
- */
-class TableCollection extends BaseCollection {
-    static config = {
-        /**
-         * @member {String} className='NeoApp.TableCollection'
-         * @protected
-         */
-        className: 'NeoApp.TableCollection',
-        /**
-         * @member {Number} idCounter=1
-         */
-        idCounter: 1
-    }
-
-    /**
-     * @param {Number} count
-     * @returns {Object[]}
-     */
-    buildData(count=1000) {
-        let adjectives = ['pretty', 'large', 'big', 'small', 'tall', 'short', 'long', 'handsome', 'plain', 'quaint', 'clean', 'elegant', 'easy', 'angry', 'crazy', 'helpful', 'mushy', 'odd', 'unsightly', 'adorable', 'important', 'inexpensive', 'cheap', 'expensive', 'fancy'],
-            colours    = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange'],
-            nouns      = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza', 'mouse', 'keyboard'],
-            data       = [],
-            i          = 0;
-
-        for (; i < count; i++) {
-            data.push({
-                id   : this.idCounter++,
-                label: adjectives[_random(adjectives.length)] + ' ' + colours[_random(colours.length)] + ' ' + nouns[_random(nouns.length)]
-            });
-        }
-
-        return data;
-    }
-}
-
-export default Neo.setupClass(TableCollection);;

package/apps/krausest/app.mjs

@@ -1,8 +0,0 @@
-import MainComponent from './view/MainComponent.mjs';
-
-export const onStart = () => Neo.app({
-    appPath : 'apps/neoapp/',
-    mainView: MainComponent,
-    name    : 'NeoApp',
-    parentId: 'main'
-});

package/apps/krausest/css/currentStyle.css

@@ -1,2 +0,0 @@
-@import url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");
-@import url("./main.css");

package/apps/krausest/css/main.css

@@ -1,26 +0,0 @@
-body {
-    padding: 10px 0 0 0;
-    margin: 0;
-    overflow-y: scroll;
-}
-#duration {
-    padding-top: 0px;
-}
-.jumbotron {
-    padding-top:10px;
-    padding-bottom:10px;
-}
-.test-data a {
-    display: block;
-}
-.preloadicon {
-    position: absolute;
-    top:-20px;
-    left:-20px;
-}
-.col-sm-6.smallpad {
-    padding: 5px;
-}
-.jumbotron .row h1 {
-    font-size: 40px;
-}

package/apps/krausest/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8"/>
-    <title>neo.mjs-"keyed"</title>
-    <link href="./css/currentStyle.css" rel="stylesheet"/>
-</head>
-<body>
-    <div id="main"></div>
-    <script src="../../src/MicroLoader.mjs" type="module"></script>
-</body>
-</html>

package/apps/krausest/neo-config.json

@@ -1,10 +0,0 @@
-{
-    "appPath": "apps/krausest/app.mjs",
-    "basePath": "../../",
-    "environment": "development",
-    "mainPath": "./Main.mjs",
-    "mainThreadAddons": ["CloneNode"],
-    "themes": [],
-    "useFontAwesome": false,
-    "useTouchEvents": false
-}

package/apps/krausest/view/MainComponent.mjs

@@ -1,122 +0,0 @@
-import Base                    from '../../../src/component/Base.mjs';
-import MainComponentController from  './MainComponentController.mjs';
-import TableComponent          from  './TableComponent.mjs';
-import VdomUtil                from '../../../src/util/VDom.mjs';
-
-/**
- * @class NeoApp.view.MainComponent
- * @extends Neo.component.Base
- */
-class MainComponent extends Base {
-    static config = {
-        /**
-         * @member {String} className='NeoApp.view.MainComponent'
-         * @protected
-         */
-        className: 'NeoApp.view.MainComponent',
-        /**
-         * True automatically mounts a component after being rendered.
-         * @member {Boolean} autoMount=true
-         */
-        autoMount: true,
-        /**
-         * @member {String[]} baseCls=['container']
-         */
-        baseCls: ['container'],
-        /**
-         * @member {Neo.controller.Component} controller=MainComponentController
-         */
-        controller: MainComponentController,
-        /**
-         * @member {Object[]} domListeners
-         * @protected
-         */
-        domListeners: [{
-            click   : 'onButtonClick',
-            delegate: '.btn'
-        }],
-        /**
-         * @member {NeoApp.view.TableComponent|null} table=null
-         */
-        table: null,
-        /**
-         * @member {Object} _vdom
-         */
-        _vdom:
-        {cls: ['container'], cn: [
-            {cls: ['jumbotron'], cn: [
-                {cls: ['row'], cn: [
-                    {cls: ['col-md-6'], cn: [
-                        {cls: ['row'], cn: [
-                            {tag: 'h1', html: 'neo.mjs'}
-                        ]}
-                    ]},
-                    {cls: ['col-md-6'], cn: [
-                        {cls: ['row'], flag: 'row', cn: []}
-                    ]}
-                ]}
-            ]},
-            {tag: 'span', cls: ['preloadicon', 'glyphicon', 'glyphicon-remove'], 'aria-hidden': true}
-        ]}
-    }
-
-    /**
-     * @param {Object} config
-     */
-    construct(config) {
-        super.construct(config);
-
-        this.createColumns(); // silent vdom update
-        this.createTable();
-    }
-
-    /**
-     *
-     */
-    createColumns() {
-        let me   = this,
-            vdom = me.vdom,
-            row  = VdomUtil.getByFlag(vdom, 'row'),
-            i    = 0,
-            item,
-
-            map = [
-                {id: 'run',      html: 'Create 1,000 rows'},
-                {id: 'runlots',  html: 'Create 10,000 rows'},
-                {id: 'add',      html: 'Append 1,000 rows'},
-                {id: 'update',   html: 'Update every 10th row'},
-                {id: 'clear',    html: 'Clear'},
-                {id: 'swaprows', html: 'Swap Rows'}
-            ];
-
-        for (; i < 6; i++) {
-            item = map[i];
-
-            row.cn.push(
-                {cls: ['col-sm-6 smallpad'], cn: [
-                    {tag: 'button', type: 'button', cls: ['btn', 'btn-primary', 'btn-block'], id: item.id, html: item.html}
-                ]}
-            );
-        }
-    }
-
-    /**
-     *
-     */
-    createTable() {
-        let me = this;
-
-        me.table = Neo.create({
-            module   : TableComponent,
-            appName  : me.appName,
-            parentId : me.id,
-            reference: 'table'
-        });
-
-        me.vdom.cn.splice(1, 0, me.table.vdom);
-
-        me.update();
-    }
-}
-
-export default Neo.setupClass(MainComponent);