can go to asn1 parser for hex and base64

TheBestTvarynka · TheBestTvarynka · commit 72c213994460 · 2022-04-22T22:08:06.000+03:00
diff --git a/img/linking1.png b/img/linking1.png
diff --git a/src/index.html b/src/index.html
@@ -11,7 +11,7 @@
     <script src="script.js"></script>
 </head>
 
-<body>
+<body onload="toggleAsn1Button()">
     <header>
         <span class="title">Bytes formatter</span>
         <span>The purpose of this tool is to convert bytes between different representations. See <a
@@ -27,7 +27,7 @@
                 <option value="ascii">Ascii</option>
             </select>
             <span>out:</span>
-            <select id="outType">
+            <select id="outType" onchange="toggleAsn1Button()">
                 <option value="decimal">Decimal</option>
                 <option value="decimalArray">Decimal array</option>
                 <option value="hex" selected>Hex</option>
@@ -45,6 +45,10 @@
             <div class="tool" onclick="copyOutputData()">
                 <img src="../img/copy.png" alt="copy" />
             </div>
+            <div id="asn1Tool" class="hide labeledTool" onclick="decodeAsAsn1()">
+                <img src="../img/linking1.png" alt="asn1" />
+                <span>asn1</span>
+            </div>
         </div>
     </article>
     <footer>
diff --git a/src/script.js b/src/script.js
@@ -81,14 +81,7 @@ const decode = () => {
   const inData = document.getElementById('inData').value;
   const outData = document.getElementById('outData');
 
-  console.dir({ inType, outType, inData });
-
-  const bytes = parsers[inType](inData);
-  const value = formatters[outType](bytes);
-
-  console.log({ bytes, value });
-
-  outData.value = value;
+  outData.value = formatters[outType](parsers[inType](inData));
 };
 
 const copyOutputData = () => navigator.clipboard.writeText(document.getElementById('outData').value);
@@ -110,3 +103,18 @@ const swap = () => {
   inData.value = outData.value;
   outData.value = buf;
 }
+
+const decodeAsAsn1 = () => window.open(
+  `https://lapo.it/asn1js/#${document.getElementById('outData').value}`,
+  '_blank'
+).focus();
+
+const toggleAsn1Button = () => {
+  const outType = document.getElementById('outType').value;
+
+  if (outType === 'hex' || outType === 'base64') {
+    document.getElementById('asn1Tool').classList.remove("hide");
+  } else {
+    document.getElementById('asn1Tool').classList.add('hide');
+  }
+};
diff --git a/src/style.css b/src/style.css
@@ -72,6 +72,8 @@ textarea {
     width: 100%;
     display: inline-flex;
     margin-top: 0.7em;
+    gap: 0.3em;
+    align-items: center;
 }
 
 .tool {
@@ -93,6 +95,31 @@ textarea {
     height: 90%;
 }
 
+.hide {
+    display: none !important;
+}
+
+.labeledTool {
+    display: inline-flex;
+    cursor: pointer;
+    height: 1.5em;
+    width: fit-content;
+    padding: 0.1em 0.2em 0.1em 0.2em;
+    border-radius: 0.2em;
+    border: 2px solid black;
+    justify-content: center;
+    align-items: center;
+    gap: 0.2em;
+}
+
+.labeledTool:hover {
+    background-color: aliceblue;
+}
+
+.labeledTool>img {
+    height: 80%;
+}
+
 footer {
     width: 70%;
     display: flex;
