neo.mjs 6.17.1 → 6.18.0

package/src/list/Component.mjs

@@ -33,8 +33,8 @@ class Component extends Base {
         super.afterSetAppName(value, oldValue);
 
         value && this.items?.forEach(item => {
-            item.appName = value;
-        });
+            item.appName = value
+        })
     }
 
     /**
@@ -44,10 +44,10 @@ class Component extends Base {
         let items = this.items || [];
 
         items.forEach(item => {
-            item.destroy();
+            item.destroy()
         });
 
-        super.destroy(...args);
+        super.destroy(...args)
     }
 
     /**
@@ -55,7 +55,7 @@ class Component extends Base {
      * @returns {String}
      */
     getComponentId(index) {
-        return `${this.id}__${index}__component`;
+        return `${this.id}__${index}__component`
     }
 
     /**
@@ -63,7 +63,7 @@ class Component extends Base {
      * @returns {String}
      */
     getItemId(recordId) {
-        return `${this.id}__${this.store.indexOf(recordId)}`;
+        return `${this.id}__${this.store.indexOf(recordId)}`
     }
 
     /**
@@ -72,7 +72,7 @@ class Component extends Base {
      */
     getItemRecordId(vnodeId) {
         let itemId = vnodeId.split('__')[1];
-        return this.store.getAt(parseInt(itemId))[this.getKeyProperty()];
+        return this.store.getAt(parseInt(itemId))[this.getKeyProperty()]
     }
 
     /**
@@ -83,7 +83,7 @@ class Component extends Base {
      */
     onStoreSort(data) {
         this.sortItems(data);
-        super.onStoreSort(data);
+        super.onStoreSort(data)
     }
 
     /**
@@ -103,10 +103,10 @@ class Component extends Base {
 
             data.items.forEach(item => {
                 fromIndex = previousKeys.indexOf(item[key]);
-                newItems.push(me.items[fromIndex]);
+                newItems.push(me.items[fromIndex])
             });
 
-            me.items = newItems;
+            me.items = newItems
         }
     }
 }

package/src/list/plugin/Animate.mjs

@@ -20,6 +20,11 @@ class Animate extends Base {
          * @protected
          */
         className: 'Neo.list.plugin.Animate',
+        /**
+         * @member {String} ntype='plugin-list-animate'
+         * @protected
+         */
+        ntype: 'plugin-list-animate',
         /**
          * Read only
          * @member {Number|null} columns=null
@@ -63,11 +68,11 @@ class Animate extends Base {
     construct(config) {
         super.construct(config);
 
-        let me    = this,
-            owner = me.owner;
+        let me      = this,
+            {owner} = me;
 
         if (!owner.itemHeight || !owner.itemWidth) {
-            console.error('list.plugin.Animate requires fixed itemHeight and itemWidth values', owner);
+            console.error('list.plugin.Animate requires fixed itemHeight and itemWidth values', owner)
         }
 
         me.adjustCreateItem();
@@ -75,18 +80,18 @@ class Animate extends Base {
         owner.onStoreFilter = me.onStoreFilter.bind(me);
         owner.onStoreSort   = me.onStoreSort  .bind(me);
 
-        this.updateTransitionDetails(false);
+        this.updateTransitionDetails(false)
     }
 
     /**
      *
      */
     adjustCreateItem() {
-        let me    = this,
-            owner = me.owner;
+        let me      = this,
+            {owner} = me;
 
         me.ownerCreateItem = owner.createItem.bind(owner);
-        owner.createItem   = me.createItem.bind(owner, me);
+        owner.createItem   = me.createItem.bind(owner, me)
     }
 
     /**
@@ -96,7 +101,7 @@ class Animate extends Base {
      * @protected
      */
     afterSetTransitionDuration(value, oldValue) {
-        this.isConstructed && this.updateTransitionDetails(Neo.isNumber(oldValue));
+        this.isConstructed && this.updateTransitionDetails(Neo.isNumber(oldValue))
     }
 
     /**
@@ -106,7 +111,7 @@ class Animate extends Base {
      * @protected
      */
     afterSetTransitionEasing(value, oldValue) {
-        this.isConstructed && this.updateTransitionDetails(!!oldValue);
+        this.isConstructed && this.updateTransitionDetails(!!oldValue)
     }
 
     /**
@@ -116,7 +121,7 @@ class Animate extends Base {
      * @protected
      */
     beforeSetTransitionEasing(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'transitionEasing');
