This repository has been archived by the owner on Oct 4, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathx-json.html
76 lines (76 loc) · 4.76 KB
/
x-json.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!--
<x-json>
@element x-json
@demo https://chris-l.github.io/x-json/
--><html><head><template id="x-json">
<style>
:host .hidden, ::shadow .hidden {
display: none;
}
:host .prop, ::shadow .prop {
font-weight: bold;
}
:host .null, ::shadow .null {
color: red;
}
:host .bool, ::shadow .bool {
color: blue;
}
:host .num, ::shadow .num {
color: blue;
}
:host .string, ::shadow .string {
color: green;
white-space: pre-wrap;
}
:host .collapser, ::shadow .collapser {
position: absolute;
left: -1em;
cursor: pointer;
-moz-user-select: none;
color: rgb(249, 39, 83);
text-decoration: none;
}
:host .q, ::shadow .q {
display: inline-block;
width: 0px;
color: transparent;
}
:host li, ::shadow li {
position: relative;
}
:host .error, ::shadow .error {
-moz-border-radius: 8px;
border: 1px solid #970000;
background-color: #F7E8E8;
margin: .5em;
padding: .5em;
}
:host .errormessage, ::shadow .errormessage {
font-family: monospace;
}
:host {
font-family: monospace;
font-size: 1.1em;
display: block;
}
:host ul, ::shadow ul {
list-style: none;
margin: 0 0 0 2em;
padding: 0;
}
:host h1, ::shadow h1 {
font-size: 1.2em;
}
:host .callback + #json, ::shadow .callback + #json {
padding-left: 1em;
}
:host .callback, ::shadow .callback {
font-family: monospace;
color: #A52A2A;
}
</style>
<div id="container"></div>
</template>
<script>!function(a){"use strict";function b(a){return Array.isArray(a)||"object"==typeof a&&null!==a}function c(a){var d,e,f,g;return g='<div class="collapser">-</div>',Array.isArray(a)?(d='[<ul class="array collapsible">',e=a.map(function(a){var d=b(a)?g:"";return"<li>"+d+c(a)}),f=function(a){var b="</ul>]";return a.length>0?"</li>"+b:b}(e),d+e.join(",</li>")+f):"object"==typeof a?null===a?'<span class="null">null</span>':a.constructor===Date?'<span class="string">'+JSON.stringify(a)+"</span>":(d='{<ul class="obj collapsible">',e=Object.keys(a).map(function(d){var e=b(a[d])?g:"";return"<li>"+e+'<span class="prop"><span class="q">"</span>'+d+'<span class="q">"</span></span>: '+c(a[d])}),f=function(a){var b="</ul>}";return a.length>0?"</li>"+b:b}(e),d+e.join(",</li>")+f):"number"==typeof a?'<span class="num">'+JSON.stringify(a)+"</span>":"string"==typeof a?'<span class="string">'+JSON.stringify(a)+"</span>":"boolean"==typeof a?'<span class="bool">'+JSON.stringify(a)+"</span>":"<span>"+JSON.stringify(a,null," ")+"</span>"}var d,e,f,g,h;g=function(){var b,c;return b=(document._currentScript||document.currentScript).ownerDocument,a.ShadowDOMPolyfill&&(c=document.createElement("style"),document.head.insertBefore(c,document.head.firstChild)),function(d,e,f){var g,h;d.root=d.createShadowRoot(),g=b.getElementById(e),d.root.appendChild(g.content.cloneNode(!0)),a.ShadowDOMPolyfill&&(h=d.root.getElementsByTagName("style"),Array.prototype.forEach.call(h,function(a){g.shimmed||(c.innerHTML+=a.innerHTML.replace(/:host\b/gm,f||e).replace(/::shadow\b/gm," ").replace(/::content\b/gm," ")),a.parentNode.removeChild(a)}),g.shimmed=!0)}}(),h=function(){function a(a){return a.replace(/([A-Z])/g,"-$1").toLowerCase()}function b(a){return a.split("-").map(function(a,b){return 0===b?a:a[0].toUpperCase()+a.slice(1)}).join("")}var c={};return c.syncProperty=function(a,c,d,e){var f=b(d);c[f]&&(a[f]=JSON.parse(e))},c.init=function(b,c){Object.defineProperty(b,"props",{enumerable:!1,configurable:!0,value:{}}),Object.keys(c).forEach(function(d){var e,f,g=a(d);e=c[d].type?c[d]:{type:c[d]},f="function"==typeof e.value?e.value():e.value,b.props[d]=b[d]||f,null!==b.getAttribute(g)&&(b.props[d]=JSON.parse(b.getAttribute(g))),Object.defineProperty(b,d,{get:function(){return b.props[d]||JSON.parse(b.getAttribute(g))},set:function(a){var c=b.props[d];b.props[d]=a,"function"==typeof b[e.observer]&&b[e.observer](a,c)}})})},c}(),d=function(a){a.addEventListener("click",function(){var a=this.parentNode.getElementsByTagName("ul")[0];"none"===a.style.display?(a.style.display="block",this.innerHTML="-"):(a.style.display="none",this.innerHTML="+")})},e=Object.create(a.HTMLElement.prototype),f={data:{value:"",type:"Object",observer:"dataChanged"}},e.dataChanged=function(a){var b=this.root.getElementById("container");return""===a?void(b.innerHTML=""):(b.innerHTML=c(a),void function(a){var b=a.querySelectorAll(".collapser");Array.prototype.forEach.call(b,d)}(b))},e.attributeChangedCallback=function(a,b,c){h.syncProperty(this,f,a,c)},e.createdCallback=function(){g(this,"x-json"),h.init(this,f),this.dataChanged(this.data)},document.registerElement("x-json",{prototype:e})}(this);</script>
</head><body></body></html>