neo.mjs 2.3.11 → 2.3.15

package/README.md

@@ -32,10 +32,9 @@ No need to take care of a workers setup, and the cross channel communication on
 8. <a href="#online-docs">Online Docs</a>
 9. <a href="#command-line-interface">Command-Line Interface</a>
 10. <a href="#get-started">Ready to get started?</a>
-11. <a href="#project-history">Project History</a>
-12. <a href="#story--vision">Story & Vision</a>
-13. <a href="#contributors">neo.mjs is in need of more contributors!</a>
-14. <a href="#sponsors">neo.mjs is in need of more sponsors!</a>
+11. <a href="#story--vision">Story & Vision</a>
+12. <a href="#contributors">neo.mjs is in need of more contributors!</a>
+13. <a href="#sponsors">neo.mjs is in need of more sponsors!</a>
 
 </br></br>
 <h2 id="slack-channel">1. Slack Channel for questions & feedback</h2>
@@ -203,14 +202,7 @@ Please take a look at the <a href=".github/GETTING_STARTED.md">Getting Started G
 Here is an in depth tutorial on how to build your first neo.mjs app:</br>
 https://itnext.io/define-a-web-4-0-app-to-be-multi-threaded-9c495c0d0ef9?source=friends_link&sk=4d143ace05f0e9bbe82babd9433cc822
 </br></br>
-<h2 id="project-history">11. Project History</h2>
-
-neo.mjs got released to the public on November 23, 2019.</br>
-Before this point, the project was already at 3720 commits.<br>
-Find out more about the start of it inside the <a href=".github/NEOMJS_HISTORY.md">Project History</a> file.
-
-</br></br>
-<h2 id="story--vision">12. Story & Vision</h2>
+<h2 id="story--vision">11. Story & Vision</h2>
 
 Although neo.mjs is ready to craft beautiful & blazing fast UIs,</br>
 the current state is just a fraction of a bigger picture.
@@ -218,7 +210,7 @@ the current state is just a fraction of a bigger picture.
 Take a look at the <a href=".github/STORY.md">Project Story</a> and <a href=".github/VISION.md">Vision</a>.
 
 </br></br>
-<h2 id="contributors">13. neo.mjs is in need for more contributors!</h2>
+<h2 id="contributors">12. neo.mjs is in need for more contributors!</h2>
 
 Another way to fasten up the neo.mjs development speed is to actively jump in.</br>
 As the shiny "PRs welcome" badge suggests: open source is intended to be improved by anyone who is up for the challenge.
@@ -228,7 +220,7 @@ You can also write a guide in case you learned something new while using neo.mjs
 Either way, here are more infos: <a href="./CONTRIBUTING.md">Contributing</a>
 
 </br></br>
