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