neo.mjs 2.3.13 → 2.3.17

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);
+    }
+
     /**
      *
      */

package/apps/sharedcovid/view/TableContainerController.mjs

@@ -41,17 +41,6 @@ class TableContainerController extends ComponentController {
         table_: null
     }}
 
-    /**
-     *
-     */
-    onConstructed() {
-        super.onConstructed();
-
-        const me = this;
-
-        me.component.on('countrySelect', me.onTableSelect, me);
-    }
-
     /**
      *
      * @param {Object} data
@@ -166,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())
@@ -193,21 +182,39 @@ 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;
 
         data.component.text = expand ? 'X' : '+';
     }
 
+    /**
+     * {Object} record
+     */
+    onCountryChange(record) {
+        let me = this;
+
+        if (record) {
+            me.selectedRecord = {...record};
+        } else {
+            me.selectedRecord = null;
+        }
+
+        // removed optional chaining for now, see: https://github.com/neomjs/neo/issues/467
+        me.loadHistoricalData(record?.countryInfo?.iso2 || 'all');
+
+        me.getReference('historical-data-label').html = 'Historical Data (' + (record?.country || 'World') + ')';
+    }
+
     /**
      * {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({
@@ -240,7 +247,7 @@ class TableContainerController extends ComponentController {
      * {Object} data
      */
     onLogarithmicScaleChange(data) {
-        const lineChart = this.getReference('line-chart');
+        let lineChart = this.getReference('line-chart');
 
         Neo.main.addon.AmCharts.setProperty({
             appName: lineChart.appName,
@@ -250,26 +257,6 @@ class TableContainerController extends ComponentController {
         });
     }
 
-    /**
-     * {Object} data
-     * {Object} data.record
-     */
-    onTableSelect(data) {
-        const me      = this,
-              record  = data.record;
-
-        if (data.record) {
-            me.selectedRecord = {...record};
-        } else {
-            me.selectedRecord = null;
-        }
-
-        // removed optional chaining for now, see: https://github.com/neomjs/neo/issues/467
-        me.loadHistoricalData(record?.countryInfo?.iso2 || 'all');
-
-        me.getReference('historical-data-label').html = 'Historical Data (' + (record?.country || 'World') + ')';
-    }
-
     /**
      *
      */

package/apps/sharedcovid/view/country/Gallery.mjs

@@ -13,10 +13,20 @@ class CountryGallery extends Gallery {
          * @protected
          */
         className: 'SharedCovid.view.country.Gallery',
+        /**
+         * @member {Object} bind
+         */
+        bind: {
+            country: {twoWay: true, value: data => data.country}
+        },
         /**
          * @member {String[]} cls=['covid-country-gallery', 'neo-gallery', 'page', 'view']
          */
         cls: ['covid-country-gallery', 'neo-gallery', 'page', 'view'],
+        /**
+         * @member {String|null} country_=null
+         */
+        country_: null,
         /**
          * The image height of the gallery
          * @member {Number} imageHeight=240
@@ -100,6 +110,22 @@ class CountryGallery extends Gallery {
         store: CountryStore
     }}
 
+    /**
+     * Triggered after the country config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetCountry(value, oldValue) {
+        if (oldValue !== undefined) {
+            let selectionModel = this.selectionModel;
+
+            if (value && !selectionModel.isSelected(value)) {
+                selectionModel.select(value, false);
+            }
+        }
+    }
+
     /**
      * Override this method to get different item-markups
      * @param {Object} vdomItem
@@ -143,6 +169,14 @@ class CountryGallery extends Gallery {
         return vnodeId.split('__')[1];
     }
 
+    /**
+     * Gets triggered from selection.Model: select()
+     * @param {String[]} items
+     */
+    onSelect(items) {
+        this.country = items[0] || null;
+    }
+
     /**
      *
      * @param {Array} items
@@ -153,10 +187,10 @@ class CountryGallery extends Gallery {
         setTimeout(() => {
             this.selectOnMount = true;
             this.afterSetMounted(true, false);
-        }, 200);
+        }, 400);
     }
 }
 
 Neo.applyClassConfig(CountryGallery);
 
-export {CountryGallery as default};
+export {CountryGallery as default};

package/apps/sharedcovid/view/country/Helix.mjs

@@ -13,10 +13,20 @@ class CountryHelix extends Helix {
          * @protected
          */
         className: 'SharedCovid.view.country.Helix',
+        /**
+         * @member {Object} bind
+         */
+        bind: {
+            country: {twoWay: true, value: data => data.country}
+        },
         /**
          * @member {String[]} cls=['covid-country-helix', 'neo-helix']
          */
         cls: ['covid-country-helix', 'neo-helix'],
+        /**
+         * @member {String|null} country_=null
+         */
+        country_: null,
         /**
          * The vertical delta between each helix item (increasing this value will create a spiral)
          * @member {Number} deltaY=1.2
@@ -95,6 +105,24 @@ class CountryHelix extends Helix {
         translateZ: -2300
     }}
 
+    /**
+     * Triggered after the country config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetCountry(value, oldValue) {
+        if (oldValue !== undefined) {
+            let me             = this,
+                selectionModel = me.selectionModel;
+
+            if (value && !selectionModel.isSelected(value)) {
+                selectionModel.select(value, false);
+                me.onKeyDownSpace(null);
+            }
+        }
+    }
+
     /**
      *
      * @param {Object} vdomItem
@@ -144,8 +172,16 @@ class CountryHelix extends Helix {
     getItemId(vnodeId) {
         return vnodeId.split('__')[1];
     }
+
+    /**
+     * Gets triggered from selection.Model: select()
+     * @param {String[]} items
+     */
+    onSelect(items) {
+        this.country = items[0] || null;
+    }
 }
 
 Neo.applyClassConfig(CountryHelix);
 
-export {CountryHelix as default};
+export {CountryHelix as default};

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

@@ -13,6 +13,12 @@ class Table extends Container {
          * @protected
          */
         className: 'SharedCovid.view.country.Table',
+        /**
+         * @member {Object} bind
+         */
+        bind: {
+            country: {twoWay: true, value: data => data.country}
+        },
         /**
          * @member {String[]} cls=['covid-country-table', 'neo-table-container']
          */
@@ -95,13 +101,71 @@ class Table extends Container {
             dataField: 'testsPerOneMillion',
             text     : 'Tests / 1M'
         }],
+        /**
+         * @member {String|null} country_=null
+         */
+        country_: null,
         /**
          * @member {Neo.data.Store} store=CountryStore
          */
         store: CountryStore
     }}
