forked from x/ContextOS
552 lines
19 KiB
JavaScript
552 lines
19 KiB
JavaScript
function copy_to_clipboard(text) {
|
|
var clipboard = document.querySelector(".clipboard")
|
|
clipboard.value = text
|
|
clipboard.select()
|
|
document.execCommand("copy")
|
|
clipboard.blur()
|
|
|
|
var clipstack = document.querySelector("#clipstack")
|
|
insert_child(clipstack, "option").value = text
|
|
clipstack.childElementCount > 3 && clipstack.removeChild(clipstack.lastElementChild)
|
|
}
|
|
|
|
function send_command(form, cb) {
|
|
var data = {}
|
|
for (var key in form.dataset) {
|
|
data[key] = form.dataset[key]
|
|
}
|
|
for (var i = 0; i < form.length; i++) {
|
|
data[form[i].name] = form[i].value
|
|
}
|
|
|
|
context.GET("", data, function(msg) {
|
|
msg = msg[0]
|
|
|
|
var name = data["componet_name_alias"] || data["componet_name"]
|
|
|
|
var result = document.querySelector("code.result."+name+" pre")
|
|
var append = document.querySelector("table.append."+name)
|
|
if (msg && (msg.append || msg.result)) {
|
|
result && (result.innerHTML = (msg.result || []).join(""))
|
|
append && (append.innerHTML = "")
|
|
}
|
|
|
|
if (append && msg && msg.append) {
|
|
var tr = append_child(append, "tr")
|
|
for (var i in msg.append) {
|
|
append_child(tr, "th", msg.append[i])
|
|
}
|
|
|
|
var ncol = msg.append.length
|
|
var nrow = msg[msg.append[0]].length
|
|
for (var i = 0; i < nrow; i ++) {
|
|
var tr = append_child(append, "tr")
|
|
for (var k in msg.append) {
|
|
append_child(tr, "td", msg[msg.append[k]][i])
|
|
}
|
|
}
|
|
}
|
|
|
|
typeof(cb) == "function" && cb(msg)
|
|
})
|
|
}
|
|
|
|
function check_argument(form, target) {
|
|
for (var i = 0; i < form.length-1; i++) {
|
|
if (form[i] == target) {
|
|
if (form[i+1].type == "button") {
|
|
form[i+1].click()
|
|
} else {
|
|
form[i+1].focus()
|
|
}
|
|
return false
|
|
}
|
|
}
|
|
send_command(form)
|
|
}
|
|
|
|
var ncommand = 3
|
|
function add_fieldset() {
|
|
var name = "command"+ncommand++
|
|
|
|
var fieldset = append_child(document.querySelector("body"), "fieldset")
|
|
append_child(fieldset, "legend", {"innerText": name})
|
|
|
|
var option = append_child(fieldset, "form", {
|
|
"className": "option "+name,
|
|
"dataset": {
|
|
"componet_group": "index",
|
|
"componet_name": "command",
|
|
"componet_name_alias": name,
|
|
"componet_name_order": ncommand-1,
|
|
}
|
|
})
|
|
|
|
append_child(option, "input", {"style": {"display": "none"}})
|
|
|
|
append_child(option, "input", {
|
|
"name": "cmd",
|
|
"className": "cmd",
|
|
"onkeyup": function(event){onaction(event, "input")}
|
|
}).focus()
|
|
|
|
var append = append_child(fieldset, "table", {"className": "append "+name})
|
|
append_child(append_child(fieldset, "code", {"className": "result "+name}), "pre")
|
|
}
|
|
|
|
function onaction(event, action) {
|
|
switch (action) {
|
|
case "submit":
|
|
break
|
|
case "click":
|
|
if (event.target.nodeName == "INPUT") {
|
|
if (event.altKey) {
|
|
var board = document.querySelector(".clipboard")
|
|
event.target.value = board.value
|
|
check_argument(event.target.form, event.target)
|
|
}
|
|
}
|
|
break
|
|
case "command":
|
|
send_command(event.target.form, function() {
|
|
if (event.target.value == "login") {
|
|
location.reload()
|
|
}
|
|
})
|
|
break
|
|
case "input":
|
|
switch (event.key) {
|
|
case "Enter":
|
|
var clistack = document.querySelector("#clistack")
|
|
if (!clistack) {
|
|
break
|
|
}
|
|
var history = JSON.parse(event.target.dataset["history"] || "[]")
|
|
if (history.length == 0 || event.target.value != history[history.length-1]) {
|
|
history.push(event.target.value)
|
|
insert_child(clistack, "option").value = event.target.value
|
|
}
|
|
check_argument(event.target.form, event.target)
|
|
event.target.dataset["history"] = JSON.stringify(history)
|
|
event.target.dataset["history_last"] = history.length-1
|
|
console.log(history.length)
|
|
break
|
|
case "Escape":
|
|
if (event.target.value) {
|
|
event.target.value = ""
|
|
} else {
|
|
event.target.blur()
|
|
}
|
|
break
|
|
case "w":
|
|
if (event.ctrlKey) {
|
|
var value = event.target.value
|
|
var space = value.length > 0 && value[value.length-1] == ' '
|
|
for (var i = value.length-1; i > -1; i--) {
|
|
if (space) {
|
|
if (value[i] != ' ') {
|
|
break
|
|
}
|
|
} else {
|
|
if (value[i] == ' ') {
|
|
break
|
|
}
|
|
}
|
|
}
|
|
event.target.value = value.substr(0, i+1)
|
|
break
|
|
}
|
|
case "u":
|
|
if (event.ctrlKey && event.key == "u") {
|
|
event.target.value = ""
|
|
break
|
|
}
|
|
case "p":
|
|
if (event.ctrlKey && event.key == "p") {
|
|
var history = JSON.parse(event.target.dataset["history"] || "[]")
|
|
var last = event.target.dataset["history_last"]
|
|
console.log(last)
|
|
event.target.value = history[last--]
|
|
event.target.dataset["history_last"] = (last + history.length) % history.length
|
|
return false
|
|
break
|
|
}
|
|
case "n":
|
|
if (event.ctrlKey && event.key == "n") {
|
|
var history = JSON.parse(event.target.dataset["history"] || "[]")
|
|
var last = event.target.dataset["history_last"]
|
|
last = (last +1) % history.length
|
|
console.log(last)
|
|
event.target.value = history[last]
|
|
event.target.dataset["history_last"] = last
|
|
break
|
|
}
|
|
case "j":
|
|
if (event.ctrlKey && event.key == "j") {
|
|
var history = JSON.parse(event.target.dataset["history"] || "[]")
|
|
if (history.length == 0 || event.target.value != history[history.length-1]) {
|
|
history.push(event.target.value)
|
|
var clistack = document.querySelector("#clistack")
|
|
insert_child(clistack, "option").value = event.target.value
|
|
}
|
|
check_argument(event.target.form, event.target)
|
|
event.target.dataset["history"] = JSON.stringify(history)
|
|
event.target.dataset["history_last"] = history.length-1
|
|
break
|
|
}
|
|
case "v":
|
|
if (event.ctrlKey && event.key == "v") {
|
|
add_fieldset()
|
|
}
|
|
case "q":
|
|
if (event.ctrlKey && event.key == "q") {
|
|
var can_remove = false
|
|
var order = -1
|
|
for (var p = event.target; p.parentElement && p.tagName != "FIELDSET"; p = p.parentElement) {
|
|
if (p.tagName == "FORM" && p.dataset["componet_name_alias"]) {
|
|
can_remove = true
|
|
order = p.dataset["componet_name_order"]
|
|
}
|
|
}
|
|
if (p && can_remove) {
|
|
p.parentElement.removeChild(p)
|
|
}
|
|
|
|
for (;order < ncommand; order++) {
|
|
var input = document.querySelector("form.option.command"+order+" input[name=cmd]")
|
|
if (input) {
|
|
input.focus()
|
|
return
|
|
}
|
|
}
|
|
for (;order > 0; order--) {
|
|
var input = document.querySelector("form.option.command"+order+" input[name=cmd]")
|
|
if (input) {
|
|
input.focus()
|
|
ncommand = order+1
|
|
return
|
|
}
|
|
}
|
|
}
|
|
default:
|
|
console.log(event)
|
|
if (event.target.dataset["last_char"] == "j" && event.key == "k") {
|
|
event.target.value = event.target.value.substr(0, event.target.value.length-2)
|
|
check_argument(event.target.form, event.target)
|
|
event.target.dataset["history"] = JSON.stringify(history)
|
|
event.target.dataset["history_last"] = history.length-1
|
|
console.log(history.length)
|
|
break
|
|
// if (event.target.value) {
|
|
// event.target.value = ""
|
|
// } else {
|
|
// event.target.blur()
|
|
// }
|
|
}
|
|
event.target.dataset["last_char"] = event.key
|
|
}
|
|
break
|
|
case "keymap":
|
|
break
|
|
switch (event.key) {
|
|
case "g":
|
|
document.querySelectorAll("form.option label.keymap").forEach(function(item) {
|
|
item.className = (item.className == "keymap show")? "keymap hide": "keymap show"
|
|
})
|
|
break
|
|
default:
|
|
if (inputs[event.key]) {
|
|
inputs[event.key].focus()
|
|
}
|
|
break
|
|
}
|
|
break
|
|
case "copy":
|
|
copy_to_clipboard(event.target.innerText)
|
|
break
|
|
}
|
|
}
|
|
|
|
var inputs = {}
|
|
var ninput = 0
|
|
var keymap = ['a', 'b', 'c']
|
|
function init_option() {
|
|
inputs = {}
|
|
ninput = 0
|
|
keymap =[]
|
|
for (var i = 97; i < 123; i++) {
|
|
if (i == 103) {
|
|
continue
|
|
}
|
|
keymap.push(String.fromCharCode(i))
|
|
}
|
|
|
|
document.querySelectorAll("form.option input").forEach(function(input) {
|
|
if (ninput < keymap.length && input.style.display != "none") {
|
|
input.title = "keymap: "+keymap[ninput]
|
|
input.dataset["keymap"] = keymap[ninput]
|
|
insert_before(input, "label", "("+keymap[ninput]+")").className = "keymap"
|
|
inputs[keymap[ninput++]] = input
|
|
}
|
|
})
|
|
}
|
|
function init_append(event) {
|
|
var append = document.querySelectorAll("table.append").forEach(function(item) {
|
|
item.onclick = function(event) {
|
|
if (event.target.tagName == "TD") {
|
|
copy_to_clipboard(event.target.innerText)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
function init_result(event) {
|
|
var result = document.querySelectorAll("code.result pre").forEach(function(item) {
|
|
item.onselect = function(event) {
|
|
console.log(event)
|
|
|
|
}
|
|
item.onclick = function(event) {
|
|
console.log(event)
|
|
return
|
|
copy_to_clipboard(event.target.innerText)
|
|
}
|
|
})
|
|
}
|
|
function init_download(event) {
|
|
var append = document.querySelector("table.append.dir")
|
|
if (!append) {
|
|
return
|
|
}
|
|
insert_before(append, "input", {
|
|
"type": "button",
|
|
"value": "root",
|
|
"onclick": function(event) {
|
|
option["dir"].value = ""
|
|
context.Cookie("download_dir", option["dir"].value)
|
|
send_command(option)
|
|
return true
|
|
}
|
|
})
|
|
insert_before(append, "input", {
|
|
"type": "button",
|
|
"value": "back",
|
|
"onclick": function(event) {
|
|
var path = option["dir"].value.split("/")
|
|
while (path.pop() == "") {}
|
|
option["dir"].value = path.join("/")+(path.length? "/": "")
|
|
context.Cookie("download_dir", option["dir"].value)
|
|
send_command(option)
|
|
return true
|
|
}
|
|
})
|
|
|
|
var option = document.querySelector("form.option.dir")
|
|
var sort_order = option["sort_order"]
|
|
var sort_field = option["sort_field"]
|
|
sort_field.innerHTML = ""
|
|
sort_field.onchange = function(event) {
|
|
switch (event.target.selectedOptions[0].value) {
|
|
case "filename":
|
|
case "type":
|
|
sort_order.value = (sort_order.value == "str")? "str_r": "str"
|
|
break
|
|
case "line":
|
|
case "size":
|
|
sort_order.value = (sort_order.value == "int")? "int_r": "int"
|
|
break
|
|
case "time":
|
|
sort_order.value = (sort_order.value == "time")? "time_r": "time"
|
|
break
|
|
}
|
|
send_command(option)
|
|
}
|
|
|
|
var th = append.querySelectorAll("th")
|
|
for (var i = 0; i < th.length; i++) {
|
|
var value = th[i].innerText.trim()
|
|
var opt = append_child(sort_field, "option", {
|
|
"value": value, "innerText": value,
|
|
})
|
|
}
|
|
|
|
(option["dir"].value = context.Search("download_dir")) && send_command(option)
|
|
|
|
append.onchange = append.onclick = function(event) {
|
|
console.log(event)
|
|
if (event.target.tagName == "TD") {
|
|
copy_to_clipboard(event.target.innerText.trim())
|
|
var name = event.target.innerText.trim()
|
|
if (option["dir"].value && !option["dir"].value.endsWith("/")) {
|
|
option["dir"].value += "/"+name
|
|
} else {
|
|
option["dir"].value += name
|
|
}
|
|
if (name.endsWith(".py")) {
|
|
var cmd = document.querySelector("form.option.command input[name=cmd]")
|
|
cmd.value = "run "+ name
|
|
cmd.focus()
|
|
if (!event.altKey) {
|
|
return
|
|
}
|
|
}
|
|
if (name.endsWith("/")) {
|
|
context.Cookie("download_dir", option["dir"].value)
|
|
}
|
|
} else if (event.target.tagName == "TH") {
|
|
option["sort_field"].value = event.target.innerText.trim()
|
|
|
|
switch (event.target.innerText.trim()) {
|
|
case "filename":
|
|
case "type":
|
|
sort_order.value = (sort_order.value == "str")? "str_r": "str"
|
|
break
|
|
case "line":
|
|
case "size":
|
|
sort_order.value = (sort_order.value == "int")? "int_r": "int"
|
|
break
|
|
case "time":
|
|
sort_order.value = (sort_order.value == "time")? "time_r": "time"
|
|
break
|
|
}
|
|
}
|
|
|
|
send_command(option, function(){
|
|
option["dir"].value = context.Cookie("download_dir")
|
|
})
|
|
}
|
|
}
|
|
function init_context() {
|
|
var append = document.querySelector("table.append.ctx")
|
|
if (!append) {
|
|
return
|
|
}
|
|
var option = document.querySelector("form.option.ctx")
|
|
insert_before(append, "input", {
|
|
"type": "button",
|
|
"value": "ctx",
|
|
"onclick": function(event) {
|
|
option["ctx"].value = "ctx"
|
|
send_command(option)
|
|
context.Cookie("current_ctx", option["ctx"].value)
|
|
return true
|
|
}
|
|
})
|
|
insert_before(append, "input", {
|
|
"type": "button",
|
|
"value": "shy",
|
|
"onclick": function(event) {
|
|
option["ctx"].value = "shy"
|
|
send_command(option)
|
|
context.Cookie("current_ctx", option["ctx"].value)
|
|
return true
|
|
}
|
|
})
|
|
insert_before(append, "input", {
|
|
"type": "button",
|
|
"value": "aaa",
|
|
"onclick": function(event) {
|
|
option["ctx"].value = "aaa"
|
|
send_command(option)
|
|
context.Cookie("current_ctx", option["ctx"].value)
|
|
return true
|
|
}
|
|
})
|
|
insert_before(append, "input", {
|
|
"type": "button",
|
|
"value": "web",
|
|
"onclick": function(event) {
|
|
option["ctx"].value = "web"
|
|
send_command(option)
|
|
context.Cookie("current_ctx", option["ctx"].value)
|
|
return true
|
|
}
|
|
})
|
|
insert_before(append, "input", {
|
|
"type": "button",
|
|
"value": "mdb",
|
|
"onclick": function(event) {
|
|
option["ctx"].value = "mdb"
|
|
send_command(option)
|
|
context.Cookie("current_ctx", option["ctx"].value)
|
|
return true
|
|
}
|
|
})
|
|
|
|
option["ctx"].value = context.Cookie("current_ctx")
|
|
send_command(option)
|
|
|
|
append.onchange = append.onclick = function(event) {
|
|
console.log(event)
|
|
if (event.target.tagName == "TD") {
|
|
var name = event.target.innerText.trim()
|
|
copy_to_clipboard(name)
|
|
option["ctx"].value = name
|
|
context.Cookie("current_ctx", option["ctx"].value)
|
|
} else if (event.target.tagName == "TH") {
|
|
}
|
|
|
|
send_command(option)
|
|
}
|
|
}
|
|
function init_command() {
|
|
var append = document.querySelector("table.append.command")
|
|
if (!append) {
|
|
return
|
|
}
|
|
var option = document.querySelector("form.option.command")
|
|
insert_before(append, "input", {
|
|
"type": "button",
|
|
"value": "clear",
|
|
"onclick": function(event) {
|
|
option["cmd"].value = ""
|
|
return true
|
|
}
|
|
})
|
|
insert_before(append, "input", {
|
|
"type": "button",
|
|
"value": "exec",
|
|
"onclick": function(event) {
|
|
send_command(option)
|
|
return true
|
|
}
|
|
})
|
|
insert_before(append, "input", {
|
|
"type": "button",
|
|
"value": "online",
|
|
"onclick": function(event) {
|
|
option["cmd"].value += " cmd_env IS_PROD_RUNTIME 1"
|
|
send_command(option)
|
|
option["cmd"].focus()
|
|
return true
|
|
}
|
|
})
|
|
}
|
|
function init_userinfo() {
|
|
var append = document.querySelector("table.append.userinfo")
|
|
if (!append) {
|
|
return
|
|
}
|
|
var option = document.querySelector("form.option.userinfo")
|
|
return
|
|
insert_before(append, "input", {
|
|
"type": "button",
|
|
"value": "logout",
|
|
"onclick": function(event) {
|
|
context.Cookie("sessid", "")
|
|
location.reload()
|
|
return true
|
|
}
|
|
})
|
|
}
|
|
|
|
window.onload = function() {
|
|
init_option()
|
|
init_append()
|
|
init_result()
|
|
init_download()
|
|
init_context()
|
|
init_command()
|
|
init_userinfo()
|
|
}
|
|
|