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) {
let q = url.match(/^\/*(.*?)\?(.*)$|^\/*(.*)$/);
//debugger;
var path;
// do we have a query string ?
@ -180,7 +178,7 @@ export default IUI.module(
if (!(target instanceof Target)) target = this;
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 };
this._states.set(id, state);
history.pushState(
@ -250,9 +248,11 @@ export default IUI.module(
create() {
// save origin
this.origin = window.location.pathname + window.location.search;
this.base = this.getAttribute("base") || "";
}
get base() {
return this.getAttribute("base") || "";
}
destroy() {
console.log("Destroyed", this);
}
@ -274,7 +274,7 @@ export default IUI.module(
}
this._emit("created");
this.navigate(this.origin);
// this.navigate(this.origin);
//console.log("Router created", this);
}

261
src/UI/Input.js
View File

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

10
src/iui.js
View File

@ -1,6 +1,5 @@
import { IUI, iui } from "./Core/IUI.js";
import "./Core/IUIElement.js";
import "./Core/App.js";
@ -39,8 +38,8 @@ import "./UI/Select.js";
import "./UI/DropDown.js";
import "./UI/Grid.js";
import './UI/Location.js';
import './UI/CodePreview.js';
import "./UI/Location.js";
import "./UI/CodePreview.js";
import Modifiable from "./Data/Modifiable.js";
window.addEventListener("beforeprint", e => {
@ -56,9 +55,10 @@ window.addEventListener("afterprint", e => {
});
window.addEventListener("load", async function () {
await IUI.create(document.body);
await IUI.created(document.body);
await IUI.create(document.body);
await IUI.created(document.body);
console.log("IUI.create()");
});
window.iui = iui;