neo.mjs 7.1.0 → 7.2.0

package/apps/portal/view/ViewportController.mjs

@@ -43,13 +43,15 @@ class ViewportController extends Controller {
          * @member {Object} routes
          */
         routes: {
-            '/about-us'      : 'onAboutUsRoute',
-            '/blog'          : 'onBlogRoute',
-            '/docs'          : 'onDocsRoute',
-            '/home'          : 'onHomeRoute',
-            '/learn'         : 'onLearnRoute',
-            '/learn/{itemId}': 'onLearnRoute',
-            '/services'      : 'onServicesRoute',
+            '/about-us'         : 'onAboutUsRoute',
+            '/blog'             : 'onBlogRoute',
+            '/docs'             : 'onDocsRoute',
+            '/examples'         : 'onExamplesRoute',
+            '/examples/{itemId}': 'onExamplesRoute',
+            '/home'             : 'onHomeRoute',
+            '/learn'            : 'onLearnRoute',
+            '/learn/{itemId}'   : 'onLearnRoute',
+            '/services'         : 'onServicesRoute'
         },
         /**
          * Values are: large, medium, small, xSmall
@@ -230,7 +232,16 @@ class ViewportController extends Controller {
      * @param {Object} oldValue
      */
     onDocsRoute(params, value, oldValue) {
-        this.setMainContentIndex(3)
+        this.setMainContentIndex(6)
+    }
+
+    /**
+     * @param {Object} params
+     * @param {Object} value
+     * @param {Object} oldValue
+     */
+    onExamplesRoute(params, value, oldValue) {
+        this.setMainContentIndex(4)
     }
 
     /**
@@ -257,7 +268,7 @@ class ViewportController extends Controller {
      * @param {Object} oldValue
      */
     onServicesRoute(params, value, oldValue) {
-        this.setMainContentIndex(4)
+        this.setMainContentIndex(3)
     }
 
     /**
@@ -272,12 +283,19 @@ class ViewportController extends Controller {
 
         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)) {
+            if (
+                mainContentLayout === 'mixed' &&
+                // skip the initial layout-switch, since we do not need a transition
+                Neo.isNumber(activeIndex) &&
+                // also skip the layout switch in case the index >= 6, since a cube only has 6 faces
+                index < 6 &&
+                // also skip the layout switch in case we navigate back from a non-cube item
+                activeIndex < 6
+            ) {
+                me.#transitionId++;
+
+                transitionId = me.#transitionId;
                 updateLayout = false;
 
                 // enable "fast clicking" on main nav items => do not replace a cube layout with a new instance of cube

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

@@ -58,9 +58,9 @@ class Container extends Base {
             teamRole       : 'Training'
         }],
         /**
-         * @member {Object} layout={ntype:'vbox',align:'start'}
+         * @member {Object} layout={ntype:'vbox',align:'center'}
          */
-        layout: {ntype: 'vbox', align: 'start'}
+        layout: {ntype: 'vbox', align: 'center'}
     }
 }
 

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