+
+    /**
+     * Triggered after the country config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetCountry(value, oldValue) {
+        if (oldValue !== undefined) {
+            let me             = this,
+                selectionModel = me.selectionModel,
+                id;
+
+            if (value) {
+                id = `${me.getView().id}__tr__${value}`; // the store can not be loaded on the first selection
+
+                if (!selectionModel.isSelected(id)) {
+                    selectionModel.select(id);
+
+                    me.mounted && Neo.main.DomAccess.scrollToTableRow({id: id});
+                }
+            } else {
+                selectionModel.deselectAll();
+            }
+        }
+    }
+
+    /**
+     * Gets triggered from selection.Model: deselect()
+     * @param {String[]} items
+     */
+    onDeselect(items) {
+        this.country = null;
+    }
+
+    /**
+     * Gets triggered from selection.Model: select()
+     * @param {String[]} items
+     */
+    onSelect(items) {
+        let me   = this,
+            item = items[0] || null;
+
+        if (me.store.getCount() > 0) {
+            if (item) {
+                item = me.getView().getRecordByRowId(item)?.country;
+            }
+
+            // in case getRecordByRowId() has no match, the initial row creation will include the selection
+            if (item) {
+                me.country = item;
+            }
+        }
+    }
 }
 
 Neo.applyClassConfig(Table);
 
