123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486 |
- // 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";
|