neo.mjs 7.0.1 → 7.0.3

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/examples/table/container/MainContainer.mjs

@@ -148,6 +148,7 @@ class MainContainer extends ConfigurationViewport {
                                 ntype   : 'button',
                                 appName : this.appName,
                                 text    : '\u22ee',
+                                windowId: this.windowId,
                                 menu    : {
                                     items : [{
                                         text : 'Menu option 1'