|
|
@@ -9,7 +9,7 @@
|
|
|
<body>
|
|
|
<div id="formContainer"></div>
|
|
|
<script>
|
|
|
- //PASSWORD
|
|
|
+//PASSWORD
|
|
|
// function Password(parent, open) {
|
|
|
// let formBody = document.createElement("div");
|
|
|
// let passwordInput = document.createElement("input");
|
|
|
@@ -77,7 +77,7 @@
|
|
|
// p.setOpen(false);
|
|
|
// console.log(p.getOpen());
|
|
|
|
|
|
- //LoginForm
|
|
|
+//LOGINFORM
|
|
|
|
|
|
// function LoginForm(parent, open) {
|
|
|
// let formBody = document.createElement("div");
|
|
|
@@ -187,7 +187,7 @@
|
|
|
// p.setOpen(false);
|
|
|
// console.log(p.getOpen());
|
|
|
|
|
|
- //PASSWORD VERIFY
|
|
|
+//PASSWORD VERIFY
|
|
|
|
|
|
// function Password(parent, open) {
|
|
|
// let formBody = document.createElement("div");
|
|
|
@@ -307,7 +307,7 @@
|
|
|
// p.setOpen(false);
|
|
|
// console.log(p.getOpen());
|
|
|
|
|
|
- //FORM
|
|
|
+//FORM;
|
|
|
// function Form(el, data, okCallback, cancelCallback) {
|
|
|
// let formBody = document.createElement("div");
|
|
|
// let inputBox = document.createElement("div");
|
|
|
@@ -323,6 +323,15 @@
|
|
|
// formBody.append(inputBox);
|
|
|
|
|
|
// let inputCreators = {
|
|
|
+ // Number(key, value, oninput) {
|
|
|
+ // let input = document.createElement("input");
|
|
|
+ // input.type = "Number";
|
|
|
+
|
|
|
+ // input.value = value;
|
|
|
+ // input.oninput = () => oninput(input.value);
|
|
|
+
|
|
|
+ // return input;
|
|
|
+ // },
|
|
|
// String(key, value, oninput) {
|
|
|
// if (value.length > 20) {
|
|
|
// let textarea = document.createElement("textarea");
|
|
|
@@ -361,6 +370,33 @@
|
|
|
// input.oninput = () => oninput(new Date(input.value));
|
|
|
// return input;
|
|
|
// },
|
|
|
+ // Array(key, value, oninput) {
|
|
|
+ // let inputBox = document.createElement("div");
|
|
|
+ // value.map((element) => {
|
|
|
+ // let btn = document.createElement("button");
|
|
|
+ // btn.innerText = element;
|
|
|
+ // btn.onclick = () => {
|
|
|
+ // formContainer.innerHTML = "";
|
|
|
+ // fetch(element)
|
|
|
+ // .then((res) => res.json())
|
|
|
+ // .then((data) => {
|
|
|
+ // let form = new Form(
|
|
|
+ // formContainer,
|
|
|
+ // data,
|
|
|
+ // () => console.log("ok"),
|
|
|
+ // () => console.log("cancel")
|
|
|
+ // );
|
|
|
+ // form.okCallback = () => console.log("ok2");
|
|
|
+
|
|
|
+ // // form.validators.surname = (value, key, data, input) =>
|
|
|
+ // // value.length > 2 && value[0].toUpperCase() == value[0] && !value.includes(" ") ? true : "Wrong surname";
|
|
|
+ // });
|
|
|
+ // };
|
|
|
+
|
|
|
+ // inputBox.append(btn);
|
|
|
+ // });
|
|
|
+ // return inputBox;
|
|
|
+ // },
|
|
|
// };
|
|
|
|
|
|
// let createInputs = (data) => {
|
|
|
@@ -388,6 +424,7 @@
|
|
|
// input.style.border = "1px solid red";
|
|
|
// requiredErrors.add(key);
|
|
|
// } else {
|
|
|
+ // inputLabel.style.border = "none";
|
|
|
// requiredErrors.delete(key);
|
|
|
// }
|
|
|
// if (this.validators && typeof this.validators[key] === "function") {
|
|
|
@@ -452,39 +489,6 @@
|
|
|
// this.validators = {};
|
|
|
// }
|
|
|
|
|
|
- // let form = new Form(
|
|
|
- // formContainer,
|
|
|
- // {
|
|
|
- // "*name": "Anakin",
|
|
|
- // "*surname": "SkywalkerSkywalkerSkywalkerSkywalkerSkywalkerSkywalkerSkywalkerSkywalker",
|
|
|
- // married: true,
|
|
|
- // birthday: new Date(new Date().getTime() - 86400000 * 30 * 365),
|
|
|
- // },
|
|
|
- // () => console.log("ok"),
|
|
|
- // () => console.log("cancel")
|
|
|
- // );
|
|
|
- // form.okCallback = () => console.log("ok2");
|
|
|
-
|
|
|
- // form.validators.surname = (value, key, data, input) =>
|
|
|
- // value.length > 2 && value[0].toUpperCase() == value[0] && !value.includes(" ") ? true : "Wrong surname";
|
|
|
- // form.validators["*name"] = (value, key, data, input) =>
|
|
|
- // value.length > 3 && value[0].toUpperCase() == value[0] && !value.includes(" ") ? true : "Wrong name";
|
|
|
- // form.validators["birthday"] = (value, key, data, input) => {
|
|
|
- // if (new Date(value.toISOString().slice(0, 16)) <= new Date("1900-01-01")) {
|
|
|
- // return "Wrong date";
|
|
|
- // }
|
|
|
-
|
|
|
- // if (
|
|
|
- // new Date(value.toISOString().slice(0, 16)).getTime() >=
|
|
|
- // new Date().getTime() - new Date().getTimezoneOffset() * 1000 * 60 - 3 * 365 * 86400000
|
|
|
- // ) {
|
|
|
- // return "Wrong date";
|
|
|
- // }
|
|
|
- // return true;
|
|
|
- // };
|
|
|
-
|
|
|
- // console.log(form);
|
|
|
-
|
|
|
//POWER OF THE FORM
|
|
|
|
|
|
// function Password(parent, open) {
|
|
|
@@ -632,6 +636,641 @@
|
|
|
|
|
|
// p.setOpen(false);
|
|
|
// console.log(p.getOpen());
|
|
|
+
|
|
|
+//STARWARS
|
|
|
+ // function Form(el, data, okCallback, cancelCallback) {
|
|
|
+ // let formBody = document.createElement("div");
|
|
|
+ // let inputBox = document.createElement("div");
|
|
|
+ // let okButton = document.createElement("button");
|
|
|
+ // let validatorErrors = new Set();
|
|
|
+ // let requiredErrors = new Set();
|
|
|
+ // let cancelButton = document.createElement("button");
|
|
|
+ // let initData = { ...data };
|
|
|
+
|
|
|
+ // okButton.innerHTML = "OK";
|
|
|
+ // cancelButton.innerHTML = "Cancel";
|
|
|
+ // el.appendChild(formBody);
|
|
|
+ // formBody.append(inputBox);
|
|
|
+
|
|
|
+ // let inputCreators = {
|
|
|
+ // Number(key, value, oninput) {
|
|
|
+ // let input = document.createElement("input");
|
|
|
+ // input.type = "Number";
|
|
|
+
|
|
|
+ // input.value = value;
|
|
|
+ // input.oninput = () => oninput(input.value);
|
|
|
+
|
|
|
+ // return input;
|
|
|
+ // },
|
|
|
+ // String(key, value, oninput) {
|
|
|
+ // if (
|
|
|
+ // value.match(
|
|
|
+ // /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/
|
|
|
+ // )?.length
|
|
|
+ // ) {
|
|
|
+ // let btn = document.createElement("button");
|
|
|
+ // btn.innerText = value;
|
|
|
+ // btn.onclick = () => {
|
|
|
+ // formContainer.innerHTML = "";
|
|
|
+ // fetch(value)
|
|
|
+ // .then((res) => res.json())
|
|
|
+ // .then((data) => {
|
|
|
+ // let form = new Form(
|
|
|
+ // formContainer,
|
|
|
+ // data,
|
|
|
+ // () => console.log("ok"),
|
|
|
+ // () => console.log("cancel")
|
|
|
+ // );
|
|
|
+ // form.okCallback = () => console.log("ok2");
|
|
|
+ // });
|
|
|
+ // };
|
|
|
+ // return btn;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (value.length > 20) {
|
|
|
+ // let textarea = document.createElement("textarea");
|
|
|
+ // textarea.value = value;
|
|
|
+ // textarea.oninput = () => oninput(textarea.value);
|
|
|
+ // return textarea;
|
|
|
+ // } else {
|
|
|
+ // let input = document.createElement("input");
|
|
|
+ // input.type = "text";
|
|
|
+ // if ([...value].every((el) => el === "*")) {
|
|
|
+ // input.type = "password";
|
|
|
+ // }
|
|
|
+
|
|
|
+ // input.placeholder = key;
|
|
|
+ // input.value = value;
|
|
|
+ // input.oninput = () => oninput(input.value);
|
|
|
+
|
|
|
+ // return input;
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // Boolean(key, value, oninput) {
|
|
|
+ // let input = document.createElement("input");
|
|
|
+ // input.type = "checkbox";
|
|
|
+ // input.checked = value;
|
|
|
+ // input.oninput = () => oninput(Boolean(input.checked));
|
|
|
+ // return input;
|
|
|
+ // },
|
|
|
+ // Date(key, value, oninput) {
|
|
|
+ // let input = document.createElement("input");
|
|
|
+ // let timeOffset = new Date().getTimezoneOffset();
|
|
|
+ // let dateInMillSec =
|
|
|
+ // new Date(value.toISOString()).getTime() - new Date().getTimezoneOffset() * 1000 * 60;
|
|
|
+
|
|
|
+ // input.type = "datetime-local";
|
|
|
+ // input.value = new Date(dateInMillSec).toISOString().slice(0, 16);
|
|
|
+ // input.oninput = () => oninput(new Date(input.value));
|
|
|
+ // return input;
|
|
|
+ // },
|
|
|
+ // Array(key, value, oninput) {
|
|
|
+ // let inputBox = document.createElement("div");
|
|
|
+ // value.map((element) => {
|
|
|
+ // let btn = document.createElement("button");
|
|
|
+ // btn.innerText = element;
|
|
|
+ // btn.onclick = () => {
|
|
|
+ // formContainer.innerHTML = "";
|
|
|
+ // fetch(element)
|
|
|
+ // .then((res) => res.json())
|
|
|
+ // .then((data) => {
|
|
|
+ // let form = new Form(
|
|
|
+ // formContainer,
|
|
|
+ // data,
|
|
|
+ // () => console.log("ok"),
|
|
|
+ // () => console.log("cancel")
|
|
|
+ // );
|
|
|
+ // form.okCallback = () => console.log("ok2");
|
|
|
+
|
|
|
+ // // form.validators.surname = (value, key, data, input) =>
|
|
|
+ // // value.length > 2 && value[0].toUpperCase() == value[0] && !value.includes(" ") ? true : "Wrong surname";
|
|
|
+ // });
|
|
|
+ // };
|
|
|
+
|
|
|
+ // inputBox.append(btn);
|
|
|
+ // });
|
|
|
+ // return inputBox;
|
|
|
+ // },
|
|
|
+ // };
|
|
|
+
|
|
|
+ // let createInputs = (data) => {
|
|
|
+ // inputBox.innerHTML = "";
|
|
|
+ // for (let [key, value] of Object.entries(data)) {
|
|
|
+ // let inputWrapper = document.createElement("div");
|
|
|
+ // let inputType = value.constructor.name;
|
|
|
+ // let th = document.createElement("th");
|
|
|
+ // let inputLabel = document.createElement("label");
|
|
|
+ // let isRequired = key.trim()[0] === "*";
|
|
|
+ // let isRequiredChar = document.createElement("span");
|
|
|
+
|
|
|
+ // inputLabel.style.marginLeft = "5px";
|
|
|
+ // isRequiredChar.innerText = "* ";
|
|
|
+ // isRequiredChar.style.color = "red";
|
|
|
+
|
|
|
+ // if (isRequired) {
|
|
|
+ // th.prepend(isRequiredChar);
|
|
|
+ // }
|
|
|
+ // th.innerHTML += isRequired ? key.slice(1, key.length) : key;
|
|
|
+
|
|
|
+ // let input = inputCreators[inputType](key, value, (value) => {
|
|
|
+ // let validator;
|
|
|
+ // if (isRequired && value.trim().length === 0) {
|
|
|
+ // input.style.border = "1px solid red";
|
|
|
+ // requiredErrors.add(key);
|
|
|
+ // } else {
|
|
|
+ // inputLabel.style.border = "none";
|
|
|
+ // requiredErrors.delete(key);
|
|
|
+ // }
|
|
|
+ // if (this.validators && typeof this.validators[key] === "function") {
|
|
|
+ // validator = this.validators[key];
|
|
|
+ // }
|
|
|
+ // if (validator) {
|
|
|
+ // let validResult = validator(value, key, data, input);
|
|
|
+ // if (validResult !== true && validResult.trim() !== "") {
|
|
|
+ // inputLabel.innerText = validResult;
|
|
|
+ // inputLabel.style.border = "1px solid red";
|
|
|
+ // validatorErrors.add(key);
|
|
|
+ // } else {
|
|
|
+ // inputLabel.innerText = "";
|
|
|
+ // inputLabel.style.border = "none";
|
|
|
+ // validatorErrors.delete(key);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // inputWrapper.append(inputLabel);
|
|
|
+
|
|
|
+ // !validatorErrors.has(key) && (this.data[key] = value);
|
|
|
+ // okButton.disabled = checkErrors();
|
|
|
+ // });
|
|
|
+
|
|
|
+ // inputWrapper.appendChild(th);
|
|
|
+ // inputWrapper.appendChild(input);
|
|
|
+ // inputBox.append(inputWrapper);
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // createInputs(data);
|
|
|
+ // okButton.disabled = checkErrors();
|
|
|
+
|
|
|
+ // function checkErrors() {
|
|
|
+ // if (requiredErrors.size === 0 && validatorErrors.size === 0) {
|
|
|
+ // return false;
|
|
|
+ // }
|
|
|
+ // return true;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (typeof okCallback === "function") {
|
|
|
+ // formBody.appendChild(okButton);
|
|
|
+ // okButton.onclick = (e) => {
|
|
|
+ // this.okCallback(data);
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (typeof cancelCallback === "function") {
|
|
|
+ // formBody.appendChild(cancelButton);
|
|
|
+
|
|
|
+ // cancelButton.onclick = () => {
|
|
|
+ // this.data = { ...initData };
|
|
|
+ // console.log(initData);
|
|
|
+ // createInputs(this.data);
|
|
|
+ // cancelCallback();
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+ // this.okCallback = okCallback;
|
|
|
+ // this.cancelCallback = cancelCallback;
|
|
|
+
|
|
|
+ // this.data = data;
|
|
|
+ // this.validators = {};
|
|
|
+ // }
|
|
|
+
|
|
|
+ // fetch("https://swapi.py4e.com/api/people/1/")
|
|
|
+ // .then((res) => res.json())
|
|
|
+ // .then((data) => {
|
|
|
+ // let form = new Form(
|
|
|
+ // formContainer,
|
|
|
+ // data,
|
|
|
+ // () => console.log("ok"),
|
|
|
+ // () => console.log("cancel")
|
|
|
+ // );
|
|
|
+ // form.okCallback = () => console.log("ok2");
|
|
|
+ // });
|
|
|
+
|
|
|
+//POWER OF CLOSURES
|
|
|
+
|
|
|
+ // function Form(el, data, okCallback, cancelCallback) {
|
|
|
+ // let formBody = document.createElement("div");
|
|
|
+ // let inputBox = document.createElement("div");
|
|
|
+ // let okButton = document.createElement("button");
|
|
|
+ // let validatorErrors = new Set();
|
|
|
+ // let requiredErrors = new Set();
|
|
|
+ // let cancelButton = document.createElement("button");
|
|
|
+ // let initData = { ...data };
|
|
|
+
|
|
|
+ // okButton.innerHTML = "OK";
|
|
|
+ // cancelButton.innerHTML = "Cancel";
|
|
|
+ // el.appendChild(formBody);
|
|
|
+ // formBody.append(inputBox);
|
|
|
+
|
|
|
+ // let inputCreators = {
|
|
|
+ // Number(key, value, oninput) {
|
|
|
+ // let input = document.createElement("input");
|
|
|
+ // input.type = "Number";
|
|
|
+
|
|
|
+ // input.value = value;
|
|
|
+ // input.oninput = () => oninput(input.value);
|
|
|
+
|
|
|
+ // return input;
|
|
|
+ // },
|
|
|
+ // String(key, value, oninput) {
|
|
|
+ // if (
|
|
|
+ // value.match(
|
|
|
+ // /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/
|
|
|
+ // )?.length
|
|
|
+ // ) {
|
|
|
+ // let btn = document.createElement("button");
|
|
|
+ // btn.innerText = value;
|
|
|
+ // btn.onclick = () => {
|
|
|
+ // fetch(value)
|
|
|
+ // .then((res) => res.json())
|
|
|
+ // .then((data) => {
|
|
|
+ // let form = new Form(
|
|
|
+ // formContainer,
|
|
|
+ // data,
|
|
|
+ // () => console.log("ok"),
|
|
|
+ // () => console.log("cancel")
|
|
|
+ // );
|
|
|
+ // form.okCallback = () => console.log("ok2");
|
|
|
+ // });
|
|
|
+ // };
|
|
|
+ // return btn;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (value.length > 20) {
|
|
|
+ // let textarea = document.createElement("textarea");
|
|
|
+ // textarea.value = value;
|
|
|
+ // textarea.oninput = () => oninput(textarea.value);
|
|
|
+ // return textarea;
|
|
|
+ // } else {
|
|
|
+ // let input = document.createElement("input");
|
|
|
+ // input.type = "text";
|
|
|
+ // if ([...value].every((el) => el === "*")) {
|
|
|
+ // input.type = "password";
|
|
|
+ // }
|
|
|
+
|
|
|
+ // input.placeholder = key;
|
|
|
+ // input.value = value;
|
|
|
+ // input.oninput = () => oninput(input.value);
|
|
|
+
|
|
|
+ // return input;
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // Boolean(key, value, oninput) {
|
|
|
+ // let input = document.createElement("input");
|
|
|
+ // input.type = "checkbox";
|
|
|
+ // input.checked = value;
|
|
|
+ // input.oninput = () => oninput(Boolean(input.checked));
|
|
|
+ // return input;
|
|
|
+ // },
|
|
|
+ // Date(key, value, oninput) {
|
|
|
+ // let input = document.createElement("input");
|
|
|
+ // let timeOffset = new Date().getTimezoneOffset();
|
|
|
+ // let dateInMillSec =
|
|
|
+ // new Date(value.toISOString()).getTime() - new Date().getTimezoneOffset() * 1000 * 60;
|
|
|
+
|
|
|
+ // input.type = "datetime-local";
|
|
|
+ // input.value = new Date(dateInMillSec).toISOString().slice(0, 16);
|
|
|
+ // input.oninput = () => oninput(new Date(input.value));
|
|
|
+ // return input;
|
|
|
+ // },
|
|
|
+ // Array(key, value, oninput) {
|
|
|
+ // let inputBox = document.createElement("div");
|
|
|
+ // value.map((element) => {
|
|
|
+ // let btn = document.createElement("button");
|
|
|
+ // btn.innerText = element;
|
|
|
+ // btn.onclick = () => {
|
|
|
+ // fetch(element)
|
|
|
+ // .then((res) => res.json())
|
|
|
+ // .then((data) => {
|
|
|
+ // let form = new Form(
|
|
|
+ // formContainer,
|
|
|
+ // data,
|
|
|
+ // () => console.log("ok"),
|
|
|
+ // () => console.log("cancel")
|
|
|
+ // );
|
|
|
+ // form.okCallback = () => console.log("ok2");
|
|
|
+
|
|
|
+ // // form.validators.surname = (value, key, data, input) =>
|
|
|
+ // // value.length > 2 && value[0].toUpperCase() == value[0] && !value.includes(" ") ? true : "Wrong surname";
|
|
|
+ // });
|
|
|
+ // };
|
|
|
+
|
|
|
+ // inputBox.append(btn);
|
|
|
+ // });
|
|
|
+ // return inputBox;
|
|
|
+ // },
|
|
|
+ // };
|
|
|
+
|
|
|
+ // let createInputs = (data) => {
|
|
|
+ // inputBox.innerHTML = "";
|
|
|
+ // for (let [key, value] of Object.entries(data)) {
|
|
|
+ // let inputWrapper = document.createElement("div");
|
|
|
+ // let inputType = value.constructor.name;
|
|
|
+ // let th = document.createElement("th");
|
|
|
+ // let inputLabel = document.createElement("label");
|
|
|
+ // let isRequired = key.trim()[0] === "*";
|
|
|
+ // let isRequiredChar = document.createElement("span");
|
|
|
+
|
|
|
+ // inputLabel.style.marginLeft = "5px";
|
|
|
+ // isRequiredChar.innerText = "* ";
|
|
|
+ // isRequiredChar.style.color = "red";
|
|
|
+
|
|
|
+ // if (isRequired) {
|
|
|
+ // th.prepend(isRequiredChar);
|
|
|
+ // }
|
|
|
+ // th.innerHTML += isRequired ? key.slice(1, key.length) : key;
|
|
|
+
|
|
|
+ // let input = inputCreators[inputType](key, value, (value) => {
|
|
|
+ // let validator;
|
|
|
+ // if (isRequired && value.trim().length === 0) {
|
|
|
+ // input.style.border = "1px solid red";
|
|
|
+ // requiredErrors.add(key);
|
|
|
+ // } else {
|
|
|
+ // inputLabel.style.border = "none";
|
|
|
+ // requiredErrors.delete(key);
|
|
|
+ // }
|
|
|
+ // if (this.validators && typeof this.validators[key] === "function") {
|
|
|
+ // validator = this.validators[key];
|
|
|
+ // }
|
|
|
+ // if (validator) {
|
|
|
+ // let validResult = validator(value, key, data, input);
|
|
|
+ // if (validResult !== true && validResult.trim() !== "") {
|
|
|
+ // inputLabel.innerText = validResult;
|
|
|
+ // inputLabel.style.border = "1px solid red";
|
|
|
+ // validatorErrors.add(key);
|
|
|
+ // } else {
|
|
|
+ // inputLabel.innerText = "";
|
|
|
+ // inputLabel.style.border = "none";
|
|
|
+ // validatorErrors.delete(key);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // inputWrapper.append(inputLabel);
|
|
|
+
|
|
|
+ // !validatorErrors.has(key) && (this.data[key] = value);
|
|
|
+ // okButton.disabled = checkErrors();
|
|
|
+ // });
|
|
|
+
|
|
|
+ // inputWrapper.appendChild(th);
|
|
|
+ // inputWrapper.appendChild(input);
|
|
|
+ // inputBox.append(inputWrapper);
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // createInputs(data);
|
|
|
+ // okButton.disabled = checkErrors();
|
|
|
+
|
|
|
+ // function checkErrors() {
|
|
|
+ // if (requiredErrors.size === 0 && validatorErrors.size === 0) {
|
|
|
+ // return false;
|
|
|
+ // }
|
|
|
+ // return true;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (typeof okCallback === "function") {
|
|
|
+ // formBody.appendChild(okButton);
|
|
|
+ // okButton.onclick = (e) => {
|
|
|
+ // this.okCallback(data);
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (typeof cancelCallback === "function") {
|
|
|
+ // formBody.appendChild(cancelButton);
|
|
|
+
|
|
|
+ // cancelButton.onclick = () => {
|
|
|
+ // this.data = { ...initData };
|
|
|
+ // console.log(initData);
|
|
|
+ // createInputs(this.data);
|
|
|
+ // cancelCallback();
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+ // this.okCallback = okCallback;
|
|
|
+ // this.cancelCallback = cancelCallback;
|
|
|
+
|
|
|
+ // this.data = data;
|
|
|
+ // this.validators = {};
|
|
|
+ // }
|
|
|
+
|
|
|
+ // fetch("https://swapi.py4e.com/api/people/1/")
|
|
|
+ // .then((res) => res.json())
|
|
|
+ // .then((data) => {
|
|
|
+ // let form = new Form(
|
|
|
+ // formContainer,
|
|
|
+ // data,
|
|
|
+ // () => console.log("ok"),
|
|
|
+ // () => console.log("cancel")
|
|
|
+ // );
|
|
|
+ // form.okCallback = () => console.log("ok2");
|
|
|
+ // });
|
|
|
+
|
|
|
+//STARWARS LOCALSTORAGE + CACHED PROMISE
|
|
|
+
|
|
|
+ // function Form(el, data, okCallback, cancelCallback) {
|
|
|
+ // let formBody = document.createElement("div");
|
|
|
+ // let inputBox = document.createElement("div");
|
|
|
+ // let okButton = document.createElement("button");
|
|
|
+ // let validatorErrors = new Set();
|
|
|
+ // let requiredErrors = new Set();
|
|
|
+ // let cancelButton = document.createElement("button");
|
|
|
+ // let initData = { ...data };
|
|
|
+
|
|
|
+ // okButton.innerHTML = "OK";
|
|
|
+ // cancelButton.innerHTML = "Cancel";
|
|
|
+ // el.appendChild(formBody);
|
|
|
+ // formBody.append(inputBox);
|
|
|
+
|
|
|
+ // let inputCreators = {
|
|
|
+ // Number(key, value, oninput) {
|
|
|
+ // let input = document.createElement("input");
|
|
|
+ // input.type = "Number";
|
|
|
+
|
|
|
+ // input.value = value;
|
|
|
+ // input.oninput = () => oninput(input.value);
|
|
|
+
|
|
|
+ // return input;
|
|
|
+ // },
|
|
|
+ // String(key, value, oninput) {
|
|
|
+ // if (
|
|
|
+ // value.match(
|
|
|
+ // /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/
|
|
|
+ // )?.length
|
|
|
+ // ) {
|
|
|
+ // let btn = document.createElement("button");
|
|
|
+ // btn.innerText = value;
|
|
|
+ // btn.onclick = () => {
|
|
|
+ // fetchWithStorage(value);
|
|
|
+ // };
|
|
|
+ // return btn;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (value.length > 20) {
|
|
|
+ // let textarea = document.createElement("textarea");
|
|
|
+ // textarea.value = value;
|
|
|
+ // textarea.oninput = () => oninput(textarea.value);
|
|
|
+ // return textarea;
|
|
|
+ // } else {
|
|
|
+ // let input = document.createElement("input");
|
|
|
+ // input.type = "text";
|
|
|
+ // if ([...value].every((el) => el === "*")) {
|
|
|
+ // input.type = "password";
|
|
|
+ // }
|
|
|
+
|
|
|
+ // input.placeholder = key;
|
|
|
+ // input.value = value;
|
|
|
+ // input.oninput = () => oninput(input.value);
|
|
|
+
|
|
|
+ // return input;
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // Boolean(key, value, oninput) {
|
|
|
+ // let input = document.createElement("input");
|
|
|
+ // input.type = "checkbox";
|
|
|
+ // input.checked = value;
|
|
|
+ // input.oninput = () => oninput(Boolean(input.checked));
|
|
|
+ // return input;
|
|
|
+ // },
|
|
|
+ // Date(key, value, oninput) {
|
|
|
+ // let input = document.createElement("input");
|
|
|
+ // let timeOffset = new Date().getTimezoneOffset();
|
|
|
+ // let dateInMillSec =
|
|
|
+ // new Date(value.toISOString()).getTime() - new Date().getTimezoneOffset() * 1000 * 60;
|
|
|
+
|
|
|
+ // input.type = "datetime-local";
|
|
|
+ // input.value = new Date(dateInMillSec).toISOString().slice(0, 16);
|
|
|
+ // input.oninput = () => oninput(new Date(input.value));
|
|
|
+ // return input;
|
|
|
+ // },
|
|
|
+ // Array(key, value, oninput) {
|
|
|
+ // let inputBox = document.createElement("div");
|
|
|
+ // value.map((element) => {
|
|
|
+ // let btn = document.createElement("button");
|
|
|
+ // btn.innerText = element;
|
|
|
+ // btn.onclick = () => fetchWithStorage(element);
|
|
|
+
|
|
|
+ // inputBox.append(btn);
|
|
|
+ // });
|
|
|
+ // return inputBox;
|
|
|
+ // },
|
|
|
+ // };
|
|
|
+
|
|
|
+ // let createInputs = (data) => {
|
|
|
+ // inputBox.innerHTML = "";
|
|
|
+ // for (let [key, value] of Object.entries(data)) {
|
|
|
+ // let inputWrapper = document.createElement("div");
|
|
|
+ // let inputType = value.constructor.name;
|
|
|
+ // let th = document.createElement("th");
|
|
|
+ // let inputLabel = document.createElement("label");
|
|
|
+ // let isRequired = key.trim()[0] === "*";
|
|
|
+ // let isRequiredChar = document.createElement("span");
|
|
|
+
|
|
|
+ // inputLabel.style.marginLeft = "5px";
|
|
|
+ // isRequiredChar.innerText = "* ";
|
|
|
+ // isRequiredChar.style.color = "red";
|
|
|
+
|
|
|
+ // if (isRequired) {
|
|
|
+ // th.prepend(isRequiredChar);
|
|
|
+ // }
|
|
|
+ // th.innerHTML += isRequired ? key.slice(1, key.length) : key;
|
|
|
+
|
|
|
+ // let input = inputCreators[inputType](key, value, (value) => {
|
|
|
+ // let validator;
|
|
|
+ // if (isRequired && value.trim().length === 0) {
|
|
|
+ // input.style.border = "1px solid red";
|
|
|
+ // requiredErrors.add(key);
|
|
|
+ // } else {
|
|
|
+ // inputLabel.style.border = "none";
|
|
|
+ // requiredErrors.delete(key);
|
|
|
+ // }
|
|
|
+ // if (this.validators && typeof this.validators[key] === "function") {
|
|
|
+ // validator = this.validators[key];
|
|
|
+ // }
|
|
|
+ // if (validator) {
|
|
|
+ // let validResult = validator(value, key, data, input);
|
|
|
+ // if (validResult !== true && validResult.trim() !== "") {
|
|
|
+ // inputLabel.innerText = validResult;
|
|
|
+ // inputLabel.style.border = "1px solid red";
|
|
|
+ // validatorErrors.add(key);
|
|
|
+ // } else {
|
|
|
+ // inputLabel.innerText = "";
|
|
|
+ // inputLabel.style.border = "none";
|
|
|
+ // validatorErrors.delete(key);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // inputWrapper.append(inputLabel);
|
|
|
+
|
|
|
+ // !validatorErrors.has(key) && (this.data[key] = value);
|
|
|
+ // okButton.disabled = checkErrors();
|
|
|
+ // });
|
|
|
+
|
|
|
+ // inputWrapper.appendChild(th);
|
|
|
+ // inputWrapper.appendChild(input);
|
|
|
+ // inputBox.append(inputWrapper);
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // createInputs(data);
|
|
|
+ // okButton.disabled = checkErrors();
|
|
|
+
|
|
|
+ // function checkErrors() {
|
|
|
+ // if (requiredErrors.size === 0 && validatorErrors.size === 0) {
|
|
|
+ // return false;
|
|
|
+ // }
|
|
|
+ // return true;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (typeof okCallback === "function") {
|
|
|
+ // formBody.appendChild(okButton);
|
|
|
+ // okButton.onclick = (e) => {
|
|
|
+ // this.okCallback(data);
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (typeof cancelCallback === "function") {
|
|
|
+ // formBody.appendChild(cancelButton);
|
|
|
+
|
|
|
+ // cancelButton.onclick = () => {
|
|
|
+ // this.data = { ...initData };
|
|
|
+ // console.log(initData);
|
|
|
+ // createInputs(this.data);
|
|
|
+ // cancelCallback();
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+ // this.okCallback = okCallback;
|
|
|
+ // this.cancelCallback = cancelCallback;
|
|
|
+
|
|
|
+ // this.data = data;
|
|
|
+ // this.validators = {};
|
|
|
+ // }
|
|
|
+
|
|
|
+ // fetchWithStorage("https://swapi.py4e.com/api/people/1/");
|
|
|
+
|
|
|
+ // function fetchWithStorage(url) {
|
|
|
+ // return new Promise((resolve) => {
|
|
|
+ // localStorage.getItem(url)
|
|
|
+ // ? resolve(JSON.parse(localStorage.getItem(url)))
|
|
|
+ // : fetch(url)
|
|
|
+ // .then((res) => res.json())
|
|
|
+ // .then((data) => resolve(data));
|
|
|
+ // }).then((data) => {
|
|
|
+ // formContainer.innerHTML = "";
|
|
|
+ // let form = new Form(
|
|
|
+ // formContainer,
|
|
|
+ // data,
|
|
|
+ // () => localStorage.setItem(url, JSON.stringify(data)),
|
|
|
+ // () => console.log("cancel")
|
|
|
+ // );
|
|
|
+ // });
|
|
|
+ // }
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
ilya_shyian