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: var(--vscode-editor-background, #000000); 11 margin:0 auto; 12 font-family: "Microsoft YaHei"; 13 opacity: 0.9; 14 } 15 a { 16 text-decoration: none; 17 } 18 19 button.button { 20 background-color: #ffffff; 21 font-family: Consolas, sans-serif; 22 font-size: 16px; 23 border-radius: 3px; 24 border-color: #C4C4C4; 25 align-self: center; 26 border: 1px solid #C4C4C4; 27 outline: none; 28 width: 100px; 29 height:24px 30 } 31 32 input.text { 33 width: 250px; 34 vertical-align:middle; 35 36 background-color: var(--vscode-editor-background, #000000); 37 color: var(--vscode-editor-foreground, #ffffff); 38 border-radius: 6px; 39 border: 1px solid #555555; 40 opacity: 0.9; 41 height: 24px; 42 } 43 input.text:hover { 44 outline: none; 45 border-color: var(--vscode-focusBorder, #272727); 46 } 47 48 .tabs{ 49 position: relative; 50 height: 800px; 51 min-height: 800px; 52 max-height: 800px; 53 clear: both; 54 margin: 25px 0; 55 overflow: hidden; 56 } 57 .tab{ 58 float: left; 59 margin: 25px 0; 60 } 61 .tab label{ 62 background: #eee; 63 padding: 10px 20px; 64 position: relative; 65 left: 1px; 66 border: 0px solid; 67 margin-left: -1px; 68 z-index: 2; 69 color: #333333; 70 background: white; 71 } 72 73 [type=radio]:checked ~ label{ 74 color: white; 75 background: #3288e9; 76 border: 0px solid #ccc; 77 z-index: 3; 78 } 79 [type=radio]:checked ~ label ~ .content{ 80 z-index: 1; 81 } 82</style> 83<script type="text/javascript"> 84 var mode = 0; 85 let vscode = acquireVsCodeApi(); 86 87 function sendParamMsg() { 88 var fileNames = document.getElementById("hFilePath").value; 89 var genDir = document.getElementById("genHResultDir").value; 90 var serviceId = document.getElementById("serviceID").value; 91 var buttonName = document.getElementById("okButton").textContent; 92 var result = { 93 msg: "param", 94 fileNames: fileNames, 95 genDir: genDir, 96 serviceId: serviceId, 97 buttonName: buttonName, 98 } 99 vscode.postMessage(result); 100 } 101 function selectHFilePath() { 102 var fileNames = document.getElementById("hFilePath").value; 103 var result = { 104 msg: "selectHFilePath", 105 mode: mode, 106 filePath: fileNames 107 } 108 vscode.postMessage(result); 109 } 110 111 function selectPath(message) { 112 var genDir = document.getElementById("genHResultDir").value; 113 var result = { 114 msg: message, 115 filePath: genDir 116 } 117 vscode.postMessage(result); 118 } 119 120 function cancel() { 121 var result = { 122 msg: "cancel" 123 } 124 vscode.postMessage(result); 125 } 126 127 window.addEventListener('message', event => { 128 const message = event.data.msg; 129 const path = event.data.path; 130 if(message == "selectHFilePath") { 131 document.getElementById("hFilePath").value = path; 132 fillInputDir(path); 133 } else if(message == "selectHResultDir") { 134 document.getElementById("genHResultDir").value = path; 135 } else if (message == "colorThemeChanged") { 136 reloadFileImgPic(); 137 } 138 else { 139 console.log("param is error"); 140 } 141 }) 142 143 function inputChange() { 144 var fileNames = document.getElementById("hFilePath").value; //interfaceFile 145 fillInputDir(fileNames); 146 } 147 148 function fillInputDir(fileNames) { 149 var dir; 150 var fileName; 151 if (mode == 0) { 152 if (fileNames.indexOf(",") != -1) { 153 fileName = fileNames.substring(0, fileNames.indexOf(",")); 154 } else { 155 fileName = fileNames; 156 } 157 if (fileName.lastIndexOf("/") != -1) { 158 dir = fileName.substring(0, fileName.lastIndexOf("/")); 159 } else { 160 dir = fileName.substring(0, fileName.lastIndexOf("\\")); 161 } 162 } 163 else { 164 dir = fileNames; 165 } 166 document.getElementById("genHResultDir").value = dir; 167 } 168 169 function onInput(event) { 170 var value = event.target.value; 171 checkServiceId(value); 172 } 173 174 function checkServiceId(value) { 175 if (value<1 || value>16777215) { 176 document.getElementById("error").style.display=""; 177 document.getElementById("error").innerHTML="serviceID范围错误, 请输入0-16777215之间的数字" 178 } else { 179 document.getElementById("error").style.display="none"; 180 document.getElementById("error").innerHTML=""; 181 } 182 } 183 184 function isDarkColor(colorArr) { 185 let grayLevel = colorArr[0] * 0.299 + colorArr[1] * 0.587 + colorArr[2] * 0.114; 186 return grayLevel < 192; 187 } 188 189 function reloadFileImgPic() { 190 var bodyobj = document.getElementsByTagName("body")[0]; 191 var bgStyle = document.defaultView.getComputedStyle(bodyobj, null); 192 var bgColor = bgStyle.getPropertyValue("background-color").match(/\d{1,3}/g); 193 var isDarkBackground = true; 194 if (bgColor) { 195 isDarkBackground = isDarkColor(bgColor); 196 } 197 198 var fileImgPng = isDarkBackground ? "file.png" : "file_black.png" 199 var currentFileImgPath = document.getElementById("hFilePathImg").src; 200 var fileImgPath = currentFileImgPath.substr(0, currentFileImgPath.lastIndexOf("/") + 1); 201 fileImgPath += fileImgPng; 202 document.getElementById("hFilePathImg").src = fileImgPath; 203 document.getElementById("genHResultDirImg").src = fileImgPath; 204 } 205</script> 206 207<body> 208 <div class="tabs"> 209 <div class="tab"> 210 <input type="radio" style="display: none;" id="tab2" name="group-1"> 211 <label for="tab2">Gen-Service</label> 212 <div class="content"> 213 <table style="border-spacing:0px 5px; margin-left: 20px; margin-top: 38px; width: 500px;"> 214 <tr> 215 <td width="110px">.h文件选择*:</td> 216 <td width="340px"> 217 <input class="text" type="text" id="hFilePath" onchange="inputChange()" onporpertychange="inputChange() "> 218 <img id="hFilePathImg" src="./images/file.png" width="20px" height="20px" style="vertical-align:middle;" 219 onclick="selectHFilePath()"> 220 </td> 221 </tr> 222 223 <tr> 224 <td>输出路径选择:</td> 225 <td> 226 <input class="text" accept="text" id="genHResultDir"> 227 <img id="genHResultDirImg" src="./images/path.png" width="20px" height="20px" style="vertical-align:middle;" 228 onclick="selectPath('selectHResultDir')"> 229 </td> 230 </tr> 231 232 <tr> 233 <td>serviceID:</td> 234 <td> 235 <input class="text" type="number" id="serviceID" placeholder="1-16777215" oninput="onInput(event)" onpropertychange="onInput(event)"/> 236 <a href="" target="_blank" title="Please refer to system_ability_definition.h (OpenHarmony source code), and do not use the occupied serviceID."> 237 <button type="button" style="background-color: #333333; width: 20px; height: 20px; border-radius: 50%;border: none; color: #fff;">?</button> 238 </a> 239 240 </td> 241 </tr> 242 243 <tr> 244 <td></td> 245 <td> 246 <span id="error" style="color:red; display: none; background-color: transparent;"></span> 247 </td> 248 </tr> 249 250 <tr> 251 <td colspan="2"> 252 <button type="button" class="button" onclick="cancel()" 253 style="background-color: #333333; border: 1px solid #333333; color: #fff;">Cancel</button> 254 <button id="okButton" type="button" class="button" onclick="sendParamMsg()" 255 style="background-color: #4B97D9; border: 1px solid #4B97D9; color: #fff;">Ok</button> 256 <a href="https://gitee.com/openharmony/napi_generator" target="_blank"> 257 <button type="button" 258 style="background-color: #333333; width: 20px; height: 20px; border-radius: 50%;border: none; color: #fff;">?</button> 259 </a> 260 </td> 261 </tr> 262 </table> 263 </div> 264 </div> 265 </div> 266</body> 267</html> 268<script> 269 reloadFileImgPic(); 270</script>
