Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New feature: Copy a part of the asn1 structure to the clipboard #82

Closed
wants to merge 10 commits into from
Closed

New feature: Copy a part of the asn1 structure to the clipboard #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7100ea4
Merge pull request #2 from lapo-luchini/trunk
olibu Oct 7, 2023
e34ad9a
hex copy on click
olibu Jan 28, 2024
bd7e240
Context menu and copyAsString added
olibu Jan 28, 2024
932a086
Context menu initially hidden
Jan 29, 2024
ae5f079
Fix: Copy the string to clipboard
Jan 29, 2024
9e1d001
New: Copy as pretty
Jan 29, 2024
b2223c5
New: Align context menu to left
Jan 29, 2024
0118d52
Negative list for set and sequence
olibu Jan 29, 2024
86b101f
Fix: Show context menu at correct position
olibu Jan 29, 2024
d66311c
Indention fixed
olibu Jan 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions dom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@ const

class ASN1DOM extends ASN1 {

buf2hex(buffer) {
return [...new Uint8Array(buffer)].map((x) => x.toString(16).padStart(2, '0')).join(' ');
}

toDOM(spaces) {
spaces = spaces || '';
let isOID = (typeof oids === 'object') && (this.tag.isUniversal() && (this.tag.tagNumber == 0x06) || (this.tag.tagNumber == 0x0D));
Expand Down Expand Up @@ -187,6 +191,15 @@ class ASN1DOM extends ASN1 {
this.className = 'hex';
}
};
// handler to copy the complete hex dump into the clipboard
node.onclick = function (event) {
let contextMenu = document.getElementById('contextmenu');
contextMenu.style.left = event.pageX + "px";
contextMenu.style.top = event.pageY + "px";
contextMenu.style.visibility = 'visible';
document.getElementById('contextmenu').node = this;
event.stopPropagation();
};
if (root == node) {
let lineStart = this.posStart() & 0xF;
if (lineStart != 0) {
Expand All @@ -200,6 +213,9 @@ class ASN1DOM extends ASN1 {
node.appendChild(skip);
}
}
// set the current start and end position as an attribute at the node to know the selected area
node.setAttribute('pos', this.posStart());
node.setAttribute('end', this.posEnd());
this.toHexDOM_sub(node, 'tag', this.stream, this.posStart(), this.posLen());
this.toHexDOM_sub(node, (this.length >= 0) ? 'dlen' : 'ulen', this.stream, this.posLen(), this.posContent());
if (this.sub === null) {
Expand Down
22 changes: 22 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,3 +212,25 @@ header {
#dump .hexCurrent .dlen { color: #004040; }
#file { display: none; }
#area { width: 100%; }

#contextmenu {
position: absolute;
visibility: hidden;
top: 0;
left: 0;
padding: 2px;
background-color: var(--button-bg-color);
border: 1px solid var(--button-bg-color);
z-index: 2;
}

#contextmenu > button {
width: 120px;
background-color: var(--button-bg-color);
color: var(--main-text-color);
border: 1px solid var(--button-border-color);
text-align: left;
}
#contextmenu > button:hover {
background-color: var(--button-bghover-color);
}
1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<link rel="icon" type="image/svg+xml" sizes="192x192" href="favicon.svg">
</head>
<body>
<div id="contextmenu" onmouseleave="this.style.visibility = 'hidden';"><button id="btnCopyHex">Copy as HEX</button><br><button id="btnCopyString">Copy as String</button><br><button id="btnCopyPretty">Copy as Pretty</button></div>
<header>
<div class="title">
<h1>ASN.1 JavaScript decoder</h1>
Expand Down
46 changes: 46 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
'use strict';

const
ASN1 = require('./asn1'),
ASN1DOM = require('./dom'),
Base64 = require('./base64'),
Hex = require('./hex'),
Expand Down Expand Up @@ -50,6 +51,9 @@ function show(asn1) {
if (wantHex.checked) dump.appendChild(asn1.toHexDOM(undefined, trimHex.checked));
}
function decode(der, offset) {
// store the DER buffer of asn1 in window to copy it completely into clipboard on dumpcopy
window.derBuffer = der;

offset = offset || 0;
try {
const asn1 = ASN1DOM.decode(der, offset);
Expand Down Expand Up @@ -236,4 +240,46 @@ selectTag.onchange = function (ev) {
window.location.href = 'https://rawcdn.githack.com/lapo-luchini/asn1js/' + tag + '/index.html';
};

// register context menu function
document.getElementById('btnCopyHex').onclick = function (event) {
let contextMenu = document.getElementById('contextmenu');
let node = contextMenu.node;
const pos = parseInt(node.getAttribute('pos'));
const end = parseInt(node.getAttribute('end'));
const hex = node.asn1.buf2hex(window.derBuffer.subarray(pos, end));
navigator.clipboard.writeText(hex);
contextMenu.style.visibility = 'hidden';
event.stopPropagation();
};

document.getElementById('btnCopyString').onclick = function (event) {
let contextMenu = document.getElementById('contextmenu');
let node = contextMenu.node;
const pos = parseInt(node.getAttribute('pos'));
const end = parseInt(node.getAttribute('end'));
let result = ASN1.decode(window.derBuffer.subarray(pos, end));
let type = result.typeName();
switch (type) {
case 'SET':
case 'SEQUENCE':
alert('Selected value is not a String!');
break;
default:
navigator.clipboard.writeText(result.content());
}
contextMenu.style.visibility = 'hidden';
event.stopPropagation();
};

document.getElementById('btnCopyPretty').onclick = function (event) {
let contextMenu = document.getElementById('contextmenu');
let node = contextMenu.node;
const pos = parseInt(node.getAttribute('pos'));
const end = parseInt(node.getAttribute('end'));
let result = ASN1.decode(window.derBuffer.subarray(pos, end));
navigator.clipboard.writeText(result.toPrettyString());
contextMenu.style.visibility = 'hidden';
event.stopPropagation();
};

});
Loading