From 4faa91b1147689de58bdbdecef22e9594836b3d1 Mon Sep 17 00:00:00 2001 From: shaoying Date: Tue, 8 Oct 2019 21:00:03 +0800 Subject: [PATCH] add Button.page.js --- src/contexts/cli/version.go | 2 +- usr/librarys/chat.js | 126 ++++++++++++++++++------------------ usr/librarys/example.css | 2 +- usr/librarys/example.js | 121 ++++++++++++++++------------------ 4 files changed, 120 insertions(+), 131 deletions(-) diff --git a/src/contexts/cli/version.go b/src/contexts/cli/version.go index ef51d834..30718d35 100644 --- a/src/contexts/cli/version.go +++ b/src/contexts/cli/version.go @@ -7,5 +7,5 @@ var version = struct { self int }{ []string{"2017-11-01 01:02:03", "2019-07-13 18:02:21"}, - `2019-10-05 14:55:37`, `mac`, 639, + `2019-10-08 12:46:50`, `centos`, 623, } diff --git a/usr/librarys/chat.js b/usr/librarys/chat.js index 5173b074..56370f9d 100644 --- a/usr/librarys/chat.js +++ b/usr/librarys/chat.js @@ -1,4 +1,4 @@ -var page = Page({check: true, +var page = Page({ conf: {refresh: 1000, border: 4, first: "工作", mobile: "工作", layout: {header:30, footer:30, river:100, storm:100, action:180, source:45}}, onlayout: function(event, sizes) { var page = this @@ -23,64 +23,62 @@ var page = Page({check: true, sizes.action == undefined && (sizes.action = page.action.offsetHeight-page.conf.border) sizes.source == undefined && (sizes.source = page.source.clientHeight) sizes.target == undefined && (sizes.target = page.target.clientHeight) - sizes.source == 0 && sizes.target == 0 && !kit.device.isMobile && (sizes.action = height) + sizes.source == 0 && sizes.target == 0 && !kit.device.isMobile && (sizes.action = height) page.action.Pane.Size(width, sizes.action) page.source.Pane.Size(width, sizes.source) height -= sizes.target==0? height: page.source.offsetHeight+page.action.offsetHeight page.target.Pane.Size(width, height) }, - oncontrol: function(event, target, action) { + oncontrol: function(event) { var page = this - switch (action) { - case "control": - if (event.ctrlKey) { - switch (event.key) { - case "0": - page.source.Pane.Select() - break - case "1": - case "2": - case "3": - case "4": - case "5": - case "6": - case "7": - case "8": - case "9": - page.action.Pane.Select(parseInt(event.key)) - break - case "n": - page.ocean.Pane.Show() - break - case "m": - page.steam.Pane.Show() - break - case "i": - page.storm.Pane.Next() - break - case "o": - page.storm.Pane.Prev() - break - case "b": - page.action.Action["最大"](event) - - } + if (event.ctrlKey) { + switch (event.key) { + case "0": + page.source.Pane.Select() break - } else { - switch (event.key) { - case " ": - page.footer.Pane.Select() - break - case "Escape": - page.dialog && page.dialog.Pane.Show() - break - } - } - break + case "1": + case "2": + case "3": + case "4": + case "5": + case "6": + case "7": + case "8": + case "9": + page.action.Pane.Select(parseInt(event.key)) + break + case "n": + page.ocean.Pane.Show() + break + case "m": + page.steam.Pane.Show() + break + case "i": + page.storm.Pane.Next() + break + case "o": + page.storm.Pane.Prev() + break + case "b": + page.action.Action["最大"](event) + + } + break + } else { + switch (event.key) { + case " ": + page.footer.Pane.Select() + break + case "Escape": + page.dialog && page.dialog.Pane.Show() + break + } } + break }, - onaction: { + + Action: { title: function(event, item, value, page) { ctx.Search({"river": page.river.Pane.which.get(), "storm": page.storm.Pane.which.get(), "layout": page.action.Pane.Layout()}) }, @@ -99,9 +97,7 @@ var page = Page({check: true, meta[value](event) })) }, - }, - Action: { "聊天": function(event, value) { page.which.set(value) page.onlayout(event, page.conf.layout) @@ -129,6 +125,12 @@ var page = Page({check: true, page.onlayout(event, {header:0, footer:0, river:0, storm:0, action: -1}) }, }, + Button: shy({"user": "", "title": ""}, ["user"], function(key, value) {var meta = arguments.callee.meta + return kit.isNone(key)? meta: kit.isNone(value)? meta[key]: (meta[key] = value, page.header.Pane.Show()) + }), + Status: shy({"ncmd": "0", "ntxt": "0"}, ["ncmd", "ntxt"], function(key, value) {var meta = arguments.callee.meta + return kit.isNone(key)? meta: kit.isNone(value)? meta[key]: (meta[key] = value, page.footer.Pane.Show()) + }), initOcean: function(page, field, option, output) { var table = kit.AppendChild(output, "table") @@ -250,10 +252,8 @@ var page = Page({check: true, var foot = page.footer.Pane, cmds = [river, "brow", i||which[river]||0] cmds[2] || (output.innerHTML = ""), pane.Tickers(page.conf.refresh, cmds, function(line, index, msg) { - pane.Append("", line, ["text"], "index", function(line, index, event, args, cbs) { - page.action.Pane.Core(event, line, args, cbs) - }) - foot.State("ntxt", which[river] = cmds[2] = parseInt(line.index)+1) + pane.Append("", line, ["text"], "index") + page.Status("ntxt", which[river] = cmds[2] = parseInt(line.index)+1) }) }, Listen: { @@ -427,9 +427,7 @@ var page = Page({check: true, if (data) {return pane.which.set(data.which)} pane.Event(event, {}, {name: pane.Zone("show", river)}) - output.innerHTML = "", pane.Appends([river], "text", ["key", "count"], "key", which||ctx.Search("storm")||true, null, function(msg) { - pane.which.get() == "" && pane.Select(0, msg.key[0]) - }) + output.innerHTML = "", pane.Appends([river], "text", ["key", "count"], "key", which||ctx.Search("storm")||true, null) }, Listen: { river: function(value, old) {var pane = field.Pane @@ -456,9 +454,12 @@ var page = Page({check: true, }}) }) }, + "刷新": function(event) { + }, }, Button: ["创建", "共享"], Choice: ["创建", "共享"], + Detail: ["刷新"], } }, initSteam: function(page, field, option, output) { @@ -581,12 +582,11 @@ var page = Page({check: true, } }, init: function(page) { - page.action.Pane.Layout(ctx.Search("layout")? ctx.Search("layout"): kit.device.isMobile? page.conf.first: page.conf.mobile) - page.footer.Pane.Order({"ncmd": "0", "ntxt": "0"}, ["ncmd", "ntxt"], function(event, item, value) {}) - page.header.Pane.Order({"user": page.who.get(), "title": "github.com/shylinux/context"}, ["user"], function(event, item, value) { - page.onaction[item] && page.onaction[item](event, item, value, page) - }) + page.Button("user", page.who.get()) + page.Button("title", "github.com/shylinux/context") + page.Status("title", 'shylinux@163.com') page.river.Pane.Show() + page.Action[ctx.Search("layout") || (kit.device.isMobile? page.conf.first: page.conf.mobile)]() page.WSS() }, }) diff --git a/usr/librarys/example.css b/usr/librarys/example.css index 4b96a67d..17f46ff8 100644 --- a/usr/librarys/example.css +++ b/usr/librarys/example.css @@ -70,7 +70,7 @@ fieldset>div.action div.space { fieldset>div.output { clear:both; /* max-height:800px; */ - padding:6px; + padding:5px; } fieldset>div.output div.item { padding:2px; diff --git a/usr/librarys/example.js b/usr/librarys/example.js index 1b2c0feb..b72bc154 100644 --- a/usr/librarys/example.js +++ b/usr/librarys/example.js @@ -102,7 +102,7 @@ function Meta(zone, target, obj) { break } - var ui = kit.AppendChild(output, item? list: [{view: ["item"], data: {draggable: true}, list:list}]) + var ui = kit.AppendChild(output, item? list: [{view: ["item"], data: {id: "item"+meta.ID(), draggable: true}, list:list}]) return ui.item.Meta = text, ui }), Include: shy("加载脚本", function(src, cb) {src = kit.List(src) @@ -128,7 +128,7 @@ function Meta(zone, target, obj) { } function Page(page) { var script = {}, record = "" - page = Meta([document.title], document.body, page, { + page = Meta([document.title], document.body, page, {check: true, onload: function(event) { // Event入口 0 page.Event(event, {}) @@ -168,11 +168,9 @@ function Page(page) { // 事件回调 window.onresize = function(event) { - page.onlayout && page.onlayout(event) + page.onlayout(event) }, document.body.onkeydown = function(event) { - if (page.localMap && page.localMap(event)) {return} - page.oncontrol && page.oncontrol(event, document.body, "control") - + page.oncontrol(event) || page.onscroll(event) }, document.body.onkeyup = function(event) { }, document.body.oncontextmenu = function(event) { }, document.body.onmousewheel = function(event) { @@ -258,6 +256,8 @@ function Page(page) { event.preventDefault() return true }, + onlayout: function() {}, + oncontrol: function() {}, onscroll: function(event, target, action) { switch (event.key) { case " ": @@ -537,33 +537,26 @@ function Page(page) { } }, initHeader: function(page, field, option, output) { - var state = {title: "github.com/shylinux/context"}, list = [], cb = function(event, item, value) {} + var cb = function(event, item, value) { + kit._call(page.Action[item], [event, item, value, page]) + } field.onclick = function(event) {page.pane && page.pane.scrollTo(0, 0)} - page.who.change(function(value, old) {field.Pane.State("user", value)}) + page.who.change(function(value, old) {page.Button("user", value)}) return { - Order: function(value, order, cbs) { - state = value, list = order, cb = cbs || cb, field.Pane.Show() - }, - State: function(name, value) { - kit.notNone(value) && (state[name] = value, field.Pane.Show()) - return kit.isNone(name)? state: state[name] - }, - Show: function() { + Show: function() {var meta = page.Button.meta, list = page.Button.list kit.AppendChilds(output, [ - {"view": ["title", "div", state.title], click: function(event) { - cb(event, "title", state.title) - }}, - {"view": ["state"], list: list.map(function(item) {return {text: [state[item], "div", "item"], click: function(event) { - cb(event, item, state[item]) - }}})}, + {"view": ["title", "div", meta.title], click: cb}, + {"view": ["state"], list: list.map(function(item) {return {text: [meta[item], "div", "item"], click: cb}})}, ]) }, Help: function() {return []}, } }, initFooter: function(page, field, option, output) { - var state = {title: "shylinux@163.com"}, list = [], cb = function(event, item, value) {} + var state = {title: "shylinux@163.com"}, list = [], cb = function(event, item, value) { + kit._call(page.Action[item], [event, item, value, page]) + } var ui = kit.AppendChilds(output, [ {"view": ["title", "div", state.title]}, {"view": ["state"]}, @@ -598,21 +591,15 @@ function Page(page) { return { Select: function() {ui.magics.focus()}, - Order: function(value, order, cbs) { - state = value, list = order, cb = cbs || cb, field.Pane.Show() - }, - State: function(name, value) { - value != undefined && (state[name] = value, field.Pane.Show()) - return name == undefined? state: state[name] - }, Size: function(width, height) { kit.size(field, width, height) ui && kit.size(ui.magics, (width - ui.count.offsetWidth - ui.first.offsetWidth - ui.state.offsetWidth - 40), height-6) }, - Show: function() { - kit.AppendChilds(ui.state, list.map(function(item) {return {text: [item+":"+state[item], "div"], click: function(item) { - cb(event, item, state[item]) - }}})) + Show: function() {var meta = page.Status.meta, list = page.Status.list + kit.AppendChilds(output, [ + {"view": ["title", "div", meta.title], click: cb}, + {"view": ["state"], list: list.map(function(item) {return {text: [item+":"+meta[item], "div", "item"], click: cb}})}, + ]) field.Pane.Size(field.clientWidth, field.clientHeight) }, Help: function() {return []}, @@ -635,8 +622,10 @@ function Pane(page, field) { var pane = Meta(page.Zone(name), field, (page[field.dataset.init] || function() {})(page, field, option, output) || {}, { Appends: shy("添加列表", function(cmds, type, key, which, first, cb, cbs) { + var list = [] pane.Runs(event, cmds, function(line, index, msg) { var ui = pane.Append(type, line, key, which, cb) + list.push(ui) if (typeof first == "string") { (line.key == first || line.name == first || line[which] == first || line[key[0]] == first) && ui.item.click() } else { @@ -644,52 +633,56 @@ function Pane(page, field) { } if (index == msg[msg.append[0]].length-1) { kit.Selector(output, itemkeys).length == 0 && pane.Select(0) - kit._call(cbs, [msg]) + kit._call(cbs, [msg, list]) } }) }), Append: shy("添加列表", function(type, line, key, which, cb) {type = type || line.type - var index = kit.Selector(output, itemkey).length var ui = pane.View(output, type, line, key) ui.item.onclick = function(event) { if (pane.which.get() == line[which]) {return} - page.script("record", [name, line[key[0]]]) pane.Event(event, {}, {name: pane.Zone("select", line[key[0]])}) - kit.Selector(output, itemkeys, function(item) {kit.classList.del(item, "select")}) - kit.Selector(output, itemkey, function(item, i) {i == index && kit.classList.add(item, "select")}) + page.script("record", [name, line[key[0]]]) + pane.Select(ui.item) pane.which.set(line[which]) - kit._call(cb, [line, index, event]) + kit._call(cb, [event, line]) + } + ui.item.ondragstart = function(event) {if (event.target != ui.item) {return} + event.dataTransfer.setData("item", event.target.id) + event.stopPropagation() + } + ui.item.ondragover = function(event) {if (event.target != ui.item) {return} + event.stopPropagation() + event.preventDefault() + pane.Select(ui.item) + } + ui.item.ondrop = function(event) {if (event.target != ui.item) {return} + var item = pane[event.dataTransfer.getData("item")] + output.insertBefore(item, event.target) + event.stopPropagation() + } + ui.item.oncontextmenu = function(event) { + pane.Detail && page.carte.Pane.Show(event, shy({}, pane.Detail, function(value, meta, event) { + pane.Check(event, value) + })) } if (type == "plugin" && line.name || type == "field") { - ui.item.ondragstart = function(event) { - event.stopPropagation() - event.dataTransfer.setData("item", event.target.id) - } - ui.item.ondragover = function(event) { - ui.item.Plugin && ui.item.Plugin.Select() - } - ui.item.ondrop = function(event) { - event.stopPropagation() - var item = pane[event.dataTransfer.getData("item")] - output.insertBefore(item, event.target) - } - page.Require(line.init? line.group+"/"+line.init: "", function(init) { page.Require(line.view? line.group+"/"+line.view: "", function(view) { pane.Plugin(page, pane, ui.item, init, function(event, cmds, cbs) { - cb? kit._call(cb, [line, index, event, cmds, cbs]): - kit._call(pane.Core, [event, line, cmds, cbs]) + kit._call(cb||pane.Core, [event, line, cmds, cbs]) }) }) }) } - return ui + return pane[ui.item.id] = ui.item, ui }), Select: shy("选择列表", function(index) { - kit.Selector(output, itemkey, function(item, i) { - i == index && item.Select() + kit.Selector(output, itemkey, function(item, i) {if (item != index && i != index) {return} + kit.Selector(output, itemkeys, function(item) {kit.classList.del(item, "select")}) + kit.classList.add(item, "select") }) }), @@ -973,7 +966,7 @@ function Pane(page, field) { var Meta = plugin && plugin.target && plugin.target.Meta || {} kit.Log(["cmd"].concat(kit.List([Meta.river, Meta.storm, Meta.action])).concat(args[0] == "_cmd"? args[1]: args)) - page.footer.Pane.State("ncmd", kit.History("cmd", -1, {args: args, meta: Meta})) + page.Status("ncmd", kit.History("cmd", -1, {args: args, meta: Meta})) return args.length > 0 && meta[args[0]]? kit._call(cbs, [msg.Echo(meta[args[0]](args))]): args.length > 0 && engine[args[0]]? kit._call(cbs, [msg.Echo(engine[args[0]](args))]): event.shiftKey? engine._msg(msg): engine._run(msg) @@ -989,13 +982,6 @@ function Pane(page, field) { }), onaction: shy("事件列表", { - ondragover: function(event) { - event.preventDefault() - }, - ondrop: function(event) { - event.preventDefault() - console.log(event.dataTransfer.getData("index"), "drop") - }, oncontextmenu: function(event) { pane.Choice && page.carte.Pane.Show(event, shy({}, pane.Choice, function(value, meta, event) { pane.Check(event, value) @@ -1078,6 +1064,9 @@ function Plugin(page, pane, field, inits, runs) { }).item.Plugin.Select() }), + Move: function() { + return field.nextSibling || field.parentNode.firstChild + }, Next: function() { return field.nextSibling || field.parentNode.firstChild },