|
|
@@ -0,0 +1,322 @@
|
|
|
+//Password
|
|
|
+// function Password(parent, open){
|
|
|
+// let input = document.createElement('input');
|
|
|
+// input.placeholder = 'your password';
|
|
|
+// input.type = 'password';
|
|
|
+
|
|
|
+// let btn= document.createElement('button');
|
|
|
+// btn.type = 'checkbox';
|
|
|
+
|
|
|
+// parent.append(input);
|
|
|
+// parent.append(btn);
|
|
|
+
|
|
|
+// let value = '';
|
|
|
+// let innerTextForBtn = open;
|
|
|
+// btn.innerText = innerTextForBtn ? 'show password' : 'hide password';
|
|
|
+
|
|
|
+// this.setValue = newValue => {
|
|
|
+// if (newValue != ' ' && newValue && newValue !== value){
|
|
|
+// value = newValue;
|
|
|
+// }
|
|
|
+// };
|
|
|
+
|
|
|
+// this.setOpen = newOpen => {
|
|
|
+// if (newOpen != innerTextForBtn && newOpen != undefined){
|
|
|
+// innerTextForBtn = newOpen;
|
|
|
+// }
|
|
|
+// };
|
|
|
+
|
|
|
+// input.oninput = this.onChange = (input) => {
|
|
|
+// value = input.data;
|
|
|
+// };
|
|
|
+
|
|
|
+// btn.onclick = this.onOpenChange = (newOpen) => {
|
|
|
+// innerTextForBtn = !innerTextForBtn;
|
|
|
+
|
|
|
+// if(input.getAttribute('type') === 'password'){
|
|
|
+// input.type = 'text';
|
|
|
+// btn.innerHTML = 'show password';
|
|
|
+
|
|
|
+// } else if (input.getAttribute('type') === 'text') {
|
|
|
+// input.type = 'password';
|
|
|
+// btn.innerHTML = 'hide password';
|
|
|
+// }
|
|
|
+// };
|
|
|
+
|
|
|
+// this.getValue = () => value;
|
|
|
+// this.getOpen = () => innerTextForBtn;
|
|
|
+// }
|
|
|
+
|
|
|
+// let p = new Password(document.body, true);
|
|
|
+
|
|
|
+// p.onChange = data => console.log(data);
|
|
|
+// p.onOpenChange = open => console.log(open);
|
|
|
+
|
|
|
+// p.setValue('qwerty');
|
|
|
+// console.log(p.getValue());
|
|
|
+
|
|
|
+// p.setOpen(false);
|
|
|
+// console.log(p.getOpen());
|
|
|
+
|
|
|
+//LoginForm
|
|
|
+// function Login(parent){
|
|
|
+// let form = document.createElement('form');
|
|
|
+
|
|
|
+// let inputLogin = document.createElement('input');
|
|
|
+// inputLogin.placeholder = 'login';
|
|
|
+// inputLogin.type = 'text';
|
|
|
+
|
|
|
+// let inputPaswd = document.createElement('input');
|
|
|
+// inputPaswd.placeholder = 'password';
|
|
|
+// inputPaswd.type = 'password';
|
|
|
+
|
|
|
+// let btn= document.createElement('button');
|
|
|
+// btn.innerHTML = 'First, write login and password';
|
|
|
+
|
|
|
+// parent.append(form);
|
|
|
+// form.append(inputLogin);
|
|
|
+// form.append(inputPaswd);
|
|
|
+// form.append(btn);
|
|
|
+
|
|
|
+// let valueLogin = '';
|
|
|
+// let valuePaswd = '';
|
|
|
+
|
|
|
+// inputLogin.oninput = () =>{
|
|
|
+// valueLogin = inputLogin.value;
|
|
|
+// };
|
|
|
+
|
|
|
+// inputPaswd.oninput = () =>{
|
|
|
+// valuePaswd = inputPaswd.value;
|
|
|
+// };
|
|
|
+
|
|
|
+// btn.onclick = (event) =>{
|
|
|
+// event.preventDefault();
|
|
|
+// if(valueLogin === '' && valuePaswd === ''){
|
|
|
+// btn.innerHTML = 'Write login and password';
|
|
|
+// btn.style.backgroundColor = 'red';
|
|
|
+// } else {
|
|
|
+// btn.disabled = true;
|
|
|
+// btn.innerHTML = 'Sent';
|
|
|
+// btn.style.backgroundColor = 'green';
|
|
|
+// }
|
|
|
+// };
|
|
|
+// }
|
|
|
+
|
|
|
+// let p = new Login(document.body, true);
|
|
|
+
|
|
|
+
|
|
|
+//Password Verify
|
|
|
+// function Password (parent){
|
|
|
+// let pswd = document.createElement('input');
|
|
|
+// let pswdVerify = document.createElement('input');
|
|
|
+// let btn = document.createElement('button');
|
|
|
+
|
|
|
+// pswd.type = 'password';
|
|
|
+// pswdVerify.type = 'password';
|
|
|
+
|
|
|
+// btn.innerHTML = 'Check';
|
|
|
+
|
|
|
+// parent.append(pswd);
|
|
|
+// parent.append(pswdVerify);
|
|
|
+// parent.append(btn);
|
|
|
+
|
|
|
+// let valuePswd = '';
|
|
|
+// let valuePswdVerify = '';
|
|
|
+
|
|
|
+// pswdVerify.style.display = 'none';
|
|
|
+
|
|
|
+
|
|
|
+// pswd.oninput = () =>{
|
|
|
+// valuePswd = pswd.value;
|
|
|
+// };
|
|
|
+
|
|
|
+// pswdVerify.oninput = () =>{
|
|
|
+// valuePswdVerify = pswdVerify.value;
|
|
|
+// };
|
|
|
+
|
|
|
+// let p = document.createElement('p');
|
|
|
+// parent.append(p);
|
|
|
+
|
|
|
+// btn.onclick = () => {
|
|
|
+// if(valuePswd === ''){
|
|
|
+// p.innerHTML = 'Write password';
|
|
|
+// p.style.color = 'red';
|
|
|
+// } else if (pswdVerify.style.display === 'block') {
|
|
|
+// if(valuePswd === valuePswdVerify){
|
|
|
+// p.innerHTML = 'Right password';
|
|
|
+// p.style.color = 'green';
|
|
|
+// } else{
|
|
|
+// p.innerHTML = 'You made mistake';
|
|
|
+// p.style.color = 'red';
|
|
|
+// }
|
|
|
+// } else {
|
|
|
+// pswdVerify.style.display = 'block';
|
|
|
+// p.innerHTML = '';
|
|
|
+// }
|
|
|
+// };
|
|
|
+// }
|
|
|
+
|
|
|
+// let p = new Password(document.body);
|
|
|
+
|
|
|
+//Form
|
|
|
+const dateToDataTimeLocal = date => (new Date(date.getTime() - date.getTimezoneOffset() * 60000)).toISOString().slice(0, -1);
|
|
|
+dateToDataTimeLocal(new Date());
|
|
|
+
|
|
|
+function Form(el, data, okCallback, cancelCallback){
|
|
|
+ let formBody = document.createElement('div');
|
|
|
+ let okButton = document.createElement('button');
|
|
|
+ okButton.innerHTML = 'OK';
|
|
|
+
|
|
|
+ let cancelButton = document.createElement('button');
|
|
|
+ cancelButton.innerHTML = 'Cancel';
|
|
|
+
|
|
|
+ let inputCreators = {
|
|
|
+ String(key, value, oninput){
|
|
|
+ let div = document.createElement('div');
|
|
|
+ let label = document.createElement('label');
|
|
|
+ let input = document.createElement('input');
|
|
|
+ label.innerHTML = key;
|
|
|
+ input.required = true;
|
|
|
+ input.placeholder = key;
|
|
|
+ input.value = value;
|
|
|
+
|
|
|
+ if(key === 'password'){
|
|
|
+ input.type = 'password';
|
|
|
+ }
|
|
|
+
|
|
|
+ let p = document.createElement('p');
|
|
|
+ p.innerHTML = '';
|
|
|
+
|
|
|
+ input.oninput = () => {
|
|
|
+ (function() {
|
|
|
+ if (input.placeholder in this.validators) {
|
|
|
+ let x = this.validators[input.placeholder](input.value, input.placeholder, this.data, input);
|
|
|
+ if(x !== true){
|
|
|
+ p.style.color = 'red';
|
|
|
+ p.innerHTML = 'Error!';
|
|
|
+ input.style.backgroundColor = 'red';
|
|
|
+ label.appendChild(p);
|
|
|
+ } else {
|
|
|
+ p.innerHTML = '';
|
|
|
+ input.style.backgroundColor = '';
|
|
|
+ console.log(x);
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ oninput(input.value);
|
|
|
+ }
|
|
|
+ }).call(this);
|
|
|
+ }
|
|
|
+ formBody.appendChild(div);
|
|
|
+ div.appendChild(label,input);
|
|
|
+
|
|
|
+ let abbr = document.createElement('abbr');
|
|
|
+ abbr.title = 'Обязательно';
|
|
|
+ abbr.className = 'importantInput';
|
|
|
+ abbr.innerHTML = '*';
|
|
|
+ label.appendChild(abbr);
|
|
|
+
|
|
|
+ return input;
|
|
|
+ },
|
|
|
+
|
|
|
+ Boolean(key, value, oninput){
|
|
|
+ let div = document.createElement('div');
|
|
|
+ let label = document.createElement('label');
|
|
|
+ let input = document.createElement('input');
|
|
|
+ label.innerHTML = key;
|
|
|
+ input.required = true;
|
|
|
+ input.type = 'checkbox';
|
|
|
+ input.checked = value;
|
|
|
+ input.appendChild(label);
|
|
|
+ input.oninput = () => oninput(input.checked);
|
|
|
+
|
|
|
+ formBody.appendChild(div);
|
|
|
+ div.appendChild(label,input);
|
|
|
+
|
|
|
+ let abbr = document.createElement('abbr');
|
|
|
+ abbr.title = 'Обязательно';
|
|
|
+ abbr.className = 'importantInput';
|
|
|
+ abbr.innerHTML = '*';
|
|
|
+ label.appendChild(abbr);
|
|
|
+
|
|
|
+ return input;
|
|
|
+ },
|
|
|
+
|
|
|
+ Date(key, value, oninput){
|
|
|
+ let div = document.createElement('div');
|
|
|
+ let label = document.createElement('label');
|
|
|
+ let input = document.createElement('input');
|
|
|
+ label.innerHTML = key;
|
|
|
+ input.required = true;
|
|
|
+ input.type = 'datetime-local';
|
|
|
+ input.value = dateToDataTimeLocal(value);
|
|
|
+ input.onchange = () =>{
|
|
|
+ oninput(new Date(input.value));
|
|
|
+ };
|
|
|
+
|
|
|
+ formBody.appendChild(div);
|
|
|
+ div.appendChild(label,input);
|
|
|
+
|
|
|
+ let abbr = document.createElement('abbr');
|
|
|
+ abbr.title = 'Обязательно';
|
|
|
+ abbr.className = 'importantInput';
|
|
|
+ abbr.innerHTML = '*';
|
|
|
+ label.appendChild(abbr);
|
|
|
+
|
|
|
+ return input;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ for(const [key, value] of Object.entries(data)){
|
|
|
+ let input = inputCreators[value.constructor.name].call(this, key, value, newValue => {
|
|
|
+ data[key] = newValue;
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ formBody.appendChild(input);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (typeof okCallback === 'function'){
|
|
|
+ formBody.appendChild(okButton);
|
|
|
+ okButton.onclick = (e) => {
|
|
|
+ this.okCallback(e)
|
|
|
+ // console.log(this)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ if (typeof cancelCallback === 'function'){
|
|
|
+ formBody.appendChild(cancelButton);
|
|
|
+ cancelButton.onclick = () => window.location.reload();
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ el.appendChild(formBody);
|
|
|
+
|
|
|
+ this.okCallback = okCallback;
|
|
|
+ this.cancelCallback = cancelCallback;
|
|
|
+ this.data = data;
|
|
|
+ this.validators = {};
|
|
|
+};
|
|
|
+
|
|
|
+let form = new Form(formContainer, {
|
|
|
+ name: 'Anakin',
|
|
|
+ surname: 'Skywalker',
|
|
|
+ password: 'qwerty',
|
|
|
+ married: true,
|
|
|
+ birthday: new Date((new Date).getTime() - 86400000 * 30*365)
|
|
|
+}, () => console.log('ok'),() => console.log('cancel') );
|
|
|
+form.okCallback = () => console.log('ok')
|
|
|
+
|
|
|
+form.validators.name = (value, key, data, input) => value.length > 2 &&
|
|
|
+ value[0].toUpperCase() == value[0] &&
|
|
|
+ !value.includes(' ') ? true : 'Wrong name';
|
|
|
+
|
|
|
+form.validators.surname = (value, key, data, input) => value.length > 2 &&
|
|
|
+ value[0].toUpperCase() == value[0] &&
|
|
|
+ !value.includes(' ') ? true : 'Wrong name';
|
|
|
+
|
|
|
+form.validators.password = (value, key, data, input) => value.length > 5 &&
|
|
|
+ !value.includes(' ') ? true : 'Wrong name';
|
|
|
+
|
|
|
+console.log(form);
|
