From 303b9a6b33fef8c8fe5e4ddcfffe021f8730b86e Mon Sep 17 00:00:00 2001 From: bergyu Date: Tue, 10 Aug 2021 18:51:05 +0800 Subject: [PATCH] opt contexts.js --- frame.js | 2 +- lib/misc.js | 3 + manifest.json | 2 +- page/field.css | 67 ---------------- proto.js | 7 ++ publish/chrome/chrome.js | 11 +-- publish/chrome/contexts.css | 149 ++++++++++++++++++++++++++++++++++++ publish/chrome/contexts.js | 49 ++++++++---- 8 files changed, 197 insertions(+), 93 deletions(-) delete mode 100644 page/field.css create mode 100644 publish/chrome/contexts.css diff --git a/frame.js b/frame.js index b4991cc1..d220a7ef 100644 --- a/frame.js +++ b/frame.js @@ -203,7 +203,7 @@ Volcanos("onappend", {help: "渲染引擎", list: [], _init: function(can, meta, can.core.List(list, function(item) { can.onappend.input(can, item == ""? /*空白*/ {type: "space"}: typeof item == "string"? /*按键*/ {type: html.BUTTON, value: item, onclick: function(event) { var cb = meta[item]||meta["_engine"] - cb? can.core.CallFunc(cb, [event, can, item]): can.run(event, [ctx.ACTION,item].concat(can.sup.Input())) + cb? can.core.CallFunc(cb, {event: event, can: can, button: item}): can.run(event, [ctx.ACTION,item].concat(can.sup.Input())) }}: item.length > 0? /*列表*/ {type: "select", name: item[0], values: item.slice(1), onchange: function(event) { var which = item[event.target.selectedIndex+1] diff --git a/lib/misc.js b/lib/misc.js index 15d9bfdf..0bdab745 100644 --- a/lib/misc.js +++ b/lib/misc.js @@ -46,6 +46,9 @@ Volcanos("misc", {help: "通信协议", Message: function(event, can) { var msg res.option && (msg.option = res.option) && res.option.forEach(function(item) { res[item] && (msg[item] = res[item]) }) + res._option && (msg._option = res._option) && res._option.forEach(function(item) { + res[item] && (msg[item] = res[item]) + }) return msg }, Push: function(key, value, detail) { diff --git a/manifest.json b/manifest.json index 185de454..c651be8f 100644 --- a/manifest.json +++ b/manifest.json @@ -3,7 +3,7 @@ "name": "volcanos", "version": "0.0.1", "background": {"page": "/publish/chrome/chrome.html"}, "browser_action": {"default_popup": "/publish/chrome/popup.html"}, - "content_scripts": [{"matches": [""], + "content_scripts": [{"matches": [""], "css": ["/publish/chrome/contexts.css"], "js": ["/proto.js", "/lib/base.js", "/lib/core.js", "/lib/misc.js", "/lib/page.js", "/lib/user.js", "/plugin/state.js", "/plugin/input.js", "/plugin/table.js", "/frame.js", "/publish/chrome/contexts.js" diff --git a/page/field.css b/page/field.css deleted file mode 100644 index 74f78012..00000000 --- a/page/field.css +++ /dev/null @@ -1,67 +0,0 @@ -fieldset.story { - color:white; - position:fixed; - background:radial-gradient(black, #00000073); -} -fieldset.story legend { - text-align:left; - cursor:pointer; - - background:radial-gradient(black, #00000073); -} -fieldset.story form.option div.item { - float:left; margin-right:3px; - min-height:25px; vertical-align:middle; -} -fieldset.story input[type=button] { - background-color:#FF9900; color:white; - border-radius:10px 10px 10px 10px; - border:2px solid #FF9900; -} -fieldset.story input[type=button]:hover { - background-color:#FFCC33; - border:2px solid #FFCC33; -} -fieldset.story input[type=text] { - background-color:white; color:black; - border-radius:6px 6px 6px 6px; - border:2px solid #14a58e; -} -fieldset.story input[type=text]:hover { - background-color:cyan; -} -fieldset.story div.input textarea { - border-radius:6px; - border:2px solid #14a58e; -} -fieldset.story select { - background-color:#99CC66; color:white; - border-radius:10px 10px 10px 10px; - border:2px solid #99CC66; -} - -fieldset.story div.output { - clear:both; - overflow:auto; -} -fieldset.story div.status div.item { - float:left; padding:4px; - height:18px; -} -fieldset.story div.status div.item>label { - font-size:10px; - /* color:#504242e0; */ -} - -fieldset.story table { - color:white; -} -fieldset.story table tr { - background-color:#e1f1ff1f; -} -fieldset.story table th { - background-color:#99CCFF; -} -fieldset.story table.content tr:hover { - background-color:green; -} diff --git a/proto.js b/proto.js index 05f4c89d..81b8a8b5 100644 --- a/proto.js +++ b/proto.js @@ -1,10 +1,16 @@ const kit = { + MDB_ID: "id", + MDB_KEY: "key", MDB_TIME: "time", + MDB_ZONE: "zone", MDB_TYPE: "type", MDB_NAME: "name", MDB_TEXT: "text", + MDB_LINK: "link", MDB_VALUE: "value", + MDB_INDEX: "index", + MDB_ARGS: "args", MDB_HASH: "hash", MDB_LIST: "list", @@ -123,6 +129,7 @@ const html = { CODE: "code", SPAN: "span", LABEL: "label", + VIDEO: "video", BUTTON: "button", LEGEND: "legend", TEXTAREA: "textarea", diff --git a/publish/chrome/chrome.js b/publish/chrome/chrome.js index 91ecb43d..1e27258d 100644 --- a/publish/chrome/chrome.js +++ b/publish/chrome/chrome.js @@ -74,14 +74,11 @@ Volcanos("chrome", { return true }) - chrome.contextMenus.create({title: "favor", onclick: function(event) { + chrome.contextMenus.create({title: "field", onclick: function(event) { chrome.tabs.query({currentWindow: true, active: true}, function(tabs) { - var msg = can.request(event); msg.detail = ["chrome", "", "", "favor"] - chrome.tabs.sendMessage(tabs[0].id, msg, function(res) { - return - can.run({}, ["history", "id", response.title, response.src]) - }) + var msg = can.request(event); msg.detail = ["chrome", "", "", "order"] + chrome.tabs.sendMessage(tabs[0].id, msg) }) - }, }) + }}) }) diff --git a/publish/chrome/contexts.css b/publish/chrome/contexts.css new file mode 100644 index 00000000..6c6207a5 --- /dev/null +++ b/publish/chrome/contexts.css @@ -0,0 +1,149 @@ +fieldset.contexts { + color:white; + position:fixed; + background:radial-gradient(black, #00000073); +} +fieldset.contexts legend { + text-align:left; + cursor:pointer; + + background:radial-gradient(black, #00000073); +} +fieldset.contexts form.option div.item { + float:left; margin-right:3px; + min-height:25px; vertical-align:middle; +} +fieldset.contexts input[type=button] { + background-color:#FF9900; color:white; + border-radius:10px 10px 10px 10px; + border:2px solid #FF9900; +} +fieldset.contexts input[type=button]:hover { + background-color:#FFCC33; + border:2px solid #FFCC33; +} +fieldset.contexts input[type=text] { + background-color:white; color:black; + border-radius:6px 6px 6px 6px; + border:2px solid #14a58e; +} +fieldset.contexts input[type=text]:hover { + background-color:cyan; +} +fieldset.contexts div.input textarea { + border-radius:6px; + border:2px solid #14a58e; +} +fieldset.contexts select { + background-color:#99CC66; color:white; + border-radius:10px 10px 10px 10px; + border:2px solid #99CC66; +} + +fieldset.contexts div.output { + clear:both; + overflow:auto; +} +fieldset.contexts div.status div.item { + float:left; padding:4px; + height:18px; +} +fieldset.contexts div.status div.item>label { + font-size:10px; + /* color:#504242e0; */ +} + +fieldset.contexts table { + color:white; + border:0; white-space:pre; +} +fieldset.contexts table tr { + background-color:#e1f1ff1f; +} +fieldset.contexts table th { + background-color:#99CCFF; + padding:0 4px; +} +fieldset.contexts table td { + text-align:left; + padding:0 4px; +} +fieldset.contexts table.content tr:hover { + background-color:green; +} +fieldset.contexts div.code { + background-color:#343a3445; color:white; + font-size:14px; font-family:monospace; + box-shadow: 4px 4px 20px 4px #626bd0; + padding:10px; border:solid 3px green; + text-align:left; white-space:pre; + overflow:auto; + clear:both; +} + +body>div.toast { + background:#0e3369b3; color:yellow; + position:fixed; z-index:100; + padding:5px; overflow:auto; +} +body>div.toast a { + color:yellow; +} +body>div.toast div.title { + float:left; word-break:break-all; + color:#cae850; font-size:14px; + cursor:copy; +} +body>div.toast div.duration { + color:gray; font-size:14px; + float:right; + cursor:pointer; +} +body>div.toast div.content { + text-align:center; + white-space:pre; + clear:both; +} +body>div.toast div.action div.item { + float:left; +} +body>div.toast div.progress { + height:10px; border:solid 2px green; + margin-left:-2px; + clear:both; +} +body>div.toast div.progress div.current { + height:10px; background:red; +} + +body>div.carte { + position:fixed; + background:#295b61; + color:white; + padding:4px; + z-index:30; + min-width:80px; +} +body>div.carte div.item { + padding:3px 12px; +} +body>div.carte div.item:hover { + background:red; +} + +body>div.input { + position:fixed; + background-color:#0d4142a6; + z-index:50; +} +body>div.input textarea { + box-shadow: 4px 4px 10px 1px #626bd0; + border:2px inset #14a58e; + width:165px; height:60px; + background-color: cyan; + padding:4px; + +} +body>div.input div.item { + float:left; +} diff --git a/publish/chrome/contexts.js b/publish/chrome/contexts.js index 5c1fa3ed..b20b24ab 100644 --- a/publish/chrome/contexts.js +++ b/publish/chrome/contexts.js @@ -1,35 +1,41 @@ Volcanos("chrome", { - pwd: function(can, msg, arg, cb) { + pwd: function(can, msg, arg) { msg.Push("hi", "hello") msg.Echo("hello") - console.log(arg) - cb() }, style: function(can, msg, arg) { can.page.Select(can, document.body, arg[0], function(target) { can.page.Modify(can, target, can.base.Obj(arg[1])) }) }, + order: function(can, msg, arg) { + var ui = can.user.input(event, can, ["index", "args", "selection"], function(event, button, data, list, args) { + can.run(event, [chat.FIELD, mdb.INSERT, kit.MDB_ZONE, location.hostname].concat(args), function(res) { + can.user.toast(can, "添加成功") + }) + }) + can.page.Modify(can, ui._target, {style: {left: 200, top: 200}}) + }, spide: function(can, msg, arg) { var has = {} - can.page.Select(can, document.body, "video", function(item) { + can.page.Select(can, document.body, html.VIDEO, function(item) { if (!item.src || has[item.src]) { return } has[item.src] = true var p = can.page.Select(can, document.body, "p.title")[0] var ls = item.src.split("?") var ls = ls[0].split(".") msg.Push(kit.MDB_TIME, can.base.Time()) - msg.Push(kit.MDB_TYPE, "video") - msg.Push(kit.MDB_NAME, (p && p.innerText || "video")+"."+ls[ls.length-1]) + msg.Push(kit.MDB_TYPE, html.VIDEO) + msg.Push(kit.MDB_NAME, (p && p.innerText || html.VIDEO)+"."+ls[ls.length-1]) msg.Push(kit.MDB_TEXT, item.src) msg.Push(kit.MDB_LINK, item.src) }) - can.page.Select(can, document.body, "img", function(item) { + can.page.Select(can, document.body, html.IMG, function(item) { if (!item.src || has[item.src]) { return } has[item.src] = true var ls = item.src.split("?") var ls = ls[0].split("/") msg.Push(kit.MDB_TIME, can.base.Time()) - msg.Push(kit.MDB_TYPE, "img") + msg.Push(kit.MDB_TYPE, html.IMG) if (item.src.indexOf("data:image") == 0) { msg.Push(kit.MDB_NAME, item.src.slice(item.src.length-20)) @@ -42,13 +48,13 @@ Volcanos("chrome", { }) }, field: function(can, msg, arg) { - // can.require(["https://shylinux.com/page/index.css"]) - can.require(["http://localhost:9020/page/field.css"]) - can.onappend.plugin(can, {index: arg[0], arg: arg.slice(1)}, function(sub, meta) { + can.onappend.plugin(can, {index: arg[0], arg: can.base.Obj(arg[1])}, function(sub, meta) { + can.page.ClassList.add(can, sub._target, "contexts") var top = msg.Option("top")||400 + var left = msg.Option("left")||0 can.onmotion.float.auto(can, sub._output, "carte") can.onmotion.float.auto(can, document.body, "carte") - can.page.Modify(can, sub._target, {style: {"top": top}}) + can.page.Modify(can, sub._target, {style: {"top": top, "left": left}}) can.page.Modify(can, sub._output, {style: { "max-height": window.innerHeight-top-80, "max-width": window.innerWidth, @@ -59,9 +65,9 @@ Volcanos("chrome", { can.onmotion.toggle(can, sub._action) can.onmotion.toggle(can, sub._output) can.onmotion.toggle(can, sub._status) - }, sub._legend.onclick() + }, msg.Option("selection")||sub._legend.onclick() - sub.run = function(event, cmds, cb) { + sub.run = function(event, cmds, cb) { if (cmds[0] == "_search") { return } can.run(event, [ctx.ACTION, cli.RUN, meta.index].concat(cmds), cb) } can.onmotion.move(can, sub._target, {}) @@ -70,17 +76,26 @@ Volcanos("chrome", { sub.Option(msg.Option("selection"), window.getSelection()) sub.Update() }) + + sub.onaction["保存参数"] = function(event) { + can.request(event, {zone: location.hostname, id: msg.Option(kit.MDB_ID)}) + can.run(event, [chat.FIELD, mdb.MODIFY, "top", sub._target.offsetTop]) + can.run(event, [chat.FIELD, mdb.MODIFY, "left", sub._target.offsetLeft]) + can.run(event, [chat.FIELD, mdb.MODIFY, "args", JSON.stringify(sub.Input([], true))]) + can.user.toast(can, "保存成功") + } }, document.body) }, + Option: function() { return [] }, }, ["/frame.js"], function(can) { - chrome.extension.onMessage.addListener(function(req, sender, cb) { - var msg = can.request(); can.core.List(req.option, function(key) { msg.Option(key, req[key][0]) }) + chrome.extension.onMessage.addListener(function(req, sender, cb) { var msg = can.request(); msg.Copy(req); can.misc.Log(req.detail, msg) can.core.CallFunc([can, req.detail[3]||"spide"], {can: can, msg: msg, arg: req.detail.slice(4), cb: function() { delete(msg._event), delete(msg._can), cb(msg) }}) }) - can.run = function(event, cmds, cb) { var msg = can.request(event, {hostname: location.hostname}); msg.detail = ["page"].concat(cmds) + can.run = function(event, cmds, cb) { if (cmds[0] == "_search") { return } + var msg = can.request(event, {hostname: location.hostname}); msg.detail = ["page"].concat(cmds) chrome.runtime.sendMessage(msg, function(res) { can.base.isFunc(cb) && cb(msg.Copy(res)) }) } can.run({}, [ctx.ACTION, ctx.COMMAND], function(msg) {