neo.mjs 7.7.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
             })
         })
     }
@@ -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

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

package/apps/krausest/view/TableComponent.mjs

@@ -1,152 +0,0 @@
-import Base            from '../../../src/component/Base.mjs';
-import ClassSystemUtil from '../../../src/util/ClassSystem.mjs';
-import TableCollection from '../TableCollection.mjs';
-
-function _random(max) {
-    return Math.round(Math.random()*1000)%max;
-}
-
-/**
- * @class NeoApp.view.TableComponent
- * @extends Neo.component.Base
- */
-class TableComponent extends Base {
-    static config = {
-        /**
-         * @member {String} className='NeoApp.view.TableComponent'
-         * @protected
-         */
-        className: 'NeoApp.view.TableComponent',
-        /**
-         * @member {String[]} baseCls=['table','table-hover','table-striped','test-data']
-         */
-        baseCls: ['table', 'table-hover', 'table-striped', 'test-data'],
-        /**
-         * @member {NeoApp.TableCollection|null} store_=TableCollection
-         */
-        store_: TableCollection,
-        /**
-         * @member {Object} _vdom
-         */
-        _vdom:
-        {tag: 'table', cn: [
-            {tag: 'tbody', id: 'tbody', cn: []}
-        ]}
-    }
-
-    /**
-     * @param {Object} config
-     */
-    construct(config) {
-        super.construct(config);
-
-        Neo.main.addon.CloneNode.createNode({
-            id  : this.id,
-            tag : 'tr',
-            html: [
-                '<td class="col-md-1"></td>',
-                '<td class="col-md-4"><a class="lbl"></a></td>',
-                '<td class="col-md-1"><a class="remove"><span class="remove glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>',
-                '<td class="col-md-6"></td>'
-            ].join(''),
-            paths: {
-                id   : '0',
-                label: '1/0'
-            }
-        });
-    }
-
-    /**
-     *
-      */
-    add() {
-        let me    = this,
-            store = me.store,
-            items = store.buildData();
-
-        store.add(items);
-
-        Neo.main.addon.CloneNode.applyClones({
-            data    : items,
-            id      : me.id,
-            parentId: 'tbody'
-        });
-
-        // this works pretty fast as well
-        /*items.forEach(item => {
-            me.vdom.cn[0].cn.push(me.createTableRow(item));
-        });
-
-        me.update();*/
-    }
-
-    /**
-     * Triggered before the store config gets changed.
-     * @param {Object|Neo.data.Store} value
-     * @param {Object|Neo.data.Store} oldValue
-     * @returns {Neo.data.Store}
-     * @protected
-     */
-    beforeSetStore(value, oldValue) {
-        oldValue && oldValue.destroy();
-        return ClassSystemUtil.beforeSetInstance(value);
-    }
-
-    /**
-     *
-     */
-    clear() {
-        let me    = this,
-            store = me.store;
-
-        if (store.getCount() > 0) {
-            store.clear();
-            Neo.applyDeltas(me.appName, {
-                action: 'setTextContent',
-                id    : 'tbody',
-                value : ''
-            });
-        }
-    }
-
-    /**
-     * @param {Object} data
-     * @param {Number} data.id
-     * @param {String} data.label
-     * @returns {Object}
-     */
-    createTableRow(data) {
-        return {tag: 'tr', cn: [
-            {tag: 'td', cls: ['col-md-1'], html: data.id},
-            {tag: 'td', cls: ['col-md-4'], cn: [
-                {tag: 'a', cls: ['lbl'], html: data.label}
-            ]},
-            {tag: 'td', cls: ['col-md-1'], cn: [
-                {tag: 'a', cls: ['remove'], cn: [
-                    {tag: 'span', cls: ['remove', 'glyphicon', 'glyphicon-remove'], 'aria-hidden': true}
-                ]}
-            ]},
-            {tag: 'td', cls: ['col-md-6']}
-        ]};
-    }
-
-    /**
-     *
-     */
-    runlots() {
-        let me    = this,
-            store = me.store,
-            items = store.buildData(10000);
-
-        me.clear();
-        store.add(items);
-
-        Neo.main.addon.CloneNode.applyClones({
-            data    : items,
-            id      : me.id,
-            parentId: 'tbody'
-        });
-    }
-}
-
-export default Neo.setupClass(TableComponent);