neo.mjs 5.14.2 → 5.15.0

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/examples/component/wrapper/googleMaps/MapComponent.mjs

@@ -7,27 +7,37 @@ import MarkerDialog        from './MarkerDialog.mjs';
  */
 class MapComponent extends GoogleMapsComponent {
     static config = {
+        /**
+         * @member {String} className='Neo.examples.component.wrapper.googleMaps.MapComponent'
+         * @protected
+         */
         className: 'Neo.examples.component.wrapper.googleMaps.MapComponent',
-        ntype: 'worldmap',
-
-        // Center the map initially to Island
+        /**
+         * Center the map initially to Island
+         * @member {Object} center={lat: 64.963051,lng: -19.020835}
+         */
         center: {
             lat: 64.963051,
             lng: -19.020835
         },
-
-        // Ensure only Island is visible
-        zoom: 6,
-
-        // Adding record to keep the original data
+        /**
+         * Adding a record field
+         * @member {Object} markerStore
+         * @protected
+         */
         markerStore: {
             model: {
                 fields: [{
-                    name: 'id',
-                    type: 'Number'
+                    name: 'anchorPoint',
+                    type: 'Object'
                 }, {
                     name: 'icon',
                     type: 'Object'
+                }, {
+                    name: 'id'
+                }, {
+                    name: 'label',
+                    type: 'String'
                 }, {
                     name: 'position',
                     type: 'Object'
@@ -40,23 +50,16 @@ class MapComponent extends GoogleMapsComponent {
                 }]
             }
         },
-
-        onMarkerClick(data) {
-            let me = this,
-                record = data.record.record,
-                event = data.event;
-
-            me.disabled = true;
-
-            me.dialog = Neo.create(MarkerDialog, {
-                appName             : me.appName,
-                record              : record,
-                domEvent            : data.domEvent,
-                boundaryContainerId : me.id
-            });
-        }
+        /**
+         * Ensure only Island is visible
+         * @member {Number} zoom=6
+         */
+        zoom: 6
     }
 
+    /**
+     * @param {Object} config
+     */
     construct(config) {
         super.construct(config);
 
@@ -67,92 +70,97 @@ class MapComponent extends GoogleMapsComponent {
      * Ajax request to get the Marker Data
      */
     fetchData() {
-        let me  = this,
-            url = '../../../../examples/component/wrapper/googleMaps/earthquakes.json',
-            callbackFn = me.createMarkersAndAddToMarkerStore.bind(me);
-
-        fetch(url)
+        fetch('../../../../examples/component/wrapper/googleMaps/earthquakes.json')
             .then(response => response.json())
             .catch(err => console.log("Can't access  + url, err"))
-            .then(data => callbackFn(data));
+            .then(data => this.createMarkersAndAddToMarkerStore(data))
     }
 
     /**
-     * Create Marker records from the Server result and
-     * push all Markers to the MarkerStore
-     *
-     * @param {Object} data     from earthquake.json
+     * Create Marker records from the Server result and add all Markers to the MarkerStore
+     * @param {Object} data from earthquake.json
      */
-    createMarkersAndAddToMarkerStore (data) {
-        let me = this;
-
-        const markers = data.results.map(function(record) {
-            const date = new Date(record.timestamp),
-                // DATE
-                day = date.toLocaleDateString('en-US', { day: 'numeric' }),
-                month = date.toLocaleDateString('en-US', { month: 'short' }),
-                year = date.toLocaleDateString('en-US', { year: 'numeric' }),
-                hour = date.toLocaleTimeString('en-US', { hour: 'numeric', hour12: true }),
-                minute = date.toLocaleTimeString('en-US', { minute: 'numeric' }),
-                // ICON
-                icon = me.getIcon(undefined, undefined, record.size);
+    createMarkersAndAddToMarkerStore(data) {
+        let date, icon;
+
+        const markers = data.results.map(record => {
+            date = new Date(record.timestamp).toLocaleDateString('default', {
+                day   : 'numeric',
+                hour  : 'numeric',
+                hour12: true,
+                minute: 'numeric',
+                month : 'short',
+                year  : 'numeric'
+            });
+
+            icon = this.getIcon(undefined, undefined, record.size);
 
             // Create a single Marker
             return {
-                position: {
-                    lat: record.latitude,
-                    lng: record.longitude
-                },
-                title: `${day}, ${month} ${year}\n[${hour}:${minute}] ${record.humanReadableLocation}`,
-                record: record,
-                icon: icon
+                icon,
+                position: {lat: record.latitude, lng: record.longitude},
+                record,
+                title   : `${date}, ${record.humanReadableLocation}`
             }
         });
 
-        // Add to MarkerStore
-        me.markerStore.add(markers);
+        this.markerStore.add(markers)
     }
 
     /**
      * google.maps.SymbolPaths are not available in the worker.
-     * Therefore we are solving it here
-     *
+     * Therefore, we are solving it here
      * @param {String} symbol
      * @returns {Number}
      */
     getType(symbol) {
-        // google.maps.SymbolPath...
-        const symbolPaths = {
-            "CIRCLE": 0,
-            "FORWARD_CLOSED_ARROW": 1,
-            "FORWARD_OPEN_ARROW": 2,
-            "BACKWARD_CLOSED_ARROW": 3,
-            "BACKWARD_OPEN_ARROW": 4
-        }
-
-        return symbolPaths[symbol]
+        return {
+            'CIRCLE'               : 0,
+            'FORWARD_CLOSED_ARROW' : 1,
+            'FORWARD_OPEN_ARROW'   : 2,
+            'BACKWARD_CLOSED_ARROW': 3,
+            'BACKWARD_OPEN_ARROW'  : 4
+        }[symbol]
     }
 
     /**
      * Create an icon based on color, symbol and size
-     *
-     * @param {String} [color=red]
+     * @param {String} color=red
      * @param {'CIRCLE' | 'FORWARD_CLOSED_ARROW' | 'FORWARD_OPEN_ARROW' | 'BACKWARD_CLOSED_ARROW' | 'BACKWARD_OPEN_ARROW'} [symbol=CIRCLE]
-     * @param {Number} [scaleMultiplier=1]
+     * @param {Number} scaleMultiplier=1
      * @returns {{fillColor: string, path: Number, fillOpacity: number, strokeWeight: number, scale: number, strokeColor: string}}
      */
-    getIcon(color='red', symbol = 'CIRCLE', scaleMultiplier = 1) {
-        const path = this.getType(symbol);
-
+    getIcon(color='red', symbol='CIRCLE', scaleMultiplier=1) {
         return {
-            path: path,
-            scale: 10 * scaleMultiplier,
-            strokeColor: `dark${color}`,
-            strokeWeight: 2,
-            fillColor: color,
-            fillOpacity: 1.0
+            fillColor   : color,
+            fillOpacity : 1.0,
+            path        : this.getType(symbol),
+            scale       : 10 * scaleMultiplier,
+            strokeColor : `dark${color}`,
+            strokeWeight: 2
         }
     }
+
+    /**
+     * @param {Object} data
+     */
+    onMarkerClick(data) {
+        let me     = this,
+            record = data.record.record;
+
+        me.disabled = true;
+
+        me.dialog = Neo.create(MarkerDialog, {
+            appName             : me.appName,
+            boundaryContainerId : me.id,
+            domEvent            : data.domEvent,
+            record,
+
+            listeners: {
+                close: () => me.disabled = false
+            }
+        })
+    }
 }
 
 Neo.applyClassConfig(MapComponent);

package/examples/component/wrapper/googleMaps/MarkerDialog.mjs

@@ -55,7 +55,7 @@ class MarkerDialog extends DialogBase {
 
         value.visualDate = me.calcVisualDate(value.timestamp);
 
-        me.title = `${value.humanReadableLocation}$ | ${value.size}`;
+        me.title = `${value.humanReadableLocation} | ${value.size}`;
         vdom.cn  = me.itemTpl(value);
     }
 
@@ -67,7 +67,7 @@ class MarkerDialog extends DialogBase {
             hour = date.toLocaleTimeString('en-US', { hour: 'numeric', hour12: false }),
             minute = date.toLocaleTimeString('en-US', { minute: 'numeric' });
 
-        return `${day}.${month}.<b>${year}</b> ${hour}:${minute}`
+        return `${day}. ${month} <b>${year}</b> ${hour}:${minute}`
     }
 
     async onRender(data, automount) {

package/examples/form/field/fileupload/MainContainer.mjs

@@ -0,0 +1,45 @@
+import CheckBox              from '../../../../src/form/field/CheckBox.mjs';
+import ConfigurationViewport from '../../../ConfigurationViewport.mjs';
+import FileUploadField       from '../../../../src/form/field/FileUpload.mjs';
+import NumberField           from '../../../../src/form/field/Number.mjs';
+import Radio                 from '../../../../src/form/field/Radio.mjs';
+import TextField             from '../../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.form.field.text.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.form.field.text.MainContainer',
+        autoMount           : true,
+        configItemLabelWidth: 160,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }
+
+    createConfigurationComponents() {
+        let me = this;
+
+        return [{
+            module   : NumberField,
+            labelText: 'width',
+            listeners: {change: me.onConfigChange.bind(me, 'width')},
+            maxValue : 300,
+            minValue : 50,
+            stepSize : 5,
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.width
+        }]
+    }
+
+    createExampleComponent() {
+        return Neo.create(FileUploadField, {
+            height:  50,
+            width : 200
+        })
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/form/field/fileupload/app.mjs

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

package/examples/form/field/fileupload/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 FileUploadField</title>
+</head>
+<body>
+    <script src="../../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/form/field/fileupload/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/form/field/fileupload/app.mjs",
+    "basePath"   : "../../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}

package/examples/form/field/select/MainContainer.mjs

@@ -135,7 +135,7 @@ class MainContainer extends ConfigurationViewport {
             labelText    : 'US States',
             labelWidth   : 80,
             store        : MainStore,
-            value        : 'Arizona',
+            value        : 'Arizona', // or 'AZ'
             valueField   : 'abbreviation',
             width        : 200
         })

package/package.json

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

package/resources/scss/src/form/field/FileUpload.scss

@@ -0,0 +1,4 @@
+.neo-file-upload-field {
+    background-color: v(fileuploadfield-background-color);
+    color           : v(fileuploadfield-color);
+}

package/resources/scss/src/tree/List.scss

@@ -7,6 +7,10 @@
 
     .neo-list {
         overflow: visible;
+
+        &:focus {
+            outline: none;
+        }
     }
 
     .neo-list-container {

package/resources/scss/theme-dark/form/field/FileUpload.scss

@@ -0,0 +1,11 @@
+$neoMap: map-merge($neoMap, (
+    'fileuploadfield-background-color': red,
+    'fileuploadfield-color'           : #fff
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-dark { // .neo-fileuploadfield
+        --fileuploadfield-background-color: #{neo(fileuploadfield-background-color)};
+        --fileuploadfield-color           : #{neo(fileuploadfield-color)};
+    }
+}

package/resources/scss/theme-light/form/field/FileUpload.scss

@@ -0,0 +1,11 @@
+$neoMap: map-merge($neoMap, (
+    'fileuploadfield-background-color': darkblue,
+    'fileuploadfield-color'           : #fff
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-light { // .neo-fileuploadfield
+        --fileuploadfield-background-color: #{neo(fileuploadfield-background-color)};
+        --fileuploadfield-color           : #{neo(fileuploadfield-color)};
+    }
+}

package/src/DefaultConfig.mjs

@@ -63,12 +63,12 @@ const DefaultConfig = {
     /**
      * In case you are using the GoogleAnalytics main thread addon or useGoogleAnalytics: true,
      * you can change the gtag id here. Required for the online examples (gh pages)
-     * @default 'UA-153734404-1'
+     * @default 'G-DJ13071C55'
      * @memberOf! module:Neo
      * @name config.gtagId
      * @type String
      */
-    gtagId: 'UA-153734404-1',
+    gtagId: 'G-DJ13071C55',
     /**
      * Flag for running on https://neomjs.github.io/pages/
      * => to use local images paths instead of raw.githubusercontent.com
@@ -245,12 +245,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.14.2'
+     * @default '5.15.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.14.2'
+    version: '5.15.0'
 };
 
 Object.assign(DefaultConfig, {