neo.mjs 6.23.0 → 6.25.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.23.0'
+         * @member {String} version='6.25.0'
          */
-        version: '6.23.0'
+        version: '6.25.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';
 
 /**
@@ -27,9 +28,9 @@ class ViewportController extends Controller {
          */
         ntype: 'viewport-controller',
         /**
-         * @member {Number|null} activeIndex=null
+         * @member {Number|null} activeIndex_=null
          */
-        activeIndex: null,
+        activeIndex_: null,
         /**
          * @member {String|null} defaultHash='/home'
          */
@@ -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,36 @@ class ViewportController extends Controller {
             }
         }
     }
+
+    /**
+     *
+     */
+    async 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;
+
+            NeoArray.toggle(cls, 'hide-sidebar', hidden);
+
+            if (!hidden) {
+                NeoArray.toggle(cls, 'separate-bar', vertical)
+            }
+
+            headerSocialIcons.cls = cls
+
+
+            if (hidden && vertical) {
+                await me.timeout(200)
+            }
+
+            headerSocialIcons.hidden = hidden;
+        }
+    }
 }
 
 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/MainContainer.mjs

@@ -29,17 +29,21 @@ class MainContainer extends Container {
          * @member {Object[]} items
          */
         items: [{
-            module  : Container,
-            bind    : {hidden: data => data.size === 'x-small'},
-            cls     : ['sidenav-container'],
-            layout  : 'fit',
-            minWidth: 350,
-            tag     :'aside',
-            width   : 350,
+            module   : Container,
+            cls      : ['sidenav-container'],
+            layout   : 'fit',
+            reference: 'sidenav-container',
+            tag      : 'aside',
 
             items: [{
                 module   : ContentTreeList,
                 reference: 'tree'
+            }, {
+                ntype  : 'button',
+                cls    : ['sidenav-button'],
+                handler: 'onSideNaveToggleButtonClick',
+                iconCls: 'fas fa-bars',
+                ui     : 'secondary'
             }]
         }, {
             module      : Splitter,

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

@@ -155,6 +155,13 @@ class MainContainerController extends Controller {
             })
         }
     }
+
+    /**
+     * @param {Object} data
+     */
+    onSideNaveToggleButtonClick(data) {
+        this.getReference('sidenav-container').toggleCls('neo-expanded')
+    }
 }
 
 Neo.setupClass(MainContainerController);

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

@@ -108,6 +108,8 @@ class MainContainerModel extends Component {
 
                 me.setData({nextPageText, nextPageRecord});
 
+                me.component.getReference('sidenav-container')?.toggleCls('neo-expanded', false)
+
                 break
             }
 

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.23.0'
+         * @member {String} version='6.25.0'
          */
-        version: '6.23.0'
+        version: '6.25.0'
     }
 
     /**

package/examples/videoMove/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="UTF-8">
-    <title>Neo.mjs -Moving a Video Tag</title>
+    <title>Neo.mjs - Moving a Video Tag</title>
 </head>
 <body>
     <script src="../../src/MicroLoader.mjs" type="module"></script>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.23.0",
+    "version": "6.25.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.5",
+        "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,22 @@
     }
 
     .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;
+
+        &.hide-sidebar {
+            animation: fade-out-animation 200ms linear forwards;
+        }
     }
 
     // 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 +123,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/resources/scss/src/apps/portal/learn/ContentTreeList.scss

@@ -9,17 +9,33 @@
     &.neo-tree-list {
         .neo-list-container {
             .neo-list-item {
+                &.neo-list-item-leaf {
+                    .neo-list-item-content:after {
+                        content: none !important;
+                    }
+                }
+
                 .neo-list-item-content:before {
                     content: unset !important;
                 }
 
                 &.neo-list-folder {
+                    .neo-list-item-content:after {
+                        content: "\e5cc" !important;
+                    }
+
                     .neo-list-item-content:before {
                         content: unset !important;
                     }
 
-                    &.neo-folder-open .neo-list-item-content:before {
-                        content: unset !important;
+                    &.neo-folder-open {
+                        .neo-list-item-content:after {
+                            content: "\e5cf" !important;
+                        }
+
+                        .neo-list-item-content:before {
+                            content: unset !important;
+                        }
                     }
                 }
             }
@@ -78,28 +94,4 @@
             }
         }
     }
-
-    &.neo-tree-list {
-        .neo-list-container {
-            .neo-list-item {
-                &.neo-list-item-leaf {
-                    .neo-list-item-content:after {
-                        content: none !important;
-                    }
-                }
-
-                &.neo-list-folder {
-                    .neo-list-item-content:after {
-                        content: "\e5cc" !important;
-                    }
-
-                    &.neo-folder-open {
-                        .neo-list-item-content:after {
-                            content: "\e5cf" !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
 }

package/resources/scss/src/apps/portal/learn/MainContainer.scss

@@ -4,32 +4,32 @@
     .main-content-splitter {
         margin: 0;
     }
-}
 
-// todo: @mxmrtns this makes scrollbars globally(!) invisible
-// Scrollbar Behaviour
-/*::-webkit-scrollbar {
-    width: 6px;
-}
+    .sidenav-container {
+        min-width: 350px;
+        width    : 350px;
+    }
 
-::-webkit-scrollbar-track {
-background: transparent;
-}
+    @media (max-width: 640px) {
+        .sidenav-container {
+            box-shadow: 0 5px 10px rgba(0,0,0,.3);
+            left      : -350px;
+            overflow  : visible;
+            position  : fixed;
+            transition: left 250ms ease-out;
 
-::-webkit-scrollbar-thumb {
-background: transparent;
-}
+            &.neo-expanded {
+                left: 0;
+            }
 
-.neo-tree-list:hover {
-    ::-webkit-scrollbar-thumb {
-        background: #b2b2b2;
-        border-radius: 100px;
+            .sidenav-button {
+                box-shadow: 0 5px 10px rgba(0,0,0,.3);
+                height    : 35px;
+                min-width : 35px;
+                position  : absolute;
+                right     : -42px;
+                width     : 35px;
+            }
+        }
     }
 }
-
-.learn-content:hover {
-    ::-webkit-scrollbar-thumb {
-        background: #b2b2b2;
-        border-radius: 100px;
-    }
-}*/

package/src/DefaultConfig.mjs

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