@schukai/monster 1.24.0 → 1.27.0

package/source/dom/resource.js

@@ -0,0 +1,268 @@
+'use strict';
+
+/**
+ * @author schukai GmbH
+ */
+
+import {internalStateSymbol, internalSymbol,} from "../constants.js";
+import {extend} from "../data/extend.js";
+import {assignToNamespace, Monster} from "../namespace.js";
+import {BaseWithOptions} from "../types/basewithoptions.js";
+import {getGlobalObject} from "../types/global.js";
+import {ID} from "../types/id.js";
+import {isString} from "../types/is.js";
+import {Observer} from "../types/observer.js";
+import {ProxyObserver} from "../types/proxyobserver.js";
+import {ATTRIBUTE_CLASS, ATTRIBUTE_ID, ATTRIBUTE_TITLE} from "./constants.js";
+
+
+/**
+ * @private
+ * @type {string}
+ */
+export const KEY_DOCUMENT = 'document';
+
+/**
+ * @private
+ * @type {string}
+ */
+export const KEY_QUERY = 'query';
+
+/**
+ * @private
+ * @type {string}
+ */
+export const KEY_TIMEOUT = 'timeout';
+
+/**
+ * @private
+ * @type {symbol}
+ */
+export const referenceSymbol = Symbol('reference');
+
+/**
+ * This class is the base class for all resources to be loaded.
+ *
+ * You can call the method via the monster namespace `new Monster.DOM.Resource()`.
+ *
+ * ```
+ * <script type="module">
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/monster.js';
+ * new Monster.DOM.Resource()
+ * </script>
+ * ```
+ *
+ * Alternatively, you can also integrate this function individually.
+ *
+ * ```
+ * <script type="module">
+ * import {Resource} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/resource.js';
+ * new Resource()
+ * </script>
+ * ```
+ *
+ * @since 1.25.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.DOM
+ * @summary A Resource class
+ */
+class Resource extends BaseWithOptions {
+
+    /**
+     *
+     * @param {Object|undefined} options
+     */
+    constructor(options) {
+        super(options);
+
+        let uri = this.getOption(this.constructor.getURLAttribute());
+
+        if (uri === undefined) {
+            throw new Error('missing source')
+        } else if (uri instanceof URL) {
+            uri = uri.toString();
+        } else if (!isString(uri)) {
+            throw new Error('unsupported url type')
+        }
+
+        this[internalSymbol][this.constructor.getURLAttribute()] = uri;
+        this[internalStateSymbol] = new ProxyObserver({
+            loaded: false,
+            error: undefined,
+        })
+
+        this[referenceSymbol] = undefined;
+
+    }
+
+    /**
+     * @return {boolean}
+     */
+    isConnected() {
+
+        if (this[referenceSymbol] instanceof HTMLElement) {
+            return this[referenceSymbol].isConnected;
+        }
+
+        return false;
+    }
+
+    /**
+     * This method is overridden by the special classes and creates the DOM object.
+     * This method is also called implicitly, if not yet done explicitly, by calling `connect()`.
+     *
+     * @throws {Error} this method must be implemented by derived classes
+     * @return {Monster.DOM.Resource}
+     */
+    create() {
+        throw new Error("this method must be implemented by derived classes");
+    }
+
+    /**
+     * This method appends the HTMLElement to the specified document.
+     * If the element has not yet been created, `create()` is called implicitly.
+     *
+     * throws {Error} target not found
+     * @return {Monster.DOM.Resource}
+     */
+    connect() {
+
+        if (!(this[referenceSymbol] instanceof HTMLElement)) {
+            this.create();
+        }
+
+        appendToDocument.call(this);
+        return this;
+    }
+
+    /**
+     * @property {Document} document the document object into which the node is to be appended
+     * @property {string} src/href url to the corresponding resource
+     * @property {string} query defines the location where the resource is to be hooked into the dom.
+     * @property {string} id element attribute id
+     * @property {string} title element attribute title
+     * @property {string} class element attribute class
+     * @property {int} timeout timeout
+     */
+    get defaults() {
+        return extend({}, super.defaults, {
+            [this.constructor.getURLAttribute()]: undefined,
+            [KEY_DOCUMENT]: getGlobalObject('document'),
+            [KEY_QUERY]: 'head',
+            [KEY_TIMEOUT]: 10000,
+            [ATTRIBUTE_ID]: (new ID('resource')).toString(),
+            [ATTRIBUTE_CLASS]: undefined,
+            [ATTRIBUTE_TITLE]: undefined
+        })
+    }
+
+    /**
+     * With `available()` you can check if a resource is available.
+     * This is the case when the tag is included and the resource is loaded.
+     *
+     * @return {Promise}
+     */
+    available() {
+        const self = this;
+        if (!(self[referenceSymbol] instanceof HTMLElement)) {
+            return Promise.reject('no element')
+        }
+
+        if (!self.isConnected()) {
+            return Promise.reject('element not connected')
+        }
+
+        if (self[internalStateSymbol].getSubject()['loaded'] === true) {
+
+            if (self[internalStateSymbol].getSubject()['error'] !== undefined) {
+                return Promise.reject(self[internalStateSymbol].getSubject()['error']);
+            }
+
+            return Promise.resolve();
+
+        }
+
+        return new Promise(function (resolve, reject) {
+
+            const timeout = setTimeout(() => {
+                reject('timeout');
+            }, self.getOption('timeout'))
+
+            const observer = new Observer(() => {
+                clearTimeout(timeout);
+                self[internalStateSymbol].detachObserver(observer);
+                resolve();
+            })
+
+            self[internalStateSymbol].attachObserver(observer);
+
+        });
+
+    };
+
+    /**
+     * @return {string}
+     */
+    static getURLAttribute() {
+        throw new Error("this method must be implemented by derived classes");
+    }
+
+}
+
+
+/**
+ * @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')
+    }
+
+    addEvents.call(self);
+    targetNode.appendChild(self[referenceSymbol]);
+
+    return self;
+}
+
+/**
+ * @private
+ * @return {addEvents}
+ */
+function addEvents() {
+    const self = this;
+
+    const onError = () => {
+
+        self[referenceSymbol].removeEventListener('error', onError);
+        self[referenceSymbol].removeEventListener('load', onLoad);
+
+        self[internalStateSymbol].setSubject({
+            loaded: true,
+            error: self[referenceSymbol][self.constructor.getURLAttribute()] + ' is not available',
+        })
+
+        return;
+    }
+
+    const onLoad = () => {
+        self[referenceSymbol].removeEventListener('error', onError);
+        self[referenceSymbol].removeEventListener('load', onLoad);
+        self[internalStateSymbol].getSubject()['loaded'] = true;
+        return;
+    }
+
+    self[referenceSymbol].addEventListener('load', onLoad, false);
+    self[referenceSymbol].addEventListener('error', onError, false);
+
+    return self;
+
+}
+
+
+assignToNamespace('Monster.DOM', Resource);
+export {Monster, Resource}

