neo.mjs 6.13.0 → 6.14.0

package/resources/data/deck/learnneo/pages/TodoList.md

@@ -0,0 +1,241 @@
+## HTML Style
+
+In case you did not work with neo yet, but come from a more HTML driven ecosystem,
+you could achieve the task in a similar way.
+
+<pre data-neo>
+import Component from '../../../../src/component/Base.mjs';
+import NeoArray  from '../../../../src/util/Array.mjs';
+import VdomUtil  from '../../../../src/util/VDom.mjs';
+
+class MainComponent extends Component {
+    static config = {
+        className: 'Neo.examples.todoList.version1.MainComponent',
+        autoMount: true,
+        height   : 200,
+        margin   : 10,
+        maxWidth : 300,
+        style    : {border: '1px solid #000', margin: '20px', overflow: 'scroll'},
+        width    : 300,
+
+        items: [
+            {id: 1, done: true,  text: 'Todo Item 1'},
+            {id: 2, done: false, text: 'Todo Item 2'},
+            {id: 3, done: false, text: 'Todo Item 3'}
+        ],
+
+        inputValue: null,
+
+        vdom:
+        {cn: [
+            {tag: 'ol', cn: []},
+            {cn: [
+                {tag: 'input', cls: ['todo-input'], required: true, style: {marginLeft: '20px'}},
+                {tag: 'button', cls: ['todo-add-button'], html : 'Add Item', style: {marginLeft: '1em'}}
+            ]}
+        ]}
+    }
+
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.addDomListeners([
+            {click: me.onAddButtonClick,   delegate: 'todo-add-button'},
+            {click: me.onCheckIconClick,   delegate: 'todo-item'},
+            {input: me.onInputFieldChange, delegate: 'todo-input'}
+        ]);
+
+        me.createItems(me.items || [])
+    }
+
+    createItems(items) {
+        let me = this,
+            cls;
+
+        items.forEach(item => {
+            cls = ['todo-item'];
+
+            if (item.done) {
+                cls.push('fa', 'fa-check')
+            } else {
+                cls.push('far', 'fa-square')
+            }
+
+            me.vdom.cn[0].cn.push({
+                tag: 'li',
+                cn : [
+                    {tag: 'span', cls, style: {cursor: 'pointer', width: '20px'}},
+                    {vtype: 'text', html: item.text}
+                ]
+            });
+        });
+
+        me.update()
+    }
+
+    onAddButtonClick() {
+        let me = this;
+
+        if (me.inputValue) {
+            me.createItems([{
+                id  : null,
+                done: false,
+                text: me.inputValue
+            }])
+        }
+    }
+
+    onCheckIconClick(data) {
+        let me     = this,
+            cls    = ['far', 'fa-square'],
+            oldCls = ['fa',  'fa-check'],
+            node   = VdomUtil.findVdomChild(me.vdom, data.path[0].id).vdom;
+
+        if (data.path[0].cls.includes('fa-square')) {
+            cls    = ['fa',  'fa-check'];
+            oldCls = ['far', 'fa-square']
+        }
+
+        NeoArray.remove(node.cls, oldCls);
+        NeoArray.add(node.cls, cls);
+
+        me.update()
+    }
+
+    onInputFieldChange(data) {
+        this.inputValue = data.value
+    }
+}
+
+Neo.setupClass(MainComponent);
+</pre>
+
+## Neo Style
+
+content
+
+<pre data-neo>
+import Container from '../../../../src/container/Base.mjs';
+import List      from '../../../../src/list/Base.mjs';
+import Model     from '../../../../src/data/Model.mjs';
+import Store     from '../../../../src/data/Store.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
+import Toolbar   from '../../../../src/toolbar/Base.mjs';
+
+class TodoListModel extends Model {
+    static config = {
+        className  : 'Neo.examples.todoList.version2.MainModel',
+        keyProperty: 'id',
+
+        fields: [{
+            name: 'id',
+            type: 'Int'
+        }, {
+            name: 'done',
+            type: 'Boolean'
+        }, {
+            name: 'text',
+            type: 'String'
+        }]
+    }
+}
+
+Neo.setupClass(TodoListModel);
+
+
+class TodoListStore extends Store {
+    static config = {
+        className  : 'Neo.examples.todoList.version2.TodoListStore',
+        keyProperty: 'id',
+        model      : TodoListModel,
+
+        data: [
+            {id: 1, done: true,  text: 'Todo Item 1'},
+            {id: 2, done: false, text: 'Todo Item 2'},
+            {id: 3, done: false, text: 'Todo Item 3'}
+        ],
+
+        sorters: [{
+            property : 'done',
+            direction: 'DESC'
+        }, {
+            property : 'id',
+            direction: 'ASC'
+        }]
+    }
+}
+
+Neo.setupClass(TodoListStore);
+
+
+class MainContainer extends Container {
+    static config = {
+        className: 'Neo.examples.todoList.version2.MainContainer',
+        style    : {padding: '20px'},
+
+        // custom configs
+        idCounter: 3,
+        store    : null
+    }
+
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.store = Neo.create({
+            module: TodoListStore
+        });
+
+        me.items = [{
+            module       : List,
+            displayField : 'text',
+            flex         : 1,
+            store        : me.store,
+            style        : {padding: '5px'},
+            useCheckBoxes: true
+        }, {
+            module: Toolbar,
+            flex  : 'none',
+            dock  : 'bottom',
+            items : [{
+                module       : TextField,
+                flex         : 1,
+                labelPosition: 'inline',
+                labelText    : 'Item Text',
+                reference    : 'addItemField'
+            }, '->', {
+                handler     : me.onAddButtonClick,
+                handlerScope: me,
+                scope       : me,
+                style       : {height: '27px', marginLeft: '1em'},
+                text        : 'Add Item'
+            }]
+        }];
+    }
+
+    onAddButtonClick() {
+        let me    = this,
+            field = me.down({reference: 'addItemField'}),
+            data;
+
+        if (field.value) {
+            me.idCounter++;
+
+            data = me.store.data;
+
+            data.push({
+                id  : me.idCounter,
+                done: false,
+                text: field.value
+            });
+
+            me.store.data = data
+        }
+    }
+}
+
+Neo.setupClass(MainContainer);
+</pre>

