neo.mjs 6.13.0 → 6.14.0

package/apps/covid/neo-config.json

@@ -3,6 +3,6 @@
     "basePath"        : "../../",
     "environment"     : "development",
     "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["AmCharts", "DragDrop", "MapboxGL", "Stylesheet"],
+    "mainThreadAddons": ["AmCharts", "DragDrop", "MapboxGL", "Navigator", "Stylesheet"],
     "themes"          : ["neo-theme-dark", "neo-theme-light"]
 }

package/apps/portal/view/ViewportController.mjs

@@ -19,10 +19,11 @@ class ViewportController extends Controller {
          * @member {Object} routes
          */
         routes: {
-            '/blog' : 'onBlogRoute',
-            '/docs' : 'onDocsRoute',
-            '/home' : 'onHomeRoute',
-            '/learn': 'onLearnRoute'
+            '/blog'          : 'onBlogRoute',
+            '/docs'          : 'onDocsRoute',
+            '/home'          : 'onHomeRoute',
+            '/learn'         : 'onLearnRoute',
+            '/learn/{itemId}': 'onLearnRoute'
         }
     }
 

package/apps/portal/view/home/ContentBox.mjs

@@ -0,0 +1,80 @@
+import Base from '../../../../src/component/Base.mjs';
+
+/**
+ * @class Portal.view.home.ContentBox
+ * @extends Neo.component.Base
+ */
+class ContentBox extends Base {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.home.ContentBox'
+         * @protected
+         */
+        className: 'Portal.view.home.ContentBox',
+        /**
+         * @member {String[]} baseCls=['portal-content-box']
+         * @protected
+         */
+        baseCls: ['portal-content-box'],
+        /**
+         * @member {String[]|null} content_=null
+         */
+        content_: null,
+        /**
+         * @member {String|null} header_=null
+         */
+        header_: null,
+        /**
+         * @member {String|null} route_=null
+         */
+        route_: null,
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {tag: 'a', cn: [
+            {tag: 'h3', cls: ['portal-content-box-headline']},
+            {tag: 'ul', cls: ['portal-content-box-content'], cn: []}
+        ]}
+    }
+
+    /**
+     * Triggered after the content config got changed
+     * @param {String[]|null} value
+     * @param {String[]|null} oldValue
+     * @protected
+     */
+    afterSetContent(value, oldValue) {
+        value?.forEach(item => {
+            this.vdom.cn[1].cn.push({tag: 'li', html: item})
+        })
+
+        this.update()
+    }
+
+    /**
+     * Triggered after the header config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetHeader(value, oldValue) {
+        this.vdom.cn[0].html = value;
+        this.update()
+    }
+
+    /**
+     * Triggered after the route config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetRoute(value, oldValue) {
+        this.vdom.href = value;
+        this.update()
+    }
+}
+
+Neo.setupClass(ContentBox);
+
+export default ContentBox;

package/apps/portal/view/home/MainContainer.mjs

@@ -1,5 +1,6 @@
-import Button    from '../../../../src/button/Base.mjs';
-import Container from '../../../../src/container/Base.mjs';
+import Button     from '../../../../src/button/Base.mjs';
+import Container  from '../../../../src/container/Base.mjs';
+import ContentBox from './ContentBox.mjs';
 
 /**
  * @class Portal.view.home.MainContainer
@@ -16,13 +17,16 @@ class Viewport extends Container {
          * @member {String[]} cls=['newwebsite-viewport']
          */
         cls: ['newwebsite-viewport'],
