esiur/iui
2
0
Fork 0
mirror of https://github.com/esiur/iui.git synced 2025-05-06 06:42:58 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #3 from msal4/main

Browse Source 
Add router base option and navigate to origin after on init
This commit is contained in:
Esiur Project 2022-02-14 14:22:08 +03:00 committed by GitHub
commit 0b29064845
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 376 additions and 402 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/Router/Route.js
View File

@ -3,8 +3,8 @@ import { IUI } from "../Core/IUI.js";
import Router from "./Router.js"; import Router from "./Router.js";
import RefsCollection from "../Core/RefsCollection.js"; import RefsCollection from "../Core/RefsCollection.js";
export default IUI.module(class Route extends IUIElement { export default IUI.module(
class Route extends IUIElement {
constructor() { constructor() {
super(); super();
@ -16,8 +16,7 @@ export default IUI.module(class Route extends IUIElement {
} }
async setData(value) { async setData(value) {
if (this.hasAttribute("debug")) if (this.hasAttribute("debug")) debugger;
debugger;
return await super.setData(value); return await super.setData(value);
} }
@ -44,7 +43,7 @@ export default IUI.module(class Route extends IUIElement {
parent = parent.parent; parent = parent.parent;
} }
return link; return (window.router.base ? window.router.base + "/" : "") + link;
} }
get name() { get name() {
@ -77,9 +76,8 @@ export default IUI.module(class Route extends IUIElement {
_getParent() { _getParent() {
let e = null; //this.parentElement; let e = null; //this.parentElement;
while (e = this.parentElement) { while ((e = this.parentElement)) {
if (e instanceof Route || e instanceof Router) if (e instanceof Route || e instanceof Router) return e;
return e;
} }
return null; return null;
@ -94,16 +92,13 @@ export default IUI.module(class Route extends IUIElement {
// } // }
async create() { async create() {
//window.router.add(this); //window.router.add(this);
this._updateLinks(); this._updateLinks();
if (this.hasAttribute("src")) { if (this.hasAttribute("src")) {
let src = this.getAttribute("src").replace(/^\/+|\/+$/g, "");
let src = this.getAttribute("src").replace(/^\/+|\/+$/g, '');
let x = await fetch(src); let x = await fetch(src);
if (x.status != 200) if (x.status != 200) return;
return;
let t = await x.text(); let t = await x.text();
@ -112,9 +107,7 @@ export default IUI.module(class Route extends IUIElement {
//let xeval = (code) => eval(code); //let xeval = (code) => eval(code);
} }
if (window?.app?.loaded) {
if (window?.app?.loaded)
{
await IUI.create(this); await IUI.create(this);
IUI.bind(this, true, "route:" + src, this.scope); IUI.bind(this, true, "route:" + src, this.scope);
this.refs._build(); this.refs._build();
@ -155,30 +148,27 @@ export default IUI.module(class Route extends IUIElement {
// } // }
} }
created() created() {
{
this.refs._build(); this.refs._build();
} }
set(value) { set(value) {
if (value == this.visible) if (value == this.visible) return;
return;
if (value) { if (value) {
this.setAttribute("selected", ""); this.setAttribute("selected", "");
this._emit("show"); this._emit("show");
} else {
}
else
{
this.removeAttribute("selected"); this.removeAttribute("selected");
this._emit("hide"); this._emit("hide");
} }
} }
get visible() { return this.hasAttribute("selected"); } get visible() {
set visible(value) { this.set(value); } return this.hasAttribute("selected");
}
}); set visible(value) {
this.set(value);
}
}
);

158
src/Router/Router.js
View File

@ -1,19 +1,20 @@
import IUIElement from "../Core/IUIElement.js"; import IUIElement from "../Core/IUIElement.js";
import Route from "./Route.js" import Route from "./Route.js";
import Target from "./Target.js"; import Target from "./Target.js";
import { IUI } from "../Core/IUI.js"; import { IUI } from "../Core/IUI.js";
export default IUI.module(
export default IUI.module(class Router extends Target class Router extends Target {
{ constructor() {
super({
constructor() routes: [],
{ _states: new Map(),
super({routes: [], _states: new Map(), active: null, cssClass: "router"}); active: null,
cssClass: "router",
});
this._history = []; this._history = [];
//IUI._router = this; //IUI._router = this;
//Object.defineProperty(window, "router", { //Object.defineProperty(window, "router", {
@ -23,15 +24,13 @@ export default IUI.module(class Router extends Target
// return IUI._router; // return IUI._router;
// } // }
//}); //});
} }
_getRouteParent(route) { _getRouteParent(route) {
let e = null; let e = null;
while (e = route.parentElement) { while ((e = route.parentElement)) {
if (e instanceof Route || e instanceof Router) if (e instanceof Route || e instanceof Router) return e;
return e;
} }
return null; return null;
@ -40,48 +39,49 @@ export default IUI.module(class Router extends Target
add(route, parent = null) { add(route, parent = null) {
if (parent == null) { if (parent == null) {
this.routes.push(route); this.routes.push(route);
} } else {
else {
route.parent = parent; route.parent = parent;
this.appendChild(route); this.appendChild(route);
//parent.routes.push(route); //parent.routes.push(route);
} }
} }
_routeInPath(name, routes) _routeInPath(name, routes) {
{
for (var i = 0; i < routes.length; i++) for (var i = 0; i < routes.length; i++)
if (routes[i].name == name) if (routes[i].name == name) return routes[i];
return routes[i];
return null; return null;
} }
getRoute(url, data) { getRoute(url, data) {
/**
* @type {String[]}
*/
let p = url.split("/"); let p = url.split("/");
let searchRoutes = this.routes; let searchRoutes = this.routes;
if (p[0] == this.base) {
p.shift();
}
for (var i = 0; i < p.length; i++) { for (var i = 0; i < p.length; i++) {
var route = this._routeInPath(p[i], searchRoutes); var route = this._routeInPath(p[i], searchRoutes);
if (route == null) if (route == null) return [null, null];
return [null, null];
if (i == p.length - 1) { if (i == p.length - 1) {
// return [destination state route (link, icon,..etc) , actual route to view] // return [destination state route (link, icon,..etc) , actual route to view]
if (route.dst == null) if (route.dst == null) return [route, route];
return [route, route];
else { else {
let dst =
let dst = route.dst instanceof Function ? route.dst(data) : route.dst; route.dst instanceof Function ? route.dst(data) : route.dst;
let url = dst.replace(/^[/]*(.*?)[/]*$/g, '$1').trim(); let url = dst.replace(/^[/]*(.*?)[/]*$/g, "$1").trim();
return [route, this.getRoute(url)[1]]; return [route, this.getRoute(url)[1]];
} }
} }
searchRoutes = route.routes; searchRoutes = route.routes;
} }
} }
back() { back() {
@ -96,28 +96,24 @@ export default IUI.module(class Router extends Target
_toQuery(o) { _toQuery(o) {
let rt = []; let rt = [];
for (let i in o) for (let i in o)
if (o[i] == undefined) if (o[i] == undefined) rt.push(i);
rt.push(i); else rt.push(i + "=" + encodeURI(o[i].toString().replace("&", "&&"))); ///encodeURIComponent(o[i]));
else
rt.push(i + "=" + encodeURI(o[i].toString().replace("&", "&&")));///encodeURIComponent(o[i]));
return rt.join("&"); return rt.join("&");
} }
_fromQuery(q) { _fromQuery(q) {
let kv = q.replace("&&", "\0").split('&'); let kv = q.replace("&&", "\0").split("&");
let rt = {}; let rt = {};
for (let i = 0; i < kv.length; i++) { for (let i = 0; i < kv.length; i++) {
let d = kv[i].replace("\0", "&").split('=', 2); let d = kv[i].replace("\0", "&").split("=", 2);
let v = decodeURI(d[1] || ''); //decodeURIComponent(d[1] || ''); let v = decodeURI(d[1] || ""); //decodeURIComponent(d[1] || '');
if (v != null && v.trim() != '' && !isNaN(v)) if (v != null && v.trim() != "" && !isNaN(v)) v = new Number(v);
v = new Number(v);
rt[d[0]] = v; rt[d[0]] = v;
} }
return JSON.parse(JSON.stringify(rt)); return JSON.parse(JSON.stringify(rt));
} }
async navigate(url, data, target, state, dataToQuery = true) async navigate(url, data, target, state, dataToQuery = true) {
{
let q = url.match(/^\/*(.*?)\?(.*)$|^\/*(.*)$/); let q = url.match(/^\/*(.*?)\?(.*)$|^\/*(.*)$/);
//debugger; //debugger;
@ -134,25 +130,28 @@ export default IUI.module(class Router extends Target
else if (data !== undefined) { else if (data !== undefined) {
path = q[3]; path = q[3];
url = dataToQuery ? path + "?" + this._toQuery(data) : path; url = dataToQuery ? path + "?" + this._toQuery(data) : path;
} } else {
else {
path = q[3]; path = q[3];
url = path; url = path;
} }
let [stateRoute, viewRoute] = this.getRoute(path, data); let [stateRoute, viewRoute] = this.getRoute(path, data);
if (stateRoute == null) if (stateRoute == null) {
{
console.warn("State not found ", path); console.warn("State not found ", path);
return; return;
} }
let ok = this._emit("navigate", { url, stateRoute, viewRoute, base: path, data, cancelable: true }); let ok = this._emit("navigate", {
url,
stateRoute,
viewRoute,
base: path,
data,
cancelable: true,
});
if (!ok) if (!ok) {
{
console.warn("Route not allowed", path); console.warn("Route not allowed", path);
return; return;
} }
@ -163,7 +162,6 @@ export default IUI.module(class Router extends Target
viewRoute = stateRoute; viewRoute = stateRoute;
} }
//let state = null; //let state = null;
//if (data !== undefined) { //if (data !== undefined) {
@ -179,14 +177,17 @@ export default IUI.module(class Router extends Target
// } // }
//} //}
if (!(target instanceof Target)) if (!(target instanceof Target)) target = this;
target = this;
if (state == null) { if (state == null) {
let id = Math.random().toString(36).substr(2, 10); let id = Math.random().toString(36).substr(2, 10);
state = { id, url, data, target, stateRoute, viewRoute }; state = { id, url, data, target, stateRoute, viewRoute };
this._states.set(id, state); this._states.set(id, state);
history.pushState(id, stateRoute.caption, this._hash ? "#" + url : "/" + url); history.pushState(
id,
stateRoute.caption,
this._hash ? "#" + url : "/" + url
);
} }
this._history.push(state.id); // { url, data, target, stateRoute, viewRoute }); this._history.push(state.id); // { url, data, target, stateRoute, viewRoute });
@ -194,17 +195,14 @@ export default IUI.module(class Router extends Target
target.show(viewRoute, this.active); target.show(viewRoute, this.active);
viewRoute.set(true); viewRoute.set(true);
this.active = viewRoute; this.active = viewRoute;
//{ url: "/", data: null, target: null }; //{ url: "/", data: null, target: null };
this._emit("route", { route: stateRoute }); this._emit("route", { route: stateRoute });
viewRoute.query = data || {}; viewRoute.query = data || {};
stateRoute.query = viewRoute.query; stateRoute.query = viewRoute.query;
target.setLoading(true); target.setLoading(true);
if (stateRoute.dataMap != null) { if (stateRoute.dataMap != null) {
@ -212,14 +210,11 @@ export default IUI.module(class Router extends Target
if (!(await stateRoute.dataMap.render(data || {}))) if (!(await stateRoute.dataMap.render(data || {})))
await stateRoute.render(); await stateRoute.render();
if (viewRoute != stateRoute) if (viewRoute != stateRoute) await viewRoute.setData(stateRoute.data);
await viewRoute.setData(stateRoute.data); } //if (data !== undefined)
} else await viewRoute.setData(data);
else //if (data !== undefined)
await viewRoute.setData(data);
target.setLoading(false); target.setLoading(false);
} }
hide() { hide() {
@ -227,7 +222,6 @@ export default IUI.module(class Router extends Target
} }
refresh() { refresh() {
let state = this.current; let state = this.current;
this.navigate(state.url, state.data, state.target, state); this.navigate(state.url, state.data, state.target, state);
@ -239,8 +233,6 @@ export default IUI.module(class Router extends Target
show(route, active) { show(route, active) {
super.show(route, active); super.show(route, active);
} }
get current() { get current() {
@ -249,42 +241,40 @@ export default IUI.module(class Router extends Target
} }
get previous() { get previous() {
if (this._history.length > 2) if (this._history.length > 2)
return this._states.get(this._history[this._history.length - 2]);//.viewRoute; return this._states.get(this._history[this._history.length - 2]);
else //.viewRoute;
return null; else return null;
} }
create() { create() {
// save origin // save origin
this.origin = window.location.pathname + window.location.search; this.origin = window.location.pathname + window.location.search;
this.base = this.getAttribute("base") || "";
} }
destroy() { destroy() {
console.log("Destroyed", this); console.log("Destroyed", this);
} }
created() created() {
{ if (
this.hasAttribute("type") &&
if (this.hasAttribute("type") && this.getAttribute("type").toLowerCase() == "hash") this.getAttribute("type").toLowerCase() == "hash"
)
this._hash = true; this._hash = true;
/// find all children /// find all children
for (var i = 0; i < this.children.length; i++) { for (var i = 0; i < this.children.length; i++) {
let e = this.children[i]; let e = this.children[i];
if (e instanceof Route) { if (e instanceof Route) {
this.add(e); this.add(e);
if (e.visible) if (e.visible) this.navigate(e.name);
this.navigate(e.name);
} }
} }
this._emit("created"); this._emit("created");
this.navigate(this.origin);
//console.log("Router created", this); //console.log("Router created", this);
} }
@ -296,7 +286,6 @@ export default IUI.module(class Router extends Target
let self = this; let self = this;
window.addEventListener("popstate", function (event) { window.addEventListener("popstate", function (event) {
//console.log(event); //console.log(event);
let stateId = event.state; let stateId = event.state;
let path; let path;
@ -304,25 +293,20 @@ export default IUI.module(class Router extends Target
if (self._hash) { if (self._hash) {
path = window.location.hash; path = window.location.hash;
if (path.length > 0) if (path.length > 0) path = path.substr(1);
path = path.substr(1); } else {
}
else {
path = window.location.pathname; path = window.location.pathname;
} }
if (stateId != null) { if (stateId != null) {
if (stateId != self._history[self._history.length - 1]) { if (stateId != self._history[self._history.length - 1]) {
//this._lastStateId = stateId; //this._lastStateId = stateId;
let state = self._states.get(stateId); let state = self._states.get(stateId);
self.navigate(path, state.data, state.target, state); self.navigate(path, state.data, state.target, state);
} } else {
else {
console.log("SAME"); console.log("SAME");
} }
} } else {
else {
this._lastState = null; this._lastState = null;
self.navigate(path, undefined, undefined, {}); self.navigate(path, undefined, undefined, {});
} }
@ -334,5 +318,5 @@ export default IUI.module(class Router extends Target
this._register("route"); this._register("route");
this._register("created"); this._register("created");
} }
}
}); );

62
src/iui.js
View File

@ -1,53 +1,53 @@
import { IUI, iui } from "./Core/IUI.js"; import { IUI, iui } from "./Core/IUI.js";
import "./Core/IUIElement.js"; import "./Core/IUIElement.js";
import './Core/App.js'; import "./Core/App.js";
import './Router/Router.js'; import "./Router/Router.js";
import './Router/Route.js'; import "./Router/Route.js";
import './Router/Link.js'; import "./Router/Link.js";
import './Router/Target.js'; import "./Router/Target.js";
import './Data/Repeat.js'; import "./Data/Repeat.js";
import './Data/Include.js'; import "./Data/Include.js";
import './Data/Form.js'; import "./Data/Form.js";
import './UI/Login.js'; import "./UI/Login.js";
import './UI/Window.js'; import "./UI/Window.js";
import './UI/Dialog.js'; import "./UI/Dialog.js";
import './UI/Input.js'; import "./UI/Input.js";
import './UI/Tab.js'; import "./UI/Tab.js";
import './UI/Tabs.js'; import "./UI/Tabs.js";
import './UI/Table.js'; import "./UI/Table.js";
import './UI/Check.js'; import "./UI/Check.js";
import './UI/Button.js'; import "./UI/Button.js";
import './UI/Navbar.js'; import "./UI/Navbar.js";
import './UI/DateTimePicker.js'; import "./UI/DateTimePicker.js";
import './Data/Layout.js'; import "./Data/Layout.js";
import './Data/Field.js'; import "./Data/Field.js";
import './UI/Background.js'; import "./UI/Background.js";
import './UI/Menu.js'; import "./UI/Menu.js";
import './Data/TableRow.js'; import "./Data/TableRow.js";
import './UI/Select.js'; import "./UI/Select.js";
import './UI/DropDown.js'; import "./UI/DropDown.js";
import './UI/Grid.js'; import "./UI/Grid.js";
import './UI/Location.js'; import "./UI/Location.js";
import './UI/CodePreview.js'; import "./UI/CodePreview.js";
window.addEventListener("beforeprint", (e)=>{ window.addEventListener("beforeprint", e => {
let viewRoute = router.current.viewRoute; let viewRoute = router.current.viewRoute;
viewRoute.style.height = "auto"; viewRoute.style.height = "auto";
router.style.height = viewRoute.clientHeight + "px"; router.style.height = viewRoute.clientHeight + "px";
}); });
window.addEventListener("afterprint", (e)=>{ window.addEventListener("afterprint", e => {
let viewRoute = router.current.viewRoute; let viewRoute = router.current.viewRoute;
viewRoute.style.height = ""; viewRoute.style.height = "";
router.style.height = ""; router.style.height = "";