opt json

plugin/local/wiki/json.css

@@ -1,12 +1,25 @@
-div.node {
+fieldset.plugin.json div.output div.node div.node {
     border:solid 1px #0000000d;
     border-left:dashed 1px lightblue;
-    margin-left:5px;
+    margin-left:5px; padding-left:15px;
-    padding-left:15px;
+    font-size:14px; font-family:monospace;
-    font-size:14px;
-    font-family:monospace;
     cursor:pointer;
 }
-div.node:hover {
+fieldset.plugin.json div.output div.node div.node:hover {
     border:solid 1px red;
 }
+fieldset.plugin.json div.output div.node span.nonce {
+    font-size:12px; font-family:auto;
+    color:lightblue;
+    cursor:pointer;
+}
+fieldset.plugin.json div.output div.node span.key {
+    color:yellow;
+}
+fieldset.plugin.json div.output div.node span.string {
+    color:magenta;
+}
+fieldset.plugin.json div.output div.node span.const {
+    color:blue;
+}
+

plugin/local/wiki/json.js

@@ -1,56 +1,58 @@
 Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, list, cb) {
+        can.onmotion.clear(can)
+        can.onimport.data(can, can.base.Obj(msg.Result(), "{}"), can._output)
         can.base.isFunc(cb) && cb(msg)
-        function show(data, target) { var node
+    },
+    data: function(can, data, target) {
+        function show(data, target, index, total) { var list
             switch (typeof data) {
-                case "object": break
+                case "object":
-                case "string": can.page.Append(can, target, [{text: '"'+data+'"'}]); return
+                    function wrap(begin, end, add, cb) {
-                default: can.page.Append(can, target, [{text: ''+data+''}]); return
+                        can.page.Append(can, target, [{text: begin}])
+                        add && can.page.Append(can, target, [{text: ["...", "span", "nonce"], onclick: function(event) {
+                            list && can.onmotion.toggle(can, list)
+                        }}]), cb()
+                        can.page.Append(can, target, [{text: end}])
+                    }
+                    function _node() {
+                        list = list || can.page.Append(can, target, [{view: "list"}]).list
+                        return can.page.Append(can, list, [{view: "node"}]).node
+                    }
+
+                    if (can.base.isArray(data)) { // 数组
+                        wrap("[", "]", data.length > 0, function() { can.core.List(data, function(value, index) { var node = _node()
+                            show(value, node, index, data.length)
+                        }) }); break
+                    }
+
+                    // 对象
+                    var length = can.core.Item(data).length, count = 0
+                    wrap("{", "}", length > 0, function() { can.core.Item(data, function(key, value) { var node = _node()
+                        can.page.Append(can, node, [{text: ['"'+key+'"', "span", "key"], onclick: function(event) {
+                            sub && can.onmotion.toggle(can, sub)
+                        }}, {text: ': '}])
+                        var sub = show(value, node, count++, length)
+                    }) }); break
+                case "string": /* 字串 */ can.page.Append(can, target, [{text: ['"'+data+'"', "span", "string"]}]); break
+                default: /* 其它 */ can.page.Append(can, target, [{text: [''+data+'', "span", "const"]}])
             }
 
-            if (can.base.isArray(data)) {
+            (index < total-1) && can.page.Append(can, target, [{text: ","}])
-                can.page.Append(can, target, [{text: "["}])
+            return list
-                can.core.List(data, function(value, index) {
+        }; show(data, can.page.Append(can, target, [{view: "node"}]).node, 0, 0)
-                    node = node || can.page.Append(can, target, [{view: "node"}]).node
-
-                    sub = show(value, node);
-                    (index < data.length-1) && can.page.Append(can, node, [{text: ","}])
-                    can.page.Append(can, node, [{type: "br"}])
-                })
-                can.page.Append(can, target, [{text: "]"}])
-                return node
-            }
-
-            can.page.Append(can, target, [{text: "{"}])
-            var total = can.core.Item(data).length, count = 0
-            can.core.Item(data, function(key, value) { var sub
-                node = node || can.page.Append(can, target, [{view: "node"}]).node
-
-                can.page.Append(can, node, [{text: '"'+key+'": ', onclick: function(event) {
-                    sub && can.onmotion.toggle(can, sub)
-                }}])
-
-                sub = show(value, node);
-                (++count < total) && can.page.Append(can, node, [{text: ","}])
-                can.page.Append(can, node, [{type: "br"}])
-            })
-            can.page.Append(can, target, [{text: "}"}])
-            return node
-        }
-        show(JSON.parse(msg.Result()), can._output)
     },
 }, ["/plugin/local/wiki/json.css"])
 Volcanos("onaction", {help: "组件菜单", list: ["全部展开", "全部折叠"],
     "全部展开": function(event, can) {
-        can.page.Select(can, can._output, "div.node div.node", function(node) {
+        can.page.Select(can, can._output, "div.list div.list", function(list) {
-            can.page.Modify(can, node, {style: {display: "block"}})
+            can.page.Modify(can, list, {style: {display: "block"}})
         })
     },
     "全部折叠": function(event, can) {
-        can.page.Select(can, can._output, "div.node div.node", function(node) {
+        can.page.Select(can, can._output, "div.list div.list", function(list) {
-            can.page.Modify(can, node, {style: {display: "none"}})
+            can.page.Modify(can, list, {style: {display: "none"}})
         })
     },
 })
 Volcanos("onexport", {help: "导出数据", list: []})
 
-