neo.mjs 6.17.0 → 6.17.2

package/src/manager/DomEvent.mjs

@@ -76,10 +76,9 @@ class DomEvent extends Base {
             console.error('For using resize domListeners, you must include main.addon.ResizeObserver.', event)
         }
 
-        Neo.main.addon.ResizeObserver.register({
-            appName: component.appName,
-            id     : component.id
-        })
+        let {id, windowId} = component;
+
+        Neo.main.addon.ResizeObserver.register({id, windowId})
     }
 
     /**
@@ -117,7 +116,12 @@ class DomEvent extends Base {
                         let result;
 
                         if (listener && listener.fn) {
-                            delegationTargetId = me.verifyDelegationPath(listener, data.path);
+                            if (eventName === 'resize') {
+                                // we do not want delegation for custom main.addon.ResizeObserver events
+                                delegationTargetId = data.id === component.id ? data.id : false
+                            } else {
+                                delegationTargetId = me.verifyDelegationPath(listener, data.path)
+                            }
 
                             if (delegationTargetId !== false) {
                                 preventFire = false;
@@ -135,6 +139,7 @@ class DomEvent extends Base {
 
                                     // Handler needs to know which actual target matched the delegate
                                     data.currentTarget = delegationTargetId;
+
                                     result = listener.fn.apply(listener.scope || globalThis, [data]);
 
                                     if (!listener.bubble) {
@@ -159,7 +164,7 @@ class DomEvent extends Base {
                 break;
             }
 
-            // Honour the Event cancelBubble property
+            // Honor the Event cancelBubble property
             if (!bubble || data.cancelBubble) {
                 break;
             }

package/src/plugin/Responsive.mjs

@@ -0,0 +1,175 @@
+import BasePlugin from './Base.mjs';
+
+/**
+ * @class Neo.plugin.Responsive
+ * @extends Neo.plugin.Base
+ */
+class Responsive extends BasePlugin {
+    static config = {
+        /**
+         * @member {String} className='Neo.plugin.Responsive'
+         * @protected
+         */
+        className: 'Neo.plugin.Responsive',
+        /**
+         * @member {String} ntype='plugin-responsive'
+         * @protected
+         */
+        ntype: 'plugin-responsive',
+        /**
+         * @member {Map} responsiveConfig: new Map()
+         */
+        responsiveConfig: new Map(),
+        /**
+         * @member {Object} defaultResponsiveConfig
+         */
+        defaultResponsiveConfig: {
+            landscape(data) {
+                return data.width > data.height
+            },
+            portrait(data) {
+                return data.width < data.height
+            }
+        }
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me      = this,
+            {owner} = me;
+
+        owner.addCls('neo-responsive');
+
+        Neo.first('viewport').addDomListeners([
+            {resize: me.onResize, scope: me}
+        ])
+
+        Neo.Responsive = Neo.Responsive || {
+            responsiveConfig: new Map(),
+            apps            : {}
+        };
+
+        me.addToResponsiveMap(me.defaultResponsiveConfig, me);
+        me.addToResponsiveMap(owner.responsiveConfig || {}, owner);
+        me.handleBodyCls()
+    }
+
+    /**
+     * @param responsiveObj
+     * @param scope
+     */
+    addToResponsiveMap(responsiveObj, scope) {
+        for (const [key, value] of Object.entries(responsiveObj)) {
+            let fn;
+
+            if (Neo.isObject(value)) {
+                fn = function (rect) {
+                    let returnBool = true;
+
+                    for (const [subKey, subValue] of Object.entries(value)) {
+                        const isMin      = subKey.startsWith('min'),
+                              testConfig = subKey.substring(3).toLowerCase();
+
+                        if (isMin) {
+                            returnBool = rect[testConfig] >= subValue
+                        } else {
+                            returnBool = rect[testConfig] <= subValue
+                        }
+
+                        if (!returnBool) {
+                            break
+                        }
+                    }
+
+                    return returnBool
+                }
+            } else {
+                fn = value
+            }
+
+            fn = fn.bind(scope);
+
+            Neo.Responsive.responsiveConfig.set(key, fn)
+        }
+    }
+
+    /**
+     *
+     */
+    handleBodyCls() {
+        const
+            me        = this,
+            {appName} = me.owner,
+            apps      = Neo.Responsive.apps;
+
+        if (!apps[appName]?.activeBodyUpdate) {
+            const viewport = Neo.first('viewport'); // todo
+
+            apps[appName] = {
+                appId           : viewport.id,
+                activeBodyUpdate: true
+            };
+
+            viewport.addDomListeners([
+                {resize: me.onResizeBody, scope: me}
+            ])
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onResize(data) {
+        const
+            me           = this,
+            config       = {},
+            configTester = Neo.Responsive.responsiveConfig,
+            {owner}      = me,
+            {responsive} = owner;
+
+        for (const [key, value] of Object.entries(responsive)) {
+            const hasKey = configTester.get(key)?.(data.rect);
+
+            if (hasKey) {
+                for (const [configKey, configValue] of Object.entries(value)) {
+                    if (false && Neo.typeOf(owner[configKey]) === 'NeoInstance') {
+                        // todo: ntype, module or className must match
+                        owner[configKey].set(value)
+                    } else {
+                        config[configKey] = configValue
+                    }
+                }
+            }
+        }
+
+        Object.keys(config).length > 0 && owner.set(config)
+    }
+
+    /**
+     * Add either neo-landscape or neo-portrait to the parent viewport component
+     */
+    onResizeBody(data) {
+        const
+            me          = this,
+            newRect     = data.contentRect,
+            isLandscape = newRect.width >= newRect.height,
+            addCls      = isLandscape ? 'neo-landscape' : 'neo-portrait',
+            removeCls   = isLandscape ? 'neo-portrait' : 'neo-landscape';
+
+        Neo.applyDeltas(me.appName, {
+            id : 'document.body',
+            cls: {
+                add   : [addCls],
+                remove: [removeCls]
+            }
+        })
+    }
+}
+
+Neo.setupClass(Responsive);
+
+export default Responsive;

package/src/util/Logger.mjs

@@ -208,9 +208,9 @@ class Logger extends Base {
             } else if (Neo.isObject(identifier)) {
                 argsObject = identifier
             }
-        } else if (args.length === 2) {
+        } else if (args.length > 2) {
             argsObject.msg  = args[0];
-            argsObject.data = args[1]
+            argsObject.data = args.slice(1);
         }
 
         return argsObject
@@ -236,7 +236,7 @@ class Logger extends Base {
         if (me.beforeSetLevel(level) < me.level) {
             return
         }
-
+console.log('#', args.msg, level)
         let logColor = me.logColors[level],
             logChar  = me.logChars[level],
             bg       = `background-color:${logColor}; color: white; font-weight: 900;`,

package/resources/images/Neo_Vector.svg

@@ -1,3 +0,0 @@
-<svg width="274" height="178" viewBox="0 0 274 178" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M231.866 178L136.597 82.5858L41.3368 178L0.101562 136.702L136.597 0L273.102 136.702L231.866 178Z" fill="#11F4A1"/>
-</svg>

package/resources/images/logos/Github-logo-black.svg

@@ -1 +0,0 @@
-<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>

package/resources/images/logos/Slack-logo-black.svg

@@ -1,17 +0,0 @@
-<svg width="123" height="124" viewBox="0 0 123 124" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_460_4276)">
-<path d="M25.8 78.1988C25.8 85.2988 20 91.0988 12.9 91.0988C5.8 91.0988 0 85.2988 0 78.1988C0 71.0988 5.8 65.2988 12.9 65.2988H25.8V78.1988Z" fill="black"/>
-<path d="M32.3008 78.1988C32.3008 71.0988 38.1008 65.2988 45.2008 65.2988C52.3008 65.2988 58.1008 71.0988 58.1008 78.1988V110.499C58.1008 117.599 52.3008 123.399 45.2008 123.399C38.1008 123.399 32.3008 117.599 32.3008 110.499V78.1988Z" fill="black"/>
-<path d="M45.2008 26.3996C38.1008 26.3996 32.3008 20.5996 32.3008 13.4996C32.3008 6.39961 38.1008 0.599609 45.2008 0.599609C52.3008 0.599609 58.1008 6.39961 58.1008 13.4996V26.3996H45.2008Z" fill="black"/>
-<path d="M45.2 32.9004C52.3 32.9004 58.1 38.7004 58.1 45.8004C58.1 52.9004 52.3 58.7004 45.2 58.7004H12.9C5.8 58.7004 0 52.9004 0 45.8004C0 38.7004 5.8 32.9004 12.9 32.9004H45.2Z" fill="black"/>
-<path d="M97 45.8004C97 38.7004 102.8 32.9004 109.9 32.9004C117 32.9004 122.8 38.7004 122.8 45.8004C122.8 52.9004 117 58.7004 109.9 58.7004H97V45.8004Z" fill="black"/>
-<path d="M90.4992 45.7996C90.4992 52.8996 84.6992 58.6996 77.5992 58.6996C70.4992 58.6996 64.6992 52.8996 64.6992 45.7996V13.4996C64.6992 6.39961 70.4992 0.599609 77.5992 0.599609C84.6992 0.599609 90.4992 6.39961 90.4992 13.4996V45.7996Z" fill="black"/>
-<path d="M77.5992 97.5996C84.6992 97.5996 90.4992 103.4 90.4992 110.5C90.4992 117.6 84.6992 123.4 77.5992 123.4C70.4992 123.4 64.6992 117.6 64.6992 110.5V97.5996H77.5992Z" fill="black"/>
-<path d="M77.5992 91.0988C70.4992 91.0988 64.6992 85.2988 64.6992 78.1988C64.6992 71.0988 70.4992 65.2988 77.5992 65.2988H109.899C116.999 65.2988 122.799 71.0988 122.799 78.1988C122.799 85.2988 116.999 91.0988 109.899 91.0988H77.5992Z" fill="black"/>
-</g>
-<defs>
-<clipPath id="clip0_460_4276">
-<rect width="123" height="124" fill="white"/>
-</clipPath>
-</defs>
-</svg>