From 50ba923b33968641c765160daced320da6c88753 Mon Sep 17 00:00:00 2001 From: shaoying Date: Mon, 3 Feb 2020 14:22:10 +0800 Subject: [PATCH] opt wiki/feel.js --- lib/page.js | 6 +- page/chat.js | 3 + pane/Toast.js | 7 +- plugin/wiki/feel.js | 158 ++++++++++++++++++++++++++++++-------------- plugin/wiki/word.js | 6 +- 5 files changed, 125 insertions(+), 55 deletions(-) diff --git a/lib/page.js b/lib/page.js index 2c8dde4f..bfd55004 100644 --- a/lib/page.js +++ b/lib/page.js @@ -189,11 +189,11 @@ Volcanos("page", {help: "网页模块", AppendField: shy("添加插件", function(can, target, type, item) { var dataset = {}; item && item.name && (dataset.names = item.name); var field = can.page.Append(can, target, [{view: [type, "fieldset"], list: [ - {view: ["border-left"]}, {view: ["border-right"]}, + // {view: ["border-left"]}, {view: ["border-right"]}, item.pos? undefined: {text: [(item.nick||item.name||"")+"("+(item.help||"")+")", "legend"]}, {view: ["option", "form"], dataset: dataset, list: [{type: "input", style: {display: "none"}}]}, {view: ["action"]}, {view: ["output"]}, {view: ["status"]}, - {view: ["border-bottom"]}, + // {view: ["border-bottom"]}, ]}]).first; return field; }), @@ -207,7 +207,7 @@ Volcanos("page", {help: "网页模块", }}); can.page.Append(can, table, can.core.List(msg.Table(), function(line, index) { - return {type: "tr", list: can.core.List(list, function(key) {var cbcb, cbcbs; + return {type: "tr", dataset: {index: index}, list: can.core.List(list, function(key) {var cbcb, cbcbs; typeof cb == "function" && (cbcb = function(event) {cb(event, line[key], key, index, event.target.parentNode, event.target)}); typeof cbs == "function" && (cbcbs = function(event) {cbs(event, line[key], key, index, event.target.parentNode, event.target)}); return {type: "td", inner: can.page.Display(line[key]), click: cbcb, oncontextmenu: cbcbs}; diff --git a/page/chat.js b/page/chat.js index 46593c19..04a82280 100644 --- a/page/chat.js +++ b/page/chat.js @@ -21,6 +21,9 @@ Volcanos("onaction", {help: "组件交互", list: [], can.Action.escape && can.Action.escape(event) break case " ": + if (event.target.tagName == "INPUT" || event.target.tagName == "TEXTAREA") { + break + } can.Favor && can.page.Select(can, can.Favor.Show(), "input.cmd", function(item) { item.focus() }) diff --git a/pane/Toast.js b/pane/Toast.js index 06e5e5c7..661af1d8 100644 --- a/pane/Toast.js +++ b/pane/Toast.js @@ -4,6 +4,7 @@ Volcanos("onimport", {help: "导入数据", list: [], can.target.style.height = "" can.target.style.width = "" + var timer; can.user.toast = function(text, title, duration, list) {if (!text) {return can.Hide()} text = typeof text == "object"? text: {list: list, text: text, title: title||""} text.duration = text.duration || conf.duration || 3000 @@ -20,9 +21,13 @@ Volcanos("onimport", {help: "导入数据", list: [], var width = text.width||text.text.length*10+100 width = width>800?800:width can.Show(event, text.width==undefined? width: text.width, text.height==undefined? 80: text.height) + toast.Hide = can.Hide + toast.Show = can.Show + + if (text.duration == -1) {return {toast: toast}} var begin = can.base.Time().split(" ")[1] - var timer = can.Timer({value: 1000, length: text.duration > 0? text.duration/1000: text.duration}, function(t, i) { + timer = can.Timer({value: 1000, length: text.duration > 0? text.duration/1000: text.duration}, function(t, i) { if (i < 10) {return} if (i > 10000) {return true} toast.tick.innerHTML = can.base.Duration(i*t) + " after " + begin diff --git a/plugin/wiki/feel.js b/plugin/wiki/feel.js index 97fd436c..4e944594 100644 --- a/plugin/wiki/feel.js +++ b/plugin/wiki/feel.js @@ -1,37 +1,105 @@ Volcanos("onimport", {help: "导入数据", list: [], init: function(can, msg, cb, output, action, option) {output.innerHTML = ""; - if (msg.append && msg.append.length > 0) { - var table = can.page.AppendTable(can, output, msg, msg.append); - var prefix = can.page.Append(can, output, [{view: ["prefix"], list: msg.Table(function(item) { - var items = item.path.split(".") - switch (items[items.length-1]) { - case "JPG": - return {img: "/share/local/"+item.path, width: "200"} - case "MOV": - return {type: "video", width: "200", - data: {controls: "controls", autoplay: false, loop: true, src: "/share/local/"+item.path}} - default: - return - } - })}]); + if (!msg.append || msg.append.length == 0) {return} - table.onclick = function(event) {switch (event.target.tagName) { - case "TD": - can.onimport.which(event, table, msg.append, function(index, key) { - var name = event.target.innerHTML.trim() - if (name.endsWith("/")) { - can.Option("name", name) - can.run(event, [name], function(msg) {}) - } - }) - break - case "TH": - break - case "TR": - case "TABLE": - }} - return typeof cb == "function" && cb(msg), table; + var list = msg.Table() + function view(index, width, auto, cb) {var item = list[can.page.Select(can, table, "tr")[index+1].dataset.index]; + function menu(event) {var target = event.target; + can.user.carte(event, shy("", can.ondetail, can.feature.detail || can.ondetail.list, function(event, cmd, meta) {var cb = meta[cmd]; + typeof cb == "function" && cb(event, can, item, index, "path", cmd, target); + })) + } + + var items = item.path.split("."); + switch (items[items.length-1]) { + case "JPG": + return {img: "/share/local/web.wiki.feel/"+item.path, width: width, oncontextmenu: menu} + case "MOV": + case "m4v": + return {type: "video", width: width, oncontextmenu: menu, + onplay: cb, onpause: cb, + onloadedmetadata: cb, + onloadeddata: cb, + ontimeupdate: cb, + onended: cb, + data: {src: "/share/local/web.wiki.feel/"+item.path, controls: "controls", autoplay: auto, loop: false}} + default: + return + } } + + var table = can.page.AppendTable(can, output, msg, msg.append); + + var begin = 0, limit = 3; + var rate = 1, width = 200; + var control = can.page.Append(can, output, [{view: ["control"], list: [ + {select: [["width", 100, 200, 400, 600, 800], function(event, value) {width = parseInt(value), page(begin, limit)}]}, + {select: [["rate", 0.1, 0.2, 0.5, 1, 2, 3, 5, 10], function(event, value) {rate = value}]}, + {button: ["prev", function() { + begin > 0 && (begin -= limit, page(begin, limit)); + }]}, + {text: [begin+"-"+(begin+limit)], name: "offset"}, + {button: ["next", function() { + begin < msg[msg.append[0]].length && (begin += limit, page(begin, limit)); + }]}, + {text: [list.length]}, + {select: [["limit", 3, 6, 9, 12, 15], function(event, value) {limit = parseInt(value), page(begin, limit)}]}, + ]}]) + control.rate.value = rate + control.width.value = width + + var preview = can.page.Append(can, output, [{view: ["preview"]}]).last + function page(begin, limit) { + control.offset.innerHTML = begin+"-"+(begin+limit); + can.page.Appends(can, preview, msg.Table(function(item, index) { + if (begin <= index && index < begin+limit) {return view(index, width, false, function(event) {var video = event.target; + switch (event.type) { + case "loadeddata": video.playbackRate = rate; break + case "timeupdate": video.playbackRate = rate; break + } + })} + })); + } + page(begin, limit); + + function show(index) {var item = list[can.page.Select(can, table, "tr")[index+1].dataset.index]; + var video; + var timer = can.user.toast({text: "", list: [{view: "control", list: [ + {button: ["close", function(event) {video.pause(), timer.toast.Hide()}]}, + {select: [["width", 100, 200, 400, 600, 800], function(event, value) {timer.toast.Show(event, parseInt(value)+20), video.width = value}]}, + {select: [["rate", 0.1, 0.2, 0.5, 1, 2, 3, 5, 10], function(event, value) {rate = video.playbackRate = value}]}, + {button: ["prev", function(event) {show(index-1)}]}, + {text: index+"/"+list.length}, + {button: ["next", function(event) {show(index+1)}]}, + {type: "br"}, {text: item.path}, + {type: "br"}, {text: item.label}, + ]}].concat([view(index, 400, true, function(event) {video = event.target; + switch (event.type) { + case "loadeddata": video.playbackRate = rate; break + case "ended": show(index+1); break + } + })]), width: 400+20, height: 620, duration: -1}) + timer.toast.width.value = 400; + timer.toast.rate.value = rate; + } + + table.onclick = function(event) {switch (event.target.tagName) { + case "TD": + can.onimport.which(event, table, msg.append, function(index, key) { + var name = event.target.innerHTML.trim() + if (name.endsWith("/")) { + can.Option("name", name), can.run(event, [name]) + } else { + show(index); + } + }) + break + case "TH": + break + case "TR": + case "TABLE": + }} + return typeof cb == "function" && cb(msg), table; }, which: function(event, table, list, cb) {if (event.target == table) {return cb(-1, "")} can.page.Select(can, table, "tr", function(tr, index) {if (event.target == tr) {return cb(index-1, "")} @@ -41,9 +109,10 @@ Volcanos("onimport", {help: "导入数据", list: [], }) }, }) -Volcanos("onaction", {help: "组件菜单", list: ["保存", - ], - "保存": function(event, can, msg, cmd, target) { +Volcanos("onaction", {help: "组件菜单", list: ["预览", "上传"], + "预览": function(event, can, msg, cmd, target) { + }, + "上传": function(event, can, msg, cmd, target) { can.run(event, ["action", cmd, can.Option("name"), can.page.Select(can, target, "tr", function(tr) {return can.page.Select(can, tr, "th,td", function(td) {return td.innerHTML}).join(",")}).join("\n")], function() { can.user.toast("保存成功") }, true) @@ -54,23 +123,12 @@ Volcanos("onchoice", {help: "组件交互", list: ["保存", "清空", ["rect", console.log("choice", cmd) }, }) -Volcanos("ondetail", {help: "组件详情", list: ["编辑", "删除"], - "编辑": function(event, can, msg, index, key, cmd, target) { - can.user.prompt("文字", function(text) { - if (target.tagName == "text") {return target.innerHTML = text} - - var data = {"text-anchor": "middle", "dominant-baseline": "middle"} - var figure = can.onfigure[target.tagName] - figure.text(event, can, data, target) - - var p = can.onaction.push(event, can, data, "text", can.svg) - p.innerHTML = text; - - target.Text && can.page.Remove(can, target.Text) && delete(target.Text) - target.Text = p - }, target.Text && target.Text.innerText || "") - }, - "复制": function(event, can, msg, index, key, cmd, target) { +Volcanos("ondetail", {help: "组件详情", list: ["标签", "删除"], + "标签": function(event, can, msg, index, key, cmd, target) { + can.user.prompt("目标", function(kind) { + can.run(event, ["action", "标签", msg.path, kind], function() { + }, true) + }) var figure = can.onfigure[target.tagName] figure.copy(event, can, target) }, diff --git a/plugin/wiki/word.js b/plugin/wiki/word.js index a8a70e28..47d16b70 100644 --- a/plugin/wiki/word.js +++ b/plugin/wiki/word.js @@ -17,7 +17,11 @@ Volcanos("onimport", {help: "导入数据", list: [], return typeof cb == "function" && cb(msg), table; } - var last = can.page.Append(can, output, [{type: "textarea", cols: 40, rows: 18, inner: msg.Result()}]).last; + can.page.Append(can, output, [{view: "preview", inner: msg.Option("preview"), style: { + float: "left", "max-height": "250px", overflow: "auto", + border: "solid 2px red", + }}]) + var last = can.page.Append(can, output, [{type: "textarea", cols: 32, rows: 19, inner: msg.Result()}]).last; return typeof cb == "function" && cb(msg), can.view = last; }, which: function(event, table, list, cb) {if (event.target == table) {return cb(-1, "")}