HW js10 part

js/10/tasks/index.js

@@ -51,10 +51,33 @@ function passwordWrapp() {
       }
    }
 
-   let p = new Password(document.body, true)
 
-   p.onChange = data => console.log(data)
-   p.onOpenChange = open => console.log(open)
+   let passwordInput = new Password(document.body, true)
+    let loginInput = document.createElement('input')
+    let loginButton = document.createElement('input')
+
+    loginInput.value = 'введите логин'
+    loginButton.type = 'button'
+    loginButton.value = 'Войти'
+
+    loginInput.setAttribute('oninput','f()')
+    formContainer.append(loginInput,loginButton)
+
+   function f(){
+      if ((loginInput.value.length < 1) && (passwordInput.getValue().length < 1)) {
+      loginButton.disabled=true;
+   } else
+      loginButton.disabled=false;
+   }
+   // passwordInput.oninput = f
+   // console.log(passwordInput.getValue().length)
+
+
+   // let p = new Password(document.body, true)
+
+   passwordInput.onChange = data => console.log(data)
+   // p.onOpenChange = open => console.log(open)
+
    // p.setValue('qwerty')
    // console.log(p.getValue())
    // p.setOpen(false)
@@ -363,6 +386,7 @@ function passwordVerifyWrapp2() {
 
 formWrapp()
 function formWrapp() {
+
    function Form(el, data, okCallback, cancelCallback){
       let formBody = document.createElement('div')
       let okButton = document.createElement('button')
@@ -371,46 +395,59 @@ function formWrapp() {
       let cancelButton = document.createElement('button')
       cancelButton.innerHTML = 'Cancel'
    
-      formBody.innerHTML = '<h1>тут будет форма после перервы</h1>'
+      formBody.innerHTML = '<h1>Форма</h1>'
       const table = document.createElement('table')
       formBody.append(table)
 
+      let callBackValidator = true
+      let callBackValidator2 = true
       if (typeof okCallback === 'function'){
-          formBody.appendChild(okButton);
-          okButton.onclick = (e) => {
-              console.log(this)
-              this.okCallback(e)
+         formBody.appendChild(okButton);
+         okButton.onclick = (e) => {
+            console.log(this)
+            this.okCallback(data)
+
+            if (callBackValidator && callBackValidator2) {
+
+            }
           }
       }
    
       if (typeof cancelCallback === 'function'){
-          formBody.appendChild(cancelButton);
-          cancelButton.onclick = cancelCallback
+         formBody.appendChild(cancelButton);
+         cancelButton.onclick = cancelCallback
       }
             
       let inputCreators = {
          String(key, value, oninput){
-             let input = document.createElement('input')
-             input.type = 'text'
-             input.placeholder = key
-             input.value       = value
-             input.oninput     = () => oninput(input.value)
-             return input
+            let input = document.createElement('input')
+            // console.log(value.match(/\**/)[0])
+            if (value.match(/\**/)[0] === value) {
+               input.type = 'password'
+               input.value       = ''
+               input.oninput     = () => oninput(value)
+            } else {
+               input.type = 'text'
+               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(input.checked)
-             return input
+            let input = document.createElement('input')
+            input.type = 'checkbox'
+            input.checked     = value
+            input.oninput     = () => oninput(input.checked)
+            return input
          },
          Date(key, value, oninput){
-             let input = document.createElement('input')
-             input.type = 'datetime-local'
-             // при преобразовании объекта к строке смещается часовой пояс на нулевой, выражение ниже восстанавливает текущий
-             input.value       = new Date(value - (new Date()).getTimezoneOffset() * 60 * 1000).toISOString().slice(0,-1)
-             input.oninput     = () => oninput(new Date(input.value))
-             return input
+            let input = document.createElement('input')
+            input.type = 'datetime-local'
+            // при преобразовании объекта к строке смещается часовой пояс на нулевой, выражение ниже восстанавливает текущий
+            input.value       = new Date(value - (new Date()).getTimezoneOffset() * 60 * 1000).toISOString().slice(0,-1)
+            input.oninput     = () => oninput(new Date(input.value))
+            return input
          },
          Number(key, value, oninput){
             let input = document.createElement('input')
@@ -419,7 +456,7 @@ function formWrapp() {
             input.value       = value
             input.oninput     = () => oninput(input.value)
             return input
-        },
+         },
       }
 
 
@@ -428,32 +465,55 @@ function formWrapp() {
          const tr = document.createElement('tr')
          table.append(tr)
 
+         let rowMandatory = false
          const th = document.createElement('th')
-         th.innerText = key
+         if (key[0] === '*') {
+            const thPre = document.createElement('span')
+            thPre.innerText = '* '
+            thPre.style.color = 'red'
+            th.append(thPre)
+            const thCont = document.createElement('span')
+            thCont.innerText = key.slice(1)
+            th.append(thCont)
+            rowMandatory = true
+         } else {
+            th.innerText = key
+         }
          tr.append(th)
 
          const td = document.createElement('td')
-         tr.append(td)
-  
+         tr.append(td)  
          
          const input = inputCreators[value.constructor.name](key, value, (valueOfInput) => {
             if (key in this.validators) {
                let valid = this.validators[key](valueOfInput,key,data,input)
-               console.log(valid)
+               // console.log(valid)
                if (valid === true) {
                   data[key] = valueOfInput
                   tdErr.innerText = ''
-                  input.style.color = 'black'
+                  input.style.backgroundColor = 'white'
+                  // callBackValidator = true
                } else if (typeof valid === 'string') {
                   tdErr.innerText = valid
-                  input.style.color = 'red'
+                  input.style.backgroundColor = '#800000'
+                  // callBackValidator = false
                }
             } else {
                data[key] = valueOfInput
             }
+            // debugger
+            // console.log(!valueOfInput)
+
+            if (rowMandatory && !valueOfInput) {
+               input.style.border = '4px solid red'
+               // callBackValidator2 = false
+            } else {
+               input.style.border = '1px solid rgb(118, 118, 118)'
+               // callBackValidator2 = true
+            }
          })
          // input.value = value
-         tr.append(input)
+         td.append(input)
          // input.oninput = () => {
          //    data[key] = input.value
          // }
@@ -472,16 +532,24 @@ function formWrapp() {
    
    
    let form = new Form(formContainer, {
-      name: 'Anakin',
-      surname: 'Skywalker',
+      '*name': 'Anakin',
+      '*surname': 'Skywalker',
+      fathername: 'Batkovch',
       married: true,
+      password: '***',
       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 && 
+   form.okCallback = (data) => console.log(data)
+   // form.cancelCallback = (data) => console.log(data)
+
+
+   form.validators['*surname'] = (value, key, data, input) => value.length > 2 && 
                                                        value[0].toUpperCase() == value[0] &&
-                                                      !value.includes(' ') ? true : 'Wrong name'
+                                                      !value.includes(' ') ? true : 'Wrong surname'
+   form.validators.fathername = (value, key, data, input) => value.length > 2 && 
+                                                      value[0].toUpperCase() == value[0] &&
+                                                     !value.includes(' ') ? true : 'Wrong fathername'                                                 
    console.log(form)