opt js

src/contexts/web/web.go

@@ -941,60 +941,57 @@ var Index = &ctx.Context{Name: "web", Help: "应用中心",
 						continue
 					}
 
+					// 查找模块
+					msg := m.Find(kit.Select(m.Cap("module"), val["componet_ctx"]))
+
+					// 默认变量
+					msg.Option("componet_name", val["name"].(string))
+					for k, v := range val {
+						if msg.Option(k) != "" {
+							continue
+						}
+						switch value := v.(type) {
+						case []string:
+							msg.Add("option", k, value)
+						case string:
+							msg.Add("option", k, value)
+						default:
+							msg.Put("option", k, value)
+						}
+					}
+					// 默认参数
+					if val["inputs"] != nil {
+						for _, v := range val["inputs"].([]interface{}) {
+							value := v.(map[string]interface{})
+							if value["name"] != nil && msg.Option(value["name"].(string)) == "" {
+								msg.Add("option", value["name"].(string), m.Parse(value["value"]))
+							}
+						}
+					}
+
+					// 添加设备
 					arg = arg[:0]
 					if kit.Right(val["componet_pod"]) {
 						arg = append(arg, "sh", "node", kit.Format(m.Magic("session", "current.pod")))
 					}
+					// 添加命令
 					if kit.Right(val["componet_cmd"]) {
 						arg = append(arg, kit.Format(val["componet_cmd"]))
 					}
 					if m.Has("cmds") {
 						arg = append(arg, kit.Trans(m.Optionv("cmds"))...)
 					}
+					// 添加参数
+					for _, v := range kit.Trans(val["arguments"]) {
+						arg = append(arg, msg.Parse(v))
+					}
 
