首页 发现 帮助
登录
DimaBondarenko
/
HW
关注 1
点赞 0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

HWJS10.3 done

DimaBondarenko 3 年之前
父节点
7f73baa30a
当前提交
1134dcba03
共有 6 个文件被更改，包括 220 次插入 和 1 次删除
分列视图 显示文件统计
  1. 1 1
      HWJS10.2/src/js/script.js
  2. 2 0
      HWJS10.3/src/css/style.min.css
  3. 9 0
      HWJS10.3/src/css/style.min.css.map
  4. 14 0
      HWJS10.3/src/index.html
  5. 173 0
      HWJS10.3/src/js/script.js
  6. 21 0
      HWJS10.3/src/sass/style.scss

+ 1 - 1
HWJS10.2/src/js/script.js
查看文件 

@@ -117,7 +117,7 @@ function Form (parent,open){
 
     activateBtn(this.getValuePassword())
 
 }
 
 
-// let form = new Form(document.body, true);
 
+let form = new Form(document.body, true);
 
 // form.onchangeLogin = (data) => console.log(data);
 
 // form.onchangePassword = (data) => console.log(data);
 
 // form.onchangeOpen = (data) => console.log(data);

+ 2 - 0
HWJS10.3/src/css/style.min.css
查看文件 

@@ -0,0 +1,2 @@
 
+*{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0}#form-body{width:300px;padding:30px 40px;margin:0 auto;background-color:#f0f0f0;border-radius:4px;-webkit-box-shadow:0px 0.5px 30px 1px rgba(0,0,0,0.4);box-shadow:0px 0.5px 30px 1px rgba(0,0,0,0.4)}#form-body input{display:block;margin:5px 0}#form-body #error-div{background-color:red;border:1px solid black}
 
+/*# sourceMappingURL=style.min.css.map */

+ 9 - 0
HWJS10.3/src/css/style.min.css.map
查看文件 

@@ -0,0 +1,9 @@
 
+{
 
+    "version": 3,
 
+    "mappings": "AAAA,AAAA,CAAC,AAAA,CACG,UAAU,CAAE,UAAU,CACtB,MAAM,CAAE,CAAC,CACZ,AAED,AAAA,UAAU,AAAA,CACN,KAAK,CAAE,KAAK,CACZ,OAAO,CAAE,SAAS,CAClB,MAAM,CAAE,MAAM,CACd,gBAAgB,CAAE,OAAkB,CACpC,aAAa,CAAE,GAAG,CAClB,UAAU,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,eAAiB,CASnD,AAfD,AAOI,UAPM,CAON,KAAK,AAAA,CACD,OAAO,CAAE,KAAK,CACd,MAAM,CAAE,KAAK,CAChB,AAVL,AAWI,UAXM,CAWN,UAAU,AAAA,CACN,gBAAgB,CAAE,GAAG,CACrB,MAAM,CAAE,eACZ,CAAC",
 
+    "sources": [
 
+        "../sass/style.scss"
 
+    ],
 
+    "names": [],
 
+    "file": "style.min.css"
 
+}

+ 14 - 0
HWJS10.3/src/index.html
查看文件 

@@ -0,0 +1,14 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="css/style.min.css">
 
+</head>
 
+<body>
 
+    <div id='formContainer'></div>
 
+    <script src="js/script.js"></script>
 
+</body>
 
+</html>

+ 173 - 0
HWJS10.3/src/js/script.js
查看文件 

@@ -0,0 +1,173 @@
 