package/source/dom/resourcemanager.js

@@ -0,0 +1,214 @@
+'use strict';
+
+/**
+ * @author schukai GmbH
+ */
+
+import {extend} from "../data/extend.js";
+import {assignToNamespace, Monster} from "../namespace.js";
+import {BaseWithOptions} from "../types/basewithoptions.js";
+import {getGlobalObject} from "../types/global.js";
+import {isArray} from "../types/is.js";
+import {ATTRIBUTE_HREF, ATTRIBUTE_SRC} from "./constants.js";
+import {Resource} from "./resource.js";
+import {Data} from "./resource/data.js";
+import {Stylesheet} from "./resource/link/stylesheet.js";
+import {Script} from "./resource/script.js";
+
+
+/**
+ * You can call the method via the monster namespace `new Monster.DOM.ResourceManager()`.
+ *
+ * ```
+ * <script type="module">
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/monster.js';
+ * new Monster.DOM.ResourceManager()
+ * </script>
+ * ```
+ *
+ * Alternatively, you can also integrate this function individually.
+ *
+ * ```
+ * <script type="module">
+ * import {Resource} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/resourcemanager.js';
+ * new ResourceManager()
+ * </script>
+ * ```
+ *
+ * @since 1.25.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.DOM
+ * @summary A Resource class
+ */
+class ResourceManager extends BaseWithOptions {
+
+    /**
+     *
+     * @param {Object} options
+     * throw {Error} unsupported document type
+     */
+    constructor(options) {
+        super(options);
+
+        if (!(this.getOption('document') instanceof Document)) {
+            throw new Error('unsupported document type')
+        }
+
+
+    }
+
+    /**
+     * @property {string} baseurl
+     */
+    getBaseURL() {
+        this.getOption('document')?.baseURL;
+    }
+
+    /**
+     *
+     * @property {HTMLDocument} document=document Document
+     * @property {Object} resources
+     * @property {Array} resources.scripts=[] array with {@link Monster.DOM.Resource.Script} objects
+     * @property {Array} resources.stylesheets=[] array with {@link Monster.DOM.Resource.Link.Stylesheet} objects
+     * @property {Array} resources.data=[] array with {@link Monster.DOM.Resource.Data} objects
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            document: getGlobalObject('document'),
+            resources: {
+                scripts: [],
+                stylesheets: [],
+                data: []
+            }
+        })
+    }
+
+    /**
+     * Append Tags to DOM
+     *
+     * @return {Monster.DOM.ResourceManager}
+     * @throws {Error} unsupported resource definition
+     */
+    connect() {
+        runResourceMethod.call(this, 'connect');
+        return this;
+    }
+
+    /**
+     * Check if available
+     *
+     * @return {Promise}
+     * @throws {Error} unsupported resource definition
+     */
+    available() {
+        return Promise.all(runResourceMethod.call(this, 'available'));
+    }
+
+    /**
+     * Add a script
+     *
+     * @param {string|URL} url
+     * @param [Object|undefined} options
+     * @return {Monster.DOM.ResourceManager}
+     * @see Monster.DOM.Resource.Script
+     */
+    addScript(url, options) {
+        return addResource.call(this, 'scripts', url, options);
+    }
+
+
+    /**
+     * Add Stylesheet
+     *
+     * @param {string|URL} url
+     * @param [Object|undefined} options
+     * @return {Monster.DOM.ResourceManager}
+     * @see Monster.DOM.Resource.Link.Stylesheet
+     */
+    addStylesheet(url, options) {
+        return addResource.call(this, 'stylesheets', url, options);
+    }
+
+    /**
+     * Add Data Tag
+     *
+     * @param {string|URL} url
+     * @param [Object|undefined} options
+     * @return {Monster.DOM.ResourceManager}
+     * @see Monster.DOM.Resource.Data
+     */
+    addData(url, options) {
+        return addResource.call(this, 'data', url, options);
+    }
+
+
+}
+
+/**
+ * @private
+ * @param {string} method
+ * @return {Array}
+ */
+function runResourceMethod(method) {
+    const self = this;
+
+    const result = [];
+
+    for (const type of ['scripts', 'stylesheets', 'data']) {
+        const resources = self.getOption('resources.' + type);
+        if (!isArray(resources)) {
+            continue;
+        }
+
+        for (const resource of resources) {
+            if (!(resource instanceof Resource)) {
+                throw new Error('unsupported resource definition')
+            }
+
+            result.push(resource[method]());
+        }
+
+    }
+
+    return result;
+}
+
+/**
+ *
+ * @param {string} type
+ * @param {string|URL} url
+ * @param [Object|undefined} options
+ * @return {Monster.DOM.ResourceManager}
+ * @private
+ */
+function addResource(type, url, options) {
+    const self = this;
+
+    if (url instanceof URL) {
+        url = url.toString();
+    }
+
+    options = options || {}
+
+    let resource;
+    switch (type) {
+        case 'scripts':
+            resource = new Script(extend({}, options, {[ATTRIBUTE_SRC]: url}))
+            break;
+        case 'stylesheets':
+            resource = new Stylesheet(extend({}, options, {[ATTRIBUTE_HREF]: url}))
+            break;
+        case 'data':
+            resource = new Data(extend({}, options, {[ATTRIBUTE_SRC]: url}))
+            break;
+        default:
+            throw new Error('unsupported type ' + type)
+    }
+
+    (self.getOption('resources')?.[type]).push(resource);
+    return self;
+}
+
+
+assignToNamespace('Monster.DOM', ResourceManager);
+export {Monster, ResourceManager}

