neo.mjs 6.22.1 → 6.24.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/view/HeaderToolbar.mjs

@@ -42,13 +42,9 @@ class HeaderToolbar extends Base {
             text : 'Services',
             route: '/services'
         }, {
-            ntype : 'container',
-            layout: 'hbox',
-
-            responsive: {
-                medium: { cls: ['separate-bar'], layout: 'vbox' },
-                large : { cls: ['inline'],       layout: 'hbox' }
-            },
+            ntype    : 'container',
+            layout   : 'hbox',
+            reference: 'header-social-icons',
 
             itemDefaults: {
                 ntype: 'button',

package/apps/portal/view/Viewport.mjs

@@ -95,7 +95,9 @@ class Viewport extends BaseViewport {
             NeoArray.add(   cls, 'portal-size-' + value);
             me.cls = cls;
 
-            me.model.setData({size: value})
+            me.model.setData({size: value});
+
+            me.controller.size = value
         }
     }
 

package/apps/portal/view/ViewportController.mjs

@@ -1,5 +1,6 @@
 import Controller        from '../../../src/controller/Component.mjs';
 import CubeLayout        from '../../../src/layout/Cube.mjs';
+import NeoArray          from '../../../src/util/Array.mjs';
 import {getSearchParams} from '../Util.mjs';
 
 /**
@@ -49,7 +50,12 @@ class ViewportController extends Controller {
             '/learn'         : 'onLearnRoute',
             '/learn/{itemId}': 'onLearnRoute',
             '/services'      : 'onServicesRoute',
-        }
+        },
+        /**
+         * Values are: large, medium, small, xSmall
+         * @member {String|null} size_=null
+         */
+        size_: null
     }
 
     /**
@@ -63,6 +69,16 @@ class ViewportController extends Controller {
      */
     #transitionId = 0
 
+    /**
+     * Triggered after the size activeIndex got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetActiveIndex(value, oldValue) {
+        value !== null && this.updateHeaderToolbar()
+    }
+
     /**
      * Triggered after the mainContentLayout config got changed
      * @param {String} value
@@ -80,6 +96,16 @@ class ViewportController extends Controller {
         }
     }
 
+    /**
+     * Triggered after the size config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetSize(value, oldValue) {
+        value && this.updateHeaderToolbar()
+    }
+
     /**
      * Triggered before the mainContentLayout config gets changed
      * @param {String} value
@@ -275,6 +301,29 @@ class ViewportController extends Controller {
             }
         }
     }
+
+    /**
+     *
+     */
+    updateHeaderToolbar() {
+        let me                  = this,
+            {activeIndex, size} = me;
+
+        if (Neo.isNumber(activeIndex) && size) {
+            let headerSocialIcons = me.getReference('header-social-icons'),
+                {cls}             = headerSocialIcons,
+                vertical          = size === 'x-small',
+                hidden            = activeIndex !== 0 && vertical;
+
+            headerSocialIcons.hidden = hidden;
+
+            if (!hidden) {
+                NeoArray.toggle(cls, 'separate-bar', vertical);
+
+                headerSocialIcons.cls = cls
+            }
+        }
+    }
 }
 
 Neo.setupClass(ViewportController);

package/apps/portal/view/blog/Container.mjs

@@ -36,20 +36,7 @@ class Container extends BaseContainer {
         }, {
             module   : List,
             flex     : 1,
-            reference: 'blog-list',
-            /**
-             * @member {Object[]} domListeners
-             */
-            domListeners: [{
-                scroll(event) {
-                    const isHomeContainer = event.target.cls.includes('portal-blog-list'),
-                          beyondEighty    = event.scrollTop > 80;
-
-                    if (isHomeContainer) {
-                        this.toggleCls('hide-sidebar', beyondEighty);
-                    }
-                }
-            }]
+            reference: 'blog-list'
         }],
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}

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

@@ -32,11 +32,8 @@ class MainContainer extends Container {
                 Neo.getComponent(data.targetId)?.activate?.()
             },
             scroll(event) {
-                const isHomeContainer = event.target.cls.includes('portal-home-maincontainer'),
-                      beyondEighty    = event.scrollTop > 80;
-
-                if (isHomeContainer) {
-                    this.toggleCls('hide-sidebar', beyondEighty);
+                if (event.target.cls.includes('portal-home-maincontainer')) {
+                    this.toggleCls('hide-sidebar', event.scrollTop > 80)
                 }
             }
         }],

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

