neo.mjs 6.12.1 → 6.13.0

package/src/main/DomAccess.mjs

@@ -1,15 +1,20 @@
 import Base         from '../core/Base.mjs';
 import DeltaUpdates from './mixin/DeltaUpdates.mjs';
+import DomUtils     from './DomUtils.mjs';
 import Observable   from '../core/Observable.mjs';
 import Rectangle    from '../util/Rectangle.mjs';
-import String       from '../util/String.mjs';
-import DomUtils     from './DomUtils.mjs';
+import StringUtil   from '../util/String.mjs';
 
 const
     doPreventDefault = e => e.preventDefault(),
     filterTabbable   = e => !e.classList.contains('neo-focus-trap') && DomUtils.isTabbable(e) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,
     lengthRE         = /^\d+\w+$/,
 
+    capturePassive = {
+        capture : true,
+        passive : true
+    },
+
     fontSizeProps = [
         'font-family',
         'font-kerning',
@@ -25,10 +30,6 @@ const
         'word-break'
     ],
 
-    capturePassive = {
-        capture : true,
-        passive : true
-    },
     modifierKeys = {
         Shift   : 1,
         Alt     : 1,
@@ -72,7 +73,7 @@ class DomAccess extends Base {
         ],
         /**
          * Remote method access for other workers
-         * @member {Object} remote={app: [//...]}
+         * @member {Object} remote
          * @protected
          */
         remote: {
@@ -185,15 +186,15 @@ class DomAccess extends Base {
 
     onDocumentKeyDown(keyEvent) {
         if (modifierKeys[keyEvent.key]) {
-            // eg Neo.isShiftKeyDown = true or Neo.isControlKeyDown = true.
+            // e.g. Neo.isShiftKeyDown = true or Neo.isControlKeyDown = true.
             // Selection can consult this value
-            Neo[`${String.uncapitalize(keyEvent.key)}KeyDown`] = true;
+            Neo[`${StringUtil.uncapitalize(keyEvent.key)}KeyDown`] = true;
         }
     }
 
     onDocumentKeyUp(keyEvent) {
         if (modifierKeys[keyEvent.key]) {
-            Neo[`${String.uncapitalize(keyEvent.key)}KeyDown`] = false;
+            Neo[`${StringUtil.uncapitalize(keyEvent.key)}KeyDown`] = false;
         }
     }
 
@@ -551,9 +552,10 @@ class DomAccess extends Base {
     /**
      * Include a link into the document.head
      * @param {String} href
+     * @param {Object} dataset=null
      * @returns {Promise<unknown>}
      */
-    loadStylesheet(href) {
+    loadStylesheet(href, dataset=null) {
         let link;
 
         return new Promise((resolve, reject) => {
@@ -567,6 +569,10 @@ class DomAccess extends Base {
                 type   : 'text/css'
             });
 
+            if (dataset) {
+                Object.assign(link.dataset, dataset)
+            }
+
             document.head.appendChild(link)
         })
     }
@@ -834,23 +840,42 @@ class DomAccess extends Base {
     }
 
     /**
+     * You can either pass the id or a querySelector
      * @param {Object} data
-     * @param {String} data.id
-     * @param {String} [data.behavior='smooth']
-     * @param {String} [data.block='start']
-     * @param {String} [data.inline='nearest']
-     * @returns {Object} obj.id => the passed id
+     * @param {String} [data.id]
+     * @param {String} data.behavior='smooth'
+     * @param {String} data.block='start'
+     * @param {String} data.inline='nearest'
+     * @param {String} [data.querySelector]
+     * @returns {Promise<any>}
      */
     scrollIntoView(data) {
-        let node = this.getElement(data.id);
+        let node = data.id ? this.getElement(data.id) : document.querySelector(data.querySelector),
+            opts = {
+                behavior: data.behavior || 'smooth',
+                block   : data.block    || 'start',
+                inline  : data.inline   || 'nearest'
+            };
 
-        node?.scrollIntoView({
-            behavior: data.behavior || 'smooth',
-            block   : data.block    || 'start',
-            inline  : data.inline   || 'nearest'
-        });
+        if (opts.behavior !== 'smooth') {
+            node.scrollIntoView(opts);
+        } else {
+            // scrollIntoView() does not provide a callback yet.
+            // See: https://github.com/w3c/csswg-drafts/issues/3744
+            return new Promise(resolve => {
+                if (node) {
+                    let hasListener = 'scrollend' in window;
 
-        return {id: data.id}
+                    hasListener && document.addEventListener('scrollend', () =>resolve(), {capture : true, once: true});
+
+                    node.scrollIntoView(opts);
+
+                    !hasListener && setTimeout(() => resolve(), 500)
+                } else {
+                    resolve()
+                }
+            })
+        }
     }
 
     /**
@@ -1093,6 +1118,6 @@ class DomAccess extends Base {
     }
 }
 
-let instance = Neo.applyClassConfig(DomAccess);
+let instance = Neo.setupClass(DomAccess);
 
 export default instance;

package/src/main/DomEvents.mjs

@@ -716,7 +716,7 @@ class DomEvents extends Base {
                 parts.push('')
             }
 
-            key = decodeURIComponent(parts[0]);
+            key   = decodeURIComponent(parts[0]);
             value = decodeURIComponent(parts[1]);
 
             if (key.indexOf('[]') !== -1) {
@@ -846,6 +846,6 @@ class DomEvents extends Base {
     }
 }
 
-let instance = Neo.applyClassConfig(DomEvents);
+let instance = Neo.setupClass(DomEvents);
 
 export default instance;

package/src/main/addon/AmCharts.mjs

@@ -272,6 +272,6 @@ class AmCharts extends Base {
     }
 }
 
-Neo.applyClassConfig(AmCharts);
+Neo.setupClass(AmCharts);
 
 export default AmCharts;

package/src/main/addon/AnalyticsByGoogle.mjs

@@ -48,6 +48,6 @@ class AnalyticsByGoogle extends Base {
     }
 }
 
-Neo.applyClassConfig(AnalyticsByGoogle);
+Neo.setupClass(AnalyticsByGoogle);
 
 export default AnalyticsByGoogle;

package/src/main/addon/Base.mjs

@@ -21,6 +21,6 @@ class Base extends CoreBase {
     }
 }
 
-Neo.applyClassConfig(Base);
+Neo.setupClass(Base);
 
 export default Base;

package/src/main/addon/CesiumJS.mjs

@@ -111,6 +111,6 @@ class CesiumJS extends Base {
     }
 }
 
-Neo.applyClassConfig(CesiumJS);
+Neo.setupClass(CesiumJS);
 
 export default CesiumJS;

package/src/main/addon/CloneNode.mjs

@@ -97,6 +97,6 @@ class CloneNode extends Base {
     }
 }
 
-Neo.applyClassConfig(CloneNode);
+Neo.setupClass(CloneNode);
 
 export default CloneNode;

package/src/main/addon/Cookie.mjs

@@ -53,6 +53,6 @@ class Cookie extends Base {
     }
 }
 
-Neo.applyClassConfig(Cookie);
+Neo.setupClass(Cookie);
 
 export default Cookie;

package/src/main/addon/DragDrop.mjs

@@ -509,6 +509,6 @@ class DragDrop extends Base {
     }
 }
 
-Neo.applyClassConfig(DragDrop);
+Neo.setupClass(DragDrop);
 
 export default DragDrop;

package/src/main/addon/GoogleMaps.mjs

@@ -272,6 +272,6 @@ class GoogleMaps extends Base {
     }
 }
 
-Neo.applyClassConfig(GoogleMaps);
+Neo.setupClass(GoogleMaps);
 
 export default GoogleMaps;

package/src/main/addon/HighlightJS.mjs

@@ -1,6 +1,5 @@
 import Base       from './Base.mjs';
 import DomAccess  from '../DomAccess.mjs';
-import Stylesheet from './Stylesheet.mjs'
 
 /**
  * Required for the docs app which uses highlight.js for the source views
@@ -31,13 +30,13 @@ class HighlightJS extends Base {
          */
         remote: {
             app: [
+                'highlightAuto',
                 'loadLibrary',
                 'scrollIntoView',
                 'syntaxHighlight',
                 'switchTheme',
                 'syntaxHighlightInit',
-                'syntaxHighlightLine',
-                'highlightAuto'
+                'syntaxHighlightLine'
             ]
         },
         /**
@@ -48,10 +47,17 @@ class HighlightJS extends Base {
     }
 
     /**
-     * @param {Object} config
+     * See: https://highlightjs.readthedocs.io/en/latest/api.html#highlightauto
+     * @param {Object} data
+     * @param {String} data.html
+     * @returns {Object} of the form {language, relevance, value, secondBest}
      */
-    construct(config) {
-        super.construct(config);
+    highlightAuto(data) {
+        if (hljs) {
+            return hljs.highlightAuto(data.html)
+        } else {
+            console.error('highlight.js is not included inside the main thread.')
+        }
     }
 
     /**
@@ -66,10 +72,10 @@ class HighlightJS extends Base {
         me.set(data);
 
         await DomAccess.loadScript(me.highlightJsPath).then(() => {
-            DomAccess.addScript({src: me.highlightJsLineNumbersPath});
+            DomAccess.addScript({src: me.highlightJsLineNumbersPath})
         });
 
-        Stylesheet.createStyleSheet(null, 'hljs-theme', me.themePath)
+        Neo.main.addon.Stylesheet.createStyleSheet(null, 'hljs-theme', me.themePath);
 
         return true
     }
@@ -97,14 +103,14 @@ class HighlightJS extends Base {
      */
     switchTheme(theme) {
         let definedThemes = {
-                dark: './resources/highlightjs-custom-dark-theme.css',
+                dark : './resources/highlightjs-custom-dark-theme.css',
                 light: './resources/highlightjs-custom-github-theme.css'
             },
             switchToTheme = definedThemes[theme];
 
         switchToTheme ??= theme;
         this.themePath = switchToTheme;
-        Stylesheet.createStyleSheet(null, 'hljs-theme', switchToTheme);
+        Neo.main.addon.Stylesheet.createStyleSheet(null, 'hljs-theme', switchToTheme)
     }
 
     /**
@@ -116,7 +122,7 @@ class HighlightJS extends Base {
             let node = document.getElementById(data.vnodeId);
 
             hljs.highlightBlock(node);
-            hljs.lineNumbersBlock(node);
+            hljs.lineNumbersBlock(node)
         } else {
             console.error('highlight.js is not included inside the main thread.')
         }
@@ -128,26 +134,12 @@ class HighlightJS extends Base {
     syntaxHighlightInit(data) {
         if (hljs) {
             let blocks = document.querySelectorAll('pre code:not(.hljs)');
-            Array.prototype.forEach.call(blocks, hljs.highlightBlock);
+            Array.prototype.forEach.call(blocks, hljs.highlightBlock)
         } else {
             console.error('highlight.js is not included inside the main thread.')
         }
     }
 
-    /**
-     * See https://highlightjs.readthedocs.io/en/latest/api.html#highlightauto
-     * @param {String} html
-     * @returns {Object} of the form {language, relevance, value, secondBest}
-     */
-    highlightAuto(html) {
-        if (hljs) {
-            return hljs.highlightAuto(html);
-        } else {
-            console.error('highlight.js is not included inside the main thread.')
-        }
-    }
-
-
     /**
      * @param {Object} data
      * @param {Number} data.addLine
@@ -175,12 +167,11 @@ class HighlightJS extends Base {
 
         if (Neo.isNumber(data.removeLine)) {
             el = parentEl.querySelector('[data-line-number="' + data.removeLine + '"]');
-
-            el && el.parentNode.classList.remove(cls)
+            el?.parentNode.classList.remove(cls)
         }
     }
 }
 
-Neo.applyClassConfig(HighlightJS);
+Neo.setupClass(HighlightJS);
 
 export default HighlightJS;

package/src/main/addon/IntersectionObserver.mjs

@@ -0,0 +1,134 @@
+import Base      from './Base.mjs';
+import DomEvents from '../DomEvents.mjs';
+
+/**
+ * Creating IntersectionObservers to get infos about DOM node visibility.
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+ * @class Neo.main.addon.IntersectionObserver
+ * @extends Neo.main.addon.Base
+ */
+class NeoIntersectionObserver extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.main.addon.IntersectionObserver'
+         * @protected
+         */
+        className: 'Neo.main.addon.IntersectionObserver',
+        /**
+         * Remote method access for other workers
+         * @member {Object} remote
+         * @protected
+         */
+        remote: {
+            app: [
+                'disconnect',
+                'observe',
+                'register'
+            ]
+        }
+    }
+
+    /**
+     * Storing component ids and their IntersectionObservers
+     * @member {Object} map={}
+     * @protected
+     */
+    map = {}
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     */
+    disconnect(data) {
+        this.map[data.id]?.disconnect()
+    }
+
+    /**
+     * @param {IntersectionObserverEntry[]} entries
+     * @param {IntersectionObserver} observer
+     */
+    findTopmostItem(entries, observer) {
+        let me = this,
+            data, path, rect, target;
+
+        entries.forEach(entry => {
+            target = entry.target;
+            data   = target.dataset && {...target.dataset} || null;
+            path   = DomEvents.getPathFromElement(entry.target).map(e => DomEvents.getTargetData(e));
+            rect   = target.getBoundingClientRect();
+
+            // 200 is just a random number to ignore intersection changes at the bottom of the view
+            if (rect.y < 200) {
+                // scroll in from top => direct match
+                if (entry.isIntersecting) {
+                    me.sendMessage({data, id: observer.rootId, isIntersecting: true, path, targetId: target.id})
+                } else {
+                    // scroll out from top
+                    // not perfect since the node is already outside the view
+                    me.sendMessage({data, id: observer.rootId, isIntersecting: true, path, targetId: target.id})
+                }
+            }
+        })
+    }
+
+    /**
+     * Add more or new items into an existing observer instance
+     * @param {Object} data
+     * @param {Boolean} data.disconnect=false true removes all currently observed targets
+     * @param {String} data.id
+     * @param {String} data.observe The querySelector to match elements
+     */
+    observe(data) {
+        let me       = this,
+            targets  = document.querySelectorAll(data.observe),
+            observer = me.map[data.id];
+
+        data.disconnect && observer.disconnect();
+
+        targets.forEach(target => {
+            observer.observe(target)
+        })
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.callback
+     * @param {String} data.id
+     * @param {String} [data.observe] The querySelector to match elements
+     * @param {String} data.root
+     * @param {String} data.rootMargin='0px'
+     * @param {Number|Number[]} data.threshold=0.0
+     */
+    register(data) {
+        let me      = this,
+            targets = data.observe && document.querySelectorAll(data.observe),
+            observer;
+
+        me.map[data.id] = observer = new IntersectionObserver(me[data.callback].bind(me), {
+            root      : document.querySelector(data.root),
+            rootMargin: data.rootMargin || '0px',
+            threshold : data.threshold  || 0.0
+        });
+
+        observer.rootId = data.id; // storing the component id
+
+        targets?.forEach(target => {
+            observer.observe(target)
+        })
+    }
+
+    /**
+     * @param {Object} data
+     */
+    sendMessage(data) {
+        Neo.worker.Manager.sendMessage('app', {
+            action   : 'domEvent',
+            eventName: 'intersect',
+            data
+        })
+    }
+}
+
+Neo.setupClass(NeoIntersectionObserver);
+
+export default NeoIntersectionObserver;

package/src/main/addon/LocalStorage.mjs

@@ -70,6 +70,6 @@ class LocalStorage extends Base {
     }
 }
 
-Neo.applyClassConfig(LocalStorage);
+Neo.setupClass(LocalStorage);
 
 export default LocalStorage;

package/src/main/addon/MapboxGL.mjs

@@ -482,6 +482,6 @@ class MapboxGL extends Base {
     }
 }
 
-Neo.applyClassConfig(MapboxGL);
+Neo.setupClass(MapboxGL);
 
 export default MapboxGL;

package/src/main/addon/Markdown.mjs

@@ -30,7 +30,7 @@ class Markdown extends Base {
          * @member {String} showdownPath='https://cdn.jsdelivr.net/npm/showdown@1.9.1/dist/showdown.min.js'
          * @protected
          */
-        showdownPath: 'https://cdn.jsdelivr.net/npm/showdown@1.9.1/dist/showdown.min.js'
+        showdownPath: 'https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js'
     }
 
     /**
@@ -53,6 +53,6 @@ class Markdown extends Base {
     }
 }
 
-Neo.applyClassConfig(Markdown);
+Neo.setupClass(Markdown);
 
 export default Markdown;