neo.mjs 7.3.0 → 7.5.0

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

@@ -1,5 +1,5 @@
 import BaseList from '../../../../src/list/Base.mjs';
-import Examples from '../../store/Examples.mjs';
+import VDomUtil from '../../../../src/util/VDom.mjs';
 
 /**
  * @class Portal.view.examples.List
@@ -35,17 +35,14 @@ class List extends BaseList {
          */
         environment: 'development',
         /**
-         * @member {Neo.data.Store} store=Examples
+         * Specify how many example item images to preload when intersecting
+         * @member {Number} preloadImages=5
          */
-        store: Examples,
+        preloadImages: 5,
         /**
-         * @member {String|null} storeUrl_=null
+         * @member {String} sourceBaseUrl='https://github.com/neomjs/neo/tree/dev/'
          */
-        storeUrl_: null,
-        /**
-         * @member {String} sourceBaseUrl='https://github.com/neo.mjs/neo/tree/dev/'
-         */
-        sourceBaseUrl: 'https://github.com/neo.mjs/neo/tree/dev/',
+        sourceBaseUrl: 'https://github.com/neomjs/neo/tree/dev/',
         /**
          * @member {Boolean} useWrapperNode=true
          */
@@ -60,31 +57,9 @@ class List extends BaseList {
     }
 
     /**
-     * Triggered before the store config gets changed.
-     * @param {Object|Neo.data.Store} value
-     * @param {Object|Neo.data.Store} oldValue
-     * @returns {Neo.data.Store}
-     * @protected
+     * @member {String} imageBasePath
      */
