progress

src/Core/IUI.js

@@ -14,6 +14,9 @@ export class IUI {
 	static modules = {};
 	static registry = [];
 
+	static $iuiElement = this.module(IUIElement, "element");
+
+
 	static format(input) {
         if (typeof input == "string" || input instanceof String) {
             let template = document.createElement("template");
@@ -112,7 +115,7 @@ export class IUI {
 		IUI.registry.push(o);
 	}
 
-	static  remove(id)
+	static remove(id)
 	{
 		for(var i = 0; i < IUI.registry.length; i++)
 			if (IUI.registry[i].el.id == id)
@@ -122,9 +125,9 @@ export class IUI {
 			}
 	}
 
-	static module(objectClass)
+	static module(objectClass, name = null)
     {
-		let moduleName = objectClass.moduleName;
+		let moduleName = name ?? objectClass.moduleName;
 
         if (IUI.modules[moduleName] === undefined) {
             customElements.define("i-" + moduleName, objectClass);

src/Router/Router.js

@@ -256,6 +256,7 @@ export default IUI.module(
     }
 
     create() {
+      super.create();
       // save origin
       this.origin = window.location.pathname + window.location.search;
     }
@@ -263,6 +264,7 @@ export default IUI.module(
     get base() {
       return this.getAttribute("base") || "";
     }
+    
     destroy() {
       console.log("Destroyed", this);
     }

src/Router/Target.js

@@ -1,26 +1,58 @@
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 import Route from "./Route.js";
+import Layout from '../Data/Layout.js';
 
 export default IUI.module(class Target extends IUIElement {
+
+    $messageElement;
+    $progressElement;
+
     constructor(properties) {
         super(IUI.extend(properties, { cssClass: 'target' }));
 
         this._register("show");
         this._register("hide");
-
     }
 
-    setLoading(value)
-    {
+    setLoading(value) {
         if (value)
-            this.classList.add(this.cssClass + "-loading");
+            this.$loadingElement.classList.add(this.cssClass + "-loading-visible");
         else
-            this.classList.remove(this.cssClass + "-loading");
+            this.$loadingElement.classList.remove(this.cssClass + "-loading-visible");
     }
 
+
+    async setMessage(message) {
+        await this.$messageElement.setData({ message });
+    }
+
+    async setProgress(progress, max) {
+        await this.$progressElement.setData({ progress, max });
+    }
+
+
     create() {
 
+        this.$loadingElement = document.createElement("div");
+        this.$loadingElement.className = this.cssClass + "-loading";
+        this.$loadingElement.setAttribute(":data", "{progress: 0, max: 0, message: '...'}");
+
+        this.appendChild(this.$loadingElement);
+
+        // get collection
+        let layout = Layout.get(this, "i-element", true, true);
+
+        for (let name in layout) {
+            if (name == "progress") {
+                this.$progressElement = layout[name].node;
+                this.$loadingElement.appendChild(this.$progressElement);
+            }
+            else if (name = "message") {
+                this.$messageElement = layout[name].node;
+                this.$loadingElement.appendChild(this.$messageElement);
+            }
+        }
     }
 
     show(route, previous) {
@@ -46,7 +78,7 @@ export default IUI.module(class Target extends IUIElement {
         if (route.parentElement != this)
             this.appendChild(route);
 
-        this._emit("show", { route, previous});
+        this._emit("show", { route, previous });
     }
 
     hide(route) {