package/resources/data/deck/learnneo/pages/WhyNeo-Quick.md

@@ -1,21 +1,16 @@
 Neo.mjs applications can be written quickly thanks to its syntax, features, and debugging convenience.
 
+## Property lifecycle hooks
+Neo.mjs classes let you specify properties in a way that allows code to detect "before" and "after" changes,
+which makes it easy to handle value validation and transformation, and react to changes.
 
-<details>
-<summary><h3>Property lifecycle hooks</h3></summary>
-Neo.mjs classes let you specify properties in a way that allows code to detect "before" and "after" changes, which makes it easy to handle value validation and transformation, and react to changes.
-</details>
-
-<details>
-<summary><h3>Elegant state management</h3></summary>
+## Elegant state management
 Neo.mjs has elegant yet powerful state management features that make it easy to create shared, bindable data.
 For example, if two components are bound to the same property, a change to the property will automatically be
 applied to both components.
-</details>
 
-<details>
-<summary><h3>Simple and powerful debugging</h3></summary>
+## Simple and powerful debugging
 Debugging is easy because Neo.mjs uses standard JavaScript, the Neo.mjs class config system, and built-in 
 debugging tools. For example, while developing an application you can click on a component, and in the debugger
 easily inspect the component and update its properties &mdash; these updates are immediately reflected in the running application.
-</details>
+

package/resources/data/deck/learnneo/tree.json