+        return this.beforeSetEnumValue(value, oldValue, 'transitionEasing')
     }
 
     /**
@@ -127,12 +132,12 @@ class Animate extends Base {
      */
     createItem(me, record, index) {
         let item     = me.ownerCreateItem(record, index),
-            owner    = me.owner,
+            {owner}  = me,
             position = me.getItemPosition(record, index),
             style    = item.style || {};
 
         if (!me.ownerRect) {
-            return null;
+            return null
         }
 
         Object.assign(style, {
@@ -144,7 +149,7 @@ class Animate extends Base {
 
         item.style = style;
 
-        return item;
+        return item
     }
 
     /**

package/src/main/DomAccess.mjs

@@ -104,6 +104,11 @@ class DomAccess extends Base {
                 'windowScrollTo'
             ]
         },
+        /**
+         * @member {Boolean} renderCountDeltas_=false
+         * @protected
+         */
+        renderCountDeltas_: false,
         /**
          * @member {Boolean} singleton=true
          * @protected
@@ -120,6 +125,12 @@ class DomAccess extends Base {
         ]
     }
 
+    /**
+     * @member {Number} logDeltasIntervalId=0
+     * @protected
+     */
+    logDeltasIntervalId = 0
+
     /**
      * @returns {HTMLElement}
      */
@@ -129,7 +140,7 @@ class DomAccess extends Base {
         if (!me._modalMask) {
             me._modalMask = document.createElement('div');
             me._modalMask.className = 'neo-dialog-modal-mask';
-            me._modalMask.addEventListener('mousedown', doPreventDefault, { capture : true })
+            me._modalMask.addEventListener('mousedown', doPreventDefault, {capture : true})
         }
 
         return me._modalMask
@@ -141,20 +152,10 @@ class DomAccess extends Base {
     construct(config) {
         super.construct(config);
 
-        const me = this;
+        let me = this;
 
         if (Neo.config.renderCountDeltas) {
-            let node;
-
-            setInterval(() => {
-                node = document.getElementById('neo-delta-updates');
-
-                if (node) {
-                   node.innerHTML = String(me.countDeltasPer250ms * 4)
-                }
-
-                me.countDeltasPer250ms = 0
-            }, 250)
+            me.renderCountDeltas = true
         }
 
         me.initGlobalListeners();
@@ -164,23 +165,26 @@ class DomAccess extends Base {
         me.syncAligns = me.syncAligns.bind(me)
     }
 
+    /**
+     *
+     */
     initGlobalListeners() {
-        const me = this;
+        let me = this;
 
-        document.addEventListener('mousedown', me.onDocumentMouseDown.bind(me), { capture : true });
-        document.addEventListener('keydown', me.onDocumentKeyDown.bind(me), capturePassive);
-        document.addEventListener('keyup', me.onDocumentKeyUp.bind(me), capturePassive);
-        document.addEventListener('blur', me.onDocumentBlur.bind(me), capturePassive);
+        document.addEventListener('blur',      me.onDocumentBlur     .bind(me), capturePassive);
+        document.addEventListener('keydown',   me.onDocumentKeyDown  .bind(me), capturePassive);
+        document.addEventListener('keyup',     me.onDocumentKeyUp    .bind(me), capturePassive);
+        document.addEventListener('mousedown', me.onDocumentMouseDown.bind(me), {capture : true})
     }
 
     onDocumentMouseDown(e) {
-        const focusController = e.target?.closest('[data-focus]');
+        let focusController = e.target?.closest('[data-focus]');
 
         // data-focus on an element means reject mousedown gestures, and move focus
         // to the referenced element.
         if (focusController) {
             e.preventDefault();
-            document.getElementById(focusController.dataset.focus)?.focus();
+            document.getElementById(focusController.dataset.focus)?.focus()
         }
     }
 
@@ -207,11 +211,11 @@ class DomAccess extends Base {
      */
     addAligned(alignSpec) {
         const
-            me                     = this,
-            { id }                 = alignSpec,
-            aligns                 = me._aligns || (me._aligns = new Map()),
-            resizeObserver         = me._alignResizeObserver || (me._alignResizeObserver = new ResizeObserver(me.syncAligns)),
-            { constrainToElement } = alignSpec;
+            me                   = this,
+            {id}                 = alignSpec,
+            aligns               = me._aligns || (me._aligns = new Map()),
+            resizeObserver       = me._alignResizeObserver || (me._alignResizeObserver = new ResizeObserver(me.syncAligns)),
+            {constrainToElement} = alignSpec;
 
         // Set up listeners which monitor for changes
         if (!aligns.has(id)) {
@@ -266,18 +270,47 @@ class DomAccess extends Base {
         document.head.appendChild(script)
     }
 
+    /**
+     * Triggered after the renderCountDeltas config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetRenderCountDeltas(value, oldValue) {
+        let me                    = this,
+            {logDeltasIntervalId} = me,
+            node;
+
+        if (value) {
+            if (logDeltasIntervalId === 0) {
+                me.logDeltasIntervalId = setInterval(() => {
+                    node = document.getElementById('neo-delta-updates');
+
+                    if (node) {
+                        node.innerHTML = String(me.countDeltasPer250ms * 4)
+                    }
+
+                    me.countDeltasPer250ms = 0
+                }, 250)
+            }
+        } else {
+            logDeltasIntervalId && clearInterval(logDeltasIntervalId);
+            me.logDeltasInterval = 0
+        }
+    }
+
     /**
      * @param {Object} data
      * @returns {Promise<void>}
      */
     async align(data) {
         const
-            me              = this,
-            { constrainTo } = data,
-            subject         = data.subject = me.getElement(data.id),
-            { style }       = subject,
-            align           = {...data},
-            lastAlign       = me._aligns?.get(data.id);
+            me            = this,
+            {constrainTo} = data,
+            subject       = data.subject = me.getElement(data.id),
+            {style}       = subject,
+            align         = {...data},
+            lastAlign     = me._aligns?.get(data.id);
 
         if (lastAlign) {
             subject.classList.remove(`neo-aligned-${lastAlign.result.position}`)
@@ -288,16 +321,17 @@ class DomAccess extends Base {
         me.resetDimensions(align);
 
         // The Rectangle's align spec target and constrainTo must be Rectangles
-        align.target = me.getClippedRect({ id : data.targetElement = me.getElementOrBody(data.target) });
+        align.target = me.getClippedRect({id : data.targetElement = me.getElementOrBody(data.target)});
 
         if (!align.target) {
             // Set the Component with id data.id to hidden : true
-            return Neo.worker.App.setConfigs({ id : data.id, hidden : true })
+            return Neo.worker.App.setConfigs({id: data.id, hidden: true})
         }
 
         data.offsetParent = data.targetElement.offsetParent;
+
         if (constrainTo) {
-            align.constrainTo = me.getBoundingClientRect({ id : data.constrainToElement = me.getElementOrBody(constrainTo) })
+            align.constrainTo = me.getBoundingClientRect({id : data.constrainToElement = me.getElementOrBody(constrainTo)})
         }
 
         // Get an aligned clone of myRect aligned according to the align object
@@ -310,9 +344,11 @@ class DomAccess extends Base {
             left      : 0,
             transform : `translate(${result.x}px,${result.y}px)`
         });
+
         if (result.width !== myRect.width) {
             style.width = `${result.width}px`
         }
+
         if (result.height !== myRect.height) {
             style.height = `${result.height}px`
         }
@@ -350,7 +386,7 @@ class DomAccess extends Base {
      */
     execCommand(data) {
         document.execCommand(data.command);
-        return data;
+        return data
     }
 
     /**
@@ -365,18 +401,19 @@ class DomAccess extends Base {
             // The children property means focus inner elements if possible.
             if (!DomUtils.isFocusable(node) && data.children) {
                 // query for the first focusable decendent
-                node = DomUtils.query(node, DomUtils.isFocusable);
+                node = DomUtils.query(node, DomUtils.isFocusable)
             }
+
             if (node) {
                 node.focus();
 
                 if (Neo.isNumber(node.selectionStart)) {
-                    node.selectionStart = node.selectionEnd = node.value.length;
+                    node.selectionStart = node.selectionEnd = node.value.length
                 }
             }
         }
 
-        return {id: data.id};
+        return {id: data.id}
     }
 
     /**
@@ -449,10 +486,10 @@ class DomAccess extends Base {
                 // Note that 0px is what the DOM reports if no minWidth is specified
                 // so we do not report a minimum in these cases.
                 if (lengthRE.test(minWidth) && minWidth !== '0px') {
-                    returnData.minWidth = me.measure({ value : minWidth, id : node})
+                    returnData.minWidth = me.measure({value: minWidth, id: node})
                 }
                 if (lengthRE.test(minHeight) && minHeight !== '0px') {
-                    returnData.minHeight = me.measure({ value : minHeight, id : node })
+                    returnData.minHeight = me.measure({value: minHeight, id: node})
                 }
             }
         }
@@ -465,9 +502,10 @@ class DomAccess extends Base {
      * @returns {Neo.util.Rectangle}
      */
     getClippedRect(data) {
-        let node            = this.getElement(typeof data === 'object' ? data.id : data),
-            { defaultView } = node.ownerDocument,
-            rect            = this.getBoundingClientRect(node);
+        let me            = this,
+            node          = me.getElement(typeof data === 'object' ? data.id : data),
+            {defaultView} = node.ownerDocument,
+            rect          = me.getBoundingClientRect(node);
 
         for (let parentElement = node.offsetParent; parentElement && rect && parentElement !== document.documentElement; parentElement = parentElement.parentElement) {
             if (defaultView.getComputedStyle(parentElement).getPropertyValue('overflow') !== 'visible') {
@@ -502,12 +540,12 @@ class DomAccess extends Base {
      * @returns {Object}
      */
     getScrollingDimensions(data) {
-        const me = this;
+        let me = this;
 
         if (Array.isArray(data.id)) {
-            return data.id.map(id => me.getScrollingDimensions({ id }))
+            return data.id.map(id => me.getScrollingDimensions({id}))
         } else {
-            const node = data.nodeType ? data : me.getElementOrBody(data.id);
+            let node = data.nodeType ? data : me.getElementOrBody(data.id);
 
             return {
                 clientHeight: node?.clientHeight,
@@ -723,7 +761,7 @@ class DomAccess extends Base {
         let attributes    = data.attributes || [],
             functions     = data.functions  || [],
             styles        = data.styles     || [],
-            vnodeId       = data.vnodeId,
+            {vnodeId}     = data,
             retAttributes = {},
             retFunctions  = {},
             retStyles     = {},
@@ -731,7 +769,7 @@ class DomAccess extends Base {
             fnName, scope;
 
         attributes.forEach(key => {
-            retAttributes[key] = element[key];
+            retAttributes[key] = element[key]
         });
 
         functions.forEach((key, index) => {
@@ -861,7 +899,7 @@ class DomAccess extends Base {
             };
 
         if (opts.behavior !== 'smooth') {
-            node.scrollIntoView(opts);
+            node.scrollIntoView(opts)
         } else {
             // scrollIntoView() does not provide a callback yet.
             // See: https://github.com/w3c/csswg-drafts/issues/3744
@@ -983,8 +1021,8 @@ class DomAccess extends Base {
      */
     syncAligns() {
         const
-            me          = this,
-            { _aligns } = me;
+            me        = this,
+            {_aligns} = me;
 
         // Keep all registered aligns aligned on any detected change
         _aligns?.forEach(align => {
@@ -1002,8 +1040,8 @@ class DomAccess extends Base {
                 }
 
                 const
-                    { _alignResizeObserver } = me,
-                    { constrainToElement }   = align;
+                    {_alignResizeObserver} = me,
+                    {constrainToElement}   = align;
 
                 // Stop observing the align elements
                 _alignResizeObserver.unobserve(align.subject);
@@ -1121,6 +1159,4 @@ class DomAccess extends Base {
     }
 }
 
-let instance = Neo.setupClass(DomAccess);
-
-export default instance;
+export default Neo.setupClass(DomAccess);

package/src/main/DomEvents.mjs

@@ -62,9 +62,10 @@ const lastWheelEvent = {
     target: null
 };
 
-const disabledInputKeys         = {},
-      preventClickTargets       = [],
-      preventContextmenuTargets = [];
+const
+    disabledInputKeys         = {},
+    preventClickTargets       = [],
+    preventContextmenuTargets = [];
 
 /**
  * @class Neo.main.DomEvents
@@ -181,8 +182,9 @@ class DomEvents extends Base {
      * @param {Object} event
      */
     domEventListener(event) {
-        let me     = this,
-            target = event.target,
+        let me       = this,
+            {target} = event,
+
             config = {
                 action   : 'domEvent',
                 eventName: event.type,
@@ -199,41 +201,41 @@ class DomEvents extends Base {
         switch (event.type) {
             case 'dragend':
                 me.dragElementId = null;
-                break;
+                break
             case 'dragenter':
                 if (me.dragElementId === target.id) {
-                    return; // ignore target and source to be the same
+                    return // ignore target and source to be the same
                 }
-                break;
+                break
             case 'dragleave':
                 if (me.dragElementId === target.id) {
-                    return; // ignore target and source to be the same
+                    return // ignore target and source to be the same
                 }
-                break;
+                break
             case 'dragover':
                 me.onDragOver(event);
                 event.preventDefault();
-                break;
+                break
             case 'dragstart':
                 me.dragElementId = target.id;
-                break;
+                break
             case 'drop':
                 if (!me.dragElementId || me.dragElementId === target.id) {
-                    return; // drop fires twice by default & drop should not trigger on the drag element
+                    return // drop fires twice by default & drop should not trigger on the drag element
                 }
                 if (event.stopPropagation) {
-                    event.stopPropagation(); // stops the browser from redirecting.
+                    event.stopPropagation() // stops the browser from redirecting.
                 }
                 event.preventDefault();
                 config.data.srcId = me.dragElementId;
                 me.dragElementId = null;
-                break;
+                break
             case 'mousemove':
                 Object.assign(config.data, me.getMouseEventData(event));
-                break;
+                break
             default:
                 event.preventDefault();
-                break;
+                break
         }
 
         Neo.worker.Manager.sendMessage('app', config)
@@ -248,7 +250,7 @@ class DomEvents extends Base {
      * @returns {Number}
      */
     getDistance(x1, y1, x2, y2) {
-        return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+        return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
     }
 
     /**
@@ -420,10 +422,10 @@ class DomEvents extends Base {
      * @param {InputEvent} event
      */
     onChange(event) {
-        let me      = this,
-            target  = event.target,
+        let me       = this,
+            {target} = event,
 
-            data    = {
+            data = {
                 ...me.getEventData(event),
                 valid: target.checkValidity(),
                 value: target.value
@@ -505,16 +507,16 @@ class DomEvents extends Base {
      *
      */
     onHashChange() {
-        let manager    = Neo.worker.Manager,
+        let {Manager}  = Neo.worker,
             hashString = location.hash.substring(1);
 
-        manager.sendMessage('app', {
+        Manager.sendMessage('app', {
             action: 'hashChange',
             data  : {
-                appNames: manager.appNames,
+                appNames: Manager.appNames,
                 hash    : this.parseHash(hashString),
                 hashString,
-                windowId: manager.windowId
+                windowId: Manager.windowId
             }
         })
     }
@@ -523,8 +525,8 @@ class DomEvents extends Base {
      * @param {KeyboardEvent} event
      */
     onKeyDown(event) {
-        let target  = event.target,
-            tagName = target.tagName,
+        let {target}  = event,
+            {tagName} = target,
             isInput = tagName === 'INPUT' || tagName === 'TEXTAREA';
 
         if (isInput && disabledInputKeys[target.id]?.includes(event.key)) {
@@ -588,13 +590,12 @@ class DomEvents extends Base {
      */
     onOrientationChange(event) {
         const
-            orientation = screen.orientation,
-            angle       = orientation.angle,
-            layout      = angle === 0 || angle === 180 ? 'portrait' : 'landscape',
-            type        = orientation.type,
-            manager     = Neo.worker.Manager;
+            {orientation} = screen,
+            {angle, type} = orientation,
+            layout        = angle === 0 || angle === 180 ? 'portrait' : 'landscape',
+            {Manager}     = Neo.worker;
 
-        manager.sendMessage('app', {
+        Manager.sendMessage('app', {
             action: 'orientationChange',
             data  : {angle, layout, type}
         })
@@ -619,9 +620,9 @@ class DomEvents extends Base {
      * @param {Event} event
      */
     onSelectionChange(event) {
-        let me      = this,
-            target  = event.target,
-            element = target.type ? target : target.activeElement,
+        let me       = this,
+            {target} = event,
+            element  = target.type ? target : target.activeElement,
             path, targetData;
 
         if (target.tagName === 'BODY') {
@@ -847,6 +848,4 @@ class DomEvents extends Base {
     }
 }
 
-let instance = Neo.setupClass(DomEvents);
-
-export default instance;
+export default Neo.setupClass(DomEvents);