From 6e2722a939da017190c8417538587facee8c3990 Mon Sep 17 00:00:00 2001 From: shaoying Date: Mon, 27 May 2019 17:57:25 +0800 Subject: [PATCH] opt plugin() --- src/contexts/ssh/ssh.go | 7 ++ src/examples/chat/chat.go | 8 +- usr/librarys/chat.css | 100 +-------------- usr/librarys/chat.js | 175 +++++++++++++------------- usr/librarys/example.css | 57 ++++++++- usr/librarys/example.js | 252 ++++++++++++++++++++++---------------- usr/librarys/toolkit.js | 145 +++++++++++----------- usr/template/common.tmpl | 4 + 8 files changed, 385 insertions(+), 363 deletions(-) diff --git a/src/contexts/ssh/ssh.go b/src/contexts/ssh/ssh.go index 078b13c3..61b1b2f6 100644 --- a/src/contexts/ssh/ssh.go +++ b/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: "组件列表"}, }, diff --git a/src/examples/chat/chat.go b/src/examples/chat/chat.go index 9ea79e49..70371798 100644 --- a/src/examples/chat/chat.go +++ b/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": u, - } + user[v] = map[string]interface{}{"user": u} } m.Conf("flow", h, map[string]interface{}{ diff --git a/usr/librarys/chat.css b/usr/librarys/chat.css index f8d2d4ec..8217b2bf 100644 --- a/usr/librarys/chat.css +++ b/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 div.output div.item:hover { - 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.River { + float:left; } 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; - border:solid 2px green; - margin-left:10px; - float:left; + clear:both; } fieldset.Steam div.create pre:hover { background-color:red; diff --git a/usr/librarys/chat.js b/usr/librarys/chat.js index 53b318ef..b32a6ece 100644 --- a/usr/librarys/chat.js +++ b/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.offsetHeight-page.conf.banner - sizes = sizes || {} + var height = document.body.clientHeight-page.conf.border + var width = document.body.clientWidth-page.conf.border + page.conf.height = height + page.conf.width = width - 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 + sizes = sizes || {} + sizes.header == undefined && (sizes.header = page.header.clientHeight) + 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.source == undefined && (sizes.source = page.source.offsetHeight-page.conf.border) - sizes.target = height - sizes.action - sizes.source - 2*page.conf.border - if (sizes.action == -1) { - sizes.action = height - sizes.target = 0 - sizes.source = 0 - } - page.target.Size(sizes.width, sizes.target) - page.source.Size(sizes.width, sizes.source) - page.action.Size(sizes.width, sizes.action) + sizes.action == undefined && (sizes.action = page.action.clientHeight) + sizes.source == undefined && (sizes.source = page.source.clientHeight) + sizes.action == -1 && (sizes.action = height, sizes.source = 0) + width -= page.river.offsetWidth+page.storm.offsetWidth + page.action.Size(width, sizes.action) + page.source.Size(width, sizes.source) + + height -= page.source.offsetHeight+page.action.offsetHeight + page.target.Size(width, height) 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 = "" - table.querySelectorAll("tr").forEach(function(item) { + ui.list.innerHTML = "", table.querySelectorAll("tr").forEach(function(item) { item.firstChild.click() }) }, "清空": function(event) { - ui.list.innerHTML = "" - table.querySelectorAll("tr").forEach(function(item) { + ui.list.innerHTML = "", 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() - pane.onscroll = function(event) { - pane.postion.set({top: event.target.scrollTop, height: event.target.clientHeight, bottom: event.target.scrollHeight}) + function fun(line, index, event, args, cbs) { + var data = JSON.parse(line.text) + 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) { - water = value, pane.Show() + target: function(value, old) { + 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, - inputs: line.inputs, - })): form.Run(cmds, function(msg) { + node: line.node, group: line.group, index: line.index, inputs: line.inputs, + })): form.Run([river, water, index].concat(args), 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) { - page.onlayout(event, {river:0, action: -1, storm:0}) + "全屏": function(event) { + 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("") + pane.which.set(""), river = value, pane.Show() }, } 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") { - ui.name.nextSibling.click() - } + page.oninput(event, function(event) { + 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) }, }) diff --git a/usr/librarys/example.css b/usr/librarys/example.css index d8261316..affc3318 100644 --- a/usr/librarys/example.css +++ b/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 { diff --git a/usr/librarys/example.js b/usr/librarys/example.js index 1b73db16..3b5d19d2 100644 --- a/usr/librarys/example.js +++ b/usr/librarys/example.js @@ -41,34 +41,19 @@ function Page(page) { break case "text": - switch (key.length) { - 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}] - } + result = [{view: ["item", "div", key.length>1? line[key[0]]+"("+line[key[1]]+")": (key.length>0? line[key[0]]: "null")], 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}]}] + result = [{view: [""], list: [ + {view: ["", "table"], list: JSON.parse(line.text || "[]").map(function(item, index) { + var line = [] + for (var k in item) { + line.push({text: index == 0? [k, "th"]: [item[k], "td"]}) + } + return {type: "tr", list: line} + })}, + ]}] break case "field": @@ -76,93 +61,102 @@ function Page(page) { case "plugin": var id = "plugin"+page.ID() - var input = [{type: "input", style: {"display": "none"}}] - 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+")"}, + result = [{view: [line.view, "fieldset"], data: {id: id}, list: [ {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" - kit.ModifyView(pane, {dialog: [width||800, height||400]}) + page.dialog && page.dialog != pane && page.dialog.style.display == "block" && page.dialog.Show() + 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__ = { - field: field, + function run(event) { + 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 diff --git a/usr/librarys/toolkit.js b/usr/librarys/toolkit.js index 08c4214b..58476efd 100644 --- a/usr/librarys/toolkit.js +++ b/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 } diff --git a/usr/template/common.tmpl b/usr/template/common.tmpl index b4d8e82c..10366792 100644 --- a/usr/template/common.tmpl +++ b/usr/template/common.tmpl @@ -19,6 +19,10 @@ bench_data: {{option . "bench_data"}}, } +
+
+
+
{{end}} {{define "banner"}}