neo.mjs 7.0.0 → 7.0.2

package/apps/ServiceWorker.mjs

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

package/apps/portal/resources/data/blog.json

@@ -1,4 +1,17 @@
 [
+    {
+        "author"      : "Tobias Uhlig",
+        "authorImage" : "author_TobiasUhlig.jpeg",
+        "date"        : "Aug 20, 2024",
+        "id"          : 60,
+        "image"       : "frontend-performance.png",
+        "name"        : "Frontend Performance Love Story",
+        "provider"    : "Medium",
+        "publisher"   : "ITNEXT",
+        "selectedInto": [],
+        "type"        : "Blog Post",
+        "url"         : "https://itnext.io/frontend-performance-love-story-ce92302fea5f?source=friends_link&sk=ec69e9461cee5b80adb06214ebbf36b4"
+    },
     {
         "author"      : "Tobias Uhlig",
         "authorImage" : "author_TobiasUhlig.jpeg",

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

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

package/examples/ServiceWorker.mjs

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

package/examples/component/coronaGallery/CountryGallery.mjs

@@ -60,6 +60,7 @@ class CountryGallery extends Gallery {
     createItem(vdomItem, record, index) {
         let me    = this,
             cls   = ['neo-gallery-item', 'image-wrap', 'view', 'neo-transition-1000'],
+            fn    = CountryGallery.formatNumber,
             style = {height: (me.itemHeight - 70) + 'px', width: me.itemWidth  + 'px'};
 
         return {cls, id: me.getItemVnodeId(record[me.keyProperty]), tabIndex: '-1', cn: [
@@ -72,24 +73,24 @@ class CountryGallery extends Gallery {
                     {tag: 'table', cls: ['neo-content-table'], cn: [
                         {tag: 'tr', cn: [
                             {tag: 'td', html: 'Cases'},
-                            {tag: 'td', cls: ['neo-align-right'], html: record.cases},
+                            {tag: 'td', cls: ['neo-align-right'], html: fn(record.cases)},
                             {tag: 'td', style: {width: '100%'}},
                             {tag: 'td', html: 'Cases today'},
-                            {tag: 'td', cls: ['neo-align-right'], html: record.todayCases}
+                            {tag: 'td', cls: ['neo-align-right'], html: fn(record.todayCases)}
                         ]},
                         {tag: 'tr', cn: [
                             {tag: 'td', html: 'Deaths'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths'], html: record.deaths},
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths'], html: fn(record.deaths)},
                             {tag: 'td', style: {width: '100%'}},
                             {tag: 'td', html: 'Deaths today'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths'], html: record.todayDeaths}
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths'], html: fn(record.todayDeaths)}
                         ]},
                         {tag: 'tr', cn: [
                             {tag: 'td', html: 'Recovered'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-recovered'], html: record.recovered},
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-recovered'], html: fn(record.recovered)},
                             {tag: 'td', style: {width: '100%'}},
                             {tag: 'td', html: 'Critical'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-critical'], html: record.critical}
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-critical'], html: fn(record.critical)}
                         ]}
                     ]}
                 ]}
@@ -97,6 +98,14 @@ class CountryGallery extends Gallery {
         ]}
     }
 
+    /**
+     * @param {Number} value
+     * @returns {String}
+     */
+    static formatNumber(value) {
+        return value.toLocaleString()
+    }
+
     /**
      * @param {String} name
      * @returns {String} url

package/examples/component/coronaGallery/Viewport.mjs

@@ -0,0 +1,317 @@
+import BaseViewport       from '../../../src/container/Viewport.mjs';
+import CountryGallery     from './CountryGallery.mjs';
+import Panel              from '../../../src/container/Panel.mjs';
+import RangeField         from '../../../src/form/field/Range.mjs';
+import ViewportController from './ViewportController.mjs';
+
+/**
+ * @class Neo.examples.component.coronaGallery.Viewport
+ * @extends Neo.container.Viewport
+ */
+class Viewport extends BaseViewport {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.component.coronaGallery.Viewport'
+         * @protected
+         */
+        className: 'Neo.examples.component.coronaGallery.Viewport',
+        /**
+         * @member {String[]} baseCls=['neo-gallery-viewport','neo-viewport']
+         */
+        baseCls: ['neo-gallery-viewport', 'neo-viewport'],
+        /**
+         * @member {Neo.controller.Component} controller=ViewportController
+         */
+        controller: ViewportController,
+        /**
+         * @member {Neo.component.Gallery|null} gallery=null
+         */
+        gallery: null,
+        /**
+         * @member {Object|null} galleryConfig=null
+         */
+        galleryConfig: null,
+        /**
+         * @member {Object|null} layout={ntype: 'hbox', align: 'stretch'}
+         */
+        layout: {ntype: 'hbox', align: 'stretch'},
+        /**
+         * @member {Boolean} showGitHubStarButton_=true
+         */
+        showGitHubStarButton_: true,
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            ntype : 'container',
+            flex  : 1,
+            layout: 'fit',
+            style : {position: 'relative'},
+
+            items : [{
+                ntype: 'component',
+                html : 'DeltaUpdates / s: <span id="neo-delta-updates"></span>',
+                style: {
+                    position: 'absolute',
+                    right   : '150px',
+                    top     : '25px',
+                    width   : '200px',
+                    zIndex  : 1
+                }
+            }, {
+                ntype    : 'component',
+                html     : '<a class="github-button" href="https://github.com/neomjs/neo" data-size="large" data-show-count="true" aria-label="Star neomjs/neo on GitHub">Star</a>',
+                reference: 'github-button',
+
+                style: {
+                    position: 'absolute',
+                    right   : '20px',
+                    top     : '20px',
+                    zIndex  : 1
+                }
+            }]
+        }, {
+            ntype    : 'panel',
+            cls      : ['neo-controls-panel', 'neo-panel', 'neo-container'],
+            layout   : {ntype: 'vbox', align: 'stretch'},
+            reference: 'controls-panel',
+            style    : {backgroundColor: '#2b2b2b'},
+            width    : 260,
+
+            containerConfig: {
+                style: {overflowY: 'scroll'}
+            },
+
+            headers: [{
+                dock: 'top',
+                items: [{
+                    ntype: 'button',
+                    text : 'X',
+                    handler: function() {
+                        const panel  = this.up('panel'),
+                              expand = panel.width === 40;
+
+                        panel.width = expand ? 250 : 40;
+                        this.text   = expand ? 'X' : '+';
+                    }
+                }, {
+                    ntype: 'label',
+                    text : 'Gallery Controls'
+                }]
+            }],
+
+            itemDefaults: {
+                flex         : '0 1 auto',
+                labelWidth   : '110px',
+                style        : {padding: '10px'},
+                useInputEvent: true
+            },
+
+            items: [{
+                module   : RangeField,
+                labelText: 'Translate X',
+                maxValue : 5000,
+                minValue : 0,
+                name     : 'translateX',
+                value    : 0,
+                listeners: {
+                    change : 'onRangefieldChange',
+                    mounted: 'onRangefieldMounted'
+                }
+            }, {
+                module   : RangeField,
+                labelText: 'Translate Y',
+                maxValue : 1500,
+                minValue : -1500,
+                name     : 'translateY',
+                value    : 0,
+                listeners: {
+                    change: 'onRangefieldChange'
+                }
+            }, {
+                module   : RangeField,
+                labelText: 'Translate Z',
+                maxValue : 550,
+                minValue : -4500,
+                name     : 'translateZ',
+                value    : 0,
+                listeners: {
+                    change : 'onRangefieldChange',
+                    mounted: 'onRangefieldMounted'
+                }
+            }, {
+                module   : RangeField,
+                labelText: 'Amount Rows',
+                maxValue : 15,
+                minValue : 1,
+                name     : 'amountRows',
+                value    : 3,
+                listeners: {
+                    change: 'onRangefieldChange'
+                }
+            }, {
+                ntype  : 'button',
+                handler: 'onOrderButtonClick',
+                text   : 'Order by Row',
+                style  : {margin: '20px'}
+            }, {
+                ntype: 'label',
+                text : 'Sort By:'
+            }, {
+                ntype : 'container',
+                layout: {ntype: 'hbox', align: 'stretch'},
+                style : {minHeight: '134px', padding: '0'},
+
+                items : [{
+                    ntype : 'container',
+                    layout: {ntype: 'vbox', align: 'stretch'},
+
+                    itemDefaults: {
+                        ntype  : 'button',
+                        handler: 'onSortButtonClick'
+                    },
+
+                    items: [{
+                        field: 'cases',
+                        text : 'Cases',
+                        style: {margin: '10px', marginTop: '0'}
+                    }, {
+                        field: 'deaths',
+                        text : 'Deaths',
+                        style: {margin: '10px', marginBottom: '10px', marginTop: 0}
+                    }, {
+                        field: 'country',
+                        text : 'Country',
+                        style: {margin: '10px', marginTop: 0}
+                    }, {
+                        field: 'recovered',
+                        text : 'Recovered',
+                        style: {margin: '10px', marginTop: 0}
+                    }]
+                }, {
+                    ntype : 'container',
+                    layout: {ntype: 'vbox', align: 'stretch'},
+
+                    itemDefaults: {
+                        ntype  : 'button',
+                        handler: 'onSortButtonClick'
+                    },
+
+                    items: [{
+                        field: 'todayCases',
+                        text : 'Cases today',
+                        style: {margin: '10px', marginTop: '0'}
+                    }, {
+                        field: 'todayDeaths',
+                        text : 'Deaths today',
+                        style: {margin: '10px', marginBottom: '10px', marginTop: 0}
+                    }, {
+                        field: 'critical',
+                        text : 'Critical',
+                        style: {margin: '10px', marginBottom: '43px', marginTop: 0}
+                    }]
+                }]
+            }, {
+                ntype: 'label',
+                text : [
+                    '<b>Navigation Concept</b>',
+                    '<p>You can use the Arrow Keys to walk through the items.</p>'
+                ].join(''),
+
+                style: {
+                    backgroundColor: '#323232',
+                    color          : '#ddd',
+                    fontSize       : '13px',
+                    margin         : '10px',
+                    padding        : '10px',
+                    whiteSpace     : 'normal'
+                }
+            }, {
+                ntype: 'label',
+                cls  : ['neo-link-color'],
+                text : [
+                    '<b>Attribution</b>',
+                    '<p>App created with <a href="https://github.com/neomjs/neo">neo.mjs</a>.</p>',
+                    '<p>Data provided by <a href="https://github.com/disease-sh/API">disease-sh/API</a>.</p>',
+                    '<p>Country Flag Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a>.</p>'
+                ].join(''),
+
+                style: {
+                    backgroundColor: '#323232',
+                    color          : '#ddd',
+                    fontSize       : '13px',
+                    margin         : '10px',
+                    padding        : '10px',
+                    whiteSpace     : 'normal'
+                }
+            }]
+        }]
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me  = this,
+            url = 'https://disease.sh/v3/covid-19/countries';
+
+        me.gallery = Neo.create({
+            module   : CountryGallery,
+            appName  : me.appName,
+            parentId : me.id,
+            reference: 'gallery',
+            ...me.galleryConfig
+        });
+
+        me.items[0].items.unshift(me.gallery);
+
+        fetch(url)
+            .then(response => response.json())
+            .catch(err => console.log('Can’t access ' + url, err))
+            .then(data => me.addStoreItems(data));
+
+        Neo.Main.setNeoConfig({
+            key     : 'renderCountDeltas',
+            value   : true,
+            windowId: me.windowId
+        });
+
+        if (me.showGitHubStarButton) {
+            me.on('mounted', () => {
+                Neo.main.DomAccess.addScript({
+                    async: true,
+                    defer: true,
+                    src  : 'https://buttons.github.io/buttons.js'
+                })
+            })
+        }
+    }
+
+    /**
+     * @param {Object[]} data
+     */
+    addStoreItems(data) {
+        this.getStore().data = data
+    }
+
+    /**
+     * @returns {Neo.data.Store}
+     */
+    getStore() {
+        return this.items[0].items[0].store
+    }
+
+    /**
+     * Triggered after the showGitHubStarButton config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetShowGitHubStarButton(value, oldValue) {
+        this.getItem('github-button').hidden = !value
+    }
+}
+
+export default Neo.setupClass(Viewport);

package/examples/component/coronaGallery/ViewportController.mjs

@@ -0,0 +1,88 @@
+import Controller from '../../../src/controller/Component.mjs';
+
+/**
+ * @class Neo.examples.component.coronaGallery.ViewportController
+ * @extends Neo.controller.Component
+ */
+class ViewportController extends Controller {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.component.coronaGallery.ViewportController'
+         * @protected
+         */
+        className: 'Neo.examples.component.coronaGallery.ViewportController',
+        /**
+         * @member {Neo.component.Gallery|null} gallery_=null
+         * @protected
+         */
+        gallery_: null
+    }
+
+    /**
+     * Triggered when accessing the gallery config
+     * @param {Neo.component.Gallery|null} value
+     * @protected
+     */
+    beforeGetGallery(value) {
+        if (!value) {
+            this._gallery = value = this.getReference('gallery');
+        }
+
+        return value;
+    }
+
+    /**
+     * {Object} data
+     */
+    onCollapseButtonClick(data) {
+        const panel  = this.getReference('controls-panel'),
+              expand = panel.width === 40;
+
+        panel.width = expand ? 250 : 40;
+
+        data.component.text = expand ? 'X' : '+';
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onOrderButtonClick(data) {
+        const gallery    = this.gallery,
+              orderByRow = !gallery.orderByRow;
+
+        data.component.text = orderByRow === true ? 'Order By Column' : 'Order by Row';
+
+        gallery.orderByRow = orderByRow;
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onRangefieldChange(data) {
+        this.gallery[data.component.name] = data.value
+    }
+
+    /**
+     * @param {String} id
+     */
+    onRangefieldMounted(id) {
+        const field = Neo.getComponent(id);
+
+        this.gallery.on('change' + Neo.capitalize(field.name), function(value) {
+            value = Math.min(Math.max(value, field.minValue), field.maxValue);
+            field.value = value
+        })
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onSortButtonClick(data) {
+        this.gallery.store.sorters = [{
+            property : data.component.field,
+            direction: 'DESC'
+        }]
+    }
+}
+
+export default Neo.setupClass(ViewportController);

package/examples/component/coronaGallery/app.mjs

@@ -1,6 +1,6 @@
-import MainContainer from './MainContainer.mjs';
+import Viewport from './Viewport.mjs';
 
 export const onStart = () => Neo.app({
-    mainView: MainContainer,
+    mainView: Viewport,
     name    : 'Neo.examples.component.coronaGallery'
 });

package/examples/component/multiWindowCoronaGallery/Viewport.mjs

@@ -0,0 +1,47 @@
+import BaseViewport       from '../coronaGallery/Viewport.mjs';
+import ViewportController from './ViewportController.mjs';
+
+/**
+ * @class Neo.examples.component.multiWindowCoronaGallery.Viewport
+ * @extends Neo.examples.component.coronaGallery.Viewport
+ */
+class Viewport extends BaseViewport {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.component.multiWindowCoronaGallery.Viewport'
+         * @protected
+         */
+        className: 'Neo.examples.component.multiWindowCoronaGallery.Viewport',
+        /**
+         * @member {String[]} cls=['multi-window-helix-viewport']
+         */
+        cls: ['multi-window-helix-viewport'],
+        /**
+         * @member {Neo.controller.Component} controller=ViewportController
+         */
+        controller: ViewportController
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        this.getItem('controls-panel').headers = [{
+            dock     : 'top',
+            reference: 'header-toolbar',
+
+            items: [{
+                ntype: 'label',
+                cls  : ['neo-panel-header-text', 'neo-label'],
+                text : 'Gallery Controls'
+            }, '->', {
+                handler: 'onMaximiseButtonClick',
+                iconCls: 'far fa-window-maximize'
+            }]
+        }]
+    }
+}
+
+export default Neo.setupClass(Viewport);

package/examples/component/multiWindowCoronaGallery/ViewportController.mjs

@@ -0,0 +1,128 @@
+import Controller from '../coronaGallery/ViewportController.mjs';
+
+/**
+ * @class Neo.examples.component.multiWindowCoronaGallery.ViewportController
+ * @extends Neo.examples.component.coronaGallery.ViewportController
+ */
+class ViewportController extends Controller {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.component.multiWindowCoronaGallery.ViewportController'
+         * @protected
+         */
+        className: 'Neo.examples.component.multiWindowCoronaGallery.ViewportController'
+    }
+
+    /**
+     * @member {String[]} connectedApps=[]
+     */
+    connectedApps = []
+
+    /**
+     *
+     */
+    async createPopupWindow() {
+        let me                         = this,
+            {windowId}                 = me,
+            {config, windowConfigs}    = Neo,
+            {environment}              = config,
+            firstWindowId              = parseInt(Object.keys(windowConfigs)[0]),
+            {basePath}                 = windowConfigs[firstWindowId],
+            widget                     = me.getReference('controls-panel'),
+            winData                    = await Neo.Main.getWindowData({windowId}),
+            rect                       = await me.component.getDomRect(widget.id),
+            {height, left, top, width} = rect;
+
+        if (environment !== 'development') {
+            basePath = `${basePath + environment}/`
+        }
+
+        height -= 62; // popup header in Chrome
+        left   += (width + winData.screenLeft);
+        top    += (winData.outerHeight - winData.innerHeight + winData.screenTop);
+
+        /*
+         * For this demo, the url './childapp/' would be sufficient.
+         * However, we also want to open it from within apps/portal.
+         *
+         * We match the basePath to the firstWindowId,
+         * assuming the first connected window is the (main) one which we want to be in charge.
+         */
+        await Neo.Main.windowOpen({
+            url           : basePath + 'examples/component/multiWindowCoronaGallery/childapp/',
+            windowFeatures: `height=${height},left=${left},top=${top},width=${width}`,
+            windowId      : firstWindowId,
+            windowName    : 'GalleryControls'
+        })
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.appName
+     * @param {Number} data.windowId
+     */
+    async onAppConnect(data) {
+        let me        = this,
+            {appName} = data;
+
+        if (appName === 'GalleryControls') {
+            let controlsPanel = me.getReference('controls-panel'),
+                {mainView}    = Neo.apps[appName];
+
+            me.connectedApps.push(appName);
+
+            controlsPanel.parent.remove(controlsPanel, false);
+
+            this.getReference('header-toolbar').hidden = true;
+
+            mainView.add(controlsPanel)
+        }
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.appName
+     * @param {Number} data.windowId
+     */
+    async onAppDisconnect(data) {
+        let me                  = this,
+            {appName, windowId} = data;
+
+        if (appName === 'GalleryControls') {
+            let controlsPanel = me.getReference('controls-panel');
+
+            controlsPanel.parent.remove(controlsPanel, false);
+
+            me.getReference('header-toolbar').hidden = false;
+
+            me.component.add(controlsPanel)
+        }
+        // Close popup windows when closing or reloading the main window
+        else if (appName === 'Neo.examples.component.multiWindowCoronaGallery') {console.log('close', me.connectedApps);
+            Neo.Main.windowClose({names: me.connectedApps, windowId})
+        }
+    }
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+
+        let me = this;
+
+        Neo.currentWorker.on({
+            connect   : me.onAppConnect,
+            disconnect: me.onAppDisconnect,
+            scope     : me
+        })
+    }
+
+    /**
+     * @param {Object} data
+     */
+    async onMaximiseButtonClick(data) {
+        await this.createPopupWindow()
+    }
+}
+
+export default Neo.setupClass(ViewportController);

package/examples/component/multiWindowCoronaGallery/app.mjs

@@ -0,0 +1,6 @@
+import Viewport from './Viewport.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: Viewport,
+    name    : 'Neo.examples.component.multiWindowCoronaGallery'
+});

package/examples/component/multiWindowCoronaGallery/childapp/Viewport.mjs

@@ -0,0 +1,21 @@
+import BaseViewport from '../../../../src/container/Viewport.mjs';
+
+/**
+ * @class Neo.examples.component.multiWindowCoronaGallery.childapp.Viewport
+ * @extends Neo.container.Viewport
+ */
+class Viewport extends BaseViewport {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.component.multiWindowCoronaGallery.childapp.Viewport'
+         * @protected
+         */
+        className: 'Neo.examples.component.multiWindowCoronaGallery.childapp.Viewport',
+        /**
+         * @member {Object} layout={ntype:'fit'}
+         */
+        layout: {ntype: 'fit'}
+    }
+}
+
+export default Neo.setupClass(Viewport);

package/examples/component/multiWindowCoronaGallery/childapp/app.mjs

@@ -0,0 +1,6 @@
+import Viewport from './Viewport.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: Viewport,
+    name    : 'GalleryControls'
+});

package/examples/component/multiWindowCoronaGallery/childapp/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>Gallery Controls</title>
+</head>
+<body>
+    <script src="../../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/component/multiWindowCoronaGallery/childapp/neo-config.json

@@ -0,0 +1,9 @@
+{
+    "appPath"         : "examples/component/multiWindowCoronaGallery/childapp/app.mjs",
+    "basePath"        : "../../../../",
+    "environment"     : "development",
+    "mainPath"        : "./Main.mjs",
+    "mainThreadAddons": ["Stylesheet"],
+    "themes"          : ["neo-theme-dark"],
+    "useSharedWorkers": true
+}

package/examples/component/multiWindowCoronaGallery/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 Multi-Window Corona Gallery</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/component/multiWindowCoronaGallery/neo-config.json

@@ -0,0 +1,8 @@
+{
+    "appPath"          : "examples/component/multiWindowCoronaGallery/app.mjs",
+    "basePath"         : "../../../",
+    "environment"      : "development",
+    "mainPath"         : "./Main.mjs",
+    "themes"           : ["neo-theme-dark"],
+    "useSharedWorkers" : true
+}

package/package.json

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

package/src/DefaultConfig.mjs

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

package/examples/component/coronaGallery/MainContainer.mjs

@@ -1,377 +0,0 @@
-import CountryGallery from './CountryGallery.mjs';
-import Panel          from '../../../src/container/Panel.mjs';
-import RangeField     from '../../../src/form/field/Range.mjs';
-import Viewport       from '../../../src/container/Viewport.mjs';
-
-/**
- * @class Neo.examples.component.coronaGallery.MainContainer
- * @extends Neo.container.Viewport
- */
-class MainContainer extends Viewport {
-    static config = {
-        /**
-         * @member {String} className='Neo.examples.component.coronaGallery.MainContainer'
-         * @protected
-         */
-        className: 'Neo.examples.component.coronaGallery.MainContainer',
-        /**
-         * @member {String[]} baseCls=['neo-gallery-maincontainer','neo-viewport']
-         */
-        baseCls: ['neo-gallery-maincontainer', 'neo-viewport'],
-        /**
-         * @member {Neo.component.Gallery|null} gallery=null
-         */
-        gallery: null,
-        /**
-         * @member {Object|null} galleryConfig=null
-         */
-        galleryConfig: null,
-        /**
-         * @member {Object|null} layout={ntype: 'hbox', align: 'stretch'}
-         */
-        layout: {ntype: 'hbox', align: 'stretch'},
-        /**
-         * @member {Boolean} showGitHubStarButton=true
-         */
-        showGitHubStarButton: true,
-        /**
-         * @member {Object[]} items
-         */
-        items: [{
-            ntype : 'container',
-            flex  : 1,
-            layout: 'fit',
-            style : {position: 'relative'},
-
-            items : [{
-                ntype: 'component',
-                html : 'DeltaUpdates / s: <span id="neo-delta-updates"></span>',
-                style: {
-                    position: 'absolute',
-                    right   : '150px',
-                    top     : '25px',
-                    width   : '200px',
-                    zIndex  : 1
-                }
-            }, {
-                ntype: 'component',
-                html : '<a class="github-button" href="https://github.com/neomjs/neo" data-size="large" data-show-count="true" aria-label="Star neomjs/neo on GitHub">Star</a>',
-                style: {
-                    position: 'absolute',
-                    right   : '20px',
-                    top     : '20px',
-                    zIndex  : 1
-                }
-            }]
-        }, {
-            ntype : 'panel',
-            cls   : ['neo-controls-panel', 'neo-panel', 'neo-container'],
-            layout: {ntype: 'vbox', align: 'stretch'},
-            style : {backgroundColor: '#2b2b2b'},
-            width : 260,
-
-            containerConfig: {
-                style: {overflowY: 'scroll'}
-            },
-
-            headers: [{
-                dock: 'top',
-                items: [{
-                    ntype: 'button',
-                    text : 'X',
-                    handler: function() {
-                        const panel  = this.up('panel'),
-                              expand = panel.width === 40;
-
-                        panel.width = expand ? 250 : 40;
-                        this.text   = expand ? 'X' : '+';
-                    }
-                }, {
-                    ntype: 'label',
-                    text : 'Gallery Controls'
-                }]
-            }],
-
-            itemDefaults: {
-                ntype        : 'rangefield',
-                flex         : '0 1 auto',
-                labelWidth   : '110px',
-                style        : {padding: '10px'},
-                useInputEvent: true,
-
-                listeners: {
-                    change: function(data) {
-                        if (this.name === 'opacity') {
-                            data.value /= 100;
-                        }
-                        Neo.get('neo-gallery-1')[this.name] = data.value;
-                    }
-                }
-            },
-
-            items: [{
-                labelText: 'Translate X',
-                maxValue : 5000,
-                minValue : 0,
-                name     : 'translateX',
-                value    : 0,
-                listeners: {
-                    change: function(data) {
-                        Neo.get('neo-gallery-1')[this.name] = data.value;
-                    },
-                    mounted: function(fieldId) {
-                        let field = Neo.get(fieldId);
-
-                        Neo.get('neo-gallery-1').on('changeTranslateX', function(value) {
-                            value = Math.min(Math.max(value, this.minValue), this.maxValue);
-                            this.value = value;
-                        }, field);
-                    }
-                }
-            }, {
-                labelText: 'Translate Y',
-                maxValue : 1500,
-                minValue : -1500,
-                name     : 'translateY',
-                value    : 0
-            }, {
-                labelText: 'Translate Z',
-                maxValue : 550,
-                minValue : -4500,
-                name     : 'translateZ',
-                value    : 0,
-                listeners: {
-                    change: function(data) {
-                        Neo.get('neo-gallery-1')[this.name] = data.value;
-                    },
-                    mounted: function(fieldId) {
-                        let field = Neo.get(fieldId);
-
-                        Neo.get('neo-gallery-1').on('changeTranslateZ', function(value) {
-                            value = Math.min(Math.max(value, this.minValue), this.maxValue);
-                            this.value = value;
-                        }, field);
-                    }
-                }
-            }, {
-                labelText: 'Amount Rows',
-                maxValue : 15,
-                minValue : 1,
-                name     : 'amountRows',
-                value    : 3
-            }, {
-                ntype       : 'button',
-                text        : 'Order by Row',
-                listeners   : {},
-                style       : {margin: '20px'},
-                domListeners: {
-                    click: function() {
-                        const gallery    = Neo.get('neo-gallery-1'),
-                              orderByRow = !gallery.orderByRow;
-
-                        this.text = orderByRow === true ? 'Order By Column' : 'Order by Row';
-
-                        gallery.orderByRow = orderByRow;
-                    }
-                }
-            }, {
-                ntype: 'label',
-                text : 'Sort By:'
-            }, {
-                ntype : 'container',
-                layout: {ntype: 'hbox', align: 'stretch'},
-                style : {minHeight: '134px', padding: '0'},
-
-                items : [{
-                    ntype : 'container',
-                    layout: {ntype: 'vbox', align: 'stretch'},
-                    items : [{
-                        ntype    : 'button',
-                        text     : 'Cases',
-                        listeners: {},
-                        style    : {margin: '10px', marginTop: '0'},
-
-                        domListeners: {
-                            click: function() {
-                                Neo.get('neo-gallery-1').store.sorters = [{
-                                    property : 'cases',
-                                    direction: 'DESC'
-                                }];
-                            }
-                        }
-                    }, {
-                        ntype    : 'button',
-                        text     : 'Deaths',
-                        listeners: {},
-                        style    : {margin: '10px', marginBottom: '10px', marginTop: 0},
-
-                        domListeners: {
-                            click: function() {
-                                Neo.get('neo-gallery-1').store.sorters = [{
-                                    property : 'deaths',
-                                    direction: 'DESC'
-                                }];
-                            }
-                        }
-                    }, {
-                        ntype    : 'button',
-                        text     : 'Country',
-                        listeners: {},
-                        style    : {margin: '10px', marginTop: 0},
-
-                        domListeners: {
-                            click: function() {
-                                Neo.get('neo-gallery-1').store.sorters = [{
-                                    property : 'country',
-                                    direction: 'ASC'
-                                }];
-                            }
-                        }
-                    }, {
-                        ntype    : 'button',
-                        text     : 'Recovered',
-                        listeners: {},
-                        style    : {margin: '10px', marginTop: 0},
-
-                        domListeners: {
-                            click: function() {
-                                Neo.get('neo-gallery-1').store.sorters = [{
-                                    property : 'recovered',
-                                    direction: 'ASC'
-                                }];
-                            }
-                        }
-                    }]
-                }, {
-                    ntype : 'container',
-                    layout: {ntype: 'vbox', align: 'stretch'},
-                    items : [{
-                        ntype    : 'button',
-                        text     : 'Cases today',
-                        listeners: {},
-                        style    : {margin: '10px', marginTop: '0'},
-
-                        domListeners: {
-                            click: function() {
-                                Neo.get('neo-gallery-1').store.sorters = [{
-                                    property : 'todayCases',
-                                    direction: 'DESC'
-                                }];
-                            }
-                        }
-                    }, {
-                        ntype    : 'button',
-                        text     : 'Deaths today',
-                        listeners: {},
-                        style    : {margin: '10px', marginBottom: '10px', marginTop: 0},
-
-                        domListeners: {
-                            click: function() {
-                                Neo.get('neo-gallery-1').store.sorters = [{
-                                    property : 'todayDeaths',
-                                    direction: 'DESC'
-                                }];
-                            }
-                        }
-                    }, {
-                        ntype    : 'button',
-                        text     : 'Critical',
-                        listeners: {},
-                        style: {margin: '10px', marginBottom: '43px', marginTop: 0},
-
-                        domListeners: {
-                            click: function() {
-                                Neo.get('neo-gallery-1').store.sorters = [{
-                                    property : 'critical',
-                                    direction: 'DESC'
-                                }];
-                            }
-                        }
-                    }]
-                }]
-            }, {
-                ntype: 'label',
-                text : [
-                    '<b>Navigation Concept</b>',
-                    '<p>You can use the Arrow Keys to walk through the items.</p>'
-                ].join(''),
-
-                style: {
-                    backgroundColor: '#323232',
-                    color          : '#ddd',
-                    fontSize       : '13px',
-                    margin         : '10px',
-                    padding        : '10px',
-                    whiteSpace     : 'normal'
-                }
-            }, {
-                ntype: 'label',
-                cls  : ['neo-link-color'],
-                text : [
-                    '<b>Attribution</b>',
-                    '<p>App created with <a href="https://github.com/neomjs/neo">neo.mjs</a>.</p>',
-                    '<p>Data provided by <a href="https://github.com/disease-sh/API">disease-sh/API</a>.</p>',
-                    '<p>Country Flag Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a>.</p>'
-                ].join(''),
-
-                style: {
-                    backgroundColor: '#323232',
-                    color          : '#ddd',
-                    fontSize       : '13px',
-                    margin         : '10px',
-                    padding        : '10px',
-                    whiteSpace     : 'normal'
-                }
-            }]
-        }]
-    }
-
-    /**
-     * @param {Object} config
-     */
-    construct(config) {
-        super.construct(config);
-
-        let me  = this,
-            url = 'https://disease.sh/v3/covid-19/countries';
-
-        me.gallery = Neo.create({
-            module: CountryGallery,
-            id    : 'neo-gallery-1',
-            ...me.galleryConfig
-        });
-
-        me.items[0].items.unshift(me.gallery);
-
-        fetch(url)
-            .then(response => response.json())
-            .catch(err => console.log('Can’t access ' + url, err))
-            .then(data => me.addStoreItems(data));
-
-        if (me.showGitHubStarButton) {
-            me.on('mounted', () => {
-                Neo.main.DomAccess.addScript({
-                    async: true,
-                    defer: true,
-                    src  : 'https://buttons.github.io/buttons.js'
-                })
-            })
-        }
-    }
-
-    /**
-     * @param {Object[]} data
-     */
-    addStoreItems(data) {
-        this.getStore().data = data
-    }
-
-    /**
-     * @returns {Neo.data.Store}
-     */
-    getStore() {
-        return this.items[0].items[0].store
-    }
-}
-
-export default Neo.setupClass(MainContainer);