neo.mjs 6.17.1 → 6.18.0

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

@@ -1,12 +1,16 @@
-import Button     from '../../../../src/button/Base.mjs';
+import AfterMath  from './parts/AfterMath.mjs';
+import Colors     from './parts/Colors.mjs';
 import Container  from '../../../../src/container/Base.mjs';
-import ContentBox from './ContentBox.mjs';
+import Features   from './parts/Features.mjs';
+import Helix      from './parts/Helix.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 +18,34 @@ 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,
+            Colors,
+            Helix,
+            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 here',
+            // 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/Colors.mjs

@@ -0,0 +1,74 @@
+import Container   from '../../../../../src/container/Base.mjs';
+import LivePreview from '../../learn/LivePreview.mjs';
+
+/**
+ * @class Portal.view.home.parts.Colors
+ * @extends Neo.container.Base
+ */
+class Colors extends Container {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.home.parts.Colors'
+         * @protected
+         */
+        className: 'Portal.view.home.parts.Colors',
+
+        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: 'Colors Dashboard'
+            }, {
+                cls : 'neo-h2',
+                flex: 'none',
+                html: 'Expand the widgets into multiple Windows'
+            }, {
+                cls : 'neo-content',
+                flex: 'none',
+                html: 'The State Management will continue to work.'
+            }]
+        }, {
+            module: Container,
+            flex  : '2',
+            style : {background: 'grey', padding: '20px'},
+            layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
+            items : [{
+                module    : LivePreview,
+                activeView: 'preview',
+                cls       : ['page-live-preview'],
+                height    : '100%',
+
+                value: [
+                    "import Viewport from '../../../../apps/colors/view/Viewport.mjs';",
+                    "",
+                    "class MainView extends Viewport {",
+                    "    static config = {",
+                    "        className: 'Portal.view.Colors',",
+                    "        theme    : 'neo-theme-dark'",
+                    "    }",
+                    "}",
+                    "",
+                    "Neo.setupClass(MainView);"
+                ].join('\n')
+            }]
+        }]
+    }
+}
+
+Neo.setupClass(Colors);
+
+export default Colors;

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/Helix.mjs

@@ -0,0 +1,75 @@
+import Container   from '../../../../../src/container/Base.mjs';
+import LivePreview from '../../learn/LivePreview.mjs';
+
+/**
+ * @class Portal.view.home.parts.Helix
+ * @extends Neo.container.Base
+ */
+class Helix extends Container {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.home.parts.Helix'
+         * @protected
+         */
+        className: 'Portal.view.home.parts.Helix',
+
+        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: 'Interactive Views'
+            }, {
+                cls : 'neo-h2',
+                flex: 'none',
+                html: 'Expand the widget into multiple Windows'
+            }, {
+                cls : 'neo-content',
+                flex: 'none',
+                html: 'The State Management will continue to work.'
+            }]
+        }, {
+            module: Container,
+            flex  : '2',
+            style : {background: 'grey', padding: '20px'},
+            layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
+            items : [{
+                module    : LivePreview,
+                activeView: 'preview',
+                cls       : ['page-live-preview'],
+                height    : '100%',
+
+                value: [
+                    "import Viewport from '../../../../examples/component/multiWindowHelix/Viewport.mjs';",
+                    "",
+                    "class MainView extends Viewport {",
+                    "    static config = {",
+                    "        className           : 'Portal.view.MultiWindowHelix',",
+                    "        showGitHubStarButton: false,",
+                    "        theme               : 'neo-theme-dark'",
+                    "    }",
+                    "}",
+                    "",
+                    "Neo.setupClass(MainView);"
+                ].join('\n')
+            }]
+        }]
+    }
+}
+
+Neo.setupClass(Helix);
+
+export default Helix;

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;