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);
} }

115
src/UI/Input.js
View File

@ -1,9 +1,10 @@
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");
} }
@ -16,14 +17,12 @@ export default IUI.module(class Input extends IUIElement {
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) {
catch (e) {
console.log("Validation Error", e); console.log("Validation Error", e);
return false; return false;
} }
@ -32,25 +31,25 @@ export default IUI.module(class Input extends IUIElement {
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.isAuto = this.hasAttribute("auto");
this.field = this.getAttribute("field"); this.field = this.getAttribute("field");
if (this.field != null) {
if (this.field != null) this.setAttribute(":data", `d['${this.field}']`);
{ this.setAttribute(
this.setAttribute(":data", `d['${this.field}']`) "async:revert",
this.setAttribute("async:revert", `d['${this.field}'] = await this.getData()`); `d['${this.field}'] = await this.getData()`
);
} }
this._span = document.createElement("span"); this._span = document.createElement("span");
@ -62,8 +61,7 @@ export default IUI.module(class Input extends IUIElement {
let self = this; let self = this;
this._input.addEventListener("input", () => { this._input.addEventListener("input", () => {
if (self._checkValidity() && self.isAuto) if (self._checkValidity() && self.isAuto) this.revert();
this.revert();
//self.data[self.field] = self.value; //self.data[self.field] = self.value;
}); });
@ -71,30 +69,29 @@ export default IUI.module(class Input extends IUIElement {
self._emit("change", { value: self.value }); self._emit("change", { value: self.value });
}); });
this.type = this.hasAttribute("type") ? this.getAttribute("type").toLowerCase() : "text"; this.type = this.hasAttribute("type")
? this.getAttribute("type").toLowerCase()
: "text";
this.accept = this.getAttribute("accept"); this.accept = this.getAttribute("accept");
this.appendChild(this._input); this.appendChild(this._input);
this.appendChild(this._span); this.appendChild(this._span);
if (this.type == "password") if (this.type == "password") {
{
this._eye = document.createElement("div"); this._eye = document.createElement("div");
this._eye.className = this.cssClass + "-eye"; this._eye.className = this.cssClass + "-eye";
this._eye.addEventListener("mousedown", ()=>{ this._eye.addEventListener("mousedown", () => {
self._input.type = "text"; self._input.type = "text";
self._eye.classList.add(self.cssClass + "-eye-active"); self._eye.classList.add(self.cssClass + "-eye-active");
}); });
this._eye.addEventListener("mouseup", ()=>{ this._eye.addEventListener("mouseup", () => {
self._input.type = "password"; self._input.type = "password";
self._eye.classList.remove(self.cssClass + "-eye-active"); self._eye.classList.remove(self.cssClass + "-eye-active");
}); });
this.appendChild(this._eye); this.appendChild(this._eye);
} }
} }
async updateAttributes(deep, parentData) { async updateAttributes(deep, parentData) {
@ -111,7 +108,7 @@ export default IUI.module(class Input extends IUIElement {
return this._input.type; return this._input.type;
} }
set accept(value){ set accept(value) {
this._input.accept = value; this._input.accept = value;
} }
@ -120,10 +117,8 @@ export default IUI.module(class Input extends IUIElement {
} }
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;
} }
@ -141,24 +136,27 @@ export default IUI.module(class Input extends IUIElement {
} }
async setData(value) { async setData(value) {
await super.setData(value); await super.setData(value);
if (this.type == "checkbox") if (this.type == "checkbox") this._input.checked = value;
this._input.checked = value; else if (this.type == "date") {
else if (this.type == "date") this._input.value = value ? value.toISOString().slice(0, 10) : value;
this._input.value = value != null ? value.toISOString().slice(0, 10) : value; } else if (this.type == "datetime-local") {
else if (this.type == null || this.type == "text" || this.type == "search" || this.type == "password") this._input.value = value
this._input.value = value == null ? '' : 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") { else if (this.type == "file") {
// can't set value on file input // can't set value on file input
} } else this._input.value = value;
else
this._input.value = value;
if (this._checkValidity() && this.isAuto)
this.revert();
if (this._checkValidity() && this.isAuto) this.revert();
/* /*
await super.setData(value); await super.setData(value);
@ -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 else return this._input.value;
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;
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 Promise(resolve => {
return new Promise((resolve)=>{ this._input.files[0].arrayBuffer().then(x => {
this._input.files[0].arrayBuffer().then((x)=>{
resolve(new Uint8Array(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();
// } // }
}); }
);

6
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 => {
@ -59,6 +58,7 @@ 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;