neo.mjs 6.33.0 → 6.35.0

package/apps/ServiceWorker.mjs

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

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

@@ -25,6 +25,12 @@ class List extends BaseList {
          * @member {String[]} baseCls=['portal-blog-list','neo-list']
          */
         baseCls: ['portal-blog-list', 'neo-list'],
+        /**
+         * 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
+         */
+        intersectionObserverReconnects: 5,
         /**
          * Specify how many blog item images to preload when intersecting
          * @member {Number} preloadImages=5
@@ -88,18 +94,7 @@ class List extends BaseList {
      */
     afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
-
-        let me = this;
-
-        value && me.timeout(50).then(() => {
-            Neo.main.addon.IntersectionObserver.register({
-                callback: 'isVisible',
-                id      : me.id,
-                observe : ['.content'],
-                root    : `#${me.parentId}`,
-                windowId: me.windowId
-            })
-        })
+        value && this.registerIntersectionObserver()
     }
 
     /**
@@ -243,6 +238,37 @@ class List extends BaseList {
 
         needsUpdate && me.update()
     }
+
+    /**
+     *
+     */
+    async registerIntersectionObserver() {
+        let me   = this,
+            opts = {id: me.id, observe: ['.content'], windowId: me.windowId},
+            i    = 0,
+            len  = me.intersectionObserverReconnects,
+            data;
+
+        await me.timeout(50);
+
+        data = await Neo.main.addon.IntersectionObserver.register({
+            ...opts,
+            callback: 'isVisible',
+            root    : `#${me.parentId}`
+        });
+
+        if (data.countTargets < 1) {
+            for (; i < len; i++) {
+                await me.timeout(100);
+
+                data = await Neo.main.addon.IntersectionObserver.observe(opts);
+
+                if (data.countTargets > 0) {
+                    break
+                }
+            }
+        }
+    }
 }
 
 Neo.setupClass(List);

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