@@ -28,9 +28,9 @@ class List extends BaseList {
         /**
          * Specify the amount of delayed observe() calls, in case the IntersectionObserver does not find targets.
          * This can happen when moving the component inside the DOM (e.g. cube layout)
-         * @member {Number} intersectionObserverReconnects=5
+         * @member {Number} intersectionObserverReconnects=10
          */
-        intersectionObserverReconnects: 5,
+        intersectionObserverReconnects: 10,
         /**
          * Specify how many blog item images to preload when intersecting
          * @member {Number} preloadImages=5
@@ -249,7 +249,7 @@ class List extends BaseList {
             len  = me.intersectionObserverReconnects,
             data;
 
-        await me.timeout(50);
+        await me.timeout(150);
 
         data = await Neo.main.addon.IntersectionObserver.register({
             ...opts,

package/apps/portal/view/examples/List.mjs

@@ -0,0 +1,122 @@
+import BaseList from '../../../../src/list/Base.mjs';
+import Examples from '../../store/Examples.mjs';
+
+/**
+ * @class Portal.view.examples.List
+ * @extends Neo.list.Base
+ */
+class List extends BaseList {
+    /**
+     * A regex to enforce a maxLength (word break)
+     * @member {RegExp} nameRegEx
+     * @protected
+     * @static
+     */
+    static nameRegEx = /^(.{65}[^\s]*).*/
+
+    static config = {
+        /**
+         * @member {String} className='Portal.view.examples.List'
+         * @protected
+         */
+        className: 'Portal.view.examples.List',
+        /**
+         * @member {String[]} baseCls=['portal-examples-list','neo-list']
+         */
+        baseCls: ['portal-examples-list', 'neo-list'],
+        /**
+         * @member {Neo.data.Store} store=Examples
+         */
+        store: Examples,
+        /**
+         * @member {String|null} storeUrl_=null
+         */
+        storeUrl_: null,
+        /**
+         * @member {Boolean} useWrapperNode=true
+         */
+        useWrapperNode: true,
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {cn: [
+            {tag: 'ul', cn: []}
+        ]}
+    }
+
+    /**
+     * Triggered before the store config gets changed.
+     * @param {Object|Neo.data.Store} value
+     * @param {Object|Neo.data.Store} oldValue
+     * @returns {Neo.data.Store}
+     * @protected
+     */
+    beforeSetStore(value, oldValue) {
+        if (value) {
+            if (value.isClass) {
+                value = {
+                    module: value,
+                    url   : this.storeUrl
+                };
+            } else if (Neo.isObject(value)) {
+                value.url = this.storeUrl;
+            }
+        }
+
+        return super.beforeSetStore(value, oldValue);
+    }
+
+    /**
+     * @param {Object} record
+     */
+    createItemContent(record) {
+        let basePath;
+
+        if (Neo.config.isGitHubPages) {
+            basePath = '../../../../resources_pub/website/examples';
+
+            if (Neo.config.environment !== 'development') {
+                basePath = '../../' + basePath
+            }
+        } else {
+            basePath = 'https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/website/examples'
+        }
+
+        return [
+            {cls: ['content', 'neo-relative'], cn: [
+                {cls: ['neo-full-size', 'preview-image'], style: {
+                    backgroundImage: `url('${basePath}/${record.image}'), linear-gradient(#777, #333)`}
+                },
+                {cls: ['neo-absolute', 'neo-item-bottom-position'], cn: [
+                    {tag: 'a', cls: ['neo-title'], href: record.url, target: '_blank', cn: [
+                        {html: record.name.replace(List.nameRegEx, "$1")}
+                    ]},
+                    {cls: ['neo-top-20'], cn: [
+                        {tag: 'a', cls: ['fab fa-github', 'neo-github-image'], href: record.sourceUrl, target: '_blank'},
+                        {cls: ['neo-inner-content'], cn: [
+                            {cls: ['neo-inner-details'], html: record.browsers.join(', ')},
+                            {cls: ['neo-inner-details'], html: record.environments.join(', ')}
+                        ]}
+                    ]}
+                ]}
+            ]}
+        ]
+    }
+
+    /**
+     * @returns {Object}
+     */
+    getVdomRoot() {
+        return this.vdom.cn[0]
+    }
+
+    /**
+     * @returns {Object}
+     */
+    getVnodeRoot() {
+        return this.vnode.childNodes[0]
+    }
+}
+
+export default Neo.setupClass(List);

package/apps/portal/view/examples/TabContainer.mjs

@@ -0,0 +1,79 @@
+import Container              from '../../../../src/tab/Container.mjs';
+import List                   from './List.mjs';
+import TabContainerController from './TabContainerController.mjs';
+
+/**
+ * @class Portal.view.examples.TabContainer
+ * @extends Neo.tab.Container
+ */
+class TabContainer extends Container {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.examples.TabContainer'
+         * @protected
+         */
+        className: 'Portal.view.examples.TabContainer',
+        /**
+         * @member {Number|null} activeIndex=null
+         */
+        activeIndex: null,
+        /**
+         * @member {String[]} baseCls=['portal-examples-tab-container','neo-tab-container']
+         */
+        baseCls: ['portal-examples-tab-container', 'neo-tab-container'],
+        /**
+         * @member {Neo.controller.Component} controller=TabContainerController
+         */
+        controller: TabContainerController,
+        /**
+         * @member {Object} headerToolbarDefaults
+         */
+        headerToolbarDefaults: {
+            cls: ['portal-examples-tab-header-toolbar']
+        },
+        /**
+         * @member {Object} itemDefaults
+         */
+        itemDefaults: {
+            module: List
+        },
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            reference      : 'examples-devmode-list',
+            storeUrl       : '../../apps/portal/resources/data/examples_devmode.json',
+            tabButtonConfig: {
+                iconCls: 'fa fa-chess-knight',
+                route  : '/examples/devmode',
+                text   : 'DevMode'
+            }
+        }, {
+            reference      : 'examples-dist-dev-list',
+            storeUrl       : '../../apps/portal/resources/data/examples_dist_dev.json',
+            tabButtonConfig: {
+                iconCls: 'fa fa-chess-queen',
+                route  : '/examples/dist_dev',
+                text   : 'dist/dev'
+            }
+        }, {
+            reference      : 'examples-dist-prod-list',
+            storeUrl       : '../../apps/portal/resources/data/examples_dist_prod.json',
+            tabButtonConfig: {
+                iconCls: 'fa fa-chess-king',
+                route  : '/examples/dist_prod',
+                text   : 'dist/prod'
+            }
+        }],
+        /**
+         * @member {Boolean} sortable=true
+         */
+        sortable: true,
+        /**
+         * @member {String} tabBarPosition='left'
+         */
+        tabBarPosition: 'left',
+    }
+}
+
+export default Neo.setupClass(TabContainer);