@@ -16,14 +16,7 @@ class BaseContainer extends Container {
         /**
          * @member {String[]} cls=['portal-home-content-view','neo-container']
          */
-        baseCls: ['portal-home-content-view', 'neo-container'],
-        /**
-         * @member {Object} responsiveConfig
-         */
-        responsiveConfig: {
-            medium: {maxWidth: 840},
-            large : {minWidth: 841}
-        }
+        baseCls: ['portal-home-content-view', 'neo-container']
     }
 
     /**

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

@@ -13,12 +13,13 @@ class Colors extends BaseContainer {
          */
         className: 'Portal.view.home.parts.Colors',
         /**
-         * @member {Object} responsive
+         * @member {String[]} cls=['portal-home-parts-colors']
          */
-        responsive: {
-            medium: {layout: {ntype: 'vbox', align: 'stretch', pack: 'center'}},
-            large : {layout: {ntype: 'hbox', align: 'stretch', pack: 'center'}}
-        },
+        cls: ['portal-home-parts-colors'],
+        /**
+         * @member {Object} layout={ntype:'hbox',align:'stretch',pack:'center'}
+         */
+        layout: {ntype: 'hbox', align: 'stretch', pack: 'center'},
         /**
          * @member {Object[]} items
          */
@@ -32,15 +33,16 @@ class Colors extends BaseContainer {
                 cls : ['neo-h1'],
                 flex: 'none',
                 html: 'Amazing Potential',
-                vdom: {tag: 'h1'}
+                tag : 'h1'
             }, {
                 cls : ['neo-h2'],
                 flex: 'none',
                 html: 'Socket Data',
-                vdom: {tag: 'h2'}
+                tag : 'h2'
             }, {
                 flex: 'none',
-                vdom: {tag: 'p'},
+                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 ',
@@ -49,10 +51,11 @@ class Colors extends BaseContainer {
             }, {
                 flex: 'none',
                 html: 'But the demo differs from the helix example because the data is provided via a <i>socket</i>.',
-                vdom: {tag: 'p'}
+                tag : 'p'
             }, {
                 flex: 'none',
-                vdom: {tag: 'p'},
+                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.'

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

@@ -13,12 +13,13 @@ class Helix extends BaseContainer {
          */
         className: 'Portal.view.home.parts.Helix',
         /**
-         * @member {Object} responsive
+         * @member {String[]} cls=['portal-home-parts-helix']
          */
-        responsive: {
-            medium: {layout: {ntype: 'vbox', align: 'stretch', pack: 'center'}},
-            large : {layout: {ntype: 'hbox', align: 'stretch', pack: 'center'}}
-        },
+        cls: ['portal-home-parts-helix'],
+        /**
+         * @member {Object} layout={ntype:'hbox',align:'stretch',pack:'center'}
+         */
+        layout: {ntype: 'hbox', align: 'stretch', pack: 'center'},
         /**
          * @member {Object[]} items
          */
@@ -32,16 +33,16 @@ class Helix extends BaseContainer {
                 cls : 'neo-h1',
                 flex: 'none',
                 html: 'Extreme Speed',
-                vdom: {tag: 'h1'}
+                tag : 'h1'
             }, {
                 cls : 'neo-h2',
                 flex: 'none',
                 html: '40,000 Updates /s',
-                vdom: {tag: 'h2'}
+                tag : 'h2'
             }, {
                 cls : 'neo-h3',
                 flex: 'none',
-                vdom: {tag: 'p'},
+                tag : 'p',
 
                 html: [
                     'This demo shows the Neo.mjs helix component, along with a "Helix Controls" panel. ',
@@ -53,16 +54,16 @@ class Helix extends BaseContainer {
                 cls : 'neo-h1',
                 flex: 'none',
                 html: 'Multi-Window',
-                vdom: {tag: 'h1'}
+                tag : 'h1'
             }, {
                 cls : 'neo-h2',
                 flex: 'none',
                 html: 'Seamless and Simple',
-                vdom: {tag: 'h2'}
+                tag : 'h2'
             }, {
                 cls : 'neo-h3',
                 flex: 'none',
-                vdom: {tag: 'p'},
+                tag : 'p',
 
                 html: [
                     'Click on the small window icon in the Helix Controls title bar and the controls open in their own window ',

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

@@ -12,12 +12,13 @@ class How extends BaseContainer {
          */
         className: 'Portal.view.home.parts.How',
         /**
-         * @member {Object} responsive
+         * @member {String[]} cls=['portal-home-parts-how']
          */
-        responsive: {
-            medium: {layout: {ntype: 'vbox', align: 'stretch', pack: 'center'}},
-            large : {layout: {ntype: 'hbox', align: 'stretch', pack: 'center'}}
-        },
+        cls: ['portal-home-parts-how'],
+        /**
+         * @member {Object} layout={ntype:'hbox',align:'stretch',pack:'center'}
+         */
+        layout: {ntype: 'hbox', align: 'stretch', pack: 'center'},
         /**
          * @member {Object[]} items
          */
@@ -31,16 +32,17 @@ class How extends BaseContainer {
                 cls : ['neo-h1'],
                 flex: 'none',
                 html: 'How?',
-                vdom: {tag: 'h1'}
+                tag : 'h1'
             }, {
                 cls : ['neo-h2'],
                 flex: 'none',
                 html: 'How Does Neo.mjs Do It?',
-                vdom: {tag: 'h2'}
+                tag : 'h2'
             }, {
                 cls : ['neo-h3'],
                 flex: 'none',
-                vdom: {tag: 'p'},
+                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. ',

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

@@ -30,12 +30,12 @@ class References extends BaseContainer {
             cls : 'neo-h1',
             flex: 'none',
             html: 'References',
-            vdom: {tag: 'h1'}
+            tag : 'h1'
         }, {
             cls : 'neo-h2',
             flex: 'none',
             html: 'What people think about Neo',
-            vdom: {tag: 'h2'}
+            tag : 'h2'
         }, {
             module: Carousel,
             // will automatically change to the next extry every 5500 ms

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

@@ -25,19 +25,6 @@ class PageContainer extends Container {
             nextPageRecord    : data => data.nextPageRecord,
             previousPageRecord: data => data.previousPageRecord
         },
-        /**
-         * @member {Object[]} domListeners
-         */
-        domListeners: [{
-            scroll(event) {
-                const isHomeContainer = event.target.cls.includes('portal-learn-page-container'),
-                      beyondEighty    = event.scrollTop > 80;
-
-                if (isHomeContainer) {
-                    this.toggleCls('hide-sidebar', beyondEighty);
-                }
-            }
-        }],
         /**
          * @member {Object[]} items
          */

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

@@ -15,19 +15,6 @@ class Component extends BaseComponent {
          * @member {String[]} cls=['portal-services-component']
          */
         cls: ['portal-services-component'],
-        /**
-         * @member {Object[]} domListeners
-         */
-        domListeners: [{
-            scroll(event) {
-                const isHomeContainer = event.target.cls.includes('portal-services-component'),
-                      beyondEighty    = event.scrollTop > 80;
-
-                if (isHomeContainer) {
-                    this.toggleCls('hide-sidebar', beyondEighty);
-                }
-            }
-        }],
         /**
          * @member {Object} vdom
          */

package/examples/ServiceWorker.mjs

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

package/examples/component/video/MainContainer.mjs

@@ -1,16 +1,15 @@
-import Viewport  from '../../../src/container/Viewport.mjs';
-import Video     from '../../../src/component/Video.mjs';
-import Panel     from '../../../src/container/Panel.mjs';
 import MainContainerController from "./MainContainerController.mjs";
+import Panel                   from '../../../src/container/Panel.mjs';
+import Video                   from '../../../src/component/Video.mjs';
+import Viewport                from '../../../src/container/Viewport.mjs';
 
 /**
- * @class Neo.examples.component.timer.MainContainer
+ * @class Neo.examples.component.video.MainContainer
  * @extends Neo.examples.Viewport
  */
 class MainContainer extends Viewport {
     static config = {
-        className: 'Neo.examples.component.timer.MainContainer',
-
+        className : 'Neo.examples.component.timer.MainContainer',
         controller: MainContainerController,
 
         items : [{
@@ -35,7 +34,7 @@ class MainContainer extends Viewport {
                 module   : Video,
                 url      : 'https://video-ssl.itunes.apple.com/itunes-assets/Video125/v4/a0/57/54/a0575426-dd8e-2d25-bdf3-139702870b50/mzvf_786190431362224858.640x464.h264lc.U.p.m4v',
                 flag     : 'video-component',
-                minHeight: 400,
+                minHeight: 400
             }]
         }]
     }

package/examples/videoMove/MainContainer.mjs

@@ -0,0 +1,77 @@
+import Button   from '../../src/button/Base.mjs';
+import Video    from '../../src/component/Video.mjs';
+import Viewport from '../../src/container/Viewport.mjs';
+
+/**
+ * @class Neo.examples.videoMove.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Viewport {
+    static config = {
+        className: 'Neo.examples.videoMove.MainContainer',
+        layout   : {ntype: 'vbox', align: 'stretch'},
+        style    : {padding: '50px'},
+
+        items: [{
+            ntype : 'container',
+            layout: {ntype: 'hbox', align: 'stretch'},
+
+            itemDefaults: {
+                ntype : 'container',
+                layout: 'fit'
+            },
+
+            items: [{
+                reference: 'container-1',
+                style    : {backgroundColor: 'rgb(139,166,255)', padding: '50px'},
+
+                items: [{
+                    module : Video,
+                    playing: true,
+                    url    : 'https://video-ssl.itunes.apple.com/itunes-assets/Video125/v4/a0/57/54/a0575426-dd8e-2d25-bdf3-139702870b50/mzvf_786190431362224858.640x464.h264lc.U.p.m4v'
+                }]
+            }, {
+                reference: 'container-2',
+                style    : {backgroundColor: 'rgb(139,166,255)', marginLeft: '50px', padding: '50px'}
+            }]
+        }, {
+            ntype : 'container',
+            layout: {ntype: 'vbox', align: 'start'},
+            style : {marginTop: '50px'},
+
+            items: [{
+                module : Button,
+                handler: 'up.onMoveVideoButtonClick',
+                text   : 'Move Video'
+            }]
+        }]
+    }
+
+    /**
+     *
+     * @param {Object} data
+     */
+    onMoveVideoButtonClick(data) {
+        let me         = this,
+            container1 = me.getReference('container-1'),
+            container2 = me.getReference('container-2');
+
+        container1.silentVdomUpdate = true;
+        container2.silentVdomUpdate = true;
+
+        if (container2.items.length < 1) {
+            container2.add(container1.removeAt(0, false))
+        } else {
+            container1.add(container2.removeAt(0, false))
+        }
+
+        me.promiseUpdate().then(() => {
+            container1.silentVdomUpdate = false;
+            container2.silentVdomUpdate = false
+        })
+    }
+}
+
+Neo.setupClass(MainContainer);
+
+export default MainContainer;

package/examples/videoMove/app.mjs

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

package/examples/videoMove/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.mjs - Moving a Video Tag</title>
+</head>
+<body>
+    <script src="../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/videoMove/neo-config.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.22.1",
+    "version": "6.24.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -52,7 +52,7 @@
         "envinfo": "^7.13.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^10.1.4",
+        "inquirer": "^10.1.6",
         "marked": "^13.0.3",
         "monaco-editor": "^0.50.0",
         "neo-jsdoc": "1.0.1",

package/resources/scss/src/apps/portal/HeaderToolbar.scss

@@ -37,17 +37,18 @@
     }
 
     .separate-bar {
-        animation: fade-in-animation 200ms linear;
-        box-shadow: 0 5px 10px rgba(0,0,0,.3);
-        position: absolute;
-        right   : 0;
-        top     : 58px;
-        z-index  : 9;
+        animation     : fade-in-animation 200ms linear;
+        box-shadow    : 0 5px 10px rgba(0,0,0,.3);
+        flex-direction: column;
+        position      : absolute;
+        right         : 0;
+        top           : 58px;
+        z-index       : 9;
     }
 
     // find parallel class hide-sidebar
     &:has(+div .hide-sidebar) .separate-bar {
-        animation: fade-animation 200ms linear forwards;
+        animation: fade-out-animation 200ms linear forwards;
     }
 }
 
@@ -118,22 +119,22 @@
 @keyframes fade-in-animation {
     from {
         opacity: 0;
-        right  : -10px
+        right  : -30px
     }
     to {
         opacity: 1;
-        right  : 20px;
+        right  : 0;
     }
 }
 
-@keyframes fade-animation {
+@keyframes fade-out-animation {
     from {
         opacity: 1;
-        right  : 20px;
+        right  : 0;
     }
     to {
         opacity: 0;
-        right  : -10px
+        right  : -30px
     }
 }
 

package/resources/scss/src/apps/portal/about/MemberContainer.scss

@@ -50,8 +50,9 @@
     }
 
     @media (max-width: 600px) {
-        min-width: 100%;
-        padding  : 1em;
+        min-height: 300px;
+        min-width : 100%;
+        padding   : 1em;
 
         .portal-profiles {
             flex-direction: column;

package/resources/scss/src/apps/portal/home/parts/Colors.scss

@@ -0,0 +1,7 @@
+.portal-home-parts-colors {
+    @media (max-width: 840px) {
+        &.neo-flex-container {
+            flex-direction: column;
+        }
+    }
+}

package/resources/scss/src/apps/portal/home/parts/Helix.scss

@@ -0,0 +1,7 @@
+.portal-home-parts-helix {
+    @media (max-width: 840px) {
+        &.neo-flex-container {
+            flex-direction: column;
+        }
+    }
+}

package/resources/scss/src/apps/portal/home/parts/How.scss

@@ -0,0 +1,7 @@
+.portal-home-parts-how {
+    @media (max-width: 840px) {
+        &.neo-flex-container {
+            flex-direction: column;
+        }
+    }
+}

package/src/DefaultConfig.mjs

@@ -260,12 +260,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.22.1'
+     * @default '6.24.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.22.1'
+    version: '6.24.0'
 };
 
 Object.assign(DefaultConfig, {