update
This commit is contained in:
jhx
@@ -0,0 +1,391 @@
|
||||
window.SINGLE_TAB = " ";
|
||||
window.ImgCollapsed = "/static/images/collapsed.gif";
|
||||
window.ImgExpanded = "/static/images/expanded.gif";
|
||||
window.QuoteKeys = true;
|
||||
function $id(id) { return document.getElementById(id); }
|
||||
function IsArray(obj) {
|
||||
return obj &&
|
||||
typeof obj === 'object' &&
|
||||
typeof obj.length === 'number' &&
|
||||
!(obj.propertyIsEnumerable('length'));
|
||||
}
|
||||
|
||||
function Process() {
|
||||
SetTab();
|
||||
window.IsCollapsible = $id("CollapsibleView").checked;
|
||||
var json = $id("content").value;
|
||||
var html = "";
|
||||
try {
|
||||
$("#codeall").css("display", "none");
|
||||
$("#codeall2").css("display", "none");
|
||||
if (json == "") json = "\"\"";
|
||||
var obj = eval("[" + json + "]");
|
||||
html = ProcessObject(obj[0], 0, false, false, false);
|
||||
$id("Canvas").innerHTML = "<PRE class='CodeContainer'>" + html + "</PRE>";
|
||||
} catch (e) {
|
||||
$("#codeall").css("display", "block");
|
||||
$("#codeall2").css("display", "block");
|
||||
document.getElementById('errdiv').innerHTML = "输入的JSON数据格式不正确：" + e.message;
|
||||
$id("Canvas").innerHTML = "";
|
||||
}
|
||||
}
|
||||
window._dateObj = new Date();
|
||||
window._regexpObj = new RegExp();
|
||||
function ProcessObject(obj, indent, addComma, isArray, isPropertyContent) {
|
||||
var html = "";
|
||||
var comma = (addComma) ? "<span class='Comma'>,</span> " : "";
|
||||
var type = typeof obj;
|
||||
var clpsHtml = "";
|
||||
if (IsArray(obj)) {
|
||||
if (obj.length == 0) {
|
||||
html += GetRow(indent, "<span class='ArrayBrace'>[ ]</span>" + comma, isPropertyContent);
|
||||
} else {
|
||||
clpsHtml = window.IsCollapsible ? "<span><img src=\"" + window.ImgExpanded + "\" onClick=\"ExpImgClicked(this)\" /></span><span class='collapsible'>" : "";
|
||||
html += GetRow(indent, "<span class='ArrayBrace'>[</span>" + clpsHtml, isPropertyContent);
|
||||
for (var i = 0; i < obj.length; i++) {
|
||||
html += ProcessObject(obj[i], indent + 1, i < (obj.length - 1), true, false);
|
||||
}
|
||||
clpsHtml = window.IsCollapsible ? "</span>" : "";
|
||||
html += GetRow(indent, clpsHtml + "<span class='ArrayBrace'>]</span>" + comma);
|
||||
}
|
||||
} else if (type == 'object') {
|
||||
if (obj == null) {
|
||||
html += FormatLiteral("null", "", comma, indent, isArray, "Null");
|
||||
} else if (obj.constructor == window._dateObj.constructor) {
|
||||
html += FormatLiteral("new Date(" + obj.getTime() + ") /*" + obj.toLocaleString() + "*/", "", comma, indent, isArray, "Date");
|
||||
} else if (obj.constructor == window._regexpObj.constructor) {
|
||||
html += FormatLiteral("new RegExp(" + obj + ")", "", comma, indent, isArray, "RegExp");
|
||||
} else {
|
||||
var numProps = 0;
|
||||
for (var prop in obj) numProps++;
|
||||
if (numProps == 0) {
|
||||
html += GetRow(indent, "<span class='ObjectBrace'>{ }</span>" + comma, isPropertyContent);
|
||||
} else {
|
||||
clpsHtml = window.IsCollapsible ? "<span><img src=\"" + window.ImgExpanded + "\" onClick=\"ExpImgClicked(this)\" /></span><span class='collapsible'>" : "";
|
||||
html += GetRow(indent, "<span class='ObjectBrace'>{</span>" + clpsHtml, isPropertyContent);
|
||||
|
||||
var j = 0;
|
||||
|
||||
for (var prop in obj) {
|
||||
|
||||
var quote = window.QuoteKeys ? "\"" : "";
|
||||
|
||||
html += GetRow(indent + 1, "<span class='PropertyName'>" + quote + prop + quote + "</span>: " + ProcessObject(obj[prop], indent + 1, ++j < numProps, false, true));
|
||||
|
||||
}
|
||||
|
||||
clpsHtml = window.IsCollapsible ? "</span>" : "";
|
||||
|
||||
html += GetRow(indent, clpsHtml + "<span class='ObjectBrace'>}</span>" + comma);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
} else if (type == 'number') {
|
||||
|
||||
html += FormatLiteral(obj, "", comma, indent, isArray, "Number");
|
||||
|
||||
} else if (type == 'boolean') {
|
||||
|
||||
html += FormatLiteral(obj, "", comma, indent, isArray, "Boolean");
|
||||
|
||||
} else if (type == 'function') {
|
||||
|
||||
if (obj.constructor == window._regexpObj.constructor) {
|
||||
|
||||
html += FormatLiteral("new RegExp(" + obj + ")", "", comma, indent, isArray, "RegExp");
|
||||
|
||||
} else {
|
||||
|
||||
obj = FormatFunction(indent, obj);
|
||||
|
||||
html += FormatLiteral(obj, "", comma, indent, isArray, "Function");
|
||||
|
||||
}
|
||||
|
||||
} else if (type == 'undefined') {
|
||||
|
||||
html += FormatLiteral("undefined", "", comma, indent, isArray, "Null");
|
||||
|
||||
} else {
|
||||
|
||||
html += FormatLiteral(obj.toString().split("\\").join("\\\\").split('"').join('\\"'), "\"", comma, indent, isArray, "String");
|
||||
|
||||
}
|
||||
|
||||
return html;
|
||||
|
||||
}
|
||||
|
||||
function FormatLiteral(literal, quote, comma, indent, isArray, style) {
|
||||
|
||||
if (typeof literal == 'string')
|
||||
|
||||
literal = literal.split("<").join("<").split(">").join(">");
|
||||
|
||||
var str = "<span class='" + style + "'>" + quote + literal + quote + comma + "</span>";
|
||||
|
||||
if (isArray) str = GetRow(indent, str);
|
||||
|
||||
return str;
|
||||
|
||||
}
|
||||
|
||||
function FormatFunction(indent, obj) {
|
||||
|
||||
var tabs = "";
|
||||
|
||||
for (var i = 0; i < indent; i++) tabs += window.TAB;
|
||||
|
||||
var funcStrArray = obj.toString().split("\n");
|
||||
|
||||
var str = "";
|
||||
|
||||
for (var i = 0; i < funcStrArray.length; i++) {
|
||||
|
||||
str += ((i == 0) ? "" : tabs) + funcStrArray[i] + "\n";
|
||||
|
||||
}
|
||||
|
||||
return str;
|
||||
|
||||
}
|
||||
|
||||
function GetRow(indent, data, isPropertyContent) {
|
||||
|
||||
var tabs = "";
|
||||
|
||||
for (var i = 0; i < indent && !isPropertyContent; i++) tabs += window.TAB;
|
||||
|
||||
if (data != null && data.length > 0 && data.charAt(data.length - 1) != "\n")
|
||||
|
||||
data = data + "\n";
|
||||
|
||||
return tabs + data;
|
||||
|
||||
}
|
||||
|
||||
function CollapsibleViewClicked() {
|
||||
|
||||
$id("CollapsibleViewDetail").style.visibility = $id("CollapsibleView").checked ? "visible" : "hidden";
|
||||
|
||||
Process();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function QuoteKeysClicked() {
|
||||
|
||||
window.QuoteKeys = $id("QuoteKeys").checked;
|
||||
|
||||
Process();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function CollapseAllClicked() {
|
||||
|
||||
EnsureIsPopulated();
|
||||
|
||||
TraverseChildren($id("Canvas"), function (element) {
|
||||
|
||||
if (element.className == 'collapsible') {
|
||||
|
||||
MakeContentVisible(element, false);
|
||||
|
||||
}
|
||||
|
||||
}, 0);
|
||||
|
||||
}
|
||||
|
||||
function ExpandAllClicked() {
|
||||
|
||||
EnsureIsPopulated();
|
||||
|
||||
TraverseChildren($id("Canvas"), function (element) {
|
||||
|
||||
if (element.className == 'collapsible') {
|
||||
|
||||
MakeContentVisible(element, true);
|
||||
|
||||
}
|
||||
|
||||
}, 0);
|
||||
|
||||
}
|
||||
|
||||
function MakeContentVisible(element, visible) {
|
||||
|
||||
var img = element.previousSibling.firstChild;
|
||||
|
||||
if (!!img.tagName && img.tagName.toLowerCase() == "img") {
|
||||
|
||||
element.style.display = visible ? 'inline' : 'none';
|
||||
|
||||
element.previousSibling.firstChild.src = visible ? window.ImgExpanded : window.ImgCollapsed;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function TraverseChildren(element, func, depth) {
|
||||
|
||||
for (var i = 0; i < element.childNodes.length; i++) {
|
||||
|
||||
TraverseChildren(element.childNodes[i], func, depth + 1);
|
||||
|
||||
}
|
||||
|
||||
func(element, depth);
|
||||
|
||||
}
|
||||
|
||||
function ExpImgClicked(img) {
|
||||
|
||||
var container = img.parentNode.nextSibling;
|
||||
|
||||
if (!container) return;
|
||||
|
||||
var disp = "none";
|
||||
|
||||
var src = window.ImgCollapsed;
|
||||
|
||||
if (container.style.display == "none") {
|
||||
|
||||
disp = "inline";
|
||||
|
||||
src = window.ImgExpanded;
|
||||
|
||||
}
|
||||
|
||||
container.style.display = disp;
|
||||
|
||||
img.src = src;
|
||||
|
||||
}
|
||||
|
||||
function CollapseLevel(level) {
|
||||
|
||||
EnsureIsPopulated();
|
||||
|
||||
TraverseChildren($id("Canvas"), function (element, depth) {
|
||||
|
||||
if (element.className == 'collapsible') {
|
||||
|
||||
if (depth >= level) {
|
||||
|
||||
MakeContentVisible(element, false);
|
||||
|
||||
} else {
|
||||
|
||||
MakeContentVisible(element, true);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}, 0);
|
||||
|
||||
}
|
||||
|
||||
function TabSizeChanged() {
|
||||
|
||||
Process();
|
||||
|
||||
}
|
||||
|
||||
function SetTab() {
|
||||
|
||||
var select = $id("TabSize");
|
||||
|
||||
window.TAB = MultiplyString(parseInt(select.options[select.selectedIndex].value), window.SINGLE_TAB);
|
||||
|
||||
}
|
||||
|
||||
function EnsureIsPopulated() {
|
||||
|
||||
if (!$id("Canvas").innerHTML && !!$id("content").value) Process();
|
||||
|
||||
}
|
||||
|
||||
function MultiplyString(num, str) {
|
||||
|
||||
var sb = [];
|
||||
|
||||
for (var i = 0; i < num; i++) {
|
||||
|
||||
sb.push(str);
|
||||
|
||||
}
|
||||
|
||||
return sb.join("");
|
||||
|
||||
}
|
||||
|
||||
function SelectAllClicked() {
|
||||
|
||||
|
||||
|
||||
if (!!document.selection && !!document.selection.empty) {
|
||||
|
||||
document.selection.empty();
|
||||
|
||||
} else if (window.getSelection) {
|
||||
|
||||
var sel = window.getSelection();
|
||||
|
||||
if (sel.removeAllRanges) {
|
||||
|
||||
window.getSelection().removeAllRanges();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
var range =
|
||||
|
||||
(!!document.body && !!document.body.createTextRange)
|
||||
|
||||
? document.body.createTextRange()
|
||||
|
||||
: document.createRange();
|
||||
|
||||
|
||||
|
||||
if (!!range.selectNode)
|
||||
|
||||
range.selectNode($id("Canvas"));
|
||||
|
||||
else if (range.moveToElementText)
|
||||
|
||||
range.moveToElementText($id("Canvas"));
|
||||
|
||||
|
||||
|
||||
if (!!range.select)
|
||||
|
||||
range.select($id("Canvas"));
|
||||
|
||||
else
|
||||
|
||||
window.getSelection().addRange(range);
|
||||
|
||||
}
|
||||
|
||||
function LinkToJson() {
|
||||
|
||||
var val = $id("content").value;
|
||||
|
||||
val = escape(val.split('/n').join(' ').split('/r').join(' '));
|
||||
|
||||
$id("InvisibleLinkUrl").value = val;
|
||||
|
||||
$id("InvisibleLink").submit();
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user