neo.mjs 6.17.1 → 6.17.2

package/apps/ServiceWorker.mjs

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

package/apps/portal/view/HeaderToolbar.mjs

@@ -26,9 +26,12 @@ class HeaderToolbar extends Base {
          * @member {Object[]} items
          */
         items: [{
-            cls  : ['logo'],
-            route: '/home',
-            text : 'neo.mjs'
+            cls     : ['logo'],
+            id      : 'neo-logo-button',
+            minWidth: 60,
+            iconCls : 'neo-logo-blue',
+            route   : '/home',
+            text    : 'neo.mjs'
         }, '->', {
             text : 'Learn',
             route: '/learn'
@@ -40,30 +43,44 @@ class HeaderToolbar extends Base {
             text : 'Docs',
             route: '/docs'
         }, {
-            cls    : ['github-button'],
-            iconCls: 'fa-brands fa-github',
-            url    : 'https://github.com/neomjs/neo',
-            tooltip: {
-                html     : 'GitHub',
-                showDelay: '0',
-                hideDelay: '0'
-            }
-        }, {
-            iconCls: 'fa-brands fa-slack',
-            url    : 'https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA',
-            tooltip: {
-                html     : 'Join Slack',
-                showDelay: '0',
-                hideDelay: '0'
-            }
-        }, {
-            iconCls: 'fa-brands fa-discord',
-            url    : 'https://discord.gg/6p8paPq',
-            tooltip: {
-                html     : 'Join Discord',
-                showDelay: '0',
-                hideDelay: '0'
-            }
+            ntype : 'container',
+            layout: 'hbox',
+
+            responsive: {
+                medium: { cls: ['separate-bar'], layout: 'vbox' },
+                large : { cls: ['inline'],       layout: 'hbox' }
+            },
+
+            itemDefaults: {
+                ntype: 'button',
+                ui   : 'ghost'
+            },
+
+            items: [{
+                iconCls: 'fa-brands fa-github',
+                url    : 'https://github.com/neomjs/neo',
+                tooltip: {
+                    html     : 'GitHub',
+                    showDelay: '0',
+                    hideDelay: '0'
+                }
+            }, {
+                iconCls: 'fa-brands fa-slack',
+                url    : 'https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA',
+                tooltip: {
+                    html     : 'Join Slack',
+                    showDelay: '0',
+                    hideDelay: '0'
+                }
+            }, {
+                iconCls: 'fa-brands fa-discord',
+                url    : 'https://discord.gg/6p8paPq',
+                tooltip: {
+                    html     : 'Join Discord',
+                    showDelay: '0',
+                    hideDelay: '0'
+                }
+            }]
         }]
     }
 }

package/apps/portal/view/Viewport.mjs

