add ondebug.example.js

usr/librarys/chat.css

@@ -1,68 +1,52 @@
-fieldset.Login {
-    font-size:28px;
-}
-fieldset.Login input {
-    font-size:18px;
-    height:28px;
-}
-fieldset.Login button {
-    font-size:18px;
-    height:28px;
-}
-fieldset.Ocean div.create pre:hover {
-    background-color:red;
-}
-fieldset.Ocean div.create pre:hover {
-    background-color:red;
-}
-
-fieldset.River {
-    float:left;
-}
-fieldset.Target div.output div.item:hover {
-    background-color:lightgreen;
-}
-fieldset.Target>div.output>div.item {
-    padding-top:6px;
-    clear:both;
-}
-fieldset.Target>div.output>div.item>div.text {
-    padding:6px;
-    float:left;
-}
-fieldset.Target>div.output>div.item>div.user {
-    border-right:solid 1px green;
-    border-bottom:solid 1px green;
-    float:left;
-    padding:6px;
-}
-fieldset.Source div.output {
-    padding:0;
-}
-fieldset.Action div.output div.item:hover {
-    background-color:lightblue;
-}
-fieldset.Storm {
-    float:right;
-}
-
-fieldset.Steam table.device {
-    padding:10px;
-    border:solid 1px green;
-    margin-left:10px;
-    float:left;
-}
-fieldset.Steam div.output tr.select {
-    background-color:red;
-}
-fieldset.Steam div.create {
-    /* clear:both; */
-}
-fieldset.Steam div.create pre:hover {
-    background-color:red;
-}
-
-fieldset div.output {
-    clear:both;
-    max-height:800px;
-}
+fieldset.Ocean div.create pre:hover {
+    background-color:red;
+}
+fieldset.Ocean div.create pre:hover {
+    background-color:red;
+}
+
+fieldset.River {
+    float:left;
+}
+fieldset.Target div.output div.item:hover {
+    background-color:lightgreen;
+}
+fieldset.Target>div.output>div.item {
+    padding-top:6px;
+    clear:both;
+}
+fieldset.Target>div.output>div.item>div.text {
+    padding:6px;
+    float:left;
+}
+fieldset.Target>div.output>div.item>div.user {
+    border-right:solid 1px green;
+    border-bottom:solid 1px green;
+    float:left;
+    padding:6px;
+}
+fieldset.Source div.output {
+    padding:0;
+}
+fieldset.Action div.output div.item:hover {
+    background-color:lightblue;
+}
+fieldset.Storm {
+    float:right;
+}
+
+fieldset.Steam table.device {
+    padding:10px;
+    border:solid 1px green;
+    margin-left:10px;
+    float:left;
+}
+fieldset.Steam div.output tr.select {
+    background-color:red;
+}
+fieldset.Steam div.create {
+    /* clear:both; */
+}
+fieldset.Steam div.create pre:hover {
+    background-color:red;
+}

usr/librarys/chat.js

