mirror of
https://shylinux.com/x/ContextOS
synced 2025-04-25 16:58:06 +08:00
1081 lines
43 KiB
JavaScript
1081 lines
43 KiB
JavaScript
function Page(page) {
|
|
var id = 1
|
|
var conf = {}, conf_cb = {}
|
|
var sync = {}
|
|
page.__proto__ = {
|
|
__proto__: kit,
|
|
ID: function() {
|
|
return id++
|
|
},
|
|
Conf: function(key, value, cb) {
|
|
if (key == undefined) {
|
|
return conf
|
|
}
|
|
if (cb != undefined) {
|
|
conf_cb[key] = cb
|
|
}
|
|
if (value != undefined) {
|
|
var old = conf[key]
|
|
conf[key] = value
|
|
conf_cb[key] && conf_cb[key](value, old)
|
|
}
|
|
return conf[key]
|
|
},
|
|
Sync: function(m) {
|
|
var meta = m, data = "", list = []
|
|
return sync[m] || (sync[m] = {
|
|
change: function(cb) {
|
|
list.push(cb)
|
|
return list.length-1
|
|
},
|
|
eq: function(value) {
|
|
return data == value
|
|
},
|
|
neq: function(value) {
|
|
return data != value
|
|
},
|
|
get: function() {
|
|
return data
|
|
},
|
|
set: function(value, force) {
|
|
if (value == undefined) {
|
|
return
|
|
}
|
|
if (value == data && !force) {
|
|
return value
|
|
}
|
|
old_value = data, data = value
|
|
meta && kit.Log(meta, value, old_value)
|
|
for (var i = 0; i < list.length; i++) {
|
|
list[i](value, old_value)
|
|
}
|
|
return value
|
|
},
|
|
})
|
|
},
|
|
View: function(parent, type, line, key, cb) {
|
|
var text = line, list = [], ui = {}
|
|
switch (type) {
|
|
case "icon":
|
|
list.push({img: [line[key[0]], function(event) {
|
|
// event.target.scrollIntoView()
|
|
}]})
|
|
break
|
|
|
|
case "text":
|
|
list.push({text: [key.length>1? line[key[0]]+"("+line[key[1]]+")":
|
|
(key.length>0? line[key[0]]: "null"), "span"], click: cb})
|
|
break
|
|
|
|
case "code":
|
|
list.push({view: ["code", "div", key.length>1? line[key[0]]+"("+line[key[1]]+")":
|
|
(key.length>0? line[key[0]]: "null")], click: cb})
|
|
break
|
|
|
|
case "table":
|
|
list.push({type: "table", list: JSON.parse(line.text || "[]").map(function(item, index) {
|
|
return {type: "tr", list: item.map(function(value) {
|
|
return {text: [value, index == 0? "th": "td"]}
|
|
})}
|
|
})})
|
|
break
|
|
|
|
case "field":
|
|
var text = JSON.parse(line.text)
|
|
|
|
case "plugin":
|
|
var id = "plugin"+page.ID()
|
|
list.push({view: [text.view+" item", "fieldset", "", "field"], data: {id: id, Run: cb}, list: [
|
|
{text: [text.name+"("+text.help+")", "legend"]},
|
|
{view: ["option", "form", "", "option"], list: [{type: "input", style: {"display": "none"}}]},
|
|
{view: ["output", "div", "", "output"]},
|
|
{script: ""+id+".Script="+(text.init||"{}")},
|
|
]})
|
|
break
|
|
}
|
|
|
|
var item = []
|
|
parent.DisplayUser && item.push({view: ["user", "div", line.create_nick||line.create_user]})
|
|
parent.DisplayTime && (item.push({text: [line.create_time, "div", "time"]}))
|
|
item.push({view: ["text"], list:list})
|
|
|
|
!parent.DisplayRaw && (list = [{view: ["item"], list:item}])
|
|
ui = kit.AppendChild(parent, list)
|
|
ui.field && (ui.field.Meta = text)
|
|
return ui
|
|
},
|
|
Include: function(src, cb) {
|
|
kit.AppendChild(document.body, [{include: [src[0], function(event) {
|
|
src.length == 1? cb(event): page.Include(src.slice(1), cb)
|
|
}]}])
|
|
},
|
|
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||text.length*10+100, args.height||60], padding: 10,
|
|
})
|
|
if (!text) {
|
|
toast.style.display = "none"
|
|
return
|
|
}
|
|
|
|
var list = [{text: [title||"", "div", "title"]}, {text: [args.text||"", "div", "content"]}]
|
|
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"
|
|
}})
|
|
})
|
|
list.push({view: ["tick"], name: "tick"})
|
|
|
|
// kit.ModifyNode(toast.querySelector("legend"), args.title||"tips")
|
|
var ui = kit.AppendChild(kit.ModifyNode(toast.querySelector("div.output"), ""), list)
|
|
var tick = 1
|
|
var begin = kit.time(0,"%H:%M:%S")
|
|
var timer = args.duration ==- 1? setTimeout(function() {
|
|
function ticker() {
|
|
toast.style.display != "none" && (ui.tick.innerText = begin+" ... "+(tick++)+"s") && setTimeout(ticker, 1000)
|
|
}
|
|
ticker()
|
|
}, 10): setTimeout(function(){toast.style.display = "none"}, args.duration||3000)
|
|
page.toast = toast
|
|
return true
|
|
},
|
|
ondebug: function() {
|
|
if (!this.debug) {
|
|
var pane = Pane(page)
|
|
pane.Field.style.position = "absolute"
|
|
pane.Field.style["background-color"] = "#ffffff00"
|
|
pane.Field.style["color"] = "red"
|
|
pane.ShowDialog(400, 400)
|
|
this.debug = pane
|
|
}
|
|
kit.AppendChild(this.debug.Field, [{text: [JSON.stringify(arguments.length==1? arguments[0]: arguments)]}])
|
|
},
|
|
oninput: function(event, local) {
|
|
var target = event.target
|
|
kit.History.add("key", (event.ctrlKey? "Control+": "")+(event.shiftKey? "Shift+": "")+event.key)
|
|
|
|
if (event.ctrlKey) {
|
|
if (typeof local == "function" && local(event)) {
|
|
event.stopPropagation()
|
|
event.preventDefault()
|
|
return true
|
|
}
|
|
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
|
|
|
|
}
|
|
event.stopPropagation()
|
|
return true
|
|
}
|
|
switch (event.key) {
|
|
case "Escape":
|
|
target.blur()
|
|
event.stopPropagation()
|
|
return true
|
|
default:
|
|
if (kit.HitText(target, "jk")) {
|
|
kit.DelText(target, target.selectionStart-2, 2)
|
|
target.blur()
|
|
event.stopPropagation()
|
|
return true
|
|
}
|
|
}
|
|
return false
|
|
},
|
|
onscroll: function(event, target, action) {
|
|
switch (event.key) {
|
|
case "h":
|
|
if (event.ctrlKey) {
|
|
target.scrollBy(-conf.scroll_x*10, 0)
|
|
} else {
|
|
target.scrollBy(-conf.scroll_x, 0)
|
|
}
|
|
break
|
|
case "H":
|
|
target.scrollBy(-document.body.scrollWidth, 0)
|
|
break
|
|
case "l":
|
|
if (event.ctrlKey) {
|
|
target.scrollBy(conf.scroll_x*10, 0)
|
|
} else {
|
|
target.scrollBy(conf.scroll_x, 0)
|
|
}
|
|
break
|
|
case "L":
|
|
target.scrollBy(document.body.scrollWidth, 0)
|
|
break
|
|
case "j":
|
|
if (event.ctrlKey) {
|
|
target.scrollBy(0, conf.scroll_y*10)
|
|
} else {
|
|
target.scrollBy(0, conf.scroll_y)
|
|
}
|
|
break
|
|
case "J":
|
|
target.scrollBy(0, document.body.scrollHeight)
|
|
break
|
|
case "k":
|
|
if (event.ctrlKey) {
|
|
target.scrollBy(0, -conf.scroll_y*10)
|
|
} else {
|
|
target.scrollBy(0, -conf.scroll_y)
|
|
}
|
|
break
|
|
case "K":
|
|
target.scrollBy(0, -document.body.scrollHeight)
|
|
break
|
|
}
|
|
},
|
|
|
|
initHeader: function(page, field, option, output) {
|
|
var state = {}, list = [], cb = function(event, item, value) {}
|
|
field.onclick = function(event) {
|
|
page.pane && page.pane.scrollTo(0,0)
|
|
}
|
|
return {
|
|
Order: function(value, order, cbs) {
|
|
state = value, list = order, cb = cbs || cb, this.Show()
|
|
},
|
|
Show: function() {
|
|
output.innerHTML = "", kit.AppendChild(output, [
|
|
{"view": ["title", "div", "shycontext"], click: function(event) {
|
|
cb(event, "title", "shycontext")
|
|
}},
|
|
{"view": ["state"], list: list.map(function(item) {return {text: [state[item], "div"], click: function(event) {
|
|
cb(event, item, state[item])
|
|
}}})},
|
|
])
|
|
},
|
|
State: function(name, value) {
|
|
if (value != undefined) {
|
|
state[name] = value, this.Show()
|
|
}
|
|
if (name != undefined) {
|
|
return state[name]
|
|
}
|
|
return state
|
|
},
|
|
}
|
|
},
|
|
initFooter: function(page, field, option, output) {
|
|
var state = {}, list = [], cb = function(event, item, value) {}
|
|
field.onclick = function(event) {
|
|
page.pane.scrollTo(0,page.pane.scrollHeight)
|
|
}
|
|
return {
|
|
Order: function(value, order, cbs) {
|
|
state = value, list = order, cb = cbs || cb, this.Show()
|
|
},
|
|
Show: function() {
|
|
output.innerHTML = "", kit.AppendChild(output, [
|
|
{"view": ["title", "div", "<a href='mailto:shylinux@163.com'>shylinux@163.com</>"]},
|
|
{"view": ["state"], list: list.map(function(item) {return {text: [item+":"+state[item], "div"], click: function(item) {
|
|
cb(event, item, state[item])
|
|
}}})},
|
|
])
|
|
},
|
|
State: function(name, value) {
|
|
if (value != undefined) {
|
|
state[name] = value, this.Show()
|
|
}
|
|
if (name != undefined) {
|
|
return state[name]
|
|
}
|
|
return state
|
|
},
|
|
}
|
|
},
|
|
initLogin: function(page, field, option, output) {
|
|
var ui = kit.AppendChild(option, [
|
|
{label: "username"}, {input: ["username"]}, {type: "br"},
|
|
{label: "password"}, {password: ["password"]}, {type: "br"},
|
|
{button: ["login", function(event) {
|
|
if (!ui.username.value) {
|
|
ui.username.focus()
|
|
return
|
|
}
|
|
if (!ui.password.value) {
|
|
ui.password.focus()
|
|
return
|
|
}
|
|
field.Pane.Run([ui.username.value, ui.password.value], function(msg) {
|
|
if (msg.result && msg.result[0]) {
|
|
field.Pane.ShowDialog(1, 1)
|
|
ctx.Cookie("sessid", msg.result[0])
|
|
kit.reload()
|
|
return
|
|
}
|
|
kit.alert("用户或密码错误")
|
|
})
|
|
}]},
|
|
{button: ["scan", function(event) {
|
|
scan(event, function(text) {
|
|
kit.alert(text)
|
|
})
|
|
}]},
|
|
{type: "br"},
|
|
{type: "img", data: {"src": "/chat/qrcode?text=hi"}}
|
|
])
|
|
return {
|
|
Exit: function() {
|
|
ctx.Cookie("sessid", "")
|
|
kit.reload()
|
|
|
|
},
|
|
}
|
|
},
|
|
Pane: Pane,
|
|
}
|
|
window.onload = function() {
|
|
document.querySelectorAll("body>fieldset").forEach(function(field) {
|
|
page.Pane(page, field)
|
|
})
|
|
page.init(page)
|
|
window.onresize = function(event) {
|
|
page.onlayout && page.onlayout(event)
|
|
}
|
|
// document.body.onkeydown = function(event) {
|
|
// page.onscroll && page.onscroll(event, window, "scroll")
|
|
// }
|
|
document.body.onkeydown = function(event) {
|
|
page.oncontrol && page.oncontrol(event, document.body, "control")
|
|
}
|
|
}
|
|
return page
|
|
}
|
|
function Pane(page, field) {
|
|
field = field || kit.AppendChild(document.body, [{type: "fieldset", list: [{view: ["option", "form"]}, {view: ["output"]}]}]).last
|
|
var option = field.querySelector("form.option")
|
|
var action = field.querySelector("div.action")
|
|
var output = field.querySelector("div.output")
|
|
|
|
var cache = []
|
|
var timer = ""
|
|
var list = [], last = -1
|
|
var conf = {}, conf_cb = {}
|
|
var name = option.dataset.componet_name
|
|
var pane = (page[field.dataset.init] || function() {
|
|
})(page, field, option, output) || {}; pane.__proto__ = {
|
|
__proto__: page,
|
|
Conf: function(key, value, cb) {
|
|
if (key == undefined) {
|
|
return conf
|
|
}
|
|
if (cb != undefined) {
|
|
conf_cb[key] = cb
|
|
}
|
|
if (value != undefined) {
|
|
var old = conf[key]
|
|
conf[key] = value
|
|
conf_cb[key] && conf_cb[key](value, old)
|
|
}
|
|
return conf[key]
|
|
},
|
|
ShowDialog: function(width, height) {
|
|
if (field.style.display != "block") {
|
|
page.dialog && page.dialog != field && page.dialog.style.display == "block" && page.dialog.Show()
|
|
page.dialog = field, field.style.display = "block", kit.ModifyView(field, {window: [width||80, height||200]})
|
|
return true
|
|
}
|
|
field.style.display = "none"
|
|
delete(page.dialog)
|
|
return false
|
|
},
|
|
Size: function(width, height) {
|
|
field.style.display = (width<=0 || height<=0)? "none": "block"
|
|
field.style.width = width+"px"
|
|
field.style.height = height+"px"
|
|
},
|
|
View: function(parent, type, line, key, cb) {
|
|
var ui = page.View(parent, type, line, key, cb)
|
|
if (type == "plugin" || type == "field") {
|
|
pane.Plugin(page, pane, ui.field)
|
|
}
|
|
return ui
|
|
},
|
|
Run: function(cmds, cb) {
|
|
ctx.Run(page, option.dataset, cmds, cb||this.ondaemon)
|
|
},
|
|
Runs: function(cmds, cb) {
|
|
pane.Run(cmds, function(msg) {
|
|
ctx.Table(msg, function(line, index) {
|
|
(cb||this.ondaemon)(line, index, msg)
|
|
})
|
|
})
|
|
},
|
|
Time: function(time, cmds, cb) {
|
|
function loop() {
|
|
ctx.Run(page, option.dataset, cmds, cb)
|
|
setTimeout(loop, time)
|
|
}
|
|
setTimeout(loop, time)
|
|
},
|
|
Times: function(time, cmds, cb) {
|
|
timer && clearTimeout(timer)
|
|
function loop() {
|
|
!pane.Stop() && ctx.Run(page, option.dataset, cmds, function(msg) {
|
|
ctx.Table(msg, function(line, index) {
|
|
cb(line, index, msg)
|
|
})
|
|
})
|
|
timer = setTimeout(loop, time)
|
|
}
|
|
time && (timer = setTimeout(loop, 10))
|
|
},
|
|
|
|
Clear: function() {
|
|
output.innerHTML = "", list = [], last = -1
|
|
},
|
|
Select: function(index) {
|
|
-1 < last && last < list.length && (list[last].className = "item")
|
|
last = index, list[index] && (list[index].className = "item select")
|
|
},
|
|
Append: function(type, line, key, which, cb) {
|
|
var index = list.length, ui = pane.View(output, line.type || type, line, key, function(event, cmds, cbs) {
|
|
pane.Select(index), pane.which.set(line[which])
|
|
typeof cb == "function" && cb(line, index, event, cmds, cbs)
|
|
})
|
|
list.push(ui.last), field.scrollBy(0, field.scrollHeight+100)
|
|
return ui
|
|
},
|
|
Update: function(cmds, type, key, which, first, cb) {
|
|
pane.Clear(), pane.Runs(cmds, function(line, index, msg) {
|
|
var ui = pane.Append(type, line, key, which, cb)
|
|
if (typeof first == "string") {
|
|
(line.key == first || line.name == first || line[which] == first) && ui.first.click()
|
|
} else {
|
|
first && index == 0 && ui.first.click()
|
|
}
|
|
})
|
|
},
|
|
Share: function(objs) {
|
|
objs = objs || {}
|
|
objs.componet_name = option.dataset.componet_name
|
|
objs.componet_group = option.dataset.componet_group
|
|
return ctx.Share(objs)
|
|
},
|
|
Save: function(name, output) {
|
|
var temp = document.createDocumentFragment()
|
|
while (output.childNodes.length>0) {
|
|
var item = output.childNodes[0]
|
|
item.parentNode.removeChild(item)
|
|
temp.appendChild(item)
|
|
}
|
|
cache[name] = temp
|
|
return name
|
|
},
|
|
Back: function(name, output) {
|
|
if (!cache[name]) {
|
|
return
|
|
}
|
|
while (cache[name].childNodes.length>0) {
|
|
item = cache[name].childNodes[0]
|
|
item.parentNode.removeChild(item)
|
|
output.appendChild(item)
|
|
}
|
|
delete(cache[name])
|
|
return name
|
|
},
|
|
which: page.Sync(name), Listen: {},
|
|
Action: {}, Button: [], Plugin: Plugin,
|
|
}
|
|
|
|
for (var k in pane.Listen) {
|
|
page.Sync(k).change(pane.Listen[k])
|
|
}
|
|
pane.Button && pane.Button.length > 0 && (kit.InsertChild(field, output, "div", pane.Button.map(function(value) {
|
|
return typeof value == "object"? {className: value[0], select: [value.slice(1), function(event) {
|
|
value = event.target.value
|
|
typeof pane.Action == "function"? pane.Action(value, event): pane.Action[value](event, value)
|
|
}]}: value == ""? {view: ["space"]} :value == "br"? {type: "br"}: {button: [value, function(event) {
|
|
typeof pane.Action == "function"? pane.Action(value, event): pane.Action[value](event, value)
|
|
}]}
|
|
})).className="action "+name)
|
|
option.onsubmit = function(event) {
|
|
event.preventDefault()
|
|
};
|
|
return page[name] = field, pane.Field = field, field.Pane = pane
|
|
}
|
|
function Plugin(page, pane, field) {
|
|
var option = field.querySelector("form.option")
|
|
var output = field.querySelector("div.output")
|
|
|
|
var count = 0
|
|
var plugin = field.Script || {}; plugin.__proto__ = {
|
|
__proto__: pane,
|
|
Append: function(item, name) {
|
|
name = item.name || ""
|
|
|
|
item.onfocus = function(event) {
|
|
page.pane = pane.Field, page.plugin = field, page.input = event.target
|
|
}
|
|
item.onkeyup = function(event) {
|
|
page.oninput(event, function(event) {
|
|
switch (event.key) {
|
|
case "w":
|
|
break
|
|
default:
|
|
return false
|
|
}
|
|
event.stopPropagation()
|
|
event.preventDefault()
|
|
return true
|
|
})
|
|
}
|
|
item.onkeydown = function(event) {
|
|
page.oninput(event, function(event) {
|
|
switch (event.key) {
|
|
case "w":
|
|
break
|
|
case "p":
|
|
action.Back()
|
|
break
|
|
case "i":
|
|
var next = field.nextSibling;
|
|
next && next.Plugin.Select()
|
|
break
|
|
case "o":
|
|
var prev = field.previousSibling;
|
|
prev && prev.Plugin.Select()
|
|
break
|
|
case "c":
|
|
output.innerHTML = ""
|
|
break
|
|
case "r":
|
|
output.innerHTML = ""
|
|
case "j":
|
|
plugin.Runs(event)
|
|
break
|
|
case "l":
|
|
page.action.scrollTo(0, field.offsetTop)
|
|
break
|
|
case "b":
|
|
plugin.Append(item).focus()
|
|
break
|
|
case "m":
|
|
plugin.Clone().plugin.Plugin.Select()
|
|
break
|
|
default:
|
|
return false
|
|
}
|
|
event.stopPropagation()
|
|
event.preventDefault()
|
|
return true
|
|
})
|
|
item.type != "textarea" && event.key == "Enter" && plugin.Check(action)
|
|
}
|
|
|
|
var input = {type: "input", name: name, data: item}
|
|
switch (item.type) {
|
|
case "button":
|
|
item.onclick = function(event) {
|
|
action[item.click]? action[item.click](event, item, option, field):
|
|
plugin[item.click]? plugin[item.click](event, item, option, field): plugin.Runs(event)
|
|
}
|
|
break
|
|
|
|
case "select":
|
|
input.type = "select", input.list = item.values.map(function(value) {
|
|
return {type: "option", value: value, inner: value}
|
|
}), item.onchange = function(event) {
|
|
plugin.Check(action)
|
|
}
|
|
|
|
case "textarea":
|
|
if (item.type == "textarea") {
|
|
input.type = "textarea"
|
|
item.style = "height:300px;"+"width:"+(option.clientWidth-20)+"px"
|
|
}
|
|
|
|
default:
|
|
if (item.type == "text") {
|
|
item.onclick = function(event) {
|
|
if (event.ctrlKey) {
|
|
action.value = kit.History.get("txt", -1).data.trim()
|
|
}
|
|
}
|
|
item.ondblclick = function(event) {
|
|
action.value = kit.History.get("txt", -1).data.trim()
|
|
}
|
|
}
|
|
args && count < args.length && (item.value = args[count++]||item.value||"")
|
|
item.className = "args"
|
|
}
|
|
|
|
var ui = kit.AppendChild(option, [{view: [item.view||""], list: [{type: "label", inner: item.label||""}, input]}])
|
|
var action = ui[name] || {}
|
|
|
|
action.History = [""], action.Goto = function(value, cb) {
|
|
action.History.push(action.value = value)
|
|
plugin.Check(action, cb)
|
|
return value
|
|
}, action.Back = function() {
|
|
action.History.pop(), action.History.length > 0 && action.Goto(action.History.pop())
|
|
};
|
|
|
|
(typeof item.imports == "object"? item.imports: typeof item.imports == "string"? [item.imports]: []).forEach(function(imports) {
|
|
page.Sync(imports).change(function(value) {
|
|
(action.value = value) && item.action == "auto" && plugin.Runs(window.event)
|
|
})
|
|
})
|
|
item.type == "button" && item.action == "auto" && plugin.Runs(window.event, function() {
|
|
var td = output.querySelector("td")
|
|
td && td.click()
|
|
})
|
|
return action
|
|
},
|
|
Remove: function() {
|
|
var list = option.querySelectorAll(".args")
|
|
list.length > 0 && option.removeChild(list[list.length-1].parentNode)
|
|
},
|
|
Select: function() {
|
|
option.querySelectorAll("input")[1].focus()
|
|
},
|
|
Format: function() {
|
|
field.Meta.args = arguments.length > 0? kit.List(arguments):
|
|
kit.Selector(option, ".args", function(item) {return item.value})
|
|
return JSON.stringify(field.Meta)
|
|
},
|
|
Reveal: function(msg) {
|
|
return msg.append && msg.append[0]? ["table", JSON.stringify(ctx.Tables(msg))]: ["code", msg.result? msg.result.join(""): ""]
|
|
},
|
|
Delete: function() {
|
|
page.plugin = field.previousSibling
|
|
field.parentNode.removeChild(field)
|
|
},
|
|
Clone: function() {
|
|
field.Meta.args = kit.Selector(option, "input.args", function(item, index) {
|
|
return item.value
|
|
})
|
|
return pane.View(field.parentNode, "plugin", field.Meta, [], field.Run).field.Plugin
|
|
},
|
|
Check: function(target, cb) {
|
|
option.querySelectorAll(".args").forEach(function(item, index, list) {
|
|
item == target && (index == list.length-1? plugin.Runs(event, cb): page.plugin == field && list[index+1].focus())
|
|
})
|
|
},
|
|
Runs: function(event, cb) {
|
|
page.footer.Pane.State("ncmd", kit.History.get("cmd").length)
|
|
var args = kit.Selector(option, ".args", function(item, index) {
|
|
return item.value
|
|
})
|
|
var show = true
|
|
setTimeout(function() {
|
|
show && page.ontoast(kit.Format(args||["running..."]), meta.name, -1)
|
|
}, 1000)
|
|
event.Plugin = plugin, field.Run(event, args, function(msg) {
|
|
show = false, page.ontoast("")
|
|
output.innerHTML = ""
|
|
plugin.ondaemon[display.deal||"table"](msg)
|
|
typeof cb == "function" && cb(msg)
|
|
})
|
|
},
|
|
Delay: function(time, event, text) {
|
|
page.ontoast(text, "", -1)
|
|
setTimeout(function() {
|
|
plugin.Runs(event)
|
|
page.ontoast("")
|
|
}, time)
|
|
return time
|
|
},
|
|
Clear: function() {
|
|
output.innerHTML = ""
|
|
},
|
|
ondaemon: {
|
|
void: function(msg) {},
|
|
table: function(msg) {
|
|
!display.hide_append && msg.append && kit.OrderTable(kit.AppendTable(kit.AppendChild(output, "table"), ctx.Table(msg), msg.append), exports[1], function(event, value, name, line) {
|
|
page.Sync("plugin_"+exports[0]).set(plugin.onexport[exports[2]||""](value, name, line))
|
|
});
|
|
(display.show_result || !msg.append) && msg.result && kit.OrderCode(kit.AppendChild(output, [{view: ["code", "div", msg.Results()]}]).first)
|
|
},
|
|
trend: function(msg) {
|
|
var id = "canvas"+page.ID()
|
|
var width = output.clientWidth-40, height = 230, space = 10
|
|
var action = kit.AppendChild(output, [{view: ["action"]}]).last
|
|
|
|
var item = kit.AppendChild(output, [{view: ["draw", "canvas"], data: {id: id, width: width+20, height: height+20}}]).last
|
|
var point = kit.AppendChild(output, [{text: ["point"]}]).last
|
|
canvas = item.getContext("2d")
|
|
|
|
cc = Canvas(canvas, width, height, space, msg).drawData()
|
|
for (var k in cc.button) {
|
|
kit.AppendChild(action, [{button: [k, cc.button[k]]}])
|
|
}
|
|
item.onclick = function(event) {
|
|
cc.pushPoint(point, event.offsetX-space, height-event.offsetY+space, event.clientX, event.clientY)
|
|
}
|
|
item.onmousemove = function(event) {
|
|
cc.movePoint(point, event.offsetX-space, height-event.offsetY+space, event.clientX, event.clientY)
|
|
}
|
|
},
|
|
point: function(msg) {
|
|
var id = "canvas"+page.ID()
|
|
var canvas = kit.AppendChild(output, [{view: ["draw", "canvas"], data: {id: id, width: output.clientWidth-15}}]).last.getContext("2d")
|
|
ctx.Table(msg, function(line) {
|
|
var meta = JSON.parse(line.meta||"{}")
|
|
switch (line.type) {
|
|
case "begin":
|
|
canvas.beginPath()
|
|
break
|
|
|
|
case "circle":
|
|
canvas.arc(parseInt(meta.x), parseInt(meta.y), parseInt(meta.r), 0, Math.PI*2, true)
|
|
break
|
|
|
|
case "stroke":
|
|
canvas.strokeStyle = meta.color
|
|
canvas.lineWidth = parseInt(meta.width)
|
|
canvas.stroke()
|
|
break
|
|
}
|
|
})
|
|
},
|
|
map: function(msg) {
|
|
kit.AppendChild(output, [{img: ["https://gss0.bdstatic.com/8bo_dTSlRMgBo1vgoIiO_jowehsv/tile/?qt=vtile&x=25310&y=9426&z=17&styles=pl&scaler=2&udt=20190622"]}])
|
|
},
|
|
},
|
|
onexport: {
|
|
"": function(value, name) {
|
|
return value
|
|
},
|
|
you: function(value, name, line) {
|
|
window.event.Plugin = plugin
|
|
line.you && name == "status" && (line.status == "start"? function() {
|
|
plugin.Delay(3000, window.event, line.you+" stop...") && field.Run(window.event, [line.you, "stop"])
|
|
}(): field.Run(window.event, [line.you], function(msg) {
|
|
plugin.Delay(3000, window.event, line.you+" start...")
|
|
}))
|
|
return name == "status" || line.status == "stop" ? undefined: line.you
|
|
},
|
|
pod: function(value, name, line) {
|
|
if (option[exports[0]].value) {
|
|
return option[exports[0]].value+"."+line.pod
|
|
}
|
|
return line.pod
|
|
},
|
|
dir: function(value, name, line) {
|
|
if (name != "path") {
|
|
value = line.path
|
|
}
|
|
if (value.endsWith("/")) {
|
|
option.dir.Goto(value)
|
|
return value
|
|
}
|
|
|
|
var deal = display.deal
|
|
var back = option.dir.value
|
|
display.deal = "void"
|
|
option.dir.value = value
|
|
plugin.Runs(window.event, function() {
|
|
display.deal = deal
|
|
option.dir.value = back
|
|
})
|
|
},
|
|
},
|
|
|
|
Location: function(event) {
|
|
output.className = "output long"
|
|
page.getLocation(function(res) {
|
|
field.Run(event, [parseInt(res.latitude*1000000+1400)/1000000.0, parseInt(res.longitude*1000000+6250)/1000000.0].concat(
|
|
kit.Selector(option, ".args", function(item) {return item.value}))
|
|
, plugin.ondaemon)
|
|
})
|
|
},
|
|
init: function() {},
|
|
}
|
|
|
|
var meta = field.Meta
|
|
var args = meta.args || []
|
|
var display = JSON.parse(meta.display||'{}')
|
|
var exports = JSON.parse(meta.exports||'["",""]')
|
|
JSON.parse(meta.inputs || "[]").map(plugin.Append)
|
|
|
|
plugin.init(page, pane, field, option, output)
|
|
return page[field.id] = pane[field.id] = plugin.Field = field, field.Plugin = plugin
|
|
}
|
|
function Canvas(canvas, width, height, space, msg) {
|
|
var type = "weight"
|
|
var shape = "drawLine"
|
|
var what = {
|
|
reset: function() {
|
|
canvas.resetTransform()
|
|
canvas.clearRect(0, 0, width+20*space, height+20*space)
|
|
},
|
|
drawAxies: function(space, style) {
|
|
this.reset()
|
|
canvas.setTransform(1, 0, 0, -1, space, height)
|
|
|
|
canvas.beginPath()
|
|
canvas.moveTo(-10, 0)
|
|
canvas.lineTo(width+space, 0)
|
|
canvas.moveTo(0, -10)
|
|
canvas.lineTo(0, height+space)
|
|
canvas.strokeStyle = style||"gray"
|
|
canvas.lineWidth = 2
|
|
canvas.stroke()
|
|
return this
|
|
},
|
|
drawXLabel: function(step) {
|
|
canvas.beginPath()
|
|
for (var pos = step; pos < width; pos += step) {
|
|
canvas.moveTo(pos, 0)
|
|
canvas.lineTo(pos, -5)
|
|
}
|
|
canvas.strokeStyle = "red"
|
|
canvas.lineWidth = 2
|
|
canvas.stroke()
|
|
return this
|
|
},
|
|
drawYGrid: function(step) {
|
|
canvas.beginPath()
|
|
for (var pos = step; pos < height; pos += step) {
|
|
canvas.moveTo(-5, pos)
|
|
canvas.lineTo(width, pos)
|
|
}
|
|
canvas.strokeStyle = "#999"
|
|
canvas.lineWidth = 1
|
|
canvas.stroke()
|
|
return this
|
|
},
|
|
drawData: function() {
|
|
var col = msg.append.length
|
|
var row = msg[msg.append[0]].length
|
|
var step = width / (row - 1)
|
|
|
|
switch (type) {
|
|
case "trend":
|
|
this.drawAxies(10).drawXLabel(step)
|
|
canvas.beginPath()
|
|
msg.append.forEach(function(key) {
|
|
var max = 0
|
|
msg[key].forEach(function(value, index, array) {
|
|
parseInt(value) > max && (max = parseInt(value))
|
|
})
|
|
msg[key].forEach(function(value, index, array) {
|
|
if (index == 0) {
|
|
canvas.moveTo(0, value/max*height)
|
|
} else {
|
|
canvas.lineTo(step*index, value/max*height)
|
|
}
|
|
})
|
|
})
|
|
canvas.strokeStyle = "black"
|
|
canvas.lineWidth = 1
|
|
canvas.stroke()
|
|
break
|
|
|
|
case "weight":
|
|
this.reset()
|
|
|
|
var nline = 0
|
|
msg.append.forEach(function(key, index) {
|
|
!isNaN(parseInt(msg[key][0])) && nline++
|
|
})
|
|
var space = width / (nline+1)
|
|
|
|
var order = 0
|
|
msg.append.forEach(function(key, index) {
|
|
if (isNaN(parseInt(msg[key][0]))) {
|
|
return
|
|
}
|
|
order++
|
|
|
|
canvas.resetTransform()
|
|
canvas.setTransform(1, 0, 0, -1, space*order, height/2)
|
|
|
|
var total = 0
|
|
msg[key].forEach(function(value, index, array) {
|
|
total += parseInt(value)/1
|
|
})
|
|
var sum = 0
|
|
|
|
msg[key].forEach(function(value, index, array) {
|
|
value = parseInt(parseInt(value)/1)
|
|
if ((value)/total < 0.01) {
|
|
return
|
|
}
|
|
canvas.beginPath()
|
|
canvas.moveTo(0, 0)
|
|
var a = sum/total*Math.PI*2
|
|
var b = (sum+value)/total*Math.PI*2
|
|
kit.Log(a, b)
|
|
canvas.arc(0, 0, (space/2)-20, a, b, false)
|
|
canvas.closePath()
|
|
canvas.strokeStyle = "black"
|
|
canvas.lineWidth = 1
|
|
canvas.stroke()
|
|
sum+=value
|
|
})
|
|
})
|
|
break
|
|
}
|
|
return this
|
|
},
|
|
view: [],
|
|
drawView: function() {
|
|
var that = this
|
|
this.view.forEach(function(view) {
|
|
that[view.type](view.meta)
|
|
})
|
|
},
|
|
drawPoint: function(meta) {
|
|
canvas.save()
|
|
canvas.translate(meta.x0, meta.y0)
|
|
canvas.beginPath()
|
|
canvas.moveTo(-10, 0)
|
|
canvas.lineTo(10, 0)
|
|
canvas.moveTo(0, -10)
|
|
canvas.lineTo(0, 10)
|
|
canvas.strokeStyle = meta.style
|
|
canvas.stroke()
|
|
canvas.restore()
|
|
return meta
|
|
},
|
|
drawLine: function(meta) {
|
|
canvas.save()
|
|
canvas.beginPath()
|
|
canvas.moveTo(meta.x0, meta.y0)
|
|
canvas.lineTo(meta.x1, meta.y1)
|
|
canvas.strokeStyle = meta.style
|
|
canvas.stroke()
|
|
canvas.restore()
|
|
return meta
|
|
},
|
|
drawRect: function(meta) {
|
|
canvas.save()
|
|
canvas.strokeStyle = meta.style
|
|
canvas.strokeRect(meta.x0, meta.y0, meta.x1-meta.x0, meta.y1-meta.y0)
|
|
canvas.restore()
|
|
return meta
|
|
},
|
|
drawCircle: function(meta) {
|
|
var r = Math.sqrt((meta.x1-meta.x0)*(meta.x1-meta.x0)+(meta.y1-meta.y0)*(meta.y1-meta.y0))
|
|
canvas.save()
|
|
canvas.beginPath()
|
|
canvas.arc(meta.x0, meta.y0, r, 0, Math.PI*2, true)
|
|
canvas.strokeStyle = meta.style
|
|
canvas.stroke()
|
|
canvas.restore()
|
|
return meta
|
|
},
|
|
drawEllipse: function(meta) {
|
|
var r0 = Math.abs(meta.x1-meta.x0)
|
|
var r1 = Math.abs(meta.y1-meta.y0)
|
|
|
|
canvas.save()
|
|
canvas.beginPath()
|
|
canvas.translate(meta.x0, meta.y0)
|
|
|
|
if (r1 > r0) {
|
|
canvas.scale(1, r1/r0)
|
|
canvas.arc(0, 0, r1, 0, Math.PI*2, true)
|
|
//
|
|
// canvas.scale((meta.x1-meta.x0)/(meta.y1-meta.y0), (meta.y1-meta.y0)/(meta.x1-meta.x0))
|
|
// canvas.arc(0, 0, Math.sqrt((meta.y1-meta.y0)*(meta.x1-meta.x0)), 0, Math.PI*2, true)
|
|
} else {
|
|
canvas.scale(r0/r1, 1)
|
|
canvas.arc(0, 0, r0, 0, Math.PI*2, true)
|
|
}
|
|
|
|
canvas.strokeStyle = meta.style
|
|
canvas.stroke()
|
|
canvas.restore()
|
|
return meta
|
|
},
|
|
shape: "drawLine",
|
|
movePoint: function(point, x, y) {
|
|
if (this.begin) {
|
|
this.drawData()
|
|
this.drawView()
|
|
this[shape]({x0: this.begin.x, y0: this.begin.y, x1: x, y1: y})
|
|
// this.drawRect({x0: this.begin.x, y0: this.begin.y, x1: x, y1: y, style: "red"})
|
|
}
|
|
point.innerHTML = x+","+y
|
|
},
|
|
pushPoint: function(point, x, y) {
|
|
if (this.begin) {
|
|
this.view.push({type: "drawPoint", meta: this["drawPoint"]({x0: x, y0: y, style: "red"})})
|
|
this.view.push({type: shape, meta: this[shape]({x0: this.begin.x, y0: this.begin.y, x1: x, y1: y})})
|
|
delete(this.begin)
|
|
} else {
|
|
this.view.push({type: "drawPoint", meta: this["drawPoint"]({x0: x, y0: y, style: "red"})})
|
|
this.begin = {x: x, y:y}
|
|
}
|
|
},
|
|
button: {
|
|
"trend": function() {
|
|
type = "trend"
|
|
what.drawData()
|
|
},
|
|
"weight": function() {
|
|
type = "weight"
|
|
what.drawData()
|
|
},
|
|
"line": function() {
|
|
shape = "drawLine"
|
|
},
|
|
"rect": function() {
|
|
shape = "drawRect"
|
|
},
|
|
"circle": function() {
|
|
shape = "drawCircle"
|
|
},
|
|
"ellipse": function() {
|
|
shape = "drawEllipse"
|
|
},
|
|
},
|
|
}
|
|
return what
|
|
}
|