1<!DOCTYPE html> 2<html lang="en" style="width: 100%; height: 100%;"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Napi</title> 7</head> 8<style type="text/css"> 9 body { 10 background-color: #000000; 11 margin:0 auto; 12 font-family: Consolas, sans-serif; 13 } 14 a { 15 text-decoration: none; 16 } 17 18 button.button { 19 background-color: #ffffff; 20 font-family: Consolas, sans-serif; 21 font-size: 16px; 22 border-radius: 3px; 23 border-color: #C4C4C4; 24 align-self: center; 25 border: 1px solid #C4C4C4; 26 outline: none; 27 width: 100px; 28 height:24px 29 } 30 31 button.button:hover { 32 background: #4B97D9; 33 color: #fff; 34 border: 0px; 35 font-family: Consolas, sans-serif; 36 font-size: 16px; 37 width: 100px; 38 height: 24px 39 } 40 41 input.text:focus { 42 outline: 2px solid #4B97D9; 43 border: 0px; 44 } 45 46 input.text { 47 outline: 2px solid #C4C4C4; 48 border: 0px; 49 } 50 .tabs{ 51 position: relative; 52 height: 800px; 53 min-height: 800px; 54 max-height: 800px; 55 clear: both; 56 margin: 25px 0; 57 overflow: hidden; 58 } 59 .tab{ 60 float: left; 61 margin: 25px 0; 62 } 63 .tab label{ 64 background: #eee; 65 padding: 10px 20px; 66 position: relative; 67 left: 1px; 68 border: 0px solid; 69 margin-left: -1px; 70 z-index: 2; 71 color: #333333; 72 background: white; 73 } 74 input.text { 75 width: 250px; 76 height: 18px; 77 vertical-align:middle; 78 } 79 .content{ 80 position: absolute; 81 top: 61px; 82 left: 0; 83 right: 0; 84 bottom: 0; 85 background: black; 86 padding: 20px 20px; 87 border: 0px solid #ccc; 88 max-height: 800px; 89 overflow: scroll; 90 } 91 [type=radio]:checked ~ label{ 92 color: white; 93 background: #3288e9; 94 border: 0px solid #ccc; 95 z-index: 3; 96 } 97 [type=radio]:checked ~ label ~ .content{ 98 z-index: 1; 99 } 100</style> 101<script type="text/javascript"> 102 var mode = 0; 103 let vscode = acquireVsCodeApi(); 104 let importCheck = false; 105 106 function sendH2TsParamMsg() { 107 var fileNames = document.getElementById("hFilePath").value; 108 var genDir = document.getElementById("genHResultDir").value; 109 var buttonName = document.getElementById("okButton").textContent; 110 var result = { 111 msg: "h2ts", 112 fileNames: fileNames, 113 genDir: genDir, 114 buttonName: buttonName, 115 } 116 vscode.postMessage(result); 117 } 118 119 function selectHFilePath() { 120 var result = { 121 msg: "selectHFilePath", 122 mode: mode 123 } 124 vscode.postMessage(result); 125 } 126 127 function selectPath(message) { 128 var result = { 129 msg: message 130 } 131 vscode.postMessage(result); 132 } 133 134 function cancel() { 135 var result = { 136 msg: "cancel" 137 } 138 vscode.postMessage(result); 139 } 140 141 window.addEventListener('message', event => { 142 143 const message = event.data.msg; 144 const path = event.data.path; 145 if(message == "selectHFilePath") { 146 document.getElementById("hFilePath").value = path; 147 fillInputDir(path, message); 148 } else if(message == "selectHResultDir") { 149 document.getElementById("genHResultDir").value = path; 150 } else { 151 console.log("param is error"); 152 } 153 }) 154 155 function inputChange() { 156 var fileNames = document.getElementById("hFilePath").value; 157 fillInputDir(fileNames); 158 } 159 160 function fillInputDir(fileNames, message) { 161 var dir; 162 var fileName; 163 if (mode == 0) { 164 if (fileNames.indexOf(",") != -1) { 165 fileName = fileNames.substring(0, fileNames.indexOf(",")); 166 } else { 167 fileName = fileNames; 168 } 169 if (fileName.lastIndexOf("/") != -1) { 170 dir = fileName.substring(0, fileName.lastIndexOf("/")); 171 } else { 172 dir = fileName.substring(0, fileName.lastIndexOf("\\")); 173 } 174 document.getElementById("genHResultDir").value = dir; 175 } 176 else { 177 dir = fileNames; 178 } 179 } 180 181</script> 182<body> 183<div class="tabs"> 184 <div class="tab"> 185 <input type="radio" style="display: none;" id="tab" name="group-1"> 186 <label for="tab">Ts-Gen</label> 187 <div class="content"> 188 <table style="border-spacing:0px 5px; margin-left: 20px; margin-top: 38px; width: 500px;"> 189 <tr> 190 <td width="110px">文件路径选择:</td> 191 <td width="340px"> 192 <input class="text" type="text" id="hFilePath" onchange="inputChange()" onporpertychange="inputChange() "> 193 <img src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selectHFilePath()"> 194 </td> 195 </tr> 196 197 <tr> 198 <td>输出目录选择:</td> 199 <td> 200 <input class="text" accept="text" id="genHResultDir"> 201 <img src="./images/path.png" width="20px" height="20px" style="vertical-align:middle;" onclick="selectPath('selectHResultDir')"> 202 </td> 203 </tr> 204 <tr> 205 <td colspan="2"> 206 <button type="button" class="button" onclick="cancel()" style="background-color: #333333; border: 1px solid #333333; color: #fff;">Cancel</button> 207 <button id="okButton" type="button" class="button" onclick="sendH2TsParamMsg()" style="background-color: #4B97D9; border: 1px solid #4B97D9; color: #fff;">Ok</button> 208 <a href="https://gitee.com/openharmony/napi_generator" target="_blank"> 209 <button type="button" style="background-color: #333333; width: 20px; height: 20px; border-radius: 50%;border: none; color: #fff;">?</button> 210 </a> 211 </td> 212 </tr> 213 </table> 214 </div> 215 </div> 216</div> 217</body> 218</html>
