neo.mjs 6.18.3 → 6.19.0

package/apps/portal/view/home/parts/How.mjs

@@ -27,17 +27,17 @@ class How extends BaseContainer {
             style : {padding: '2rem'},
             layout: {ntype: 'vbox', align: 'center', pack: 'center'},
             items : [{
-                cls : 'neo-h1',
+                cls : ['neo-h1'],
                 flex: 'none',
                 html: 'How?',
                 vdom: {tag: 'h1'}
             }, {
-                cls : 'neo-h2',
+                cls : ['neo-h2'],
                 flex: 'none',
                 html: 'How Does Neo.mjs Do It?',
                 vdom: {tag: 'h2'}
             }, {
-                cls : 'neo-h3',
+                cls : ['neo-h3'],
                 flex: 'none',
                 vdom: {tag: 'p'},
                 html: [

package/apps/portal/view/home/parts/MainNeo.mjs

@@ -28,19 +28,18 @@ class MainNeo extends BaseContainer {
         }, {
             cls : ['neo-h1'],
             flex: 'none',
-            html: 'The High-Performance Web Framework for Next Generation Interfaces',
+            html: 'Harness the Power of Multi-Threading for Ultra-Fast Frontends',
             vdom: {tag: 'h1'}
         }, {
             ntype: 'container',
             cls  : ['button-group'],
             flex : 'none',
-
             items: [{
-                module : Button,
-                cls    : ['get-started-button'],
-                text   : 'Get started',
-                flex   : 'none',
-                route : '/learn'
+                module: Button,
+                cls   : ['get-started-button'],
+                flex  : 'none',
+                route : '/learn',
+                text  : 'Get started'
             }, {
                 module: Button,
                 cls   : ['neo-github'],

package/apps/portal/view/home/parts/References.mjs

@@ -0,0 +1,88 @@
+import BaseContainer from './BaseContainer.mjs';
+import Carousel      from "../../../../../src/component/Carousel.mjs";
+
+/**
+ * @class Portal.view.home.parts.References
+ * @extends Portal.view.home.parts.BaseContainer
+ */
+class References extends BaseContainer {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.home.parts.References'
+         * @protected
+         */
+        className: 'Portal.view.home.parts.References',
+        /**
+         * @member {String} cls='portal-references'
+         */
+        cls: 'portal-references',
+        /**
+         * @member {Object} layout={ntype:'vbox',align:'stretch',pack:'center'}
+         */
+        layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            ntype: 'container',
+            flex : '1 1 100%'
+        }, {
+            cls : 'neo-h1',
+            flex: 'none',
+            html: 'References',
+            vdom: {tag: 'h1'}
+        }, {
+            cls : 'neo-h2',
+            flex: 'none',
+            html: 'What people think about Neo',
+            vdom: {tag: 'h2'}
+        }, {
+            module: Carousel,
+            // will automatically change to the next extry every 5500 ms
+            // if not set or 0, this will show arrows to navigate
+            autoRun: 5500,
+            store  : {
+                model: {
+                    fields: [
+                        // @formatter:off
+                        {name: 'quote',      type: 'String'},
+                        {name: 'publisher',  type: 'String'},
+                        {name: 'date',       type: 'String'}
+                        // @formatter:on
+                    ]
+                },
+                data : [{
+                    quote    : 'Neo has inspired me to try out new ways and pursue more modern approaches.',
+                    publisher: 'Torsten Dinkheller',
+                    date     : 'Mai 2024'
+                }, {
+                    quote    : 'With Neo, I no longer lose sight of important customers. I can finally use 2 monitors for my work.',
+                    publisher: 'Pat Wemerson',
+                    date     : 'June 2024'
+                }, {
+                    quote    : 'Up-to-dateness is everything in my job, so Neo\'s data processing speed is just right for me.',
+                    publisher: 'Texas Ranger',
+                    date     : 'Juli 2024'
+                }, {
+                    quote    : 'Starting a project with Neo has brought me back up to speed. Always one step ahead of the browser.',
+                    publisher: 'Future Developer',
+                    date     : 'April 2024'
+                }]
+            },
+            // custom item cls
+            itemCls: 'example-carousel-item',
+            // each item will be created like the itemTpl structure
+            itemTpl: data => [{
+                cls : 'neo-quote',
+                html: data.quote
+            }, {
+                cls : 'neo-details',
+                html: `${data.publisher} - ${data.date}`
+            }]
+        }]
+    }
+}
+
+Neo.setupClass(References);
+
+export default References;

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

@@ -18,9 +18,9 @@ class MainContainer extends Container {
          */
         className: 'Portal.view.learn.MainContainer',
         /**
-         * @member {String[]} cls=['learnneo-maincontainer']
+         * @member {String[]} cls=['portal-learn-maincontainer']
          */
-        cls: ['learnneo-maincontainer'],
+        cls: ['portal-learn-maincontainer'],
         /**
          * @member {Neo.controller.Component} controller=MainContainerController
          */
@@ -34,6 +34,7 @@ class MainContainer extends Container {
             cls     : ['sidenav-container'],
             layout  : 'fit',
             minWidth: 350,
+            tag     :'aside',
             width   : 350,
 
             items: [{

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

@@ -16,6 +16,7 @@ class MainContainerController extends Controller {
          * @member {Object} routes
          */
         routes: {
+            '/learn'         : 'onRouteDefault',
             '/learn/{itemId}': 'onRouteLearnItem'
         }
     }
@@ -130,6 +131,16 @@ class MainContainerController extends Controller {
     /**
      * @param {Object} data
      */
+    onRouteDefault(data) {
+        if (!this.getModel().data.currentPageRecord) {
+            this.onRouteLearnItem({itemId: 'WhyNeo-Intro'})
+        }
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.itemId
+     */
     onRouteLearnItem(data) {
         let model = this.getModel(),
             store = model.getStore('contentTree');

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

@@ -14,10 +14,10 @@ class PageContainer extends Container {
          */
         className: 'Portal.view.learn.PageContainer',
         /**
-         * @member {String[]} baseCls=['learn-content-container','neo-container']
+         * @member {String[]} baseCls=['portal-learn-page-container','neo-container']
          * @protected
          */
-        baseCls: ['learn-content-container', 'neo-container'],
+        baseCls: ['portal-learn-page-container', 'neo-container'],
         /**
          * @member {Object} bind
          */
@@ -38,7 +38,9 @@ class PageContainer extends Container {
         }, {
             module: Toolbar,
             flex  : 'none',
-            cls   : 'content-bottom-toolbar',
+            cls   : ['content-bottom-toolbar'],
+            layout: 'grid',
+            tag   : 'nav',
             items : [{
                 cls      : ['content-bottom-toolbar-previous'],
                 handler  : 'onPreviousPageButtonClick',

package/apps/portal/view/services/Component.mjs

@@ -0,0 +1,73 @@
+import BaseComponent from '../../../../src/component/Base.mjs';
+
+/**
+ * @class Portal.view.services.Component
+ * @extends Neo.component.Base
+ */
+class Component extends BaseComponent {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.services.Component'
+         * @protected
+         */
+        className: 'Portal.view.services.Component',
+        /**
+         * @member {String[]} cls=['portal-services-component']
+         */
+        cls: ['portal-services-component'],
+        /**
+         * @member {Object} vdom
+         */
+        vdom:
+        {cn: [
+            {tag: 'h1', html: 'Services'},
+            {cls: ['info-block'], cn: [
+                {tag: 'h2', html: 'Weekly Workshops'},
+                {tag: 'p',  html: [
+                    'We are doing weekly workshops on Thursdays 17:30 CEST (11:30am EST) for 60m free of charge.</br>',
+                    'Ping us inside our ',
+                    '<a href="https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA">Slack Channel</a>, ',
+                    'in case you would like to join us.'
+                ].join('')},
+            ]},
+            {cls: ['info-block'], cn: [
+                {tag: 'h2', html: 'Professional Trainings'},
+                {tag: 'p',  html: [
+                    'While we do have a self-study based Learning Section online, you can also hire us ',
+                    'in case you prefer an Instructor-led Training for bringing your team up to speed.'
+                ].join('')},
+                {tag: 'ul', cn: [
+                    {tag: 'li', html: 'One week packed with 40h of intense training.'},
+                    {tag: 'li', html: 'Including hands-on Labs'},
+                    {tag: 'li', html: '6 - 12 attendees'},
+                    {tag: 'li', html: 'While Remote Trainings are possible, we strongly recommend On-Site Trainings instead.'},
+                ]},
+                {tag: 'p',  html: [
+                    'Feel free to send us an <a href="mailto:trainings@neomjs.com">Email</a> to plan your training timeframe.',
+                ].join('')},
+            ]},
+            {cls: ['info-block'], cn: [
+                {tag: 'h2', html: 'Professional Services'},
+                {tag: 'p',  html: [
+                    'We can help you to ensure your Neo.mjs based projects run successfully.',
+                ].join('')},
+                {tag: 'ul', cn: [
+                    {tag: 'li', html: 'Feasibility Analysis: Is Neo.mjs a good fit for your project needs?'},
+                    {tag: 'li', html: 'Creating a Neo.mjs PoC which matches your specific needs'},
+                    {tag: 'li', html: 'Code Reviews'},
+                    {tag: 'li', html: 'Frontend-Architecture Guidance'},
+                    {tag: 'li', html: 'Application & Framework Debugging'},
+                    {tag: 'li', html: 'Creation of Custom Components, Design Themes & new Features'},
+                    {tag: 'li', html: 'Hands-On Application Development Support'}
+                ]},
+                {tag: 'p',  html: [
+                    'In case you need help, send us an <a href="mailto:services@neomjs.com">Email</a>.',
+                ].join('')}
+            ]}
+        ]}
+    }
+}
+
+Neo.setupClass(Component);
+
+export default Component;

package/apps/website/data/blog.json

@@ -1,4 +1,17 @@
 [
+    {
+        "author"      : "Tobias Uhlig",
+        "authorImage" : "author_TobiasUhlig.jpeg",
+        "date"        : "Jul 12, 2024",
+        "id"          : 59,
+        "image"       : "transform_dom_tree.png",
+        "name"        : "A blazing-fast algorithm to transform one DOM tree into another",
+        "provider"    : "Medium",
+        "publisher"   : "ITNEXT",
+        "selectedInto": [],
+        "type"        : "Blog Post",
+        "url"         : "https://itnext.io/a-blazing-fast-algorithm-to-transform-one-dom-tree-into-another-4ff9c934bc49?source=friends_link&sk=f1de46dbd464095b8d0b0a271644cb75"
+    },
     {
         "author"      : "Tobias Uhlig",
         "authorImage" : "author_TobiasUhlig.jpeg",

package/examples/ServiceWorker.mjs

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

package/examples/component/carousel/MainContainer.mjs

@@ -22,21 +22,21 @@ class MainContainer extends ConfigurationViewport {
             labelText: 'autoRun',
             listeners: {change: me.onConfigChange.bind(me, 'autoRun')}
         }, {
-            module    :  RangeField,
-            labelText : 'height',
-            listeners : {change: me.onConfigChange.bind(me, 'height')},
-            maxValue  : 800,
-            minValue  : 200,
-            stepSize  : 1,
-            value     : me.exampleComponent.height
+            module   : RangeField,
+            labelText: 'height',
+            listeners: {change: me.onConfigChange.bind(me, 'height')},
+            maxValue : 800,
+            minValue : 200,
+            stepSize : 1,
+            value    : me.exampleComponent.height
         }, {
-            module    :  RangeField,
-            labelText : 'width',
-            listeners : {change: me.onConfigChange.bind(me, 'width')},
-            maxValue  : 800,
-            minValue  : 200,
-            stepSize  : 1,
-            value     : me.exampleComponent.width
+            module   : RangeField,
+            labelText: 'width',
+            listeners: {change: me.onConfigChange.bind(me, 'width')},
+            maxValue : 800,
+            minValue : 200,
+            stepSize : 1,
+            value    : me.exampleComponent.width
         }];
     }
 
@@ -48,33 +48,42 @@ class MainContainer extends ConfigurationViewport {
             // if not set or 0, this will show arrows to navigate
             // cannot be changed after created
             autoRun: 5500,
-            store: {
-                data: [{
-                    "quote": "We love the German inspired dishes on the menu",
-                    "publisher": "Trip Advisor",
-                    "date": "Dezember 2020"
-                },{
-                    "quote": "Everything about this place was excellent, from start to finish",
-                    "publisher": "Trip Advisor",
-                    "date": "Dezember 2021"
-                },{
-                    "quote": "We had three courses and everything was great",
-                    "publisher": "Trip Advisor",
-                    "date": "September 2020"
-                },{
-                    "quote": "Excellent Food, Wine and Service",
-                    "publisher": "Best Food",
-                    "date": "August 2020"
+            store  : {
+                model: {
+                    fields: [
+                        // @formatter:off
+                        {name: 'quote',      type: 'String'},
+                        {name: 'publisher',  type: 'String'},
+                        {name: 'date',       type: 'String'}
+                        // @formatter:on
+                    ]
+                },
+                data : [{
+                    quote    : 'We love the German inspired dishes on the menu',
+                    publisher: 'Trip Advisor',
+                    date     : 'Dezember 2020'
+                }, {
+                    quote    : 'Everything about this place was excellent, from start to finish',
+                    publisher: 'Trip Advisor',
+                    date     : 'Dezember 2021'
+                }, {
+                    quote    : 'We had three courses and everything was great',
+                    publisher: 'Trip Advisor',
+                    date     : 'September 2020'
+                }, {
+                    quote    : 'Excellent Food, Wine and Service',
+                    publisher: 'Best Food',
+                    date     : 'August 2020'
                 }]
             },
             // custom item cls
             itemCls: 'example-carousel-item',
             // each item will be created like the itemTpl structure
             itemTpl: data => [{
-                cls: 'example-quote',
+                cls : 'example-quote',
                 html: data.quote
             }, {
-                cls: 'example-details',
+                cls : 'example-details',
                 html: `${data.publisher} - ${data.date}`
             }]
         });

package/examples/layout/cube/MainContainer.mjs

@@ -0,0 +1,217 @@
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import Container             from '../../../src/container/Base.mjs';
+import CubeLayout            from '../../../src/layout/Cube.mjs';
+import NumberField           from '../../../src/form/field/Number.mjs';
+import Radio                 from '../../../src/form/field/Radio.mjs';
+import RangeField            from '../../../src/form/field/Range.mjs';
+import Toolbar               from '../../../src/toolbar/Base.mjs';
+
+/**
+ * @class Neo.examples.layout.cube.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.layout.cube.MainContainer',
+        cls                 : ['examples-layout-cube-maincontainer'],
+        configItemLabelWidth: 160,
+        configItemWidth     : 280,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }
+
+    createConfigurationComponents() {
+        let me       = this,
+            {layout} = me.exampleComponent.getItem('container');
+
+        return [{
+            module        : Radio,
+            checked       : layout.ntype === 'layout-cube',
+            hideValueLabel: false,
+            labelText     : 'layout',
+            listeners     : {change: me.onRadioLayoutChange.bind(me, 'cube')},
+            name          : 'layout',
+            valueLabelText: 'Cube'
+        }, {
+            module        : Radio,
+            checked       : layout.ntype === 'layout-vbox',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioLayoutChange.bind(me, 'vbox')},
+            name          : 'layout',
+            valueLabelText: 'VBox'
+        }, {
+            module   : RangeField,
+            labelText: 'perspective',
+            listeners: {change: me.onLayoutConfigChange.bind(me, 'perspective')},
+            maxValue : 2000,
+            minValue : 400,
+            stepSize : 10,
+            style    : {marginTop: '20px'},
+            value    : layout.perspective
+        }, {
+            module   : RangeField,
+            labelText: 'rotateX',
+            listeners: {change: me.onLayoutConfigChange.bind(me, 'rotateX')},
+            maxValue : 360,
+            minValue : 0,
+            stepSize : 1,
+            style    : {marginTop: '20px'},
+            value    : layout.rotateX
+        }, {
+            module   : RangeField,
+            labelText: 'rotateY',
+            listeners: {change: me.onLayoutConfigChange.bind(me, 'rotateY')},
+            maxValue : 360,
+            minValue : 0,
+            stepSize : 1,
+            value    : layout.rotateY
+        }, {
+            module   : RangeField,
+            labelText: 'rotateZ',
+            listeners: {change: me.onLayoutConfigChange.bind(me, 'rotateZ')},
+            maxValue : 360,
+            minValue : 0,
+            stepSize : 1,
+            value    : layout.rotateZ
+        }, {
+            module   : RangeField,
+            labelText: 'sideX',
+            listeners: {change: me.onLayoutConfigChange.bind(me, 'sideX')},
+            maxValue : 400,
+            minValue : 100,
+            stepSize : 10,
+            style    : {marginTop: '20px'},
+            value    : layout.sideX
+        }, {
+            module   : RangeField,
+            labelText: 'sideY',
+            listeners: {change: me.onLayoutConfigChange.bind(me, 'sideY')},
+            maxValue : 400,
+            minValue : 100,
+            stepSize : 10,
+            value    : layout.sideY
+        }, {
+            module   : RangeField,
+            labelText: 'sideZ',
+            listeners: {change: me.onLayoutConfigChange.bind(me, 'sideZ')},
+            maxValue : 400,
+            minValue : 100,
+            stepSize : 10,
+            value    : layout.sideZ
+        }, {
+            module   : NumberField,
+            clearable: true,
+            labelText: 'height',
+            listeners: {change: me.onConfigChange.bind(me, 'height')},
+            maxValue : 1000,
+            minValue : 300,
+            stepSize : 10,
+            style    : {marginTop: '20px'},
+            value    : me.exampleComponent.height
+        }, {
+            module   : NumberField,
+            clearable: true,
+            labelText: 'width',
+            listeners: {change: me.onConfigChange.bind(me, 'width')},
+            maxValue : 1000,
+            minValue : 300,
+            stepSize : 10,
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.width
+        }];
+    }
+
+    /**
+     * @returns {Neo.component.Base}
+     */
+    createExampleComponent() {
+        return Neo.create({
+            module: Container,
+            height: 550,
+            layout: {ntype: 'vbox', align: 'center', pack: 'center'},
+            width : 550,
+
+            items: [{
+                module   : Container,
+                reference: 'container',
+                style    : {color: 'white', fontSize: '50px', margin: '50px', textAlign: 'center'},
+
+                layout: {
+                    ntype  : 'cube',
+                    rotateX: 194,
+                    rotateY: 213,
+                    rotateZ: 162
+                },
+
+                items: [
+                    {style: {backgroundColor: 'rgba(255,   0,   0, 0.5)'}, html: 'Front'},
+                    {style: {backgroundColor: 'rgba(  0, 255,   0, 0.5)'}, html: 'Back'},
+                    {style: {backgroundColor: 'rgba(  0,   0, 255, 0.5)'}, html: 'Left'},
+                    {style: {backgroundColor: 'rgba(  0, 255, 255, 0.5)'}, html: 'Right'},
+                    {style: {backgroundColor: 'rgba(255,   0, 255, 0.5)'}, html: 'Top'},
+                    {style: {backgroundColor: 'rgba(255, 255,   0, 0.5)'}, html: 'Bottom'}
+                ]
+            }, {
+                module: Toolbar,
+                flex  : 'none',
+                style : {marginTop: '1em'},
+
+                itemDefaults: {
+                    ntype  : 'button',
+                    handler: 'up.onFaceButtonClick',
+                    style  : {marginRight: '.3em'}
+                },
+
+                items: [
+                    {text: 'Front'},
+                    {text: 'Back'},
+                    {text: 'Left'},
+                    {text: 'Right'},
+                    {text: 'Top'},
+                    {text: 'Bottom'}
+                ]
+            }]
+        })
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onFaceButtonClick(data) {
+        this.getItem('container').layout['activeFace'] = data.component.text.toLowerCase()
+    }
+
+
+        /**
+     * @param {String} config
+     * @param {Object} opts
+     */
+    onLayoutConfigChange(config, opts) {
+        this.getItem('container').layout[config] = opts.value
+    }
+
+    /**
+     * @param {String} name
+     * @param {Object} opts
+     */
+    onRadioLayoutChange(name, opts) {
+        if (opts.value === true) { // we only want to listen to check events, not uncheck
+            let layout = name;
+
+            if (name === 'cube') {
+                layout = {
+                    ntype  : 'cube',
+                    rotateX: 194,
+                    rotateY: 213,
+                    rotateZ: 162
+                }
+            }
+
+            this.getItem('container').layout = layout;
+        }
+    }
+}
+
+Neo.setupClass(MainContainer);
+
+export default MainContainer;

package/examples/layout/cube/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.layout.cube'
+});

package/examples/layout/cube/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo Cube Layout</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/layout/cube/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/layout/cube/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}