neo.mjs 7.6.0 → 7.8.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
             })
         })
     }
@@ -161,19 +159,19 @@ class WindowPosition extends Base {
         switch(data.dock) {
             case 'bottom':
                 left = screenLeft;
-                top  = win.outerHeight + screenTop - 50;
+                top  = win.outerHeight + screenTop - 62;
                 break
             case 'left':
                 left = screenLeft - size;
-                top  = screenTop  + 28;
+                top  = screenTop  + 24;
                 break
             case 'right':
                 left = win.outerWidth + screenLeft;
-                top  = screenTop  + 28;
+                top  = screenTop  + 24;
                 break
             case 'top':
                 left = screenLeft;
-                top  = screenTop - size + 78;
+                top  = screenTop - size + 86;
                 break
         }
 
@@ -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/plugin/Resizable.mjs

@@ -246,7 +246,7 @@ class Resizable extends Base {
     afterSetWindowId(value, oldValue) {
         let me = this;
 
-        value && Neo.currentWorker.insertThemeFiles(value, me.__proto__)
+        value && Neo.currentWorker.insertThemeFiles(value, me.__proto__);
 
         if (me.dragZone) {
             me.dragZone.windowId = value
@@ -279,8 +279,9 @@ class Resizable extends Base {
      * @param {Object} data
      */
     onDragEnd(data) {
-        let me    = this,
-            style = me.owner.wrapperStyle; // todo: delegation target
+        let me      = this,
+            {owner} = me,
+            style   = owner.wrapperStyle; // todo: delegation target
 
         Object.assign(me, {
             boundaryContainerRect: null,
@@ -294,12 +295,14 @@ class Resizable extends Base {
             ...me.dragZone.dragProxy.wrapperStyle
         });
 
-        me.owner.wrapperStyle = style;
+        owner.wrapperStyle = style;
 
         me.removeBodyCursorCls();
 
         me.dragZone.dragEnd();
-        me.removeAllNodes()
+        me.removeAllNodes();
+
+        owner.focus(owner.id, true)
     }
 
     /**
@@ -386,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;
@@ -426,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,
@@ -438,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

@@ -277,7 +277,7 @@ class View extends Component {
             dataField = me.getCellDataField(id),
             record    = me.getRecord(id);
 
-        me.parent.fire(eventName, {id: me, data, dataField, record})
+        me.parent.fire(eventName, {data, dataField, record, view: me})
     }
 
     /**
@@ -289,7 +289,7 @@ class View extends Component {
             id     = data.currentTarget,
             record = me.getRecord(id);
 
-        me.parent.fire(eventName, {id: me, data, record})
+        me.parent.fire(eventName, {data, record, view: me})
     }
 
     /**

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);

package/apps/krausest/view/MainComponentController.mjs

@@ -1,33 +0,0 @@
-import ComponentController from '../../../src/controller/Component.mjs';
-
-/**
- * @class NeoApp.view.MainComponentController
- * @extends Neo.controller.Component
- */
-class MainComponentController extends ComponentController {
-    static config = {
-        /**
-         * @member {String} className='NeoApp.view.MainComponentController'
-         * @protected
-         */
-        className: 'NeoApp.view.MainComponentController'
-    }
-
-    /**
-     * @param {Object} data
-     */
-    onButtonClick(data) {
-        let me    = this,
-            table = me.getReference('table');
-
-        switch (data.path[0].id) {
-            case 'add'    : table.add();     break;
-            case 'clear'  : table.clear();   break;
-            case 'runlots': table.runlots(); break;
-        }
-
-        // console.log(data.path[0].id);
-    }
-}
-
-export default Neo.setupClass(MainComponentController);