package/source/dom/template.js

@@ -7,6 +7,7 @@ import {assignToNamespace, Monster} from '../namespace.js';
 import {Base} from '../types/base.js';
 import {getGlobalFunction, getGlobalObject} from '../types/global.js';
 import {validateInstance, validateString} from "../types/validate.js";
+import {ATTRIBUTE_TEMPLATE_PREFIX} from "./constants.js";
 import {getDocumentTheme} from "./theme.js";
 
 /**
@@ -14,8 +15,8 @@ import {getDocumentTheme} from "./theme.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/dom/template.js';
- * console.log(new Monster.DOM.Template())
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/monster.js';
+ * new Monster.DOM.Template()
  * </script>
  * ```
  *
@@ -23,8 +24,8 @@ import {getDocumentTheme} from "./theme.js";
  *
  * ```
  * <script type="module">
- * import {Template} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/dom/template.js';
- * console.log(new Template())
+ * import {Template} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/template.js';
+ * new Template()
  * </script>
  * ```
  *
@@ -70,7 +71,7 @@ class Template extends Base {
 /**
  * This method loads a template with the given ID and returns it.
  *
- * To do this, it first fetches the theme of the document and looks for the `data-monster-theme-name` attribute in the HTML tag.
+ * To do this, it first reads the theme of the document and looks for the `data-monster-theme-name` attribute in the HTML tag.
  *
  * ```
  * <html data-monster-theme-name="my-theme">
@@ -78,15 +79,15 @@ class Template extends Base {
  *
  * If no theme was specified, the default theme is `monster`.
  *
- * Now it is looked if there is a template with the given ID and theme `id-theme` and if yes it is returned. 
+ * Now it is looked if there is a template with the given ID and theme `id-theme` and if yes it is returned.
  * If there is no template a search for a template with the given ID `id` is done. If this is also not found, an error is thrown.
  *
  * You can call the method via the monster namespace `Monster.DOM.findDocumentTemplate()`.
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/dom/template.js';
- * console.log(Monster.DOM.findDocumentTemplate())
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/monster.js';
+ * Monster.DOM.findDocumentTemplate()
  * </script>
  * ```
  *
@@ -94,11 +95,41 @@ class Template extends Base {
  *
  * ```
  * <script type="module">
- * import {findTemplate} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/dom/template.js';
- * console.log(findDocumentTemplate())
+ * import {findTemplate} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/template.js';
+ * findDocumentTemplate()
  * </script>
  * ```
  *
+ * @example
+ *
+ * import { findDocumentTemplate } from "https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/template.js";
+ *
+ * const template = document.createElement("template");
+ * template.id = "myTemplate";
+ * template.innerHTML = "<p>my default template</p>";
+ * document.body.appendChild(template);
+ *
+ * const themedTemplate = document.createElement("template");
+ * themedTemplate.id = "myTemplate-myTheme";
+ * themedTemplate.innerHTML = "<p>my themed template</p>";
+ * document.body.appendChild(themedTemplate);
+ *
+ * // loads the temple and since no theme is set the default template
+ * const template1 = findDocumentTemplate("myTemplate");
+ * console.log(template1.createDocumentFragment());
+ * // ↦ '<p>my default template</p>'
+ *
+ * // now we set our own theme
+ * document
+ * .querySelector("html")
+ * .setAttribute("data-monster-theme-name", "myTheme");
+ *
+ * // now we don't get the default template,
+ * // but the template with the theme in the id
+ * const template2 = findDocumentTemplate("myTemplate");
+ * console.log(template2.createDocumentFragment());
+ * // ↦ '<p>my themed template</p>'
+ *
  * @param {string} id
  * @param {Node} currentNode
  * @return {Monster.DOM.Template}
@@ -111,9 +142,22 @@ class Template extends Base {
 function findDocumentTemplate(id, currentNode) {
     validateString(id);
 
+    const document = getGlobalObject('document');
+    const HTMLTemplateElement = getGlobalFunction('HTMLTemplateElement');
+    const DocumentFragment = getGlobalFunction('DocumentFragment');
+    const Document = getGlobalFunction('Document');
+
+
+    let prefixID;
+
     if (!(currentNode instanceof Document || currentNode instanceof DocumentFragment)) {
 
         if (currentNode instanceof Node) {
+
+            if (currentNode.hasAttribute(ATTRIBUTE_TEMPLATE_PREFIX)) {
+                prefixID = currentNode.getAttribute(ATTRIBUTE_TEMPLATE_PREFIX)
+            }
+
             currentNode = currentNode.getRootNode();
 
             if (!(currentNode instanceof Document || currentNode instanceof DocumentFragment)) {
@@ -123,27 +167,53 @@ function findDocumentTemplate(id, currentNode) {
         }
 
         if (!(currentNode instanceof Document || currentNode instanceof DocumentFragment)) {
-            currentNode = getGlobalObject('document');
+            currentNode = document;
         }
     }
 
-    const HTMLTemplateElement = getGlobalFunction('HTMLTemplateElement');
-
+    let template;
     let theme = getDocumentTheme()
+
+    if (prefixID) {
+        let themedPrefixID = prefixID + '-' + id + '-' + theme.getName();
+
+        // current + themedPrefixID
+        template = currentNode.getElementById(themedPrefixID);
+        if (template instanceof HTMLTemplateElement) {
+            return new Template(template);
+        }
+
+        // document + themedPrefixID
+        template = document.getElementById(themedPrefixID);
+        if (template instanceof HTMLTemplateElement) {
+            return new Template(template);
+        }
+    }
+
     let themedID = id + '-' + theme.getName();
 
-    let template = currentNode.getElementById(themedID);
+    // current + themedID
+    template = currentNode.getElementById(themedID);
     if (template instanceof HTMLTemplateElement) {
         return new Template(template);
     }
 
+    // document + themedID
+    template = document.getElementById(themedID);
+    if (template instanceof HTMLTemplateElement) {
+        return new Template(template);
+    }
+
+    // current + ID
     template = currentNode.getElementById(id);
     if (template instanceof HTMLTemplateElement) {
         return new Template(template);
     }
 
-    if (currentNode !== getGlobalObject('document')) {
-        return findDocumentTemplate(id)
+    // document + ID
+    template = document.getElementById(id);
+    if (template instanceof HTMLTemplateElement) {
+        return new Template(template);
     }
 
     throw new Error("template " + id + " not found.")

package/source/dom/theme.js

@@ -15,7 +15,7 @@ import {ATTRIBUTE_THEME_NAME, DEFAULT_THEME} from "./constants.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/dom/theme.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/monster.js';
  * console.log(new Monster.DOM.Theme())
  * </script>
  * ```
@@ -24,14 +24,14 @@ import {ATTRIBUTE_THEME_NAME, DEFAULT_THEME} from "./constants.js";
  *
  * ```
  * <script type="module">
- * import {Theme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/dom/theme.js';
+ * import {Theme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/theme.js';
  * console.log(new Theme())
  * </script>
  * ```
  *
  * @example
  *
- * import {getDocumentTheme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.24.0/dist/modules/dom/theme.js';
+ * import {getDocumentTheme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.27.0/dist/modules/dom/theme.js';
  *
  * const theme = getDocumentTheme();
  * console.log(theme.getName());