-<h2 id="sponsors">14. neo.mjs is in need for sponsors!</h2>
+<h2 id="sponsors">13. neo.mjs is in need for sponsors!</h2>
 
 neo.mjs is an MIT-licensed open source project with an ongoing development.</br>
 So far the development was made possible with burning my (tobiu's) personal savings.</br>

package/apps/covid/view/HeaderContainer.mjs

@@ -132,9 +132,7 @@ class HeaderContainer extends Container {
                     },
 
                     listeners: {
-                        change: 'onCountryFieldChange',
-                        clear : 'onCountryFieldClear',
-                        select: 'onCountryFieldSelect'
+                        change: 'onCountryFieldChange'
                     },
 
                     store: {

package/apps/covid/view/HelixContainer.mjs

@@ -242,7 +242,7 @@ class HelixContainer extends Container {
     constructor(config) {
         super(config);
 
-        const me = this;
+        let me = this;
 
         me.helix = Neo.create({
             module   : Helix,

package/apps/covid/view/MainContainerController.mjs

@@ -226,7 +226,6 @@ class MainContainerController extends ComponentController {
         me.component.on('mounted', me.onMainViewMounted, me);
     }
 
-
     /**
      *
      * @param {Object} data
@@ -252,21 +251,6 @@ class MainContainerController extends ComponentController {
         }
     }
 
-    /**
-     *
-     */
-    onCountryFieldClear() {
-        this.countryRecord = null;
-    }
-
-    /**
-     *
-     * @param {Object} data
-     */
-    onCountryFieldSelect(data) {
-        this.countryRecord = data.record;
-    }
-
     /**
      *
      * @param {Object} value
@@ -277,7 +261,7 @@ class MainContainerController extends ComponentController {
             activeIndex = me.getTabIndex(value.hash),
             activeView  = me.getView(activeIndex),
             country     = value.hash?.country,
-            ntype;
+            countryRecord, ntype;
 
         me.getReference('tab-container').activeIndex = activeIndex;
         me.activeMainTabIndex = activeIndex;
@@ -312,9 +296,8 @@ class MainContainerController extends ComponentController {
                 me.mapboxglMapHasData = true;
             }
 
-            if (me.countryRecord) {
-                MainContainerController.selectMapboxGlCountry(activeView, me.countryRecord);
-            }
+            countryRecord = me.getModel().data.countryRecord;
+            countryRecord && MainContainerController.selectMapboxGlCountry(activeView, countryRecord);
 
             activeView.autoResize();
         } else if (ntype === 'covid-world-map' && me.data) {

package/apps/covid/view/TableContainerController.mjs

@@ -155,8 +155,8 @@ class TableContainerController extends ComponentController {
      * @param {String} countryName
      */
     loadHistoricalData(countryName) {
-        const me      = this,
-              apiPath = me.apiBaseUrl + me.apiHistoricalDataEndpoint + countryName + '?lastdays=' + me.apiHistoricalDataTimeRange;
+        let me      = this,
+            apiPath = me.apiBaseUrl + me.apiHistoricalDataEndpoint + countryName + '?lastdays=' + me.apiHistoricalDataTimeRange;
 
         fetch(apiPath)
             .then(response => response.json())
@@ -182,8 +182,8 @@ class TableContainerController extends ComponentController {
      * {Object} data
      */
     onCollapseButtonClick(data) {
-        const panel  = this.getReference('controls-panel'),
-              expand = panel.width === 40;
+        let panel  = this.getReference('controls-panel'),
+            expand = panel.width === 40;
 
         panel.width = expand ? this.component.historyPanelWidth : 40;
 
@@ -194,7 +194,7 @@ class TableContainerController extends ComponentController {
      * {Object} record
      */
     onCountryChange(record) {
-        const me = this;
+        let me = this;
 
         if (record) {
             me.selectedRecord = {...record};
@@ -212,9 +212,9 @@ class TableContainerController extends ComponentController {
      * {Object} data
      */
     onDailyValuesChange(data) {
-        const chartId     = this.getReference('line-chart').id,
-              logCheckbox = this.getReference('logarithmic-scale-checkbox'),
-              value       = data.value;
+        let chartId     = this.getReference('line-chart').id,
+            logCheckbox = this.getReference('logarithmic-scale-checkbox'),
+            value       = data.value;
 
         if (value) {
             logCheckbox.set({

package/apps/covid/view/country/Table.mjs

@@ -129,9 +129,7 @@ class Table extends Container {
                 if (!selectionModel.isSelected(id)) {
                     selectionModel.select(id);
 
-                    if (me.mounted) {
-                        Neo.main.DomAccess.scrollToTableRow({id: id});
-                    }
+                    me.mounted && Neo.main.DomAccess.scrollToTableRow({id: id});
                 }
             } else {
                 selectionModel.deselectAll();

package/apps/sharedcovid/view/GalleryContainer.mjs

@@ -208,7 +208,14 @@ class GalleryContainer extends Container {
 
         me.gallery = Neo.create({
             module   : Gallery,
+            appName  : me.appName,
+            parentId : me.id,
             reference: 'gallery',
+
+            model: {
+                parent: me.getModel()
+            },
+
             ...me.galleryConfig
         });
 

package/apps/sharedcovid/view/HeaderContainer.mjs

@@ -135,9 +135,12 @@ class HeaderContainer extends Container {
                     style        : {marginTop: '15px'},
                     width        : 200,
 
+                    bind: {
+                        value: data => data.country
+                    },
+
                     listeners: {
-                        clear : 'onCountryFieldClear',
-                        select: 'onCountryFieldSelect'
+                        change: 'onCountryFieldChange'
                     },
 
                     store: {
@@ -177,4 +180,4 @@ class HeaderContainer extends Container {
 
 Neo.applyClassConfig(HeaderContainer);
 
-export {HeaderContainer as default};
+export {HeaderContainer as default};

package/apps/sharedcovid/view/HelixContainer.mjs

@@ -250,11 +250,18 @@ class HelixContainer extends Container {
     constructor(config) {
         super(config);
 
-        const me = this;
+        let me = this;
 
         me.helix = Neo.create({
             module   : Helix,
+            appName  : me.appName,
+            parentId : me.id,
             reference: 'helix',
+
+            model: {
+                parent: me.getModel()
+            },
+
             ...me.helixConfig
         });
 

package/apps/sharedcovid/view/MainContainer.mjs

@@ -1,6 +1,7 @@
 import FooterContainer         from './FooterContainer.mjs';
 import HeaderContainer         from './HeaderContainer.mjs';
 import MainContainerController from './MainContainerController.mjs';
+import MainContainerModel      from './MainContainerModel.mjs';
 import TabContainer            from '../../../src/tab/Container.mjs';
 import Viewport                from '../../../src/container/Viewport.mjs';
 
@@ -90,10 +91,14 @@ class MainContainer extends Viewport {
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}
          */
-        layout: {ntype: 'vbox', align: 'stretch'}
+        layout: {ntype: 'vbox', align: 'stretch'},
+        /**
+         * @member {SharedCovid.view.MainContainerModel} model=MainContainerModel
+         */
+        model: MainContainerModel
     }}
 }
 
 Neo.applyClassConfig(MainContainer);
 
-export {MainContainer as default};
+export {MainContainer as default};

package/apps/sharedcovid/view/MainContainerController.mjs

@@ -34,10 +34,6 @@ class MainContainerController extends ComponentController {
          * @member {String[]} connectedApps=[]
          */
         connectedApps: [],
-        /**
-         * @member {Object|null} countryRecord=null
-         */
-        countryRecord: null,
         /**
          * @member {Object[]|null} data=null
          */
@@ -80,7 +76,6 @@ class MainContainerController extends ComponentController {
     }}
 
     /**
-     *
      * @param {Object[]} data
      */
     addStoreItems(data) {
@@ -122,7 +117,6 @@ class MainContainerController extends ComponentController {
     }
 
     /**
-     *
      * @param {Object} data
      * @param {Number} data.active
      * @param {Number} data.cases
@@ -157,7 +151,6 @@ class MainContainerController extends ComponentController {
     }
 
     /**
-     *
      * @param {Object} record
      */
     clearCountryField(record) {
@@ -192,7 +185,6 @@ class MainContainerController extends ComponentController {
     }
 
     /**
-     *
      * @param {String} [appName]
      * @returns {Neo.component.Base}
      */
@@ -205,7 +197,6 @@ class MainContainerController extends ComponentController {
     }
 
     /**
-     *
      * @param {Object} hashObject
      * @param {String} hashObject.mainview
      * @returns {Number}
@@ -219,7 +210,6 @@ class MainContainerController extends ComponentController {
     }
 
     /**
-     *
      * @param {Number} tabIndex
      * @returns {Neo.component.Base}
      */
@@ -258,7 +248,6 @@ class MainContainerController extends ComponentController {
     }
 
     /**
-     *
      * @param {Object} data
      * @param {String} data.appName
      */
@@ -316,7 +305,6 @@ class MainContainerController extends ComponentController {
     }
 
     /**
-     *
      * @param {Object} data
      * @param {String} data.appName
      */
@@ -412,44 +400,42 @@ class MainContainerController extends ComponentController {
         me.component.on('mounted', me.onMainViewMounted, me);
     }
 
-    /**
-     *
-     */
-    onCountryFieldClear() {
-        this.countryRecord = null;
-
-        Neo.Main.editRoute({
-            country: null
-        });
-    }
 
     /**
-     *
      * @param {Object} data
      */
-    onCountryFieldSelect(data) {console.log('onCountryFieldSelect', data);
-        this.countryRecord = data.record;
+    onCountryFieldChange(data) {
+        let component  = data.component,
+            store      = component.store,
+            value      = data.value,
+            record;
+
+        if (store.getCount() > 0) {
+            if (Neo.isObject(value)) {
+                record = value;
+                value  = value[component.displayField];
+            } else {
+                record = value && store.find('country', value)?.[0];
+            }
 
-        Neo.Main.editRoute({
-            country: data.value
-        });
+            this.getModel().setData({
+                country      : value,
+                countryRecord: record || null
+            });
+        }
     }
 
     /**
-     *
      * @param {Object} value
      * @param {Object} oldValue
      */
     onHashChange(value, oldValue) {
-        let me                = this,
-            activeIndex       = me.getTabIndex(value.hash),
-            activeView        = me.getView(activeIndex),
-            country           = value.hash?.country,
-            countryField      = me.getReference('country-field'),
-            tabContainer      = me.getReference('tab-container'),
-            delaySelection    = !me.data ? 1000 : tabContainer.activeIndex !== activeIndex ? 100 : 0,
-            listeners         = me.mainTabsListeners,
-            id, ntype, selectionModel;
+        let me           = this,
+            activeIndex  = me.getTabIndex(value.hash),
+            activeView   = me.getView(activeIndex),
+            country      = value.hash?.country,
+            tabContainer = me.getReference('tab-container'),
+            countryRecord, ntype;
 
         if (me.firstHashChange || value.appNames) {
             tabContainer.activeIndex = activeIndex;
@@ -463,112 +449,42 @@ class MainContainerController extends ComponentController {
                 return;
             }
 
-            // todo: this will only load each store once. adjust the logic in case we want to support reloading the API
+            me.getModel().setData({
+                country: country || null
+            });
 
+            // todo: this will only load each store once. adjust the logic in case we want to support reloading the API
             if (me.data && activeView.store?.getCount() < 1) {
                 activeView.store.data = me.data;
-                delaySelection = 500;
             }
 
             ntype = activeView.ntype;
 
-            // todo: https://github.com/neomjs/neo/issues/483
-            // quick hack. selectionModels update the vdom of the table.Container.
-            // if table.View is vdom updating, this can result in a 2x rendering of all rows.
-            if (delaySelection === 1000 && activeView.ntype === 'table-container') {
-                delaySelection = 2000;
-            }
-
-            if (ntype === 'covid-world-map' && me.data) {
-                if (!me.worldMapHasData) {
-                    activeView.loadData(me.data);
-                    me.worldMapHasData = true;
+            if ((ntype === 'mapboxgl' || me.connectedApps.includes('SharedCovidMap')) && me.data) {
+                if (!me.mapBoxView) {
+                    me.mapBoxView = me.getReference('mapboxglmap');
                 }
-            }
-
-            // todo: instead of a timeout this should add a store load listener (single: true)
-            setTimeout(() => {
-                if (me.data) {
-                    selectionModel = activeView.selectionModel;
-
-                    if (country) {
-                        countryField.value = country;
-                    } else {
-                        value.country = 'all';
-                    }
-
-                    if (ntype === 'gallery' || me.connectedApps.includes('SharedCovidGallery')) {
-                        if (!listeners.includes('gallery')) {
-                            listeners.push('gallery');
-                            me.galleryView = me.getReference('gallery');
-                            me.galleryView.on('select', me.updateCountryField, me);
-                        }
-
-                        if (country && !me.galleryView.selectionModel.isSelected(country)) {
-                            me.galleryView.selectionModel.select(country, false);
-                        }
-                    }
-
-                    if (ntype === 'helix' || me.connectedApps.includes('SharedCovidHelix')) {
-                        if (!listeners.includes('helix')) {
-                            listeners.push('helix');
-                            me.helixView = me.getReference('helix');
-                            me.helixView.on('select', me.updateCountryField, me);
-                        }
-
-                        me.helixView.getOffsetValues();
-
-                        if (country && !me.helixView.selectionModel.isSelected(country)) {
-                            me.helixView.selectionModel.select(country, false);
-                            me.helixView.onKeyDownSpace(null);
-                        }
-                    }
-
-                    if ((ntype === 'mapboxgl' || me.connectedApps.includes('SharedCovidMap')) && me.data) {
-                        if (!me.mapBoxView) {
-                            me.mapBoxView = me.getReference('mapboxglmap');
-                        }
 
-                        if (me.mapboxStyle) {
-                            me.mapBoxView.mapboxStyle = me.mapBoxView[me.mapboxStyle];
-                            delete me.mapboxStyle;
-                        }
-
-                        if (!me.mapboxglMapHasData) {
-                            me.mapBoxView.chartData = me.data;
-                            me.mapboxglMapHasData = true;
-                        }
-
-                        if (me.countryRecord) {
-                            MainContainerController.selectMapboxGlCountry(me.mapBoxView, me.tableView.store.get(country));
-                        }
-
-                        me.mapBoxView.autoResize();
-                    }
-
-                    if (ntype === 'table-container') {
-                        if (!listeners.includes('table')) {
-                            listeners.push('table');
-                            me.tableView = me.getReference('table')
-
-                            me.tableView.on({
-                                deselect: me.clearCountryField,
-                                select  : me.updateCountryField,
-                                scope   : me
-                            });
-                        }
+                if (me.mapboxStyle) {
+                    me.mapBoxView.mapboxStyle = me.mapBoxView[me.mapboxStyle];
+                    delete me.mapboxStyle;
+                }
 
-                        id = selectionModel.getRowId(activeView.store.indexOf(country));
+                if (!me.mapboxglMapHasData) {
+                    me.mapBoxView.chartData = me.data;
+                    me.mapboxglMapHasData = true;
+                }
 
-                        me.getReference('table-container').fire('countrySelect', {record: activeView.store.get(country)});
+                countryRecord = me.getModel().data.countryRecord;
+                countryRecord && MainContainerController.selectMapboxGlCountry(me.mapBoxView, countryRecord);
 
-                        if (country && !selectionModel.isSelected(id)) {
-                            selectionModel.select(id);
-                            Neo.main.DomAccess.scrollToTableRow({id: id});
-                        }
-                    }
+                me.mapBoxView.autoResize();
+            } else if (ntype === 'covid-world-map' && me.data) {
+                if (!me.worldMapHasData) {
+                    activeView.loadData(me.data);
+                    me.worldMapHasData = true;
                 }
-            }, delaySelection);
+            }
         }
 
         me.firstHashChange = false;
@@ -750,11 +666,10 @@ class MainContainerController extends ComponentController {
     }
 
     /**
-     *
      * @param view
      * @param record
      */
-    static selectMapboxGlCountry(view, record) {console.log(record.countryInfo.iso2);
+    static selectMapboxGlCountry(view, record) {
         // https://github.com/neomjs/neo/issues/490
         // there are missing iso2&3 values on natural earth vector
         const map = {
@@ -777,7 +692,6 @@ class MainContainerController extends ComponentController {
     }
 
     /**
-     *
      * @param {Object} data
      * @param {Object} data.record
      */

package/apps/sharedcovid/view/MainContainerModel.mjs

@@ -0,0 +1,51 @@
+import Component from '../../../src/model/Component.mjs';
+
+/**
+ * @class SharedCovid.view.MainContainerModel
+ * @extends Neo.model.Component
+ */
+class MainContainerModel extends Component {
+    static getConfig() {return {
+        /**
+         * @member {String} className='SharedCovid.view.MainContainerModel'
+         * @protected
+         */
+        className: 'SharedCovid.view.MainContainerModel',
+        /**
+         * @member {Object} data
+         */
+        data: {
+            /**
+             * @member {String|null} data.country=null
+             */
+            country: null,
+            /**
+             * We are storing the currently selected record of the SharedCovid.view.HeaderContainer SelectField
+             * @member {Object} data.countryRecord=null
+             */
+            countryRecord: null
+        }
+    }}
+
+    /**
+     *
+     * @param {String} key
+     * @param {*} value
+     * @param {*} oldValue
+     */
+    onDataPropertyChange(key, value, oldValue) {
+        super.onDataPropertyChange(key, value, oldValue);
+
+        if (oldValue !== undefined) {
+            if (key === 'country') {
+                Neo.Main.editRoute({
+                    country: value
+                });
+            }
+        }
+    }
+}
+
+Neo.applyClassConfig(MainContainerModel);
+
+export {MainContainerModel as default};

package/apps/sharedcovid/view/TableContainer.mjs

@@ -22,10 +22,20 @@ class TableContainer extends Container {
          * @member {Boolean} autoMount=true
          */
         autoMount: true,
+        /**
+         * @member {Object} bind
+         */
+        bind: {
+            countryRecord: data => data.countryRecord
+        },
         /**
          * @member {Neo.controller.Component|null} controller=TableContainerController
          */
         controller: TableContainerController,
+        /**
+         * @member {Object} countryRecord_=null
+         */
+        countryRecord_: null,
         /**
          * @member {Number} historyPanelWidth=520
          * @protected
@@ -160,6 +170,8 @@ class TableContainer extends Container {
 
         me.table = Neo.create({
             module   : Table,
+            appName  : me.appName,
+            parentId : me.id,
             reference: 'table',
             ...me.tableConfig
         });
@@ -167,6 +179,18 @@ class TableContainer extends Container {
         me.items[0].items.push(me.table);
     }
 
+    /**
+     * Triggered after the countryRecord config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetCountryRecord(value, oldValue) {
+        setTimeout(() => {
+            this.controller.onCountryChange(value);
+        }, this.isConstructed ? 0 : 50);
+    }
+
     /**
      *
      */