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 branch 'main' of https://github.com/esiur/iui

Browse Source
This commit is contained in:
Ahmed Zamil 2022-02-14 14:27:36 +03:00
commit 87359afe99
3 changed files with 369 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/Router/Route.js
View File

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

164
src/Router/Router.js
View File

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

60
src/iui.js
View File

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