Skip to content

Commit 3bdd91d

Browse files
dhcodedhcode
committed
Added addLinksHook option
1 parent 2954354 commit 3bdd91d

File tree

7 files changed

+26
-11
lines changed

7 files changed

+26
-11
lines changed

docs/demo.fa1b4b0a.js renamed to docs/demo.f0b46f31.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/demo.f0b46f31.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/demo.fa1b4b0a.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Big JSON Viewer Demo</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="default.f39b0572.css"> <style>body{font-family:Helvetica,serif}</style> </head> <body> <div class="p-3" style="position:fixed;top:0;right:0;background:#fff;border:1px solid #ccc"> <input type="text" placeholder="Search" id="search"> <span id="searchInfo"></span> </div> <div class="container"> <h1 class="mt-3">Big JSON Viewer Demo</h1> <p> Watch large JSON structures in the Browser.<br> <a href="https://github.com/dhcode/big-json-viewer">On GitHub</a> </p> <h4 class="mt-3">JSON text</h4> <div> <a href="javascript:" data-load="simpleData">Simple test data</a> | <a href="javascript:" data-load="largeData">Large data</a> </div> <div> <textarea id="code" style="min-height:15em;width:100%;font-family:monospace,serif;font-size:.8em"></textarea> </div> <h4 class="mt-3">Big JSON Viewer output</h4> <div id="viewer"> </div> <h5 class="mt-3">Open paths</h5> <div> <textarea id="paths" style="min-height:6em;width:100%;font-family:monospace,serif;font-size:.8em"></textarea> </div> <h5 class="mt-3">Copied paths</h5> <div> <input type="text" id="copied" style="width:100%;font-family:monospace,serif;font-size:.8em"> </div> <footer class="mt-5"> Created by <a href="https://github.com/dhcode">Dominik Herbst</a> </footer> </div> <script src="demo.fa1b4b0a.js"></script> </body> </html>
1+
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Big JSON Viewer Demo</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="default.f39b0572.css"> <style>body{font-family:Helvetica,serif}</style> </head> <body> <div class="p-3" style="position:fixed;top:0;right:0;background:#fff;border:1px solid #ccc"> <input type="text" placeholder="Search" id="search"> <span id="searchInfo"></span> </div> <div class="container"> <h1 class="mt-3">Big JSON Viewer Demo</h1> <p> Watch large JSON structures in the Browser.<br> <a href="https://github.com/dhcode/big-json-viewer">On GitHub</a> </p> <h4 class="mt-3">JSON text</h4> <div> <a href="javascript:" data-load="simpleData">Simple test data</a> | <a href="javascript:" data-load="largeData">Large data</a> </div> <div> <textarea id="code" style="min-height:15em;width:100%;font-family:monospace,serif;font-size:.8em"></textarea> </div> <h4 class="mt-3">Big JSON Viewer output</h4> <div id="viewer"> </div> <h5 class="mt-3">Open paths</h5> <div> <textarea id="paths" style="min-height:6em;width:100%;font-family:monospace,serif;font-size:.8em"></textarea> </div> <h5 class="mt-3">Copied paths</h5> <div> <input type="text" id="copied" style="width:100%;font-family:monospace,serif;font-size:.8em"> </div> <footer class="mt-5"> Created by <a href="https://github.com/dhcode">Dominik Herbst</a> </footer> </div> <script src="demo.f0b46f31.js"></script> </body> </html>

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
"prepack": "npm run build",
1111
"build-docs": "del-cli docs && parcel build docs-src/index.html --out-dir docs --public-url ./ && git add docs",
1212
"watch-docs": "parcel docs-src/index.html --out-dir docs/tmp --no-hmr",
13-
"build-worker": "parcel build src/worker/big-json-viewer.worker.ts --out-dir src/worker",
1413
"lint": "tslint -c tslint.json -p tsconfig.json",
1514
"test": "jest",
1615
"publish-patch": "npm version patch && npm publish",

‎src/big-json-viewer-dom.ts‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -977,14 +977,19 @@ export class BigJsonViewerDom {
977977
parent.appendChild(valueElement);
978978
}
979979

980+
protected getLabelNode(label: string | HTMLElement): Node {
981+
if (label instanceof Node) {
982+
return label;
983+
}
984+
return document.createTextNode(label);
985+
}
986+
980987
protected generateLinks(parent: HTMLElement, node: BigJsonViewerNode) {
981988
if (this.isOpenableNode(node) && this.options.linkLabelExpandAll) {
982989
const link = parent.appendChild(document.createElement('a'));
983990
link.classList.add('json-node-link');
984991
link.href = 'javascript:';
985-
link.appendChild(
986-
document.createTextNode(this.options.linkLabelExpandAll)
987-
);
992+
link.appendChild(this.getLabelNode(this.options.linkLabelExpandAll));
988993
link.addEventListener('click', e => {
989994
e.preventDefault();
990995
const nodeElement = this.findNodeElement(parent);
@@ -998,7 +1003,7 @@ export class BigJsonViewerDom {
9981003
const link = parent.appendChild(document.createElement('a'));
9991004
link.classList.add('json-node-link');
10001005
link.href = 'javascript:';
1001-
link.appendChild(document.createTextNode(this.options.linkLabelCopyPath));
1006+
link.appendChild(this.getLabelNode(this.options.linkLabelCopyPath));
10021007
link.addEventListener('click', e => {
10031008
e.preventDefault();
10041009
const input = document.createElement('input');
@@ -1018,6 +1023,12 @@ export class BigJsonViewerDom {
10181023
parent.removeChild(input);
10191024
});
10201025
}
1026+
1027+
if (typeof this.options.addLinksHook === 'function') {
1028+
for (const element of this.options.addLinksHook(node)) {
1029+
parent.appendChild(element);
1030+
}
1031+
}
10211032
}
10221033

10231034
protected findNodeElement(el: HTMLElement): JsonNodeElement {

‎src/model/big-json-viewer.model.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,13 +98,13 @@ export interface BigJsonViewerOptions {
9898
* What label should be displayed on the Copy Path link.
9999
* Set null to disable this link
100100
*/
101-
linkLabelCopyPath?: string;
101+
linkLabelCopyPath?: string | HTMLElement;
102102

103103
/**
104104
* What label should be displayed on the Expand all link.
105105
* Set null to disable this link
106106
*/
107-
linkLabelExpandAll?: string;
107+
linkLabelExpandAll?: string | HTMLElement;
108108

109109
/**
110110
* Path to the worker bundle, null by default
@@ -117,6 +117,11 @@ export interface BigJsonViewerOptions {
117117
* @default 5
118118
*/
119119
collapseSameValue?: number;
120+
121+
/**
122+
* Register a hook function that is called for every opened node to add additional links to a node.
123+
*/
124+
addLinksHook?: (node: BigJsonViewerNode) => HTMLElement[];
120125
}
121126

122127
export interface BigJsonViewer {}

0 commit comments

Comments
 (0)