@schukai/monster 1.26.0 → 1.28.1

package/source/dom/resourcemanager.js

@@ -21,7 +21,7 @@ import {Script} from "./resource/script.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.1/dist/monster.js';
  * new Monster.DOM.ResourceManager()
  * </script>
  * ```
@@ -30,7 +30,7 @@ import {Script} from "./resource/script.js";
  *
  * ```
  * <script type="module">
- * import {Resource} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/dom/resourcemanager.js';
+ * import {Resource} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.1/dist/modules/dom/resourcemanager.js';
  * new ResourceManager()
  * </script>
  * ```

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,7 +15,7 @@ import {getDocumentTheme} from "./theme.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.1/dist/monster.js';
  * new Monster.DOM.Template()
  * </script>
  * ```
@@ -23,7 +24,7 @@ import {getDocumentTheme} from "./theme.js";
  *
  * ```
  * <script type="module">
- * import {Template} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/dom/template.js';
+ * import {Template} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.1/dist/modules/dom/template.js';
  * new Template()
  * </script>
  * ```
@@ -78,14 +79,14 @@ 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.26.0/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.1/dist/monster.js';
  * Monster.DOM.findDocumentTemplate()
  * </script>
  * ```
@@ -94,14 +95,14 @@ class Template extends Base {
  *
  * ```
  * <script type="module">
- * import {findTemplate} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/dom/template.js';
+ * import {findTemplate} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.1/dist/modules/dom/template.js';
  * findDocumentTemplate()
  * </script>
  * ```
  *
  * @example
  *
- * import { findDocumentTemplate } from "https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/dom/template.js";
+ * import { findDocumentTemplate } from "https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.1/dist/modules/dom/template.js";
  *
  * const template = document.createElement("template");
  * template.id = "myTemplate";
@@ -122,8 +123,8 @@ class Template extends Base {
  * document
  * .querySelector("html")
  * .setAttribute("data-monster-theme-name", "myTheme");
- * 
- * // now we don't get the default template, 
+ *
+ * // 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());
@@ -141,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)) {
@@ -153,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.26.0/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.1/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.26.0/dist/modules/dom/theme.js';
+ * import {Theme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.1/dist/modules/dom/theme.js';
  * console.log(new Theme())
  * </script>
  * ```
  *
  * @example
  *
- * import {getDocumentTheme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/dom/theme.js';
+ * import {getDocumentTheme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.28.1/dist/modules/dom/theme.js';
  *
  * const theme = getDocumentTheme();
  * console.log(theme.getName());