@pgrabovets/json-view/dist/jsonview.umd.cjs

This is a javascript library for displaying json data into a DOM

(function(l,c){typeof exports=="object"&&typeof module<"u"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(l=typeof globalThis<"u"?globalThis:l||self,c(l.jsonview={}))})(this,(function(l){"use strict";function c(e){return Array.isArray(e)?"array":e===null?"null":typeof e}function p(e){return document.createElement(e)}function R(e,n,t){return e.addEventListener(n,t),()=>e.removeEventListener(n,t)}function b(e){e.parentNode.removeChild(e)}const r={HIDDEN:"hidden",CARET_ICON:"caret-icon",CARET_RIGHT:"fa-caret-right",CARET_DOWN:"fa-caret-down",ICON:"fas",CONTAINER:"json-container"};function $(e={}){const{key:n,size:t,isExpanded:s=!1}=e;return`
    <div class="line">
      <div class="caret-icon"><i class="fas ${s?r.CARET_DOWN:r.CARET_RIGHT}"></i></div>
      <div class="json-key">${n}</div>
      <div class="json-size">${t}</div>
    </div>
  `}function k(e={}){const{key:n,value:t,type:s}=e;return`
    <div class="line">
      <div class="empty-icon"></div>
      <div class="json-key">${n}</div>
      <div class="json-separator">:</div>
      <div class="json-value ${s}">${t}</div>
    </div>
  `}function A(){const e=p("div");return e.className=r.CONTAINER,e}function y(e){e.children.forEach(n=>{n.el&&n.el.classList.add(r.HIDDEN),n.isExpanded&&y(n)})}function E(e){e.children.forEach(n=>{n.el&&n.el.classList.remove(r.HIDDEN),n.isExpanded&&E(n)})}function v(e){if(e.children.length>0&&e.el){const n=e.el.querySelector("."+r.ICON);n&&n.classList.replace(r.CARET_RIGHT,r.CARET_DOWN)}}function h(e){if(e.children.length>0&&e.el){const n=e.el.querySelector("."+r.ICON);n&&n.classList.replace(r.CARET_DOWN,r.CARET_RIGHT)}}function o(e){e.isExpanded?(e.isExpanded=!1,h(e),y(e)):(e.isExpanded=!0,v(e),E(e))}function H(e){let n=p("div");const t=i=>{const O=i.children.length;return i.type==="array"?`[${O}]`:i.type==="object"?`{${O}}`:null},s=i=>{switch(i.type){case"string":return i.value?`${i.value}`:'""';case"number":case"boolean":case"null":return`${i.value}`;case"array":return`[${i.children.length}]`;case"object":return`{${i.children.length}}`;default:return`${i.value}`}},j=i=>{switch(i.type){case"string":case"number":case"boolean":case"null":case"array":case"object":return`json-${i.type}`;default:return`json-${typeof i.value}`}};if(e.children.length>0){n.innerHTML=$({key:e.key,size:t(e),isExpanded:e.isExpanded});const i=n.querySelector("."+r.CARET_ICON);e.dispose=R(i,"click",()=>o(e))}else n.innerHTML=k({key:e.key,value:s(e),type:j(e)});const u=n.children[0];return e.parent!==null&&(e.isExpanded?u.classList.remove(r.HIDDEN):u.classList.add(r.HIDDEN)),u.style="margin-left: "+e.depth*18+"px;",u}function a(e,n){n(e),e.children.length>0&&e.children.forEach(t=>{a(t,n)})}function N(e={}){const n=s=>c(s)==="object"&&Object.keys(s).length===0;let t=e.hasOwnProperty("value")?e.value:null;return n(t)&&(t="{}"),{key:e.key||null,parent:e.parent||null,value:t,isExpanded:e.isExpanded||!1,type:e.type||null,children:e.children||[],el:e.el||null,depth:e.depth||0,dispose:null}}function g(e,n){if(typeof e=="object")for(let t in e){const s=N({value:e[t],key:t,depth:n.depth+1,type:c(e[t]),parent:n});n.children.push(s),g(e[t],s)}}function C(e){return typeof e=="string"?JSON.parse(e):e}function f(e){const n=C(e),t=N({value:n,key:c(n),type:c(n)});return g(n,t),t}function T(e,n){const t=C(e),s=f(t);return d(s,n),s}function d(e,n){const t=A();a(e,function(s){s.el=H(s),t.appendChild(s.el)}),n.appendChild(t)}function D(e){a(e,function(n){n.el&&n.el.classList.remove(r.HIDDEN),n.isExpanded=!0,v(n)})}function I(e){a(e,function(n){n.isExpanded=!1,n.depth>e.depth&&n.el&&n.el.classList.add(r.HIDDEN),h(n)})}function m(e){a(e,n=>{n.dispose&&n.dispose()}),b(e.el.parentNode)}const S={toggleNode:o,render:d,create:f,renderJSON:T,expand:D,collapse:I,traverse:a,destroy:m};l.collapse=I,l.create=f,l.default=S,l.destroy=m,l.expand=D,l.render=d,l.renderJSON=T,l.toggleNode=o,l.traverse=a,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));