@schukai/monster 1.24.0 → 1.27.0

package/source/dom/constants.js

@@ -5,29 +5,29 @@ import {Monster} from '../namespace.js';
  * @author schukai GmbH
  */
 
+
 /**
+ * default theme
  * @memberOf Monster.DOM
- * @since 1.8.0
  * @type {string}
  */
-const ATTRIBUTE_PREFIX = 'data-monster-';
+const DEFAULT_THEME = 'monster';
 
 /**
- * This is the name of the attribute to pass options to a control
- *
  * @memberOf Monster.DOM
  * @since 1.8.0
  * @type {string}
  */
-const ATTRIBUTE_OPTIONS = ATTRIBUTE_PREFIX + 'options';
-
+const ATTRIBUTE_PREFIX = 'data-monster-';
 
 /**
- * default theme
+ * This is the name of the attribute to pass options to a control
+ *
  * @memberOf Monster.DOM
+ * @since 1.8.0
  * @type {string}
  */
-const DEFAULT_THEME = 'monster';
+const ATTRIBUTE_OPTIONS = ATTRIBUTE_PREFIX + 'options';
 
 /**
  * @memberOf Monster.DOM
@@ -84,6 +84,13 @@ const ATTRIBUTE_UPDATER_REMOVE = ATTRIBUTE_PREFIX + 'remove';
  */
 const ATTRIBUTE_UPDATER_BIND = ATTRIBUTE_PREFIX + 'bind';
 
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.27.0
+ */
+const ATTRIBUTE_TEMPLATE_PREFIX = ATTRIBUTE_PREFIX + 'template-prefix';
+
 /**
  * @memberOf Monster.DOM
  * @type {string}
@@ -126,9 +133,278 @@ const ATTRIBUTE_ERRORMESSAGE = ATTRIBUTE_PREFIX + 'error';
  */
 const objectUpdaterLinkSymbol = Symbol('monsterUpdater');
 
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const TAG_SCRIPT = 'script';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const TAG_STYLE = 'style';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const TAG_LINK = 'link';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+
+const ATTRIBUTE_ID = 'id';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+
+const ATTRIBUTE_CLASS = 'class';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_TITLE = 'title';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_SRC = 'src';
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_HREF = 'href';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_TYPE = 'type';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_NONCE = 'nonce';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_TRANSLATE = 'translate';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_TABINDEX = 'tabindex';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_SPELLCHECK = 'spellcheck';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_SLOT = 'slot';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_PART = 'part';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_LANG = 'lang';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_ITEMTYPE = 'itemtype';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_ITEMSCOPE = 'itemscope';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_ITEMREF = 'itemref';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_ITEMID = 'itemid';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_ITEMPROP = 'itemprop';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_IS = 'is';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_INPUTMODE = 'inputmode';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_ACCESSKEY = 'accesskey';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_AUTOCAPITALIZE = 'autocapitalize';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_AUTOFOCUS = 'autofocus';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_CONTENTEDITABLE = 'contenteditable';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_DIR = 'dir';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_DRAGGABLE = 'draggable';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_ENTERKEYHINT = 'enterkeyhint';
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_EXPORTPARTS = 'exportparts';
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_HIDDEN = 'hidden';
+
 
 export {
     Monster,
+    ATTRIBUTE_HIDDEN,
+    ATTRIBUTE_EXPORTPARTS,
+    ATTRIBUTE_ENTERKEYHINT,
+    ATTRIBUTE_DRAGGABLE,
+    ATTRIBUTE_DIR,
+    ATTRIBUTE_CONTENTEDITABLE,
+    ATTRIBUTE_AUTOFOCUS,
+    ATTRIBUTE_AUTOCAPITALIZE,
+    ATTRIBUTE_ACCESSKEY,
+    TAG_SCRIPT,
+    TAG_LINK,
+    ATTRIBUTE_INPUTMODE,
+    ATTRIBUTE_IS,
+    ATTRIBUTE_ITEMPROP,
+    ATTRIBUTE_ITEMID,
+    ATTRIBUTE_ITEMREF,
+    ATTRIBUTE_ITEMSCOPE,
+    TAG_STYLE,
+    ATTRIBUTE_ITEMTYPE,
+    ATTRIBUTE_HREF,
+    ATTRIBUTE_LANG,
+    ATTRIBUTE_PART,
+    ATTRIBUTE_SLOT,
+    ATTRIBUTE_SPELLCHECK,
+    ATTRIBUTE_SRC,
+    ATTRIBUTE_TABINDEX,
+    ATTRIBUTE_TRANSLATE,
+    ATTRIBUTE_NONCE,
+    ATTRIBUTE_TYPE,
+    ATTRIBUTE_TITLE,
+    ATTRIBUTE_CLASS,
+    ATTRIBUTE_ID,
     ATTRIBUTE_PREFIX,
     ATTRIBUTE_OPTIONS,
     DEFAULT_THEME,
@@ -145,5 +421,6 @@ export {
     ATTRIBUTE_DISABLED,
     ATTRIBUTE_ERRORMESSAGE,
     ATTRIBUTE_VALUE,
-    objectUpdaterLinkSymbol
-}
+    objectUpdaterLinkSymbol,
+    ATTRIBUTE_TEMPLATE_PREFIX
+} 