@@ -1,4 +1,4 @@
-Page({
+page = Page({
     conf: {refresh: 1000, border: 4, layout: {header:30, river:120, action:180, source:60, storm:100, footer:30}},
     onlayout: function(event, sizes) {
         var page = this
@@ -280,12 +280,8 @@ Page({
                 return layout.value
             },
             Action: {
-                "恢复": function(event, value) {
-                    page.onlayout(event, page.conf.layout)
-                },
                 "聊天": function(event, value) {
                     page.onlayout(event, page.conf.layout)
-                    page.onlayout(event, {action:60, source:60})
                 },
                 "办公": function(event, value) {
                     page.onlayout(event, page.conf.layout)
@@ -325,7 +321,7 @@ Page({
                             field.Pane.Conf("running", true), setTimeout(function() {
                                 run(list.slice(1))
                             }, 1000)
-                        }): pane.Conf("running", false)
+                        }): field.Pane.Conf("running", false)
                     }
                     run(list)
                 },
@@ -334,18 +330,18 @@ Page({
                     page.plugin && page.plugin.Plugin.Clone().Select()
                 },
                 "删除": function(event, value) {
-                    page.input && page.plugin.Plugin.Remove()
+                    page.input && page.plugin.Plugin.Delete()
                 },
                 "加参": function(event, value) {
                     page.plugin && page.plugin.Plugin.Append({})
                 },
-                "去参": function(event, value) {
-                    page.plugin && page.plugin.Plugin.Prepend()
+                "减参": function(event, value) {
+                    page.plugin && page.plugin.Plugin.Remove()
                 },
             },
-            Button: [["layout", "恢复", "聊天", "办公", "工作", "最高", "最宽", "最大"], "br",
-                "刷新", "清空", "并行", "串行", "br",
-                "添加", "删除", "加参", "去参", "br",
+            Button: [["layout", "聊天", "办公", "工作", "最高", "最宽", "最大"], "",
+                "刷新", "清空", "并行", "串行", "",
+                "添加", "删除", "加参", "减参", "",
             ],
         }
     },

usr/librarys/example.css

@@ -15,37 +15,46 @@ fieldset {
 legend {
     margin-left:10px;
 }
-fieldset form.option div {
+fieldset>form.option div {
     margin-right:6px;
     float:left;
 }
-fieldset form.option div.hide {
+fieldset>form.option div.hide {
     display:none;
 }
-fieldset form.option div input.args {
+fieldset>form.option div input.args {
     width:80px;
 }
-fieldset form.option div.cmd input.args {
+fieldset>form.option div.cmd input.args {
     color:white;
     background-color: black;
     width:160px;
 }
-fieldset form.option div.long input.args {
+fieldset>form.option div.long input.args {
     width:320px;
 }
-fieldset form.option label {
+fieldset>form.option label {
     margin-right:6px;
 }
-fieldset div.output {
+fieldset>div.action {
     padding:6px;
 }
-fieldset div.output div.item:hover {
+fieldset>div.action>div.space {
+    display:inline-block;
+    width:10px;
+}
+fieldset>div.output {
+    clear:both;
+    max-height:800px;
+    padding:6px;
+}
+fieldset>div.output div.item:hover {
     background-color:red;
 }
-fieldset div.output div.item.select {
+fieldset>div.output div.item.select {
     background-color:red;
 }
-fieldset div.output div.code {
+fieldset>div.output div.code {
     color:white;
     font-size:14px;
     font-family:monospace;
@@ -56,17 +65,17 @@ fieldset div.output div.code {
     border:solid 3px green;
     max-height:640px;
 }
-fieldset div.output div.code span.red {
+fieldset>div.output div.code span.red {
     color:red;
 }
-fieldset div.output div.code span.green {
+fieldset>div.output div.code span.green {
     color:green;
 }
-fieldset div.output table td {
+fieldset>div.output table td {
     word-break:break-all;
     min-width:40px;
 }
-fieldset div.output table td {
+fieldset>div.output table td {
     word-break:keep-all;
     min-width:40px;
 }
@@ -76,10 +85,10 @@ fieldset.toast {
     position:absolute;
     display:none;
 }
-fieldset.toast div.output {
+fieldset.toast>div.output {
     padding:0 10px;
 }
-fieldset.toast div.output pre {
+fieldset.toast>div.output pre {
     word-break:break-word;
     white-space:pre-wrap;
     text-align:center;
@@ -91,46 +100,63 @@ fieldset.dialog {
     display:none;
     position:absolute;
 }
-fieldset.dialog div.output {
+fieldset.dialog>div.output {
     padding:10px;
     float:left;
 }
-fieldset.dialog div.output table th {
+fieldset.dialog>div.output table th {
     min-width:130px;
 }
-fieldset.dialog div.output table td {
+fieldset.dialog>div.output table td {
     min-width:100px;
 }
-fieldset.dialog div.create {
+fieldset.dialog>div.create {
     padding:10px;
     border:solid 1px red;
     margin-left:10px;
     float:left;
 }
-fieldset.Header div.output div.title {
+
+fieldset.Header {
+    height:32px;
+    clear:both;
+}
+fieldset.Header>div.output div.title {
     float:left;
 }
-fieldset.Header div.output div.state {
+fieldset.Header>div.output div.state {
     float:right;
 }
-fieldset.Header div.output div.state div {
+fieldset.Header>div.output div.state div {
     margin-left:5px;
     float:right;
     cursor:pointer;
 }
 fieldset.Footer {
     clear:both;
+    height:32px;
 }
-fieldset.Footer div.output div.title {
+fieldset.Footer>div.output div.title {
     float:left;
 }
-fieldset.Footer div.output div.state {
+fieldset.Footer>div.output div.state {
     float:right;
 }
-fieldset.Footer div.output div.state div {
+fieldset.Footer>div.output div.state div {
     margin-left:5px;
     float:right;
 }
+fieldset.Login {
+    font-size:28px;
+}
+fieldset.Login>form.option input {
+    font-size:18px;
+    height:28px;
+}
+fieldset.Login>form.option button {
+    font-size:18px;
+    height:28px;
+}
 
 .hidden {
     display:none;
@@ -172,7 +198,6 @@ fieldset table td.clip {
 fieldset table td:hover {
     background-color:red;
 }
-
 fieldset pre code, fieldset code pre {
     color:white;
     font-size:14px;
@@ -184,15 +209,3 @@ fieldset pre code, fieldset code pre {
     display:block;
 }
 
-fieldset.Banner>ul {
-    margin:0;
-    padding:0;
-}
-fieldset.Banner>ul>li {
-    display:inline;
-    padding:5px;
-    margin:0;
-}
-fieldset.Banner>ul>li:hover {
-    background-color:red;
-}

usr/librarys/example.js

@@ -145,6 +145,17 @@ function Page(page) {
             args.duration !=- 1 && setTimeout(function(){toast.style.display = "none"}, args.duration||3000)
             page.toast = toast
         },
+        ondebug: function() {
+            if (!this.debug) {
+                var pane = Pane(page)
+                pane.Field.style.position = "absolute"
+                pane.Field.style["background-color"] = "#ffffff00"
+                pane.Field.style["color"] = "red"
+                pane.ShowDialog(400, 400)
+                this.debug = pane
+            }
+            kit.AppendChild(this.debug.Field, [{text: [JSON.stringify(arguments.length==1? arguments[0]: arguments)]}])
+        },
         oninput: function(event, local) {
             var target = event.target
             kit.History.add("key", (event.ctrlKey? "Control+": "")+(event.shiftKey? "Shift+": "")+event.key)
@@ -366,6 +377,7 @@ function Page(page) {
     return page
 }
 function Pane(page, field) {
+    field = field || kit.AppendChild(document.body, [{type: "fieldset", list: [{view: ["option", "form"]}, {view: ["output"]}]}]).last
     var option = field.querySelector("form.option")
     var action = field.querySelector("div.action")
     var output = field.querySelector("div.output")
@@ -504,14 +516,14 @@ function Pane(page, field) {
     for (var k in pane.Listen) {
         page.Sync(k).change(pane.Listen[k])
     }
-    kit.InsertChild(field, output, "div", pane.Button.map(function(value) {
+    pane.Button && pane.Button.length > 0 && (kit.InsertChild(field, output, "div", pane.Button.map(function(value) {
         return typeof value == "object"? {className: value[0], select: [value.slice(1), function(event) {
             value = event.target.value
             typeof pane.Action == "function"? pane.Action(value, event): pane.Action[value](event, value)
-        }]}: value == "br"? {"type": "br"}: {"button": [value, function(event) {
+        }]}: value == ""? {view: ["space"]} :value == "br"? {type: "br"}: {button: [value, function(event) {
             typeof pane.Action == "function"? pane.Action(value, event): pane.Action[value](event, value)
         }]}
-    })).className="action "+name
+    })).className="action "+name)
     option.onsubmit = function(event) {
         event.preventDefault()
     };
@@ -609,7 +621,7 @@ function Plugin(page, pane, field) {
             })
             return action
         },
-        Prepend: function() {
+        Remove: function() {
             var list = option.querySelectorAll(".args")
             list.length > 0 && option.removeChild(list[list.length-1].parentNode)
         },
@@ -622,9 +634,10 @@ function Plugin(page, pane, field) {
             return JSON.stringify(field.Meta)
         },
         Reveal: function(msg) {
-            return msg.append && msg.append[0]? ["table", JSON.stringify(ctx.Tables(msg))]: ["code", msg.result.join("")]
+            return msg.append && msg.append[0]? ["table", JSON.stringify(ctx.Tables(msg))]: ["code", msg.result? msg.result.join(""): ""]
         },
-        Remove: function() {
+        Delete: function() {
+            page.plugin = field.previousSibling
             field.parentNode.removeChild(field)
         },
         Clone: function() {
@@ -646,15 +659,6 @@ function Plugin(page, pane, field) {
                 plugin.ondaemon[display.deal||"table"](msg)
             })
         },
-        Location: function(event) {
-            output.className = "output long"
-            page.getLocation(function(res) {
-                field.Run(event, [parseInt(res.latitude*1000000+1400)/1000000.0, parseInt(res.longitude*1000000+6250)/1000000.0].concat(
-                    kit.Selector(option, ".args", function(item) {return item.value}))
-                , plugin.ondaemon)
-            })
-        },
-
         Clear: function() {
             output.innerHTML = ""
         },
@@ -691,6 +695,15 @@ function Plugin(page, pane, field) {
                 }
             },
         },
+
+        Location: function(event) {
+            output.className = "output long"
+            page.getLocation(function(res) {
+                field.Run(event, [parseInt(res.latitude*1000000+1400)/1000000.0, parseInt(res.longitude*1000000+6250)/1000000.0].concat(
+                    kit.Selector(option, ".args", function(item) {return item.value}))
+                , plugin.ondaemon)
+            })
+        },
         init: function() {},
     }