aljaz/njump
1
0
Fork 0
mirror of https://github.com/aljazceru/njump.git synced 2026-02-03 13:14:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add a switch to show the formatted json

Browse Source
This commit is contained in:
Daniele Tonon
2023-05-23 11:02:49 +02:00
parent 1d89f33f77
commit 770571d34c
4 changed files with 223 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
event.html
View File

@@ -97,12 +97,20 @@
<div class="label">LN Address</div>
{{.content_json.lud16}}
</div>
<div class="field">
<div class="label">Metadata Event</div>
{{.nevent}}
<div>{{.nevent}}</div>
</div>
<div class="field">
<div class="label">JSON</div>
<div class="field advanced-switch-wrapper">
<input type="checkbox" id="advanced-switch" class="advanced-switch" />
<label for="advanced-switch">X</label>
<label for="advanced-switch">Show more details</label>
</div>
<div class="field advanced">
<div class="label">Event JSON</div>
<div class="json">{{.eventJSON}}</div>
</div>
<div class="field separator"></div>
@@ -137,10 +145,8 @@
<div class="background"></div>
<div style="display: flex; justify-content: center">
<span>
powered by <a href="https://git.fiatjaf.com/njump">njump</a>
</span>
<div class="footer">
Powered by <a href="https://git.fiatjaf.com/njump">njump</a>
</div>
<script>
@@ -169,13 +175,46 @@
</script>
<script>
let jsons = document.querySelectorAll('.json')
for (let i = 0; i < jsons.length; i++) {
console.log(jsons[i].innerHTML);
jsons[i].innerHTML = syntaxHighlight(jsons[i].innerHTML);
}
const shareButton = document.querySelector('.open-list');
const clients_list = document.querySelector('.columnC');
shareButton.addEventListener('click', function() {
clients_list.classList.toggle('up');
// links.classList.toggle('visible');
});
const advanceSwitch = document.querySelector('.advanced-switch');
const advanced_list = document.querySelectorAll('.advanced');
advanceSwitch.addEventListener('change', function() {
advanced_list.forEach(element => {
element.classList.toggle('visible');
});
});
function syntaxHighlight(json) {
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
</script>
</body>

108
static/styles.css
View File

@@ -66,7 +66,7 @@ a {
@media (max-width: 580px) {
.container_wrapper {
display: block;
width: 90%;
padding: 0 1rem;
margin: 0 auto;
}
}
@@ -159,6 +159,7 @@ a {
.container.profile .columnB {
flex-basis: 100%;
max-width: 100%;
margin-right: 0;
}
}
.container.profile .columnB .name {
@@ -193,6 +194,84 @@ a {
font-size: 0.8rem;
color: #E32A6D;
}
.container.profile .columnB .field.advanced {
display: none;
}
.container.profile .columnB .field.advanced.visible {
display: block;
}
.container.profile .columnB .field.advanced .label {
padding: 0.2rem 1rem;
margin: 0 -1rem;
color: #373737;
background-color: #C9C9C9;
}
.container.profile .columnB .field .json, .container.profile .columnB .field .data {
white-space: pre-wrap;
word-break: break-all;
background-color: #F3F3F3;
padding: 1rem;
margin: 0 -1rem;
}
.container.profile .columnB .field .json .key, .container.profile .columnB .field .data .key {
display: inline-block;
margin-top: 0.5rem;
color: #E32A6D;
}
.container.profile .columnB .field .json .string, .container.profile .columnB .field .data .string {
color: #373737;
}
.container.profile .columnB .field .json .number, .container.profile .columnB .field .data .number {
color: darkorange;
}
.container.profile .columnB .field .json .boolean, .container.profile .columnB .field .data .boolean {
color: #373737;
}
.container.profile .columnB .field .json .null, .container.profile .columnB .field .data .null {
color: #373737;
}
.container.profile .columnB .field.advanced-switch-wrapper {
display: flex;
align-items: center;
}
.container.profile .columnB .field.advanced-switch-wrapper input[type=checkbox] {
height: 0;
width: 0;
visibility: hidden;
display: none;
}
.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type {
cursor: pointer;
text-indent: -9999px;
width: 3rem;
height: 1.4rem;
background: grey;
display: inline-block;
border-radius: 100px;
position: relative;
margin-right: 0.5rem;
}
.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 1.2rem;
height: 1.2rem;
background: #fff;
border-radius: 1rem;
transition: 0.5s;
}
.container.profile .columnB .field.advanced-switch-wrapper input:checked + label {
background: #E32A6D;
}
.container.profile .columnB .field.advanced-switch-wrapper input:checked + label:first-of-type:after {
left: calc(100% - 2px);
transform: translateX(-100%);
}
.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:active:after {
width: 130px;
}
.container.profile .columnC {
flex-basis: 25%;
margin-top: 2rem;
@@ -312,30 +391,9 @@ a {
}
}
pre {
outline: 1px solid #ccc;
padding: 5px;
margin: 5px;
}
.string {
color: green;
}
.number {
color: darkorange;
}
.boolean {
color: blue;
}
.null {
color: magenta;
}
.key {
color: red;
.footer {
font-size: 0.8rem;
text-align: center;
}
/*# sourceMappingURL=styles.css.map */

2
static/styles.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;;AAED;EACC,OA1BS;;;AA4BV;EACC;EACA;EACA;EACA;EACA;EACA,kBA5BoB;EA6BpB;EACA;;AACA;EACC;EACA;EACA,kBAjCmB;EAkCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;AAEC;EANF;IAOE;IACE;;;AAGH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA;IACA;IACA;IACA;;EACA;IACC;IACA;IACA,OA7GK;;;AAiHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OAtIO;;AAuIP;EALD;IAME;;;AAIH;EACC;EACA;EAKA;EACA;EACA;EACA;;AAPA;EAHD;IAIE;IACA;;;AAMD;EACC;;AACA;EACC,OA1JM;;AA4JP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBA7JkB;;AA8JlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OA/KM;;AAmLT;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;IACA;IACA;IACA;IACA;IACA;;EACA;IACC;;EAED;IACC;;EACA;IACC;IACA;IACA;IACA;;;AAKJ;EACC;EACA;EACA;;AACA;EAJD;IAKE;IACA;;;AAED;EACC;EACA;EACA;EACA;EACA,OA7OM;EA8ON,kBAxOiB;EAyOjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OA7PI;;;AAgQN;EACC,kBA1PgB;;AA8PjB;EADD;IAEE;;;AAED;EACC,kBAjQgB;EAkQhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAtQe;;AA0QlB;EACC;EACA;EACA,OArRM;;AAsRN;EAJD;IAKE;;;;AAQL;EAAK;EAAyB;EAAc;;;AAC5C;EAAU;;;AACV;EAAU;;;AACV;EAAW;;;AACX;EAAQ;;;AACR;EAAO","file":"styles.css"}
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;;AAED;EACC,OA1BS;;;AA4BV;EACC;EACA;EACA;EACA;EACA;EACA,kBA5BoB;EA6BpB;EACA;;AACA;EACC;EACA;EACA,kBAjCmB;EAkCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;AAEC;EANF;IAOE;IACE;;;AAGH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA;IACA;IACA;IACA;;EACA;IACC;IACA;IACA,OA7GK;;;AAiHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OAtIO;;AAuIP;EALD;IAME;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EAPD;IAQE;IACA;IACA;;;AAED;EACC;;AACA;EACC,OA3JM;;AA6JP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBA9JkB;;AA+JlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OAhLM;;AAkLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OA5LK;EA6LL,kBA5LK;;AA+LP;EACC;EACA;EACA,kBA3LiB;EA4LjB;EACA;;AAEA;EACC;EACA;EACA,OAxMK;;AA2MN;EAAU,OA7MJ;;AA8MN;EAAU;;AACV;EAAW,OA/ML;;AAgNN;EAAQ,OAhNF;;AAmNP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC,YArPK;;AAwPN;EACC;EACA;;AAGD;EACC;;AAOJ;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;IACA;IACA;IACA;IACA;IACA;;EACA;IACC;;EAED;IACC;;EACA;IACC;IACA;IACA;IACA;;;AAKJ;EACC;EACA;EACA;;AACA;EAJD;IAKE;IACA;;;AAED;EACC;EACA;EACA;EACA;EACA,OA/TM;EAgUN,kBA1TiB;EA2TjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OA/UI;;;AAkVN;EACC,kBA5UgB;;AAgVjB;EADD;IAEE;;;AAED;EACC,kBAnVgB;EAoVhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAxVe;;AA4VlB;EACC;EACA;EACA,OAvWM;;AAwWN;EAJD;IAKE;;;;AAOL;EACC;EACA","file":"styles.css"}

103
static/styles.scss
View File

@@ -69,7 +69,7 @@ a {
align-items: center;
@media (max-width: 580px) {
display: block;
width: 90%;
padding: 0 1rem;
margin: 0 auto;
}
}
@@ -142,14 +142,15 @@ a {
.columnB {
flex-basis: 50%;
max-width: 50%;
@media (max-width: 580px) {
flex-basis: 100%;
max-width: 100%;
}
flex-grow: 0;
flex-shrink: 0;
word-wrap: break-word;
margin-right: 1vw;
@media (max-width: 580px) {
flex-basis: 100%;
max-width: 100%;
margin-right: 0;
}
.name {
font-size: 1.6rem;
.display {
@@ -177,6 +178,87 @@ a {
font-size: 0.8rem;
color: $color_3;
}
&.advanced {
display: none;
&.visible {
display: block;
}
.label {
padding: 0.2rem 1rem;
margin: 0 -1rem;
color: $color_1;
background-color: $color_2;
}
}
.json, .data {
white-space: pre-wrap;
word-break: break-all;
background-color: $background-color_3;
padding: 1rem;
margin: 0 -1rem;
.key {
display: inline-block;
margin-top: 0.5rem;
color: $color_3;
}
.string { color: $color_1; }
.number { color: darkorange; }
.boolean { color: $color_1; }
.null { color: $color_1; }
}
&.advanced-switch-wrapper {
display: flex;
align-items: center;
input[type=checkbox]{
height: 0;
width: 0;
visibility: hidden;
display: none;
}
label:first-of-type {
cursor: pointer;
text-indent: -9999px;
width: 3rem;
height: 1.4rem;
background: grey;
display: inline-block;
border-radius: 100px;
position: relative;
margin-right: 0.5rem;
}
label:first-of-type:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 1.2rem;
height: 1.2rem;
background: #fff;
border-radius: 1rem;
transition: 0.5s;
}
input:checked + label {
background: $color_3;
}
input:checked + label:first-of-type:after {
left: calc(100% - 2px);
transform: translateX(-100%);
}
label:first-of-type:active:after {
width: 130px;
}
}
}
}
.columnC {
@@ -288,10 +370,7 @@ a {
}
}
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
.footer {
font-size: 0.8rem;
text-align: center;
}