-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
JingetJsonVisualizer component added
- Loading branch information
vahid
committed
Aug 8, 2024
1 parent
9056309
commit f4e3a9e
Showing
13 changed files
with
436 additions
and
44 deletions.
There are no files selected for viewing
77 changes: 77 additions & 0 deletions
77
04-Presentation/Jinget.Blazor/Components/Other/JingetJsonVisualizer.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| @using System.Text.Json | ||
|
|
||
| @inject IJSRuntime JS; | ||
|
|
||
| <pre id="@Id"></pre> | ||
|
|
||
| @code { | ||
| [Parameter] | ||
| public string Id { get; set; } = "json-visualizer-" + Guid.NewGuid().ToString("N"); | ||
|
|
||
| /// <summary> | ||
| /// All nodes are collapsed at html generation. default is false. | ||
| /// </summary> | ||
| [Parameter] public bool Collapsed { get; set; } = true; | ||
|
|
||
| /// <summary> | ||
| /// Allow root element to be collapsed. default is true. | ||
| /// </summary> | ||
| [Parameter] public bool RootCollapsable { get; set; } = false; | ||
|
|
||
| /// <summary> | ||
| /// All JSON keys are surrounded with double quotation marks ({"foobar": 1} instead of {foobar: 1}). default is false. | ||
| /// </summary> | ||
| [Parameter] public bool WithQuotes { get; set; } = false; | ||
|
|
||
| /// <summary> | ||
| /// All values that are valid links will be clickable, if false they will only be strings. default is true. | ||
| /// </summary> | ||
| [Parameter] public bool WithLinks { get; set; } = true; | ||
|
|
||
| /// <summary> | ||
| /// Support different libraries for big numbers, | ||
| /// if true, display the real number only, false shows object containing big number with all fields instead of number only. | ||
| /// </summary> | ||
| [Parameter] public bool BigNumbers { get; set; } = false; | ||
|
|
||
| DotNetObjectReference<JingetJsonVisualizer>? dotnet; | ||
|
|
||
| protected override async Task OnAfterRenderAsync(bool firstRender) | ||
| { | ||
| if (firstRender) | ||
| { | ||
| dotnet = DotNetObjectReference.Create(this); | ||
| } | ||
| await base.OnAfterRenderAsync(firstRender); | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// renders the given object in json visualizer | ||
| /// </summary> | ||
| public async Task Visualize(object data) | ||
| { | ||
| await Visualize(JsonSerializer.Serialize(data, new JsonSerializerOptions | ||
| { | ||
| ReferenceHandler = System.Text.Json.Serialization.ReferenceHandler.Preserve | ||
| })); | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// renders the given string in json visualizer | ||
| /// </summary> | ||
| public async Task Visualize(string data) | ||
| { | ||
| await JS.InvokeVoidAsync("toJsonVisualizer", | ||
| new | ||
| { | ||
| dotnet, | ||
| Id, | ||
| data, | ||
| Collapsed, | ||
| RootCollapsable, | ||
| WithQuotes, | ||
| WithLinks, | ||
| BigNumbers | ||
| }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
65 changes: 65 additions & 0 deletions
65
04-Presentation/Jinget.Blazor/wwwroot/css/jinget.json.visualizer.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| /* Root element */ | ||
| .json-document { | ||
| padding: 1em 2em; | ||
| } | ||
|
|
||
| /* Syntax highlighting for JSON objects */ | ||
| ul.json-dict, ol.json-array { | ||
| list-style-type: none; | ||
| margin: 0 0 0 1px; | ||
| border-left: 1px dotted #ccc; | ||
| padding-left: 2em; | ||
| } | ||
|
|
||
| .json-string { | ||
| color: #0B7500; | ||
| white-space: break-spaces; | ||
| } | ||
|
|
||
| .json-literal { | ||
| color: #1A01CC; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| /* Toggle button */ | ||
| a.json-toggle { | ||
| position: relative; | ||
| color: inherit; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| a.json-toggle:focus { | ||
| outline: none; | ||
| } | ||
|
|
||
| a.json-toggle:before { | ||
| font-size: 1.1em; | ||
| color: #c0c0c0; | ||
| content: "\25BC"; /* down arrow */ | ||
| position: absolute; | ||
| display: inline-block; | ||
| width: 1em; | ||
| text-align: center; | ||
| line-height: 1em; | ||
| left: -1.2em; | ||
| } | ||
|
|
||
| a.json-toggle:hover:before { | ||
| color: #aaa; | ||
| } | ||
|
|
||
| a.json-toggle.collapsed:before { | ||
| /* Use rotated down arrow, prevents right arrow appearing smaller than down arrow in some browsers */ | ||
| transform: rotate(-90deg); | ||
| } | ||
|
|
||
| /* Collapsable placeholder links */ | ||
| a.json-placeholder { | ||
| color: #aaa; | ||
| padding: 0 1em; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| a.json-placeholder:hover { | ||
| text-decoration: underline; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.