Volcanos("onimport", {help: "导入数据", list: [], init: function(can, msg, cb, output, action, option) {output.innerHTML = ""; if (!msg.append || msg.append.length == 0) {return} 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 "png": case "JPG": return {className: "preview", img: "/share/local/web.wiki.feel/"+item.path, width: width, oncontextmenu: menu} case "MOV": case "m4v": return {className: "preview", 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 = 600; 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), width = value timer.toast.preview.setAttribute("width", value) // 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, 600, true, function(event) {video = event.target; switch (event.type) { case "loadeddata": video.playbackRate = rate; break case "ended": show(index+1); break } })]), width: 600+20, height: 620, duration: -1}) timer.toast.width.value = 600; 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": }} table.oncontextmenu = function(event) {var target = event.target; switch (event.target.tagName) { case "TD": can.onimport.which(event, table, msg.append, function(index, key) { can.user.carte(event, shy("", can.ondetail, can.feature.detail || can.ondetail.list, function(event, cmd, meta) {var cb = meta[cmd]; var id = msg.Ids(index); var sub = can.Event(event); msg.append.forEach(function(key) {sub.Option(key, msg[key][index].trim())}) typeof cb == "function"? cb(event, can, msg, index, key, cmd, target): // can.run(event, [id, typeof cb == "string"? cb: cmd, key, target.innerHTML], function(msg) { can.run(event, ["action", typeof cb == "string"? cb: cmd, key, target.innerHTML], function(msg) { can.onimport.init(can, msg, cb, output, option) }, true) })) }) event.stopPropagation() event.preventDefault() break case "TH": 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, "")} can.page.Select(can, tr, "th,td", function(td, order) { if (event.target == td) {return cb(index-1, list[order])} }) }) }, }) 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) }, }) Volcanos("onchoice", {help: "组件交互", list: ["保存", "清空", ["rect", "rect", "line", "circle"]], "清空": function(event, can, msg, cmd, target) { console.log("choice", cmd) }, }) 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) }) }, }) Volcanos("onstatus", {help: "组件状态", list: ["begin", "width", "point", "which"], "begin": function(event, can, value, cmd, target) {target.innerHTML = value? value.x+","+value.y: ""}, "width": function(event, can, value, cmd, target) {target.innerHTML = value? value.width+","+value.height: ""}, "point": function(event, can, value, cmd, target) {target.innerHTML = value.x+","+value.y}, "which": function(event, can, value, cmd, target) {var figure = can.onfigure[value.tagName]; target.innerHTML = figure? figure.show(event, can, value, target): value.tagName; }, }) Volcanos("onexport", {help: "导出数据", list: []})