neo.mjs 3.0.0 → 3.0.1

package/apps/sharedcovid/view/MainContainerController.mjs

@@ -166,9 +166,7 @@ class MainContainerController extends ComponentController {
         let me = this;
 
         Neo.Main.getWindowData().then(winData => {
-            Neo.main.DomAccess.getBoundingClientRect({
-                id: [me.getReference(containerReference).id]
-            }).then(data => {
+            me.component.getDomRect(me.getReference(containerReference).id).then(data => {
                 let {height, left, top, width} = data[0];
 
                 height -= 50; // popup header in Chrome
@@ -178,7 +176,7 @@ class MainContainerController extends ComponentController {
                 Neo.Main.windowOpen({
                     url           : `../${url}/index.html`,
                     windowFeatures: `height=${height},left=${left},top=${top},width=${width}`,
-                    windowName    : windowName
+                    windowName
                 });
             });
         });
@@ -371,13 +369,11 @@ class MainContainerController extends ComponentController {
     onComponentConstructed() {
         super.onComponentConstructed();
 
-        if (!Neo.config.hash) {
-            this.onHashChange({
-                country   : 'all',
-                hash      : {mainview: 'table'},
-                hashString: 'mainview=table'
-            }, null);
-        }
+        !Neo.config.hash && this.onHashChange({
+            country   : 'all',
+            hash      : {mainview: 'table'},
+            hashString: 'mainview=table'
+        }, null);
     }
 
     /**
@@ -611,16 +607,16 @@ class MainContainerController extends ComponentController {
         } else {
             [component.appName, ...me.connectedApps].forEach(appName => {
                 Neo.main.addon.Stylesheet.swapStyleSheet({
-                    appName: appName,
-                    href   : href,
-                    id     : 'neo-theme'
+                    appName,
+                    href,
+                    id: 'neo-theme'
                 });
             });
         }
 
         button.set({
-            iconCls: iconCls,
-            text   : buttonText
+            iconCls,
+            text: buttonText
         });
 
         if (mapView) {

package/apps/website/data/blog.json

@@ -1,4 +1,17 @@
 [
+    {
+        "author"      : "Tobias Uhlig",
+        "authorImage" : "author_TobiasUhlig.jpeg",
+        "date"        : "Dec 15, 2021",
+        "id"          : 47,
+        "image"       : "resolving-pitfalls-of-the-ecmascript-class-system.png",
+        "name"        : "Resolving pitfalls of the ECMAScript class system",
+        "provider"    : "Medium",
+        "publisher"   : "ITNEXT",
+        "selectedInto": [],
+        "type"        : "Blog Post",
+        "url"         : "https://itnext.io/resolving-pitfalls-of-the-ecmascript-class-system-856024218399?source=friends_link&sk=9733342654c50d8d618671b754089e1d"
+    },
     {
         "author"      : "Tobias Uhlig",
         "authorImage" : "author_TobiasUhlig.jpeg",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "3.0.0",
+    "version": "3.0.1",
     "description": "The webworkers driven UI framework",
     "repository": {
         "type": "git",
@@ -36,22 +36,22 @@
         "@fortawesome/fontawesome-free": "^5.15.4",
         "@material/mwc-button": "^0.25.3",
         "@material/mwc-textfield": "^0.25.3",
-        "autoprefixer": "^10.4.0",
+        "autoprefixer": "^10.4.1",
         "chalk": "^4.1.2",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^8.3.0",
-        "cssnano": "^5.0.12",
+        "cssnano": "^5.0.14",
         "envinfo": "^7.8.1",
         "fs-extra": "^10.0.0",
         "highlightjs-line-numbers.js": "^2.8.0",
         "inquirer": "^8.1.5",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
-        "postcss": "^8.4.4",
-        "sass": "^1.45.0",
+        "postcss": "^8.4.5",
+        "sass": "^1.45.2",
         "webpack": "^5.65.0",
         "webpack-cli": "^4.9.1",
-        "webpack-dev-server": "4.6.0",
+        "webpack-dev-server": "4.7.2",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },

package/src/calendar/view/YearComponent.mjs

@@ -488,9 +488,7 @@ class YearComponent extends Component {
             if (!me.isUpdating) {
                 me.isUpdating = true;
 
-                Neo.main.DomAccess.getBoundingClientRect({
-                    id: me.id
-                }).then(data => {
+                me.getDomRect().then(data => {
                     scrollFromTop = me.scrollNewYearFromTop && increment < 0 || !me.scrollNewYearFromTop && increment > 0;
                     vdom          = me.vdom;
                     y             = scrollFromTop ? 0 : -data.height;

package/src/calendar/view/month/Component.mjs

@@ -316,9 +316,7 @@ class Component extends BaseComponent {
             }
 
             setTimeout(() => {
-                Neo.main.DomAccess.getBoundingClientRect({
-                    id: [me.vdom.cn[1].id, me.vdom.cn[0].id]
-                }).then(data => {
+                me.getDomRect([me.vdom.cn[1].id, me.vdom.cn[0].id]).then(data => {
                     me.headerHeight = data[1].height;
 
                     Neo.main.DomAccess.scrollTo({

package/src/calendar/view/week/Component.mjs

@@ -458,10 +458,7 @@ class Component extends BaseComponent {
             }
 
             setTimeout(() => {
-                Neo.main.DomAccess.getBoundingClientRect({
-                    appName: me.appName,
-                    id     : me.getColumnContainer().id
-                }).then(data => {
+                me.getDomRect(me.getColumnContainer().id).then(data => {
                     Neo.main.DomAccess.scrollBy({
                         appName  : me.appName,
                         direction: 'left',

package/src/calendar/view/week/EventDragZone.mjs

@@ -501,9 +501,7 @@ class EventDragZone extends DragZone {
         let me = this,
             eventDuration, offsetX, offsetY;
 
-        Neo.main.DomAccess.getBoundingClientRect({
-            id: [me.getDragElementRoot().id, data.path[1].id]
-        }).then(rects => {
+        me.owner.getDomRect([me.getDragElementRoot().id, data.path[1].id]).then(rects => {
             eventDuration = (me.eventRecord.endDate - me.eventRecord.startDate) / 60 / 1000;
             offsetX       = data.clientX - rects[0].left;
             offsetY       = data.clientY - rects[0].top;

package/src/component/Base.mjs

@@ -959,6 +959,19 @@ class Base extends CoreBase {
         return this.getConfigInstanceByNtype('controller', ntype);
     }
 
+    /**
+     * Convenience shortcut
+     * @param {String[]|String} id=this.id
+     * @param {String} appName=this.appName
+     * @returns {Promise<*>}
+     */
+    getDomRect(id=this.id, appName=this.appName) {
+        return Neo.main.DomAccess.getBoundingClientRect({
+            appName,
+            id
+        });
+    }
+
     /**
      * Returns this.model or the closest parent model
      * @param {String} [ntype]

package/src/component/DateSelector.mjs

@@ -400,9 +400,7 @@ class DateSelector extends Component {
             if (!me.isUpdating) {
                 me.isUpdating = true;
 
-                Neo.main.DomAccess.getBoundingClientRect({
-                    id: [me.getCenterContentEl().id, me.getHeaderMonthEl().id]
-                }).then(data => {
+                me.getDomRect([me.getCenterContentEl().id, me.getHeaderMonthEl().id]).then(data => {
                     vdom = me.vdom;
                     x    = slideDirection === 'right' ? 0 : -data[0].width;
 
@@ -486,9 +484,7 @@ class DateSelector extends Component {
             if (!me.isUpdating) {
                 me.isUpdating = true;
 
-                Neo.main.DomAccess.getBoundingClientRect({
-                    id: me.getCenterContentEl().id
-                }).then(data => {
+                me.getDomRect(me.getCenterContentEl().id).then(data => {
                     scrollFromTop = me.scrollNewYearFromTop && increment < 0 || !me.scrollNewYearFromTop && increment > 0;
                     vdom          = me.vdom;
                     y             = scrollFromTop ? 0 : -data.height;

package/src/component/Splitter.mjs

@@ -158,9 +158,7 @@ class Splitter extends Component {
 
         me.style = style;
 
-        Neo.main.DomAccess.getBoundingClientRect({
-            id: me.parentId
-        }).then(parentRect => {
+        me.getDomRect(me.parentId).then(parentRect => {
             parent  = Neo.getComponent(me.parentId);
             index   = parent.indexOf(me);
             sibling = parent.items[resizeNext ? index + 1 :index - 1];

package/src/dialog/Base.mjs

@@ -286,10 +286,7 @@ class Base extends Panel {
             appName = me.appName,
             id      = me.getAnimateTargetId();
 
-        Neo.main.DomAccess.getBoundingClientRect({
-            appName: appName,
-            id     : [me.id, me.animateTargetId]
-        }).then(rects => {
+        me.getDomRect([me.id, me.animateTargetId]).then(rects => {
             Neo.currentWorker.promiseMessage('main', {
                 action  : 'mountDom',
                 appName : appName,
@@ -336,10 +333,7 @@ class Base extends Panel {
             appName = me.appName,
             id      = me.getAnimateTargetId();
 
-        Neo.main.DomAccess.getBoundingClientRect({
-            appName: appName,
-            id     : me.animateTargetId
-        }).then(rect => {
+        me.getDomRect(me.animateTargetId).then(rect => {
             Neo.currentWorker.promiseMessage('main', {
                 action  : 'mountDom',
                 appName : appName,
@@ -530,10 +524,7 @@ class Base extends Panel {
             initialTransitionProperty, wrapperStyle;
 
         if (!me.maximized) {
-            Neo.main.DomAccess.getBoundingClientRect({
-                appName: me.appName,
-                id     : me.dragZone.dragProxy.id
-            }).then(rect => {
+            me.getDomRect(me.dragZone.dragProxy.id).then(rect => {
                 wrapperStyle = me.wrapperStyle;
 
                 Object.assign(wrapperStyle, {

package/src/draggable/toolbar/SortZone.mjs

@@ -204,9 +204,7 @@ class SortZone extends DragZone {
                 });
             });
 
-            Neo.main.DomAccess.getBoundingClientRect({
-                id: [owner.id].concat(owner.items.map(e => e.id))
-            }).then(itemRects => {
+            owner.getDomRect([owner.id].concat(owner.items.map(e => e.id))).then(itemRects => {
                 me.ownerRect = itemRects[0];
 
                 ownerStyle.height = `${itemRects[0].height}px`;

package/src/form/field/Picker.mjs

@@ -143,9 +143,7 @@ class Picker extends Text {
     getClientRectsThenShow(callback, callbackScope) {
         let me = this;
 
-        Neo.main.DomAccess.getBoundingClientRect({
-            id: [me.id, me.getInputWrapperId(), 'body']
-        }).then(data => {
+        me.getDomRect([me.id, me.getInputWrapperId(), 'body']).then(data => {
             me.clientRects = data;
             me.showPicker(callback, callbackScope);
         });

package/src/form/field/Text.mjs

@@ -921,9 +921,7 @@ class Text extends Base {
     updateCenterBorderElWidth(silent=false) {
         let me = this;
 
-        me.mounted && Neo.main.DomAccess.getBoundingClientRect({
-            id: me.getCenterBorderEl().id
-        }).then(data => {
+        me.mounted && me.getDomRect(me.getCenterBorderEl().id).then(data => {
             me.centerBorderElWidth = Math.round(data.width * .7) + 8;
 
             if (!silent) {

package/src/list/plugin/Animate.mjs

@@ -118,9 +118,7 @@ class Animate extends Base {
     onOwnerMounted() {
         let me = this;
 
-        Neo.main.DomAccess.getBoundingClientRect({
-            id: me.owner.id
-        }).then(rect => {
+        me.owner.getDomRect().then(rect => {
             Object.assign(me, {
                 columns  : Math.floor(rect.width / me.itemWidth),
                 ownerRect: rect,

package/src/menu/List.mjs

@@ -193,9 +193,7 @@ class List extends BaseList {
 
         me.store.destroy();
 
-        if (activeSubMenu) {
-            activeSubMenu.unmount();
-        }
+        activeSubMenu?.unmount();
 
         Object.entries(subMenuMap).forEach(([key, value]) => {
             value.destroy();
@@ -279,10 +277,7 @@ class List extends BaseList {
 
         if (me.activeSubMenu !== me.subMenuMap?.[me.getMenuMapId(recordId)]) {
             me.hideSubMenu();
-
-            if (me.hasChildren(record)) {
-                me.showSubMenu(nodeId, record);
-            }
+            me.hasChildren(record) && me.showSubMenu(nodeId, record);
         }
     }
 
@@ -299,10 +294,7 @@ class List extends BaseList {
             subMenu      = subMenuMap[subMenuMapId],
             menuStyle, style;
 
-        Neo.main.DomAccess.getBoundingClientRect({
-            appName: me.appName,
-            id     : nodeId
-        }).then(rect => {
+        me.getDomRect(nodeId).then(rect => {
             style = {
                 left: `${rect.right + me.subMenuGap}px`,
                 top : `${rect.top - 1}px` // minus the border
@@ -324,7 +316,7 @@ class List extends BaseList {
                     parentId   : Neo.apps[me.appName].mainView.id,
                     parentIndex: store.indexOf(record),
                     parentMenu : me,
-                    style      : style,
+                    style,
                     zIndex     : me.zIndex + 1
                 });
             }

package/src/plugin/Resizable.mjs

@@ -396,7 +396,7 @@ class Resizable extends Base {
         me.isDragging = true;
 
         style.opacity = 0.3;
-        me.owner.wrapperStyle = style;
+        owner.wrapperStyle = style;
 
         for (; i < len; i++) {
             target = data.path[i];
@@ -414,10 +414,7 @@ class Resizable extends Base {
         }
 
         if (!me.boundaryContainerRect) {
-            Neo.main.DomAccess.getBoundingClientRect({
-                appName: appName,
-                id     : me.boundaryContainerRect
-            }).then(rect => {
+            owner.getDomRect(me.boundaryContainerRect).then(rect => {
                 me.boundaryContainerRect = rect;
             });
         }

package/src/tab/Strip.mjs

@@ -80,9 +80,7 @@ class Strip extends Component {
             ids = ids.map(e => e?.id).filter(Boolean);
 
             if (me.useActiveTabIndicator) {
-                Neo.main.DomAccess.getBoundingClientRect({
-                    id: ids
-                }).then(data => {
+                me.getDomRect(ids).then(data => {
                     me.moveActiveIndicator(data);
                 });
             }