|
|
@@ -0,0 +1,486 @@
|
|
|
+// function Password(parent, open) {
|
|
|
+// let input = document.createElement('input');
|
|
|
+// input.placeholder = 'password';
|
|
|
+// let checkbox = document.createElement('input');
|
|
|
+// checkbox.type = 'checkbox';
|
|
|
+// let param = document.createElement('label');
|
|
|
+// param.innerText = 'увидеть пароль :';
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// if ( open === true) {
|
|
|
+// input.type = 'text';
|
|
|
+// } else {
|
|
|
+// input.type = 'password';
|
|
|
+// }
|
|
|
+
|
|
|
+// this.setValue = function(value) {
|
|
|
+// input.value = value ;
|
|
|
+// }
|
|
|
+
|
|
|
+// this.getValue = function() {
|
|
|
+// console.log(input.value);
|
|
|
+// return input.value;
|
|
|
+// };
|
|
|
+// this.setOpen = function (value) {
|
|
|
+// if (value === true) {
|
|
|
+// input.type = 'text';
|
|
|
+// open = value;
|
|
|
+// }else {
|
|
|
+// input.type = 'password';
|
|
|
+// open = value;
|
|
|
+// }
|
|
|
+// };
|
|
|
+// this.getOpen = function () {
|
|
|
+// console.log(open);
|
|
|
+// return open;
|
|
|
+// }
|
|
|
+
|
|
|
+// input.oninput = (e) => {
|
|
|
+// if(typeof this.onChange === 'function') {
|
|
|
+// this.onChange(e.target.value);
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// checkbox.onclick = (e) => {
|
|
|
+// if(input.type === 'text') {
|
|
|
+// input.type = 'password';
|
|
|
+// open = false;
|
|
|
+// }else if (input.type === 'password') {
|
|
|
+// input.type = 'text';
|
|
|
+// open = true;
|
|
|
+// }
|
|
|
+// if (typeof this.onOpenChange === 'function') {
|
|
|
+// this.onOpenChange(open);
|
|
|
+// }
|
|
|
+// };
|
|
|
+
|
|
|
+
|
|
|
+// parent.appendChild(param);
|
|
|
+// parent.appendChild(input);
|
|
|
+// param.appendChild(checkbox);
|
|
|
+
|
|
|
+// }
|
|
|
+
|
|
|
+ // let formP = new Password(containerPassword, true);
|
|
|
+ // formP.onOpenChange = (open) => console.log(open);
|
|
|
+ // formP.onChange = (password) => {
|
|
|
+ // console.log(password);
|
|
|
+ // };
|
|
|
+ // formP.setValue('Введите ваш пароль');
|
|
|
+ // formP.setOpen(false);
|
|
|
+ // formP.getValue();
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// function Login(parent, open) {
|
|
|
+// let input = document.createElement('input');
|
|
|
+// input.placeholder = 'login';
|
|
|
+// let checkbox = document.createElement('input');
|
|
|
+// checkbox.type = 'checkbox';
|
|
|
+// let param = document.createElement('label');
|
|
|
+// param.innerText = 'увидеть пароль :';
|
|
|
+// let btn = document.createElement('button');
|
|
|
+// btn.innerText = 'Введите Логин';
|
|
|
+// btn.setAttribute('disabled', 'disabled');
|
|
|
+// let check = document.createElement('input');
|
|
|
+// check.type = 'checkbox';
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// if ( open === true) {
|
|
|
+// input.type = 'text';
|
|
|
+// } else {
|
|
|
+// input.type = 'password';
|
|
|
+// }
|
|
|
+
|
|
|
+// let value = new Password(containerPassword, false);
|
|
|
+// value.onChange = () => {
|
|
|
+// if(pass.getValue() !=='' && input.value !== ''){
|
|
|
+// button.removeAttribute('disabled');
|
|
|
+// }else {
|
|
|
+// button.setAttribute('disabled', 'disabled');
|
|
|
+// }
|
|
|
+// };
|
|
|
+
|
|
|
+// input.oninput = (e) => {
|
|
|
+// if(pass.getValue() !== '' && input.value !== '') {
|
|
|
+// button.removeAttribute('disabled');
|
|
|
+// }else {
|
|
|
+// button.setAttribute('disabled', 'disabled');
|
|
|
+// }
|
|
|
+// };
|
|
|
+
|
|
|
+// check.onclick = (e) => {
|
|
|
+// if(input.type === 'text') {
|
|
|
+// input.type = 'password';
|
|
|
+// open = false;
|
|
|
+// }else if (input.type === 'password') {
|
|
|
+// input.type = 'text';
|
|
|
+// open = true;
|
|
|
+// }
|
|
|
+// };
|
|
|
+
|
|
|
+// parent.appendChild(input);
|
|
|
+// parent.appendChild(label);
|
|
|
+// label.appendChild(check);
|
|
|
+// parent.appendChild(br);
|
|
|
+// parent.appendChild(button);
|
|
|
+// }
|
|
|
+
|
|
|
+// let Log = new Login(containerLogin, false);
|
|
|
+
|
|
|
+//LoginForm
|
|
|
+// function Login(parent, open) {
|
|
|
+// let input = document.createElement('input');
|
|
|
+// input.placeholder = 'login';
|
|
|
+// let param = document.createElement('label');
|
|
|
+// param.innerText = 'Введите логин';
|
|
|
+// let br = document.createElement('br');
|
|
|
+// let button = document.createElement('button');
|
|
|
+// button.innerText = 'Push';
|
|
|
+// button.setAttribute('disabled', 'disabled');
|
|
|
+// let check = document.createElement('input');
|
|
|
+// check.type = 'checkbox';
|
|
|
+
|
|
|
+// if (open === true) {
|
|
|
+// input.type = 'text';
|
|
|
+// } else {
|
|
|
+// input.type = 'password';
|
|
|
+// }
|
|
|
+
|
|
|
+// let pass = new Password(containerPassword, false);
|
|
|
+
|
|
|
+// pass.onChange = () => {
|
|
|
+// if (pass.getValue() !== '' && input.value !== '') {
|
|
|
+// button.removeAttribute('disabled');
|
|
|
+// } else {
|
|
|
+// button.setAttribute('disabled', 'disabled');
|
|
|
+// }
|
|
|
+// };
|
|
|
+
|
|
|
+// input.oninput = (e) => {
|
|
|
+// if (pass.getValue() !== '' && input.value !== '') {
|
|
|
+// button.removeAttribute('disabled');
|
|
|
+// } else {
|
|
|
+// button.setAttribute('disabled', 'disabled');
|
|
|
+// }
|
|
|
+// };
|
|
|
+
|
|
|
+// check.onclick = (e) => {
|
|
|
+// if (input.type === 'text') {
|
|
|
+// input.type = 'password';
|
|
|
+// open = false;
|
|
|
+// } else if (input.type === 'password') {
|
|
|
+// input.type = 'text';
|
|
|
+// open = true;
|
|
|
+// }
|
|
|
+// };
|
|
|
+// parent.appendChild(input);
|
|
|
+// parent.appendChild(param);
|
|
|
+// param.appendChild(check);
|
|
|
+// parent.appendChild(br);
|
|
|
+// parent.appendChild(button);
|
|
|
+// }
|
|
|
+
|
|
|
+// let log = new Login(containerLogin, false);
|
|
|
+
|
|
|
+
|
|
|
+// LoginForm Constructor_____________________________________
|
|
|
+
|
|
|
+// function Passw(parent, open) {
|
|
|
+// let checkbox = document.createElement("input");
|
|
|
+// checkbox.type = "checkbox";
|
|
|
+// checkbox.checked = open;
|
|
|
+// let br = document.createElement('br');
|
|
|
+// let password = document.createElement("input");
|
|
|
+// let button = document.createElement("button");
|
|
|
+// let login = document.createElement("input");
|
|
|
+
|
|
|
+
|
|
|
+// button.innerText = "Push";
|
|
|
+// button.disabled = true;
|
|
|
+
|
|
|
+// this.sP = (paramValue) => (login.value = paramValue);
|
|
|
+// this.gP = () => login.value;
|
|
|
+
|
|
|
+// this.sP2 = (paramValue) => (password.value = paramValue);
|
|
|
+// this.gP2 = () => password.value;
|
|
|
+
|
|
|
+// this.sO = () => {
|
|
|
+// checkbox.checked ? (password.type = "text") : (password.type = "password");
|
|
|
+// };
|
|
|
+// this.gO = () => {
|
|
|
+// checkbox.checked ? (password.type = "text") : (password.type = "password");
|
|
|
+// };
|
|
|
+// checkbox.onchange = () => {
|
|
|
+// checkbox.checked ? this.sO() : this.gO();
|
|
|
+// };
|
|
|
+
|
|
|
+// login.oninput = () => this.onChange(login.value);
|
|
|
+// password.oninput = () => this.onChange(password.value);
|
|
|
+// this.sA = (openCheck) => (button.disabled = openCheck);
|
|
|
+// this.gA = () => button.disabled;
|
|
|
+// const letsCheck = () =>
|
|
|
+// this.gP () !== "" && this.gP2() !== ""
|
|
|
+// ? this.sA(false)
|
|
|
+// : this.sA(true);
|
|
|
+
|
|
|
+// this.onChange = () => letsCheck();
|
|
|
+
|
|
|
+// parent.append(login);
|
|
|
+// parent.append(br);
|
|
|
+// parent.append(password);
|
|
|
+// parent.append(checkbox);
|
|
|
+// parent.append(button);
|
|
|
+// }
|
|
|
+// let p = new Passw(wrapper, true);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// Password Verify__________________________
|
|
|
+// function Password(parent, open) {
|
|
|
+// const password = document.createElement("input");
|
|
|
+// const checkbox = document.createElement("input");
|
|
|
+// checkbox.type = "checkbox";
|
|
|
+// checkbox.checked = open;
|
|
|
+// const login = document.createElement("input");
|
|
|
+// const button = document.createElement("button");
|
|
|
+// button.innerText = "Push";
|
|
|
+// button.disabled = true;
|
|
|
+
|
|
|
+// this.sP = (paramValue) => (login.value = paramValue);
|
|
|
+// this.gP = () => login.value;
|
|
|
+
|
|
|
+// this.sP2 = (paramValue) => (password.value = paramValue);
|
|
|
+// this.gP2 = () => password.value;
|
|
|
+
|
|
|
+// checkbox.onchange = () => {
|
|
|
+// if(checkbox.checked) {
|
|
|
+// login.type = "text";
|
|
|
+// login.remove();
|
|
|
+// button.remove() }
|
|
|
+// else {
|
|
|
+// login.type = "password";
|
|
|
+// parent.append(login,button);
|
|
|
+// }
|
|
|
+// };
|
|
|
+
|
|
|
+// this.setLogin = () => {
|
|
|
+// password.type = "password" ? (login.style.display = "none") : (login.style.display = "");
|
|
|
+// };
|
|
|
+// this.activeButton = (password, login) => {
|
|
|
+// password.value == login.value ? (button.disabled = false) : (button.disabled = true);
|
|
|
+// };
|
|
|
+// password.oninput = () => {
|
|
|
+// this.activeButton(password, login);
|
|
|
+// };
|
|
|
+// login.oninput = () => {
|
|
|
+// this.activeButton(password, login);
|
|
|
+// };
|
|
|
+
|
|
|
+// parent.append(password);
|
|
|
+// parent.append(checkbox);
|
|
|
+// parent.append(login);
|
|
|
+// parent.append(button);
|
|
|
+// }
|
|
|
+// let p = new Password(wrapper, true);
|
|
|
+
|
|
|
+
|
|
|
+// Form_________________________________________
|
|
|
+
|
|
|
+
|
|
|
+function Form(el, data, okCallback, cancelCallback) {
|
|
|
+ let inputCreators = {String(key, value, oninput) {
|
|
|
+ let input = document.createElement("input");
|
|
|
+ input.type = "text";
|
|
|
+ input.placeholder = key[0] === "*" ? key.slice(1, key.length) : key;
|
|
|
+ input.id = `${key}`;
|
|
|
+
|
|
|
+ if (value.charAt(0) === "*") {
|
|
|
+ data[key] = "";
|
|
|
+ input.type = "password";
|
|
|
+ input.placeholder = "password";
|
|
|
+ input.id = `${key}`;
|
|
|
+ input.oninput = () => oninput(input.value);
|
|
|
+ return input;
|
|
|
+ }
|
|
|
+ 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.onchange = () => oninput(input.checked);
|
|
|
+ input.id = `${key}`;
|
|
|
+ return input;
|
|
|
+ },
|
|
|
+ Date: function (key, value, oninput) {
|
|
|
+ let input = document.createElement("input");
|
|
|
+ input.type = "datetime-local";
|
|
|
+ input.placeholder = key;
|
|
|
+ input.id = `${key}`;
|
|
|
+ input.value = value.toISOString().slice(0, -1);
|
|
|
+ input.oninput = () => oninput(Date(input.value));
|
|
|
+ return input;
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ this.validators = {};
|
|
|
+
|
|
|
+ let table = document.createElement("table");
|
|
|
+ formContainer.appendChild(table);
|
|
|
+
|
|
|
+ for (let [key, value] of Object.entries(data)) {
|
|
|
+ let tr = document.createElement("tr");
|
|
|
+ let th = document.createElement("th");
|
|
|
+ let td = document.createElement("td");
|
|
|
+ let tdError = document.createElement("td");
|
|
|
+ const span = document.createElement("span");
|
|
|
+ const spanValue = document.createElement("span");
|
|
|
+
|
|
|
+ let input = inputCreators[data[key].constructor.name](
|
|
|
+ key,
|
|
|
+ data[key],
|
|
|
+ (value) => {
|
|
|
+ data[key] = value;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ input.onchange = () => {
|
|
|
+ let valueInput = input.value;
|
|
|
+ let valueVal = true;
|
|
|
+
|
|
|
+ if (value.constructor.name === Boolean) {
|
|
|
+ valueInput = input.checked;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (typeof this.validators[key] === "function") {
|
|
|
+ valueVal = this.validators[key](valueInput,key,data,input);
|
|
|
+
|
|
|
+ if (typeof valueVal === "string") {
|
|
|
+ valueVal = false;
|
|
|
+ input.style.backgroundColor = "#95adab";
|
|
|
+ tdError.innerHTML = ` ${this.validators[key](valueInput,key,data,input)}`;
|
|
|
+ }
|
|
|
+ if (valueVal) {
|
|
|
+ input.style.backgroundColor = "white";
|
|
|
+ tdError.innerHTML = ` `;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ valueInput === "" ? (input.style.border = "1px solid rgb(255, 13, 0)") : (input.style.border = null);
|
|
|
+
|
|
|
+ if (key[0] == "*") {
|
|
|
+ if (data[key] == "") {
|
|
|
+ input.style.backgroundColor = "#95adab";
|
|
|
+ } else {
|
|
|
+ input.style.backgroundColor = "white";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ if (key[0] === "*") {
|
|
|
+ const start = key.charAt(0);
|
|
|
+ spanValue.innerHTML = `${key.slice(1, key.length)}`;
|
|
|
+ span.innerText = `${start} `;
|
|
|
+ } else {
|
|
|
+ spanValue.innerHTML = key;
|
|
|
+ }
|
|
|
+ table.append(tr);
|
|
|
+ tr.append(th);
|
|
|
+ tr.append(td);
|
|
|
+ tr.append(tdError);
|
|
|
+ td.appendChild(input);
|
|
|
+ th.appendChild(span);
|
|
|
+ th.append(spanValue);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ this.copyData = { ...data };
|
|
|
+
|
|
|
+ this.checkInput = function () {
|
|
|
+ let input = document.querySelector(input);
|
|
|
+ input.value;
|
|
|
+ };
|
|
|
+
|
|
|
+ let formBody = document.createElement("div");
|
|
|
+ let okButton = document.createElement("button");
|
|
|
+ okButton.innerHTML = "OK";
|
|
|
+
|
|
|
+ if (typeof okCallback === "function") {
|
|
|
+ formBody.appendChild(okButton);
|
|
|
+ okButton.onclick = (e) => {
|
|
|
+ let keyValue = 0;
|
|
|
+ let countVal = 0;
|
|
|
+
|
|
|
+ for (let [key, value] of Object.entries(data)) {
|
|
|
+ let valueInput = value;
|
|
|
+ let valueVal = true;
|
|
|
+ if (valueVal && valueInput) {
|
|
|
+ countVal++;
|
|
|
+ }
|
|
|
+ keyValue++;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (keyValue === countVal) {
|
|
|
+ console.log(this);
|
|
|
+ this.okCallback(this.data);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ let cancelButton = document.createElement("button");
|
|
|
+ cancelButton.innerHTML = "Cancel";
|
|
|
+
|
|
|
+ cancelButton.addEventListener("click", () => {
|
|
|
+ console.log(this.copyData);
|
|
|
+
|
|
|
+ for (let [key, value] of Object.entries(this.copyData)) {
|
|
|
+ let input = document.getElementById(key);
|
|
|
+
|
|
|
+ if (value.constructor.name === "String") {
|
|
|
+ input.value = `${value}`;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (value.constructor.name === "Boolean") {
|
|
|
+ input.checked = `${value}`;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (value.constructor.name === "Date") {
|
|
|
+ input.value = value.toISOString().slice(0, -1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (typeof cancelCallback === "function") {
|
|
|
+ formBody.appendChild(cancelButton);
|
|
|
+ cancelButton.onclick = cancelCallback;
|
|
|
+ }
|
|
|
+
|
|
|
+ el.appendChild(formBody);
|
|
|
+
|
|
|
+ this.okCallback;
|
|
|
+ this.cancelCallback = cancelCallback;
|
|
|
+ this.data = data;
|
|
|
+}
|
|
|
+
|
|
|
+let form = new Form(
|
|
|
+ formContainer,
|
|
|
+ {
|
|
|
+ "*name": "Anakin",
|
|
|
+ surname: "Skywalker",
|
|
|
+ married: true,
|
|
|
+ password: "******",
|
|
|
+ birthday: new Date(new Date().getTime() - 86400000 * 30 * 365),
|
|
|
+ },
|
|
|
+ () => console.log("ok"),
|
|
|
+ () => console.log("cancel")
|
|
|
+);
|
|
|
+
|
|
|
+form.okCallback = (data) => console.log(data);
|
|
|
+
|
|
|
+form.validators.surname = (value, key, data, input) =>
|
|
|
+ value.length > 2 && value[0].toUpperCase() == value[0] && !value.includes(" ")
|
|
|
+ ? true
|
|
|
+ : "Wrong name";
|
