Skip to content

Commit 4dffd87

Browse files
dhcodedhcode
committed
Fix event dispatching and collapse of objects
1 parent 8b71715 commit 4dffd87

File tree

7 files changed

+79
-23
lines changed

7 files changed

+79
-23
lines changed

‎docs-src/demo.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,14 +103,23 @@ async function loadStructureData(structure) {
103103
}
104104

105105
async function showData(data: string) {
106+
const index =
107+
'showDataIndex' in viewerElement
108+
? ++viewerElement['showDataIndex']
109+
: (viewerElement['showDataIndex'] = 0);
106110
if (viewerElement.children.length) {
107111
viewerElement.removeChild(viewerElement.children[0]);
108112
}
109113
if (viewer) {
110114
viewer.destroy();
111115
}
112116
try {
113-
viewer = await BigJsonViewerDom.fromData(data);
117+
const _viewer = await BigJsonViewerDom.fromData(data);
118+
if (viewerElement['showDataIndex'] !== index) {
119+
_viewer.destroy();
120+
return;
121+
}
122+
viewer = _viewer;
114123
rootNode = viewer.getRootElement();
115124
rootNode.id = 'rootNode';
116125
viewerElement.appendChild(rootNode);

docs/demo.ed21690c.js renamed to docs/demo.e80c5b10.js

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

‎docs/demo.e80c5b10.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.ed21690c.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.ed21690c.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.e80c5b10.js"></script> </body> </html>

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,19 +81,30 @@ describe('Big JSON Viewer', function() {
8181
'{"hello": "hello world, is a great world","test": [0,"old world",{"worldgame": true}]}';
8282
const viewer = await BigJsonViewerDom.fromData(data);
8383
const root: JsonNodeElement = viewer.getRootElement();
84+
let openCalls = 0;
85+
let closeCalls = 0;
86+
root.addEventListener('openNode', e => {
87+
openCalls++;
88+
});
89+
root.addEventListener('closeNode', e => {
90+
closeCalls++;
91+
});
92+
8493
expect(root).toBeTruthy();
8594

8695
expect(root.isNodeOpen()).toBeFalsy();
8796
root.querySelector('a').dispatchEvent(new MouseEvent('click'));
8897
await wait(1);
8998
expect(root.isNodeOpen()).toBeTruthy();
99+
expect(openCalls).toBe(1);
90100

91101
expect(root.childrenElement).toBeTruthy();
92102
expect(root.childrenElement.children.length).toEqual(2);
93103

94104
root.querySelector('a').dispatchEvent(new MouseEvent('click'));
95105
await wait(1);
96106
expect(root.isNodeOpen()).toBeFalsy();
107+
expect(closeCalls).toBe(1);
97108

98109
expect(root.childrenElement).toBeNull();
99110

@@ -206,6 +217,23 @@ describe('Big JSON Viewer', function() {
206217
viewer.destroy();
207218
});
208219

220+
it('should not collapse same values in objects', async function() {
221+
const data = {};
222+
for (let i = 0; i < 10; i++) {
223+
data['node' + i] = true;
224+
}
225+
226+
const viewer = await BigJsonViewerDom.fromObject(data);
227+
const root: JsonNodeElement = viewer.getRootElement();
228+
expect(root).toBeTruthy();
229+
230+
await root.openNode();
231+
232+
expect(root.childrenElement.children.length).toBe(10);
233+
234+
viewer.destroy();
235+
});
236+
209237
it('should collapse same values in mixed arrays', async function() {
210238
const data = new Array(20);
211239
data.fill(true, 0, 9);

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

Lines changed: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,12 @@ export interface JsonNodeElement extends JsonNodesStubElement {
4141
* withsStubs is true by default, it makes sure, that opened stubs are represented
4242
*/
4343
getOpenPaths(withStubs?: boolean): string[][];
44+
45+
openNode(dispatchEvent?: boolean): Promise<boolean>;
46+
47+
closeNode(dispatchEvent?: boolean): Promise<boolean>;
48+
49+
toggleNode(dispatchEvent?: boolean): Promise<boolean>;
4450
}
4551

4652
export class BigJsonViewerDom {
@@ -203,23 +209,23 @@ export class BigJsonViewerDom {
203209
}
204210
return false;
205211
};
206-
nodeElement.openNode = async () => {
212+
nodeElement.openNode = async (dispatchEvent = false) => {
207213
if (this.isOpenableNode(node)) {
208-
return await this.openNode(nodeElement);
214+
return await this.openNode(nodeElement, dispatchEvent);
209215
}
210216
return false;
211217
};
212-
nodeElement.closeNode = async () => {
218+
nodeElement.closeNode = async (dispatchEvent = false) => {
213219
if (this.isOpenableNode(node)) {
214-
return this.closeNode(nodeElement);
220+
return this.closeNode(nodeElement, dispatchEvent);
215221
}
216222
return false;
217223
};
218-
nodeElement.toggleNode = async () => {
224+
nodeElement.toggleNode = async (dispatchEvent = false) => {
219225
if (nodeElement.isNodeOpen()) {
220-
return await nodeElement.closeNode();
226+
return await nodeElement.closeNode(dispatchEvent);
221227
} else {
222-
return await nodeElement.openNode();
228+
return await nodeElement.openNode(dispatchEvent);
223229
}
224230
};
225231

@@ -253,7 +259,7 @@ export class BigJsonViewerDom {
253259
e.preventDefault();
254260
const nodeElement = this.findNodeElement(anchor);
255261
if (nodeElement) {
256-
nodeElement.toggleNode();
262+
nodeElement.toggleNode(true);
257263
}
258264
});
259265
}
@@ -727,7 +733,11 @@ export class BigJsonViewerDom {
727733
}
728734
} else {
729735
const nodes = await this.getChildNodes(node.path, 0, limit);
730-
this.addChildNodes(nodes, element);
736+
this.addChildNodes(
737+
nodes,
738+
element,
739+
node.type === 'array' ? this.options.collapseSameValue : Infinity
740+
);
731741
}
732742
return element;
733743
}
@@ -765,6 +775,7 @@ export class BigJsonViewerDom {
765775
} else {
766776
this.openPaginationStub(
767777
stubElement,
778+
node,
768779
await this.getChildNodes(node.path, start, limit),
769780
true
770781
);
@@ -779,6 +790,7 @@ export class BigJsonViewerDom {
779790
if (!stubElement.isNodeOpen()) {
780791
await this.openPaginationStub(
781792
stubElement,
793+
node,
782794
await this.getChildNodes(node.path, start, limit)
783795
);
784796
return true;
@@ -821,21 +833,30 @@ export class BigJsonViewerDom {
821833

822834
protected openPaginationStub(
823835
stubElement: JsonNodesStubElement,
836+
node: BigJsonViewerNode,
824837
nodes: BigJsonViewerNode[],
825838
dispatchEvent = false
826839
) {
827840
stubElement.headerElement.classList.add('json-node-open');
828841
const children = document.createElement('div');
829842
children.classList.add('json-node-children');
830843
stubElement.childrenElement = children;
831-
this.addChildNodes(nodes, children);
844+
this.addChildNodes(
845+
nodes,
846+
children,
847+
node.type === 'array' ? this.options.collapseSameValue : Infinity
848+
);
832849
stubElement.appendChild(children);
833850
if (dispatchEvent) {
834851
this.dispatchNodeEvent('openStub', stubElement);
835852
}
836853
}
837854

838-
protected addChildNodes(nodes: BigJsonViewerNode[], parent: HTMLElement) {
855+
protected addChildNodes(
856+
nodes: BigJsonViewerNode[],
857+
parent: HTMLElement,
858+
collapseSameValue: number
859+
) {
839860
let lastValue: any;
840861
let sameValueCount = 0;
841862

@@ -846,10 +867,10 @@ export class BigJsonViewerDom {
846867
lastValue === node.value
847868
) {
848869
sameValueCount++;
849-
if (sameValueCount >= this.options.collapseSameValue) {
870+
if (sameValueCount >= collapseSameValue) {
850871
return;
851872
}
852-
} else if (sameValueCount >= this.options.collapseSameValue) {
873+
} else if (sameValueCount >= collapseSameValue) {
853874
parent.appendChild(this.getCollapseIndicator(sameValueCount));
854875
parent.appendChild(this.getNodeElement(nodes[i - 1]));
855876
sameValueCount = 0;
@@ -859,11 +880,9 @@ export class BigJsonViewerDom {
859880
parent.appendChild(this.getNodeElement(node));
860881
lastValue = node.value;
861882
});
862-
if (sameValueCount >= this.options.collapseSameValue) {
883+
if (sameValueCount >= collapseSameValue) {
863884
parent.appendChild(
864-
this.getCollapseIndicator(
865-
sameValueCount - this.options.collapseSameValue
866-
)
885+
this.getCollapseIndicator(sameValueCount - collapseSameValue)
867886
);
868887
parent.appendChild(this.getNodeElement(nodes[nodes.length - 1]));
869888
}

0 commit comments

Comments
 (0)