+function Form(el, data, okCallback, cancelCallback){
 
+    let formBody = document.createElement('div')
 
+    formBody.id = 'form-body'
 
+    let okButton = document.createElement('button')
 
+    okButton.innerHTML = 'OK'
 
+
 
+    let cancelButton = document.createElement('button')
 
+    cancelButton.innerHTML = 'Cancel'
 
+
 
+    formBody.innerHTML = '<h2>тут будет форма</h2>'
 
+    
+    let divInputs = document.createElement('div');
 
+    formBody.appendChild(divInputs);
 
+    let inputCreators = {
 
+
 
+        String(key, value, oninput){
 
+            let input = document.createElement('input');
 
+            let arrPass = []
 
+            for(let char of value){
 
+                if(char === '*'){
 
+                    arrPass.push(char)
 
+                }
 
+            }
 
+            (arrPass.length === value.length && arrPass.length >= 6) ? input.type = 'password' : input.type = 'text';
 
+            input.placeholder = (key[0] === '*' ? key.substring(1) : key);
 
+            input.value       = value
 
+            input.oninput     = () => oninput(input.value)
 
+            return input
 
+        },
 
+        Boolean(key, value, oninput){
 
+            let input = document.createElement('input');
 
+            input.checked = value;
 
+            input.type = 'checkbox';
 
+            input.oninput = () => oninput(input.checked)
 
+            return input
 
+        },
 
+        Date(key, value, oninput){
 
+            let input = document.createElement('input');
 
+            input.type = 'datetime-local';
 
+            input.placeholder = (key[0] === '*' ? key.substring(1) : key);
 
+            let timestamp = value.getTime();
 
+            input.value = ((new Date(timestamp - value.getTimezoneOffset() * 60 * 1000)).toISOString()).slice(0, -8);
 
+            input.oninput = () => oninput(new Date(input.value));
 
+            return input
 
+        },
 
+    }
 
+
 
+    
+    let firstdata = {...data}
 
+    let start = (data) => {
 
+
 
+    let arrayError = []
 
+    for (let [key,value] of Object.entries(data)){
 
+        
+        let inputCreator = inputCreators[value.constructor.name];
 
+        let errDiv = document.createElement('div');
 
+        let input = inputCreator(key,value,(value) => {
 
+
 
+            if(typeof this.validators[key] === 'function'){
 
+                let result = this.validators[key](value, key,data, input);
 
+                
+                if (result === true){
 
+                    errDiv.id = "";
 
+                    errDiv.innerText ="";
 
+                    input.style.backgroundColor = 'white';
 
+                    data[key] = value;
 
+
 
+                    i = arrayError.indexOf(key);
 
+                    if(i >= 0) {
 
+                    arrayError.splice(i,1);
 
+                    }
 
+                    
+                } else {
 
+                    errDiv.id = "error-div";
 
+                    errDiv.innerText = result + ' ' + (key[0] === '*' ? key.substring(1) : key);
 
+                    input.style.backgroundColor = 'red';
 
+
 
+                    if (!arrayError.includes(key)){
 
+                        arrayError.push(key);
 
+                    }
 
+                }
 
+            } else {
 
+                data[key] = value;
 
+            }
 
+            
+            block : {   if (arrayError.length > 0){
 
+                            okButton.disabled = true;
 
+                            break block
 
+                        }else{
 
+                            okButton.disabled = false;
 
+                        }
 
+                        for (let [key,value] of Object.entries(data)){       ////проверка обязательных *key
 
+                            if(key[0] === '*' && value === ''){                   ////находим первое пустое и break
 
+                            
+                            okButton.disabled = true;
 
+                            break block
 
+                            } else if(key[0] === '*' && value !== ''){
 
+                                okButton.disabled = false;
 
+                            } 
+                        }
 
+            }
 
+        });
 
+    
+        
+        if(key[0] === '*'){
 
+            let span = document.createElement('span');
 
+            let newKey = key.replace(/^\*(.*)/, '<span style="color:red">* </span>$1');
 
+            
+            span.innerHTML = newKey;
 
+            divInputs.appendChild(span)                           
+        } else {
 
+            let span = document.createElement('span');
 
+            span.innerHTML = key;
 
+            divInputs.appendChild(span)                  
+        }
 
+        
+        divInputs.appendChild(input);               
+        divInputs.append(errDiv);                   
+    }
 
+    
+    
+}
 
+start(data)
 
+
 
+    if (typeof okCallback === 'function'){
 
+        formBody.appendChild(okButton);
 
+        okButton.onclick = (e) => {
 
+            this.okCallback(data)
 
+        }
 
+    }
 
+
 
+    if (typeof cancelCallback === 'function'){
 
+        formBody.appendChild(cancelButton);
 
+
 
+        cancelButton.onclick = () => {
 
+            data = {...firstdata}
 
+            divInputs.innerHTML = '';
 
+            start(data)
 
+        }
 
+    }
 
+    
+    el.appendChild(formBody)
 
+
 
+    this.okCallback     = okCallback
 
+    this.cancelCallback = cancelCallback
 
+
 
+    this.data           = data
 
+    this.validators     = {}
 
+
 
+}
 
+    
+
 
+let form = new Form(formContainer, {
 
+    '*name': 'Ana',
 
+    surname: 'Sky',
 
+    '*password': '******',
 
+    married : true,
 
+    birthday: new Date((new Date).getTime() - 82800000 * 30*365)
 
+}, () => console.log('ok'),() => console.log('cancel') )
 
+
 
+form.okCallback = (data) => console.log(data)
 
+
 
+form.validators['*name'] = (value, key, data, input) => value.length > 2 && 
+                                                     value[0].toUpperCase() == value[0] &&
 
+                                                    !value.includes(' ') ? true : 'Wrong';
 
+                                                    
+form.validators.surname = (value, key, data, input) => value.length > 2 && 
+                                                    value[0].toUpperCase() == value[0] &&
 
+                                                   !value.includes(' ') ? true : 'Wrong';
 
+form.validators.birthday = (value, key, data, input) => !isNaN(value) ? true : 'Wrong';
 
+form.validators['*password'] = (value, key, data, input) => value.length >= 6 && !value.includes(' ') ? true : 'Wrong'
 
+
 
+console.log(form)

+ 21 - 0
HWJS10.3/src/sass/style.scss
查看文件 

@@ -0,0 +1,21 @@
 
+*{
 
+    box-sizing: border-box;
 
+    margin: 0;
 
+}
 
+
 
+#form-body{
 
+    width: 300px;
 
+    padding: 30px 40px;
 
+    margin: 0 auto;
 
+    background-color: rgb(240, 240, 240);
 
+    border-radius: 4px;
 
+    box-shadow: 0px 0.5px 30px 1px rgba(0, 0, 0, .4);
 
+    input{
 
+        display: block;
 
+        margin: 5px 0;
 
+    }
 
+    #error-div{
 
+        background-color: red;
 
+        border: 1px solid black
 
+    }
 
+}