forked from x/ContextOS
opt plugin()
This commit is contained in:
parent
f7b2e4db46
commit
6e2722a939
@ -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: "组件列表"},
|
||||
},
|
||||
|
@ -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{}{
|
||||
|
@ -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;
|
||||
|
@ -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)
|
||||
},
|
||||
})
|
||||
|
@ -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 {
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
}
|
||||
|
@ -19,6 +19,10 @@
|
||||
bench_data: {{option . "bench_data"}},
|
||||
}
|
||||
</script>
|
||||
<fieldset class="toast"><legend></legend>
|
||||
<form class="option" data-componet_name="toast"></form>
|
||||
<div class="output"></div>
|
||||
</fieldset>
|
||||
{{end}}
|
||||
{{define "banner"}}
|
||||
<fieldset class="{{options . "componet_view"}}" data-init="{{options . "componet_init"}}">
|
||||
|
Loading…
x
Reference in New Issue
Block a user