+        /**
+         * @member {Object} layout={ntype:'vbox',align:'center',pack:'center'}
+         */
+        layout: {ntype: 'vbox', align: 'center', pack: 'center'},
         /**
          * @member {Object[]} items
          */
         items: [{
-            module: Container,
-            cls   : ['vector'],
-            flex  : 'none'
+            cls  : ['vector'],
+            flex : 'none'
         }, {
             cls : 'neo-h1',
             flex: 'none',
@@ -31,23 +35,55 @@ class Viewport extends Container {
             module: Container,
             cls   : ['button-group'],
             flex  : 'none',
+            layout: {ntype: 'hbox'},
 
             items: [{
-                module : Button,
-                cls    : 'get-started-button',
-                text   : 'Get started',
-                flex   : 'none',
-                tooltip: {
-                    text     : 'Coming soon',
-                    showDelay: 0,
-                    hideDelay: 0
-                }
-            }, {
                 module: Button,
                 flex  : 'none',
                 text  : 'View on GitHub',
                 ui    : 'secondary',
                 url   : 'https://github.com/neomjs/neo'
+            }, {
+                module: Button,
+                flex  : 'none',
+                text  : 'Get started',
+                route : '/learn'
+            }]
+        }, {
+            module: Container,
+            flex  : '1 0 auto',
+            layout: {ntype: 'hbox', align: 'stretch'},
+
+            items: [{
+                module: ContentBox,
+                header: 'Quick Application Development',
+                route : '#/learn/WhyNeo-Quick',
+
+                content: [
+                    'Property lifecycle hooks',
+                    'Elegant state management',
+                    'Simple and powerful debugging'
+                ]
+            }, {
+                module: ContentBox,
+                header: 'Extreme Speed',
+                route : '#/learn/WhyNeo-Speed',
+
+                content: [
+                    'Item 1',
+                    'Item 2',
+                    'Item 3'
+                ]
+            }, {
+                module: ContentBox,
+                header: 'Multi Window Apps',
+                route : '#/learn/WhyNeo-Multi-Window',
+
+                content: [
+                    'Item 1',
+                    'Item 2',
+                    'Item 3'
+                ]
             }]
         }]
     }

package/apps/portal/view/learn/ContentTreeList.mjs