-    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) {
+    get imageBasePath() {
         let basePath;
 
         if (Neo.config.isGitHubPages) {
@@ -97,15 +72,50 @@ class List extends BaseList {
             basePath = 'https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/website/examples'
         }
 
+        return basePath
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.addDomListeners({
+            intersect: me.onIntersect,
+            scope    : me
+        })
+    }
+
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+        value && this.registerIntersectionObserver()
+    }
+
+    /**
+     * @param {Object} record
+     */
+    createItemContent(record) {
+        let me = this;
+
         return [
-            {cls: ['content', 'neo-relative'], removeDom: record.hidden, cn: [
-                {cls: ['neo-full-size', 'preview-image'], style: {
-                    backgroundImage: `url('${basePath}/${record.image}'), linear-gradient(#777, #333)`}
-                },
+            {cls: ['content', 'neo-relative'], data: {recordId: record.id}, removeDom: me.isHiddenItem(record), cn: [
+                {cls: ['neo-multi-window'], data: {neoTooltip: 'Multi Window Demo'}, removeDom: !record.sharedWorkers, cn: [
+                    {cls: ['far', 'fa-window-restore']}
+                ]},
+                {cls: ['neo-full-size', 'preview-image'], flag: `image-${record.id}`},
                 {cls: ['neo-absolute', 'neo-item-bottom-position'], cn: [
-                    {...this.createLink(record)},
+                    {...me.createLink(record)},
                     {cls: ['neo-top-20'], cn: [
-                        {tag: 'a', cls: ['fab fa-github', 'neo-github-image'], href: this.sourceBaseUrl + record.sourceUrl, target: '_blank'},
+                        {...me.createSourceLink(record)},
                         {cls: ['neo-inner-content'], cn: [
                             {cls: ['neo-inner-details'], html: record.browsers.join(', ')},
                             {cls: ['neo-inner-details'], html: record.environments.join(', ')}
@@ -122,22 +132,50 @@ class List extends BaseList {
      * @returns {Object}
      */
     createLink(record) {
-        let vdom = {
+        let externalLink = record.url.startsWith('http'),
+
+        vdom = {
             tag : 'a',
             cls : ['neo-title'],
             cn  : [{html: record.name.replace(List.nameRegEx, "$1")}],
-            href: this.baseUrl + record.url
+            href: record.url
         };
 
+        // We can use a shorter syntax for pointing examples to neomjs.com, but not all examples have to be there.
+        if (!externalLink) {
+            vdom.href = this.baseUrl + record.url
+        }
+
         // Do not open multi-window examples inside a new browser window, in case the environment is the same.
         // E.g. opening the multi-window covid app & the portal app inside the same app worker is problematic.
-        if (!record.sharedWorkers || this.environment !== Neo.config.environment) {
+        if (!record.sharedWorkers || this.environment !== Neo.config.environment || externalLink) {
             vdom.target = '_blank'
         }
 
         return vdom
     }
 
+    /**
+     *
+     * @param {Object} record
+     * @returns {Object}
+     */
+    createSourceLink(record) {
+        let vdom = {
+            tag   : 'a',
+            cls   : ['fab fa-github', 'neo-github-image'],
+            href  : record.sourceUrl,
+            target: '_blank'
+        };
+
+        // We can use a shorter syntax for pointing examples to neomjs/neo repo, but not all examples have to be there.
+        if (!record.sourceUrl.startsWith('http')) {
+            vdom.href = this.sourceBaseUrl + record.sourceUrl
+        }
+
+        return vdom
+    }
+
     /**
      * @returns {Object}
      */
@@ -151,6 +189,84 @@ class List extends BaseList {
     getVnodeRoot() {
         return this.vnode.childNodes[0]
     }
+
+    /**
+     * @param {Object} record
+     * @returns {Boolean}
+     */
+    isHiddenItem(record) {
+        if (record.hidden) {
+            return true
+        }
+
+        // We only want to show the portal app for the non-current environment.
+        // => A link to itself feels pointless
+        return record.sourceUrl === 'apps/portal' && this.environment === Neo.config.environment
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onIntersect(data) {
+        let me                     = this,
+            {imageBasePath, store} = me,
+            record                 = store.get(parseInt(data.data.recordId)),
+            i                      = store.indexOf(record),
+            len                    = Math.min(i + me.preloadImages, store.getCount()),
+            needsUpdate            = false,
+            node;
+
+        for (; i < len; i++) {
+            node = VDomUtil.getByFlag(me.vdom, `image-${record.id}`);
+
+            if (!node.style) {
+                needsUpdate = true;
+
+                node.style = {
+                    backgroundImage: [
+                        `url('${imageBasePath}/${record.image}'),`,
+                        'linear-gradient(',
+                            'var(--portal-examples-list-gradient-start),',
+                            'var(--portal-examples-list-gradient-end)',
+                        ')'
+                    ].join('')
+                }
+            }
+        }
+
+        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(150);
+
+        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
+                }
+            }
+        }
+    }
 }
 
 export default Neo.setupClass(List);

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

@@ -1,4 +1,5 @@
 import Container              from '../../../../src/tab/Container.mjs';
+import ExampleStore           from '../../store/Examples.mjs';
 import List                   from './List.mjs';
 import TabContainerController from './TabContainerController.mjs';
 
@@ -42,7 +43,7 @@ class TabContainer extends Container {
          */
         items: [{
             reference      : 'examples-devmode-list',
-            storeUrl       : '../../apps/portal/resources/data/examples_devmode.json',
+            store          : {module: ExampleStore, url: '../../apps/portal/resources/data/examples_devmode.json'},
             tabButtonConfig: {
                 iconCls: 'fa fa-chess-knight',
                 route  : '/examples/devmode',
@@ -51,7 +52,7 @@ class TabContainer extends Container {
         }, {
             environment    : 'dist/development',
             reference      : 'examples-dist-dev-list',
-            storeUrl       : '../../apps/portal/resources/data/examples_dist_dev.json',
+            store          : {module: ExampleStore, url: '../../apps/portal/resources/data/examples_dist_dev.json'},
             tabButtonConfig: {
                 iconCls: 'fa fa-chess-queen',
                 route  : '/examples/dist_dev',
@@ -60,7 +61,7 @@ class TabContainer extends Container {
         }, {
             environment    : 'dist/production',
             reference      : 'examples-dist-prod-list',
-            storeUrl       : '../../apps/portal/resources/data/examples_dist_prod.json',
+            store          : {module: ExampleStore, url: '../../apps/portal/resources/data/examples_dist_prod.json'},
             tabButtonConfig: {
                 iconCls: 'fa fa-chess-king',
                 route  : '/examples/dist_prod',

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

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

package/examples/ServiceWorker.mjs

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

package/examples/table/container/MainStore.mjs

@@ -41,12 +41,6 @@ class MainStore extends Store {
             firstname: 'Bastian',
             githubId : 'bhaustein',
             lastname : 'Haustein'
-        }, {
-            colspan  : {firstname: 3},
-            country  : 'Germany',
-            firstname: 'Colspan 3',
-            githubId : 'random',
-            lastname : ''
         }]
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "7.3.0",
+    "version": "7.5.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -31,6 +31,8 @@
         "javascript",
         "frontend",
         "framework",
+        "offscreencanvas",
+        "sharedworker",
         "webworker",
         "ecmascript",
         "css",
@@ -57,7 +59,7 @@
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.45",
+        "postcss": "^8.4.47",
         "sass": "^1.78.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",

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

@@ -1,4 +1,12 @@
+@property --portal-blog-list-gradient-start {
+    syntax       : "<color>";
+    initial-value: #777;
+    inherits     : false;
+}
+
 .portal-blog-list.neo-list {
+    --portal-blog-list-gradient-end: #333;
+
     transition: padding var(--portal-transition-duration) ease-out;
 
     .neo-list-item {
@@ -13,6 +21,20 @@
         white-space : normal;
         width       : 100%;
 
+        &:focus {
+            outline: none;
+
+            .preview-image {
+                --portal-blog-list-gradient-start: darkgreen;
+            }
+        }
+
+        &:hover {
+            .preview-image {
+                --portal-blog-list-gradient-start: #3E63DD;
+            }
+        }
+
         .content {
             flex: 1;
         }
@@ -75,7 +97,7 @@
             transition     : color 250ms ease-out;
 
             &:hover {
-                color: #5d83a7
+                color: #8BA6FF
             }
         }
 
@@ -96,6 +118,7 @@
             background-position  : 50% 50%;
             background-size      : cover;
             height               : 100%;
+            transition           : --portal-blog-list-gradient-start var(--portal-transition-duration) ease-out;
         }
     }
 

package/resources/scss/src/apps/portal/examples/List.scss

@@ -1,4 +1,12 @@
+@property --portal-examples-list-gradient-start {
+    syntax       : "<color>";
+    initial-value: #777;
+    inherits     : false;
+}
+
 .portal-examples-list.neo-list {
+    --portal-examples-list-gradient-end: #333;
+
     transition: padding var(--portal-transition-duration) ease-out;
 
     .neo-list-item {
@@ -12,6 +20,20 @@
         white-space : normal;
         width       : 100%;
 
+        &:focus {
+            outline: none;
+
+            .preview-image {
+                --portal-examples-list-gradient-start: darkgreen;
+            }
+        }
+
+        &:hover {
+            .preview-image {
+                --portal-examples-list-gradient-start: #3E63DD;
+            }
+        }
+
         .content {
             flex: 1;
         }
@@ -29,8 +51,12 @@
             color                     : #ddd;
             text-decoration           : none;
             transition-duration       : var(--portal-transition-duration);
-            transition-property       : font-size, height, width;
+            transition-property       : color, font-size, height, width;
             transition-timing-function: ease-out;
+
+            &:hover {
+                color: #8BA6FF
+            }
         }
 
         .neo-inner-content {
@@ -51,20 +77,37 @@
             transition: margin var(--portal-transition-duration) ease-out;
         }
 
+        .neo-multi-window {
+            align-items     : center;
+            background-color: #fff;
+            border-radius   : 50%;
+            box-shadow      : 0 5px 10px rgba(0, 0, 0, 0.3);
+            color           : #3E63DD;
+            display         : flex;
+            height          : 2em;
+            justify-content : center;
+            position        : absolute;
+            right           : 1em;
+            top             : 1em;
+            width           : 2em;
+        }
+
         .neo-relative {
             position: relative;
         }
 
         .neo-title {
             color          : #fff;
+            display        : flex;
             font-weight    : 600;
             line-height    : 1;
             text-decoration: none;
             text-shadow    : 1px 1px 1px #000, 1px 1px 1px #fff;
             transition     : color 250ms ease-out;
+            width          : fit-content;
 
             &:hover {
-                color: #5d83a7
+                color: #8BA6FF
             }
         }
 
@@ -78,6 +121,7 @@
             background-blend-mode: overlay;
             background-size      : cover;
             height               : 100%;
+            transition           : --portal-examples-list-gradient-start var(--portal-transition-duration) ease-out;
         }
     }
 

package/resources/scss/theme-neo-light/apps/portal/Viewport.scss

@@ -0,0 +1,3 @@
+:root .neo-theme-neo-light { // .neo-viewport
+    --portal-transition-duration: 300ms;
+}

package/src/DefaultConfig.mjs

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

package/src/Main.mjs

@@ -53,6 +53,7 @@ class Main extends core.Base {
                 'importAddon',
                 'log',
                 'redirectTo',
+                'reloadWindow',
                 'setNeoConfig',
                 'setRoute',
                 'windowClose',
@@ -410,6 +411,13 @@ class Main extends core.Base {
         this.addon[addon.constructor.name] = addon
     }
 
+    /**
+     * @param {Object} data
+     */
+    reloadWindow(data) {
+        location.reload()
+    }
+
     /**
      * Triggers the different DOM operation queues
      * @protected

package/src/component/Base.mjs

@@ -829,7 +829,7 @@ class Base extends CoreBase {
                     me.alignTo();
 
                     // Focus will be pushed into the first input field or other focusable item
-                    Neo.main.DomAccess.focus({id, children: true, windowId})
+                    me.focus(id, true)
                 }
 
                 me.fire('mounted', me.id)
@@ -1516,9 +1516,10 @@ class Base extends CoreBase {
     /**
      * Calls focus() on the top level DOM node of this component or on a given node via id
      * @param {String} id=this.id
+     * @param {Boolean} children=false
      */
-    focus(id=this.id) {
-        Neo.main.DomAccess.focus({id, windowId: this.windowId})
+    focus(id=this.id, children=false) {
+        Neo.main.DomAccess.focus({children, id, windowId: this.windowId})
     }
 
     /**

package/src/component/DateSelector.mjs

@@ -166,7 +166,8 @@ class DateSelector extends Component {
      * @protected
      */
     afterSetCurrentDate(value, oldValue) {
-        let me = this,
+        let me             = this,
+            {id, windowId} = me,
             dayIncrement, method, methodParams,  monthIncrement, yearIncrement;
 
         if (me.mounted) {
@@ -181,14 +182,12 @@ class DateSelector extends Component {
                 method       = 'changeYear';
                 methodParams = [yearIncrement]
             } else if (dayIncrement !== 0) {
-                me.selectionModel.select(me.id + '__' + DateUtil.convertToyyyymmdd(value))
+                me.selectionModel.select(id + '__' + DateUtil.convertToyyyymmdd(value))
             }
 
             if (method) {
                 if (me.containsFocus) {
-                    Neo.main.DomAccess.focus({
-                        id: me.id
-                    }).then(data => {
+                    Neo.main.DomAccess.focus({id, windowId}).then(data => {
                         me[method](...methodParams)
                     })
                 } else {

package/src/dialog/Base.mjs

@@ -668,7 +668,9 @@ class Base extends Panel {
 
                 // we need a reset, otherwise we do not get a change event for the next onDragStart() call
                 me.dragZone.boundaryContainerId = null;
-                me.isDragging                   = false
+                me.isDragging                   = false;
+
+                me.focus(me.id, true)
             })
         }
     }

package/src/form/field/Time.mjs

@@ -294,8 +294,9 @@ class Time extends Picker {
         let me = this;
 
         Neo.main.DomAccess.focus({
-            appName: me.appName,
-            id     : me.getInputElId()
+            appName : me.appName,
+            id      : me.getInputElId(),
+            windowId: me.windowId
         }).then(() => {
             callback?.apply(me)
         })

package/src/list/Base.mjs

@@ -465,7 +465,7 @@ class Base extends Component {
             itemId           = me.getItemId(record[me.getKeyProperty()]),
             {selectionModel} = me,
             isSelected       = !me.disableSelection && selectionModel?.isSelected(itemId),
-            item;
+            item, removeDom;
 
         isHeader && cls.push('neo-list-header');
 
@@ -492,7 +492,7 @@ class Base extends Component {
             item.tabIndex = -1
         }
 
-        if (record.hidden) {
+        if (record.hidden || itemContent.removeDom) {
             item.removeDom = true
         }
 
@@ -507,6 +507,19 @@ class Base extends Component {
 
             case 'Array': {
                 item.cn = itemContent;
+
+                removeDom = true;
+
+                itemContent.forEach(item => {
+                    if (!item.removeDom) {
+                        removeDom = false
+                    }
+                })
+
+                if (removeDom) {
+                    item.removeDom = true
+                }
+
                 break
             }
 

package/src/main/DomAccess.mjs

@@ -392,15 +392,17 @@ class DomAccess extends Base {
     /**
      * Calls focus() on a node for a given dom node id
      * @param {Object} data
+     * @param {Boolean} data.children
+     * @param {String} data.id
      * @returns {Object} obj.id => the passed id
      */
-    focus(data) {
-        let node = this.getElement(data.id);
+    focus({children, id}) {
+        let node = this.getElement(id);
 
         if (node) {
             // The children property means focus inner elements if possible.
-            if (!DomUtils.isFocusable(node) && data.children) {
-                // query for the first focusable decendent
+            if (!DomUtils.isFocusable(node) && children) {
+                // query for the first focusable descendent
                 node = DomUtils.query(node, DomUtils.isFocusable)
             }
 
@@ -413,7 +415,7 @@ class DomAccess extends Base {
             }
         }
 
-        return {id: data.id}
+        return {id}
     }
 
     /**