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

Support datetime-local

Browse Source
This commit is contained in:
Mohammed Salman 2022-02-17 19:12:37 +03:00
parent dde241ebfb
commit 9ea4676792
3 changed files with 136 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/Router/Router.js
View File

@ -116,8 +116,6 @@ export default IUI.module(
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;
var path; var path;
// do we have a query string ? // do we have a query string ?
@ -180,7 +178,7 @@ export default IUI.module(
if (!(target instanceof Target)) target = this; if (!(target instanceof Target)) target = this;
if (state == null) { if (state == null) {
let id = Math.random().toString(36).substr(2, 10); let id = Math.random().toString(36).substring(2, 12);
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( history.pushState(
@ -250,9 +248,11 @@ export default IUI.module(
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") || "";
} }
get base() {
return this.getAttribute("base") || "";
}
destroy() { destroy() {
console.log("Destroyed", this); console.log("Destroyed", this);
} }
@ -274,7 +274,7 @@ export default IUI.module(
} }
this._emit("created"); this._emit("created");
this.navigate(this.origin); // this.navigate(this.origin);
//console.log("Router created", this); //console.log("Router created", this);
} }

255
src/UI/Input.js
View File

@ -1,166 +1,164 @@
import IUIElement from "../Core/IUIElement.js"; import IUIElement from "../Core/IUIElement.js";
import { IUI } from "../Core/IUI.js"; import { IUI } from "../Core/IUI.js";
export default IUI.module(class Input extends IUIElement { export default IUI.module(
class Input extends IUIElement {
constructor() { constructor() {
super({ formatter: (x) => x }); super({ formatter: x => x });
this._register("input"); this._register("input");
this._register("change"); this._register("change");
} }
_checkValidity() { _checkValidity() {
if (this.validate != null) { if (this.validate != null) {
try { try {
let valid = this.validate.apply(this); let valid = this.validate.apply(this);
if (!valid) { if (!valid) {
this.setAttribute("invalid", ""); this.setAttribute("invalid", "");
this.classList.add(this.cssClass + "-invalid"); this.classList.add(this.cssClass + "-invalid");
return false; return false;
} } else {
else { this.removeAttribute("invalid");
this.removeAttribute("invalid"); this.classList.remove(this.cssClass + "-invalid");
this.classList.remove(this.cssClass + "-invalid"); return true;
return true; }
} } catch (e) {
} console.log("Validation Error", e);
catch (e) { return false;
console.log("Validation Error", e);
return false;
}
} }
}
return true; return true;
} }
get caption(){ get caption() {
return this.getAttribute("caption");// this._span.innerHTML; return this.getAttribute("caption"); // this._span.innerHTML;
} }
set caption(value){ set caption(value) {
this.setAttribute("caption", value); this.setAttribute("caption", value);
this._span.innerHTML = value; this._span.innerHTML = value;
} }
create() { create() {
this.isAuto = this.hasAttribute("auto");
this.field = this.getAttribute("field");
this.isAuto = this.hasAttribute("auto"); if (this.field != null) {
this.field = this.getAttribute("field"); this.setAttribute(":data", `d['${this.field}']`);
this.setAttribute(
"async:revert",
`d['${this.field}'] = await this.getData()`
);
}
this._span = document.createElement("span");
this._span.innerHTML = this.getAttribute("caption");
if (this.field != null) this._input = document.createElement("input");
{ this._input.placeholder = this.getAttribute("placeholder") || "";
this.setAttribute(":data", `d['${this.field}']`)
this.setAttribute("async:revert", `d['${this.field}'] = await this.getData()`);
}
this._span = document.createElement("span"); let self = this;
this._span.innerHTML = this.getAttribute("caption");
this._input = document.createElement("input"); this._input.addEventListener("input", () => {
this._input.placeholder = this.getAttribute("placeholder") || ""; if (self._checkValidity() && self.isAuto) this.revert();
//self.data[self.field] = self.value;
});
let self = this; this._input.addEventListener("change", () => {
self._emit("change", { value: self.value });
});
this._input.addEventListener("input", () => { this.type = this.hasAttribute("type")
if (self._checkValidity() && self.isAuto) ? this.getAttribute("type").toLowerCase()
this.revert(); : "text";
//self.data[self.field] = self.value;
this.accept = this.getAttribute("accept");
this.appendChild(this._input);
this.appendChild(this._span);
if (this.type == "password") {
this._eye = document.createElement("div");
this._eye.className = this.cssClass + "-eye";
this._eye.addEventListener("mousedown", () => {
self._input.type = "text";
self._eye.classList.add(self.cssClass + "-eye-active");
});
this._eye.addEventListener("mouseup", () => {
self._input.type = "password";
self._eye.classList.remove(self.cssClass + "-eye-active");
}); });
this._input.addEventListener("change", () => { this.appendChild(this._eye);
self._emit("change", { value: self.value }); }
});
this.type = this.hasAttribute("type") ? this.getAttribute("type").toLowerCase() : "text";
this.accept = this.getAttribute("accept");
this.appendChild(this._input);
this.appendChild(this._span);
if (this.type == "password")
{
this._eye = document.createElement("div");
this._eye.className = this.cssClass + "-eye";
this._eye.addEventListener("mousedown", ()=>{
self._input.type = "text";
self._eye.classList.add(self.cssClass + "-eye-active");
});
this._eye.addEventListener("mouseup", ()=>{
self._input.type = "password";
self._eye.classList.remove(self.cssClass + "-eye-active");
});
this.appendChild(this._eye);
}
} }
async updateAttributes(deep, parentData) { async updateAttributes(deep, parentData) {
await super.updateAttributes(deep, parentData); await super.updateAttributes(deep, parentData);
//this._input.type = this.type; //this._input.type = this.type;
//this._input.value = this.value; //this._input.value = this.value;
} }
set type(value) { set type(value) {
this._input.type = value; this._input.type = value;
} }
get type() { get type() {
return this._input.type; return this._input.type;
} }
set accept(value){ set accept(value) {
this._input.accept = value; this._input.accept = value;
} }
get accept() { get accept() {
return this._input.accept; return this._input.accept;
} }
set disabled(value) { set disabled(value) {
if (value) if (value) this.setAttribute("disabled", "disabled");
this.setAttribute("disabled", "disabled"); else this.removeAttribute("disabled");
else
this.removeAttribute("disabled");
this._input.disabled = value; this._input.disabled = value;
} }
get disabled() { get disabled() {
return this._input.disabled; return this._input.disabled;
} }
set enabled(value) { set enabled(value) {
this.disabled = !value; this.disabled = !value;
} }
get enabled() { get enabled() {
return !this._input.disabled; return !this._input.disabled;
} }
async setData(value) { async setData(value) {
await super.setData(value);
await super.setData(value); if (this.type == "checkbox") this._input.checked = value;
else if (this.type == "date") {
this._input.value = value ? value.toISOString().slice(0, 10) : value;
} else if (this.type == "datetime-local") {
this._input.value = value
? value.toISOString().substring(0, 19)
: value;
} else if (
this.type == null ||
this.type == "text" ||
this.type == "search" ||
this.type == "password"
)
this._input.value = value == null ? "" : value;
else if (this.type == "file") {
// can't set value on file input
} else this._input.value = value;
if (this.type == "checkbox") if (this._checkValidity() && this.isAuto) this.revert();
this._input.checked = value;
else if (this.type == "date")
this._input.value = value != null ? value.toISOString().slice(0, 10) : value;
else if (this.type == null || this.type == "text" || this.type == "search" || this.type == "password")
this._input.value = value == null ? '' : value;
else if (this.type == "file") {
// can't set value on file input
}
else
this._input.value = value;
if (this._checkValidity() && this.isAuto) /*
this.revert();
/*
await super.setData(value); await super.setData(value);
if (value != null && this.field != null) if (value != null && this.field != null)
this.value = value[this.field]; this.value = value[this.field];
@ -169,40 +167,32 @@ export default IUI.module(class Input extends IUIElement {
*/ */
} }
// modified(name, value) { // modified(name, value) {
// if (name == this.field) { // if (name == this.field) {
// this.value = value; // this.value = value;
// } // }
// } // }
async getData(){ async getData() {
if (this.type == "checkbox") if (this.type == "checkbox") return this._input.checked;
return this._input.checked; else if (this.type == "date" || this.type == "datetime-local")
else if (this.type == "date") return new Date(this._input.value);
return new Date(this._input.value); else if (this.type == "file")
else if (this.type == "file") return new Uint8Array(await this._input.files[0].arrayBuffer());
return new Uint8Array(await this._input.files[0].arrayBuffer()); else return this._input.value;
else
return this._input.value;
} }
get data() get data() {
{ if (this.type == "checkbox") return this._input.checked;
if (this.type == "checkbox") else if (this.type == "date" || this.type == "datetime-local")
return this._input.checked; return new Date(this._input.value);
else if (this.type == "date") else if (this.type == "file") {
return new Date(this._input.value); return new Promise(resolve => {
else if (this.type == "file") this._input.files[0].arrayBuffer().then(x => {
{ resolve(new Uint8Array(x));
return new Promise((resolve)=>{ });
this._input.files[0].arrayBuffer().then((x)=>{ });
resolve(new Uint8Array(x)); } else return this._input.value;
});
});
}
else
return this._input.value;
} }
/* /*
@ -233,4 +223,5 @@ export default IUI.module(class Input extends IUIElement {
// this._checkValidity(); // this._checkValidity();
// } // }
}); }
);

10
src/iui.js
View File

@ -1,6 +1,5 @@
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";
@ -39,8 +38,8 @@ 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";
import Modifiable from "./Data/Modifiable.js"; import Modifiable from "./Data/Modifiable.js";
window.addEventListener("beforeprint", e => { window.addEventListener("beforeprint", e => {
@ -56,9 +55,10 @@ window.addEventListener("afterprint", e => {
}); });
window.addEventListener("load", async function () { window.addEventListener("load", async function () {
await IUI.create(document.body); await IUI.create(document.body);
await IUI.created(document.body); await IUI.created(document.body);
console.log("IUI.create()");
}); });
window.iui = iui; window.iui = iui;