@@ -51,8 +51,11 @@ class ContentTreeList extends TreeList {
      * @param {Object} value
      * @param {Object} oldValue
      */
-    afterSetCurrentPageRecord(value, oldValue) {
-        value && this.selectionModel.select(value)
+    async afterSetCurrentPageRecord(value, oldValue) {
+        if (value) {
+            await this.timeout(20);
+            this.selectionModel.select(value)
+        }
     }
 
     /**
@@ -77,7 +80,11 @@ class ContentTreeList extends TreeList {
      */
     onLeafItemClick(record) {
         super.onLeafItemClick(record);
-        this.getModel().data.currentPageRecord = record
+
+        Neo.Main.setRoute({
+            value   : `/learn/${record.id}`,
+            windowId: this.windowId
+        })
     }
 }
 

package/apps/portal/view/learn/MainContainerController.mjs

@@ -10,7 +10,13 @@ class MainContainerController extends Controller {
          * @member {String} className='Portal.view.learn.MainContainerController'
          * @protected
          */
-        className: 'Portal.view.learn.MainContainerController'
+        className: 'Portal.view.learn.MainContainerController',
+        /**
+         * @member {Object} routes
+         */
+        routes: {
+            '/learn/{itemId}': 'onRouteLearnItem'
+        }
     }
 
     /**
@@ -48,6 +54,16 @@ class MainContainerController extends Controller {
         return searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {}
     }
 
+    /**
+     * @param {String} learnItem
+     */
+    navigateTo(learnItem) {
+        Neo.Main.setRoute({
+            value   : `/learn/${learnItem}`,
+            windowId: this.component.windowId
+        })
+    }
+
     /**
      * @param {Object} data
      * @param {String} data.appName
@@ -177,16 +193,32 @@ class MainContainerController extends Controller {
      * @param {Object} data
      */
     onNextPageButtonClick(data) {
-        let model = this.getModel();
-        model.setData('currentPageRecord', model.getData('nextPageRecord'))
+        this.navigateTo(this.getModel().getData('nextPageRecord').id)
     }
 
     /**
      * @param {Object} data
      */
     onPreviousPageButtonClick(data) {
-        let model = this.getModel();
-        model.setData('currentPageRecord', model.getData('previousPageRecord'))
+        this.navigateTo(this.getModel().getData('previousPageRecord').id)
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onRouteLearnItem(data) {
+        let model = this.getModel(),
+            store = model.getStore('contentTree');
+
+        if (store.getCount() > 0) {
+            model.data.currentPageRecord = store.get(data.itemId)
+        } else {
+            store.on({
+                load : () => {model.data.currentPageRecord = store.get(data.itemId)},
+                delay: 10,
+                once : true
+            })
+        }
     }
 }
 

package/apps/portal/view/learn/MainContainerModel.mjs

@@ -40,14 +40,19 @@ class MainContainerModel extends Component {
             deck: null,
             /**
              * The record which gets shown as the content page
-             * @member {Object} data.currentRecord=null
+             * @member {Object} data.nextPageRecord=null
              */
             nextPageRecord: null,
             /**
              * The record which gets shown as the content page
-             * @member {Object} data.currentRecord=null
+             * @member {Object} data.previousPageRecord=null
              */
-            previousPageRecord: null
+            previousPageRecord: null,
+            /**
+             * Merging the direct parent text
+             * @member {String|null} data.previousPageText=null
+             */
+            previousPageText: null
         },
         /**
          * @member {Object} stores
@@ -62,6 +67,22 @@ class MainContainerModel extends Component {
         }
     }
 
+    /**
+     * Combines the record parent node name (if available) with the record name
+     * @param {Object} record
+     * @param {Neo.data.Store} store
+     * @returns {String|null}
+     */
+    getRecordTreeName(record, store) {
+        let parentText = record.name;
+
+        if (record.parentId !== null) {
+            parentText = store.get(record.parentId).name + ': ' + parentText
+        }
+
+        return parentText
+    }
+
     /**
      * @param {String} key
      * @param {*} value
@@ -79,32 +100,36 @@ class MainContainerModel extends Component {
                     store              = me.getStore('contentTree'),
                     index              = store.indexOf(value),
                     nextPageRecord     = null,
+                    nextPageText       = null,
                     previousPageRecord = null,
+                    previousPageText   = null,
                     i, record;
 
                 // the logic assumes that the tree store is sorted
                 for (i=index-1; i >= 0; i--) {
                     record = store.getAt(i);
 
-                    if (record.isLeaf) {
+                    if (record.isLeaf && !me.recordIsHidden(record, store)) {
                         previousPageRecord = record;
+                        previousPageText   = me.getRecordTreeName(record, store);
                         break
                     }
                 }
 
-                me.setData({previousPageRecord});
+                me.setData({previousPageText, previousPageRecord});
 
                 // the logic assumes that the tree store is sorted
                 for (i=index+1; i < countPages; i++) {
                     record = store.getAt(i);
 
-                    if (record.isLeaf) {
+                    if (record.isLeaf && !me.recordIsHidden(record, store)) {
                         nextPageRecord = record;
+                        nextPageText   = me.getRecordTreeName(record, store);
                         break
                     }
                 }
 
-                me.setData({nextPageRecord});
+                me.setData({nextPageText, nextPageRecord});
 
                 break
             }
@@ -118,6 +143,25 @@ class MainContainerModel extends Component {
             }
         }
     }
+
+    /**
+     * We need to check the parent-node chain inside the tree.
+     * => Any hidden parent-node results in a hidden record.
+     * @param {Object} record
+     * @param {Neo.data.Store} store
+     * @returns {Boolean}
+     */
+    recordIsHidden(record, store) {
+        if (record.hidden) {
+            return true
+        }
+
+        if (record.parentId !== null) {
+            return this.recordIsHidden(store.get(record.parentId), store)
+        }
+
+        return false
+    }
 }
 
 Neo.setupClass(MainContainerModel);

package/apps/portal/view/learn/PageContainer.mjs

@@ -38,14 +38,22 @@ class PageContainer extends Container {
         }, {
             module: Toolbar,
             flex  : 'none',
+            cls   : 'content-bottom-toolbar',
             items : [{
+                cls      : ['content-bottom-toolbar-previous'],
                 handler  : 'onPreviousPageButtonClick',
                 hidden   : true,
-                reference: 'prev-page-button'
-            }, '->', {
-                handler  : 'onNextPageButtonClick',
-                hidden   : true,
-                reference: 'next-page-button'
+                iconCls  : 'fa fa-chevron-left',
+                reference: 'prev-page-button',
+                ui       : 'secondary'
+            }, {
+                cls         : ['content-bottom-toolbar-next'],
+                handler     : 'onNextPageButtonClick',
+                hidden      : true,
+                iconCls     : 'fa fa-chevron-right',
+                iconPosition: 'right',
+                reference   : 'next-page-button',
+                ui          : 'secondary'
             }]
         }],
         /**
@@ -81,10 +89,12 @@ class PageContainer extends Container {
      */
     afterSetNextPageRecord(value, oldValue) {
         if (oldValue !== undefined) {
+            let me = this;
+
             if (value) {
-                this.nextPageButton.set({hidden: false, text: value.name})
+                me.nextPageButton.set({hidden: false, text: me.getModel().getData('nextPageText')})
             } else {
-                this.nextPageButton.hidden = true
+                me.nextPageButton.hidden = true
             }
         }
     }
