opt plugin()

src/contexts/ssh/ssh.go

@@ -60,6 +60,13 @@ var Index = &ctx.Context{Name: "ssh", Help: "集群中心",
 					},
 					"display_result": "", "display_append": "",
 				},
+				map[string]interface{}{"componet_name": "dir", "componet_help": "dir", "componet_tmpl": "componet",
+					"componet_view": "FlashList", "componet_init": "initFlashList.js",
+					"componet_ctx": "nfs", "componet_cmd": "dir", "componet_args": []interface{}{"@text"}, "inputs": []interface{}{
+						map[string]interface{}{"type": "text", "name": "text"},
+					},
+					"display_result": "", "display_append": "",
+				},
 			},
 		}, Help: "组件列表"},
 	},

src/examples/chat/chat.go

@@ -49,11 +49,11 @@ var Index = &ctx.Context{Name: "chat", Help: "会议中心",
 				},
 
 				map[string]interface{}{"componet_name": "ocean", "componet_tmpl": "fieldset",
-					"componet_view": "Ocean", "componet_init": "initOcean",
+					"componet_view": "Ocean dialog", "componet_init": "initOcean",
 					"componet_ctx": "web.chat", "componet_cmd": "ocean",
 				},
 				map[string]interface{}{"componet_name": "steam", "componet_tmpl": "fieldset",
-					"componet_view": "Steam", "componet_init": "initSteam",
+					"componet_view": "Steam dialog", "componet_init": "initSteam",
 					"componet_ctx": "web.chat", "componet_cmd": "steam",
 				},
 				map[string]interface{}{"componet_name": "river", "componet_tmpl": "fieldset",
@@ -126,9 +126,7 @@ var Index = &ctx.Context{Name: "chat", Help: "会议中心",
 				user := map[string]interface{}{}
 				for _, v := range arg[3:] {
 					u := m.Cmdx("ssh._route", m.Conf("runtime", "work.route"), "_check", "work", v)
-					user[v] = map[string]interface{}{
+					user[v] = map[string]interface{}{"user": u}
-						"user": u,
-					}
 				}
 
 				m.Conf("flow", h, map[string]interface{}{

usr/librarys/chat.css

@@ -1,121 +1,31 @@
-fieldset div.output {
-    padding:6px;
-}
-fieldset.Ocean {
-    background-color:lightgray;
-    padding:10px;
-    display:none;
-    position:absolute;
-}
-fieldset.Ocean div.action {
-    margin:10px;
-}
-fieldset.Ocean div.output {
-    float:left;
-    padding:0;
-}
-fieldset.Ocean div.output table td {
-    min-width:100px;
-}
-fieldset.Ocean div.output table th {
-    min-width:130px;
-}
-fieldset.Ocean div.create {
-    padding:10px;
-    border:solid 2px green;
-    margin-left:10px;
-    float:left;
-}
 fieldset.Ocean div.create pre:hover {
     background-color:red;
 }
-fieldset.River {
-    padding:0;
-    min-width:160px;
-    min-height:200px;
-    overflow:auto;
-    float:left;
-}
-fieldset.River div.output div.item {
 
-}
+fieldset.River {
-fieldset.River div.output div.item:hover {
+    float:left;
-    background-color:red;
-}
-fieldset.River div.output div.item.select {
-    background-color:red;
-}
-fieldset.Target {
-    padding:0;
-    min-width:160px;
-    min-height:80px;
-    overflow:auto;
-}
-fieldset.Target div.output {
-    padding:10px;
 }
 fieldset.Target div.output div.item:hover {
     background-color:lightgreen;
 }
-fieldset.Source {
-    padding:0;
-    min-width:160px;
-    min-height:30px;
-}
 fieldset.Source div.output {
     padding:0;
 }
-fieldset.Action {
-    padding:0;
-    min-width:160px;
-    min-height:30px;
-    overflow:auto;
-}
 fieldset.Action div.output div.item:hover {
     background-color:lightblue;
 }
 fieldset.Storm {
-    padding:0;
-    min-width:160px;
-    min-height:200px;
     float:right;
 }
-fieldset.Storm div.output div.item:hover {
+
-    background-color:red;
-}
-fieldset.Storm div.output div.item.select {
-    background-color:red;
-}
-fieldset.Steam {
-    background-color:lightgray;
-    padding:10px;
-    display:none;
-    position:absolute;
-}
-fieldset.Steam div.action {
-    margin:10px;
-}
-fieldset.Steam div.output {
-    float:left;
-    padding:0;
-}
-fieldset.Steam div.output table td {
-    min-width:100px;
-}
-fieldset.Steam div.output table th {
-    min-width:130px;
-}
 fieldset.Steam table.device {
     padding:10px;
-    border:solid 2px green;
+    border:solid 1px green;
     margin-left:10px;
     float:left;
 }
 fieldset.Steam div.create {
-    padding:10px;
+    clear:both;
-    border:solid 2px green;
-    margin-left:10px;
-    float:left;
 }
 fieldset.Steam div.create pre:hover {
     background-color:red;

usr/librarys/chat.js

@@ -1,27 +1,32 @@
 var page = Page({
-    conf: {border: 4, banner: 105, layout: {river:160, source:60, action:60, storm:160}},
+    conf: {border: 4, layout: {header:30, river:180, action:180, source:60, storm:180, footer:30}},
     onlayout: function(event, sizes) {
-        var width = document.body.offsetWidth
+        var height = document.body.clientHeight-page.conf.border
-        var height = document.body.offsetHeight-page.conf.banner
+        var width = document.body.clientWidth-page.conf.border
-        sizes = sizes || {}
+        page.conf.height = height
+        page.conf.width = width
 
-        sizes.river == undefined && (sizes.river = page.river.offsetWidth-page.conf.border)
+        sizes = sizes || {}
-        sizes.storm == undefined && (sizes.storm = page.storm.offsetWidth-page.conf.border)
+        sizes.header == undefined && (sizes.header = page.header.clientHeight)
-        sizes.width = width - sizes.river - sizes.storm-5*page.conf.border
+        sizes.footer == undefined && (sizes.footer = page.footer.clientHeight)
+        page.header.Size(width, sizes.header)
+        page.footer.Size(width, sizes.footer)
+
+        sizes.river == undefined && (sizes.river = page.river.clientWidth)
+        sizes.storm == undefined && (sizes.storm = page.storm.clientWidth)
+        height -= page.header.offsetHeight+page.footer.offsetHeight
         page.river.Size(sizes.river, height)
         page.storm.Size(sizes.storm, height)
 
-        sizes.action == undefined && (sizes.action = page.action.offsetHeight-page.conf.border)
+        sizes.action == undefined && (sizes.action = page.action.clientHeight)
-        sizes.source == undefined && (sizes.source = page.source.offsetHeight-page.conf.border)
+        sizes.source == undefined && (sizes.source = page.source.clientHeight)
-        sizes.target = height - sizes.action - sizes.source - 2*page.conf.border
+        sizes.action == -1 && (sizes.action = height, sizes.source = 0)
-        if (sizes.action == -1) {
+        width -= page.river.offsetWidth+page.storm.offsetWidth
-            sizes.action = height
+        page.action.Size(width, sizes.action)
-            sizes.target = 0
+        page.source.Size(width, sizes.source)
-            sizes.source = 0
+
-        }
+        height -= page.source.offsetHeight+page.action.offsetHeight
-        page.target.Size(sizes.width, sizes.target)
+        page.target.Size(width, height)
-        page.source.Size(sizes.width, sizes.source)
-        page.action.Size(sizes.width, sizes.action)
         kit.History.add("lay", sizes)
     },
     oncontrol: function(event, target, action) {
@@ -46,21 +51,18 @@ var page = Page({
         var table = kit.AppendChild(output, "table")
         var ui = kit.AppendChild(pane, [{view: ["create ocean"], list: [
             {input: ["name", function(event) {
-                if (event.ctrlKey) {
+                page.oninput(event, function(event) {
                     switch (event.key) {
                         case "a":
                             pane.Action["全选"](event)
-                            break
+                            return
                         case "c":
                             pane.Action["清空"](event)
-                            break
+                            return
                     }
-                    return
+                })
-                }
+                event.key == "Enter" && this.nextSibling.click()
 
-                if (event.key == "Enter") {
-                    ui.name.nextSibling.click()
-                }
             }]}, {button: ["create", function(event) {
                 if (!ui.name.value) {
                     ui.name.focus()
@@ -98,17 +100,14 @@ var page = Page({
                 pane.Show()
             },
             "全选": function(event) {
-                ui.list.innerHTML = ""
+                ui.list.innerHTML = "", table.querySelectorAll("tr").forEach(function(item) {
-                table.querySelectorAll("tr").forEach(function(item) {
                     item.firstChild.click()
                 })
             },
             "清空": function(event) {
-                ui.list.innerHTML = ""
+                ui.list.innerHTML = "", table.querySelectorAll("tr").forEach(function(item) {
-                table.querySelectorAll("tr").forEach(function(item) {
                     item.style.display = ""
                 })
-
             },
         }
         return {"button": ["取消", "全选", "清空"], "action": pane.Action}
@@ -133,24 +132,19 @@ var page = Page({
             },
         }
 
-        function fun(line, index, event, args, cbs) {
-            var data = JSON.parse(line.text)
-            var cmds = ["wave", river, data.node, data.group, data.index].concat(args)
-            form.Run(cmds, cbs)
-        }
-
         pane.Show = function() {
             output.Update(["flow", river], "text", ["text"], "index", false, fun)
         }
 
-        pane.postion = page.Sync()
+        function fun(line, index, event, args, cbs) {
-        pane.onscroll = function(event) {
+            var data = JSON.parse(line.text)
-            pane.postion.set({top: event.target.scrollTop, height: event.target.clientHeight, bottom: event.target.scrollHeight})
+            form.Run(["wave", river, data.node, data.group, data.index].concat(args), cbs)
         }
 
         pane.Send = function(type, text, cb) {
             form.Run(["flow", river, type, text], function(msg) {
-                output.Append(type, {text:text, index: msg.result[0]}, ["text"], "index", fun), typeof cb == "function" && cb()
+                output.Append(type, {text:text, index: msg.result[0]}, ["text"], "index", fun)
+                typeof cb == "function" && cb()
             })
         }
         return [{"text": ["target"]}]
@@ -164,7 +158,7 @@ var page = Page({
         }}}])
 
         pane.Size = function(width, height) {
-            pane.style.display = (width==0 || height==0)? "none": "block"
+            pane.style.display = (width<=0 || height<=0)? "none": "block"
             pane.style.width = width+"px"
             pane.style.height = height+"px"
             ui.first.style.width = (width-7)+"px"
@@ -177,31 +171,27 @@ var page = Page({
         return
     },
     initAction: function(page, pane, form, output) {
-        var river = "", input = "", water = 0
+        var river = "", water = 0, input = "", share = ""
         pane.Listen = {
             river: function(value, old) {
                 river = value
             },
+            storm: function(value, old) {
+                water = value, pane.Show()
+            },
             source: function(value, old) {
                 input = value, kit.Log(value)
             },
-            storm: function(value, old) {
+            target: function(value, old) {
-                water = value, pane.Show()
+                share = value, kit.Log(value)
             },
         }
         pane.Show = function() {
             output.Update([river, water], "plugin", ["node", "name"], "index", false, function(line, index, event, args, cbs) {
-                var cmds = [river, water, index].concat(args)
-
-                // event.shiftKey? page.target.Send("field", JSON.stringify({
-                //     componet_group: "index", componet_name: "river",
-                //     cmds: ["wave", river, line.node, line.group, line.index], input: [{type: "input", data: {name: "hi", value: line.cmd}}]
-                //
                 event.shiftKey? page.target.Send("field", JSON.stringify({
                     name: line.name, view: line.view, init: line.init,
-                    node: line.node, group: line.group, index: line.index,
+                    node: line.node, group: line.group, index: line.index, inputs: line.inputs,
-                    inputs: line.inputs,
+                })): form.Run([river, water, index].concat(args), function(msg) {
-                })): form.Run(cmds, function(msg) {
                     event.ctrlKey && (msg.append && msg.append[0]?
                         page.target.Send("table", JSON.stringify(ctx.Table(msg))):
                         page.target.Send("text", msg.result.join("")))
@@ -209,28 +199,34 @@ var page = Page({
                 })
             })
         }
+
         pane.Action = {
             "恢复": function(event) {
                 page.onlayout(event, page.conf.layout)
             },
+            "缩小": function(event) {
+                page.onlayout(event, {action:60, source:60})
+            },
             "放大": function(event) {
-                page.onlayout(event, {action:300})
+                page.onlayout(event, {action:300, source:60})
+            },
+            "最高": function(event) {
+                page.onlayout(event, {action: -1})
             },
             "最宽": function(event) {
                 page.onlayout(event, {river:0, storm:0})
             },
-            "最大": function(event) {
+            "全屏": function(event) {
-                page.onlayout(event, {river:0, action: -1, storm:0})
+                page.onlayout(event, {header:0, footer:0, river:0, action: -1, storm:0})
             },
         }
-		return {"button": ["恢复", "放大", "最宽", "最大"], "action": pane.Action}
+        return {"button": ["恢复", "缩小", "放大", "最高", "最宽", "全屏"], "action": pane.Action}
     },
     initStorm: function(page, pane, form, output) {
         var river = ""
         pane.Listen = {
             river: function(value, old) {
-                river = value, pane.Show()
+                pane.which.set(""), river = value, pane.Show()
-                pane.which.set("")
             },
         }
         pane.Show = function() {
@@ -241,7 +237,7 @@ var page = Page({
                 page.steam.Show()
             },
         }
-		return {"button": ["创建"], "action": pane.Action}
+        return {"button": ["创建"], "action": pane.Action}
     },
     initSteam: function(page, pane, form, output) {
         var river = ""
@@ -255,9 +251,17 @@ var page = Page({
         var device = kit.AppendChild(pane, [{"view": ["device", "table"]}]).last
         var ui = kit.AppendChild(pane, [{view: ["create steam"], list: [
             {input: ["name", function(event) {
-                if (event.key == "Enter") {
+                page.oninput(event, function(event) {
-                    ui.name.nextSibling.click()
+                    switch (event.key) {
-                }
+                        case "a":
+                            pane.Action["全选"](event)
+                            return
+                        case "c":
+                            pane.Action["清空"](event)
+                            return
+                    }
+                })
+                event.key == "Enter" && this.nextSibling.click()
             }]}, {button: ["create", function(event) {
                 if (!ui.name.value) {
                     ui.name.focus()
@@ -265,7 +269,6 @@ var page = Page({
                 }
 
                 var cmd = [river, "spawn", ui.name.value]
-
                 ui.list.querySelectorAll("tr").forEach(function(item) {
                     cmd.push(item.dataset.pod)
                     cmd.push(item.dataset.group)
@@ -279,6 +282,7 @@ var page = Page({
                 }
 
                 form.Run(cmd, function(msg) {
+                    page.action.Show()
                     page.storm.Show()
                     pane.Show()
                 })
@@ -301,7 +305,20 @@ var page = Page({
             }))
         }
 
-        return [{"text": ["steam"]}]
+        pane.Action = {
+            "取消": function(event) {
+                pane.Show()
+            },
+            "全选": function(event) {
+                ui.list.innerHTML = "", device.querySelectorAll("tr").forEach(function(item) {
+                    item.firstChild.click()
+                })
+            },
+            "清空": function(event) {
+                ui.list.innerHTML = ""
+            },
+        }
+        return {"button": ["取消", "全选", "清空"], "action": pane.Action}
     },
     init: function(page) {
         page.initField(page, function(init, pane, form) {
@@ -311,27 +328,18 @@ var page = Page({
             output.Clear = function() {
                 output.innerHTML = "", list = [], last = -1
             }
-            output.Append = function(type, line, key, which, cb) {
-                var index = list.length
-                type = line.type || type
-                var ui = page.View(output, type, line, key, function(event, cmds, cbs) {
-                    output.Select(index), pane.which.set(line[which])
-                    typeof cb == "function" && cb(line, index, event, cmds, cbs)
-                })
-                if (type == "table") {
-                    kit.OrderTable(ui.last)
-                }
-                // if (type == "field") {
-                //     kit.OrderForm(page, ui.last, ui.form, ui.table, ui.code)
-                // }
-                list.push(ui.last)
-                pane.scrollBy(0, pane.scrollHeight)
-                return ui
-            }
             output.Select = function(index) {
                 -1 < last && last < list.length && (list[last].className = "item")
                 last = index, list[index].className = "item select"
             }
+            output.Append = function(type, line, key, which, cb) {
+                var index = list.length, ui = page.View(output, line.type || type, line, key, function(event, cmds, cbs) {
+                    output.Select(index), pane.which.set(line[which])
+                    typeof cb == "function" && cb(line, index, event, cmds, cbs)
+                })
+                list.push(ui.last), pane.scrollBy(0, pane.scrollHeight)
+                return ui
+            }
             output.Update = function(cmds, type, key, which, first, cb) {
                 output.Clear(), form.Runs(cmds, function(line, index, msg) {
                     var ui = output.Append(type, line, key, which, cb)
@@ -356,7 +364,6 @@ var page = Page({
             }
             return conf
         })
-
         page.onlayout(null, page.conf.layout)
     },
 })

usr/librarys/example.css

@@ -1,8 +1,61 @@
-html, body {
+html, body, fieldset {
+    background-color:#d8d8d8;
+    padding:0px;
     height:100%;
     width:100%;
     margin:0px;
-    background-color:#d8d8d8;
+}
+fieldset {
+    min-width:160px;
+    overflow:auto;
+}
+legend {
+    margin-left:10px;
+}
+fieldset div.output {
+    padding:6px;
+}
+fieldset div.output div.item:hover {
+    background-color:red;
+}
+fieldset div.output div.item.select {
+    background-color:red;
+}
+fieldset.toast {
+    background-color:#ffffff00;
+    position:absolute;
+    display:none;
+}
+fieldset.toast div.output {
+    padding:0 10px;
+}
+fieldset.toast div.output pre {
+    word-break:break-word;
+    white-space:pre-wrap;
+    text-align:center;
+    margin:0px;
+}
+fieldset.dialog {
+    background-color:lightgray;
+    padding:10px;
+    display:none;
+    position:absolute;
+}
+fieldset.dialog div.output {
+    padding:10px;
+    float:left;
+}
+fieldset.dialog div.output table th {
+    min-width:130px;
+}
+fieldset.dialog div.output table td {
+    min-width:100px;
+}
+fieldset.dialog div.create {
+    padding:10px;
+    border:solid 1px red;
+    margin-left:10px;
+    float:left;
 }
 
 fieldset table {

usr/librarys/example.js

@@ -41,34 +41,19 @@ function Page(page) {
                     break
 
                 case "text":
-                    switch (key.length) {
+                    result = [{view: ["item", "div", key.length>1? line[key[0]]+"("+line[key[1]]+")": (key.length>0? line[key[0]]: "null")], click: cb}]
-                        case 0:
-                            result = [{view: ["item", "div", "null"], click: cb}]
-                            break
-                        case 1:
-                            result = [{view: ["item", "div", line[key[0]]], click: cb}]
-                            break
-                        default:
-                            result = [{view: ["item", "div", line[key[0]]+"("+line[key[1]]+")"], click: cb}]
-                    }
                     break
 
                 case "table":
-                    var data = JSON.parse(line.text)
+                    result = [{view: [""], list: [
-                    var list = []
+                        {view: ["", "table"], list: JSON.parse(line.text || "[]").map(function(item, index) {
-                    var line = []
+                            var line = []
-                    for (var k in data[0]) {
+                            for (var k in item) {
-                        line.push({view: ["", "th", k]})
+                                line.push({text: index == 0? [k, "th"]: [item[k], "td"]})
-                    }
+                            }
-                    list.push({view: ["", "tr"], list: line})
+                            return {type: "tr", list: line}
-                    for (var i = 0; i < data.length; i++) {
+                        })},
-                        var line = []
+                    ]}]
-                        for (var k in data[i]) {
-                            line.push({view: ["", "td", data[i][k]]})
-                        }
-                        list.push({view: ["", "tr"], list: line})
-                    }
-                    var result = [{view: [""], list: [{view: ["", "table"], list: list}]}]
                     break
 
                 case "field":
@@ -76,93 +61,102 @@ function Page(page) {
 
                 case "plugin":
                     var id = "plugin"+page.ID()
-                    var input = [{type: "input", style: {"display": "none"}}]
+                    result = [{view: [line.view, "fieldset"], data: {id: id}, list: [
-                    JSON.parse(line.inputs || "[]").forEach(function(item, index, inputs) {
-                        function run(event) {
-                            var args = []
-                            ui.option.querySelectorAll("input").forEach(function(item, index){
-                                if (index==0) {
-                                    return
-                                }
-                                if (item.type == "text") {
-                                    args.push(item.value)
-                                }
-                            })
-                            ui.option.Run(event, args, function(msg) {
-                                ui.option.ondaemon(msg)
-                            })
-                        }
-
-                        item.type == "button"? item.onclick = function(event) {
-                            var plugin = page[id];
-                            (plugin[item.click] || function() {
-                                run(event)
-                            })(item, index, inputs, event, ui.option)
-
-                        }: item.onkeyup = function(event) {
-                            event.key == "Enter" && (index == inputs.length-1? run(event): event.target.nextSibling.focus())
-                            if (event.ctrlKey) {
-                                switch (event.key) {
-                                    case "k":
-                                        kit.DelText(target, target.selectionStart)
-                                        break
-                                    case "u":
-                                        kit.DelText(target, 0, target.selectionEnd)
-                                        break
-                                    case "w":
-                                        var start = target.selectionStart-2
-                                        var end = target.selectionEnd-1
-                                        for (var i = start; i >= 0; i--) {
-                                            if (target.value[end] == " " && target.value[i] != " ") {
-                                                break
-                                            }
-                                            if (target.value[end] != " " && target.value[i] == " ") {
-                                                break
-                                            }
-                                        }
-                                        kit.DelText(target, i+1, end-i)
-                                        break
-
-                                    case "c":
-                                        ui.output.innerHTML = ""
-                                        break
-                                    case "r":
-                                        ui.output.innerHTML = ""
-                                    case "j":
-                                        run(event)
-                                        break
-                                    case "l":
-                                        page.action.scrollTo(0, ui.option.parentNode.offsetTop)
-                                        break
-                                    case "m":
-                                        event.stopPropagation()
-                                        var uis = page.View(parent, type, line, key, cb)
-                                        page.action.scrollTo(0, uis.option.parentNode.offsetTop)
-                                        ui.option.querySelectorAll("input")[1].focus()
-                                        break
-                                }
-                            }
-                        }
-                        input.push({type: "input", data: item})
-                    })
-
-                    var result = [{view: [line.view, "fieldset"], data: {id: id}, list: [
-                        {script: "Plugin("+id+","+line.init+")"},
                         {text: [line.name, "legend"]},
-                        {name: "option", view: ["option", "form"], data: {Run: cb}, list: input},
+                        {name: "option", view: ["option", "form"], data: {Run: cb}, list: [{type: "input", style: {"display": "none"}}]},
                         {name: "output", view: ["output", "div"]},
+                        {script: "Plugin("+id+","+line.inputs+","+line.init+")"},
                     ]}]
                     break
             }
 
             ui = kit.AppendChild(parent, result)
+            ui.last.Meta = line
             return ui
         },
         reload: function() {
             location.reload()
         },
-        showToast: function(text) {
+        oninput: function(event, local) {
+            var target = event.target
+            if (event.ctrlKey) {
+                if (typeof local == "function" && local(event)) {
+                    return
+                }
+                switch (event.key) {
+                    case "a":
+                    case "e":
+                    case "f":
+                    case "b":
+                    case "h":
+                    case "d":
+                        break
+                    case "k":
+                        kit.DelText(target, target.selectionStart)
+                        break
+                    case "u":
+                        kit.DelText(target, 0, target.selectionEnd)
+                        break
+                    case "w":
+                        var start = target.selectionStart-2
+                        var end = target.selectionEnd-1
+                        for (var i = start; i >= 0; i--) {
+                            if (target.value[end] == " " && target.value[i] != " ") {
+                                break
+                            }
+                            if (target.value[end] != " " && target.value[i] == " ") {
+                                break
+                            }
+                        }
+                        kit.DelText(target, i+1, end-i)
+                        break
+                    default:
+                        return false
 
+                }
+                return true
+            }
+            return false
+        },
+        ontoast: function(text, title, duration) {
+            var args = typeof text == "object"? text: {text: text, title: title, duration: duration}
+            var toast = kit.ModifyView("fieldset.toast", {
+                display: "block", dialog: [args.width||200, args.height||40], padding: 10,
+            })
+
+            var list = [{text: [args.text||""]}]
+            args.inputs && args.inputs.forEach(function(input) {
+                if (typeof input == "string") {
+                    list.push({inner: input, type: "label", style: {"margin-right": "5px"}})
+                    list.push({input: [input, page.oninput]})
+                } else {
+                    list.push({inner: input[0], type: "label", style: {"margin-right": "5px"}})
+                    var option = []
+                    for (var i = 1; i < input.length; i++) {
+                        option.push({type: "option", inner: input[i]})
+                    }
+                    list.push({name: input[0], type: "select", list: option})
+                }
+                list.push({type: "br"})
+            })
+            args.button && args.button.forEach(function(input) {
+                list.push({type: "button", inner: input, click: function(event) {
+                    var values = {}
+                    toast.querySelectorAll("input").forEach(function(input) {
+                        values[input.name] = input.value
+                    })
+                    toast.querySelectorAll("select").forEach(function(input) {
+                        values[input.name] = input.value
+                    })
+                    typeof args.cb == "function" && args.cb(input, values)
+                    toast.style.display = "none"
+                }})
+            })
+
+            kit.ModifyNode(toast.querySelector("legend"), args.title||"tips")
+            var ui = kit.AppendChild(kit.ModifyNode(toast.querySelector("div.output"), ""), list)
+            args.duration !=- 1 && setTimeout(function(){toast.style.display = "none"}, args.duration||3000)
+            page.toast = toast
         },
         onscroll: function(event, target, action) {
             switch (action) {
@@ -198,20 +192,18 @@ function Page(page) {
 
                 // pane init
                 pane.which = page.Sync(form.dataset.componet_name)
-                pane.ShowWindow = function(width, height) {
-                    kit.ModifyView(pane, {window: [width||80, height||40]})
-                }
                 pane.ShowDialog = function(width, height) {
                     if (pane.style.display != "block") {
-                        pane.style.display = "block"
+                        page.dialog && page.dialog != pane && page.dialog.style.display == "block" && page.dialog.Show()
-                        kit.ModifyView(pane, {dialog: [width||800, height||400]})
+                        pane.style.display = "block", page.dialog = pane
+                        kit.ModifyView(pane, {window: [width||80, height||200]})
                         return true
                     }
                     pane.style.display = "none"
                     return false
                 }
                 pane.Size = function(width, height) {
-                    pane.style.display = (width==0 || height==0)? "none": "block"
+                    pane.style.display = (width<=0 || height<=0)? "none": "block"
                     pane.style.width = width+"px"
                     pane.style.height = height+"px"
                 }
@@ -253,12 +245,56 @@ function Page(page) {
     }
     return page
 }
-function Plugin(field, plugin) {
+function Plugin(field, inputs, plugin) {
     var option = field.querySelector("form.option")
     var output = field.querySelector("div.output")
 
-    plugin.__proto__ = {
+    function run(event) {
-        field: field,
+        var args = []
+        option.querySelectorAll("input").forEach(function(item, index){
+            item.type == "text" && args.push(item.value)
+        })
+        option.Run(event, args.slice(1), function(msg) {
+            (option.ondaemon || function(msg) {
+                output.innerHTML = "", kit.AppendChild(output, [{type: "code", list: [{text: [msg.result.join(""), "pre"]}]}])
+            })(msg)
+        })
+    }
+
+    inputs && kit.AppendChild(option, inputs.map(function(item, index, inputs) {
+        item.type == "button"? item.onclick = function(event) {
+            (plugin[item.click] || run)(event)
+        }: item.onkeyup = function(event) {
+            page.oninput(event, function(event) {
+                switch (event.key) {
+                    case "c":
+                        output.innerHTML = ""
+                        break
+                    case "r":
+                        output.innerHTML = ""
+                    case "j":
+                        run(event)
+                        break
+                    case "l":
+                        page.action.scrollTo(0, option.parentNode.offsetTop)
+                        break
+                    case "m":
+                        page.View(field.parentNode, "plugin", field.Meta, [], option.Run)
+                        event.stopPropagation()
+                        break
+                    default:
+                        return false
+                }
+                return true
+            })
+            event.key == "Enter" && (index == inputs.length-1? run(event): event.target.nextSibling.focus())
+        }
+        return {type: "input", data: item}
+    }))
+
+    plugin = plugin || {}, plugin.__proto__ = {
+        show: function() {},
+        init: function() {},
     }
     plugin.init(page, page.action, field, option, output)
     page[field.id] = plugin

usr/librarys/toolkit.js

@@ -25,6 +25,79 @@ kit = toolkit = {
         return args
     },
 
+    ModifyNode: function(which, html) {
+        var node = typeof which == "string"? document.querySelector(which): which
+        switch (typeof html) {
+            case "string":
+                node.innerHTML = html
+                break
+            case "object":
+                for (var k in html) {
+                    if (typeof html[k] == "object") {
+                        for (var d in html[k]) {
+                            node[k][d] = html[k][d]
+                        }
+                        continue
+                    }
+                    node[k] = html[k]
+                }
+                break
+        }
+        return node
+    },
+    ModifyView: function(which, args) {
+        var height = document.body.clientHeight-4
+        var width = document.body.clientWidth-4
+        for (var k in args) {
+            switch (k) {
+                case "dialog":
+                    var w = h = args[k]
+                    if (typeof(args[k]) == "object") {
+                        w = args[k][0]
+                        h = args[k][1]
+                    }
+                    if (w > width) {
+                        w = width
+                    }
+                    if (h > height) {
+                        h = height
+                    }
+
+                    args["top"] = (height-h)/2
+                    args["left"] = (width-w)/2
+                    args["width"] = w
+                    args["height"] = h
+                    args[k] = undefined
+                    break
+                case "window":
+                    var w = h = args[k]
+                    if (typeof(args[k]) == "object") {
+                        w = args[k][0]
+                        h = args[k][1]
+                    }
+
+                    args["top"] = h/2
+                    args["left"] = w/2
+                    args["width"] = width-w-20
+                    args["height"] = height-h-20
+                    args[k] = undefined
+                    break
+            }
+        }
+
+        for (var k in args) {
+            switch (k) {
+                case "top":
+                case "left":
+                case "width":
+                case "height":
+                case "padding":
+                    args[k] = args[k]+"px"
+                    break
+            }
+        }
+        return kit.ModifyNode(which, {style: args})
+    },
     ScrollPage: function(event, conf) {
         switch (event.key) {
             case "h":
@@ -70,75 +143,6 @@ kit = toolkit = {
         }
         return true
     },
-    ModifyView: function(target, args) {
-        var width = document.body.offsetWidth-10
-        var height = document.body.offsetHeight-10
-        for (var k in args) {
-            switch (k) {
-                case "dialog":
-                    var w = h = args[k]
-                    if (typeof(args[k]) == "object") {
-                        w = args[k][0]
-                        h = args[k][1]
-                    }
-                    if (w > width) {
-                        w = width
-                    }
-                    if (h > height) {
-                        h = height
-                    }
-
-                    args["top"] = (height-h)/2
-                    args["left"] = (width-w)/2
-                    args["width"] = w
-                    args["height"] = h
-                    break
-                case "window":
-                    var w = h = args[k]
-                    if (typeof(args[k]) == "object") {
-                        w = args[k][0]
-                        h = args[k][1]
-                    }
-
-                    args["top"] = h/2
-                    args["left"] = w/2
-                    args["width"] = width-w
-                    args["height"] = height-h
-                    break
-            }
-        }
-
-        for (var k in args) {
-            switch (k) {
-                case "top":
-                case "left":
-                case "width":
-                case "height":
-                    target.style[k] = args[k]+"px"
-                    break
-            }
-        }
-    },
-    ModifyNode: function(which, html) {
-        var node = typeof which == "string"? document.querySelector(which): which
-        switch (typeof html) {
-            case "string":
-                node.innerHTML = html
-                break
-            case "object":
-                for (var k in html) {
-                    if (typeof html[k] == "object") {
-                        for (var d in html[k]) {
-                            node[k][d] = html[k][d]
-                        }
-                        continue
-                    }
-                    node[k] = html[k]
-                }
-                break
-        }
-        return node
-    },
     CreateNode: function(element, html) {
         return this.ModifyNode(document.createElement(element), html)
     },
@@ -170,6 +174,9 @@ kit = toolkit = {
             child.data = child.data || {}
             child.type = child.type || "div"
 
+            if (child.name) {
+                child.data["name"] = child.name
+            }
             if (child.value) {
                 child.data["value"] = child.value
             }

usr/template/common.tmpl

@@ -19,6 +19,10 @@
             bench_data: {{option . "bench_data"}},
         }
     </script>
+    <fieldset class="toast"><legend></legend>
+        <form class="option" data-componet_name="toast"></form>
+        <div class="output"></div>
+    </fieldset>
 {{end}}
 {{define "banner"}}
     <fieldset class="{{options . "componet_view"}}" data-init="{{options . "componet_init"}}">