-					msg := m
 					if len(arg) > 0 {
-						// 查找模块
-						msg = m.Find(kit.Select(m.Cap("module"), val["componet_ctx"]))
-
 						// 权限检查
 						if m.Options("bench") && !m.Cmds("aaa.work", "right", m.Option("componet_group"), arg[0]) {
 							continue
 						}
 
-						// 添加参数值
-						if value, ok := val["arguments"].([]interface{}); ok {
-							for _, v := range value {
-								arg = append(arg, msg.Parse(kit.Format(v)))
-							}
-						}
-
-						// 添加固定值
-						msg.Option("componet_name", val["name"].(string))
-						for k, v := range val {
-							if msg.Option(k) != "" {
-								continue
-							}
-							switch value := v.(type) {
-							case []string:
-								msg.Add("option", k, value)
-							case string:
-								msg.Add("option", k, value)
-							default:
-								msg.Put("option", k, value)
-							}
-						}
-
-						// 添加输入值
-						if val["inputs"] != nil {
-							for _, v := range val["inputs"].([]interface{}) {
-								value := v.(map[string]interface{})
-								if value["name"] != nil && msg.Option(value["name"].(string)) == "" {
-									msg.Add("option", value["name"].(string), m.Parse(value["value"]))
-								}
-							}
-						}
-
 						m.Option("remote", "true")
 
 						// 执行命令

src/examples/code/code.go

@@ -122,7 +122,9 @@ var Index = &ctx.Context{Name: "code", Help: "代码中心",
 			},
 			"index": []interface{}{
 				map[string]interface{}{"name": "code", "template": "head"},
-				map[string]interface{}{"name": "toolkit", "help": "toolkit", "template": "toolkit"},
+				map[string]interface{}{"name": "toolkit", "help": "Ctrl+B", "template": "toolkit",
+					"componet_view": "KitList", "componet_init": "initKitList",
+				},
 				// map[string]interface{}{"name": "login", "help": "login", "template": "componet",
 				// 	"componet_ctx": "aaa", "componet_cmd": "login", "arguments": []interface{}{"@username", "@password"},
 				// 	"inputs": []interface{}{
@@ -186,14 +188,6 @@ var Index = &ctx.Context{Name: "code", Help: "代码中心",
 					},
 					"display_result": "",
 				},
-				map[string]interface{}{"name": "cmd", "help": "cmd", "template": "componet",
-					"componet_ctx": "cli.shy", "componet_cmd": "source", "arguments": []interface{}{"@cmd"},
-					"inputs": []interface{}{
-						map[string]interface{}{"type": "text", "name": "cmd", "value": "",
-							"class": "cmd", "clipstack": "void",
-						},
-					},
-				},
 				map[string]interface{}{"name": "pod", "help": "pod", "template": "componet",
 					"componet_view": "PodList", "componet_init": "initPodList",
 					"pre_run": true, "componet_ctx": "ssh", "componet_cmd": "remote", "inputs": []interface{}{
@@ -210,6 +204,12 @@ var Index = &ctx.Context{Name: "code", Help: "代码中心",
 					},
 					"display_result": "",
 				},
+				map[string]interface{}{"name": "cmd", "help": "cmd", "template": "componet",
+					"componet_view": "CmdList", "componet_init": "initCmdList",
+					"componet_ctx": "cli.shy", "componet_cmd": "source", "arguments": []interface{}{"@cmd"}, "inputs": []interface{}{
+						map[string]interface{}{"type": "text", "name": "cmd", "value": "", "class": "cmd", "clipstack": "void"},
+					},
+				},
 				// map[string]interface{}{"name": "mp", "template": "mp"},
 				map[string]interface{}{"name": "tail", "template": "tail"},
 			},

usr/librarys/context.js

@@ -1,33 +1,5 @@
 ctx = context = {
     __proto__: kit,
-    Table: function(msg, cb) {
-        var rows = this.PackAppend(msg)
-        if (typeof cb == "function") {
-            for (var i = 0; i < rows.length; i++) {
-                if (cb(rows[i], i)) {
-                    break
-                }
-            }
-        }
-        return rows
-    },
-    PackAppend: function(msg) {
-        var ret = []
-        if (!msg || !msg.append || !msg.append.length || !msg[msg.append[0]]) {
-            return ret
-        }
-
-        var ncol = msg.append.length
-        var nrow = msg[msg.append[0]].length
-        for (var i = 0; i < nrow; i++) {
-            var one = {}
-            for (var j = 0; j < ncol; j++) {
-                one[msg.append[j]] = msg[msg.append[j]][i]
-            }
-            ret.push(one)
-        }
-        return ret
-    },
     Run: function(page, dataset, cmd, cb) {
         var option = {"cmds": cmd}
         for (var k in dataset) {
@@ -51,14 +23,26 @@ ctx = context = {
         }
         this.Run(page, data, [], cb || form.onactions)
     },
-    Current: function(key, value) {
+    Table: function(msg, cb) {
-        context.GET("", {
+        var ret = []
-            "componet_group": "index",
+        if (!msg || !msg.append || !msg.append.length || !msg[msg.append[0]]) {
-            "componet_name": "cmd",
+            return ret
-            "cmds": ["sess", "current", key, value],
+        }
-        })
+
-        return value
+        var ncol = msg.append.length
+        var nrow = msg[msg.append[0]].length
+        for (var i = 0; i < nrow; i++) {
+            var one = {}
+            for (var j = 0; j < ncol; j++) {
+                one[msg.append[j]] = msg[msg.append[j]][i]
+            }
+            ret.push(one)
+        }
+
+        typeof cb == "function" && ret.forEach(cb)
+        return ret
     },
+
     Share: function(objs) {
         var args = this.Search()
         for (var k in objs) {
@@ -132,45 +116,13 @@ ctx = context = {
         document.cookie = key+"="+value+";path=/";
         return this.Cookie(key);
     },
-    Command: function(cmd, option, cb) {
+    Current: function(key, value) {
-        if (typeof option == "function") {
+        context.GET("", {
-            cb = option
+            "componet_group": "index",
-            option = {}
+            "componet_name": "cmd",
-        } else {
+            "cmds": ["sess", "current", key, value],
-            option = option || {}
-        }
-
-        option["componet_index"] = "index"
-        if (typeof cmd == "string") {
-            option["componet_name"] = "source"
-            option["cmd"] = cmd
-        } else {
-            option["componet_name"] = "head"
-            option["cmds"] = cmd
-        }
-
-        this.GET("", option, function(msg) {
-            typeof cb == "function" && (msg && msg[0]? cb(msg[0]): cb())
-        })
-    },
-    Cache: function(key, cb, sync) {
-        if (key == undefined) {
-            return this.cache
-        }
-        if (this.cache && !sync) {
-            typeof cb == "function" && cb(this.cache[key])
-            return this.cache[key]
-        }
-
-        var that = this
-        this.GET("", {"componet_group": "login", "componet_order": "userinfo"}, function(msg) {
-            msg = msg[0]
-            that.cache = {}
-            for (var i = 0; i < msg.append.length; i++) {
-                that.cache[msg.append[i]] = msg[msg.append[i]].join("")
-            }
-            typeof cb == "function" && cb(that.cache[key])
         })
+        return value
     },
     GET: function(url, form, cb) {
         form = form || {}

usr/librarys/example.js

@@ -2,33 +2,6 @@ exp = example = {
     __proto__: ctx,
     _init: function(page) {
         page.__proto__ = this
-        document.querySelectorAll("body>fieldset").forEach(function(field) {
-            var init = page[field.dataset.init]
-            if (typeof init == "function") {
-                var option = field.querySelector("form.option")
-                var append = field.querySelector("table.append")
-                var result = field.querySelector("div.result")
-                var conf = init(page, field, option, append, result)
-                if (conf && conf["button"]) {
-                    var buttons = []
-                    conf.button.forEach(function(value, index) {
-                        buttons.push({"click": [value, function(event) {
-                            typeof conf["action"] == "function" && conf["action"](value, event)
-                        }]})
-                    })
-                    kit.InsertChild(field, append, "div", buttons)
-                }
-                if (conf && conf["table"]) {
-                    option.onactions = function(msg) {
-                        append.innerHTML = ""
-                        kit.AppendTable(append, ctx.PackAppend(msg), msg.append, function(value, key, row, index, event) {
-                            typeof conf["table"][key] && conf["table"][key](value, key, row, index, event)
-                        })
-                    }
-                    ctx.Runs(page, option)
-                }
-            }
-        })
         return this
     },
     reload: function() {

usr/librarys/toolkit.js

@@ -1,5 +1,27 @@
 kit = toolkit = {
+    History: {cmd: [], txt: [], key: [],
+        add: function(type, data) {
+            var list = this[type] || []
+            data && list.push({time: Date.now(), data: data})
+            this[type] = list
+            return list.length
+        },
+        get: function(type, index) {
+            var list = this[type] || []
+            var len = list.length
+            return index == undefined? this[type]: this[type][(index+len)%len]
+        },
+    },
+    Log: function() {
+        var args = []
+        for (var i = 0; i < arguments.length; i++) {
+            args.push(arguments[i])
+        }
+        console.log(arguments.length == 1? args[0]: args)
+        return args
+    },
     isMobile: navigator.userAgent.indexOf("Mobile") > -1,
+
     ModifyNode: function(which, html) {
         var node = typeof which == "string"? document.querySelector(which): which
         switch (typeof html) {
@@ -30,23 +52,40 @@ kit = toolkit = {
             return elm
         }
 
-        // code, text, view, click
+        // tree, code, text, view, click
         // type, name, data, list
+        var kit = this
 
         subs = subs || {}
-        for (var i = 0; i < children.length; i++) {
+        children.forEach(function(child, i) {
-            var child = children[i]
             child.data = child.data || {}
             child.type = child.type || "div"
 
-            if (child.click) {
+            if (child.button) {
                 child.type = "button"
-                child.data["innerText"] = child.click[0]
+                child.data["innerText"] = child.button[0]
-                child.data["onclick"] = child.click[1]
+                child.data["onclick"] = child.button[1]
+            } else if (child.click) {
+                child.data["onclick"] = child.click[0]
+            } else if (child.fork) {
+                child.type = "li"
+                child.list = [
+                    {"text": [child.fork[0], "div"]},
+                    {"type": "ul", "list": child.fork[1]},
+                ]
+            } else if (child.leaf) {
+                child.type = "li"
+                child.data["innerText"] = child.leaf[0]
+                if (child.leaf.length > 1 && typeof child.leaf[1] == "function") {
+                    child.data["onclick"] = function(event) {
+                        child.leaf[1](event, node)
+                    }
+                }
             } else if (child.view) {
                 child.data["className"] = child.view[0]
                 child.type = child.view.length > 1? child.view[1]: "div"
                 child.view.length > 2 && (child.data["innerText"] = child.view[2])
+                child.view.length > 3 && (child.name = child.view[3])
             } else if (child.text) {
                 child.data["innerText"] = child.text[0]
                 child.type = child.text.length > 1? child.text[1]: "pre"
@@ -57,11 +96,11 @@ kit = toolkit = {
                 child.code.length > 2 && (child.data["className"] = child.code[2])
             }
 
-            var node = this.CreateNode(child.type, child.data)
+            var node = kit.CreateNode(child.type, child.data)
-            child.list && this.AppendChild(node, child.list, subs)
+            child.list && kit.AppendChild(node, child.list, subs)
             child.name && (subs[child.name] = node)
             parent.append(node)
-        }
+        })
         return subs
     },
     InsertChild: function (parent, position, element, children) {
@@ -69,6 +108,7 @@ kit = toolkit = {
         this.AppendChild(elm, children)
         return parent.insertBefore(elm, position || parent.firstElementChild)
     },
+
     AppendTable: function(table, data, fields, cb) {
         if (!data || !fields) {
             return
@@ -90,6 +130,180 @@ kit = toolkit = {
             })
         })
     },
+    RangeTable: function(table, index, sort_asc) {
+        var list = table.querySelectorAll("tr")
+        var new_list = []
+
+        var is_time = true
+        var is_number = true
+        for (var i = 1; i < list.length; i++) {
+            var value = Date.parse(list[i].childNodes[index].innerText)
+            if (!(value > 0)) {
+                is_time = false
+            }
+
+            var value = parseInt(list[i].childNodes[index].innerText)
+            if (!(value >= 0 || value <= 0)) {
+                is_number = false
+            }
+
+            new_list.push(list[i])
+        }
+
+        var sort_order = ""
+        if (is_time) {
+            if (sort_asc) {
+                method = function(a, b) {return Date.parse(a) > Date.parse(b)}
+                sort_order = "time"
+            } else {
+                method = function(a, b) {return Date.parse(a) < Date.parse(b)}
+                sort_order = "time_r"
+            }
+        } else if (is_number) {
+            if (sort_asc) {
+                method = function(a, b) {return parseInt(a) > parseInt(b)}
+                sort_order = "int"
+            } else {
+                method = function(a, b) {return parseInt(a) < parseInt(b)}
+                sort_order = "int_r"
+            }
+        } else {
+            if (sort_asc) {
+                method = function(a, b) {return a > b}
+                sort_order = "str"
+            } else {
+                method = function(a, b) {return a < b}
+                sort_order = "str_r"
+            }
+        }
+
+        list = new_list
+        new_list = []
+        for (var i = 0; i < list.length; i++) {
+            list[i].parentElement && list[i].parentElement.removeChild(list[i])
+            for (var j = i+1; j < list.length; j++) {
+                if (typeof method == "function" && method(list[i].childNodes[index].innerText, list[j].childNodes[index].innerText)) {
+                    var temp = list[i]
+                    list[i] = list[j]
+                    list[j] = temp
+                }
+            }
+            new_list.push(list[i])
+        }
+
+        for (var i = 0; i < new_list.length; i++) {
+            table.appendChild(new_list[i])
+        }
+        return sort_order
+    },
+    OrderTable: function(table, field, cb) {
+        if (!table) {return}
+        var kit = this
+        table.onclick = function(event) {
+            var target = event.target
+            var dataset = target.dataset
+            var nodes = target.parentElement.childNodes
+            for (var i = 0; i < nodes.length; i++) {
+                if (nodes[i] == target) {
+                    if (target.tagName == "TH") {
+                        dataset["sort_asc"] = (dataset["sort_asc"] == "1") ? 0: 1
+                        kit.RangeTable(table, i, dataset["sort_asc"] == "1")
+                    } else if (target.tagName == "TD") {
+                        var tr = target.parentElement.parentElement.querySelector("tr")
+                        if (tr.childNodes[i].innerText.startsWith(field)) {
+                            typeof cb == "function" && cb(event)
+                        }
+                        kit.CopyText()
+                    }
+                }
+            }
+        }
+    },
+    OrderCode: function(code) {
+        if (!code) {return}
+
+        var kit = this
+        code.onclick = function(event) {
+            kit.CopyText()
+        }
+    },
+    OrderForm: function(page, form, append, result) {
+        if (!form) {return}
+        form.onactions = form.onactions || function(msg) {
+            if (!msg) {return}
+            append.innerHTML = ""
+            kit.AppendTable(append, ctx.Table(msg), msg.append)
+            result.innerHTML = ""
+            result.innerText = msg.result.join("")
+        }
+
+        form.querySelectorAll("select").forEach(function(select, index, array) {
+            select.onchange = function(event) {
+                if (index == array.length-1) {
+                    page.Runs(page, form)
+                    return
+                }
+                if (array[index+1].type == "button") {
+                    array[index+1].click()
+                    return
+                }
+                array[index+1].focus()
+            }
+        })
+        form.querySelectorAll("input").forEach(function(input, index, array) {
+            switch (input.type) {
+                case "button":
+                    input.onclick = function(event) {
+                        if (index == array.length-1) {
+                            page.Runs(page, form)
+                            return
+                        }
+                        if (array[index+1].type == "button") {
+                            array[index+1].click()
+                            return
+                        }
+                        array[index+1].focus()
+                    }
+                default:
+                    input.onkeyup = function(event) {
+                        if (event.key != "Enter") {
+                            return
+                        }
+                        if (index == array.length-1) {
+                            page.Runs(page, form)
+                            return
+                        }
+                        if (array[index+1].type == "button") {
+                            array[index+1].click()
+                            return
+                        }
+                        array[index+1].focus()
+                    }
+            }
+        })
+    },
+
+    CopyText: function(text) {
+        text = window.getSelection().toString()
+        if (text == "") {return}
+        kit.Log(text)
+        kit.History.add("txt", text)
+        document.execCommand("copy")
+    },
+    DelText: function(target, start, count) {
+        target.value = target.value.substring(0, start)+target.value.substring(start+(count||target.value.length), target.value.length)
+        target.setSelectionRange(start, start)
+    },
+    HitText: function(target, text) {
+        var start = target.selectionStart
+        for (var i = 1; i < text.length+1; i++) {
+            var ch = text[text.length-i]
+            if (target.value[start-i] != ch && kit.History.get("key", -i).data != ch) {
+                return false
+            }
+        }
+        return true
+    },
 }
 
 function right(arg) {
@@ -128,187 +342,3 @@ function format_date(arg) {
     return arg.getFullYear()+"-"+month+"-"+date+" "+hour+":"+minute+":"+second
 }
 
-function modify_node(which, html) {
-    var node = which
-    if (typeof which == "string") {
-        node = document.querySelector(which)
-    }
-
-    html && typeof html == "string" && (node.innerHTML = html)
-    if (html && typeof html == "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]
-        }
-    }
-    return node
-}
-function create_node(element, html) {
-    var node = document.createElement(element)
-    return modify_node(node, html)
-}
-
-function insert_child(parent, element, html, position) {
-    var elm = create_node(element, html)
-    return parent.insertBefore(elm, position || parent.firstElementChild)
-}
-function append_child(parent, element, html) {
-    var elm = create_node(element, html)
-    parent.append(elm)
-    return elm
-}
-function insert_before(self, element, html) {
-    var elm = create_node(element, html)
-    return self.parentElement.insertBefore(elm, self)
-}
-function insert_button(which, value, callback) {
-    insert_before(which, "input", {
-        "type": "button", "value": value, "onclick": callback,
-    })
-}
-
-function format(str) {
-    if (str.indexOf("http") == 0 && str.indexOf("<a href") == -1) {
-        return "<a href='"+str+"' target='_blank'>"+str+"</a>"
-    }
-    return str
-}
-function sort_table(table, index, sort_asc) {
-    var list = table.querySelectorAll("tr")
-    var new_list = []
-
-    var is_time = true
-    var is_number = true
-    for (var i = 1; i < list.length; i++) {
-        var value = Date.parse(list[i].childNodes[index].innerText)
-        if (!(value > 0)) {
-            is_time = false
-        }
-
-        var value = parseInt(list[i].childNodes[index].innerText)
-        if (!(value >= 0 || value <= 0)) {
-            is_number = false
-        }
-
-        new_list.push(list[i])
-    }
-
-    var sort_order = ""
-    if (is_time) {
-        if (sort_asc) {
-            method = function(a, b) {return Date.parse(a) > Date.parse(b)}
-            sort_order = "time"
-        } else {
-            method = function(a, b) {return Date.parse(a) < Date.parse(b)}
-            sort_order = "time_r"
-        }
-    } else if (is_number) {
-        if (sort_asc) {
-            method = function(a, b) {return parseInt(a) > parseInt(b)}
-            sort_order = "int"
-        } else {
-            method = function(a, b) {return parseInt(a) < parseInt(b)}
-            sort_order = "int_r"
-        }
-    } else {
-        if (sort_asc) {
-            method = function(a, b) {return a > b}
-            sort_order = "str"
-        } else {
-            method = function(a, b) {return a < b}
-            sort_order = "str_r"
-        }
-    }
-
-    list = new_list
-    new_list = []
-    for (var i = 0; i < list.length; i++) {
-        list[i].parentElement && list[i].parentElement.removeChild(list[i])
-        for (var j = i+1; j < list.length; j++) {
-            if (typeof method == "function" && method(list[i].childNodes[index].innerText, list[j].childNodes[index].innerText)) {
-                var temp = list[i]
-                list[i] = list[j]
-                list[j] = temp
-            }
-        }
-        new_list.push(list[i])
-    }
-
-    for (var i = 0; i < new_list.length; i++) {
-        table.appendChild(new_list[i])
-    }
-    return sort_order
-}
-function add_sort(append, field, cb) {
-    append.onclick = function(event) {
-        var target = event.target
-        var dataset = target.dataset
-        var nodes = target.parentElement.childNodes
-        for (var i = 0; i < nodes.length; i++) {
-            if (nodes[i] == target) {
-                if (target.tagName == "TH") {
-                    dataset["sort_asc"] = (dataset["sort_asc"] == "1") ? 0: 1
-                    sort_table(append, i, dataset["sort_asc"] == "1")
-                } else if (target.tagName == "TD") {
-                    var tr = target.parentElement.parentElement.querySelector("tr")
-                    if (tr.childNodes[i].innerText.startsWith(field)) {
-                        typeof cb == "function" && cb(event)
-                    }
-                }
-            }
-        }
-    }
-}
-function scroll_page(event, page) {
-    var body = document.querySelector("body")
-
-    switch (event.key) {
-        case "h":
-            if (event.ctrlKey) {
-                window.scrollBy(-page.scroll_x*10, 0)
-            } else {
-                window.scrollBy(-page.scroll_x, 0)
-            }
-            break
-        case "H":
-            window.scrollBy(-body.scrollWidth, 0)
-            break
-        case "l":
-            if (event.ctrlKey) {
-                window.scrollBy(page.scroll_x*10, 0)
-            } else {
-                window.scrollBy(page.scroll_x, 0)
-            }
-            break
-        case "L":
-            window.scrollBy(body.scrollWidth, 0)
-            break
-        case "j":
-            if (event.ctrlKey) {
-                window.scrollBy(0, page.scroll_y*10)
-            } else {
-                window.scrollBy(0, page.scroll_y)
-            }
-            break
-        case "J":
-            window.scrollBy(0, body.scrollHeight)
-            break
-        case "k":
-            if (event.ctrlKey) {
-                window.scrollBy(0, -page.scroll_y*10)
-            } else {
-                window.scrollBy(0, -page.scroll_y)
-            }
-            break
-        case "K":
-            window.scrollBy(0, -body.scrollHeight)
-            break
-    }
-    return
-}
-

usr/librarys/wiki.js

@@ -215,3 +215,178 @@ window.onload = function(event) {
     init_table()
     init_layout()
 }
+
+function modify_node(which, html) {
+    var node = which
+    if (typeof which == "string") {
+        node = document.querySelector(which)
+    }
+
+    html && typeof html == "string" && (node.innerHTML = html)
+    if (html && typeof html == "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]
+        }
+    }
+    return node
+}
+function create_node(element, html) {
+    var node = document.createElement(element)
+    return modify_node(node, html)
+}
+function append_child(parent, element, html) {
+    var elm = create_node(element, html)
+    parent.append(elm)
+    return elm
+}
+function insert_before(self, element, html) {
+    var elm = create_node(element, html)
+    return self.parentElement.insertBefore(elm, self)
+}
+
+function format(str) {
+    if (str.indexOf("http") == 0 && str.indexOf("<a href") == -1) {
+        return "<a href='"+str+"' target='_blank'>"+str+"</a>"
+    }
+    return str
+}
+function sort_table(table, index, sort_asc) {
+    var list = table.querySelectorAll("tr")
+    var new_list = []
+
+    var is_time = true
+    var is_number = true
+    for (var i = 1; i < list.length; i++) {
+        var value = Date.parse(list[i].childNodes[index].innerText)
+        if (!(value > 0)) {
+            is_time = false
+        }
+
+        var value = parseInt(list[i].childNodes[index].innerText)
+        if (!(value >= 0 || value <= 0)) {
+            is_number = false
+        }
+
+        new_list.push(list[i])
+    }
+
+    var sort_order = ""
+    if (is_time) {
+        if (sort_asc) {
+            method = function(a, b) {return Date.parse(a) > Date.parse(b)}
+            sort_order = "time"
+        } else {
+            method = function(a, b) {return Date.parse(a) < Date.parse(b)}
+            sort_order = "time_r"
+        }
+    } else if (is_number) {
+        if (sort_asc) {
+            method = function(a, b) {return parseInt(a) > parseInt(b)}
+            sort_order = "int"
+        } else {
+            method = function(a, b) {return parseInt(a) < parseInt(b)}
+            sort_order = "int_r"
+        }
+    } else {
+        if (sort_asc) {
+            method = function(a, b) {return a > b}
+            sort_order = "str"
+        } else {
+            method = function(a, b) {return a < b}
+            sort_order = "str_r"
+        }
+    }
+
+    list = new_list
+    new_list = []
+    for (var i = 0; i < list.length; i++) {
+        list[i].parentElement && list[i].parentElement.removeChild(list[i])
+        for (var j = i+1; j < list.length; j++) {
+            if (typeof method == "function" && method(list[i].childNodes[index].innerText, list[j].childNodes[index].innerText)) {
+                var temp = list[i]
+                list[i] = list[j]
+                list[j] = temp
+            }
+        }
+        new_list.push(list[i])
+    }
+
+    for (var i = 0; i < new_list.length; i++) {
+        table.appendChild(new_list[i])
+    }
+    return sort_order
+}
+function add_sort(append, field, cb) {
+    append.onclick = function(event) {
+        var target = event.target
+        var dataset = target.dataset
+        var nodes = target.parentElement.childNodes
+        for (var i = 0; i < nodes.length; i++) {
+            if (nodes[i] == target) {
+                if (target.tagName == "TH") {
+                    dataset["sort_asc"] = (dataset["sort_asc"] == "1") ? 0: 1
+                    sort_table(append, i, dataset["sort_asc"] == "1")
+                } else if (target.tagName == "TD") {
+                    var tr = target.parentElement.parentElement.querySelector("tr")
+                    if (tr.childNodes[i].innerText.startsWith(field)) {
+                        typeof cb == "function" && cb(event)
+                    }
+                }
+            }
+        }
+    }
+}
+function scroll_page(event, page) {
+    var body = document.querySelector("body")
+
+    switch (event.key) {
+        case "h":
+            if (event.ctrlKey) {
+                window.scrollBy(-page.scroll_x*10, 0)
+            } else {
+                window.scrollBy(-page.scroll_x, 0)
+            }
+            break
+        case "H":
+            window.scrollBy(-body.scrollWidth, 0)
+            break
+        case "l":
+            if (event.ctrlKey) {
+                window.scrollBy(page.scroll_x*10, 0)
+            } else {
+                window.scrollBy(page.scroll_x, 0)
+            }
+            break
+        case "L":
+            window.scrollBy(body.scrollWidth, 0)
+            break
+        case "j":
+            if (event.ctrlKey) {
+                window.scrollBy(0, page.scroll_y*10)
+            } else {
+                window.scrollBy(0, page.scroll_y)
+            }
+            break
+        case "J":
+            window.scrollBy(0, body.scrollHeight)
+            break
+        case "k":
+            if (event.ctrlKey) {
+                window.scrollBy(0, -page.scroll_y*10)
+            } else {
+                window.scrollBy(0, -page.scroll_y)
+            }
+            break
+        case "K":
+            window.scrollBy(0, -body.scrollHeight)
+            break
+    }
+    return
+}
+

usr/template/code/code.tmpl

@@ -9,7 +9,7 @@
 <link rel="stylesheet" type="text/css" href="/static/librarys/code.css"></link>
 <style>
 {{$toolkit_view := conf . "route" "toolkit_view"}}
-    div.workflow {
+    fieldset.KitList {
         color:#e6dd37;
         font-size:14px;
         font-family:monospace;
@@ -22,28 +22,28 @@
         top:{{index $toolkit_view "top"}}px;
         left:{{index $toolkit_view "left"}}px;
     }
-    div.workflow:hover, div.workflow.max {
+    fieldset.KitList:hover, fieldset.KitList.max {
         width:{{index $toolkit_view "width"}}px;
         height:{{index $toolkit_view "height"}}px;
     }
-    div.workflow div:hover, div.workflow li li:hover {
+    fieldset.KitList div:hover, fieldset.KitList li li:hover {
         background-color:red;
     }
-    div.workflow div.stick, div.workflow li li.stick {
+    fieldset.KitList div.stick, fieldset.KitList li li.stick {
         background-color:red;
     }
-    div.workflow li>label.result{
+    fieldset.KitList li>label.result{
         background-color:rgba(0,0,0,0.2);
         padding:0 5px;
         border:2px solid green;
         margin-left: 10px;
     }
-    div.workflow li>input {
+    fieldset.KitList li>input {
         background-color:rgba(0,0,0,0.2);
     }
 </style>
 </head>
-<body onkeydown="return onaction(event, 'scroll')" onkeyup="return onaction(event, 'keymap')">
+<body>
 <script>
     var session ={{option . "session"}}
     var bench_data ={{option . "bench_data"}}
@@ -60,43 +60,9 @@
 
 {{define "toolkit"}}
 {{$bench_data := option . "bench_data"}}
-{{$username := option . "username"|option}}
+<fieldset class="{{option . "componet_view"|meta}}" data-init="{{option . "componet_init"|meta}}">
-<div class="workflow">
+    <div>{{option .Meta "name"}}({{option .Meta "help"}})</div>
-    <div>&nbsp;bench (Ctrl+B)</div>
+</fieldset>
-    <ul class="toolkit">
-        <li><div>粘贴板</div>
-            <ul class="txt">
-                <li data-action="save_txt">+ 保存粘贴板(Ctrl+S)</li>
-                <li data-action="create_txt">+ 添加粘贴板(Ctrl+Y)</li>
-                <li data-action="quick_txt">+ 快捷粘贴板(Ctrl+P)</li>
-            </ul>
-        </li>
-        <li><div>命令行</div>
-            <ul class="cmd">
-                {{range $name, $cmd := conf . "toolkit"}}
-                    <li>{{$name}} <input type="text" data-cmd="{{$name}}" onkeyup="onaction(event, 'toolkit')"><label class="result"></label></li>
-                {{end}}
-
-                <li class="stick" data-action="shrink_cmd">+ 折叠命令行(Ctrl+Z)</li>
-                <li data-action="create_cmd">+ 添加命令行(Ctrl+M)</li>
-                {{range $index, $cmd := index $bench_data "commands"}}
-                    <li class="cmd{{$index}}" data-cmd="{{$index}}">{{index $cmd "now"|option}} {{$index}}: {{index $cmd "cmd"|option}}</li>
-                {{end}}
-            </ul>
-        </li>
-        <li><div>工作流</div>
-            <ul class="fly">
-                <li data-action="refresh_fly">+ 刷新工作流(Ctrl+R)</li>
-                <li data-action="create_fly">+ 添加工作流(Ctrl+T)</li>
-                {{range $key, $item := work .}}
-                        <li data-key="{{$key}}">{{index $item "create_time"}} {{index $item "data" "name"}}({{slice $key 0 6}})</li>
-                {{end}}
-                <li data-action="rename_fly">+ 命名工作流</li>
-                <li data-action="remove_fly">+ 删除工作流</li>
-            </ul>
-        </li>
-    </ul>
-</div>
 {{end}}
 
 {{define "componet"}}
@@ -122,14 +88,14 @@
                   {{end}}
 
                   {{if eq $type "button"}}
-                      <input type="button" onclick="return onaction(event, 'cmd')" value="{{$value}}">
+                      <input type="button" value="{{$value}}">
                   {{else if eq $type "submit"}}
                       <input type="submit" value="{{$value}}">
                   {{else if eq $type "file"}}
                       <input type="file" name="{{index $input "name"}}">
                   {{else if eq $type "choice"}}
                       {{$default_value := index $input "value"}}
-                      <select name="{{index $input "name"}}" onchange="return onaction(event, 'cmd')">
+                      <select name="{{index $input "name"}}">
                           {{range $index, $value := index $input "choice"}}
                               {{$val := index $value "value"}}
                               {{if eq $default_value $val}}
@@ -140,33 +106,12 @@
                           {{end}}
                       </select>
                   {{else if eq $type "password"}}
-                      <input
+                      <input type="password" name="{{index $input "name"}}" value="{{$value}}" class="{{index $input "class"}}">
-                          type="password"
-                          name="{{index $input "name"}}"
-                          value="{{$value}}"
-                          class="{{index $input "class"}}"
-                          onclick="return onaction(event, 'click')"
-                          onkeyup="return onaction(event, 'input')">
                   {{else if eq $type "textarea"}}
-                      <textarea
+                      <textarea rows="{{index $input "rows"}}" cols="{{index $input "cols"}}"
-                          rows="{{index $input "rows"}}"
+                          name="{{index $input "name"}}" class="{{index $input "class"}}">{{$value}}</textarea>
-                          cols="{{index $input "cols"}}"
-                          name="{{index $input "name"}}"
-                          class="{{index $input "class"}}"
-                          onclick="return onaction(event, 'click')"
-                          onkeyup="return onaction(event, 'input')">{{$value}}</textarea>
                   {{else}}
-                      <input
+                      <input name="{{index $input "name"}}" value="{{$value}}" class="{{index $input "class"}}">
-                          name="{{index $input "name"}}"
-                          value="{{$value}}"
-                          class="{{index $input "class"}}"
-                          {{if index $input "clipstack"}}
-                              list="{{index $input "clipstack"}}"
-                          {{else}}
-                              list="clipstack"
-                          {{end}}
-                          onclick="return onaction(event, 'click')"
-                          onkeyup="return onaction(event, 'input')">
                   {{end}}
               </div>
           {{end}}