package/source/dom/customcontrol.js

@@ -30,7 +30,7 @@ const attachedInternalSymbol = Symbol('attachedInternal');
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/dom/customcontrol.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/monster.js';
  * document.createElement('monster-')
  * </script>
  * ```

package/source/dom/customelement.js

@@ -96,7 +96,7 @@ const attributeObserverSymbol = Symbol('attributeObserver');
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/dom/customelement.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/monster.js';
  * document.createElement('monster-')
  * </script>
  * ```

package/source/dom/events.js

@@ -13,7 +13,7 @@ import {getDocument} from "./util.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/dom/events.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/monster.js';
  * console.log(new Monster.DOM.fireEvent())
  * </script>
  * ```
@@ -22,7 +22,7 @@ import {getDocument} from "./util.js";
  *
  * ```
  * <script type="module">
- * import {fireEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/dom/events.js';
+ * import {fireEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/events.js';
  * console.log(fireEvent())
  * </script>
  * ```
@@ -73,8 +73,8 @@ function fireEvent(element, type) {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/dom/events.js';
- * console.log(new Monster.DOM.findTargetElementFromEvent())
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/monster.js';
+ * new Monster.DOM.findTargetElementFromEvent()
  * </script>
  * ```
  *
@@ -82,8 +82,8 @@ function fireEvent(element, type) {
  *
  * ```
  * <script type="module">
- * import {findTargetElementFromEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/dom/events.js';
- * console.log(findTargetElementFromEvent())
+ * import {findTargetElementFromEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/events.js';
+ * findTargetElementFromEvent()
  * </script>
  * ```
  *
@@ -105,7 +105,6 @@ function findTargetElementFromEvent(event, attributeName, attributeValue) {
     }
 
     const path = event.composedPath();
-    const element = path?.[0];
 
     // closest cannot be used here, because closest is not correct for slotted elements
     if (isArray(path)) {

package/source/dom/focusmanager.js

@@ -0,0 +1,250 @@
+'use strict';
+
+
+/**
+ * @author schukai GmbH
+ */
+
+
+import {extend} from "../data/extend.js";
+import {assignToNamespace} from "../namespace.js";
+import {BaseWithOptions} from "../types/basewithoptions.js";
+import {getGlobalObject} from "../types/global.js";
+import {isArray} from "../types/is.js";
+import {Stack} from "../types/stack.js";
+import {validateInstance, validateString} from "../types/validate.js";
+
+/**
+ * @private
+ * @type {string}
+ */
+const KEY_DOCUMENT = 'document';
+
+/**
+ * @private
+ * @type {string}
+ */
+const KEY_CONTEXT = 'context';
+
+
+/**
+ * @private
+ * @type {Symbol}
+ */
+const stackSymbol = Symbol('stack');
+
+
+/**
+ * With the focusmanager the focus can be stored in a document, recalled and moved.
+ *
+ * You can create the object via the monster namespace `new Monster.DOM.FocusManager()`.
+ *
+ * ```
+ * <script type="module">
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/monster.js';
+ * new Monster.DOM.FocusManager()
+ * </script>
+ * ```
+ *
+ * Alternatively, you can also integrate this object individually.
+ *
+ * ```
+ * <script type="module">
+ * import {FocusManager} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/focusmanager.js';
+ * new FocusManager()
+ * </script>
+ * ```
+ *
+ * @since 1.25.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.DOM
+ * @throws {Error} unsupported locale
+ * @summary Handle the focus
+ */
+class FocusManager extends BaseWithOptions {
+
+    /**
+     *
+     * @param {Object|undefined} options
+     */
+    constructor(options) {
+        super(options);
+        validateInstance(this.getOption(KEY_DOCUMENT), HTMLDocument);
+
+        this[stackSymbol] = new Stack();
+    }
+
+    /**
+     * @property {HTMLDocument} document the document object into which the node is to be appended
+     */
+    get defaults() {
+        return extend({}, super.defaults, {
+            [KEY_DOCUMENT]: getGlobalObject('document'),
+            [KEY_CONTEXT]: undefined,
+        })
+    }
+
+    /**
+     * Remembers the current focus on a stack.
+     * Several focus can be stored.
+     *
+     * @return {Monster.DOM.FocusManager}
+     */
+    storeFocus() {
+
+        const active = this.getActive();
+        if (active instanceof Node) {
+            this[stackSymbol].push(active)
+        }
+        return this;
+    }
+
+    /**
+     * The last focus on the stack is set again
+     *
+     * @return {Monster.DOM.FocusManager}
+     */
+    restoreFocus() {
+
+        const last = this[stackSymbol].pop();
+        if (last instanceof Node) {
+            this.focus(last);
+        }
+
+        return this;
+    }
+
+    /**
+     *
+     * @param {Node} element
+     * @param {boolean} preventScroll
+     * @throws {TypeError} value is not an instance of
+     * @return {Monster.DOM.FocusManager}
+     */
+    focus(element, preventScroll) {
+
+        validateInstance(element, Node)
+
+        element.focus({
+            preventScroll: preventScroll ?? false
+        })
+
+        return this;
+    }
+
+    /**
+     *
+     * @return {Element}
+     */
+    getActive() {
+        return this.getOption(KEY_DOCUMENT).activeElement;
+    }
+
+    /**
+     * Select all elements that can be focused
+     *
+     * @param {string|undefined} query
+     * @return {array}
+     * @throws {TypeError} value is not an instance of
+     */
+    getFocusable(query) {
+
+        let contextElement = this.getOption(KEY_CONTEXT);
+        if (contextElement === undefined) {
+            contextElement = this.getOption(KEY_DOCUMENT);
+        }
+
+        validateInstance(contextElement, Node)
+
+        if (query !== undefined) {
+            validateString(query);
+        }
+
+        return [...contextElement.querySelectorAll(
+            'details, button, input, [tabindex]:not([tabindex="-1"]), select, textarea, a[href], body'
+        )].filter((element) => {
+
+            if (query !== undefined && !element.matches(query)) {
+                return false;
+            }
+
+            if (element.hasAttribute('disabled')) return false;
+            if (element.getAttribute("aria-hidden") === 'true') return false;
+
+            const rect = element.getBoundingClientRect();
+            if(rect.width===0) return false;
+            if(rect.height===0) return false;
+
+            return true;
+        });
+    }
+
+    /**
+     * @param {string} query
+     * @return {Monster.DOM.FocusManager}
+     */
+    focusNext(query) {
+
+        const current = this.getActive();
+        const focusable = this.getFocusable(query);
+
+        if (!isArray(focusable) || focusable.length === 0) {
+            return this;
+        }
+
+        if (current instanceof Node) {
+            let index = focusable.indexOf(current);
+
+            if (index > -1) {
+                this.focus(focusable[index + 1] || focusable[0]);
+            } else {
+                this.focus(focusable[0]);
+            }
+        } else {
+            this.focus(focusable[0])
+        }
+
+        return this;
+    }
+
+    /**
+     * @param {string} query
+     * @return {Monster.DOM.FocusManager}
+     */
+    focusPrev(query) {
+
+        const current = this.getActive();
+        const focusable = this.getFocusable(query);
+
+        if (!isArray(focusable) || focusable.length === 0) {
+            return this;
+        }
+
+        if (current instanceof Node) {
+            let index = focusable.indexOf(current);
+
+            if (index > -1) {
+                this.focus(focusable[index - 1] || focusable[focusable.length - 1]);
+            } else {
+                this.focus(focusable[focusable.length - 1]);
+            }
+        } else {
+            this.focus(focusable[focusable.length - 1])
+        }
+
+        return this;
+    }
+
+
+}
+
+
+assignToNamespace('Monster.DOM', FocusManager);
+export {FocusManager}
+
+
+
+
+
+
+

package/source/dom/locale.js

@@ -1,9 +1,10 @@
 'use strict';
 
-import {parseLocale} from "../i18n/locale.js";
 /**
  * @author schukai GmbH
  */
+
+import {parseLocale} from "../i18n/locale.js";
 import {assignToNamespace, Monster} from '../namespace.js';
 import {getDocument} from "./util.js";
 
@@ -16,13 +17,17 @@ const DEFAULT_LANGUAGE = 'en';
 /**
  * With this function you can read the language version set by the document.
  * For this the attribute `lang` in the html tag is read. If no attribute is set, `en` is used as default.
+ * 
+ * ```html
+ * <html lang="en">
+ * ```
  *
  * You can call the function via the monster namespace `new Monster.DOM.getLocaleOfDocument()`.
  *
  * ```
  * <script type="module">
- * import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/dom/locale.js';
- * console.log(new Monster.DOM.getLocaleOfDocument())
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/monster.js';
+ * new Monster.DOM.getLocaleOfDocument()
  * </script>
  * ```
  *
@@ -30,8 +35,8 @@ const DEFAULT_LANGUAGE = 'en';
  *
  * ```
  * <script type="module">
- * import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/dom/locale.js';
- * console.log(new getLocaleOfDocument())
+ * import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/locale.js';
+ * new getLocaleOfDocument()
  * </script>
  * ```
  *