From cba88c17f271819fd225804d4f5844b126bff4d9 Mon Sep 17 00:00:00 2001 From: shaoying Date: Thu, 16 May 2019 10:23:00 +0800 Subject: [PATCH] add page.Listen --- etc/common.shy | 3 +- src/examples/chat/chat.go | 87 ++++++++++++++- usr/librarys/chat.css | 48 ++++++-- usr/librarys/chat.js | 209 ++++++++++++++++++++++++----------- usr/librarys/code.js | 14 +-- usr/librarys/context.js | 84 +++++++------- usr/librarys/example.js | 225 +++++++++++++++++++++++-------------- usr/librarys/toolkit.js | 226 ++++++++++++++++++-------------------- 8 files changed, 569 insertions(+), 327 deletions(-) diff --git a/etc/common.shy b/etc/common.shy index 83dec4a7..30c0e6f6 100644 --- a/etc/common.shy +++ b/etc/common.shy @@ -1,5 +1,6 @@ ~aaa - role root user shy + role root user shy shaoying + ~mdb note model favor spirit spirit relate relate note model money expend expend amount amount diff --git a/src/examples/chat/chat.go b/src/examples/chat/chat.go index 1dd27302..5bdc33bd 100644 --- a/src/examples/chat/chat.go +++ b/src/examples/chat/chat.go @@ -72,6 +72,10 @@ var Index = &ctx.Context{Name: "chat", Help: "会议中心", "componet_view": "Source", "componet_init": "initSource", "componet_ctx": "web.chat", "componet_cmd": "flow", "arguments": []interface{}{"source"}, }, + map[string]interface{}{"componet_name": "action", "componet_tmpl": "fieldset", + "componet_view": "Action", "componet_init": "initAction", + "componet_ctx": "web.chat", "componet_cmd": "flow", "arguments": []interface{}{"action"}, + }, map[string]interface{}{"componet_name": "footer", "componet_tmpl": "fieldset", "componet_view": "Footer", "componet_init": "initFooter", @@ -136,18 +140,39 @@ var Index = &ctx.Context{Name: "chat", Help: "会议中心", switch arg[1] { case "create": h := kit.Hashs("uniq") + user := map[string]interface{}{} + for _, v := range arg[3:] { + u := m.Cmdx("ssh.remote", m.Conf("runtime", "work.route"), "check", "work", v) + user[v] = map[string]interface{}{ + "user": u, + } + } m.Conf("flow", h, map[string]interface{}{ "conf": map[string]interface{}{ - "create_time": m.Time(), "create_user": m.Option("username"), + "create_time": m.Time(), "name": kit.Select("what", arg, 2), }, - "user": map[string]interface{}{}, + "user": user, "text": map[string]interface{}{}, + "tool": map[string]interface{}{}, }) m.Echo(h) + case "user": + if len(arg) == 3 { + m.Confm("flow", []string{arg[2], "user"}, func(key string, value map[string]interface{}) { + m.Add("append", "key", key) + m.Add("append", "user.route", value["user"]) + }) + m.Table() + return + } + switch arg[3] { + case "add": + } + case "wave": if len(arg) == 3 { m.Confm("flow", []string{arg[2], "text.list"}, func(index int, value map[string]interface{}) { @@ -160,6 +185,7 @@ var Index = &ctx.Context{Name: "chat", Help: "会议中心", } m.Conf("flow", []string{arg[2], "text.list.-2"}, map[string]interface{}{ + "create_user": m.Option("username"), "create_time": m.Time(), "type": arg[3], "text": arg[4], @@ -168,6 +194,63 @@ var Index = &ctx.Context{Name: "chat", Help: "会议中心", count := m.Confi("flow", []string{arg[2], "text.count"}) + 1 m.Confi("flow", []string{arg[2], "text.count"}, count) m.Echo("%d", count) + + m.Option("username", m.Conf("runtime", "user.name")) + m.Confm("flow", []string{arg[2], "user"}, func(key string, value map[string]interface{}) { + m.Cmd("ssh.remote", value["user"], "context", "chat", "flow", "river", "wave", arg[2], arg[3], arg[4]) + }) + + case "tool": + if len(arg) == 3 { + m.Confm("flow", []string{arg[2], "tool"}, func(key string, value map[string]interface{}) { + m.Add("append", "key", key) + m.Add("append", "create_user", value["create_user"]) + m.Add("append", "create_time", value["create_time"]) + if list, ok := kit.Chain(value, "list").([]interface{}); ok { + m.Add("append", "count", len(list)) + } else { + m.Add("append", "count", 0) + } + }) + m.Table() + return + } + + if m.Confs("flow", []string{arg[2], "tool", arg[3]}) { + if len(arg) == 4 { + m.Confm("flow", []string{arg[2], "tool", arg[3], "list"}, func(index int, value map[string]interface{}) { + m.Add("append", "cmd", value["cmd"]) + }) + m.Table() + } else { + switch arg[4] { + case "add": + for _, v := range arg[5:] { + m.Conf("flow", []interface{}{arg[2], "tool", arg[3], "list", -2}, map[string]interface{}{ + "cmd": v, + }) + } + + default: + if cmd := m.Confm("flow", []string{arg[2], "tool", arg[3], "list", arg[4]}); cmd != nil { + m.Cmdy("ctx.context", "cli", cmd["cmd"]) + } + } + } + return + } + + list := []interface{}{} + for _, v := range arg[4:] { + list = append(list, map[string]interface{}{ + "cmd": v, + }) + } + m.Conf("flow", []string{arg[2], "tool", arg[3]}, map[string]interface{}{ + "create_user": m.Option("username"), + "create_time": m.Time(), + "list": list, + }) } case "storm": switch arg[1] { diff --git a/usr/librarys/chat.css b/usr/librarys/chat.css index be779441..894ff627 100644 --- a/usr/librarys/chat.css +++ b/usr/librarys/chat.css @@ -1,17 +1,17 @@ - +fieldset div.output { + padding:6px; +} fieldset.Ocean { - position:absolute; - width:100px; - height:100px; background-color:red; - display:none; padding:0; + display:none; + position:absolute; } fieldset.River { - overflow:auto; padding:0; min-width:160px; min-height:200px; + overflow:auto; float:left; } fieldset.River div.output div.item { @@ -19,7 +19,9 @@ 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; @@ -27,18 +29,44 @@ fieldset.Target { min-height:80px; overflow:auto; } +fieldset.Target div.output { + padding:10px; +} +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.Steam { - display:none; - padding:0; +fieldset.Storm div.output div.item:hover { + background-color:red; +} +fieldset.Storm div.output div.item.select { + background-color:red; +} +fieldset.Steam { + background-color:red; + padding:0; + display:none; + position:absolute; } diff --git a/usr/librarys/chat.js b/usr/librarys/chat.js index 57d0ba52..ad28436c 100644 --- a/usr/librarys/chat.js +++ b/usr/librarys/chat.js @@ -1,4 +1,24 @@ var page = Page({ + conf: {border: 4, banner: 105}, + size: function(event, sizes) { + sizes = sizes || {} + var width = document.body.offsetWidth + var height = document.body.offsetHeight-page.conf.banner + + 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 + 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 + page.target.Size(sizes.width, sizes.target) + page.source.Size(sizes.width, sizes.source) + page.action.Size(sizes.width, sizes.action) + }, + initOcean: function(page, pane, form, output) { var table = kit.AppendChild(output, "table") pane.Show = function() { @@ -12,45 +32,47 @@ var page = Page({ }, initRiver: function(page, pane, form, output) { pane.Show = function() { - output.innerHTML = "", form.Runs(["river"], function(line, index, msg) { - index == 0 && page.target.Show(line.key) - kit.AppendChild(output, [{view: ["item", "div", line.name+"("+line.count+")"], click: function(event) { - page.target.Show(line.key) - }}]) - }) + output.Update(["river"], "text", ["name", "count"], "key", true) } pane.Show() - return {"button": ["添加", "查找"], "action": function(value) { - switch (value) { - case "添加": - var name = prompt("name") - name && form.Run(["river", "create", name], pane.Show) - break - case "查找": - page.ocean.Show() - break - } - }} + pane.Action = { + "添加": function(event) { + var name = prompt("name") + name && form.Run(["river", "create", name], pane.Show) + }, + "查找": function(event) { + page.ocean.Show() + }, + } + return {"button": ["添加", "查找"], "action": pane.Action} }, initTarget: function(page, pane, form, output) { var river = "" - pane.Show = function(which) { - which && river != which && (river = which, output.innerHTML = "", form.Runs(["river", "wave", river], function(line, index, msg) { - kit.AppendChild(output, [{view: ["item", "div", line.text], click: function(event) {}}]) - pane.scrollBy(0,100) - })) + pane.Listen = { + river: function(value, old) { + river = value, pane.Show() + }, } + + pane.Show = function() { + output.Update(["river", "wave", river], "text", ["text"], "index") + } + + pane.postion = page.Sync() + pane.onscroll = function(event) { + pane.postion.set({top: event.target.scrollTop, height: event.target.clientHeight, bottom: event.target.scrollHeight}) + } + pane.Send = function(type, text, cb) { form.Run(["river", "wave", river, type, text], function(msg) { - kit.AppendChild(output, [{"text" :[text, "div"]}]) - pane.scrollBy(0,100) - typeof cb == "function" && cb(msg) + output.Append(type, {text:text, index: msg.result[0]}, ["text"], "index"), typeof cb == "function" && cb() }) } return [{"text": ["target"]}] }, initSource: function(page, pane, form, output) { - var ui = kit.AppendChild(pane, [{"view": ["input", "textarea"], "name": "input", "data": {"onkeyup": function(event){ + var ui = kit.AppendChild(pane, [{"view": ["input", "textarea"], "data": {"onkeyup": function(event){ + kit.isSpace(event.key) && pane.which.set(event.target.value) event.key == "Enter" && !event.shiftKey && page.target.Send("text", event.target.value, pane.Clear) }, "onkeydown": function(event) { event.key == "Enter" && !event.shiftKey && event.preventDefault() @@ -60,50 +82,110 @@ var page = Page({ pane.style.display = width==0? "none": "block" pane.style.width = width+"px" pane.style.height = height+"px" - ui.input.style.width = (width-7)+"px" - ui.input.style.height = (height-7)+"px" + ui.first.style.width = (width-7)+"px" + ui.first.style.height = (height-7)+"px" } - pane.Clear = function() { - ui.input = "" + pane.Clear = function(value) { + ui.first.value = value || "" } return }, + initAction: function(page, pane, form, output) { + var river = "", input = "", water = 0 + pane.Listen = { + river: function(value, old) { + river = value + }, + source: function(value, old) { + input = value, kit.Log(value) + }, + storm: function(value, old) { + water = value, pane.Show() + }, + } + pane.Show = function() { + output.Update(["river", "tool", river, water], "text", ["cmd"], "cmd", false, function(line, index) { + form.Run(["river", "tool", river, water, index], function(msg) { + msg.append && msg.append[0]? + page.target.Send("table", JSON.stringify(ctx.Table(msg))): + page.target.Send("text", msg.result.join("")) + }) + }) + } + pane.Action = { + "添加": function(event) { + var name = prompt("name") + name && form.Run(["river", "tool", river, water, "add", name], pane.Show) + }, + "查找": function(event) { + page.ocean.Show() + }, + } + return {"button": ["添加", "查找"], "action": pane.Action} + }, initStorm: function(page, pane, form, output) { - return [{"text": ["storm"]}] + var river = "" + pane.Listen = { + river: function(value, old) { + river = value, pane.Show() + }, + } + pane.Show = function() { + output.Update(["river", "tool", river], "text", ["key", "count"], "key", true) + } + pane.Action = { + "添加": function(event) { + var name = prompt("name") + name && form.Run(["river", "tool", river, name, "pwd"], pane.Show) + }, + "查找": function(event) { + page.steam.Show() + }, + } + return {"button": ["添加", "查找"], "action": pane.Action} }, initSteam: function(page, pane, form, output) { + pane.Show = function() { + pane.ShowDialog() && (table.innerHTML = "", form.Run(["ocean"], function(msg) { + kit.AppendTable(table, ctx.Table(msg), ["key", "user.route"]) + })) + } return [{"text": ["steam"]}] }, - - range: function(sizes) { - sizes = sizes || {} - var width = document.body.offsetWidth - var height = document.body.offsetHeight-80 - - sizes.left == undefined && (sizes.left = page.river.offsetWidth-page.conf.border) - sizes.right == undefined && (sizes.right = page.storm.offsetWidth-page.conf.border) - sizes.middle = width - sizes.left - sizes.right-5*page.conf.border - page.river.Size(sizes.left, height) - page.storm.Size(sizes.right, height) - - if (sizes.top != undefined) { - sizes.bottom = height-sizes.top-page.conf.border - } else if (sizes.bottom != undefined) { - sizes.top = height-sizes.bottom-page.conf.border - } else { - sizes.bottom = page.source.offsetHeight-page.conf.border - sizes.top = height-sizes.bottom-page.conf.border - } - kit.Log(sizes) - page.target.Size(sizes.middle, sizes.top) - page.source.Size(sizes.middle, sizes.bottom) - }, - - init: function(exp) { - var page = this - page.eachField(page, function(init, pane, form) { + init: function(page) { + page.initField(page, function(init, pane, form) { var output = pane.querySelector("div.output") + + var list = [], last = -1 + 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 = kit.AppendChild(output, page.View(type, line, key, function(event) { + output.Select(index), pane.which.set(line[which]) + typeof cb == "function" && cb(line, index) + })) + if (type == "table") { + kit.OrderTable(ui.last) + } + 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.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) + first && index == 0 && ui.first.click() + }) + } + if (typeof init == "function") { var conf = init(page, pane, form, output) if (conf && conf["button"]) { @@ -111,16 +193,17 @@ var page = Page({ conf.button.forEach(function(value, index) { buttons.push({"button": [value, function(event) { typeof conf["action"] == "function" && conf["action"](value, event) + typeof conf["action"] == "object" && conf["action"][value](event) }]}) }) - kit.InsertChild(pane, output, "div", buttons) + kit.InsertChild(pane, output, "div", buttons).className = "action "+form.dataset.componet_name } else if (conf) { kit.AppendChild(output, conf) } } + return conf }) - window.onresize = this.range - this.range({left:160, bottom:60, right:160}) + + page.size(null, {river:160, source:60, action:60, storm:160}) }, - conf: {border: 4}, }) diff --git a/usr/librarys/code.js b/usr/librarys/code.js index 8fd5e243..5b56ba9a 100644 --- a/usr/librarys/code.js +++ b/usr/librarys/code.js @@ -323,7 +323,7 @@ var page = Page({ }, runCmdList: function(page, option, target, value) { target.value = value - target.dataset.history_last = page.History.add("cmd", target.value) + target.dataset.history_last = kit.History.add("cmd", target.value) ctx.Runs(page, option) }, getCmdList: function(input, step, cmd) { @@ -356,9 +356,9 @@ var page = Page({ {"code": ["", "result", "result "+alias]}, ]}]) - page.OrderForm(page, ui.field, ui.option, ui.append, ui.result) - page.OrderTable(ui.append) - page.OrderCode(ui.result) + kit.OrderForm(page, ui.field, ui.option, ui.append, ui.result) + kit.OrderTable(ui.append) + kit.OrderCode(ui.result) ui.cmd.focus() return ui }, @@ -572,9 +572,9 @@ var page = Page({ var option = field.querySelector("form.option") var append = field.querySelector("table.append") var result = field.querySelector("code.result pre") - page.OrderForm(page, field, option, append, result) - append && page.OrderTable(append) - result && page.OrderCode(result) + kit.OrderForm(page, field, option, append, result) + append && kit.OrderTable(append) + result && kit.OrderCode(result) var init = page[field.dataset.init] if (typeof init == "function") { diff --git a/usr/librarys/context.js b/usr/librarys/context.js index 65eb4d6f..1cdfb2bb 100644 --- a/usr/librarys/context.js +++ b/usr/librarys/context.js @@ -1,5 +1,4 @@ ctx = context = { - __proto__: kit, Run: function(page, dataset, cmd, cb) { var option = {"cmds": cmd} for (var k in dataset) { @@ -23,13 +22,6 @@ ctx = context = { } this.Run(page, data, [], cb || form.ondaemon) }, - Sync: function(page, option, cmds, cb) { - this.Run(page, option.dataset, cmds, function(msg) { - ctx.Table(msg, function(line, index) { - cb(line, index) - }) - }) - }, Table: function(msg, cb) { var ret = [] if (!msg || !msg.append || !msg.append.length || !msg[msg.append[0]]) { @@ -56,7 +48,6 @@ ctx = context = { } return ret }, - Share: function(objs) { var args = this.Search() for (var k in objs) { @@ -70,6 +61,44 @@ ctx = context = { var arg = as.join("&"); return location.origin+location.pathname+"?"+arg }, + + Current: function(key, value) { + context.GET("", { + "componet_group": "index", + "componet_name": "cmd", + "cmds": ["sess", "current", key, value], + }) + return value + }, + Cookie: function(key, value) { + if (key == undefined) { + cs = {} + cookies = document.cookie.split("; ") + for (var i = 0; i < cookies.length; i++) { + cookie = cookies[i].split("=") + cs[cookie[0]] = cookie[1] + } + return cs + } + if (typeof key == "object") { + for (var k in key) { + document.cookie = k+"="+key[k]; + } + return this.Cookie() + } + + if (value == undefined) { + var pattern = new RegExp(key+"=([^;]*);?"); + var result = pattern.exec(document.cookie); + if (result && result.length > 0) { + return result[1]; + } + return ""; + } + + document.cookie = key+"="+value+";path=/"; + return this.Cookie(key); + }, Search: function(key, value) { var args = {}; var search = location.search.split("?"); @@ -105,43 +134,6 @@ ctx = context = { location.search = arg.join("&"); return value }, - Cookie: function(key, value) { - if (key == undefined) { - cs = {} - cookies = document.cookie.split("; ") - for (var i = 0; i < cookies.length; i++) { - cookie = cookies[i].split("=") - cs[cookie[0]] = cookie[1] - } - return cs - } - if (typeof key == "object") { - for (var k in key) { - document.cookie = k+"="+key[k]; - } - return this.Cookie() - } - - if (value == undefined) { - var pattern = new RegExp(key+"=([^;]*);?"); - var result = pattern.exec(document.cookie); - if (result && result.length > 0) { - return result[1]; - } - return ""; - } - - document.cookie = key+"="+value+";path=/"; - return this.Cookie(key); - }, - Current: function(key, value) { - context.GET("", { - "componet_group": "index", - "componet_name": "cmd", - "cmds": ["sess", "current", key, value], - }) - return value - }, GET: function(url, form, cb) { form = form || {} diff --git a/usr/librarys/example.js b/usr/librarys/example.js index 763a828b..b587f3a1 100644 --- a/usr/librarys/example.js +++ b/usr/librarys/example.js @@ -1,85 +1,150 @@ -exp = example = { - __proto__: ctx, - _init: function(page) { - page.__proto__ = this - - var body = document.body - body.onkeydown = function(event) { - page.onscroll && page.onscroll(event, body, "scroll") - } - return this - }, - initHeader: function(page, field, option, output) { - return [{"text": ["shycontext", "div", "title"]}] - }, - initField: function(page, field, option, output) { - return - }, - initBanner: function(page, field, option, output) { - field.querySelectorAll("li").forEach(function(item) { - item.onclick = function(event) { - ctx.Search("componet_group", item.innerText) - if (item.innerText == "login") { - ctx.Cookie("sessid", "") - } - } - }) - return [{"text": ["shylinux", "div", "title"]}] - }, - initFooter: function(page, field, option) { - return [{"view": ["title", "div", "shylinux@163.com"]}] - }, - - onscroll: function(event, target, action) { - var page = this - switch (action) { - case "scroll": - if (event.target == document.body) { - kit.ScrollPage(event, page.conf) - } - break - } - }, - onresize: function(event) {}, - reload: function() { - location.reload() - }, - - eachField: function(page, cb) { - document.querySelectorAll("body>fieldset").forEach(function(pane) { - // pane init - pane.ShowDialog = function(width, height) { - return kit.ShowDialog(this, width, height) - } - pane.Size = function(width, height) { - pane.style.display = width==0? "none": "block" - pane.style.width = width+"px" - pane.style.height = height+"px" - } - - - // form init - var form = pane.querySelector("form.option") - form.Run = function(cmds, cb) { - ctx.Run(page, form.dataset, cmds, cb) - } - form.Runs = function(cmds, cb) { - ctx.Run(page, form.dataset, cmds, function(msg) { - ctx.Table(msg, function(line, index) { - cb(line, index, msg) - }) - }) - } - - page[form.dataset.componet_name] = pane - typeof cb == "function" && cb(page[pane.dataset.init], pane, form) - }) - }, -} - function Page(page) { + page.__proto__ = { + Sync: function(m) { + var meta = m + var data = "" + var list = [] + return { + 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) { + if (value == data) { + 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(type, line, key, cb) { + switch (type) { + case "text": + switch (key.length) { + case 0: + return [{view: ["", "div", "null"], click: cb}] + case 1: + return [{view: ["", "div", line[key[0]]], click: cb}] + default: + return [{view: ["", "div", line[key[0]]+"("+line[key[1]]+")"], 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}]}] + return result + } + }, + reload: function() { + location.reload() + }, + onscroll: function(event, target, action) { + switch (action) { + case "scroll": + if (event.target == document.body) { + kit.ScrollPage(event, page.conf) + } + break + } + }, + + initHeader: function(page, field, option, output) { + return [{"text": ["shycontext", "div", "title"]}] + }, + initBanner: function(page, field, option, output) { + field.querySelectorAll("li").forEach(function(item) { + item.onclick = function(event) { + ctx.Search("componet_group", item.innerText) + if (item.innerText == "login") { + ctx.Cookie("sessid", "") + } + } + }) + return [{"text": ["shylinux", "div", "title"]}] + }, + initFooter: function(page, field, option) { + return [{"view": ["title", "div", "shylinux@163.com"]}] + }, + initField: function(page, cb) { + document.querySelectorAll("body>fieldset").forEach(function(pane) { + var form = pane.querySelector("form.option") + page[form.dataset.componet_name] = pane + + // 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]}) + return true + } + pane.style.display = "none" + return false + } + pane.Size = function(width, height) { + pane.style.display = width==0? "none": "block" + pane.style.width = width+"px" + pane.style.height = height+"px" + } + + // form init + form.Run = function(cmds, cb) { + ctx.Run(page, form.dataset, cmds, cb) + } + form.Runs = function(cmds, cb) { + ctx.Run(page, form.dataset, cmds, function(msg) { + ctx.Table(msg, function(line, index) { + cb(line, index, msg) + }) + }) + } + + var conf = cb(page[pane.dataset.init], pane, form) + + // pane listen + for (var k in pane.Listen) { + page[k].which.change(pane.Listen[k]) + } + }) + }, + } window.onload = function() { - page.init(exp._init(page)) + page.init(page) + + window.onresize = page.size + document.body.onkeydown = function(event) { + page.onscroll && page.onscroll(event, document.body, "scroll") + } } return page } diff --git a/usr/librarys/toolkit.js b/usr/librarys/toolkit.js index 27bf704b..866aeb42 100644 --- a/usr/librarys/toolkit.js +++ b/usr/librarys/toolkit.js @@ -1,5 +1,8 @@ kit = toolkit = { isMobile: navigator.userAgent.indexOf("Mobile") > -1, + isSpace: function(c) { + return c == " " || c == "Enter" + }, History: {dir: [], pod: [], ctx: [], cmd: [], txt: [], key: [], add: function(type, data) { var list = this[type] || [] @@ -22,6 +25,100 @@ kit = toolkit = { return args }, + ScrollPage: function(event, conf) { + switch (event.key) { + case "h": + if (event.ctrlKey) { + window.scrollBy(-conf.scroll_x*10, 0) + } else { + window.scrollBy(-conf.scroll_x, 0) + } + break + case "H": + window.scrollBy(-document.body.scrollWidth, 0) + break + case "l": + if (event.ctrlKey) { + window.scrollBy(conf.scroll_x*10, 0) + } else { + window.scrollBy(conf.scroll_x, 0) + } + break + case "L": + window.scrollBy(document.body.scrollWidth, 0) + break + case "j": + if (event.ctrlKey) { + window.scrollBy(0, conf.scroll_y*10) + } else { + window.scrollBy(0, conf.scroll_y) + } + break + case "J": + window.scrollBy(0, document.body.scrollHeight) + break + case "k": + if (event.ctrlKey) { + window.scrollBy(0, -conf.scroll_y*10) + } else { + window.scrollBy(0, -conf.scroll_y) + } + break + case "K": + window.scrollBy(0, -document.body.scrollHeight) + break + } + 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) { @@ -156,7 +253,8 @@ kit = toolkit = { var node = kit.CreateNode(child.type, child.data) child.list && kit.AppendChild(node, child.list, subs) child.name && (subs[child.name] = node) - subs.field || (subs.field = node) + subs.first || (subs.first = node) + subs.last, subs.last = node parent.append(node) }) return subs @@ -188,7 +286,6 @@ kit = toolkit = { }) }) }, - RangeTable: function(table, index, sort_asc) { var list = table.querySelectorAll("tr") var new_list = [] @@ -278,14 +375,7 @@ kit = toolkit = { } } }, - OrderCode: function(code) { - if (!code) {return} - var kit = this - code.onclick = function(event) { - kit.CopyText() - } - }, OrderForm: function(page, field, option, append, result) { if (!option) {return} option.ondaemon = option.ondaemon || function(msg) { @@ -315,7 +405,7 @@ kit = toolkit = { input.onclick = input.onclick || function(event) { if (index == array.length-1) { if (input.value == "login") { - page.Runs(page, option, function(msg) { + ctx.Runs(page, option, function(msg) { if (document.referrer) { location.href = document.referrer } else { @@ -352,6 +442,14 @@ kit = toolkit = { } }) }, + OrderCode: function(code) { + if (!code) {return} + + var kit = this + code.onclick = function(event) { + kit.CopyText() + } + }, OrderLink: function(link) { link.target = "_blank" }, @@ -376,114 +474,6 @@ kit = toolkit = { } return true }, - - ScrollPage: function(event, conf) { - switch (event.key) { - case "h": - if (event.ctrlKey) { - window.scrollBy(-conf.scroll_x*10, 0) - } else { - window.scrollBy(-conf.scroll_x, 0) - } - break - case "H": - window.scrollBy(-document.body.scrollWidth, 0) - break - case "l": - if (event.ctrlKey) { - window.scrollBy(conf.scroll_x*10, 0) - } else { - window.scrollBy(conf.scroll_x, 0) - } - break - case "L": - window.scrollBy(document.body.scrollWidth, 0) - break - case "j": - if (event.ctrlKey) { - window.scrollBy(0, conf.scroll_y*10) - } else { - window.scrollBy(0, conf.scroll_y) - } - break - case "J": - window.scrollBy(0, document.body.scrollHeight) - break - case "k": - if (event.ctrlKey) { - window.scrollBy(0, -conf.scroll_y*10) - } else { - window.scrollBy(0, -conf.scroll_y) - } - break - case "K": - window.scrollBy(0, -document.body.scrollHeight) - break - } - return true - }, - - setView: 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 - } - } - }, - ShowDialog: function(pane, width, height) { - if (pane.style.display == "none") { - pane.style.display = "block" - this.setView(pane, {dialog: [width||800, height||400]}) - return true - } - pane.style.display = "none" - return false - }, - ShowWindow: function(pane, width, height) { - this.setView(pane, {window: [width||80, height||40]}) - }, } function right(arg) {