API tools faq
paste
Advertisement
OhMika

Untitled

OhMika
Jul 16th, 2019
123
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.79 KB | None | 0 0
raw download clone embed print report diff
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width,initial-scale=1" />
  6. <script>var module, window, define, renderjson=(function() {
  7. var themetext = function(/* [class, text]+ */) {
  8. var spans = [];
  9. while (arguments.length)
  10. spans.push(append(span(Array.prototype.shift.call(arguments)),
  11. text(Array.prototype.shift.call(arguments))));
  12. return spans;
  13. };
  14. var append = function(/* el, ... */) {
  15. var el = Array.prototype.shift.call(arguments);
  16. for (var a=0; a<arguments.length; a++)
  17. if (arguments[a].constructor == Array)
  18. append.apply(this, [el].concat(arguments[a]));
  19. else
  20. el.appendChild(arguments[a]);
  21. return el;
  22. };
  23. var prepend = function(el, child) {
  24. el.insertBefore(child, el.firstChild);
  25. return el;
  26. }
  27. var isempty = function(obj, pl) { var keys = pl || Object.keys(obj);
  28. for (var i in keys) if (Object.hasOwnProperty.call(obj, keys[i])) return false;
  29. return true; }
  30. var text = function(txt) { return document.createTextNode(txt) };
  31. var div = function() { return document.createElement("div") };
  32. var span = function(classname) { var s = document.createElement("span");
  33. if (classname) s.className = classname;
  34. return s; };
  35. var A = function A(txt, classname, callback) { var a = document.createElement("a");
  36. if (classname) a.className = classname;
  37. a.appendChild(text(txt));
  38. a.href = '#';
  39. a.onclick = function(e) { callback(); if (e) e.stopPropagation(); return false; };
  40. return a; };
  41.  
  42. function _renderjson(json, indent, dont_indent, show_level, options) {
  43. var my_indent = dont_indent ? "" : indent;
  44.  
  45. var disclosure = function(open, placeholder, close, type, builder) {
  46. var content;
  47. var empty = span(type);
  48. var show = function() { if (!content) append(empty.parentNode,
  49. content = prepend(builder(),
  50. A(options.hide, "disclosure",
  51. function() { content.style.display="none";
  52. empty.style.display="inline"; } )));
  53. content.style.display="inline";
  54. empty.style.display="none"; };
  55. append(empty,
  56. A(options.show, "disclosure", show),
  57. themetext(type+ " syntax", open),
  58. A(placeholder, null, show),
  59. themetext(type+ " syntax", close));
  60.  
  61. var el = append(span(), text(my_indent.slice(0,-1)), empty);
  62. if (show_level > 0 && type != "string")
  63. show();
  64. return el;
  65. };
  66.  
  67. if (json === null) return themetext(null, my_indent, "keyword", "null");
  68. if (json === void 0) return themetext(null, my_indent, "keyword", "undefined");
  69.  
  70. if (typeof(json) == "string" && json.length > options.max_string_length)
  71. return disclosure('"', json.substr(0,options.max_string_length)+" ...", '"', "string", function () {
  72. return append(span("string"), themetext(null, my_indent, "string", JSON.stringify(json)));
  73. });
  74.  
  75. if (typeof(json) != "object" || [Number, String, Boolean, Date].indexOf(json.constructor) >= 0) // Strings, numbers and bools
  76. return themetext(null, my_indent, typeof(json), JSON.stringify(json));
  77.  
  78. if (json.constructor == Array) {
  79. if (json.length == 0) return themetext(null, my_indent, "array syntax", "[]");
  80.  
  81. return disclosure("[", options.collapse_msg(json.length), "]", "array", function () {
  82. var as = append(span("array"), themetext("array syntax", "[", null, "\n"));
  83. for (var i=0; i<json.length; i++)
  84. append(as,
  85. _renderjson(options.replacer.call(json, i, json[i]), indent+" ", false, show_level-1, options),
  86. i != json.length-1 ? themetext("syntax", ",") : [],
  87. text("\n"));
  88. append(as, themetext(null, indent, "array syntax", "]"));
  89. return as;
  90. });
  91. }
  92.  
  93. // object
  94. if (isempty(json, options.property_list))
  95. return themetext(null, my_indent, "object syntax", "{}");
  96.  
  97. return disclosure("{", options.collapse_msg(Object.keys(json).length), "}", "object", function () {
  98. var os = append(span("object"), themetext("object syntax", "{", null, "\n"));
  99. for (var k in json) var last = k;
  100. var keys = options.property_list || Object.keys(json);
  101. if (options.sort_objects)
  102. keys = keys.sort();
  103. for (var i in keys) {
  104. var k = keys[i];
  105. if (!(k in json)) continue;
  106. append(os, themetext(null, indent+" ", "key", '"'+k+'"', "object syntax", ': '),
  107. _renderjson(options.replacer.call(json, k, json[k]), indent+" ", true, show_level-1, options),
  108. k != last ? themetext("syntax", ",") : [],
  109. text("\n"));
  110. }
  111. append(os, themetext(null, indent, "object syntax", "}"));
  112. return os;
  113. });
  114. }
  115.  
  116. var renderjson = function renderjson(json)
  117. {
  118. var options = new Object(renderjson.options);
  119. options.replacer = typeof(options.replacer) == "function" ? options.replacer : function(k,v) { return v; };
  120. var pre = append(document.createElement("pre"), _renderjson(json, "", false, options.show_to_level, options));
  121. pre.className = "renderjson";
  122. return pre;
  123. }
  124. renderjson.set_icons = function(show, hide) { renderjson.options.show = show;
  125. renderjson.options.hide = hide;
  126. return renderjson; };
  127. renderjson.set_show_to_level = function(level) { renderjson.options.show_to_level = typeof level == "string" &&
  128. level.toLowerCase() === "all" ? Number.MAX_VALUE
  129. : level;
  130. return renderjson; };
  131. renderjson.set_max_string_length = function(length) { renderjson.options.max_string_length = typeof length == "string" &&
  132. length.toLowerCase() === "none" ? Number.MAX_VALUE
  133. : length;
  134. return renderjson; };
  135. renderjson.set_sort_objects = function(sort_bool) { renderjson.options.sort_objects = sort_bool;
  136. return renderjson; };
  137. renderjson.set_replacer = function(replacer) { renderjson.options.replacer = replacer;
  138. return renderjson; };
  139. renderjson.set_collapse_msg = function(collapse_msg) { renderjson.options.collapse_msg = collapse_msg;
  140. return renderjson; };
  141. renderjson.set_property_list = function(prop_list) { renderjson.options.property_list = prop_list;
  142. return renderjson; };
  143. // Backwards compatiblity. Use set_show_to_level() for new code.
  144. renderjson.set_show_by_default = function(show) { renderjson.options.show_to_level = show ? Number.MAX_VALUE : 0;
  145. return renderjson; };
  146. renderjson.options = {};
  147. renderjson.set_icons('⊕', '⊖');
  148. renderjson.set_show_by_default(false);
  149. renderjson.set_sort_objects(false);
  150. renderjson.set_max_string_length("none");
  151. renderjson.set_replacer(void 0);
  152. renderjson.set_property_list(void 0);
  153. renderjson.set_collapse_msg(function(len) { return len + " item" + (len==1 ? "" : "s") })
  154. return renderjson;
  155. })();
  156.  
  157. if (define) define({renderjson:renderjson})
  158. else (module||{}).exports = (window||{}).renderjson = renderjson;</script>
  159. <style>
  160. body {
  161. background: #303030;
  162. }
  163. #con {
  164. text-shadow: none;
  165. background: #303030;
  166. padding: 1em;
  167. }
  168. .renderjson a {
  169. text-decoration: none;
  170. color: #fff;
  171. }
  172.  
  173. .renderjson .disclosure {
  174. color: crimson;
  175. font-size: 125%;
  176. position: relative;
  177. top: 3px;
  178. }
  179.  
  180. .renderjson .syntax {
  181. color: grey;
  182. }
  183.  
  184. .renderjson .string {
  185. color: pink;
  186. }
  187.  
  188. .renderjson .number {
  189. color: cyan;
  190. }
  191.  
  192. .renderjson .boolean {
  193. color: plum;
  194. }
  195.  
  196. .renderjson .key {
  197. color: lightblue;
  198. }
  199.  
  200. .renderjson .keyword {
  201. color: lightgoldenrodyellow;
  202. }
  203.  
  204. .renderjson .object.syntax {
  205. color: lightseagreen;
  206. }
  207.  
  208. .renderjson .array.syntax {
  209. color: lightsalmon;
  210. }
  211. </style>
  212. </head>
  213. <body>
  214. <div id="con"></div>
  215. <script>
  216. var data = {JSON}
  217. document.getElementById("con").appendChild(renderjson(data))
  218. </script>
  219.  
  220. </body>
  221. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!