package/apps/portal/view/examples/TabContainerController.mjs

@@ -0,0 +1,41 @@
+import Component from '../../../../src/controller/Component.mjs';
+
+/**
+ * @class Portal.view.examples.TabContainerController
+ * @extends Neo.controller.Component
+ */
+class TabContainerController extends Component {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.examples.TabContainerController'
+         * @protected
+         */
+        className: 'Portal.view.examples.TabContainerController',
+        /**
+         * @member {Object} routes
+         */
+        routes: {
+            '/examples'         : 'onExamplesRoute',
+            '/examples/{itemId}': 'onExamplesRoute'
+        }
+    }
+
+    /**
+     * @param {Object} params
+     * @param {Object} value
+     * @param {Object} oldValue
+     */
+    onExamplesRoute(params, value, oldValue) {
+        let me     = this,
+            itemId = params?.itemId || 'dist_prod',
+            store  = me.getReference(`examples-${itemId.replace('_', '-')}-list`).store;
+
+        if (store?.getCount() < 1) {
+            store.load()
+        }
+
+        me.component.activeIndex = itemId === 'dist_prod' ? 2 : itemId === 'dist_dev' ? 1 : 0
+    }
+}
+
+export default Neo.setupClass(TabContainerController);

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

@@ -111,7 +111,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v7.1.0'
+                html  : 'v7.2.0'
             }]
         }],
         /**

package/apps/shareddialog/view/MainContainerController.mjs

@@ -28,6 +28,10 @@ class MainContainerController extends ComponentController {
          * @member {String} dockedWindowAppName='SharedDialog2'
          */
         dockedWindowAppName: 'SharedDialog2',
+        /**
+         * @member {Number|null} dockedWindowId=null
+         */
+        dockedWindowId: null,
         /**
          * @member {Neo.component.Base|null} dockedWindowProxy=null
          */
