neo.mjs 6.18.0 → 6.18.2

package/apps/ServiceWorker.mjs

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

package/apps/colors/view/HeaderToolbar.mjs

@@ -39,31 +39,31 @@ class HeaderToolbar extends Toolbar {
             clearable    : false,
             editable     : false,
             labelPosition: 'inline',
-            labelText    : 'Amount Colors',
+            labelText    : '# Colors',
             listeners    : {change: 'onChangeAmountColors'},
             maxValue     : 10,
             minValue     : 3,
-            width        : 120
+            width        : 90
         }, {
             module       : ComboBox,
             bind         : {value: data => String(data.amountColumns)},
             clearable    : false,
             editable     : false,
             labelPosition: 'inline',
-            labelText    : 'Amount Columns',
+            labelText    : '# Columns',
             listeners    : {change: 'onChangeAmountColumns'},
             store        : ['5', '10', '15', '20', '26'],
-            width        : 120
+            width        : 90
         }, {
             module       : ComboBox,
             bind         : {value: data => String(data.amountRows)},
             clearable    : false,
             editable     : false,
             labelPosition: 'inline',
-            labelText    : 'Amount Rows',
+            labelText    : '# Rows',
             listeners    : {change: 'onChangeAmountRows'},
             store        : ['5', '10', '15', '20'],
-            width        : 120
+            width        : 90
         }, '->', {
             handler  : 'onDetachTableButtonClick',
             iconCls  : 'fas fa-table',

package/apps/portal/view/HeaderToolbar.mjs

@@ -27,9 +27,8 @@ class HeaderToolbar extends Base {
          */
         items: [{
             cls     : ['logo'],
-            id      : 'neo-logo-button',
-            minWidth: 60,
             iconCls : 'neo-logo-blue',
+            minWidth: 60,
             route   : '/home',
             text    : 'Neo.mjs'
         }, '->', {

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

@@ -3,6 +3,7 @@ import Colors     from './parts/Colors.mjs';
 import Container  from '../../../../src/container/Base.mjs';
 import Features   from './parts/Features.mjs';
 import Helix      from './parts/Helix.mjs';
+import How        from './parts/How.mjs';
 import HelloWorld from './parts/HelloWorld.mjs';
 import MainNeo    from './parts/MainNeo.mjs';
 
@@ -21,28 +22,58 @@ class MainContainer extends Container {
          * @member {String[]} cls=['portal-home-maincontainer']
          */
         cls: ['portal-home-maincontainer'],
+        /**
+         * @member {Object[]} domListeners
+         */
+        domListeners: [{
+            intersect(data) {
+                Neo.getComponent(data.targetId)?.activate?.()
+            },
+            scroll(event) {
+                this.toggleCls('hide-sidebar', event.scrollTop > 80)
+            }
+        }],
         /**
          * @member {Object[]} items
          */
         items: [
-            {ntype: 'component', id: 'progress'},
+            {ntype: 'component', cls: ['portal-home-progress']},
             MainNeo,
             Features,
             HelloWorld,
-            Colors,
             Helix,
+            Colors,
+            How,
             AfterMath
         ],
         /**
          * @member {Boolean} scrollable=true
          */
-        scrollable: true,
+        scrollable: true
+    }
 
-        domListeners: [{
-            scroll(event) {
-                this.toggleCls('hide-sidebar', event.scrollTop > 80)
-            }
-        }]
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+
+        let me             = this,
+            {id, windowId} = me;
+
+        value && setTimeout(() => {
+            Neo.main.addon.IntersectionObserver.register({
+                callback : 'isVisible',
+                id,
+                observe  : ['.portal-home-content-view'],
+                root     : `#${id}`,
+                threshold: 1.0,
+                windowId
+            })
+        }, 50)
     }
 }
 

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

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

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

@@ -0,0 +1,31 @@
+import Container from '../../../../../src/container/Base.mjs';
+
+/**
+ * Abstract base class for all views inside the landing page
+ * @class Portal.view.home.parts.BaseContainer
+ * @extends Neo.container.Base
+ * @abstract
+ */
+class BaseContainer extends Container {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.home.parts.BaseContainer'
+         * @protected
+         */
+        className: 'Portal.view.home.parts.BaseContainer',
+        /**
+         * @member {String[]} cls=['portal-home-content-view','neo-container']
+         */
+        baseCls: ['portal-home-content-view', 'neo-container']
+    }
+
+    /**
+     * Hook which will trigger whenever the container fully gets scrolled into the visible area.
+     * Override it as needed.
+     */
+    activate() {}
+}
+
+Neo.setupClass(BaseContainer);
+
+export default BaseContainer;

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

@@ -1,56 +1,72 @@
-import Container   from '../../../../../src/container/Base.mjs';
-import LivePreview from '../../learn/LivePreview.mjs';
+import BaseContainer from './BaseContainer.mjs';
+import LivePreview   from '../../learn/LivePreview.mjs';
 
 /**
  * @class Portal.view.home.parts.Colors
- * @extends Neo.container.Base
+ * @extends Portal.view.home.parts.BaseContainer
  */
-class Colors extends Container {
+class Colors extends BaseContainer {
     static config = {
         /**
          * @member {String} className='Portal.view.home.parts.Colors'
          * @protected
          */
         className: 'Portal.view.home.parts.Colors',
-
-        cls: ['page', 'cool-stuff'],
-
+        /**
+         * @member {Object} responsive
+         */
         responsive: {
             medium: {layout: {ntype: 'vbox', align: 'stretch', pack: 'center'}},
             large : {layout: {ntype: 'hbox', align: 'stretch', pack: 'center'}}
         },
-
         /**
          * @member {Object[]} items
          */
         items: [{
-            module: Container,
+            ntype : 'container',
             flex  : '1',
             style : {padding: '2rem'},
             layout: {ntype: 'vbox', align: 'center', pack: 'center'},
             items : [{
                 cls : 'neo-h1',
                 flex: 'none',
-                html: 'Colors Dashboard'
+                html: 'Amazing Potential',
+                vdom: {tag: 'h1'}
             }, {
                 cls : 'neo-h2',
                 flex: 'none',
-                html: 'Expand the widgets into multiple Windows'
+                html: 'Socket Data',
+                vdom: {tag: 'h2'}
             }, {
-                cls : 'neo-content',
                 flex: 'none',
-                html: 'The State Management will continue to work.'
+                vdom: {tag: 'p'},
+                html: [
+                    'This is similar to the Helix demo — it\'s an extremely fast multi-window app. Click the start button ',
+                    'to see the view reflect changes in the data. And the app is multi-window: the table and charts can be ',
+                    'undocked into their own windows. In fact, the entire demo can be undocked.'
+                ].join('')
+            }, {
+                flex: 'none',
+                html: 'But the demo differs from the helix example because the data is provided via a <i>socket</i>.',
+                vdom: {tag: 'p'}
+            }, {
+                flex: 'none',
+                vdom: {tag: 'p'},
+                html: [
+                    'Neo.mjs uniquely fits the bill for applications that need real-time visualizations of real-time data, such as ',
+                    'stock market trading data and medical or scientific telemetry.'
+                ].join('')
             }]
         }, {
-            module: Container,
+            ntype : 'container',
             flex  : '2',
-            style : {background: 'grey', padding: '20px'},
+            style : {background: 'lightgray', padding: '20px'},
             layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
             items : [{
-                module    : LivePreview,
-                activeView: 'preview',
-                cls       : ['page-live-preview'],
-                height    : '100%',
+                module   : LivePreview,
+                cls      : ['page-live-preview'],
+                height   : '100%',
+                reference: 'live-preview',
 
                 value: [
                     "import Viewport from '../../../../apps/colors/view/Viewport.mjs';",
@@ -67,6 +83,14 @@ class Colors extends Container {
             }]
         }]
     }
+
+    /**
+     *
+     */
+    async activate() {
+        await this.timeout(1000);
+        this.getReference('live-preview').activeView = 'preview'
+    }
 }
 
 Neo.setupClass(Colors);

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

@@ -1,11 +1,11 @@
-import Container  from '../../../../../src/container/Base.mjs';
-import ContentBox from '../ContentBox.mjs';
+import BaseContainer from './BaseContainer.mjs';
+import ContentBox    from '../ContentBox.mjs';
 
 /**
  * @class Portal.view.home.parts.Features
- * @extends Neo.container.Base
+ * @extends Portal.view.home.parts.BaseContainer
  */
-class Features extends Container {
+class Features extends BaseContainer {
     static config = {
         /**
          * @member {String} className='Portal.view.home.parts.Features'
@@ -13,9 +13,9 @@ class Features extends Container {
          */
         className: 'Portal.view.home.parts.Features',
         /**
-         * @member {String[]} cls=['portal-home-features','page']
+         * @member {String[]} cls=['portal-home-features']
          */
-        cls: ['portal-home-features', 'page'],
+        cls: ['portal-home-features'],
         /**
          * @member {Object} layout={ntype:'hbox',align:'stretch',wrap:'wrap'}
          */

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

@@ -1,56 +1,84 @@
-import Container   from '../../../../../src/container/Base.mjs';
-import LivePreview from '../../learn/LivePreview.mjs';
+import BaseContainer from './BaseContainer.mjs';
+import LivePreview   from '../../learn/LivePreview.mjs';
 
 /**
  * @class Portal.view.home.parts.Helix
- * @extends Neo.container.Base
+ * @extends Portal.view.home.parts.BaseContainer
  */
-class Helix extends Container {
+class Helix extends BaseContainer {
     static config = {
         /**
          * @member {String} className='Portal.view.home.parts.Helix'
          * @protected
          */
         className: 'Portal.view.home.parts.Helix',
-
-        cls: ['page', 'cool-stuff'],
-
+        /**
+         * @member {Object} responsive
+         */
         responsive: {
             medium: {layout: {ntype: 'vbox', align: 'stretch', pack: 'center'}},
             large : {layout: {ntype: 'hbox', align: 'stretch', pack: 'center'}}
         },
-
         /**
          * @member {Object[]} items
          */
         items: [{
-            module: Container,
+            ntype : 'container',
             flex  : '1',
             style : {padding: '2rem'},
             layout: {ntype: 'vbox', align: 'center', pack: 'center'},
             items : [{
                 cls : 'neo-h1',
                 flex: 'none',
-                html: 'Interactive Views'
+                html: 'Extreme Speed',
+                vdom: {tag: 'h1'}
             }, {
                 cls : 'neo-h2',
                 flex: 'none',
-                html: 'Expand the widget into multiple Windows'
+                html: '40,000 Updates /s',
+                vdom: {tag: 'h2'}
             }, {
-                cls : 'neo-content',
+                cls : 'neo-h3',
+                flex: 'none',
+                vdom: {tag: 'p'},
+
+                html: [
+                    'This demo shows the Neo.mjs helix component, along with a "Helix Controls" panel. ',
+                    'Move your cursor over the helix, then rapidly scroll left and right to rotate, and up and down to zoom. ',
+                    'As you do, look at the delta updates counter at the top. ',
+                    'Neo.mjs easily handles 40,000 updates per second, and beyond.'
+                ].join('')
+            }, {
+                cls : 'neo-h1',
                 flex: 'none',
-                html: 'The State Management will continue to work.'
+                html: 'Multi-Window',
+                vdom: {tag: 'h1'}
+            }, {
+                cls : 'neo-h2',
+                flex: 'none',
+                html: 'Seamless and Simple',
+                vdom: {tag: 'h2'}
+            }, {
+                cls : 'neo-h3',
+                flex: 'none',
+                vdom: {tag: 'p'},
+
+                html: [
+                    'Click on the small window icon in the Helix Controls title bar and the controls open in their own window ',
+                    'which can be moved to a separate monitor. But the application logic doesn\'t care — ',
+                    'the logic updates the controls just like before, and framework seamlessly handles updating the DOM across windows.'
+                ].join('')
             }]
         }, {
-            module: Container,
+            ntype : 'container',
             flex  : '2',
-            style : {background: 'grey', padding: '20px'},
+            style : {background: 'lightgray', padding: '20px'},
             layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
             items : [{
-                module    : LivePreview,
-                activeView: 'preview',
-                cls       : ['page-live-preview'],
-                height    : '100%',
+                module   : LivePreview,
+                cls      : ['page-live-preview'],
+                height   : '100%',
+                reference: 'live-preview',
 
                 value: [
                     "import Viewport from '../../../../examples/component/multiWindowHelix/Viewport.mjs';",
@@ -68,6 +96,14 @@ class Helix extends Container {
             }]
         }]
     }
+
+    /**
+     *
+     */
+    async activate() {
+        await this.timeout(1000);
+        this.getReference('live-preview').activeView = 'preview'
+    }
 }
 
 Neo.setupClass(Helix);

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

@@ -1,11 +1,11 @@
-import Container            from '../../../../../src/container/Base.mjs';
+import BaseContainer        from './BaseContainer.mjs';
 import LivePreviewContainer from '../preview/PageCodeContainer.mjs';
 
 /**
  * @class Portal.view.home.parts.HelloWorld
- * @extends Neo.container.Base
+ * @extends Portal.view.home.parts.BaseContainer
  */
-class HelloWorld extends Container {
+class HelloWorld extends BaseContainer {
     static config = {
         /**
          * @member {String} className='Portal.view.home.parts.HelloWorld'
@@ -31,32 +31,33 @@ class HelloWorld extends Container {
             medium: {layout: {ntype: 'vbox', align: 'stretch', pack: 'center'}},
             large : {layout: {ntype: 'hbox', align: 'stretch', pack: 'center'}}
         },
-
         /**
          * @member {Object[]} items
          */
         items: [{
-            module: Container,
+            ntype : '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'
+                html: 'Hello World',
+                vdom: {tag: 'h1'}
             }, {
                 cls : 'neo-h2',
                 flex: 'none',
-                html: 'Your first code snippet'
+                html: 'Your first code snippet',
+                vdom: {tag: 'h2'}
             }, {
                 cls : 'neo-content',
                 flex: 'none',
-                html: 'If you understand these lines, you are ready to start with Neo.mjs'
+                html: 'If you understand these lines, you are ready to start with Neo.mjs',
+                vdom: {tag: 'p'}
             }]
         }, {
             module: LivePreviewContainer,
-            flex: 0.8,
+            flex  : 0.8,
             value : [
                 "import Container from '../../../../src/container/Base.mjs';",
                 "",

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

@@ -0,0 +1,66 @@
+import BaseContainer from './BaseContainer.mjs';
+
+/**
+ * @class Portal.view.home.parts.How
+ * @extends Portal.view.home.parts.BaseContainer
+ */
+class How extends BaseContainer {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.home.parts.How'
+         * @protected
+         */
+        className: 'Portal.view.home.parts.How',
+        /**
+         * @member {Object} responsive
+         */
+        responsive: {
+            medium: {layout: {ntype: 'vbox', align: 'stretch', pack: 'center'}},
+            large : {layout: {ntype: 'hbox', align: 'stretch', pack: 'center'}}
+        },
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            ntype : 'container',
+            flex  : '1',
+            style : {padding: '2rem'},
+            layout: {ntype: 'vbox', align: 'center', pack: 'center'},
+            items : [{
+                cls : 'neo-h1',
+                flex: 'none',
+                html: 'How?',
+                vdom: {tag: 'h1'}
+            }, {
+                cls : 'neo-h2',
+                flex: 'none',
+                html: 'How Does Neo.mjs Do It?',
+                vdom: {tag: 'h2'}
+            }, {
+                cls : 'neo-h3',
+                flex: 'none',
+                vdom: {tag: 'p'},
+                html: [
+                    'When a Neo.mjs app launches three webworkers are spawned: one that holds app logic, one for tracking delta DOM updates, ',
+                    'and one for backend calls. Each webworker runs in its own thread, and thus, in its own processor core. ',
+                    'This means these processes run in parallel: your app logic isn\'t affected by DOM changes or ',
+                    'by Ajax or socket calls. If you have processor-intensive tasks you can easily run them in their own threads.'
+                ].join('')
+            }]
+        }, {
+            ntype : 'container',
+            flex  : '2',
+            style : {background: 'lightgray', padding: '20px'},
+            layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
+            items : [{
+                flex : 'none',
+                style: {width: '100%'},
+                vdom : {tag: 'img', src: 'https://s3.amazonaws.com/mjs.neo.learning.images/why/IndexHtmlFlow.png'}
+            }]
+        }]
+    }
+}
+
+Neo.setupClass(How);
+
+export default How;