@@ -28,6 +28,10 @@ class Viewport extends BaseViewport {
          * @member {Neo.controller.Component} controller=ViewportController
          */
         controller: ViewportController,
+        /**
+         * @member {Object} layout={ntype:'vbox',align:'stretch'}
+         */
+        layout: {ntype: 'vbox', align: 'stretch'},
         /**
          * @member {Object[]} items
          */
@@ -50,6 +54,10 @@ class Viewport extends BaseViewport {
          * @member {Neo.model.Component} model=ViewportModel
          */
         model: ViewportModel,
+        /**
+         * @member {Boolean} monitorSize=true
+         */
+        monitorSize: true,
         /**
          * Values are: large, medium, small, xSmall
          * @member {String|null} size_=null
@@ -62,7 +70,10 @@ class Viewport extends BaseViewport {
      */
     construct(config) {
         super.construct(config);
-        this.addDomListeners([{resize: this.onResize, scope: this}])
+
+        let me = this;
+
+        me.on('resize', me.onResize, me)
     }
 
     /**

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

@@ -1,12 +1,15 @@
-import Button     from '../../../../src/button/Base.mjs';
+import AfterMath  from './parts/AfterMath.mjs';
 import Container  from '../../../../src/container/Base.mjs';
-import ContentBox from './ContentBox.mjs';
+import CoolStuff  from './parts/CoolStuff.mjs';
+import Features   from './parts/Features.mjs';
+import HelloWorld from './parts/HelloWorld.mjs';
+import MainNeo    from './parts/MainNeo.mjs';
 
 /**
  * @class Portal.view.home.MainContainer
  * @extends Neo.container.Base
  */
-class Viewport extends Container {
+class MainContainer extends Container {
     static config = {
         /**
          * @member {String} className='Portal.view.home.MainContainer'
@@ -14,71 +17,36 @@ class Viewport extends Container {
          */
         className: 'Portal.view.home.MainContainer',
         /**
-         * @member {String[]} cls=['newwebsite-viewport']
+         * @member {String[]} cls=['portal-home-maincontainer']
          */
-        cls: ['newwebsite-viewport'],
+        cls: ['portal-home-maincontainer'],
         /**
-         * @member {Object} layout={ntype:'vbox',align:'center',pack:'center'}
+         * @member {Object[]} items
          */
-        layout: {ntype: 'vbox', align: 'center', pack: 'center'},
+        items: [
+            {
+                ntype: 'component',
+                id   : 'progress'
+            },
+            MainNeo,
+            Features,
+            HelloWorld,
+            CoolStuff,
+            AfterMath
+        ],
         /**
-         * @member {Object[]} items
+         * @member {Boolean} scrollable=true
          */
-        items: [{
-            cls  : ['vector'],
-            flex : 'none'
-        }, {
-            cls : 'neo-h1',
-            flex: 'none',
-            html: 'The High-Performance Web Framework for Next Generation Interfaces'
-        }, {
-            module: Container,
-            cls   : ['button-group'],
-            flex  : 'none',
-            layout: {ntype: 'hbox'},
-
-            items: [{
-                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: 'Next-Generation Runtime',
-                route : '#/learn/WhyNeo-Quick',
-
-                content: [
-                    'Multi-threaded',
-                    'Elegant state management',
-                    'Simple and powerful debugging'
-                ]
-            }, {
-                module: ContentBox,
-                header: 'Extreme Speed',
-                route : '#/learn/WhyNeo-Speed',
+        scrollable: true,
 
-                content: [
-                    'Multi-threaded',
-                    'Over 40,000 delta updates per second',
-                    'Item 3'
-                ]
-            }]
+        domListeners: [{
+            scroll(event) {
+                this.toggleCls('hide-sidebar', event.scrollTop > 80)
+            }
         }]
     }
 }
 
-Neo.setupClass(Viewport);
+Neo.setupClass(MainContainer);
 
-export default Viewport;
+export default MainContainer;

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

@@ -0,0 +1,58 @@
+import Container from '../../../../../src/container/Base.mjs';
+
+/**
+ * @class Portal.view.home.parts.AfterMath
+ * @extends Neo.container.Base
+ */
+class AfterMath extends Container {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.home.parts.AfterMath'
+         * @protected
+         */
+        className: 'Portal.view.home.parts.AfterMath',
+
+        cls: ['page', 'after-math'],
+
+        layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: Container,
+            flex  : 1
+        }, {
+            cls : 'neo-h1',
+            flex: 'none',
+            html: 'Additional Stuff'
+        }, {
+            cls : 'neo-h2',
+            flex: 'none',
+            html: 'More to come her',
+            // height: 200
+        }, {
+            cls : 'neo-content',
+            flex: 'none',
+            html: 'Neo uses several cores to run the application. See the spinner on the page?',
+            // height: 200
+        }, {
+            module: Container,
+            flex  : 1
+        }, {
+            module: Container,
+            cls   : 'home-footer',
+            height: '40%',
+            style : { // todo: css
+                background: 'black',
+                color     : 'white',
+                height    : '40%',
+                padding   : '15px'
+            },
+            html  : 'This is the footer'
+        }]
+    }
+}
+
+Neo.setupClass(AfterMath);
+
+export default AfterMath;

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

@@ -0,0 +1,82 @@
+import Container   from '../../../../../src/container/Base.mjs';
+import LivePreview from '../../learn/LivePreview.mjs';
+
+/**
+ * @class Portal.view.home.parts.CoolStuff
+ * @extends Neo.container.Base
+ */
+class CoolStuff extends Container {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.home.parts.CoolStuff'
+         * @protected
+         */
+        className: 'Portal.view.home.parts.CoolStuff',
+
+        cls: ['page', 'cool-stuff'],
+
+        responsive: {
+            medium: {layout: {ntype: 'vbox', align: 'stretch', pack: 'center'}},
+            large : {layout: {ntype: 'hbox', align: 'stretch', pack: 'center'}}
+        },
+
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: Container,
+            flex  : '1',
+            style : {padding: '2rem'},
+            layout: {ntype: 'vbox', align: 'center', pack: 'center'},
+            items : [{
+                cls : 'neo-h1',
+                flex: 'none',
+                html: 'Cool Stuff'
+            }, {
+                cls : 'neo-h2',
+                flex: 'none',
+                html: 'WOW - See the power of Neo',
+                // height: 200
+            }, {
+                cls : 'neo-content',
+                flex: 'none',
+                html: 'Neo uses several cores to run the application. See the spinner on the page?',
+                // height: 200
+            }]
+        }, {
+            module: Container,
+            flex  : '0.8',
+            // responsive: {
+            //     medium: {flex: '1.2'},
+            //     large: {flex: '0.6'}
+            // },
+            style : {background: 'grey', padding: '20px'},
+            layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
+            items : [{
+                module: LivePreview,
+                cls   : ['page-live-preview'],
+                style : {background: 'white'},
+                value : [
+                    "import Container from '../../../../src/container/Base.mjs';",
+                    "",
+                    "class MainView extends Container {",
+                    "    static config = {",
+                    "        className: 'Portal.view.MainView',",
+                    "        layout   : {ntype:'vbox', align:'stretch'},",
+                    "        items    : [{",
+                    "            module: Container,",
+                    "            html  : 'Hello World'",
+                    "        }]",
+                    "    }",
+                    "}",
+                    "",
+                    "Neo.setupClass(MainView);"
+                ].join('\n')
+            }]
+        }]
+    }
+}
+
+Neo.setupClass(CoolStuff);
+
+export default CoolStuff;

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

