neo.mjs 4.8.1 → 4.8.3

package/apps/website/data/blog.json

@@ -1,4 +1,17 @@
 [
+    {
+        "author"      : "Tobias Uhlig",
+        "authorImage" : "author_TobiasUhlig.jpeg",
+        "date"        : "Jan 18, 2023",
+        "id"          : 54,
+        "image"       : "changing-scoped-css-variables-using-javascript.png",
+        "name"        : "Changing scoped CSS variables using JavaScript",
+        "provider"    : "Medium",
+        "publisher"   : "",
+        "selectedInto": [],
+        "type"        : "Blog Post",
+        "url"         : "https://tobiasuhlig.medium.com/changing-scoped-css-variables-using-javascript-96b26dfa43b1?source=friends_link&sk=2be526c9917418b21fe42bd66c40ea87"
+    },
     {
         "author"      : "Tobias Uhlig",
         "authorImage" : "author_TobiasUhlig.jpeg",

package/package.json

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

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

@@ -1,6 +1,10 @@
 .neo-textarea {
     align-items: stretch;
 
+    .neo-input-wrapper {
+        height: fit-content;
+    }
+
     .neo-field-trigger {
         border-bottom: 1px solid var(--textfield-border-color);
     }

package/src/button/Base.mjs

@@ -73,7 +73,8 @@ class Base extends Component {
         /**
          * The scope (this pointer) inside the handler function.
          * Points to the button instance by default.
-         * @member {Object|null} handlerScope=null
+         * You can use 'this' as a string for convenience reasons
+         * @member {Object|String|null} handlerScope=null
          */
         handlerScope: null,
         /**

package/src/component/wrapper/GoogleMaps.mjs

@@ -16,6 +16,11 @@ class GoogleMaps extends Base {
      * @member {Object} markerStoreConfig=null
      */
     markerStoreConfig = null
+    /**
+     * Internal flag. Gets set to true once Neo.main.addon.GoogleMaps.create() is finished.
+     * @member {Boolean} mapCreated=false
+     */
+    mapCreated = false
     /**
      * Pass any options to the map instance which are not explicitly defined here
      * @member {Object} mapOptions={}
@@ -118,10 +123,12 @@ class GoogleMaps extends Base {
      * @protected
      */
     afterSetCenter(value, oldValue) {
-        if (oldValue !== undefined) {
+        let me = this;
+
+        if (me.mapCreated) {
             Neo.main.addon.GoogleMaps.setCenter({
-                appName: this.appName,
-                id     : this.id,
+                appName: me.appName,
+                id     : me.id,
                 value
             })
         }
@@ -176,6 +183,7 @@ class GoogleMaps extends Base {
 
             setTimeout(() => {
                 Neo.main.addon.GoogleMaps.create(opts).then(() => {
+                    me.mapCreated = true;
                     me.onComponentMounted();
                 });
             }, 50);
@@ -189,9 +197,9 @@ class GoogleMaps extends Base {
      * @protected
      */
     afterSetZoom(value, oldValue) {
-        if (oldValue !== undefined) {
-            let me = this;
+        let me = this;
 
+        if (me.mapCreated) {
             Neo.main.addon.GoogleMaps.setZoom({
                 appName: me.appName,
                 id     : me.id,
@@ -290,10 +298,9 @@ class GoogleMaps extends Base {
      * @protected
      */
     parseMarkerClick(data) {
-        let me     = this,
-            record = me.markerStore.get(data.id);
+        let me = this;
 
-        data.record = record;
+        data.record = me.markerStore.get(data.id);
 
         me.onMarkerClick(data);
 

package/src/controller/Application.mjs

@@ -6,6 +6,14 @@ import ClassSystemUtil from '../util/ClassSystem.mjs';
  * @extends Neo.controller.Base
  */
 class Application extends Base {
+    static getStaticConfig() {return {
+        /**
+         * True automatically applies the core/Observable.mjs mixin
+         * @member {Boolean} observable=true
+         */
+        observable: true
+    }}
+
     static getConfig() {return {
         /**
          * @member {String} className='Neo.controller.Application'

package/src/controller/Base.mjs

@@ -6,14 +6,6 @@ import HashHistory from '../util/HashHistory.mjs';
  * @extends Neo.core.Base
  */
 class Base extends CoreBase {
-    static getStaticConfig() {return {
-        /**
-         * True automatically applies the core/Observable.mjs mixin
-         * @member {Boolean} observable=true
-         */
-        observable: true
-    }}
-
     static getConfig() {return {
         /**
          * @member {String} className='Neo.controller.Base'

package/src/main/addon/MapboxGL.mjs

@@ -122,10 +122,9 @@ class MapboxGL extends Base {
      * @param {Object[]} data.layers
      */
     addLayers(data) {
-        const me  = this,
-              map = me.maps[data.id];
-
-        let beforeId;
+        let me  = this,
+            map = me.maps[data.id],
+            beforeId;
 
         if (map) {
             data.layers.forEach(item => {
@@ -145,10 +144,9 @@ class MapboxGL extends Base {
      * @param {Object[]} data.sources
      */
     addSources(data) {
-        const me  = this,
-              map = me.maps[data.id];
-
-        let id;
+        let me  = this,
+            map = me.maps[data.id],
+            id;
 
         if (map) {
             data.sources.forEach(item => {
@@ -170,7 +168,7 @@ class MapboxGL extends Base {
      */
     afterSetScriptsLoaded(value, oldValue) {
         if (value) {
-            const me = this;
+            let me = this;
 
             me.mapsToCreate.forEach(config => {
                 me.create(config);
@@ -203,13 +201,11 @@ class MapboxGL extends Base {
      * @param {String} data.id
      */
     autoResize(data) {
-        const map = this.maps[data.id];
+        let map = this.maps[data.id];
 
-        if (map) {
-            setTimeout(() => {
-                map.resize();
-            }, 100);
-        }
+        map && setTimeout(() => {
+            map.resize();
+        }, 100)
     }
 
     /**
@@ -220,8 +216,8 @@ class MapboxGL extends Base {
      * @param {Number} data.lng
      */
     center(data) {
-        const map    = this.maps[data.id],
-              center = {lat: data.lat, lng: data.lng};
+        let map    = this.maps[data.id],
+            center = {lat: data.lat, lng: data.lng};
 
         if (map) {
             if (data.animate) {
@@ -247,7 +243,7 @@ class MapboxGL extends Base {
      * @param {String}   data.zoom
      */
     create(data) {
-        const me = this;
+        let me = this;
 
         if (!me.scriptsLoaded) {
             me.mapsToCreate.push(data);
@@ -290,8 +286,8 @@ class MapboxGL extends Base {
     }
 
     insertMapboxGLScripts() {
-        const me       = this,
-              basePath = me.downloadPath + me.version + '/';
+        let me       = this,
+            basePath = me.downloadPath + me.version + '/';
 
         Promise.all([
             DomAccess.loadScript(    basePath + 'mapbox-gl.js'),
@@ -307,8 +303,8 @@ class MapboxGL extends Base {
      * @param {Object} event.target map instance
      */
     onMapLoaded(data, event) {
-        const me    = this,
-              mapId = data.id;
+        let me    = this,
+            mapId = data.id;
 
         if (data.sources) {
             me.addSources({
@@ -346,7 +342,7 @@ class MapboxGL extends Base {
      * @param {Object} event.target map instance
      */
     onMapReallyLoaded(data, event) {
-        const me = this;
+        let me = this;
 
         setTimeout(() => {
             if (data.data) {
@@ -371,7 +367,7 @@ class MapboxGL extends Base {
      * @param {Array} data.value
      */
     setFilter(data) {
-        const map = this.maps[data.id];
+        let map = this.maps[data.id];
 
         if (map) {
             map.setFilter(data.layerId, data.value, data.options || {});
@@ -391,7 +387,7 @@ class MapboxGL extends Base {
      * @param {String} data.value
      */
     setLayoutProperty(data) {
-        const map = this.maps[data.id];
+        let map = this.maps[data.id];
 
         if (map) {
             map.setLayoutProperty(data.layerId, data.key, data.value, data.options || {});
@@ -411,7 +407,7 @@ class MapboxGL extends Base {
      * @param {String} data.value
      */
     setPaintProperty(data) {
-        const map = this.maps[data.id];
+        let map = this.maps[data.id];
 
         if (map) {
             map.setPaintProperty(data.layerId, data.key, data.value, data.options || {});
@@ -427,7 +423,7 @@ class MapboxGL extends Base {
      * @param {Object|String} data.style
      */
     setStyle(data) {
-        const me = this;
+        let me = this;
 
         if (!me.scriptsLoaded || !me.hasMap(data.id)) {
             // todo
@@ -459,7 +455,7 @@ class MapboxGL extends Base {
      * @param {String} data.id
      */
     updateData(data) {
-        const me = this;
+        let me = this;
 
         if (!me.scriptsLoaded || !me.hasMap(data.id)) {
             me.dataMap[data.id] = data;
@@ -482,7 +478,7 @@ class MapboxGL extends Base {
      * @param {Number} data.zoom
      */
     zoom(data) {
-        const map = this.maps[data.id];
+        let map = this.maps[data.id];
 
         if (map) {
             map.setZoom(data.zoom);

package/src/main/addon/Stylesheet.mjs

@@ -283,7 +283,7 @@ class Stylesheet extends Base {
         for (sheet of document.styleSheets) {
             if (sheet.href.includes(data.theme)) {
                 for (rule of sheet.cssRules) {
-                    if (rule.type === 1) { // CSSRule.STYLE_RULE
+                    if (Neo.typeOf(rule) === 'CSSStyleRule') {
                         if (rule.style.getPropertyValue(key) !== '') {
                             rule.style.setProperty(key, data.value, data.priority);
                             return true;