@@ -40,7 +44,7 @@ class MainContainerController extends ComponentController {
         /**
          * @member {Number} dockedWindowSize=500
          */
-        dockedWindowSize: 500,
+        dockedWindowSize: 620,
         /**
          * @member {Object} dialogRect=null
          */
@@ -67,7 +71,7 @@ class MainContainerController extends ComponentController {
             connect   : me.onAppConnect,
             disconnect: me.onAppDisconnect,
             scope     : me
-        });
+        })
     }
 
     /**
@@ -81,7 +85,7 @@ class MainContainerController extends ComponentController {
             Neo.main.addon.WindowPosition.setDock({
                 name: this.dockedWindowAppName,
                 dock: value
-            });
+            })
         }
     }
 
@@ -90,15 +94,17 @@ class MainContainerController extends ComponentController {
      * @param {String} appName
      */
     createDialog(data, appName) {
-        let me = this;
+        let me         = this,
+            {windowId} = me;
 
         me.enableOpenDialogButtons(false);
 
         me.dialog = Neo.create(DemoDialog, {
             animateTargetId    : data.component.id,
-            appName            : appName,
+            appName,
             boundaryContainerId: null,
             cls                : [me.currentTheme, 'neo-dialog', 'neo-panel', 'neo-container'],
+            windowId,
 
             dragZoneConfig: {
                 alwaysFireDragMove: true
@@ -109,7 +115,7 @@ class MainContainerController extends ComponentController {
                 dragZoneCreated: me.onDragZoneCreated,
                 scope          : me
             }
-        });
+        })
     }
 
     /**
@@ -164,7 +170,7 @@ class MainContainerController extends ComponentController {
             me.mountDialogInOtherWindow({
                 fullyIncludeIntoWindow: true,
                 proxyRect             : proxyRect
-            });
+            })
         }
     }
 
@@ -173,15 +179,15 @@ class MainContainerController extends ComponentController {
      */
     enableOpenDialogButtons(enable) {
         this.getOpenDialogButtons().forEach(button => {
-            button.disabled = !enable;
-        });
+            button.disabled = !enable
+        })
     }
 
     /**
      * @return {Neo.button.Base}
      */
     getOpenDockedWindowButton() {
-        return this.component.down({iconCls: 'far fa-window-restore'});
+        return this.component.down({iconCls: 'far fa-window-restore'})
     }
 
     /**
@@ -190,7 +196,7 @@ class MainContainerController extends ComponentController {
     getOpenDialogButtons() {
         return ComponentManager.find({
             flag: 'open-dialog-button'
-        });
+        })
     }
 
     /**
@@ -203,7 +209,7 @@ class MainContainerController extends ComponentController {
             left  : 'right',
             right : 'left',
             top   : 'bottom'
-        }[side];
+        }[side]
     }
 
     /**
@@ -237,17 +243,14 @@ class MainContainerController extends ComponentController {
                 break;
         }
 
-        return {
-            left: left,
-            top : top
-        };
+        return {left, top}
     }
 
     /**
      * @return {Boolean}
      */
     hasDockedWindow() {
-        return this.connectedApps.includes(this.dockedWindowAppName);
+        return this.connectedApps.includes(this.dockedWindowAppName)
     }
 
     /**
@@ -277,6 +280,8 @@ class MainContainerController extends ComponentController {
         me.timeout(70).then(() => {
             dialog.appName = dialog.appName === dragEndWindowAppName ? appName : dragEndWindowAppName;
 
+            // todo: windowI
+
             me.getOpenDialogButtons().forEach(button => {
                 if (button.appName === dialog.appName) {
                     dialog.animateTargetId = button.id
@@ -299,6 +304,7 @@ class MainContainerController extends ComponentController {
     /**
      * @param {Object} data
      * @param {String} data.appName
+     * @param {Number} data.windowId
      */
     onAppConnect(data) {
         let me   = this,
@@ -311,6 +317,7 @@ class MainContainerController extends ComponentController {
         }
 
         if (name === me.dockedWindowAppName) {
+            me.dockedWindowId = data.windowId;
             me.getOpenDockedWindowButton().disabled = true
         }
 
@@ -385,9 +392,8 @@ class MainContainerController extends ComponentController {
 
             if (Rectangle.leavesSide(dragStartWindowRect, proxyRect, side)) {
                 if (Rectangle.excludes(dragStartWindowRect, proxyRect)) {
-                    me.mountDialogInOtherWindow({
-                        proxyRect: proxyRect
-                    })
+                    console.log('mountDialogInOtherWindow');
+                    me.mountDialogInOtherWindow({proxyRect})
                 } else {
                     me.dropDialogBetweenWindows(proxyRect)
                 }
@@ -400,18 +406,17 @@ class MainContainerController extends ComponentController {
      */
     onDragMove(data) {
         if (this.hasDockedWindow()) {
-            let me                  = this,
-                dialogRect          = me.dialogRect,
-                dockedWindowAppName = me.dockedWindowAppName,
-                dragStartWindowRect = me.dragStartWindowRect,
-                proxyRect           = Rectangle.moveTo(dialogRect, data.clientX - data.offsetX, data.clientY - data.offsetY),
-                side                = me.dockedWindowSide,
+            let me        = this,
+                 {dialogRect, dragStartWindowRect, dockedWindowAppName, dockedWindowId} = me,
+                proxyRect = Rectangle.moveTo(dialogRect, data.clientX - data.offsetX, data.clientY - data.offsetY),
+                side      = me.dockedWindowSide,
                 proxyPosition, vdom;
 
             // in case we trigger the drag:start inside the docked window,
             // we can keep the same logic with just flipping the side.
             if (me.dialog.appName === dockedWindowAppName) {
                 dockedWindowAppName = me.component.appName;
+                dockedWindowId      = me.component.windowId;
                 side                = me.getOppositeSide(me.dockedWindowSide);
             }
 
@@ -434,14 +439,16 @@ class MainContainerController extends ComponentController {
                         appName   : dockedWindowAppName,
                         autoMount : true,
                         autoRender: true,
-                        cls       : ['neo-dialog-wrapper'],
+                        cls       : ['neo-dialog', 'neo-dragproxy'],
                         parentId  : 'document.body',
-                        vdom      : vdom
+                        vdom      : vdom,
+                        windowId  : dockedWindowId
                     });
-
+console.log(me.windowId, dockedWindowId);
                     // The other window has most likely not loaded The dialog JS module yet,
                     // but the drag proxy is using some CSS rules of it.
-                    Neo.currentWorker.insertThemeFiles(dockedWindowAppName, Neo.dialog.Base.prototype)
+                    Neo.currentWorker.insertThemeFiles(dockedWindowId, Neo.dialog.Base.prototype);
+                    Neo.currentWorker.insertThemeFiles(dockedWindowId, Neo.draggable.DragProxyComponent.prototype)
                 } else {
                     me.updateDockedWindowProxyStyle({
                         ...proxyPosition,

package/examples/ServiceWorker.mjs

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

package/examples/todoList/version2/TodoListModel.mjs

@@ -6,7 +6,7 @@ import Model from '../../../src/data/Model.mjs';
  */
 class TodoListModel extends Model {
     static config = {
-        className  : 'Neo.examples.todoList.version2.MainModel',
+        className  : 'Neo.examples.todoList.version2.TodoListModel',
         keyProperty: 'id',
 
         fields: [{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "7.1.0",
+    "version": "7.2.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

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

@@ -1,8 +1,9 @@
 .portal-about-member-container {
-    border   : 1px solid var(--sem-color-border-default);
-    min-width: 600px;
-    padding  : 1em 1em 4em;
-    position : relative;
+    border    : 1px solid var(--sem-color-border-default);
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+    min-width : 600px;
+    padding   : 1em 1em 4em;
+    position  : relative;
 
     &:not(:nth-child(2)) {
         margin-top: 1em;

package/resources/scss/src/apps/portal/blog/Container.scss

@@ -14,5 +14,7 @@
 
     .portal-blog-toolbar {
         background-color: var(--portal-blog-toolbar-background-color);
+        box-shadow      : 0 5px 10px rgba(0, 0, 0, 0.3);
+        z-index         : 2;
     }
 }