@@ -0,0 +1,52 @@
+import Container  from '../../../../../src/container/Base.mjs';
+import ContentBox from '../ContentBox.mjs';
+
+/**
+ * @class Portal.view.home.parts.Features
+ * @extends Neo.container.Base
+ */
+class Features extends Container {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.home.parts.Features'
+         * @protected
+         */
+        className: 'Portal.view.home.parts.Features',
+        /**
+         * @member {String[]} cls=['portal-home-features','page']
+         */
+        cls: ['portal-home-features', 'page'],
+        /**
+         * @member {Object} layout={ntype:'hbox',align:'stretch',wrap:'wrap'}
+         */
+        layout: {ntype: 'hbox', align: 'stretch', wrap: 'wrap'},
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: ContentBox,
+            header: 'Next-Generation Runtime',
+            route : '#/learn/WhyNeo-Quick',
+
+            content: [
+                'Multi-threaded',
+                'Elegant state management',
+                'Simple and powerful debugging'
+            ]
+        }, {
+            module: ContentBox,
+            header: 'Extreme Speed',
+            route : '#/learn/WhyNeo-Speed',
+
+            content: [
+                'Multi-threaded',
+                'Over 40,000 delta updates per second',
+                'Item 3'
+            ]
+        }]
+    }
+}
+
+Neo.setupClass(Features);
+
+export default Features;

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

@@ -0,0 +1,82 @@
+import Container            from '../../../../../src/container/Base.mjs';
+import LivePreviewContainer from '../preview/PageCodeContainer.mjs';
+
+/**
+ * @class Portal.view.home.parts.HelloWorld
+ * @extends Neo.container.Base
+ */
+class HelloWorld extends Container {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.home.parts.HelloWorld'
+         * @protected
+         */
+        className: 'Portal.view.home.parts.HelloWorld',
+
+        cls: ['page', 'hello-world'],
+        /**
+         * @member {Object} layout=null
+         */
+//        layout: null,
+
+        responsiveConfig: {
+            oldPhone: {maxWidth: 320},
+            phone   : {maxWidth: 480},
+            tablet  : {maxWidth: 770},
+            medium  : {maxWidth: 840},
+            large   : {minWidth: 841}
+        },
+
+        responsive: {
+            medium: {layout: {ntype: 'vbox', align: 'stretch', pack: 'center'}},
+            large : {layout: {ntype: 'hbox', align: 'stretch', pack: 'center'}}
+        },
+
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: Container,
+            flex  : '1',
+            style : {padding: '2rem'},
+            layout: {ntype: 'vbox', align: 'center', pack: 'center'},
+            items : [{
+                cls : 'neo-h1',
+                id  : 'neo-hello-world-h1',
+                flex: 'none',
+                html: 'Hello World'
+            }, {
+                cls : 'neo-h2',
+                flex: 'none',
+                html: 'Your first code snippet'
+            }, {
+                cls : 'neo-content',
+                flex: 'none',
+                html: 'If you understand these lines, you are ready to start with Neo.mjs'
+            }]
+        }, {
+            module: LivePreviewContainer,
+            flex: 0.8,
+            value : [
+                "import Container from '../../../../src/container/Base.mjs';",
+                "",
+                "class MainView extends Container {",
+                "    static config = {",
+                "        className: 'Portal.view.MainView',",
+                "        layout   : {ntype:'vbox', align:'stretch'},",
+                "        items    : [{",
+                "            module: Container,",
+                "            html  : 'Hello World'",
+                "        }]",
+                "    }",
+                "}",
+                "",
+                "Neo.setupClass(MainView);"
+            ].join('\n')
+        }]
+    }
+}
+
+Neo.setupClass(HelloWorld);
+
+export default HelloWorld;

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