@@ -96,10 +106,12 @@ class PageContainer extends Container {
      */
     afterSetPreviousPageRecord(value, oldValue) {
         if (oldValue !== undefined) {
+            let me = this;
+
             if (value) {
-                this.prevPageButton.set({hidden: false, text: value.name})
+                me.prevPageButton.set({hidden: false, text: me.getModel().getData('previousPageText')})
             } else {
-                this.prevPageButton.hidden = true
+                me.prevPageButton.hidden = true
             }
         }
     }

package/apps/sharedcovid/neo-config.json

@@ -3,7 +3,7 @@
     "basePath"        : "../../",
     "environment"     : "development",
     "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["AmCharts", "DragDrop", "MapboxGL", "Stylesheet"],
+    "mainThreadAddons": ["AmCharts", "DragDrop", "MapboxGL", "Navigator", "Stylesheet"],
     "themes"          : ["neo-theme-dark", "neo-theme-light"],
     "useSharedWorkers": true
 }

package/examples/form/field/select/MainContainer.mjs

@@ -165,7 +165,7 @@ class MainContainer extends ConfigurationViewport {
             labelText    : 'US States',
             labelWidth   : 80,
             store        : MainStore,
-            value        : 'Arizona', // or 'AZ'
+            value        : 'AZ',
             valueField   : 'abbreviation',
             width        : '50%',
             pickerConfig : {

package/package.json

@@ -1,7 +1,7 @@
 
 {
     "name": "neo.mjs",
-    "version": "6.13.0",
+    "version": "6.14.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -53,13 +53,13 @@
         "envinfo": "^7.11.1",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.15",
+        "inquirer": "^9.2.16",
         "marked": "^12.0.1",
         "monaco-editor": "^0.47.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.35",
-        "sass": "^1.71.1",
+        "sass": "^1.72.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.3",
         "webpack": "^5.90.3",

package/resources/data/deck/learnneo/pages/2023-10-14T19-25-08-153Z.md

@@ -1,3 +1,5 @@
+## Introduction
+
 The purpose of this tutorial is to let you see the structure of a Neo.mjs workspace,
 and the structure of an application.
 
@@ -5,7 +7,12 @@ If you wish, you can create a workspace by following the directions in the previ
 
 <img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/learnneo/NeoWorkspace.png" style="height: 400px;">
 
-As you can see, a Neo.mjs workspace is a conventional npm package. If you run 
+As you can see, a Neo.mjs workspace is a conventional npm package. 
+
+
+## Browsing the workspace
+
+If you run 
 the script `npm run server-start` from the workspace, Neo.mjs launches a web
 server whose doc root is the workspace. 
 
@@ -14,6 +21,8 @@ server whose doc root is the workspace.
 If you drill down into the `src` directory you'll see your applications.
 The `docs` directory holds the Neo.mjs API docs.
 
+## The structure of a simple app
+
 In order to discuss the structure of an app, we'll create a simple starter 
 app vis this script, run from the workspace. The script prompts for various 
 application settings. 
@@ -29,6 +38,8 @@ These files are part of the typical structure of a Neo.mjs application. The file
 You will, however, edit the main container, and its associated "controller" and "model",
 as well as create new views classes, their controllers, and other application logic.
 
+## Some source code
+
 Now let's look at a source file. This is the contents of `MainView.mjs`.
 
 <pre data-javascript>
@@ -61,6 +72,8 @@ This view also has a "controller" and "model". We'll talk about those later, but
 a controller is where event handling and app logic goes, and a model is where you set up shared
 bindable data.
 
+## Adding a button to the view
+
 We'll go into a lot more depth about view, controllers, and models in other topics, but to let
 you see how a component is configured let's put a button in the container. 
 
@@ -103,6 +116,8 @@ some value."
 In another topic you'll learn about the Neo.mjs config system and declaratively describing views, 
 controllers, and other things.
 
+## A running example
+
 Here's a simplified running example. The `model` and `controller` are omitted, because they aren't 
 actually used in the example, and the import root path is different to reflect the location of the 
 Neo.mjs library relative to the examples.