@schukai/monster 1.24.0 → 1.25.0

package/source/dom/focusmanager.js

@@ -0,0 +1,251 @@
+'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 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.
+ *
+ * You can create the class via the monster namespace `new Monster.DOM.FocusManager()`.
+ *
+ * ```
+ * <script type="module">
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/focusmanager.js';
+ * new Monster.DOM.FocusManager()
+ * </script>
+ * ```
+ *
+ * Alternatively, you can also integrate this function individually.
+ *
+ * ```
+ * <script type="module">
+ * import {FocusManager} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/focusmanager.js';
+ * new FocusManager()
+ * </script>
+ * ```
+ *
+ * @since 1.25.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.DOM
+ * @throws {Error} unsupported locale
+ * @summary Manage 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";
 
@@ -21,7 +22,7 @@ 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';
+ * import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/locale.js';
  * console.log(new Monster.DOM.getLocaleOfDocument())
  * </script>
  * ```
@@ -30,7 +31,7 @@ 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';
+ * import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/locale.js';
  * console.log(new getLocaleOfDocument())
  * </script>
  * ```

package/source/dom/resource/data.js

@@ -0,0 +1,170 @@
+'use strict';
+
+/**
+ * @author schukai GmbH
+ */
+
+import {internalStateSymbol} from "../../constants.js";
+import {extend} from "../../data/extend.js";
+import {assignToNamespace, Monster} from "../../namespace.js";
+import {getGlobalFunction} from "../../types/global.js";
+import {
+    ATTRIBUTE_CLASS,
+    ATTRIBUTE_ERRORMESSAGE,
+    ATTRIBUTE_ID,
+    ATTRIBUTE_SRC,
+    ATTRIBUTE_TITLE,
+    ATTRIBUTE_TYPE,
+    TAG_SCRIPT
+} from "../constants.js";
+import {KEY_DOCUMENT, KEY_QUERY, referenceSymbol, Resource} from "../resource.js";
+
+
+/**
+ * This class is used by the resource manager to embed data.
+ *
+ * You can call the method via the monster namespace `new Monster.DOM.Resource.Data()`.
+ *
+ * ```
+ * <script type="module">
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/resource/data.js';
+ * new Monster.DOM.Resource.Data()
+ * </script>
+ * ```
+ *
+ * Alternatively, you can also integrate this function individually.
+ *
+ * ```
+ * <script type="module">
+ * import {Data} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/resource/data.js';
+ * new Data()
+ * </script>
+ * ```
+ *
+ * @since 1.25.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.DOM.Resource
+ * @summary A Data Resource class
+ */
+class Data extends Resource {
+
+    /**
+     * @property {string} mode=cors https://developer.mozilla.org/en-US/docs/Web/API/fetch
+     * @property {string} credentials=same-origin https://developer.mozilla.org/en-US/docs/Web/API/fetch
+     * @property {string} type=application/json {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type}
+     */
+    get defaults() {
+        return extend({}, super.defaults, {
+            mode: 'cors',
+            credentials: 'same-origin',
+            type: 'application/json',
+        })
+    }
+
+    /**
+     *
+     * @return {Monster.DOM.Resource.Data}
+     */
+    create() {
+        createElement.call(this);
+        return this;
+    }
+
+    /**
+     * This method appends the HTMLElement to the specified document
+     *
+     * throws {Error} target not found
+     * @return {Monster.DOM.Resource}
+     */
+    connect() {
+
+        if (!(this[referenceSymbol] instanceof HTMLElement)) {
+            this.create();
+        }
+
+        appendToDocument.call(this);
+        return this;
+    }
+
+    /**
+     * @return {string}
+     */
+    static getURLAttribute() {
+        return ATTRIBUTE_SRC
+    }
+
+}
+
+/**
+ * @private
+ * @return {Monster.DOM.Resource.Data}
+ */
+function createElement() {
+    const self = this;
+
+    const document = self.getOption(KEY_DOCUMENT);
+    self[referenceSymbol] = document.createElement(TAG_SCRIPT);
+
+    for (let key of [ATTRIBUTE_TYPE, ATTRIBUTE_ID, ATTRIBUTE_CLASS, ATTRIBUTE_TITLE]) {
+        if (self.getOption(key) !== undefined) {
+            self[referenceSymbol][key] = self.getOption(key);
+        }
+    }
+
+    return self;
+}
+
+
+/**
+ * @private
+ * @return {Promise}
+ * throws {Error} target not found
+ */
+function appendToDocument() {
+    const self = this;
+
+    const targetNode = document.querySelector(self.getOption(KEY_QUERY, 'head'))
+    if (!(targetNode instanceof HTMLElement)) {
+        throw new Error('target not found')
+    }
+
+    targetNode.appendChild(self[referenceSymbol]);
+
+    getGlobalFunction('fetch')(self.getOption(ATTRIBUTE_SRC), {
+        method: 'GET', // *GET, POST, PUT, DELETE, etc.
+        mode: self.getOption('mode', 'cors'), // no-cors, *cors, same-origin
+        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+        credentials: self.getOption('credentials', 'same-origin'), // include, *same-origin, omit
+        headers: {
+            'Accept': self.getOption('type', 'application/json')
+        },
+        redirect: 'follow', // manual, *follow, error
+        referrerPolicy: 'no-referrer', // no-referrer, 
+    }).then(response => {
+
+        return response.text()
+
+
+    }).then(text => {
+
+        const textNode = document.createTextNode(text);
+        self[referenceSymbol].appendChild(textNode);
+
+        self[internalStateSymbol].getSubject()['loaded'] = true;
+
+
+    }).catch(e => {
+        self[internalStateSymbol].setSubject({
+            loaded: true,
+            error: e.toString(),
+        })
+
+        targetNode.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.toString());
+    })
+
+    return self;
+}
+
+
+assignToNamespace('Monster.DOM.Resource', Data);
+export {Monster, Data}

