neo.mjs 6.22.0 → 6.23.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/view/ViewportController.mjs

@@ -9,7 +9,7 @@ import {getSearchParams} from '../Util.mjs';
 class ViewportController extends Controller {
     /**
      * Valid values for mainContentLayout
-     * @member {String[]} iconPositions=['top','right','bottom','left']
+     * @member {String[]} mainContentLayouts=['card','cube','mixed']
      * @protected
      * @static
      */
@@ -56,6 +56,12 @@ class ViewportController extends Controller {
      * @member {String[]} connectedApps=[]
      */
     connectedApps = []
+    /**
+     * Internal flag to store the amount of main navigation changes
+     * @member {Number} #transitionId=0
+     * @private
+     */
+    #transitionId = 0
 
     /**
      * Triggered after the mainContentLayout config got changed
@@ -108,7 +114,7 @@ class ViewportController extends Controller {
                 livePreviewId   = getSearchParams(searchString).id,
                 livePreview     = Neo.getComponent(livePreviewId),
                 sourceContainer = livePreview.getReference('preview'),
-                tabContainer    = livePreview.tabContainer,
+                {tabContainer}  = livePreview,
                 sourceView      = sourceContainer.removeAt(0, false);
 
             livePreview.previewContainer = mainView;
@@ -136,7 +142,7 @@ class ViewportController extends Controller {
                 livePreviewId   = getSearchParams(searchString).id,
                 livePreview     = Neo.getComponent(livePreviewId),
                 sourceContainer = livePreview.getReference('preview'),
-                tabContainer    = livePreview.tabContainer,
+                {tabContainer}  = livePreview,
                 sourceView      = mainView.removeAt(0, false);
 
             livePreview.previewContainer = null;
@@ -235,16 +241,23 @@ class ViewportController extends Controller {
         let me                               = this,
             {activeIndex, mainContentLayout} = me,
             container                        = me.getReference('main-content'),
-            updateLayout                     = true;
+            updateLayout                     = true,
+            transitionId;
 
         if (index !== activeIndex) {
+            me.activeIndex = index;
+            me.#transitionId++;
+
+            transitionId = me.#transitionId;
+
             // skip the initial layout-switch, since we do not need a transition
             if (mainContentLayout === 'mixed' && Neo.isNumber(activeIndex)) {
                 updateLayout = false;
 
-                container.wrapperStyle; // todo: without accessing the getter, the flex value can get lost.
-
-                container.layout = {ntype: 'cube', activeIndex, fitContainer: true, hideInactiveCardsOnDestroy: true};
+                // enable "fast clicking" on main nav items => do not replace a cube layout with a new instance of cube
+                if (container.layout.ntype !== 'layout-cube') {
+                    container.layout = {ntype: 'cube', activeIndex, fitContainer: true, hideInactiveCardsOnDestroy: true}
+                }
 
                 await me.timeout(200);
 
@@ -252,14 +265,14 @@ class ViewportController extends Controller {
 
                 await me.timeout(1100);
 
-                container.layout = {ntype: 'card', activeIndex: index}
+                if (transitionId === me.#transitionId) {
+                    container.layout = {ntype: 'card', activeIndex: index}
+                }
             }
 
             if (updateLayout) {
                 container.layout.activeIndex = index
             }
-
-            me.activeIndex = index
         }
     }
 }

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

@@ -31,6 +31,14 @@ class Container extends Base {
             profileLinkedIn: 'https://www.linkedin.com/in/tobiasuhlig/',
             profileX       : 'https://x.com/UhligTobias',
             teamRole       : 'Co-Founder & Core Team Member'
+        }, {
+            module         : MemberContainer,
+            location       : 'Germany',
+            name           : 'Torsten Dinkheller',
+            picture        : 'torsten.png',
+            profileGitHub  : 'https://github.com/Dinkh',
+            profileLinkedIn: 'https://www.linkedin.com/in/dinkheller/',
+            teamRole       : 'Co-Founder & Core Team Member'
         }],
         /**
          * @member {Object} layout={ntype:'vbox',align:'start'}

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

@@ -36,7 +36,20 @@ class Container extends BaseContainer {
         }, {
             module   : List,
             flex     : 1,
-            reference: 'blog-list'
+            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);
+                    }
+                }
+            }]
         }],
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}

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

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

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

@@ -25,6 +25,19 @@ 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,6 +15,19 @@ 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.0'
+         * @member {String} version='6.23.0'
          */
-        version: '6.22.0'
+        version: '6.23.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.0",
+    "version": "6.23.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.5",
         "marked": "^13.0.3",
         "monaco-editor": "^0.50.0",
         "neo-jsdoc": "1.0.1",

package/src/DefaultConfig.mjs

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