dom-json-tree/dist/index.js

Visualize the JSON object to the DOM.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).DomJsonTree=t()}(this,function(){"use strict";function _(e,t){var r={};for(var n in e)r[n]=e[n];for(var n in t)r[n]=t[n];return r}function a(e){return e.currentTarget.events[e.type](e)}function j(e,t,r,n,o){if("key"===t);else if("style"===t)for(var l in _(r,n)){var i=null==n||null==n[l]?"":n[l];"-"===l[0]?e[t].setProperty(l,i):e[t][l]=i}else if("o"===t[0]&&"n"===t[1])e.events||(e.events={}),null==(e.events[t=t.slice(2)]=n)?e.removeEventListener(t,a):null==r&&e.addEventListener(t,a);else{var p=null==n||!1===n;if(t in e&&"list"!==t&&"draggable"!==t&&"spellcheck"!==t&&"translate"!==t&&!o)e[t]=null==n?"":n,p&&e.removeAttribute(t);else o&&t!==(t=t.replace(/^xlink:?/,""))?p?e.removeAttributeNS(s,t):e.setAttributeNS(s,t,n):p?e.removeAttribute(t):e.setAttribute(t,n)}}function P(e,t){function r(){e.removeChild(o(t))}var n=t.props&&t.props.onremove;null!=n?n(t.element,r):r()}function T(e){return null==e?null:e.key}function p(e,t,r,n,o,l){return{name:e,props:t,children:r,element:n,key:o,type:l}}function l(e,t){for(var r,n=arguments,o=[],l=[],i=arguments.length;2<i--;)o.push(n[i]);for(null!=(t=null==t?{}:t).children&&(o.length<=0&&o.push(t.children),delete t.children);0<o.length;)if(y(r=o.pop()))for(i=r.length;0<i--;)o.push(r[i]);else!1===r||!0===r||null==r||l.push("object"==typeof r?r:p(r,u,d,void 0,null,2));return"function"==typeof e?e(t,t.children=l):p(e,t,l,null,t.key,0)}function e(e,t,r){if(void 0===r&&(r={}),this.json=e,this.container=t,this.node,r.colors){var n=r.colors;n.key&&(i.Property_Key.color=n.key),n.type&&(i.Property_Type.color=n.type),n.typeNumber&&(i["Property_Type-number"].color=n.typeNumber),n.typeString&&(i["Property_Type-string"].color=n.typeString),n.typeBoolean&&(i["Property_Type-boolean"].color=n.typeBoolean)}}var s="http://www.w3.org/1999/xlink",u={},d=[],y=Array.isArray,x=function(e,t,r){var n=2===e.type?document.createTextNode(e.name):(r=r||"svg"===e.name)?document.createElementNS("http://www.w3.org/2000/svg",e.name):document.createElement(e.name),o=e.props;o.oncreate&&t.push(function(){o.oncreate(n)});for(var l=0,i=e.children.length;l<i;l++)n.appendChild(x(e.children[l],t,r));for(var p in o)j(n,p,null,o[p],r);return e.element=n},o=function(e){for(var t=0,r=e.children.length;t<r;t++)o(e.children[t]);var n=e.props.ondestroy;return null!=n&&n(e.element),e.element},S=function(e,t,r,n,o,l){if(n===r);else if(null!=r&&2===r.type&&2===n.type)r.name!==n.name&&(t.nodeValue=n.name);else if(null==r||r.name!==n.name){var i=e.insertBefore(x(n,o,l),t);null!=r&&P(e,r),t=i}else{var p,a,s;!function(e,t,r,n,o,l){for(var i in _(t,r))("value"===i||"checked"===i?e[i]:t[i])!==r[i]&&j(e,i,t[i],r[i],o);var p=l?r.oncreate:r.onupdate;null!=p&&n.push(function(){p(e,t)})}(t,r.props,n.props,o,l=l||"svg"===n.name,1===r.type);for(var u,d=r.children,y=0,c=d.length-1,g=n.children,f=0,m=g.length-1;f<=m&&y<=c&&(s=T(d[y]),u=T(g[f]),null!=s&&s===u);)S(t,d[y].element,d[y],g[f],o,l),y++,f++;for(;f<=m&&y<=c&&(s=T(d[c]),u=T(g[m]),null!=s&&s===u);)S(t,d[c].element,d[c],g[m],o,l),c--,m--;if(c<y)for(;f<=m;)t.insertBefore(x(g[f++],o,l),(a=d[y])&&a.element);else if(m<f)for(;y<=c;)P(t,d[y++]);else{for(var b=function(e,t,r){for(var n,o,l={};t<=r;t++)null!=(n=(o=e[t]).key)&&(l[n]=o);return l}(d,y,c),h={};f<=m;)s=T(a=d[y]),u=T(g[f]),h[s]||null!=u&&u===T(d[y+1])?(null==s&&P(t,a),y++):null==u||1===r.type?(null==s&&(S(t,a&&a.element,a,g[f],o,l),f++),y++):(s===u?(S(t,a.element,a,g[f],o,l),h[u]=!0,y++):null!=(p=b[u])?(S(t,t.insertBefore(p.element,a&&a.element),p,g[f],o,l),h[u]=!0):S(t,a&&a.element,null,g[f],o,l),f++);for(;y<=c;)null==T(a=d[y++])&&P(t,a);for(var v in b)null==h[v]&&P(t,b[v])}}return n.element=t},i={Object:{margin:0,padding:0,boxSizing:"border-box",lineHeight:"1",paddingLeft:"1em",position:"relative"},Arrow:{margin:0,padding:0,boxSizing:"border-box",display:"block",width:".5em",height:".3em",position:"absolute",top:".2em",left:0,borderLeft:".5em solid #555",borderTop:".3em solid transparent",borderBottom:".3em solid transparent",transform:"rotate(90deg)"},Content:{margin:0,padding:0,boxSizing:"border-box",width:"100%"},Value:{margin:0,padding:0,boxSizing:"border-box",paddingLeft:"1em"},Property:{margin:0,padding:0,boxSizing:"border-box",marginBottom:".5em",cursor:"pointer"},Property_Key:{margin:0,padding:0,boxSizing:"border-box",color:"#708"},Property_Colon:{margin:0,padding:0,boxSizing:"border-box",color:"#555"},Property_Type:{margin:0,padding:0,boxSizing:"border-box",color:"#997"},"Property_Type-number":{margin:0,padding:0,boxSizing:"border-box",color:"rgb(50, 0, 255)"},"Property_Type-string":{margin:0,padding:0,boxSizing:"border-box",color:"#a11"},"Property_Type-boolean":{margin:0,padding:0,boxSizing:"border-box",color:"rgb(50, 0, 255)"}};return e.prototype.render=function(){this._update()},e.prototype._update=function(){this.node=function(e,t,r){var n=[];for(S(r,r.children[0],e,t,n);0<n.length;)n.pop()();return t}(this.node,this._view(),this.container)},e.prototype._view=function(){var t=this,r=[];return Object.keys(this.json).forEach(function(e){r.push(t._getObjectTemplate(e,t.json[e]))}),l("div",{class:"djt-Content",style:i.Content},r)},e.prototype._getKeyTemplate=function(e,t){if(this._isPrimitiveType(t)){var r,n=typeof t;return r="string"==n?'"'+t+'"':null==t?"null":t.toString(),l("div",{class:"djt-Property",style:i.Property},[l("span",{class:"djt-Property_Key",style:i.Property_Key},e),l("span",{class:"djt-Property_Colon",style:i.Property_Colon},": "),l("span",{class:"djt-Property_Type",style:i["Property_Type-"+n]},r)])}var o="number"==typeof t.length?"Array["+t.length+"]":"Object";return l("div",{class:"djt-Property",style:i.Property,"data-djt-toggle":"open",onclick:function(e){var t=e.target.classList.contains("djt-Property")?e.target:e.target.parentNode;"open"==t.dataset.djtToggle?(t.dataset.djtToggle="close",t.nextElementSibling.style.display="none",t.parentNode.querySelector(".djt-Arrow").style.transform="none"):(t.dataset.djtToggle="open",t.nextElementSibling.style.display="block",t.parentNode.querySelector(".djt-Arrow").style.transform="rotate(90deg)")}},[l("span",{class:"djt-Property_Key",style:i.Property_Key},e),l("span",{class:"djt-Property_Colon",style:i.Property_Colon},": "),l("span",{class:"djt-Property_Type",style:i.Property_Type},o)])},e.prototype._getValueTemplate=function(t){var r=this,n=[];return Object.keys(t).forEach(function(e){n.push(r._getObjectTemplate(e,t[e]))}),l("div",{class:"djt-Value",style:i.Value},n)},e.prototype._getObjectTemplate=function(e,t){var r=[];return this._isPrimitiveType(t)?r.push(this._getKeyTemplate(e,t)):(r.push(l("span",{class:"djt-Arrow",style:i.Arrow},"")),r.push(this._getKeyTemplate(e,t)),r.push(this._getValueTemplate(t))),l("div",{key:e,class:"djt-object",style:i.Object},r)},e.prototype._isPrimitiveType=function(e){return!e||"object"!=typeof e},e});