update

Author: FlaviusTitus

package-lock.json

@@ -43,7 +43,7 @@
 	},
 	"homepage": "https://github.com/default-js/defaultjs-html-components#readme",
 	"dependencies": {
-		"@default-js/defaultjs-common-utils": "^0.6.0",
+		"@default-js/defaultjs-common-utils": "^0.10.0",
 		"@default-js/defaultjs-dynamic-requester": "^1.0.0-beta.1",
 		"@default-js/defaultjs-expression-language": "^1.0.0-beta.12",
 		"@default-js/defaultjs-extdom": "^1.0.0-beta.25",

package.json

@@ -0,0 +1,50 @@
+import Component from "../Component";
+import {findClosestInDepth} from "../utils/NodeHelper"
+import {EVENT_CLICK as ROUTE_CLICK} from "./Route/Events";
+import Route from "./Route";
+import View from "./View";
+
+class AppComponent extends Component {
+    constructor() {
+        super();
+
+        this.ready.then(() => {
+            this.root.on(ROUTE_CLICK, (event) => {
+                const route = event.target;
+                if(!(route instanceof Route))
+                    return;
+                if(this.__activeRoute__)
+                    this.__activeRoute__.active = false;
+
+                
+                
+                this.__activeRoute__ = route;
+                route.active = true;
+            });
+        });
+    }
+
+    get root() {
+        return this;
+    }
+
+    get activeRoute() {
+        return this.__activeRoute__;
+    }
+
+    get view() {
+        if(!this.__view__)
+            this.__view__ = findClosestInDepth(this.root, (node) => node instanceof View);
+
+        return this.__view__;
+    }
+
+
+    get store() {
+        if(!this.__store__)
+            this.__store__ = {};
+        return this.__store__;
+    }
+}
+
+export default AppComponent;

src/Application.js

@@ -0,0 +1,4 @@
+export const ATTR_ACTIVE = "active";
+export const ATTR_TEMPLATE = "template";
+export const ATTR_COMPONENT_TAG = "component-tag";
+export const ATTR_COMPONENT_TAG_ATTRIBUTES = "component-tag-attributes";

src/Application/AppComponent.js

@@ -0,0 +1,3 @@
+export const EVENT_CLICK = NODENAME + "-click";
+export const EVENT_ACTIVATE = NODENAME + "-activate";
+export const EVENT_DEACTIVATE = NODENAME + "-deactivate";

src/Application/Route/Attributes.js

@@ -0,0 +1,2 @@
+import { toNodeName } from "../../utils/DefineComponentHelper";
+export default toNodeName("route");

src/Application/Route/Events.js

@@ -0,0 +1,80 @@
+import {define } from "../../utils/DefineComponentHelper";
+import Resolver from "@default-js/defaultjs-expression-language/src/ExpressionResolver";
+import NODENAME from "./Nodename";
+import {EVENT_CLICK, EVENT_ACTIVATE, EVENT_DEACTIVATE}  from "./Events";
+import {ATTR_TEMPLATE, ATTR_COMPONENT_TAG, ATTR_COMPONENT_TAG_ATTRIBUTES} from "./Attributes"
+
+const ATTRIBUTES = [ATTR_TEMPLATE, ATTR_COMPONENT_TAG, ATTR_COMPONENT_TAG_ATTRIBUTES];
+const EVENTS = [EVENT_CLICK, EVENT_ACTIVATE, EVENT_DEACTIVATE];
+const getTagAttributes = async (route) => {	
+	const attributes = route.attr(ATTR_COMPONENT_TAG_ATTRIBUTES) || "{}";
+	return Resolver.resolve(attributes, {}, {});
+}
+
+const buildComponent = async (route) =>{
+	const tag = route.attr(ATTR_TAG);
+	const clazz = customElements.get(tag);
+	const attributes = await getTagAttributes();
+	
+	const element = new clazz();
+	for(attribute in attributes){
+		const value = attributes[attribute];
+		if(typeof value === "string")
+			element.attr(attribute, value);
+	}
+
+	return element;
+}
+
+class Route extends Component {
+	static get observedAttributes() {
+		return ATTRIBUTES;
+	}
+
+	static get NODENAME() { return NODENAME; }
+
+	static get EVENTS() { return EVENTS; }
+
+	constructor() {
+		super();
+		this.on("click", () => {
+			this.trigger(EVENT_CLICK);
+		});
+	}	
+
+	async init() {
+	}	
+
+	get active() {
+		return this.hasAttribute(ATTR_ACTIVE);
+	}
+
+	set active(active) {
+		const current = this.active;
+		if (active != current) {
+			this.attr(ATTR_ACTIVE, active ? "" : null);
+			if (active) {
+				this.trigger(EVENT_ACTIVATE);
+			} else {
+				this.trigger(EVENT_DEACTIVATE);
+				delete this.__component__;
+			}
+
+		}
+	}
+
+	get component(){
+		return this.__component__;
+	}
+
+	async appendTo({container}) {
+		if (!this.__component__) {			
+			this.__component__ = await buildComponent(this);
+			container.append(this.__component__);
+		}
+		return this.__component__;
+	}
+}
+
+define(Route);
+export default Route;

src/Application/Route/Nodename.js

@@ -0,0 +1,2 @@
+import { toNodeName } from "../../utils/DefineComponentHelper";
+export default toNodeName("view");

src/Application/Route/index.js

@@ -0,0 +1,14 @@
+import { define } from "../../utils/DefineComponentHelper";
+import NODENAME from "./Nodename";
+
+class View extends Component {
+	static get NODENAME() {
+		return NODENAME;
+	}
+
+	constructor() {
+		super();
+	}
+}
+define(View);
+export default View;