neo.mjs 6.17.2 → 6.18.0

package/src/main/addon/Navigator.mjs

@@ -42,7 +42,7 @@ class Navigator extends Base {
     clickItem(el) {
         // The element knows how to click itself.
         if (typeof el.click === 'function') {
-            el.click();
+            el.click()
         }
         // It operates through a listener, so needs an event firing into it.
         else {
@@ -78,7 +78,7 @@ class Navigator extends Base {
         // focus, so we have nothing to do here. The navigable items wil be inert and not
         // focusable. Navigation will be "virtual". Select field navigates its dropdowns like this.
         if (!data.subject.contains(data.eventSource)) {
-            return;
+            return
         }
 
         const
@@ -88,7 +88,7 @@ class Navigator extends Base {
                 if (f){
                     value.push(f);
                 }
-                return value;
+                return value
             }, []),
             defaultActiveItem = focusables[0] || data.subject.querySelector(data.selector);
 
@@ -98,7 +98,7 @@ class Navigator extends Base {
 
         // Make at least one thing tabbable so focus can move into the subject element
         if (defaultActiveItem) {
-            defaultActiveItem.tabIndex = 0;
+            defaultActiveItem.tabIndex = 0
         }
     }
 
@@ -107,7 +107,7 @@ class Navigator extends Base {
      * @param {Object} data
      */
     navigateClickHandler(e, data) {
-        const target = e.target.closest(data.selector);
+        let target = e.target.closest(data.selector);
 
         // If there was a focusable under the mouse, mousedown will have focused it and and we
         // will have respond to that in navigateFocusInHandler.
@@ -122,10 +122,9 @@ class Navigator extends Base {
      * @param {Object} data
      */
     navigateFocusInHandler(e, data) {
-        const
-            target            = e.target.closest(data.selector),
-            { relatedTarget } = e,
-            { subject }       = data;
+        let target          = e.target.closest(data.selector),
+            {relatedTarget} = e,
+            {subject}       = data;
 
         // If our targets are focusable and recieve focus, that is a navigation.
         if (target) {
@@ -135,7 +134,7 @@ class Navigator extends Base {
             // The items must be focusable, but *not* tabbable.
             // So remove tabbability on the last active item
             if (subject.contains(relatedTarget)) {
-                relatedTarget.tabIndex = -1;
+                relatedTarget.tabIndex = -1
             }
         }
     }
@@ -145,14 +144,14 @@ class Navigator extends Base {
      * @param {Object} data
      */
     navigateFocusOutHandler(e, data) {
-        const { target } = e;
+        let {target} = e;
 
         // Clear active class from the item we are leaving from.
         target.closest(data.selector)?.classList.remove(data.activeCls);
 
         // On focusout, leave the last active item as tabbable so user can TAB back in here
         if (!DomUtils.isTabbable(target)) {
-            target.tabIndex = 0;
+            target.tabIndex = 0
         }
     }
 
@@ -161,7 +160,7 @@ class Navigator extends Base {
      * @param {Object} data
      */
     navigateGetAdjacent(direction=1, data) {
-        const { treeWalker } = data;
+        let {treeWalker} = data;
 
         // Walk forwards or backwards to the next or previous node which matches our selector
         treeWalker.currentNode = this.navigatorGetActiveItem(data) || data.subject;
@@ -170,14 +169,14 @@ class Navigator extends Base {
         // Found a target in the requested direction
         if (treeWalker.currentNode) {
             if (treeWalker.currentNode !== data.activeItem) {
-                return treeWalker.currentNode;
+                return treeWalker.currentNode
             }
         }
         // Could not find target in requested direction, then wrap if configured to do so
         else if (data.wrap !== false) {
             const allItems = data.subject.querySelector(data.selector);
 
-            return allItems[direction === 1 ? 0 : allItems.length - 1];
+            return allItems[direction === 1 ? 0 : allItems.length - 1]
         }
     }
 
@@ -187,12 +186,9 @@ class Navigator extends Base {
      */
     navigateKeyDownHandler(keyEvent, data) {
         const
-            me        = this,
-            {
-                subject,
-                wrap
-            }         = data,
-            firstItem = subject.querySelector(data.selector);
+            me              = this,
+            {subject, wrap} = data,
+            firstItem       = subject.querySelector(data.selector);
 
         if (!data.nextKey && firstItem) {
             const
@@ -204,16 +200,16 @@ class Navigator extends Base {
             if (containerStyle.display === 'flex' && containerStyle.flexDirection === 'row'
                 || itemStyle.display === 'inline' || itemStyle.display === 'inline-block') {
                 data.previousKey = 'ArrowLeft';
-                data.nextKey     = 'ArrowRight';
+                data.nextKey     = 'ArrowRight'
             }
             // Child elements layed out vertically.
             else {
                 data.previousKey = 'ArrowUp';
-                data.nextKey     = 'ArrowDown';
+                data.nextKey     = 'ArrowDown'
             }
         }
 
-        let { key, target } = keyEvent,
+        let {key, target} = keyEvent,
             newActiveElement;
 
         switch(key) {
@@ -221,14 +217,14 @@ class Navigator extends Base {
             case data.previousKey:
                 newActiveElement = me.navigateGetAdjacent(-1, data);
                 if (!newActiveElement && wrap) {
-                    newActiveElement = subject.querySelector(`${data.selector}:last-of-type`);
+                    newActiveElement = subject.querySelector(`${data.selector}:last-of-type`)
                 }
                 break;
             // Move to the next navigable item
             case data.nextKey:
                 newActiveElement = me.navigateGetAdjacent(1, data);
                 if (!newActiveElement && wrap) {
-                    newActiveElement = subject.querySelector(data.selector);
+                    newActiveElement = subject.querySelector(data.selector)
                 }
                 break;
             // Move to the first navigable item
@@ -242,13 +238,13 @@ class Navigator extends Base {
             // Click the currently active item if necessary
             case 'Enter':
                 if (data.activeItem && !enterActivatedTags[target.tagName]) {
-                    this.clickItem(data.activeItem);
+                    this.clickItem(data.activeItem)
                 }
         }
 
         if (newActiveElement) {
             keyEvent.preventDefault();
-            me.navigateTo(newActiveElement, data);
+            me.navigateTo(newActiveElement, data)
         }
     }
 
@@ -263,7 +259,7 @@ class Navigator extends Base {
         // If not, we have to programmatically activate on click, but we must not draw focus away from
         // where it is, so preventDefault
         if (target && !data.findFocusable(target)) {
-            e.preventDefault();
+            e.preventDefault()
         }
     }
 
@@ -272,7 +268,7 @@ class Navigator extends Base {
      * @param {Object} data
      */
     navigateNodeFilter(node, data) {
-        return node.offsetParent && node.matches?.(data.selector) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        return node.offsetParent && node.matches?.(data.selector) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
     }
 
     /**
@@ -290,7 +286,7 @@ class Navigator extends Base {
             if (data.activeItem && !data.subject.contains(data.activeItem)) {
                 const allItems = data.subject.querySelectorAll(data.selector);
 
-                allItems.length && this.navigateTo(allItems[Math.max(Math.min(data.activeIndex, allItems.length - 1), 0)], data);
+                allItems.length && this.navigateTo(allItems[Math.max(Math.min(data.activeIndex, allItems.length - 1), 0)], data)
             }
         }
     }
@@ -312,10 +308,10 @@ class Navigator extends Base {
         // Can navigate by index. This is useful if the active item is deleted.
         // We can navigate to the same index and preserve UI stability.
         if (typeof newActiveElement === 'number') {
-            newActiveElement = data.subject.querySelectorAll(data.selector)?.[newActiveElement];
+            newActiveElement = data.subject.querySelectorAll(data.selector)?.[newActiveElement]
         }
         else if (typeof newActiveElement === 'string') {
-            newActiveElement = DomAccess.getElement(newActiveElement);
+            newActiveElement = DomAccess.getElement(newActiveElement)
         }
 
         // Could not do what was asked because we could not find the requested item
@@ -335,11 +331,11 @@ class Navigator extends Base {
 
         // If the item contains a focusable, we focus it and then react in navigateFocusInHandler
         if (focusTarget) {
-            focusTarget.focus({ preventScroll : true });
+            focusTarget.focus({ preventScroll : true })
         }
         // If not, we programmatically navigate there
         else {
-            this.setActiveItem(newActiveElement, data);
+            this.setActiveItem(newActiveElement, data)
         }
     }
 
@@ -353,9 +349,9 @@ class Navigator extends Base {
         if (!activeItem && ('activeIndex' in data)) {
             const allItems = data.subject.querySelectorAll(data.selector);
 
-            activeItem = allItems[Math.max(Math.min(data.activeIndex, allItems.length - 1), 0)];
+            activeItem = allItems[Math.max(Math.min(data.activeIndex, allItems.length - 1), 0)]
         }
-        return activeItem;
+        return activeItem
     }
 
     /**
@@ -368,7 +364,7 @@ class Navigator extends Base {
         // Can navigate by index. This is useful if the active item is deleted.
         // We can navigate to the same index and preserve UI stability.
         if (typeof newActiveElement === 'number') {
-            newActiveElement = allItems[Math.max(Math.min(newActiveElement, allItems.length - 1), 0)];
+            newActiveElement = allItems[Math.max(Math.min(newActiveElement, allItems.length - 1), 0)]
         }
 
         data.previousActiveIndex = data.activeIndex;
@@ -495,7 +491,7 @@ class Navigator extends Base {
             target.removeEventListener('mousedown',    data.l2);
             target.removeEventListener('click',        data.l3);
             target.removeEventListener('focusin',      data.l4);
-            target.removeEventListener('focusout',     data.l5);
+            target.removeEventListener('focusout',     data.l5)
         }
     }
 }

package/src/main/addon/Popover.mjs

@@ -34,7 +34,7 @@ class Popover extends Base {
      */
     hide(data) {
         this.getPopover(data.id).hidePopover();
-        return true;
+        return true
     }
 
     /**
@@ -44,7 +44,7 @@ class Popover extends Base {
      */
     show(data) {
         this.getPopover(data.id).showPopover();
-        return true;
+        return true
     }
 
     /**
@@ -54,14 +54,13 @@ class Popover extends Base {
      */
     toggle(data) {
         this.getPopover(data.id).togglePopover();
-        return true;
+        return true
     }
 
     getPopover(parentId) {
-        const parent = document.getElementById(parentId),
-              popover = document.getElementById(parent.getAttribute('popovertarget'));
+        const parent = DomAccess.getElement(parentId);
 
-        return popover;
+        return DomAccess.getElement(parent.getAttribute('popovertarget'))
     }
 }
 

package/src/main/addon/PrefixField.mjs

@@ -1,8 +1,7 @@
 import Base from './Base.mjs';
 
 /**
- * Helper class to include Google's Material Web Components into your neo.mjs app
- * https://www.amcharts.com/docs/v4/
+ * Experimental
  * @class Neo.main.addon.PrefixField
  * @extends Neo.main.addon.Base
  */

package/src/main/addon/ServiceWorker.mjs

@@ -20,14 +20,14 @@ class ServiceWorker extends Base {
      */
     construct(config) {
         if ('serviceWorker' in navigator) {
-            let me            = this,
-                config        = Neo.config,
-                devMode       = config.environment === 'development',
-                fileName      = devMode ? 'ServiceWorker.mjs' : 'serviceworker.js',
-                folder        = window.location.pathname.includes('/examples/') ? 'examples/' : 'apps/',
-                opts          = devMode ? {type: 'module'} : {},
-                path          = (devMode ? config.basePath : config.workerBasePath) + (devMode ? folder : '') + fileName,
-                serviceWorker = navigator.serviceWorker;
+            let me              = this,
+                {config}        = Neo,
+                devMode         = config.environment === 'development',
+                fileName        = devMode ? 'ServiceWorker.mjs' : 'serviceworker.js',
+                folder          = window.location.pathname.includes('/examples/') ? 'examples/' : 'apps/',
+                opts            = devMode ? {type: 'module'} : {},
+                path            = (devMode ? config.basePath : config.workerBasePath) + (devMode ? folder : '') + fileName,
+                {serviceWorker} = navigator;
 
             window.addEventListener('beforeunload', me.onBeforeUnload.bind(me));
 
@@ -49,7 +49,7 @@ class ServiceWorker extends Base {
                             action: 'registerNeoConfig',
                             data  : config
                         })
-                    });
+                    })
                 })
         }
     }

package/src/main/addon/Siesta.mjs

@@ -19,7 +19,7 @@ class Siesta extends Base {
      */
     construct(config) {
         super.construct(config);
-        this.adjustSiestaEnvironment();
+        this.adjustSiestaEnvironment()
     }
 
     /**
@@ -34,8 +34,9 @@ class Siesta extends Base {
 
         for (; i < len; i++) {
             sheet = document.styleSheets[i];
+
             if (sheet?.href.includes('highlightjs')) {
-                sheet.ownerNode.id = 'hljs-theme';
+                sheet.ownerNode.id = 'hljs-theme'
             }
         }
     }

package/src/main/addon/Stylesheet.mjs

@@ -47,16 +47,16 @@ class Stylesheet extends Base {
 
         if (neoConfig.useFontAwesome) {
             if (neoConfig.environment === 'development') {
-                faPath = neoConfig.basePath + 'node_modules/@fortawesome/fontawesome-free/css/all.min.css';
+                faPath = neoConfig.basePath + 'node_modules/@fortawesome/fontawesome-free/css/all.min.css'
             } else {
-                faPath = neoConfig.basePath.substr(6) + 'resources/fontawesome-free/css/all.min.css';
+                faPath = neoConfig.basePath.substr(6) + 'resources/fontawesome-free/css/all.min.css'
             }
 
-            this.createStyleSheet(null, null, faPath);
+            this.createStyleSheet(null, null, faPath)
         }
 
         if (neoConfig.themes.length > 0 && neoConfig.themes[0] !== '') {
-            this.addGlobalCss();
+            this.addGlobalCss()
         }
     }
 
@@ -64,26 +64,26 @@ class Stylesheet extends Base {
      *
      */
     addGlobalCss() {
-        let config   = Neo.config,
-            themes   = config.themes,
+        let {config} = Neo,
+            {themes} = config,
             folders  = ['src', ...themes],
             env      = config.environment,
             path      = env.startsWith('dist/') ? '' : config.appPath.includes('docs') ? `../dist/${env}/` : `../../dist/${env}/`,
-            rootPath = config.basePath.substr(6);
+            rootPath = config.basePath.substring(6);
 
         document.body.classList.add(themes[0]);
 
         folders.forEach(folder => {
             if (folder.startsWith('neo-')) {
-                folder = folder.substring(4);
+                folder = folder.substring(4)
             }
 
             this.createStyleSheet(
                 null,
                 null,
                 `${rootPath}${path}css/${folder}/Global.css`
-            );
-        });
+            )
+        })
     }
 
     /**
@@ -93,14 +93,14 @@ class Stylesheet extends Base {
      * @param {String[]} data.folders
      */
     addThemeFiles(data) {
-        let className = data.className,
-            config    = Neo.config,
-            env       = config.environment,
-            path      = env.startsWith('dist/') ? '' : config.appPath.includes('docs') ? `../dist/${env}/` : `../../dist/${env}/`,
-            rootPath  = config.basePath.substr(6);
+        let {className} = data,
+            {config}    = Neo,
+            env         = config.environment,
+            path        = env.startsWith('dist/') ? '' : config.appPath.includes('docs') ? `../dist/${env}/` : `../../dist/${env}/`,
+            rootPath    = config.basePath.substring(6);
 
         if (className.startsWith('Neo.')) {
-            className = className.substring(4);
+            className = className.substring(4)
         }
 
         className = className.split('.').join('/');
@@ -124,13 +124,13 @@ class Stylesheet extends Base {
      */
     createStyleSheet(name, id, href) {
         if (!name && !href) {
-            throw new Error('createStyleSheet: you need to either pass a name or a href');
+            throw new Error('createStyleSheet: you need to either pass a name or a href')
         }
 
-        const link = document.createElement('link'),
-              env  = Neo.config.environment,
-              path = env.startsWith('dist/') ? env : ('dist/' + env),
-              url  = href ? href : Neo.config.basePath + path + '/' + name;
+        let link = document.createElement('link'),
+            env  = Neo.config.environment,
+            path = env.startsWith('dist/') ? env : ('dist/' + env),
+            url  = href ? href : Neo.config.basePath + path + '/' + name;
 
         Object.assign(link, {
             href: url,
@@ -139,10 +139,10 @@ class Stylesheet extends Base {
         });
 
         if (id) {
-            link.id = id;
+            link.id = id
         }
 
-        document.head.appendChild(link);
+        document.head.appendChild(link)
     }
 
     /**
@@ -153,7 +153,7 @@ class Stylesheet extends Base {
     deleteCssRules(data) {
         let styleEl    = document.getElementById(this.dynamicStyleSheetId),
             styleSheet = styleEl.sheet,
-            cssRules   = styleSheet.cssRules,
+            {cssRules} = styleSheet,
             i          = 0,
             len        = data.rules.length,
             j, rulesLen;
@@ -165,7 +165,7 @@ class Stylesheet extends Base {
             for (; j < rulesLen; j++) {
                 if (cssRules[j].selectorText === data.rules[i]) {
                     styleSheet.deleteRule(j);
-                    break;
+                    break
                 }
             }
         }
@@ -183,11 +183,11 @@ class Stylesheet extends Base {
         for (; i < len; i++) {
             sheet = document.styleSheets[i];
             if (sheet.href?.includes(token)) {
-                return true;
+                return true
             }
         }
 
-        return false;
+        return false
     }
 
     /**
@@ -205,13 +205,13 @@ class Stylesheet extends Base {
             styleEl = document.createElement('style');
 
             styleEl.id = this.dynamicStyleSheetId;
-            document.head.appendChild(styleEl);
+            document.head.appendChild(styleEl)
         }
 
         styleSheet = styleEl.sheet;
 
         for (; i < len; i++) {
-            styleSheet.insertRule(data.rules[i], styleSheet.cssRules.length);
+            styleSheet.insertRule(data.rules[i], styleSheet.cssRules.length)
         }
     }
 
@@ -235,19 +235,19 @@ class Stylesheet extends Base {
             if (sheet.href) {
                 excluded.forEach(name => {
                     if (sheet.href.includes(name)) {
-                        removeSheet = false;
+                        removeSheet = false
                     }
                 });
 
                 if (removeSheet) {
                     included.forEach(name => {
                         if (!sheet.href.includes(name)) {
-                            removeSheet = false;
+                            removeSheet = false
                         }
                     });
 
                     if (removeSheet) {
-                        sheet.ownerNode.parentNode.removeChild(sheet.ownerNode);
+                        sheet.ownerNode.parentNode.removeChild(sheet.ownerNode)
                     }
                 }
             }
@@ -262,11 +262,11 @@ class Stylesheet extends Base {
      * @param {String} data.value
      */
     setCssVariable(data) {
-        let key = data.key,
+        let {key} = data,
             rule, sheet;
 
         if (!key.startsWith('--')) {
-            key = '--' + key;
+            key = '--' + key
         }
 
         for (sheet of document.styleSheets) {
@@ -275,14 +275,14 @@ class Stylesheet extends Base {
                     if (Neo.typeOf(rule) === 'CSSStyleRule') {
                         if (rule.style.getPropertyValue(key) !== '') {
                             rule.style.setProperty(key, data.value, data.priority);
-                            return true;
+                            return true
                         }
                     }
                 }
             }
         }
 
-        return false;
+        return false
     }
 
     /**
@@ -291,7 +291,7 @@ class Stylesheet extends Base {
      * @param {String} data.id
      */
     swapStyleSheet(data) {
-        document.getElementById(data.id).setAttribute('href', data.href);
+        document.getElementById(data.id).setAttribute('href', data.href)
     }
 }
 

package/src/main/addon/WebComponent.mjs

@@ -19,8 +19,7 @@ class WebComponent extends Base {
      */
     construct(config) {
         super.construct(config);
-
-        this.registerElementLoader();
+        this.registerElementLoader()
     }
 
     /**
@@ -36,7 +35,7 @@ class WebComponent extends Base {
                 me.attachShadow({mode: 'open'}).innerHTML = content;
 
                 styles = me.querySelector('style');
-                styles && me.shadowRoot.append(styles);
+                styles && me.shadowRoot.append(styles)
             }
         });
     }

package/src/main/addon/WindowPosition.mjs

@@ -113,11 +113,10 @@ class WindowPosition extends Base {
      *
      */
     checkMovement() {
-        let me         = this,
-            Manager    = Neo.worker.Manager,
-            win        = window,
-            screenLeft = win.screenLeft,
-            screenTop  = win.screenTop,
+        let me                      = this,
+            {Manager}               = Neo.worker,
+            win                     = window,
+            {screenLeft, screenTop} = win,
             winData;
 
         if (me.screenLeft !== screenLeft || me.screenTop !== screenTop) {
@@ -154,25 +153,27 @@ class WindowPosition extends Base {
      * @param {Object} data
      */
     getPosition(data) {
-        let win = window,
+        let {size}                  = data,
+            win                     = window,
+            {screenLeft, screenTop} = win,
             left, top;
 
         switch(data.dock) {
             case 'bottom':
-                left = win.screenLeft;
-                top  = win.outerHeight + win.screenTop - 50;
+                left = screenLeft;
+                top  = win.outerHeight + screenTop - 50;
                 break
             case 'left':
-                left = win.screenLeft - data.size;
-                top  = win.screenTop  + 28;
+                left = screenLeft - size;
+                top  = screenTop  + 28;
                 break
             case 'right':
-                left = win.outerWidth + win.screenLeft;
-                top  = win.screenTop  + 28;
+                left = win.outerWidth + screenLeft;
+                top  = screenTop  + 28;
                 break
             case 'top':
-                left = win.screenLeft;
-                top  = win.screenTop - data.size + 78;
+                left = screenLeft;
+                top  = screenTop - size + 78;
                 break
         }
 
@@ -254,10 +255,9 @@ class WindowPosition extends Base {
      * @param {String} data.name
      */
     setDock(data) {
-        let me   = this,
-            dock = data.dock,
-            name = data.name,
-            win  = me.windows[name],
+        let me           = this,
+            {dock, name} = data,
+            win          = me.windows[name],
             dockDirectionChange, position;
 
         if (win) {

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

@@ -53,7 +53,7 @@ class Base extends CoreBase {
      */
     onConstructed() {
         this.attach();
-        super.onConstructed();
+        super.onConstructed()
     }
 
     /**
@@ -69,7 +69,7 @@ class Base extends CoreBase {
         element.dispatchEvent(event);
         this.lastEvent = sensorEvent;
 
-        return sensorEvent;
+        return sensorEvent
     }
 }