c.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
  1. window.SINGLE_TAB = " ";
  2. window.ImgCollapsed = "../../assets/css/json/Collapsed.gif";
  3. window.ImgExpanded = "../../assets/css/json/Expanded.gif";
  4. window.QuoteKeys = true;
  5. function $id(id) {
  6. return document.getElementById(id);
  7. }
  8. function IsArray(obj) {
  9. return obj &&
  10. typeof obj === 'object' &&
  11. typeof obj.length === 'number' &&
  12. !(obj.propertyIsEnumerable('length'));
  13. }
  14. function Process() {
  15. SetTab();
  16. window.IsCollapsible = $id("CollapsibleView").checked;
  17. var json = $id("RawJson").value;
  18. var html = "";
  19. try {
  20. if (json == "") json = "\"\"";
  21. var obj = eval("[" + json + "]");
  22. html = ProcessObject(obj[0], 0, false, false, false);
  23. $id("Canvas").innerHTML = "<PRE class='CodeContainer'>" + html + "</PRE>";
  24. } catch (e) {
  25. alert("JSON数据格式不正确:\n" + e.message);
  26. $id("Canvas").innerHTML = "";
  27. }
  28. }
  29. window._dateObj = new Date();
  30. window._regexpObj = new RegExp();
  31. function ProcessObject(obj, indent, addComma, isArray, isPropertyContent) {
  32. var html = "";
  33. var comma = (addComma) ? "<span class='Comma'>,</span> " : "";
  34. var type = typeof obj;
  35. var clpsHtml = "";
  36. if (IsArray(obj)) {
  37. if (obj.length == 0) {
  38. html += GetRow(indent, "<span class='ArrayBrace'>[ ]</span>" + comma, isPropertyContent);
  39. } else {
  40. clpsHtml = window.IsCollapsible ? "<span><img src=\"" + window.ImgExpanded + "\" onClick=\"ExpImgClicked(this)\" /></span><span class='collapsible'>" : "";
  41. html += GetRow(indent, "<span class='ArrayBrace'>[</span>" + clpsHtml, isPropertyContent);
  42. for (var i = 0; i < obj.length; i++) {
  43. html += ProcessObject(obj[i], indent + 1, i < (obj.length - 1), true, false);
  44. }
  45. clpsHtml = window.IsCollapsible ? "</span>" : "";
  46. html += GetRow(indent, clpsHtml + "<span class='ArrayBrace'>]</span>" + comma);
  47. }
  48. } else if (type == 'object') {
  49. if (obj == null) {
  50. html += FormatLiteral("null", "", comma, indent, isArray, "Null");
  51. } else if (obj.constructor == window._dateObj.constructor) {
  52. html += FormatLiteral("new Date(" + obj.getTime() + ") /*" + obj.toLocaleString() + "*/", "", comma, indent, isArray, "Date");
  53. } else if (obj.constructor == window._regexpObj.constructor) {
  54. html += FormatLiteral("new RegExp(" + obj + ")", "", comma, indent, isArray, "RegExp");
  55. } else {
  56. var numProps = 0;
  57. for (var prop in obj) numProps++;
  58. if (numProps == 0) {
  59. html += GetRow(indent, "<span class='ObjectBrace'>{ }</span>" + comma, isPropertyContent);
  60. } else {
  61. clpsHtml = window.IsCollapsible ? "<span><img src=\"" + window.ImgExpanded + "\" onClick=\"ExpImgClicked(this)\" /></span><span class='collapsible'>" : "";
  62. html += GetRow(indent, "<span class='ObjectBrace'>{</span>" + clpsHtml, isPropertyContent);
  63. var j = 0;
  64. for (var prop in obj) {
  65. var quote = window.QuoteKeys ? "\"" : "";
  66. html += GetRow(indent + 1, "<span class='PropertyName'>" + quote + prop + quote + "</span>: " + ProcessObject(obj[prop], indent + 1, ++j < numProps, false, true));
  67. }
  68. clpsHtml = window.IsCollapsible ? "</span>" : "";
  69. html += GetRow(indent, clpsHtml + "<span class='ObjectBrace'>}</span>" + comma);
  70. }
  71. }
  72. } else if (type == 'number') {
  73. html += FormatLiteral(obj, "", comma, indent, isArray, "Number");
  74. } else if (type == 'boolean') {
  75. html += FormatLiteral(obj, "", comma, indent, isArray, "Boolean");
  76. } else if (type == 'function') {
  77. if (obj.constructor == window._regexpObj.constructor) {
  78. html += FormatLiteral("new RegExp(" + obj + ")", "", comma, indent, isArray, "RegExp");
  79. } else {
  80. obj = FormatFunction(indent, obj);
  81. html += FormatLiteral(obj, "", comma, indent, isArray, "Function");
  82. }
  83. } else if (type == 'undefined') {
  84. html += FormatLiteral("undefined", "", comma, indent, isArray, "Null");
  85. } else {
  86. html += FormatLiteral(obj.toString().split("\\").join("\\\\").split('"').join('\\"'), "\"", comma, indent, isArray, "String");
  87. }
  88. return html;
  89. }
  90. function FormatLiteral(literal, quote, comma, indent, isArray, style) {
  91. if (typeof literal == 'string')
  92. literal = literal.split("<").join("&lt;").split(">").join("&gt;");
  93. var str = "<span class='" + style + "'>" + quote + literal + quote + comma + "</span>";
  94. if (isArray) str = GetRow(indent, str);
  95. return str;
  96. }
  97. function FormatFunction(indent, obj) {
  98. var tabs = "";
  99. for (var i = 0; i < indent; i++) tabs += window.TAB;
  100. var funcStrArray = obj.toString().split("\n");
  101. var str = "";
  102. for (var i = 0; i < funcStrArray.length; i++) {
  103. str += ((i == 0) ? "" : tabs) + funcStrArray[i] + "\n";
  104. }
  105. return str;
  106. }
  107. function GetRow(indent, data, isPropertyContent) {
  108. var tabs = "";
  109. for (var i = 0; i < indent && !isPropertyContent; i++) tabs += window.TAB;
  110. if (data != null && data.length > 0 && data.charAt(data.length - 1) != "\n")
  111. data = data + "\n";
  112. return tabs + data;
  113. }
  114. function CollapsibleViewClicked() {
  115. $id("CollapsibleViewDetail").style.visibility = $id("CollapsibleView").checked ? "visible" : "hidden";
  116. Process();
  117. }
  118. function QuoteKeysClicked() {
  119. window.QuoteKeys = $id("QuoteKeys").checked;
  120. Process();
  121. }
  122. function CollapseAllClicked() {
  123. EnsureIsPopulated();
  124. TraverseChildren($id("Canvas"), function (element) {
  125. if (element.className == 'collapsible') {
  126. MakeContentVisible(element, false);
  127. }
  128. }, 0);
  129. }
  130. function ExpandAllClicked() {
  131. EnsureIsPopulated();
  132. TraverseChildren($id("Canvas"), function (element) {
  133. if (element.className == 'collapsible') {
  134. MakeContentVisible(element, true);
  135. }
  136. }, 0);
  137. }
  138. function MakeContentVisible(element, visible) {
  139. var img = element.previousSibling.firstChild;
  140. if (!!img.tagName && img.tagName.toLowerCase() == "img") {
  141. element.style.display = visible ? 'inline' : 'none';
  142. element.previousSibling.firstChild.src = visible ? window.ImgExpanded : window.ImgCollapsed;
  143. }
  144. }
  145. function TraverseChildren(element, func, depth) {
  146. for (var i = 0; i < element.childNodes.length; i++) {
  147. TraverseChildren(element.childNodes[i], func, depth + 1);
  148. }
  149. func(element, depth);
  150. }
  151. function ExpImgClicked(img) {
  152. var container = img.parentNode.nextSibling;
  153. if (!container) return;
  154. var disp = "none";
  155. var src = window.ImgCollapsed;
  156. if (container.style.display == "none") {
  157. disp = "inline";
  158. src = window.ImgExpanded;
  159. }
  160. container.style.display = disp;
  161. img.src = src;
  162. }
  163. function CollapseLevel(level) {
  164. EnsureIsPopulated();
  165. TraverseChildren($id("Canvas"), function (element, depth) {
  166. if (element.className == 'collapsible') {
  167. if (depth >= level) {
  168. MakeContentVisible(element, false);
  169. } else {
  170. MakeContentVisible(element, true);
  171. }
  172. }
  173. }, 0);
  174. }
  175. function TabSizeChanged() {
  176. Process();
  177. }
  178. function SetTab() {
  179. var select = $id("TabSize");
  180. window.TAB = MultiplyString(parseInt(select.options[select.selectedIndex].value), window.SINGLE_TAB);
  181. }
  182. function EnsureIsPopulated() {
  183. if (!$id("Canvas").innerHTML && !!$id("RawJson").value) Process();
  184. }
  185. function MultiplyString(num, str) {
  186. var sb = [];
  187. for (var i = 0; i < num; i++) {
  188. sb.push(str);
  189. }
  190. return sb.join("");
  191. }
  192. function SelectAllClicked() {
  193. if (!!document.selection && !!document.selection.empty) {
  194. document.selection.empty();
  195. } else if (window.getSelection) {
  196. var sel = window.getSelection();
  197. if (sel.removeAllRanges) {
  198. window.getSelection().removeAllRanges();
  199. }
  200. }
  201. var range =
  202. (!!document.body && !!document.body.createTextRange)
  203. ? document.body.createTextRange()
  204. : document.createRange();
  205. if (!!range.selectNode)
  206. range.selectNode($id("Canvas"));
  207. else if (range.moveToElementText)
  208. range.moveToElementText($id("Canvas"));
  209. if (!!range.select)
  210. range.select($id("Canvas"));
  211. else
  212. window.getSelection().addRange(range);
  213. }
  214. function LinkToJson() {
  215. var val = $id("RawJson").value;
  216. val = escape(val.split('/n').join(' ').split('/r').join(' '));
  217. $id("InvisibleLinkUrl").value = val;
  218. $id("InvisibleLink").submit();
  219. }