json-formatter-js
Version:
JSON Formatter core library
2 lines (1 loc) • 14.3 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).JSONFormatter=e()}(this,(function(){"use strict";function t(t){return null===t?"null":typeof t}function e(t){return!!t&&"object"==typeof t}function r(t){if(void 0===t)return"";if(null===t)return"Object";if("object"==typeof t&&!t.constructor)return"Object";var e=/function ([^(]*)/.exec(t.constructor.toString());return e&&e.length>1?e[1]:""}function n(t,e,r){return"null"===t||"undefined"===t?t:("string"!==t&&"stringifiable"!==t||(r='"'+(r.replace(/"/g,'\\"')+'"')),"function"===t?e.toString().replace(/[\r\n]/g,"").replace(/\{.*\}/,"")+"{…}":r)}function o(o){var i="";return e(o)?(i=r(o),Array.isArray(o)&&(i+="["+o.length+"]")):i=n(t(o),o,o),i}function i(t){return"json-formatter-".concat(t)}function s(t,e,r){var n=document.createElement(t);return e&&n.classList.add(i(e)),void 0!==r&&(r instanceof Node?n.appendChild(r):n.appendChild(document.createTextNode(String(r)))),n}!function(t){if(t&&"undefined"!=typeof window){var e=document.createElement("style");e.setAttribute("media","screen"),e.innerHTML=t,document.head.appendChild(e)}}('.json-formatter-row {\n font-family: monospace;\n}\n.json-formatter-row,\n.json-formatter-row a,\n.json-formatter-row a:hover {\n color: black;\n text-decoration: none;\n}\n.json-formatter-row .json-formatter-row {\n margin-left: 1rem;\n}\n.json-formatter-row .json-formatter-children.json-formatter-empty {\n opacity: 0.5;\n margin-left: 1rem;\n}\n.json-formatter-row .json-formatter-children.json-formatter-empty:after {\n display: none;\n}\n.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-object:after {\n content: "No properties";\n}\n.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-array:after {\n content: "[]";\n}\n.json-formatter-row .json-formatter-string,\n.json-formatter-row .json-formatter-stringifiable {\n color: green;\n white-space: pre;\n word-wrap: break-word;\n}\n.json-formatter-row .json-formatter-number {\n color: blue;\n}\n.json-formatter-row .json-formatter-boolean {\n color: red;\n}\n.json-formatter-row .json-formatter-null {\n color: #855a00;\n}\n.json-formatter-row .json-formatter-undefined {\n color: #ca0b69;\n}\n.json-formatter-row .json-formatter-function {\n color: #FF20ED;\n}\n.json-formatter-row .json-formatter-date {\n background-color: rgba(0, 0, 0, 0.05);\n}\n.json-formatter-row .json-formatter-url {\n text-decoration: underline;\n color: blue;\n cursor: pointer;\n}\n.json-formatter-row .json-formatter-bracket {\n color: blue;\n}\n.json-formatter-row .json-formatter-key {\n color: #00008b;\n padding-right: 0.2rem;\n}\n.json-formatter-row .json-formatter-toggler-link {\n cursor: pointer;\n}\n.json-formatter-row .json-formatter-toggler {\n line-height: 1.2rem;\n font-size: 0.7rem;\n vertical-align: middle;\n opacity: 0.6;\n cursor: pointer;\n padding-right: 0.2rem;\n}\n.json-formatter-row .json-formatter-toggler:after {\n display: inline-block;\n transition: transform 100ms ease-in;\n content: "►";\n}\n.json-formatter-row > a > .json-formatter-preview-text {\n opacity: 0;\n transition: opacity 0.15s ease-in;\n font-style: italic;\n}\n.json-formatter-row:hover > a > .json-formatter-preview-text {\n opacity: 0.6;\n}\n.json-formatter-row.json-formatter-open > .json-formatter-toggler-link .json-formatter-toggler:after {\n transform: rotate(90deg);\n}\n.json-formatter-row.json-formatter-open > .json-formatter-children:after {\n display: inline-block;\n}\n.json-formatter-row.json-formatter-open > a > .json-formatter-preview-text {\n display: none;\n}\n.json-formatter-row.json-formatter-open.json-formatter-empty:after {\n display: block;\n}\n.json-formatter-dark.json-formatter-row {\n font-family: monospace;\n}\n.json-formatter-dark.json-formatter-row,\n.json-formatter-dark.json-formatter-row a,\n.json-formatter-dark.json-formatter-row a:hover {\n color: white;\n text-decoration: none;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-row {\n margin-left: 1rem;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty {\n opacity: 0.5;\n margin-left: 1rem;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty:after {\n display: none;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-object:after {\n content: "No properties";\n}\n.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-array:after {\n content: "[]";\n}\n.json-formatter-dark.json-formatter-row .json-formatter-string,\n.json-formatter-dark.json-formatter-row .json-formatter-stringifiable {\n color: #31f031;\n white-space: pre;\n word-wrap: break-word;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-number {\n color: #66c2ff;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-boolean {\n color: #EC4242;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-null {\n color: #EEC97D;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-undefined {\n color: #ef8fbe;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-function {\n color: #FD48CB;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-date {\n background-color: rgba(255, 255, 255, 0.05);\n}\n.json-formatter-dark.json-formatter-row .json-formatter-url {\n text-decoration: underline;\n color: #027bff;\n cursor: pointer;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-bracket {\n color: #9494ff;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-key {\n color: #23a0db;\n padding-right: 0.2rem;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-toggler-link {\n cursor: pointer;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-toggler {\n line-height: 1.2rem;\n font-size: 0.7rem;\n vertical-align: middle;\n opacity: 0.6;\n cursor: pointer;\n padding-right: 0.2rem;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-toggler:after {\n display: inline-block;\n transition: transform 100ms ease-in;\n content: "►";\n}\n.json-formatter-dark.json-formatter-row > a > .json-formatter-preview-text {\n opacity: 0;\n transition: opacity 0.15s ease-in;\n font-style: italic;\n}\n.json-formatter-dark.json-formatter-row:hover > a > .json-formatter-preview-text {\n opacity: 0.6;\n}\n.json-formatter-dark.json-formatter-row.json-formatter-open > .json-formatter-toggler-link .json-formatter-toggler:after {\n transform: rotate(90deg);\n}\n.json-formatter-dark.json-formatter-row.json-formatter-open > .json-formatter-children:after {\n display: inline-block;\n}\n.json-formatter-dark.json-formatter-row.json-formatter-open > a > .json-formatter-preview-text {\n display: none;\n}\n.json-formatter-dark.json-formatter-row.json-formatter-open.json-formatter-empty:after {\n display: block;\n}\n');var a=/(^\d{1,4}[\.|\\/|-]\d{1,2}[\.|\\/|-]\d{1,4})(\s*(?:0?[1-9]:[0-5]|1(?=[012])\d:[0-5])\d\s*[ap]m)?$/,f=/\d{2}:\d{2}:\d{2} GMT-\d{4}/,m=/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/,c=/^https?:\/\//,l=window.requestAnimationFrame||function(t){return t(),0},d={hoverPreviewEnabled:!1,hoverPreviewArrayCount:100,hoverPreviewFieldCount:5,animateOpen:!0,animateClose:!0,theme:null,useToJSON:!0,sortPropertiesBy:null,maxArrayItems:100,exposePath:!1};return function(){function h(t,e,r,n,o,i,s){void 0===e&&(e=1),void 0===r&&(r=d),void 0===i&&(i=[]),this.json=t,this.open=e,this.config=r,this.key=n,this.displayKey=o,this.path=i,this.arrayRange=s,this._isOpen=null,void 0===this.config.hoverPreviewEnabled&&(this.config.hoverPreviewEnabled=d.hoverPreviewEnabled),void 0===this.config.hoverPreviewArrayCount&&(this.config.hoverPreviewArrayCount=d.hoverPreviewArrayCount),void 0===this.config.hoverPreviewFieldCount&&(this.config.hoverPreviewFieldCount=d.hoverPreviewFieldCount),void 0===this.config.useToJSON&&(this.config.useToJSON=d.useToJSON),void 0===this.config.maxArrayItems&&(this.config.maxArrayItems=d.maxArrayItems),""===this.key&&(this.key='""'),void 0===this.displayKey&&(this.displayKey=this.key)}return Object.defineProperty(h.prototype,"isOpen",{get:function(){return null!==this._isOpen?this._isOpen:this.open>0},set:function(t){this._isOpen=t},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"isDate",{get:function(){return this.json instanceof Date||"string"===this.type&&(a.test(this.json)||m.test(this.json)||f.test(this.json))},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"isUrl",{get:function(){return"string"===this.type&&c.test(this.json)},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"isArray",{get:function(){return Array.isArray(this.json)},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"isLargeArray",{get:function(){return this.isArray&&this.json.length>this.config.maxArrayItems},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"isArrayRange",{get:function(){return this.isArray&&void 0!==this.arrayRange&&2==this.arrayRange.length},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"isObject",{get:function(){return e(this.json)},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"isEmptyObject",{get:function(){return!this.keys.length&&!this.isArray},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"isEmpty",{get:function(){return this.isEmptyObject||this.keys&&!this.keys.length&&this.isArray},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"useToJSON",{get:function(){return this.config.useToJSON&&"stringifiable"===this.type},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"hasKey",{get:function(){return void 0!==this.key},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"constructorName",{get:function(){return r(this.json)},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"type",{get:function(){return this.config.useToJSON&&this.json&&this.json.toJSON?"stringifiable":t(this.json)},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"keys",{get:function(){if(this.isObject){var t=Object.keys(this.json);if(this.isLargeArray){var e=Math.ceil(this.json.length/this.config.maxArrayItems);t=[];for(var r=0;r<e;r++){var n=r*this.config.maxArrayItems,o=Math.min(this.json.length-1,n+(this.config.maxArrayItems-1));t.push("".concat(n," … ").concat(o))}}return!this.isArray&&this.config.sortPropertiesBy?t.sort(this.config.sortPropertiesBy):t}return[]},enumerable:!1,configurable:!0}),h.prototype.toggleOpen=function(){this.isOpen=!this.isOpen,this.element&&(this.isOpen?this.appendChildren(this.config.animateOpen):this.removeChildren(this.config.animateClose),this.element.classList.toggle(i("open")))},h.prototype.openAtDepth=function(t){void 0===t&&(t=1),t<0||(this.open=t,this.isOpen=0!==t,this.element&&(this.removeChildren(!1),0===t?this.element.classList.remove(i("open")):(this.appendChildren(this.config.animateOpen),this.element.classList.add(i("open")))))},h.prototype.getInlinepreview=function(){var t=this;if(this.isArray)return this.json.length>this.config.hoverPreviewArrayCount?"Array[".concat(this.json.length,"]"):"[".concat(this.json.map(o).join(", "),"]");var e=this.keys,r=e.slice(0,this.config.hoverPreviewFieldCount).map((function(e){return"".concat(e,":").concat(o(t.json[e]))})),n=e.length>=this.config.hoverPreviewFieldCount?"…":"";return"{".concat(r.join(", ")).concat(n,"}")},h.prototype.render=function(){this.element=s("div","row");var t=this.isObject?s("a","toggler-link"):s("span");if(this.isObject&&!this.useToJSON&&t.appendChild(s("span","toggler")),this.isArrayRange?t.appendChild(s("span","range","[".concat(this.displayKey,"]"))):this.hasKey&&(t.appendChild(s("span","key","".concat(this.displayKey,":"))),this.config.exposePath&&(this.element.dataset.path=JSON.stringify(this.path))),this.isObject&&!this.useToJSON){var e=s("span","value"),r=s("span");if(!this.isArrayRange){var o=s("span","constructor-name",this.constructorName);r.appendChild(o)}if(this.isArray&&!this.isArrayRange){var a=s("span");a.appendChild(s("span","bracket","[")),a.appendChild(s("span","number",this.json.length)),a.appendChild(s("span","bracket","]")),r.appendChild(a)}e.appendChild(r),t.appendChild(e)}else{(e=this.isUrl?s("a"):s("span")).classList.add(i(this.type)),this.isDate&&e.classList.add(i("date")),this.isUrl&&(e.classList.add(i("url")),e.setAttribute("href",this.json));var f=n(this.type,this.json,this.useToJSON?this.json.toJSON():this.json);e.appendChild(document.createTextNode(f)),t.appendChild(e)}if(this.isObject&&this.config.hoverPreviewEnabled){var m=s("span","preview-text");m.appendChild(document.createTextNode(this.getInlinepreview())),t.appendChild(m)}var c=s("div","children");return this.isObject&&c.classList.add(i("object")),this.isArray&&c.classList.add(i("array")),this.isEmpty&&c.classList.add(i("empty")),this.config&&this.config.theme&&this.element.classList.add(i(this.config.theme)),this.isOpen&&this.element.classList.add(i("open")),this.element.appendChild(t),this.element.appendChild(c),this.isObject&&this.isOpen&&this.appendChildren(),this.isObject&&!this.useToJSON&&t.addEventListener("click",this.toggleOpen.bind(this)),this.element},h.prototype.appendChildren=function(t){var e=this;void 0===t&&(t=!1);var r=this.element.querySelector("div.".concat(i("children")));if(r&&!this.isEmpty){var n=function(t,n){var o=e.isLargeArray?[n*e.config.maxArrayItems,Math.min(e.json.length-1,n*e.config.maxArrayItems+(e.config.maxArrayItems-1))]:void 0,i=e.isArrayRange?(e.arrayRange[0]+n).toString():t,s=new h(o?e.json.slice(o[0],o[1]+1):e.json[t],e.open-1,e.config,t,i,o?e.path:e.path.concat(i),o);r.appendChild(s.render())};if(t){var o=0,s=function(){var t=e.keys[o];n(t,o),(o+=1)<e.keys.length&&(o>10?s():l(s))};l(s)}else this.keys.forEach((function(t,e){return n(t,e)}))}},h.prototype.removeChildren=function(t){void 0===t&&(t=!1);var e=this.element.querySelector("div.".concat(i("children")));if(t){var r=0,n=function(){e&&e.children.length&&(e.removeChild(e.children[0]),(r+=1)>10?n():l(n))};l(n)}else e&&(e.innerHTML="")},h}()}));