add page.Listen

etc/common.shy

@@ -1,5 +1,6 @@
 ~aaa
-    role root user shy
+    role root user shy shaoying
+
 ~mdb
     note model favor spirit spirit relate relate
     note model money expend expend amount amount

src/examples/chat/chat.go

@@ -72,6 +72,10 @@ var Index = &ctx.Context{Name: "chat", Help: "会议中心",
 					"componet_view": "Source", "componet_init": "initSource",
 					"componet_ctx": "web.chat", "componet_cmd": "flow", "arguments": []interface{}{"source"},
 				},
+				map[string]interface{}{"componet_name": "action", "componet_tmpl": "fieldset",
+					"componet_view": "Action", "componet_init": "initAction",
+					"componet_ctx": "web.chat", "componet_cmd": "flow", "arguments": []interface{}{"action"},
+				},
 
 				map[string]interface{}{"componet_name": "footer", "componet_tmpl": "fieldset",
 					"componet_view": "Footer", "componet_init": "initFooter",
@@ -136,18 +140,39 @@ var Index = &ctx.Context{Name: "chat", Help: "会议中心",
 				switch arg[1] {
 				case "create":
 					h := kit.Hashs("uniq")
+					user := map[string]interface{}{}
+					for _, v := range arg[3:] {
+						u := m.Cmdx("ssh.remote", m.Conf("runtime", "work.route"), "check", "work", v)
+						user[v] = map[string]interface{}{
+							"user": u,
+						}
+					}
 
 					m.Conf("flow", h, map[string]interface{}{
 						"conf": map[string]interface{}{
-							"create_time": m.Time(),
 							"create_user": m.Option("username"),
+							"create_time": m.Time(),
 							"name":        kit.Select("what", arg, 2),
 						},
-						"user": map[string]interface{}{},
+						"user": user,
 						"text": map[string]interface{}{},
+						"tool": map[string]interface{}{},
 					})
 					m.Echo(h)
 
+				case "user":
+					if len(arg) == 3 {
+						m.Confm("flow", []string{arg[2], "user"}, func(key string, value map[string]interface{}) {
+							m.Add("append", "key", key)
+							m.Add("append", "user.route", value["user"])
+						})
+						m.Table()
+						return
+					}
+					switch arg[3] {
+					case "add":
+					}
+
 				case "wave":
 					if len(arg) == 3 {
 						m.Confm("flow", []string{arg[2], "text.list"}, func(index int, value map[string]interface{}) {
@@ -160,6 +185,7 @@ var Index = &ctx.Context{Name: "chat", Help: "会议中心",
 					}
 
 					m.Conf("flow", []string{arg[2], "text.list.-2"}, map[string]interface{}{
+						"create_user": m.Option("username"),
 						"create_time": m.Time(),
 						"type":        arg[3],
 						"text":        arg[4],
@@ -168,6 +194,63 @@ var Index = &ctx.Context{Name: "chat", Help: "会议中心",
 					count := m.Confi("flow", []string{arg[2], "text.count"}) + 1
 					m.Confi("flow", []string{arg[2], "text.count"}, count)
 					m.Echo("%d", count)
+
+					m.Option("username", m.Conf("runtime", "user.name"))
+					m.Confm("flow", []string{arg[2], "user"}, func(key string, value map[string]interface{}) {
+						m.Cmd("ssh.remote", value["user"], "context", "chat", "flow", "river", "wave", arg[2], arg[3], arg[4])
+					})
+
+				case "tool":
+					if len(arg) == 3 {
+						m.Confm("flow", []string{arg[2], "tool"}, func(key string, value map[string]interface{}) {
+							m.Add("append", "key", key)
+							m.Add("append", "create_user", value["create_user"])
+							m.Add("append", "create_time", value["create_time"])
+							if list, ok := kit.Chain(value, "list").([]interface{}); ok {
+								m.Add("append", "count", len(list))
+							} else {
+								m.Add("append", "count", 0)
+							}
+						})
+						m.Table()
+						return
+					}
+
+					if m.Confs("flow", []string{arg[2], "tool", arg[3]}) {
+						if len(arg) == 4 {
+							m.Confm("flow", []string{arg[2], "tool", arg[3], "list"}, func(index int, value map[string]interface{}) {
+								m.Add("append", "cmd", value["cmd"])
+							})
+							m.Table()
+						} else {
+							switch arg[4] {
+							case "add":
+								for _, v := range arg[5:] {
+									m.Conf("flow", []interface{}{arg[2], "tool", arg[3], "list", -2}, map[string]interface{}{
+										"cmd": v,
+									})
+								}
+
+							default:
+								if cmd := m.Confm("flow", []string{arg[2], "tool", arg[3], "list", arg[4]}); cmd != nil {
+									m.Cmdy("ctx.context", "cli", cmd["cmd"])
+								}
+							}
+						}
+						return
+					}
+
+					list := []interface{}{}
+					for _, v := range arg[4:] {
+						list = append(list, map[string]interface{}{
+							"cmd": v,
+						})
+					}
+					m.Conf("flow", []string{arg[2], "tool", arg[3]}, map[string]interface{}{
+						"create_user": m.Option("username"),
+						"create_time": m.Time(),
+						"list":        list,
+					})
 				}
 			case "storm":
 				switch arg[1] {

usr/librarys/chat.css

@@ -1,17 +1,17 @@
-
+fieldset div.output {
+    padding:6px;
+}
 fieldset.Ocean {
-    position:absolute;
-    width:100px;
-    height:100px;
     background-color:red;
-    display:none;
     padding:0;
+    display:none;
+    position:absolute;
 }
 fieldset.River {
-    overflow:auto;
     padding:0;
     min-width:160px;
     min-height:200px;
+    overflow:auto;
     float:left;
 }
 fieldset.River div.output div.item {
@@ -19,7 +19,9 @@ fieldset.River div.output div.item {
 }
 fieldset.River div.output div.item:hover {
     background-color:red;
-
+}
+fieldset.River div.output div.item.select {
+    background-color:red;
 }
 fieldset.Target {
     padding:0;
@@ -27,18 +29,44 @@ fieldset.Target {
     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.Steam {
+fieldset.Storm div.output div.item:hover {
-    display:none;
+    background-color:red;
-    padding:0;
+}
+fieldset.Storm div.output div.item.select {
+    background-color:red;
+}
+fieldset.Steam {
+    background-color:red;
+    padding:0;
+    display:none;
+    position:absolute;
 }

usr/librarys/chat.js

@@ -1,4 +1,24 @@
 var page = Page({
+    conf: {border: 4, banner: 105},
+    size: function(event, sizes) {
+        sizes = sizes || {}
+        var width = document.body.offsetWidth
+        var height = document.body.offsetHeight-page.conf.banner
+
+        sizes.river == undefined && (sizes.river = page.river.offsetWidth-page.conf.border)
+        sizes.storm == undefined && (sizes.storm = page.storm.offsetWidth-page.conf.border)
+        sizes.width = width - sizes.river - sizes.storm-5*page.conf.border
+        page.river.Size(sizes.river, height)
+        page.storm.Size(sizes.storm, height)
+
+        sizes.action == undefined && (sizes.action = page.action.offsetHeight-page.conf.border)
+        sizes.source == undefined && (sizes.source = page.source.offsetHeight-page.conf.border)
+        sizes.target = height - sizes.action - sizes.source - 2*page.conf.border
+        page.target.Size(sizes.width, sizes.target)
+        page.source.Size(sizes.width, sizes.source)
+        page.action.Size(sizes.width, sizes.action)
+    },
+
     initOcean: function(page, pane, form, output) {
         var table = kit.AppendChild(output, "table")
         pane.Show = function() {
@@ -12,45 +32,47 @@ var page = Page({
     },
     initRiver: function(page, pane, form, output) {
         pane.Show = function() {
-            output.innerHTML = "", form.Runs(["river"], function(line, index, msg) {
+            output.Update(["river"], "text", ["name", "count"], "key", true)
-                index == 0 && page.target.Show(line.key)
-                kit.AppendChild(output, [{view: ["item", "div", line.name+"("+line.count+")"], click: function(event) {
-                    page.target.Show(line.key)
-                }}])
-            })
         }
         pane.Show()
-		return {"button": ["添加", "查找"], "action": function(value) {
+        pane.Action = {
-            switch (value) {
+            "添加": function(event) {
-                case "添加":
                 var name = prompt("name")
                 name && form.Run(["river", "create", name], pane.Show)
-                    break
+            },
-                case "查找":
+            "查找": function(event) {
                 page.ocean.Show()
-                    break
+            },
         }
-		}}
+		return {"button": ["添加", "查找"], "action": pane.Action}
     },
     initTarget: function(page, pane, form, output) {
         var river = ""
-        pane.Show = function(which) {
+        pane.Listen = {
-            which && river != which && (river = which, output.innerHTML = "", form.Runs(["river", "wave", river], function(line, index, msg) {
+            river: function(value, old) {
-                kit.AppendChild(output, [{view: ["item", "div", line.text], click: function(event) {}}])
+                river = value, pane.Show()
-                pane.scrollBy(0,100)
+            },
-            }))
         }
+
+        pane.Show = function() {
+            output.Update(["river", "wave", river], "text", ["text"], "index")
+        }
+
+        pane.postion = page.Sync()
+        pane.onscroll = function(event) {
+            pane.postion.set({top: event.target.scrollTop, height: event.target.clientHeight, bottom: event.target.scrollHeight})
+        }
+
         pane.Send = function(type, text, cb) {
             form.Run(["river", "wave", river, type, text], function(msg) {
-                kit.AppendChild(output, [{"text" :[text, "div"]}])
+                output.Append(type, {text:text, index: msg.result[0]}, ["text"], "index"), typeof cb == "function" && cb()
-                pane.scrollBy(0,100)
-                typeof cb == "function" && cb(msg)
             })
         }
         return [{"text": ["target"]}]
     },
     initSource: function(page, pane, form, output) {
-        var ui = kit.AppendChild(pane, [{"view": ["input", "textarea"], "name": "input", "data": {"onkeyup": function(event){
+        var ui = kit.AppendChild(pane, [{"view": ["input", "textarea"], "data": {"onkeyup": function(event){
+            kit.isSpace(event.key) && pane.which.set(event.target.value)
             event.key == "Enter" && !event.shiftKey && page.target.Send("text", event.target.value, pane.Clear)
         }, "onkeydown": function(event) {
             event.key == "Enter" && !event.shiftKey && event.preventDefault()
@@ -60,50 +82,110 @@ var page = Page({
             pane.style.display = width==0? "none": "block"
             pane.style.width = width+"px"
             pane.style.height = height+"px"
-            ui.input.style.width = (width-7)+"px"
+            ui.first.style.width = (width-7)+"px"
-            ui.input.style.height = (height-7)+"px"
+            ui.first.style.height = (height-7)+"px"
         }
 
-        pane.Clear = function() {
+        pane.Clear = function(value) {
-            ui.input = ""
+            ui.first.value = value || ""
         }
         return
     },
+    initAction: function(page, pane, form, output) {
+        var river = "", input = "", water = 0
+        pane.Listen = {
+            river: function(value, old) {
+                river = value
+            },
+            source: function(value, old) {
+                input = value, kit.Log(value)
+            },
+            storm: function(value, old) {
+                water = value, pane.Show()
+            },
+        }
+        pane.Show = function() {
+            output.Update(["river", "tool", river, water], "text", ["cmd"], "cmd", false, function(line, index) {
+                form.Run(["river", "tool", river, water, index], function(msg) {
+                    msg.append && msg.append[0]?
+                        page.target.Send("table", JSON.stringify(ctx.Table(msg))):
+                        page.target.Send("text", msg.result.join(""))
+                })
+            })
+        }
+        pane.Action = {
+            "添加": function(event) {
+                var name = prompt("name")
+                name && form.Run(["river", "tool", river, water, "add", name], pane.Show)
+            },
+            "查找": function(event) {
+                page.ocean.Show()
+            },
+        }
+		return {"button": ["添加", "查找"], "action": pane.Action}
+    },
     initStorm: function(page, pane, form, output) {
-        return [{"text": ["storm"]}]
+        var river = ""
+        pane.Listen = {
+            river: function(value, old) {
+                river = value, pane.Show()
+            },
+        }
+        pane.Show = function() {
+            output.Update(["river", "tool", river], "text", ["key", "count"], "key", true)
+        }
+        pane.Action = {
+            "添加": function(event) {
+                var name = prompt("name")
+                name && form.Run(["river", "tool", river, name, "pwd"], pane.Show)
+            },
+            "查找": function(event) {
+                page.steam.Show()
+            },
+        }
+		return {"button": ["添加", "查找"], "action": pane.Action}
     },
     initSteam: function(page, pane, form, output) {
+        pane.Show = function() {
+            pane.ShowDialog() && (table.innerHTML = "", form.Run(["ocean"], function(msg) {
+                kit.AppendTable(table, ctx.Table(msg), ["key", "user.route"])
+            }))
+        }
         return [{"text": ["steam"]}]
     },
-
+    init: function(page) {
-    range: function(sizes) {
+        page.initField(page, function(init, pane, form) {
-        sizes = sizes || {}
-        var width = document.body.offsetWidth
-        var height = document.body.offsetHeight-80
-
-        sizes.left == undefined && (sizes.left = page.river.offsetWidth-page.conf.border)
-        sizes.right == undefined && (sizes.right = page.storm.offsetWidth-page.conf.border)
-        sizes.middle = width - sizes.left - sizes.right-5*page.conf.border
-        page.river.Size(sizes.left, height)
-        page.storm.Size(sizes.right, height)
-
-        if (sizes.top != undefined) {
-            sizes.bottom = height-sizes.top-page.conf.border
-        } else if (sizes.bottom != undefined) {
-            sizes.top = height-sizes.bottom-page.conf.border
-        } else {
-            sizes.bottom = page.source.offsetHeight-page.conf.border
-            sizes.top = height-sizes.bottom-page.conf.border
-        }
-        kit.Log(sizes)
-        page.target.Size(sizes.middle, sizes.top)
-        page.source.Size(sizes.middle, sizes.bottom)
-    },
-
-    init: function(exp) {
-        var page = this
-        page.eachField(page, function(init, pane, form) {
             var output = pane.querySelector("div.output")
+
+            var list = [], last = -1
+            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 = kit.AppendChild(output, page.View(type, line, key, function(event) {
+                    output.Select(index), pane.which.set(line[which])
+                    typeof cb == "function" && cb(line, index)
+                }))
+                if (type == "table") {
+                    kit.OrderTable(ui.last)
+                }
+                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.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)
+                    first && index == 0 && ui.first.click()
+                })
+            }
+
             if (typeof init == "function") {
                 var conf = init(page, pane, form, output)
                 if (conf && conf["button"]) {
@@ -111,16 +193,17 @@ var page = Page({
                     conf.button.forEach(function(value, index) {
                         buttons.push({"button": [value, function(event) {
                             typeof conf["action"] == "function" && conf["action"](value, event)
+                            typeof conf["action"] == "object" && conf["action"][value](event)
                         }]})
                     })
-                    kit.InsertChild(pane, output, "div", buttons)
+                    kit.InsertChild(pane, output, "div", buttons).className = "action "+form.dataset.componet_name
                 } else if (conf) {
                     kit.AppendChild(output, conf)
                 }
             }
+            return conf
         })
-        window.onresize = this.range
+
-        this.range({left:160, bottom:60, right:160})
+        page.size(null, {river:160, source:60, action:60, storm:160})
     },
-    conf: {border: 4},
 })

usr/librarys/code.js

@@ -323,7 +323,7 @@ var page = Page({
     },
     runCmdList: function(page, option, target, value) {
         target.value = value
-        target.dataset.history_last = page.History.add("cmd", target.value)
+        target.dataset.history_last = kit.History.add("cmd", target.value)
         ctx.Runs(page, option)
     },
     getCmdList: function(input, step, cmd) {
@@ -356,9 +356,9 @@ var page = Page({
             {"code": ["", "result", "result "+alias]},
         ]}])
 
-        page.OrderForm(page, ui.field, ui.option, ui.append, ui.result)
+        kit.OrderForm(page, ui.field, ui.option, ui.append, ui.result)
-        page.OrderTable(ui.append)
+        kit.OrderTable(ui.append)
-        page.OrderCode(ui.result)
+        kit.OrderCode(ui.result)
         ui.cmd.focus()
         return ui
     },
@@ -572,9 +572,9 @@ var page = Page({
             var option = field.querySelector("form.option")
             var append = field.querySelector("table.append")
             var result = field.querySelector("code.result pre")
-            page.OrderForm(page, field, option, append, result)
+            kit.OrderForm(page, field, option, append, result)
-            append && page.OrderTable(append)
+            append && kit.OrderTable(append)
-            result && page.OrderCode(result)
+            result && kit.OrderCode(result)
 
             var init = page[field.dataset.init]
             if (typeof init == "function") {

usr/librarys/context.js

@@ -1,5 +1,4 @@
 ctx = context = {
-    __proto__: kit,
     Run: function(page, dataset, cmd, cb) {
         var option = {"cmds": cmd}
         for (var k in dataset) {
@@ -23,13 +22,6 @@ ctx = context = {
         }
         this.Run(page, data, [], cb || form.ondaemon)
     },
-    Sync: function(page, option, cmds, cb) {
-        this.Run(page, option.dataset, cmds, function(msg) {
-            ctx.Table(msg, function(line, index) {
-                cb(line, index)
-            })
-        })
-    },
     Table: function(msg, cb) {
         var ret = []
         if (!msg || !msg.append || !msg.append.length || !msg[msg.append[0]]) {
@@ -56,7 +48,6 @@ ctx = context = {
         }
         return ret
     },
-
     Share: function(objs) {
         var args = this.Search()
         for (var k in objs) {
@@ -70,6 +61,44 @@ ctx = context = {
         var arg = as.join("&");
         return location.origin+location.pathname+"?"+arg
     },
+
+    Current: function(key, value) {
+        context.GET("", {
+            "componet_group": "index",
+            "componet_name": "cmd",
+            "cmds": ["sess", "current", key, value],
+        })
+        return value
+    },
+    Cookie: function(key, value) {
+        if (key == undefined) {
+            cs = {}
+            cookies = document.cookie.split("; ")
+            for (var i = 0; i < cookies.length; i++) {
+                cookie = cookies[i].split("=")
+                cs[cookie[0]] = cookie[1]
+            }
+            return cs
+        }
+        if (typeof key == "object") {
+            for (var k in key) {
+                document.cookie = k+"="+key[k];
+            }
+            return this.Cookie()
+        }
+
+        if (value == undefined) {
+            var pattern = new RegExp(key+"=([^;]*);?");
+            var result = pattern.exec(document.cookie);
+            if (result && result.length > 0) {
+                return result[1];
+            }
+            return "";
+        }
+
+        document.cookie = key+"="+value+";path=/";
+        return this.Cookie(key);
+    },
     Search: function(key, value) {
         var args = {};
         var search = location.search.split("?");
@@ -105,43 +134,6 @@ ctx = context = {
         location.search = arg.join("&");
         return value
     },
-    Cookie: function(key, value) {
-        if (key == undefined) {
-            cs = {}
-            cookies = document.cookie.split("; ")
-            for (var i = 0; i < cookies.length; i++) {
-                cookie = cookies[i].split("=")
-                cs[cookie[0]] = cookie[1]
-            }
-            return cs
-        }
-        if (typeof key == "object") {
-            for (var k in key) {
-                document.cookie = k+"="+key[k];
-            }
-            return this.Cookie()
-        }
-
-        if (value == undefined) {
-            var pattern = new RegExp(key+"=([^;]*);?");
-            var result = pattern.exec(document.cookie);
-            if (result && result.length > 0) {
-                return result[1];
-            }
-            return "";
-        }
-
-        document.cookie = key+"="+value+";path=/";
-        return this.Cookie(key);
-    },
-    Current: function(key, value) {
-        context.GET("", {
-            "componet_group": "index",
-            "componet_name": "cmd",
-            "cmds": ["sess", "current", key, value],
-        })
-        return value
-    },
     GET: function(url, form, cb) {
         form = form || {}
 

usr/librarys/example.js

@@ -1,20 +1,83 @@
-exp = example = {
+function Page(page) {
-    __proto__: ctx,
+    page.__proto__ = {
-    _init: function(page) {
+        Sync: function(m) {
-        page.__proto__ = this
+            var meta = m
-
+            var data = ""
-        var body = document.body
+            var list = []
-        body.onkeydown = function(event) {
+            return {
-            page.onscroll && page.onscroll(event, body, "scroll")
+                change: function(cb) {
-        }
+                    list.push(cb)
-        return this
+                    return list.length-1
                 },
+                eq: function(value) {
+                    return data == value
+                },
+                neq: function(value) {
+                    return data != value
+                },
+                get: function() {
+                    return data
+                },
+                set: function(value) {
+                    if (value == data) {
+                        return value
+                    }
+                    old_value = data, data = value
+                    meta && kit.Log(meta, value, old_value)
+                    for (var i = 0; i < list.length; i++) {
+                        list[i](value, old_value)
+                    }
+                    return value
+                },
+            }
+        },
+        View: function(type, line, key, cb) {
+            switch (type) {
+                case "text":
+                    switch (key.length) {
+                        case 0:
+                            return [{view: ["", "div", "null"], click: cb}]
+                        case 1:
+                            return [{view: ["", "div", line[key[0]]], click: cb}]
+                        default:
+                            return [{view: ["", "div", line[key[0]]+"("+line[key[1]]+")"], click: cb}]
+                    }
+                    break
+                case "table":
+                    var data = JSON.parse(line.text)
+                    var list = []
+                    var line = []
+                    for (var k in data[0]) {
+                        line.push({view: ["", "th", k]})
+                    }
+                    list.push({view: ["", "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}]}]
+                    return result
+            }
+        },
+        reload: function() {
+            location.reload()
+        },
+        onscroll: function(event, target, action) {
+            switch (action) {
+                case "scroll":
+                    if (event.target == document.body) {
+                        kit.ScrollPage(event, page.conf)
+                    }
+                    break
+            }
+        },
+
         initHeader: function(page, field, option, output) {
             return [{"text": ["shycontext", "div", "title"]}]
         },
-    initField: function(page, field, option, output) {
-        return
-    },
         initBanner: function(page, field, option, output) {
             field.querySelectorAll("li").forEach(function(item) {
                 item.onclick = function(event) {
@@ -29,27 +92,24 @@ exp = example = {
         initFooter: function(page, field, option) {
             return [{"view": ["title", "div", "<a href='mailto:shylinux@163.com'>shylinux@163.com</>"]}]
         },
-
+        initField: function(page, cb) {
-    onscroll: function(event, target, action) {
-        var page = this
-        switch (action) {
-            case "scroll":
-                if (event.target == document.body) {
-                    kit.ScrollPage(event, page.conf)
-                }
-                break
-        }
-    },
-    onresize: function(event) {},
-    reload: function() {
-        location.reload()
-    },
-
-    eachField: function(page, cb) {
             document.querySelectorAll("body>fieldset").forEach(function(pane) {
+                var form = pane.querySelector("form.option")
+                page[form.dataset.componet_name] = pane
+
                 // 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) {
-                return kit.ShowDialog(this, width, height)
+                    if (pane.style.display != "block") {
+                        pane.style.display = "block"
+                        kit.ModifyView(pane, {dialog: [width||800, height||400]})
+                        return true
+                    }
+                    pane.style.display = "none"
+                    return false
                 }
                 pane.Size = function(width, height) {
                     pane.style.display = width==0? "none": "block"
@@ -57,9 +117,7 @@ exp = example = {
                     pane.style.height = height+"px"
                 }
 
-
                 // form init
-            var form = pane.querySelector("form.option")
                 form.Run = function(cmds, cb) {
                     ctx.Run(page, form.dataset, cmds, cb)
                 }
@@ -71,15 +129,22 @@ exp = example = {
                     })
                 }
 
-            page[form.dataset.componet_name] = pane
+                var conf = cb(page[pane.dataset.init], pane, form)
-            typeof cb == "function" && cb(page[pane.dataset.init], pane, form)
+
+                // pane listen
+                for (var k in pane.Listen) {
+                    page[k].which.change(pane.Listen[k])
+                }
             })
         },
-}
+    }
-
-function Page(page) {
     window.onload = function() {
-        page.init(exp._init(page))
+        page.init(page)
+
+        window.onresize = page.size
+        document.body.onkeydown = function(event) {
+            page.onscroll && page.onscroll(event, document.body, "scroll")
+        }
     }
     return page
 }

usr/librarys/toolkit.js

@@ -1,5 +1,8 @@
 kit = toolkit = {
     isMobile: navigator.userAgent.indexOf("Mobile") > -1,
+    isSpace: function(c) {
+        return c == " " || c == "Enter"
+    },
     History: {dir: [], pod: [], ctx: [], cmd: [], txt: [], key: [],
         add: function(type, data) {
             var list = this[type] || []
@@ -22,6 +25,100 @@ kit = toolkit = {
         return args
     },
 
+    ScrollPage: function(event, conf) {
+        switch (event.key) {
+            case "h":
+                if (event.ctrlKey) {
+                    window.scrollBy(-conf.scroll_x*10, 0)
+                } else {
+                    window.scrollBy(-conf.scroll_x, 0)
+                }
+                break
+            case "H":
+                window.scrollBy(-document.body.scrollWidth, 0)
+                break
+            case "l":
+                if (event.ctrlKey) {
+                    window.scrollBy(conf.scroll_x*10, 0)
+                } else {
+                    window.scrollBy(conf.scroll_x, 0)
+                }
+                break
+            case "L":
+                window.scrollBy(document.body.scrollWidth, 0)
+                break
+            case "j":
+                if (event.ctrlKey) {
+                    window.scrollBy(0, conf.scroll_y*10)
+                } else {
+                    window.scrollBy(0, conf.scroll_y)
+                }
+                break
+            case "J":
+                window.scrollBy(0, document.body.scrollHeight)
+                break
+            case "k":
+                if (event.ctrlKey) {
+                    window.scrollBy(0, -conf.scroll_y*10)
+                } else {
+                    window.scrollBy(0, -conf.scroll_y)
+                }
+                break
+            case "K":
+                window.scrollBy(0, -document.body.scrollHeight)
+                break
+        }
+        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) {
@@ -156,7 +253,8 @@ kit = toolkit = {
             var node = kit.CreateNode(child.type, child.data)
             child.list && kit.AppendChild(node, child.list, subs)
             child.name && (subs[child.name] = node)
-            subs.field || (subs.field = node)
+            subs.first || (subs.first = node)
+            subs.last, subs.last = node
             parent.append(node)
         })
         return subs
@@ -188,7 +286,6 @@ kit = toolkit = {
             })
         })
     },
-
     RangeTable: function(table, index, sort_asc) {
         var list = table.querySelectorAll("tr")
         var new_list = []
@@ -278,14 +375,7 @@ kit = toolkit = {
             }
         }
     },
-    OrderCode: function(code) {
-        if (!code) {return}
 
-        var kit = this
-        code.onclick = function(event) {
-            kit.CopyText()
-        }
-    },
     OrderForm: function(page, field, option, append, result) {
         if (!option) {return}
         option.ondaemon = option.ondaemon || function(msg) {
@@ -315,7 +405,7 @@ kit = toolkit = {
                     input.onclick = input.onclick || function(event) {
                         if (index == array.length-1) {
                             if (input.value == "login") {
-                                page.Runs(page, option, function(msg) {
+                                ctx.Runs(page, option, function(msg) {
                                     if (document.referrer) {
                                         location.href = document.referrer
                                     } else {
@@ -352,6 +442,14 @@ kit = toolkit = {
             }
         })
     },
+    OrderCode: function(code) {
+        if (!code) {return}
+
+        var kit = this
+        code.onclick = function(event) {
+            kit.CopyText()
+        }
+    },
     OrderLink: function(link) {
         link.target = "_blank"
     },
@@ -376,114 +474,6 @@ kit = toolkit = {
         }
         return true
     },
-
-    ScrollPage: function(event, conf) {
-        switch (event.key) {
-            case "h":
-                if (event.ctrlKey) {
-                    window.scrollBy(-conf.scroll_x*10, 0)
-                } else {
-                    window.scrollBy(-conf.scroll_x, 0)
-                }
-                break
-            case "H":
-                window.scrollBy(-document.body.scrollWidth, 0)
-                break
-            case "l":
-                if (event.ctrlKey) {
-                    window.scrollBy(conf.scroll_x*10, 0)
-                } else {
-                    window.scrollBy(conf.scroll_x, 0)
-                }
-                break
-            case "L":
-                window.scrollBy(document.body.scrollWidth, 0)
-                break
-            case "j":
-                if (event.ctrlKey) {
-                    window.scrollBy(0, conf.scroll_y*10)
-                } else {
-                    window.scrollBy(0, conf.scroll_y)
-                }
-                break
-            case "J":
-                window.scrollBy(0, document.body.scrollHeight)
-                break
-            case "k":
-                if (event.ctrlKey) {
-                    window.scrollBy(0, -conf.scroll_y*10)
-                } else {
-                    window.scrollBy(0, -conf.scroll_y)
-                }
-                break
-            case "K":
-                window.scrollBy(0, -document.body.scrollHeight)
-                break
-        }
-        return true
-    },
-
-    setView: 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
-            }
-        }
-    },
-    ShowDialog: function(pane, width, height) {
-        if (pane.style.display == "none") {
-            pane.style.display = "block"
-            this.setView(pane, {dialog: [width||800, height||400]})
-            return true
-        }
-        pane.style.display = "none"
-        return false
-    },
-    ShowWindow: function(pane, width, height) {
-        this.setView(pane, {window: [width||80, height||40]})
-    },
 }
 
 function right(arg) {