package/source/dom/resource/link/stylesheet.js

@@ -0,0 +1,54 @@
+'use strict';
+
+/**
+ * @author schukai GmbH
+ */
+
+import {extend} from "../../../data/extend.js";
+import {assignToNamespace, Monster} from "../../../namespace.js";
+import {Link} from "../link.js";
+
+
+/**
+ * This class is used by the resource manager to embed external resources.
+ *
+ * You can call the method via the monster namespace `new Monster.DOM.Resource.Link.Stylesheet()`.
+ *
+ * ```
+ * <script type="module">
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/resource/link/stylesheet.js';
+ * new Monster.DOM.Resource.Link.Stylesheet()
+ * </script>
+ * ```
+ *
+ * Alternatively, you can also integrate this function individually.
+ *
+ * ```
+ * <script type="module">
+ * import {Style} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/resource/link/stylesheet.js';
+ * new Stylesheet()
+ * </script>
+ * ```
+ *
+ * @since 1.25.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.DOM.Resource
+ * @summary A Resource class
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
+ */
+class Stylesheet extends Link {
+
+    /**
+     * @property {string} rel {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-rel}
+     */
+    get defaults() {
+        return extend({}, super.defaults, {
+            rel: 'stylesheet'
+        })
+    }
+
+}
+
+
+assignToNamespace('Monster.DOM.Resource.Link', Stylesheet);
+export {Monster, Stylesheet}

package/source/dom/resource/link.js

@@ -0,0 +1,125 @@
+'use strict';
+
+/**
+ * @author schukai GmbH
+ */
+
+import {extend} from "../../data/extend.js";
+import {assignToNamespace, Monster} from "../../namespace.js";
+import {
+    ATTRIBUTE_CLASS,
+    ATTRIBUTE_HREF,
+    ATTRIBUTE_ID,
+    ATTRIBUTE_NONCE, ATTRIBUTE_SRC,
+    ATTRIBUTE_TITLE, ATTRIBUTE_TYPE,
+    TAG_LINK
+} from "../constants.js";
+import {KEY_DOCUMENT, referenceSymbol, Resource} from "../resource.js";
+
+
+/**
+ * This class is used by the resource manager to embed external resources.
+ *
+ * You can call the method via the monster namespace `new Monster.DOM.Resource.Link()`.
+ *
+ * ```
+ * <script type="module">
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/resource/link.js';
+ * new Monster.DOM.Resource.Link()
+ * </script>
+ * ```
+ *
+ * Alternatively, you can also integrate this function individually.
+ *
+ * ```
+ * <script type="module">
+ * import {Link} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.25.0/dist/modules/dom/resource/link.js';
+ * new Link()
+ * </script>
+ * ```
+ *
+ * @since 1.25.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.DOM.Resource
+ * @summary A Resource class
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
+ */
+class Link extends Resource {
+
+    /**
+     * @property {string} as {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-as}
+     * @property {string} crossOrigin=anonymous {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-crossorigin}
+     * @property {boolean} disabled
+     * @property {string} href {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-href}
+     * @property {string} hreflang {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-hreflang}
+     * @property {string} imagesizes {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-imagesizes}
+     * @property {string} imagesrcset {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-imagesrcset}
+     * @property {string} integrity {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-integrity}
+     * @property {string} media {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-media}
+     * @property {string} prefetch {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-prefetch}
+     * @property {string} referrerpolicy {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-referrerpolicy}
+     * @property {string} rel {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-rel}
+     * @property {string} type {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-type}
+     * @property {string} sizes {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-sizes}
+     * @property {string} nonce {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-nonce}
+     */
+    get defaults() {
+        return extend({}, super.defaults, {
+            as: undefined,
+            crossOrigin: 'anonymous',
+            disabled: undefined,
+            href: undefined,
+            hreflang: undefined,
+            imagesizes: undefined,
+            imagesrcset: undefined,
+            integrity: undefined,
+            media: undefined,
+            prefetch: undefined,
+            referrerpolicy: undefined,
+            rel: undefined,
+            sizes: undefined,
+            type: undefined,
+            nonce: undefined
+        })
+    }
+
+    /**
+     *
+     * @return {Monster.DOM.Resource.Link}
+     */
+    create() {
+        createElement.call(this);
+        return this;
+    }
+
+    /**
+     * @return {string}
+     */
+    static getURLAttribute() {
+        return ATTRIBUTE_HREF
+    }
+
+}
+
+/**
+ * @private
+ * @return {Monster.DOM.Resource.Link}
+ */
+function createElement() {
+    const self = this;
+
+    const document = self.getOption(KEY_DOCUMENT);
+    self[referenceSymbol] = document.createElement(TAG_LINK);
+
+    for (let key of ['as','crossOrigin','disabled','href','hreflang','imagesizes','imagesrcset','integrity','media','prefetch','referrerpolicy','sizes','rel','type',ATTRIBUTE_HREF,ATTRIBUTE_ID,ATTRIBUTE_CLASS,ATTRIBUTE_TITLE,ATTRIBUTE_NONCE]) {
+        if (self.getOption(key) !== undefined) {
+            self[referenceSymbol][key] = self.getOption(key);
+        }
+    }    
+    
+    return self;
+}
+
+
+assignToNamespace('Monster.DOM.Resource', Link);
+export {Monster, Link}