|
|
@@ -0,0 +1,218 @@
|
|
|
+//debugger;
|
|
|
+function Form(el, data, okCallback, cancelCallback){
|
|
|
+
|
|
|
+ let inputCreators = {
|
|
|
+ String(key, value, oninput){
|
|
|
+ let input = document.createElement('input');
|
|
|
+ input.type = 'text'
|
|
|
+ input.placeholder = key.slice(1, key.length);
|
|
|
+ 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){
|
|
|
+ //label for с input type='checkbox' внутри
|
|
|
+ let input = document.createElement('input');
|
|
|
+ input.type = 'checkbox'
|
|
|
+ input.placeholder = key
|
|
|
+ input.checked = value
|
|
|
+ input.id = `${key}`;
|
|
|
+ input.oninput = () => oninput(input.checked)
|
|
|
+ return input
|
|
|
+ },
|
|
|
+ Date: function (key, value, oninput){
|
|
|
+ //используйте datetime-local let input = document.createElement('input');
|
|
|
+ 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
|
|
|
+
|
|
|
+ },
|
|
|
+ //и др. по вкусу, например textarea для длинных строк
|
|
|
+ }
|
|
|
+
|
|
|
+ this.validators = {};
|
|
|
+
|
|
|
+ let table = document.createElement('table');
|
|
|
+
|
|
|
+ document.body.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 tdForWrong = document.createElement('td');
|
|
|
+ const span = document.createElement('span');
|
|
|
+ const spanKey = document.createElement('span');
|
|
|
+ let input = inputCreators[value.constructor.name](key, value, function enterPlase (value){
|
|
|
+ data[key] = value;
|
|
|
+ })
|
|
|
+
|
|
|
+ input.addEventListener('input', () => {
|
|
|
+
|
|
|
+ let resultInputValue = input.value;
|
|
|
+ let resultValadators = true;
|
|
|
+
|
|
|
+ if (value.constructor.name === Boolean) {
|
|
|
+ resultInputValue = input.checked;
|
|
|
+ };
|
|
|
+
|
|
|
+ if (typeof this.validators[key] === 'function') {
|
|
|
+ resultValadators = this.validators[key](resultInputValue, key, data, input);
|
|
|
+
|
|
|
+
|
|
|
+ if (typeof resultValadators === 'string') {
|
|
|
+ resultValadators = false;
|
|
|
+ input.style.backgroundColor = 'red';
|
|
|
+ tdForWrong.innerHTML = ` ${this.validators[key](resultInputValue, key, data, input)}`
|
|
|
+ }
|
|
|
+ if (resultValadators) {
|
|
|
+ input.style.backgroundColor = 'white';
|
|
|
+ tdForWrong.innerHTML = ` `;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ resultInputValue === '' ? input.style.border = '3px solid red': input.style.border = null;
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ if (key.charAt(0) === '*') {
|
|
|
+ const start = key.charAt(0);
|
|
|
+ spanKey.innerHTML = `${key.slice(1, key.length)}`;
|
|
|
+ span.style.color = 'red';
|
|
|
+ span.innerText = `${start} `;
|
|
|
+
|
|
|
+ } else {
|
|
|
+ spanKey.innerHTML = key;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ table.append(tr);
|
|
|
+ tr.append(th);
|
|
|
+ tr.append(td);
|
|
|
+ th.appendChild(span);
|
|
|
+ th.append(spanKey);
|
|
|
+ td.appendChild(input);
|
|
|
+ tr.append(tdForWrong);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ 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';
|
|
|
+
|
|
|
+ okButton.addEventListener('click', () => {
|
|
|
+ let countKey = 0;
|
|
|
+ let countvalidators = 0;
|
|
|
+
|
|
|
+ for (let [key, value] of Object.entries(data)) {
|
|
|
+ let resultInputValue = value;
|
|
|
+ let resultValadators = true;
|
|
|
+ let input = document.getElementById(value);
|
|
|
+
|
|
|
+ if (typeof this.validators[key] === 'function') {
|
|
|
+ resultValadators = this.validators[key](resultInputValue, key, data, input);
|
|
|
+
|
|
|
+ if (typeof resultValadators === 'string') {
|
|
|
+ resultValadators = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (resultValadators && resultInputValue ) {
|
|
|
+ countvalidators++;
|
|
|
+ }
|
|
|
+
|
|
|
+ countKey++;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (countKey === countvalidators) {
|
|
|
+ this.okCallback(data);
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ let cancelButton = document.createElement('button')
|
|
|
+ cancelButton.innerHTML = 'Cancel'
|
|
|
+
|
|
|
+ formBody.innerHTML = '<h1>тут будет форма после перервы</h1>'
|
|
|
+
|
|
|
+ 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 okCallback === 'function'){
|
|
|
+ formBody.appendChild(okButton);
|
|
|
+ okButton.onclick = (e) => {
|
|
|
+ //console.log(this)
|
|
|
+ this.okCallback(e)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ 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(document.body, {
|
|
|
+ '*name': 'Anaaa',
|
|
|
+ surname: 'Skywalker',
|
|
|
+ married: true,
|
|
|
+ birthday: new Date((new Date).getTime() - 86400000 * 30*365)
|
|
|
+}, () => console.log('ok'),() => console.log('cancel') )
|
|
|
+form.okCallback = (what) => console.log(what)
|
|
|
+
|
|
|
+form.validators.surname = (value, key, data, input) => value.length > 2 &&
|
|
|
+ value[0].toUpperCase() == value[0] &&
|
|
|
+ !value.includes(' ') ? true : 'Wrong name'
|
|
|
+//console.log(form)
|
|
|
+
|
