@schukai/monster 1.24.0 → 1.27.0

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.27.0/dist/monster.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.27.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.27.0/dist/monster.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.27.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.27.0/dist/monster.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.27.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}

package/source/dom/resource/script.js

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