@@ -28,8 +28,9 @@ class MainContainer extends Container {
          */
         domListeners: [{
             intersect(data) {
-                this.activePartsId = data.targetId;
-                Neo.getComponent(data.targetId)?.activate?.()
+                let id = data.path[1].id;
+                this.activePartsId = id;
+                Neo.getComponent(id)?.activate?.()
             },
             scroll(event) {
                 if (event.target.cls.includes('portal-home-maincontainer')) {
@@ -37,6 +38,12 @@ class MainContainer extends Container {
                 }
             }
         }],
+        /**
+         * @member {Object} itemDefaults
+         */
+        itemDefaults: {
+            flex: 'none'
+        },
         /**
          * @member {Object[]} items
          */
@@ -78,7 +85,7 @@ class MainContainer extends Container {
             Neo.main.addon.IntersectionObserver.register({
                 callback : 'isVisible',
                 id,
-                observe  : ['.portal-home-content-view'],
+                observe  : ['.portal-content-wrapper'],
                 root     : `#${id}`,
                 threshold: 1.0,
                 windowId

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

@@ -48,7 +48,7 @@ class AfterMath extends BaseContainer {
             flex: 1
         }, {
             module: FooterContainer,
-            height: '35%'
+            flex  : 'none'
         }]
     }
 }

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.33.0",
+    "version": "6.35.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -53,7 +53,7 @@
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
         "inquirer": "^10.1.8",
-        "marked": "^13.0.3",
+        "marked": "^14.0.0",
         "monaco-editor": "^0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",

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

@@ -1,3 +1,13 @@
+body {
+    > .neo-viewport {
+        // without the snap scrolling it is possible to scroll the viewport
+        // by the height of the header toolbar outside the visible area
+        // see: https://github.com/neomjs/neo/issues/5715
+        position: fixed;
+    }
+}
+
+
 .neo-viewport {
     // sometimes when transitioning between card & cube layouts, the flex value does get lost
     // see: https://github.com/neomjs/neo/issues/5637

package/resources/scss/src/apps/portal/home/FooterContainer.scss

@@ -1,5 +1,6 @@
 .portal-home-footer-container {
     background-color: black;
+    height          : 35%;
     padding         : 2em;
 
     .neo-button.neo-button-ghost {
@@ -29,8 +30,24 @@
         color           : white;
     }
 
-    @media (max-width: 600px) {
-        padding: 1em;
+    @media (max-width: 800px) {
+        max-height: 18em;
+        min-height: 18em;
+        padding   : 1em;
+
+        h2.neo-h2 {
+            font-size: 1.2rem;
+        }
+
+        .neo-button {
+            padding: 0 3px;
+        }
+    }
+
+    @media (max-width: 500px) {
+        max-height: 15em;
+        min-height: 15em;
+        padding   : 1em;
 
         h2.neo-h2 {
             font-size: 1.2rem;

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

@@ -1,8 +1,13 @@
 .portal-home-maincontainer {
-    overflow-x      : hidden!important;
+    overflow-x      : hidden !important;
     scroll-behavior : smooth;
     scroll-snap-type: y mandatory;
 
+    @media (max-width: 840px) {
+        scroll-behavior : unset;
+        scroll-snap-type: unset;
+    }
+
     /* Style and position the progress bar */
     .portal-home-progress {
         background      : var(--sem-color-surface-primary-background);

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

@@ -1,4 +1,6 @@
 .portal-home-aftermath {
+    height: 60em;
+
     p {
         text-align: center;
     }

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

@@ -27,8 +27,9 @@
 
     .portal-content-text {
         @media (max-width: 600px) {
+            flex           : .5 !important;
             justify-content: start;
-            overflow-y     : auto;
+            padding        : 1rem;
         }
     }
 
@@ -36,8 +37,10 @@
         background-color: lightgray;
         padding         : 20px;
 
-        @media (max-width: 500px) {
-            padding: 5px;
+        @media (max-width: 600px) {
+            max-height: 35em;
+            min-height: 35em;
+            padding   : 5px;
         }
     }
 }

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

@@ -11,5 +11,10 @@
 
     @media (max-width: 700px) {
         grid-template-columns: repeat(6, 1fr);
+        min-height           : 50%;
+    }
+
+    @media (max-width: 500px) {
+        min-height: 60%;
     }
 }

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

@@ -4,4 +4,10 @@
             flex-direction: column;
         }
     }
+
+    @media (max-width: 600px) {
+        .portal-content-text {
+            min-height: 40em;
+        }
+    }
 }

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

@@ -22,10 +22,24 @@
         padding         : 20px;
     }
 
+    @media (max-width: 500px) {
+        min-height: 100%;
+
+        .portal-content-text {
+            flex: 1.2 !important;
+        }
+    }
+
     @media (max-width: 840px) {
+        min-height: 100%;
+
         &.neo-flex-container {
             flex-direction: column;
         }
+
+        .portal-content-text {
+            flex: 0.8 !important;
+        }
     }
 
     @media (max-width: 500px) {

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -275,9 +275,9 @@ class Base extends CoreBase {
         parentComponent_: null,
         /**
          * The parent component id or document.body
-         * @member {String} parentId='document.body'
+         * @member {String} parentId_='document.body'
          */
-        parentId: 'document.body',
+        parentId_: 'document.body',
         /**
          * Array of Plugin Modules and / or config objects
          * @member {Array|null} plugins_=null

package/src/main/addon/IntersectionObserver.mjs

@@ -102,11 +102,14 @@ class NeoIntersectionObserver extends Base {
      * @param {Boolean} [data.disconnect=false] true removes all currently observed targets
      * @param {String} data.id
      * @param {String|String[]} data.observe The querySelector to match elements
-     * @returns {Boolean} true in case the targets got observed, false in case they got cached prior to a register() call
+     * @returns {Object} opts
+     *     {Boolean} opts.cached      : true in case the observer is not registered yet
+     *     {Number}  opts.countTargets: amount of found target nodes inside the DOM
      */
     observe(data) {
         let me            = this,
             cache         = me.cache,
+            cached        = false,
             {id, observe} = data,
             observer      = me.map[data.id],
             targets       = [];
@@ -126,6 +129,8 @@ class NeoIntersectionObserver extends Base {
                 observer.observe(target)
             })
         } else {
+            cached = true;
+
             if (!cache[id]) {
                 cache[id] = []
             }
@@ -133,7 +138,10 @@ class NeoIntersectionObserver extends Base {
             cache[id].push(data);
         }
 
-        return !!observer
+        return {
+            cached,
+            countTargets: targets.length
+        }
     }
 
     /**
@@ -144,11 +152,15 @@ class NeoIntersectionObserver extends Base {
      * @param {String} data.root
      * @param {String} data.rootMargin='0px'
      * @param {Number|Number[]} data.threshold=0.0
+     * @returns {Boolean}
+     *     if data.observe is passed: true in case there is at least one found target node inside the DOM
+     *     if data.observe is not passed: true
      */
     register(data) {
         let me            = this,
             {cache}       = me,
             {id, observe} = data,
+            returnValue   = true,
             observer;
 
         me.map[id] = observer = new IntersectionObserver(me[data.callback].bind(me), {
@@ -159,12 +171,16 @@ class NeoIntersectionObserver extends Base {
 
         observer.rootId = data.id; // storing the component id
 
-        observe && me.observe({id, observe});
+        if (observe) {
+            returnValue = me.observe({id, observe})
+        }
 
         if (cache[id]) {
             cache[id].forEach(item => me.observe(item));
             delete cache[id]
         }
+
+        return returnValue
     }
 
     /**