1
0
forked from x/ContextOS

opt plugin()

This commit is contained in:
shaoying 2019-05-27 17:57:25 +08:00
parent f7b2e4db46
commit 6e2722a939
8 changed files with 385 additions and 363 deletions

View File

@ -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: "组件列表"},
},

View File

@ -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{}{

View File

@ -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;

View File

@ -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)
},
})

View File

@ -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 {

View File

@ -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

View File

@ -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
}

View File

@ -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"}}">