neo.mjs 6.12.1 → 6.14.0

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;

package/src/main/addon/MonacoEditor.mjs

@@ -0,0 +1,179 @@
+import Base      from './Base.mjs';
+import DomAccess from '../DomAccess.mjs';
+import DomEvents from '../DomEvents.mjs';
+
+/**
+ * Adds support for using the Monaco Code Editor within neo.
+ * Repository: https://github.com/microsoft/monaco-editor
+ * API: https://microsoft.github.io/monaco-editor/typedoc/index.html
+ * @class Neo.main.addon.MonacoEditor
+ * @extends Neo.main.addon.Base
+ */
+class MonacoEditor extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.main.addon.MonacoEditor'
+         * @protected
+         */
+        className: 'Neo.main.addon.MonacoEditor',
+        /**
+         * @member {String} libraryBasePath='../../node_modules/monaco-editor/min/vs'
+         */
+        libraryBasePath: '../../node_modules/monaco-editor/min/vs',
+        /**
+         * Remote method access for other workers
+         * @member {Object} remote
+         * @protected
+         */
+        remote: {
+            app: [
+                'createInstance',
+                'destroyInstance',
+                'getValue',
+                'layoutEditor',
+                'setLanguage',
+                'setTheme',
+                'setValue',
+                'updateOptions'
+            ]
+        }
+    }
+
+    /**
+     * Will get set to true once all Monaco related files got loaded
+     * @member {Boolean} isReady=false
+     */
+    isReady = false
+    /**
+     * Stores component DOM ids as keys and editor instances as values
+     * @member {Object} map={}
+     */
+    map = {}
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+        this.loadFiles()
+    }
+
+    /**
+     * For a complete list of options see:
+     * https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOptions.html
+     * @param {Object} data
+     */
+    createInstance(data) {
+        let me = this,
+            id = data.id,
+            editor;
+
+        delete data.appName;
+        delete data.id;
+
+        editor = me.map[id] = monaco.editor.create(DomAccess.getElement(id), data);
+
+        editor.getModel().onDidChangeContent(me.onContentChange.bind(me, id))
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     */
+    destroyInstance(data) {
+        // todo: destroy the editor instance if possible
+        delete this.map[data.id]
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @returns {Object}
+     */
+    getValue(data) {
+        return this.map[data.id].getModel().getValue()
+    }
+
+    /**
+     * Changing the size of the parent container will only get honored when re-triggering an editor layout
+     * @param {Object} data
+     * @param {String} data.id
+     */
+    layoutEditor(data) {
+        this.map[data.id].layout()
+    }
+
+    /**
+     *
+     */
+    async loadFiles() {
+        const path = this.libraryBasePath;
+
+        window.require = { paths: { vs: path } };
+
+        await DomAccess.loadStylesheet(path + '/editor/editor.main.css', {name: 'vs/editor/editor.main'});
+        await DomAccess.loadScript(path + '/loader.js');
+        await DomAccess.loadScript(path + '/editor/editor.main.nls.js');
+        await DomAccess.loadScript(path + '/editor/editor.main.js');
+
+        this.isReady = true
+    }
+
+    /**
+     * Forwards content changes as DOM change events to the app-worker.
+     * @param {String} id
+     * @param {Object} event
+     */
+    onContentChange(id, event) {
+        let node = DomAccess.getElement(id),
+            path = DomEvents.getPathFromElement(node).map(e => DomEvents.getTargetData(e));
+
+        DomEvents.sendMessageToApp({
+            event,
+            id,
+            path,
+            type : 'editorChange', // we must not use "change", since the editor contains a textarea tag which also fires change.
+            value: this.map[id].getModel().getValue()
+        })
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {String} data.value
+     */
+    setLanguage(data) {
+        this.map[data.id].getModel().setLanguage(data.value)
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {String} data.value
+     */
+    setTheme(data) {
+        this.map[data.id]._themeService.setTheme(data.value)
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {String} data.value
+     */
+    setValue(data) {
+        this.map[data.id].getModel().setValue(data.value)
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {Object} data.options
+     */
+    updateOptions(data) {
+        this.map[data.id].updateOptions(data.options)
+    }
+}
+
+Neo.setupClass(MonacoEditor);
+
+export default MonacoEditor;

package/src/main/addon/Mwc.mjs

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

package/src/main/addon/Navigator.mjs

@@ -295,7 +295,7 @@ class Navigator extends Base {
         if (typeof el.click === 'function') {
             el.click();
         }
-        // It operates through a listenert, so needs an event firing into it.
+        // It operates through a listener, so needs an event firing into it.
         else {
             const
                 rect    = el.getBoundingClientRect(),
@@ -324,7 +324,7 @@ class Navigator extends Base {
         if (!data.subject) {
             // If subject has been unmounted, we cannot navigate
             if (!(data = DomAccess.getElement(data.id)?.$navigator)) {
-                return;
+                return
             }
         }
 
@@ -344,8 +344,8 @@ class Navigator extends Base {
 
         // Scroll the target into view smoothly before we focus it without triggering a scroll
         newActiveElement.scrollIntoView({
-            block    : 'nearest',
-            behavior : 'smooth'
+            behavior : 'smooth',
+            block    : 'nearest'
         });
 
         // Find a focusable element which may be the item, or inside the item to draw focus to.
@@ -356,7 +356,7 @@ class Navigator extends Base {
         if (focusTarget) {
             focusTarget.focus({ preventScroll : true });
         }
-        // If not, we programatically navigate there
+        // If not, we programmatically navigate there
         else {
             this.setActiveItem(newActiveElement, data);
         }
@@ -377,34 +377,37 @@ class Navigator extends Base {
         data.activeIndex = newActiveElement ? allItems.indexOf(newActiveElement) : -1;
 
         newActiveElement.scrollIntoView({
-            block    : 'nearest',
-            inline   : 'nearest',
-            nehavior : 'smooth'
+            behavior: 'smooth',
+            block   : 'nearest',
+            inline  : 'nearest'
         });
 
         // Link the event source or the encapsulating element to the active item for A11Y
         (data.eventSource || data.subject).setAttribute('aria-activedescendant', data.activeItem.id);
 
-        DomEvents.sendMessageToApp({
-            type                : 'neonavigate',
-            target              : data.id,
-            path                : [{
-                id : data.id
-            }],
-            activeItem          : data.activeItem.id,
-            previousActiveItem  : data.previousActiveItem?.id,
-            activeIndex         : data.activeIndex,
-            previousActiveIndex : data.previousActiveIndex,
-            altKey              : Neo.altKeyDown,
-            ctrlKey             : Neo.controlKeyDown,
-            metaKey             : Neo.metaKeyDown,
-            shiftKey            : Neo.shiftKeyDown
-        });
+        // navigating to the same element should get ignored
+        if (data.activeItem !== data.previousActiveItem) {
+            DomEvents.sendMessageToApp({
+                type                : 'neonavigate',
+                target              : data.id,
+                path                : [{
+                    id : data.id
+                }],
+                activeItem          : data.activeItem.id,
+                previousActiveItem  : data.previousActiveItem?.id,
+                activeIndex         : data.activeIndex,
+                previousActiveIndex : data.previousActiveIndex,
+                altKey              : Neo.altKeyDown,
+                ctrlKey             : Neo.controlKeyDown,
+                metaKey             : Neo.metaKeyDown,
+                shiftKey            : Neo.shiftKeyDown
+            })
+        }
 
         // Navigation causes click if autoClick set.
         // TabPanels work like this.
         if (data.autoClick) {
-            this.clickItem(newActiveElement);
+            this.clickItem(newActiveElement)
         }
     }
 
@@ -445,6 +448,6 @@ class Navigator extends Base {
     }
 }
 
-Neo.applyClassConfig(Navigator);
+Neo.setupClass(Navigator);
 
 export default Navigator;

package/src/main/addon/Popover.mjs

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

package/src/main/addon/PrefixField.mjs

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

package/src/main/addon/ResizeObserver.mjs

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

package/src/main/addon/ServiceWorker.mjs

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

package/src/main/addon/Siesta.mjs

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

package/src/main/addon/Stylesheet.mjs

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

package/src/main/addon/WebComponent.mjs

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

package/src/main/addon/WindowPosition.mjs

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

package/src/main/draggable/sensor/Base.mjs

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

package/src/main/draggable/sensor/Mouse.mjs

@@ -213,6 +213,6 @@ function preventDefault(event) {
     event.preventDefault();
 }
 
-Neo.applyClassConfig(Mouse);
+Neo.setupClass(Mouse);
 
 export default Mouse;

package/src/main/draggable/sensor/Touch.mjs

@@ -240,6 +240,6 @@ function preventDefault(event) {
     event.stopPropagation();
 }
 
-Neo.applyClassConfig(Touch);
+Neo.setupClass(Touch);
 
 export default Touch;

package/src/main/mixin/DeltaUpdates.mjs

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

package/src/main/mixin/TouchDomEvents.mjs

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

package/src/manager/Base.mjs

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

package/src/manager/Component.mjs

@@ -387,6 +387,6 @@ class Component extends Base {
     }
 }
 
-let instance = Neo.applyClassConfig(Component);
+let instance = Neo.setupClass(Component);
 
 export default instance;

package/src/manager/DomEvent.mjs

@@ -24,16 +24,17 @@ const globalDomEvents = [
     'focusin',
     'focusout',
     'input',
+    'intersect',
     'keydown',
     'keyup',
     'mousedown',
     'mouseenter',
     'mouseleave',
     'mouseup',
+    'neonavigate',
     'scroll',
     'selectionchange',
-    'wheel',
-    'neonavigate'
+    'wheel'
 ];
 
 /**
@@ -515,6 +516,6 @@ class DomEvent extends Base {
     }
 }
 
-let instance = Neo.applyClassConfig(DomEvent);
+let instance = Neo.setupClass(DomEvent);
 
 export default instance;

package/src/manager/Focus.mjs

@@ -198,6 +198,6 @@ class Focus extends CoreBase {
     }
 }
 
-let instance = Neo.applyClassConfig(Focus);
+let instance = Neo.setupClass(Focus);
 
 export default instance;

package/src/manager/Instance.mjs

@@ -49,6 +49,6 @@ class Instance extends Base {
     }
 }
 
-let instance = Neo.applyClassConfig(Instance);
+let instance = Neo.setupClass(Instance);
 
 export default instance;

package/src/manager/Store.mjs

@@ -83,6 +83,6 @@ class Store extends Base {
     }
 }
 
-let instance = Neo.applyClassConfig(Store);
+let instance = Neo.setupClass(Store);
 
 export default instance;

package/src/manager/Task.mjs

@@ -188,6 +188,6 @@ class Task extends Base {
     }
 }
 
-let instance = Neo.applyClassConfig(Task);
+let instance = Neo.setupClass(Task);
 
 export default instance;

package/src/manager/Toast.mjs

@@ -213,6 +213,6 @@ class Toast extends Base {
     }
 }
 
-let instance = Neo.applyClassConfig(Toast);
+let instance = Neo.setupClass(Toast);
 
 export default instance;

package/src/manager/rpc/Api.mjs

@@ -38,6 +38,6 @@ class Api extends Base {
     }
 }
 
-let instance = Neo.applyClassConfig(Api);
+let instance = Neo.setupClass(Api);
 
 export default instance;