-export {Table as default};
+export {Table as default};

package/apps/sharedcovid/view/mapboxGl/Container.mjs

@@ -28,9 +28,6 @@ class Container extends BaseContainer {
          * @member {Object[]} items
          */
         items: [{
-            module   : Component,
-            reference: 'mapboxglmap'
-        }, {
             module      : Panel,
             height      : 150,
             ignoreLayout: true,
@@ -106,6 +103,29 @@ class Container extends BaseContainer {
         }
     }}
 
+    /**
+     *
+     * @param {Object} config
+     */
+    constructor(config) {
+        super(config);
+
+        let me = this,
+
+        map = Neo.create({
+            module   : Component,
+            appName  : me.appName,
+            parentId : me.id,
+            reference: 'mapboxglmap',
+
+            model: {
+                parent: me.getModel()
+            }
+        });
+
+        me.items.unshift(map);
+    }
+
     /**
      *
      */
@@ -123,4 +143,4 @@ class Container extends BaseContainer {
 
 Neo.applyClassConfig(Container);
 
-export {Container as default};
+export {Container as default};

package/apps/website/data/blog.json

@@ -2,10 +2,23 @@
     {
         "author"      : "Tobias Uhlig",
         "authorImage" : "author_TobiasUhlig.jpeg",
-        "date"        : "Aug 25, 2022",
+        "date"        : "Sep 23, 2021",
+        "id"          : 46,
+        "image"       : "safari-just-released-support-for-js-modules-inside-the-worker-scope.png",
+        "name"        : "Safari (Webkit) just released support for JS modules inside the worker scope",
+        "provider"    : "Medium",
+        "publisher"   : "ITNEXT",
+        "selectedInto": [],
+        "type"        : "Blog Post",
+        "url"         : "https://itnext.io/safari-webkit-just-released-support-for-js-modules-inside-the-worker-scope-b2d29e67178?source=friends_link&sk=dfabc5dd91430f11e2c49dd10b698544"
+    },
+    {
+        "author"      : "Tobias Uhlig",
+        "authorImage" : "author_TobiasUhlig.jpeg",
+        "date"        : "Aug 25, 2021",
         "id"          : 45,
         "image"       : "define-a-web-4.0-app-to-be-multi-threaded.png",
-        "name"        : "Define a web 4.0 app to be multi threaded",
+        "name"        : "Tutorial: Create your first app in neo v2",
         "provider"    : "Medium",
         "publisher"   : "ITNEXT",
         "selectedInto": [],
@@ -15,7 +28,7 @@
     {
         "author"      : "Tobias Uhlig",
         "authorImage" : "author_TobiasUhlig.jpeg",
-        "date"        : "Aug 20, 2022",
+        "date"        : "Aug 20, 2021",
         "id"          : 44,
         "image"       : "the-best-frontend-development-strategies-in-2022.png",
         "name"        : "The best frontend development strategies in 2022",
@@ -28,7 +41,7 @@
     {
         "author"      : "Tobias Uhlig",
         "authorImage" : "author_TobiasUhlig.jpeg",
-        "date"        : "Aug 13, 2022",
+        "date"        : "Aug 13, 2021",
         "id"          : 43,
         "image"       : "using-material-web-components-within-the-neomjs-application-worker.png",
         "name"        : "Using Material Web Components within the neo.mjs application worker",

package/apps/website/data/examples_devmode.json

@@ -1,6 +1,6 @@
 [
     {
-        "browsers"    : ["Chrome", "Edge"],
+        "browsers"    : ["Chrome", "Edge", "Safari"],
         "environments": ["Desktop"],
         "id"          : 19,
         "image"       : "devmode/model-component-example.png",
@@ -9,7 +9,7 @@
         "url"         : "https://neomjs.github.io/pages/node_modules/neo.mjs/examples/model/advanced/index.html"
     },
     {
-        "browsers"    : ["Chrome", "(SharedWorkers)"],
+        "browsers"    : ["Chrome", "Edge"],
         "environments": ["Desktop"],
         "id"          : 18,
         "image"       : "devmode/sharedcovid.png",
@@ -18,7 +18,7 @@
         "url"         : "https://neomjs.github.io/pages/node_modules/neo.mjs/apps/sharedcovid/index.html#mainview=table"
     },
     {
-        "browsers"    : ["Chrome", "Edge"],
+        "browsers"    : ["Chrome", "Edge", "Safari"],
         "environments": ["Desktop"],
         "id"          : 17,
         "image"       : "devmode/calendar-preview.png",
@@ -27,7 +27,7 @@
         "url"         : "https://neomjs.github.io/pages/node_modules/neo.mjs/examples/calendar/basic/index.html"
     },
     {
-        "browsers"    : ["Chrome", "Edge"],
+        "browsers"    : ["Chrome", "Edge", "Safari"],
         "environments": ["Desktop"],
         "id"          : 16,
         "image"       : "devmode/covidDashboard.png",
@@ -45,7 +45,7 @@
         "url"         : "https://neomjs.github.io/pages/node_modules/neo.mjs/apps/shareddialog/index.html"
     },
     {
-        "browsers"    : ["Chrome", "Edge"],
+        "browsers"    : ["Chrome", "Edge", "Safari"],
         "environments": ["Desktop"],
         "id"          : 14,
         "image"       : "devmode/realworldApp.png",
@@ -54,7 +54,7 @@
         "url"         : "https://neomjs.github.io/pages/node_modules/neo.mjs/apps/realworld/index.html"
     },
     {
-        "browsers"    : ["Chrome", "Edge"],
+        "browsers"    : ["Chrome", "Edge", "Safari"],
         "environments": ["Desktop"],
         "id"          : 13,
         "image"       : "devmode/coronaGallery.png",
@@ -63,7 +63,7 @@
         "url"         : "https://neomjs.github.io/pages/node_modules/neo.mjs/examples/component/coronaGallery/index.html"
     },
     {
-        "browsers"    : ["Chrome", "Edge"],
+        "browsers"    : ["Chrome", "Edge", "Safari"],
         "environments": ["Desktop"],
         "id"          : 12,
         "image"       : "devmode/coronaHelix.png",
@@ -72,7 +72,7 @@
         "url"         : "https://neomjs.github.io/pages/node_modules/neo.mjs/examples/component/coronaHelix/index.html"
     },
     {
-        "browsers"    : ["Chrome", "Edge"],
+        "browsers"    : ["Chrome", "Edge", "Safari"],
         "environments": ["Desktop"],
         "id"          : 11,
         "image"       : "devmode/website.png",
@@ -81,7 +81,7 @@
         "url"         : "https://neomjs.github.io/pages/node_modules/neo.mjs/apps/website/index.html#mainview=blog"
     },
     {
-        "browsers"    : ["Chrome", "Edge"],
+        "browsers"    : ["Chrome", "Edge", "Safari"],
         "environments": ["Desktop"],
         "id"          : 10,
         "image"       : "devmode/tableFiltering.png",
@@ -90,7 +90,7 @@
         "url"         : "https://neomjs.github.io/pages/node_modules/neo.mjs/examples/tableFiltering/"
     },
     {
-        "browsers"    : ["Chrome", "Edge"],
+        "browsers"    : ["Chrome", "Edge", "Safari"],
         "environments": ["Desktop"],
         "id"          : 9,
         "image"       : "devmode/dragdrop.png",
@@ -99,7 +99,7 @@
         "url"         : "https://neomjs.github.io/pages/node_modules/neo.mjs/examples/dialog/"
     },
     {
-        "browsers"    : ["Chrome", "Edge"],
+        "browsers"    : ["Chrome", "Edge", "Safari"],
         "environments": ["Desktop"],
         "id"          : 8,
         "image"       : "devmode/realworldApp2.png",
@@ -108,7 +108,7 @@
         "url"         : "https://neomjs.github.io/pages/node_modules/neo.mjs/apps/realworld2/index.html#/gallery"
     },
     {
-        "browsers"    : ["Chrome", "Edge"],
+        "browsers"    : ["Chrome", "Edge", "Safari"],
         "environments": ["Desktop"],
         "id"          : 7,
         "image"       : "devmode/dateSelector.png",
@@ -117,7 +117,7 @@
         "url"         : "https://neomjs.github.io/pages/node_modules/neo.mjs/examples/component/dateSelector/index.html"
     },
     {
-        "browsers"    : ["Chrome", "Edge"],
+        "browsers"    : ["Chrome", "Edge", "Safari"],
         "environments": ["Desktop"],
         "id"          : 6,
         "image"       : "devmode/gallery.png",
@@ -126,7 +126,7 @@
         "url"         : "https://neomjs.github.io/pages/node_modules/neo.mjs/examples/component/gallery/index.html"
     },
     {
-        "browsers"    : ["Chrome", "Edge"],
+        "browsers"    : ["Chrome", "Edge", "Safari"],
         "environments": ["Desktop"],
         "id"          : 5,
         "image"       : "devmode/helix.png",
@@ -135,7 +135,7 @@
         "url"         : "https://neomjs.github.io/pages/node_modules/neo.mjs/examples/component/helix/index.html"
     },
     {
-        "browsers"    : ["Chrome", "Edge"],
+        "browsers"    : ["Chrome", "Edge", "Safari"],
         "environments": ["Desktop"],
         "id"          : 4,
         "image"       : "devmode/dateField.png",
@@ -144,7 +144,7 @@
         "url"         : "https://neomjs.github.io/pages/node_modules/neo.mjs/examples/form/field/date/index.html"
     },
     {
-        "browsers"    : ["Chrome", "Edge"],
+        "browsers"    : ["Chrome", "Edge", "Safari"],
         "environments": ["Desktop"],
         "id"          : 3,
         "image"       : "devmode/selectField.png",
@@ -153,7 +153,7 @@
         "url"         : "https://neomjs.github.io/pages/node_modules/neo.mjs/examples/form/field/select/index.html"
     },
     {
-        "browsers"    : ["Chrome", "Edge"],
+        "browsers"    : ["Chrome", "Edge", "Safari"],
         "environments": ["Desktop"],
         "id"          : 2,
         "image"       : "devmode/tabContainer.png",
@@ -162,7 +162,7 @@
         "url"         : "https://neomjs.github.io/pages/node_modules/neo.mjs/examples/tab/container/index.html"
     },
     {
-        "browsers"    : ["Chrome", "Edge"],
+        "browsers"    : ["Chrome", "Edge", "Safari"],
         "environments": ["Desktop"],
         "id"          : 1,
         "image"       : "devmode/siesta.png",

package/buildScripts/webpack/development/webpack.config.main.js

@@ -15,6 +15,7 @@ module.exports = {
     output: {
         chunkFilename: 'chunks/main/[id].js',
         filename     : filenameConfig.mainOutput,
-        path         : path.resolve(processRoot, buildTarget.folder)
+        path         : path.resolve(processRoot, buildTarget.folder),
+        publicPath   : ''
     }
 };

package/buildScripts/webpack/production/webpack.config.main.js

@@ -14,6 +14,7 @@ module.exports = {
     output: {
         chunkFilename: 'chunks/main/[id].js',
         filename     : filenameConfig.mainOutput,
-        path         : path.resolve(processRoot, buildTarget.folder)
+        path         : path.resolve(processRoot, buildTarget.folder),
+        publicPath   : ''
     }
 };