neo.mjs 6.13.0 → 6.15.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.12.1'
+         * @member {String} version='6.15.0'
          */
-        version: '6.12.1'
+        version: '6.15.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/covid/view/HeaderContainer.mjs

@@ -1,6 +1,6 @@
+import ComboBox     from '../../../src/form/field/ComboBox.mjs';
 import Container    from '../../../src/container/Base.mjs';
 import CountryStore from '../store/Countries.mjs';
-import SelectField  from '../../../src/form/field/Select.mjs';
 
 /**
  * @class Covid.view.HeaderContainer
@@ -116,7 +116,7 @@ class HeaderContainer extends Container {
                 },
 
                 items : [{
-                    module       : SelectField,
+                    module       : ComboBox,
                     displayField : 'country',
                     flex         : 'none',
                     height       : 25,

package/apps/form/view/pages/Page10.mjs

@@ -1,5 +1,5 @@
+import ComboBox          from '../../../../src/form/field/ComboBox.mjs';
 import FormPageContainer from '../FormPageContainer.mjs';
-import SelectField       from '../../../../src/form/field/Select.mjs';
 
 /**
  * @class Form.view.pages.Page10
@@ -16,7 +16,7 @@ class Page10 extends FormPageContainer {
          * @member {Object[]} items
          */
         items: [{
-            module   : SelectField,
+            module   : ComboBox,
             editable : false,
             labelText: 'Page 10 Field 1',
             name     : 'page10field1',

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/apps/sharedcovid/view/HeaderContainer.mjs

@@ -1,6 +1,6 @@
+import ComboBox     from '../../../src/form/field/ComboBox.mjs';
 import Container    from '../../../src/container/Base.mjs';
 import CountryStore from '../store/Countries.mjs';
-import SelectField  from '../../../src/form/field/Select.mjs';
 
 /**
  * @class SharedCovid.view.HeaderContainer
@@ -124,7 +124,7 @@ class HeaderContainer extends Container {
                 },
 
                 items : [{
-                    module       : SelectField,
+                    module       : ComboBox,
                     displayField : 'country',
                     flex         : 'none',
                     height       : 25,

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.12.1'
+         * @member {String} version='6.15.0'
          */
-        version: '6.12.1'
+        version: '6.15.0'
     }
 
     /**

package/examples/button/base/MainContainer.mjs

@@ -1,9 +1,9 @@
 import Button                from '../../../src/button/Base.mjs';
 import CheckBox              from '../../../src/form/field/CheckBox.mjs';
+import ComboBox              from '../../../src/form/field/ComboBox.mjs';
 import ConfigurationViewport from '../../ConfigurationViewport.mjs';
 import NumberField           from '../../../src/form/field/Number.mjs';
 import Radio                 from '../../../src/form/field/Radio.mjs';
-import SelectField           from '../../../src/form/field/Select.mjs';
 import TextField             from '../../../src/form/field/Text.mjs';
 
 /**
@@ -137,7 +137,7 @@ class MainContainer extends ConfigurationViewport {
             style     : {marginTop: '10px'},
             value     : me.exampleComponent.text
         }, {
-            module        : SelectField,
+            module        : ComboBox,
             forceSelection: true,
             labelText     : 'ui',
             listeners     : {change: me.onConfigChange.bind(me, 'ui')},

package/examples/button/split/MainContainer.mjs

@@ -1,8 +1,8 @@
 import CheckBox              from '../../../src/form/field/CheckBox.mjs';
+import ComboBox              from '../../../src/form/field/ComboBox.mjs';
 import ConfigurationViewport from '../../ConfigurationViewport.mjs';
 import Radio                 from '../../../src/form/field/Radio.mjs';
 import NumberField           from '../../../src/form/field/Number.mjs';
-import SelectField           from '../../../src/form/field/Select.mjs';
 import SplitButton           from '../../../src/button/Split.mjs';
 import TextField             from '../../../src/form/field/Text.mjs';
 
@@ -89,7 +89,7 @@ class MainContainer extends ConfigurationViewport {
             style     : {marginTop: '10px'},
             value     : me.exampleComponent.text
         }, {
-            module        : SelectField,
+            module        : ComboBox,
             forceSelection: true,
             labelText     : 'ui',
             listeners     : {change: me.onConfigChange.bind(me, 'ui')},

package/examples/component/process/MainContainer.mjs

@@ -1,8 +1,8 @@
+import CheckBox              from '../../../src/form/field/CheckBox.mjs';
+import ColorField            from '../../../src/form/field/Color.mjs';
 import ConfigurationViewport from '../../ConfigurationViewport.mjs';
-import Process               from '../../../src/component/Process.mjs';
 import Container             from '../../../src/container/Base.mjs';
-import CheckBox              from "../../../src/form/field/CheckBox.mjs";
-import ColorField             from "../../../src/form/field/Color.mjs"
+import Process               from '../../../src/component/Process.mjs';
 
 /**
  * @class Neo.examples.component.process.MainContainer

package/examples/component/process/realWorldExample/MainContainer.mjs

@@ -1,15 +1,15 @@
-import Button                from "../../../../src/button/Base.mjs";
-import CheckBox              from "../../../../src/form/field/CheckBox.mjs";
+import Button                from '../../../../src/button/Base.mjs';
+import CheckBox              from '../../../../src/form/field/CheckBox.mjs';
 import ConfigurationViewport from '../../../ConfigurationViewport.mjs';
+import ComboBox              from '../../../../src/form/field/ComboBox.mjs';
 import Component             from '../../../../src/component/Base.mjs';
 import Container             from '../../../../src/container/Base.mjs';
-import DisplayField          from "../../../../src/form/field/Display.mjs"
-import Form                  from "../../../../src/form/Container.mjs"
-import NumberField           from "../../../../src/form/field/Number.mjs"
+import DisplayField          from '../../../../src/form/field/Display.mjs';
+import Form                  from '../../../../src/form/Container.mjs';
+import NumberField           from '../../../../src/form/field/Number.mjs';
 import Process               from '../../../../src/component/Process.mjs';
-import RangeField            from "../../../../src/form/field/Range.mjs"
-import SelectField           from "../../../../src/form/field/Select.mjs";
-import TextField             from "../../../../src/form/field/Text.mjs"
+import RangeField            from '../../../../src/form/field/Range.mjs';
+import TextField             from '../../../../src/form/field/Text.mjs';
 import Toast                 from '../../../../src/component/Toast.mjs';
 
 /**
@@ -188,22 +188,22 @@ class MainContainer extends ConfigurationViewport {
                     value            : 20
                 },
                 items       : [{
-                    module      : SelectField,
+                    module      : ComboBox,
                     displayField: 'name',
                     labelText   : 'Fahrstil',
                     value       : 'normal',
 
                     store: {
                         data : [
-                            {style: 'sportStyle', name: 'sport', code: 'sportCode'},
-                            {style: 'nomalStyle', name: 'normal', code: 'normalCode'},
-                            {style: 'ecoStyle', name: 'eco', code: 'ecoCode'},
+                            {style: 'sportStyle',  name: 'sport',  code: 'sportCode'},
+                            {style: 'normalStyle', name: 'normal', code: 'normalCode'},
+                            {style: 'ecoStyle',    name: 'eco',    code: 'ecoCode'},
                         ],
                         model: {
                             fields: [
-                                {name: 'style', type: 'string'},
-                                {name: 'name', type: 'string'},
-                                {name: 'code', type: 'string'}
+                                {name: 'style', type: 'String'},
+                                {name: 'name',  type: 'String'},
+                                {name: 'code',  type: 'String'}
                             ]
                         }
                     }