@@ -18,10 +18,12 @@
     {"name": "Tutorials",                                   "parentId": null,                "isLeaf": false, "expanded": false, "id": "Tutorials"},
         {"name": "Rock Scissors Paper",                     "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "RSP", "hidden":  true},
         {"name": "Earthquakes",                             "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "Earthquakes"},
+        {"name": "Todo List",                               "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "TodoList"},
     {"name": "Guides",                                      "parentId": null,                "isLeaf": false, "expanded": false, "id": "InDepth"},
         {"name": "Config",                                  "parentId": "InDepth",           "isLeaf": false, "id": "Config"},
         {"name": "Instance Lifecycle",                      "parentId": "InDepth",           "isLeaf": false, "id": "InstanceLifecycle"},
         {"name": "User Input (Forms)",                      "parentId": "InDepth",           "isLeaf": false, "id": "Forms"},
+        {"name": "Components and Containers",               "parentId": "InDepth",           "isLeaf": true,  "id": "ComponentsAndContainers"},
         {"name": "Layouts",                                 "parentId": "InDepth",           "isLeaf": false, "id": "Layouts"},
         {"name": "Custom Components",                       "parentId": "InDepth",           "isLeaf": false, "id": "CustomComponents"},
         {"name": "Events",                                  "parentId": "InDepth",           "isLeaf": true,  "expanded": false, "id": "GuideEvents"},

package/resources/scss/src/apps/portal/home/ContentBox.scss

@@ -0,0 +1,26 @@
+.portal-content-box {
+    border         : 1px solid darkgray;
+    cursor         : pointer;
+    color          : #000;
+    height         : 200px;
+    margin-top     : 2em;
+    padding        : 0 1em 1em 1em;
+    text-decoration: none;
+    width          : 300px;
+
+    &:hover {
+        background-color: lightblue;
+    }
+
+    &:not(:last-child) {
+        margin-right: 3em;
+    }
+
+    .portal-content-box-content {
+
+    }
+
+    .portal-content-box-header {
+
+    }
+}

package/resources/scss/src/apps/portal/home/MainContainer.scss

@@ -1,15 +1,11 @@
 .newwebsite-viewport {
-    align-items    : center !important;
-    display        : flex !important;
-    gap            : 48px;
-    justify-content: center !important;
-    padding        : 10% 15% 15% 15%;
+    gap       : 48px;
+    overflow-y: scroll;
+    padding   : 5%;
 }
 
 .button-group {
-    display       : flex !important;
-    flex-direction: row-reverse !important;
-    gap           : 8px !important;
+    gap: 8px !important;
 }
 
 .neo-h1 {
@@ -26,7 +22,3 @@
     height             : 150px;
     width              : 100%;
 }
-
-.get-started-button {
-    cursor: not-allowed !important;
-}

package/resources/scss/src/apps/portal/learn/MainContainer.scss

@@ -4,13 +4,6 @@
     .main-content-splitter {
         margin: 0;
     }
-
-    .learn-content-container {
-        // align-items: center !important;
-        // padding: 0 3rem;
-        overflow: scroll;
-    }
-    
 }
 
 

package/resources/scss/src/apps/portal/learn/PageContainer.scss

@@ -0,0 +1,35 @@
+.learn-content-container {
+    // align-items: center !important;
+    // padding: 0 3rem;
+    overflow: scroll;
+
+    .content-bottom-toolbar {
+        gap    : 8px;
+        padding: 0 3rem;
+
+        .neo-button {
+            flex           : 1 !important;
+            height         : 75px;
+            justify-content: flex-start;
+
+            .neo-button-text, .neo-button-glyph {
+                padding-top: 16px;
+            }
+        }
+
+        .content-bottom-toolbar-previous:before {
+            content         : 'Previous Page';
+            font-family     : var(--core-fontfamily-sans);
+            position        : absolute;
+            top             : var(--cmp-button-spacinghorizontal);
+            left            : var(--cmp-button-spacinghorizontal);
+        }
+        .content-bottom-toolbar-next:before {
+            content         : 'Next Page';
+            font-family     : var(--core-fontfamily-sans);
+            position        : absolute;
+            top             : var(--cmp-button-spacinghorizontal);
+            right            : var(--cmp-button-spacinghorizontal);
+        }
+    }
+}

package/resources/scss/src/apps/portal/learn/PageSectionsPanel.scss

@@ -1,6 +1,14 @@
 .portal-page-sections-panel.neo-panel {
     border: none; // reset the default 1px
 
+    @media only screen and (max-width: 1200px) {
+        display: none;
+    }
+
+    .neo-list .neo-list-item {
+        white-space: normal;
+    }
+
     .neo-panel-header-toolbar {
         border       : none; // reset the default 1px
         border-bottom: 1px solid #f2f2f2;;

package/src/component/Base.mjs

@@ -933,6 +933,20 @@ class Base extends CoreBase {
         this.changeVdomRootKey('width', value)
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        let controller = this.controller;
+
+        if (controller && value) {
+            controller.windowId = value
+        }
+    }
+
     /**
      * Triggered after the wrapperCls config got changed
      * @param {String[]|null} value
@@ -1119,7 +1133,8 @@ class Base extends CoreBase {
 
         if (value) {
             return ClassSystemUtil.beforeSetInstance(value, null, {
-                component: this
+                component: this,
+                windowId : this.windowId
             })
         }
 

package/src/controller/Application.mjs

@@ -20,6 +20,11 @@ class Application extends Base {
          * @protected
          */
         className: 'Neo.controller.Application',
+        /**
+         * @member {String} ntype='application'
+         * @protected
+         */
+        ntype: 'application',
         /**
          * @member {String|null} appThemeFolder=null
          */
@@ -50,7 +55,11 @@ class Application extends Base {
          * @member {Boolean} rendering=false
          * @protected
          */
-        rendering: false
+        rendering: false,
+        /**
+         * @member {Number|null} windowId=null
+         */
+        windowId: null
     }
 
     /**
@@ -66,6 +75,8 @@ class Application extends Base {
 
         let me = this;
 
+        me.windowId = Neo.config.windowId;
+
         Neo.apps = Neo.apps || {};
 
         Neo.apps[me.name] = me;

package/src/controller/Base.mjs

@@ -95,12 +95,18 @@ class Base extends CoreBase {
     /**
      *
      */
-    onConstructed() {
-        let currentHash = HashHistory.first(),
-            defaultHash = this.defaultHash;
+    async onConstructed() {
+        let me          = this,
+            currentHash = HashHistory.first(),
+            defaultHash = me.defaultHash;
+
+        // get outside the construction chain => a related cmp & vm has to be constructed too
+        await me.timeout(1);
 
         if (currentHash) {
-            this.onHashChange(currentHash, null)
+            if (currentHash.windowId === me.windowId) {
+                await me.onHashChange(currentHash, null)
+            }
         } else {
             /*
              * worker.App: onLoadApplication() will push config.hash into the HashHistory with a 5ms delay.
@@ -117,6 +123,11 @@ class Base extends CoreBase {
      * @param {Object} oldValue
      */
     async onHashChange(value, oldValue) {
+        // We only want to trigger hash changes for the same browser window (SharedWorker context)
+        if (value.windowId !== this.windowId) {
+            return
+        }
+
         let me                = this,
             counter           = 0,
             hasRouteBeenFound = false,

package/src/controller/Component.mjs

@@ -30,7 +30,11 @@ class Component extends Base {
          * @member {Object} references=null
          * @protected
          */
-        references: null
+        references: null,
+        /**
+         * @member {Number|null} windowId=null
+         */
+        windowId: null
     }
 
     /**

package/src/core/Observable.mjs

@@ -29,28 +29,46 @@ class Observable extends Base {
      * @param {Object} [scope]
      * @param {String} [eventId]
      * @param {Object} [data]
-     * @param {Number} [order]
+     * @param {Number|String} [order]
      * @returns {String|null} eventId null in case an object gets passed as the name (multiple ids)
      */
     addListener(name, opts, scope, eventId, data, order) {
         let me         = this,
+            delay      = 0,
             nameObject = typeof name === 'object',
+            once       = false,
             listener, existing, eventConfig;
 
         if (nameObject) {
+            if (name.hasOwnProperty('delay')) {
+                delay = name.delay;
+                delete name.delay
+            }
+
+            if (name.hasOwnProperty('once')) {
+                once = name.once;
+                delete name.once
+            }
+
             if (name.hasOwnProperty('scope')) {
                 scope = name.scope;
-                delete name.scope;
+                delete name.scope
             }
 
             Object.entries(name).forEach(([key, value]) => {
-                me.addListener(key, value, scope);
-            });
+                if (Neo.isObject(value)) {
+                    me.addListener(key, {delay, once, scope, ...value})
+                } else {
+                    me.addListener(key, {delay, fn: value, once, scope})
+                }
+            })
         } else if (typeof opts === 'object') {
-            scope    = scope || opts.scope;
-            listener = opts.fn;
-            order    = order || opts.order;
+            delay    = delay   || opts.delay;
             eventId  = eventId || opts.eventId;
+            listener = opts.fn;
+            once     = once    || opts.once;
+            order    = order   || opts.order;
+            scope    = scope   || opts.scope;
         } else if (typeof opts === 'function') {
             listener = opts;
         } else if (typeof opts === 'string') {
@@ -61,10 +79,12 @@ class Observable extends Base {
 
         if (!nameObject) {
             eventConfig = {
-                fn: listener,
-                scope,
                 data,
-                id: eventId || Neo.getId('event')
+                delay,
+                fn: listener,
+                id: eventId || Neo.getId('event'),
+                once,
+                scope
             };
 
             if (existing = me.listeners?.[name]) {
@@ -85,10 +105,10 @@ class Observable extends Base {
                 me.listeners[name] = [eventConfig];
             }
 
-            return eventConfig.id;
+            return eventConfig.id
         }
 
-        return null;
+        return null
     }
 
     /**
@@ -101,11 +121,22 @@ class Observable extends Base {
     callback(fn, scope=this, args) {
         if (fn) {
             const handler = this.resolveCallback(fn, scope);
-
-            handler.fn.apply(handler.scope, args);
+            handler.fn.apply(handler.scope, args)
         }
     }
 
+    /**
+     * Internal helper method for events which use the delay option
+     * @param {Object} cb
+     * @param {Array} args
+     * @param {Number} delay
+     */
+    delayedCallback(cb, args, delay) {
+        setTimeout(() => {
+            cb.fn.apply(cb.scope, args)
+        }, delay)
+    }
+
     /**
      * @param name
      */
@@ -113,29 +144,38 @@ class Observable extends Base {
         let me        = this,
             args      = [].slice.call(arguments, 1),
             listeners = me.listeners,
-            handler, handlers, i, len;
+            delay, handler, handlers, i, len;
 
         if (listeners && listeners[name]) {
             handlers = [...listeners[name]];
-            len    = handlers.length;
+            len      = handlers.length;
 
             for (i = 0; i < len; i++) {
                 handler = handlers[i];
+                delay   = handler.delay;
 
-                // Resolve function name on the scope (oe me), or, if it starts with 'up.'
+                // 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);
 
-                // remove the listener, in case the scope no longer exists
+                // remove the listener if the scope no longer exists
                 if (cb.scope && !cb.scope.id) {
-                    listeners[name].splice(i, 1);
+                    listeners[name].splice(i, 1)
                 } else {
                     if (!me.suspendEvents) {
                         // Object event format. Inject firer reference in as 'source'
-                        if (args.length === 1 && typeof(args[0]) === 'object') {
-                            args[0].source = me.id;
+                        if (args.length === 1 && Neo.isObject(args[0])) {
+                            args[0].source = me.id
+                        }
+
+                        // remove the listener if it has the once flag
+                        handler.once && listeners[name].splice(i, 1)
+
+                        if (Neo.isNumber(delay) && delay > 0) {
+                            me.delayedCallback(cb, handler.data ? args.concat(handler.data) : args, delay)
+                        } else {
+                            cb.fn.apply(cb.scope, handler.data ? args.concat(handler.data) : args)
                         }
-                        cb.fn.apply(cb.scope, handler.data ? args.concat(handler.data) : args);
                     }
                 }
             }