@@ -0,0 +1,55 @@
+import Button    from '../../../../../src/button/Base.mjs';
+import Container from '../../../../../src/container/Base.mjs';
+
+/**
+ * @class Portal.view.home.parts.MainNeo
+ * @extends Neo.container.Base
+ */
+class MainNeo extends Container {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.home.parts.MainNeo'
+         * @protected
+         */
+        className: 'Portal.view.home.parts.MainNeo',
+
+        cls: ['page', 'landing-page'],
+
+        layout: {ntype: 'vbox', align: 'center', pack: 'center'},
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: Container,
+            cls   : ['vector'],
+            flex  : 'none',
+        }, {
+            cls : 'neo-h1',
+            flex: 'none',
+            html: 'The High-Performance Web Framework for Next Generation Interfaces'
+        }, {
+            module: Container,
+            cls   : ['button-group'],
+            flex  : 'none',
+
+            items: [{
+                module : Button,
+                cls    : ['get-started-button'],
+                text   : 'Get started',
+                flex   : 'none',
+                route : '/learn'
+            }, {
+                module: Button,
+                cls   : ['neo-github'],
+                flex  : 'none',
+                text  : 'View on GitHub',
+                ui    : 'secondary',
+                url   : 'https://github.com/neomjs/neo'
+            }]
+        }]
+    }
+}
+
+Neo.setupClass(MainNeo);
+
+export default MainNeo;

package/apps/portal/view/home/preview/PageCodeContainer.mjs

@@ -0,0 +1,55 @@
+import Container   from '../../../../../src/container/Base.mjs';
+import LivePreview from '../../learn/LivePreview.mjs';
+
+/**
+ * @class Portal.view.home.preview.PageCodeContainer
+ * @extends Neo.container.Base
+ */
+class PageCodeContainer extends Container {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.home.preview.PageCodeContainer'
+         * @protected
+         */
+        className: 'Portal.view.home.preview.PageCodeContainer',
+        /**
+         * @member {String} ntype='page-code-container'
+         * @protected
+         */
+        ntype: 'page-code-container',
+        /**
+         * @member {String[]} cls=['page-code-container']
+         * @protected
+         */
+        cls: ['page-code-container'],
+        /**
+         * @member {Object} layout={ntype:'vbox',align:'stretch',pack:'center'}
+         */
+        layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
+        /**
+         * @member {Object[]} items
+         */
+        items : [{
+            module: LivePreview,
+            cls   : ['live-preview']
+        }],
+        /**
+         * @member {String|null} value_=null
+         */
+        value_: null,
+    }
+
+    /**
+     * Triggered after the size config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetValue(value, oldValue) {
+        this.items[0].value = value
+    }
+}
+
+Neo.setupClass(PageCodeContainer);
+
+export default PageCodeContainer;

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

@@ -137,7 +137,7 @@ class LivePreview extends Container {
             } else if (line.match(exportRegex)) {
                 // Skip export statements
             } else {
-                cleanLines.push(line);
+                cleanLines.push(`    ${line}`);
             }
         });
 
@@ -161,21 +161,23 @@ class LivePreview extends Container {
 
         let promises = moduleNameAndPath.map(item => {
             params.push(`${item.moduleName}Module`);
-            vars.push(`const ${item.moduleName} = ${item.moduleName}Module.default`);
-            return `import("${item.path}")`
+            vars.push(`    const ${item.moduleName} = ${item.moduleName}Module.default;`);
+            return `import('${item.path}')`
         });
 
-        const codeString = `
-            Promise.all([
-                ${promises.join(',\n')}
-            ])
-            .then(([${params.join(', ')}]) => {
-                    ${vars.join('\n')}
-                    ${cleanLines.join('\n')}
-                    if (${className} && Neo.component.Base.isPrototypeOf(${className})) container.add({module:${className}});
-                })
-            .catch(error=>container.add({ntype:'component',html:error.message}));
-        `;
+        const codeString = [
+            'Promise.all([',
+            `    ${promises.join(',\n')}`,
+            `]).then(([${params.join(', ')}]) => {`,
+            `${vars.join('\n')}`,
+            `    ${cleanLines.join('\n')}`,
+            '',
+            `    if (${className} && Neo.component.Base.isPrototypeOf(${className})) {`,
+            `        container.add({module:${className}})`,
+            '    }',
+            '})',
+            '.catch(error => container.add({ntype:\'component\', html:error.message}));'
+        ].join('\n')
 
         const container = me.getPreviewContainer();
         container.removeAll();