neo.mjs 7.7.0 → 7.9.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2024-09-20",
+      "datePublished": "2024-09-27",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/neo-config.json

@@ -13,6 +13,7 @@
         "DragDrop",
         "HighlightJS",
         "IntersectionObserver",
+        "LocalStorage",
         "MonacoEditor",
         "Navigator",
         "ResizeObserver",

package/apps/portal/view/ViewportController.mjs

@@ -36,9 +36,9 @@ class ViewportController extends Controller {
          */
         defaultHash: '/home',
         /**
-         * @member {String} mainContentLayout_='mixed'
+         * @member {String} mainContentLayout_='card'
          */
-        mainContentLayout_: 'mixed',
+        mainContentLayout_: 'card',
         /**
          * @member {Object} routes
          */
@@ -88,14 +88,30 @@ class ViewportController extends Controller {
      * @protected
      */
     afterSetMainContentLayout(value, oldValue) {
-        let {activeIndex} = this,
-            container     = this.component.getItem('main-content'); // happens before instantiation
+        let me                      = this,
+            {activeIndex, windowId} = me,
+            container               = me.component.getItem('main-content'); // happens before instantiation
+
+        if (oldValue === undefined) {
+            // We can not turn this method itself into async and await the addon response,
+            // since the container needs its layout right away
+            Neo.main.addon.LocalStorage.readLocalStorageItem({
+                key: 'mainContentLayout',
+                windowId
+            }).then(data => {
+                if (data.value !== 'card') {
+                    me.mainContentLayout = data.value
+                }
+            })
+        }
 
         if (value === 'cube') {
             container.layout = {ntype: 'cube', activeIndex, fitContainer: true, hideInactiveCardsOnDestroy: true}
         } else {
             container.layout = {ntype: 'card', activeIndex}
         }
+
+        Neo.main.addon.LocalStorage.updateLocalStorageItem({key: 'mainContentLayout', value, windowId})
     }
 
     /**

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

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

package/apps/portal/view/learn/{ContentView.mjs → ContentComponent.mjs}

@@ -10,16 +10,16 @@ const
     preNeoComponentRegex = /<pre\s+data-neo-component\s*>([\s\S]*?)<\/pre>/g;
 
 /**
- * @class Portal.view.learn.ContentView
+ * @class Portal.view.learn.ContentComponent
  * @extends Neo.component.Base
  */
-class ContentView extends Component {
+class ContentComponent extends Component {
     static config = {
         /**
-         * @member {String} className='Portal.view.learn.ContentView'
+         * @member {String} className='Portal.view.learn.ContentComponent'
          * @protected
          */
-        className: 'Portal.view.learn.ContentView',
+        className: 'Portal.view.learn.ContentComponent',
         /**
          * @member {String[]} baseCls=['learn-content']
          * @protected
@@ -41,6 +41,17 @@ class ContentView extends Component {
         tag: 'article'
     }
 
+    /**
+     *
+     * @member {Neo.component.Base[]} customComponents=[]
+     */
+    customComponents = []
+    /**
+     *
+     * @member {Neo.code.LivePreview[]} livePreviews=[]
+     */
+    livePreviews = []
+
     /**
      * @param {Object} config
      */
@@ -71,14 +82,36 @@ class ContentView extends Component {
 
         let me = this;
 
-        value && me.timeout(50).then(() => {
-            Neo.main.addon.IntersectionObserver.register({
-                callback: 'findTopmostItem',
-                id      : me.id,
-                root    : `#${me.parentId}`,
-                windowId: me.windowId
+        if (value) {
+            me.timeout(50).then(() => {
+                me.customComponents.forEach(component => {
+                    if (!component.mounted && !component.rendering) {
+                        component.render(true)
+                    }
+                });
+
+                me.livePreviews.forEach(livePreview => {
+                    if (!livePreview.mounted && !livePreview.rendering) {
+                        livePreview.render(true)
+                    }
+                });
+
+                Neo.main.addon.IntersectionObserver.register({
+                    callback: 'findTopmostItem',
+                    id      : me.id,
+                    root    : `#${me.parentId}`,
+                    windowId: me.windowId
+                })
             })
-        })
+        } else if (oldValue !== undefined) {
+            me.customComponents.forEach(component => {
+                component.mounted = false
+            });
+
+            me.livePreviews.forEach(livePreview => {
+                livePreview.mounted = false
+            });
+        }
     }
 
     /**
@@ -90,6 +123,8 @@ class ContentView extends Component {
         if (value) {
             let me = this;
 
+            oldValue && me.destroyChildInstances();
+
             await me.doFetchContent(value);
 
             if (oldValue) {
@@ -104,25 +139,55 @@ class ContentView extends Component {
         }
     }
 
+    /**
+     * Destroy all created child instances
+     * @param args
+     */
+    destroy(...args) {
+        this.destroyChildInstances();
+        super.destroy(...args)
+    }
+
+    /**
+     *
+     */
+    destroyChildInstances() {
+        let me = this;
+
+        me.customComponents.forEach(component => {
+            component.destroy()
+        });
+
+        me.customComponents = [];
+
+        me.livePreviews.forEach(livePreview => {
+            livePreview.destroy()
+        });
+
+        me.livePreviews = []
+    }
+
     /**
      * @param {Object} record
      * @returns {Promise<void>}
      */
     async doFetchContent(record) {
-        let me   = this,
-            path = me.getModel().getData('contentPath'),
-            content, data, html, modifiedHtml, neoComponents, neoDivs;
+        let me                  = this,
+            {appName, windowId} = me,
+            path                = me.getModel().getData('contentPath'),
+            baseConfigs, content, data, html, instance, modifiedHtml, neoComponents, neoDivs;
 
         path += `/pages/${record.id.replaceAll('.', '/')}.md`;
 
         if (record.isLeaf && path) {
+            baseConfigs   = {appName, autoMount: true, autoRender: true, parentComponent: me, windowId};
             data          = await fetch(path);
             content       = await data.text();
             content       = me.updateContentSectionsStore(content); // also replaces ## with h2 tags
             content       = `# ${record.name}\n${content}`;
             modifiedHtml  = await me.highlightPreContent(content);
             neoComponents = {};
-            neoDivs       = {}
+            neoDivs       = {};
 
             // Replace <pre neo-component></pre> with <div id='neo-component-x'/>
             // and create a map keyed by ID, whose value is the javascript
@@ -144,30 +209,25 @@ class ContentView extends Component {
             await me.timeout(Neo.config.environment === 'development' ? 100 : 150);
 
             Object.keys(neoComponents).forEach(key => {
-                Neo.create({
-                    appName        : me.appName,
-                    autoMount      : true,
-                    autoRender     : true,
-                    className      : 'Neo.component.Base',
-                    parentComponent: me,
-                    parentId       : key,
-                    windowId       : me.windowId,
+                instance = Neo.create({
+                    ...baseConfigs,
+                    className: 'Neo.component.Base',
+                    parentId : key,
                     ...neoComponents[key]
-                })
+                });
+
+                me.customComponents.push(instance)
             });
 
             Object.keys(neoDivs).forEach(key => {
-                // Create LivePreview for each iteration, set value to neoDivs[key]
-                Neo.create({
-                    module         : LivePreview,
-                    appName        : me.appName,
-                    autoMount      : true,
-                    autoRender     : true,
-                    parentComponent: me,
-                    parentId       : key,
-                    value          : neoDivs[key],
-                    windowId       : me.windowId
-                })
+                instance = Neo.create({
+                    ...baseConfigs,
+                    module  : LivePreview,
+                    parentId: key,
+                    value   : neoDivs[key]
+                });
+
+                me.livePreviews.push(instance)
             });
 
             Neo.main.addon.IntersectionObserver.observe({
@@ -278,11 +338,11 @@ class ContentView extends Component {
             record = me.record;
 
         if (data.altKey && data.shiftKey && !data.metaKey) {
-            me.fire('edit', { component: me, record })
+            me.fire('edit', {component: me, record})
         }
         // Command/windows shift click = refresh
         else if (!data.altKey && data.shiftKey && data.metaKey) {
-            me.fire('refresh', { component: me, record })
+            me.fire('refresh', {component: me, record})
         }
     }
 
@@ -326,4 +386,4 @@ class ContentView extends Component {
     }
 }
 
-export default Neo.setupClass(ContentView);
+export default Neo.setupClass(ContentComponent);

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

@@ -0,0 +1,77 @@
+import Button from '../../../../src/button/Base.mjs';
+
+/**
+ * @class Portal.view.learn.CubeLayoutButton
+ * @extends Neo.button.Base
+ */
+class CubeLayoutButton extends Button {
+    static config = {
+        /**
+         * @member {String} className='Portal.view.learn.CubeLayoutButton'
+         * @protected
+         */
+        className: 'Portal.view.learn.CubeLayoutButton',
+        /**
+         * @member {String|null} activeLayout_=null
+         */
+        activeLayout_: null,
+    }
+
+    /**
+     * @member {Object} activateText='Activate Cube-Layout'
+     */
+    activateText = 'Activate Cube-Layout'
+    /**
+     * @member {Object} deactivateText='Deactivate Cube-Layout'
+     */
+    deactivateText = 'Deactivate Cube-Layout'
+
+    /**
+     * @member {Portal.view.ViewportController} viewportController
+     */
+    get viewportController() {
+        return this.getController('viewport-controller')
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.activeLayout = me.viewportController.mainContentLayout;
+        me.handler      = me.changeLayout.bind(me)
+    }
+
+    /**
+     * Triggered after the activeLayout config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     */
+    afterSetActiveLayout(value, oldValue) {
+        let me = this;
+
+        if (value) {
+            me.viewportController.mainContentLayout = value;
+
+            if (value === 'card') {
+                me.text = me.activateText
+            } else if (value === 'mixed') {
+                me.text = me.deactivateText
+            }
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    changeLayout(data) {
+        let me = this;
+
+        me.activeLayout = me.text === me.activateText ? 'mixed' : 'card'
+    }
+}
+
+export default Neo.setupClass(CubeLayoutButton);

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

@@ -1,4 +1,5 @@
 import Controller        from '../../../../src/controller/Component.mjs';
+import CubeLayoutButton  from './CubeLayoutButton.mjs'; // required for the Portal App .md file
 import {getSearchParams} from '../../Util.mjs';
 
 /**
@@ -140,7 +141,7 @@ class MainContainerController extends Controller {
      */
     onRouteDefault(data) {
         if (!this.getModel().data.currentPageRecord) {
-            this.onRouteLearnItem({itemId: 'WhyNeo-Intro'})
+            this.onRouteLearnItem({itemId: 'benefits.Introduction'})
         }
     }
 

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

@@ -1,6 +1,6 @@
-import Container   from '../../../../src/container/Base.mjs';
-import ContentView from './ContentView.mjs';
-import Toolbar     from '../../../../src/toolbar/Base.mjs';
+import Container        from '../../../../src/container/Base.mjs';
+import ContentComponent from './ContentComponent.mjs';
+import Toolbar          from '../../../../src/toolbar/Base.mjs';
 
 /**
  * @class Portal.view.learn.PageContainer
@@ -29,7 +29,7 @@ class PageContainer extends Container {
          * @member {Object[]} items
          */
         items: [{
-            module   : ContentView,
+            module   : ContentComponent,
             reference: 'content',
             listeners: {
                 edit   : 'onContentEdit',

package/apps/shareddialog/view/DemoDialog.mjs

@@ -28,6 +28,7 @@ class DemoDialog extends Dialog {
          * @member {Object} itemDefaults={labelWidth:70}
          */
         itemDefaults: {
+            flex      : 'none',
             labelWidth: 70
         },
         /**
@@ -35,20 +36,11 @@ class DemoDialog extends Dialog {
          */
         items: [{
             module   : TextField,
-            flex     : 'none',
             labelText: 'Field 1'
         }, {
             module   : TextField,
-            flex     : 'none',
             labelText: 'Field 2'
-        }],
-        /**
-         * @member {Object} wrapperStyle={height:'40%',width:'40%'}
-         */
-        wrapperStyle: {
-            height: '40%',
-            width : '40%'
-        }
+        }]
     }
 }