From 9dd111001f2b6e0febf3b3af274846c38288af55 Mon Sep 17 00:00:00 2001 From: shaoying Date: Mon, 9 Dec 2019 01:45:50 +0800 Subject: [PATCH] opt frame --- core.js | 2 +- frame.js | 51 ++++++++++++++------------ input.js | 4 +++ page.js | 107 +++++++++++++++++++++++++++++++++++++++++++++---------- proto.js | 25 +++++++------ table.js | 60 ++++++++++++++++--------------- 6 files changed, 168 insertions(+), 81 deletions(-) diff --git a/core.js b/core.js index 0d04fdd8..689ac706 100644 --- a/core.js +++ b/core.js @@ -16,7 +16,7 @@ Volcanos("core", {help: "核心模块", var list = [], res; for (var i = 0; i < obj.length; i++) { - typeof cb == "function"? (res = cb(obj[i], i, obj)) != undefined && list.push(res): list.push(res); + typeof cb == "function"? (res = cb(obj[i], i, obj)) != undefined && list.push(res): list.push(obj[i]); } return list; }), diff --git a/frame.js b/frame.js index 0dd316c2..009832bc 100644 --- a/frame.js +++ b/frame.js @@ -7,37 +7,35 @@ var can = Volcanos("chat", { var name = meta.name, args = meta.args || []; var feature = JSON.parse(meta.feature||'{}'); var plugin = Volcanos(name, {type: "local", - Append: shy("添加控件", function(item, cb) {item = item || {type: "text", name: "", className: "args temp"}; + Append: function(item, cb) {item = item || {type: "text", name: "", className: "args temp"}; var name = item.name || item.value || "args"+plugin.page.Select(can, option, "input.args.temp").length; var count = plugin.page.Select(can, option, ".args").length, value = ""; args && count < args.length && (value = args[count] || item.value || ""); plugin[name] = can.Inputs(plugin, item, name, value, cb, option); - }), - Select: shy("选择控件", function(event, target, focus) { + }, + Select: function(event, target, focus) { can.plugin = field, can.input = target || option.querySelectorAll("input")[1]; focus && can.input.focus(); - }), - Option: shy("控件参数", function(key, value) { + }, + Option: function(key, value) { value != undefined && option[key] && (option[key].value = value) return key != undefined? option[key] && option[key].value || "": plugin.page.Select(can, option, ".args", function(item) {return item.value}) - }), - Check: shy("检查控件", function(event, target, cb) { + }, + Check: function(event, target, cb) { plugin.page.Select(can, option, ".args", function(item, index, list) { - item == target && index < list.length-1 && can.plugin == field && list[index+1].focus(); - (target == undefined || item == target) && index == list.length-1 && plugin.Runs(event, cb); - return item; + if (item == target && index < list.length-1) {can.plugin == field && list[index+1].focus(); return item} }).length == 0 && plugin.Runs(event, cb) - }), - Runs: shy("执行命令", function(event, cb) {plugin.Run(event, plugin.Option(), cb)}), - Run: shy("执行命令", function(event, args, cb, silent) {var show = !silent; + }, + Runs: function(event, cb) {plugin.Run(event, plugin.Option(), cb)}, + Run: function(event, args, cb, silent) {var show = !silent; show && plugin.Timer(1000, function() {show && plugin.user.toast(kit.Format(args||["running..."]), meta.name, -1)}); run(event, args, function(msg) {if (silent) {return typeof cb == "function" && cb(msg)} var display = feature.display || "table"; plugin[display] = can.Output(plugin, display, msg, cb, output, option) show = false, plugin.user.toast(); }) - }), + }, }, ["core", "page", "user", "state"], function(plugin) { function next(list, cb) { list && list.length > 0 && cb(list[0], function() { @@ -55,32 +53,39 @@ var can = Volcanos("chat", { Inputs: shy("构造控件", function(can, item, name, value, cb, option) { var input = Volcanos(name, {type: "local", Select: function(event) {can.Select(event, input.target, true)}, - run: function(event) {(input[item.cb] || can[item.cb] || can.Check)(event)}, + run: function(event, cmd, cb, silent) { + can.Check(event, event.target, cb) + }, }, ["core", "page", "user", "input"], function(input) {typeof cb == "function" && cb(); var target = input.onimport.init(can, item, name, value, option); input.target = target, target.Input = input; - kit.Item(input.onaction, function(key, cb) {target[key] = function(event) { + can.core.Item(input.onaction, function(key, cb) {target[key] = function(event) { cb(event, input, item.type, option); - }}) + }}); + + (item.type == "text" || item.type == "textarea") && !target.placeholder && (target.placeholder = item.name); + item.type == "text" && !target.title && (target.title = item.placeholder || item.name || ""); }) return input }), Output: shy("构造组件", function(can, type, msg, cb, target, option) { type = "table" var output = Volcanos(type, {type: "local", - run: function(event, can, msg, value, index, key) {(output[item.cb] || can[item.cb] || can.Check)(event)}, + run: function(event, cmd, cb, silent) { + (output[cmd[1]] || can[cmd[1]] || can.Run)(event, cmd, cb, silent); + }, size: function(cb) { can.onfigure.meta.size(function(width, height) { - cb(width, height) - }) + cb(width, height); + }); } }, ["core", "page", "user", type], function(output) { - output.onimport.init(output, msg, cb, target, option) + output.onimport.init(output, msg, cb, target, option); - kit.Item(output.onaction, function(key, cb) {target[key] = function(event) { - cb(event, output, type, msg, target) + can.core.Item(output.onaction, function(key, cb) {target[key] = function(event) { + cb(event, output, type, msg, target); }}) target.oncontextmenu = function(event) { diff --git a/input.js b/input.js index 2aacabdf..00ba7fed 100644 --- a/input.js +++ b/input.js @@ -26,10 +26,14 @@ Volcanos("onimport", {help: "导入数据", list: [], can.page.ClassList.add(can, item, value) }) return can.Dream(option, "input", input)[input.name] + return can.page.Append(can, option, [input])[input.name] }), }) Volcanos("onaction", {help: "控件交互", list: [], onclick: function(event, can, type, option) {can.Select(event); type == "button" && can.run(event)}, + onkeydown: function(event, can, type, option) { + if (event.key == "Enter") {return can.run(event, [])} + }, }) Volcanos("onchoice", {help: "控件菜单", list: [], }) diff --git a/page.js b/page.js index 90eb5d44..05e70fe3 100644 --- a/page.js +++ b/page.js @@ -4,45 +4,116 @@ Volcanos("page", {help: "网页模块", for (var i = 1; i < arguments.length; i++) { if (list.indexOf(arguments[i]) == -1) {return false} } - return true + return true; }, add: function(can, obj, key) {var list = obj.className? obj.className.split(" "): [] - return obj.className = list.concat(can.core.List(arguments, function(value, index) { - return index > 0 && list.indexOf(value) == -1? value: undefined - })).join(" ") + return obj.className = list.concat(can.core.List(key, function(value, index) { + return list.indexOf(value) == -1? value: undefined; + })).join(" ").trim(); }, del: function(can, obj, key) {var list = can.core.List(arguments, function(value, index) {return index > 0? value: undefined}) return obj.className = can.core.List(obj.className.split(" "), function(value) { - return list.indexOf(value) == -1? value: undefined - }).join(" ") + return list.indexOf(value) == -1? value: undefined; + }).join(" ").trim(); }, }, - Display: function(text) { - if (text.startsWith("http")) {return ""+text+""} - return text - }, - Select: shy("选择器", function(can, obj, key, cb, interval, cbs) { + Select: shy("选择节点", function(can, obj, key, cb, interval, cbs) { var item = obj && obj.querySelectorAll(key); return can.core.List(item, cb, interval, cbs); }), Modify: shy("修改节点", function(can, target, value) { - if (typeof value == "string") {target.innerHTML = value} - return target + target = typeof target == "string"? document.querySelector(target): target; + typeof value == "string"? (target.innerHTML = value): can.core.Item(value, function(key, value) { + typeof value != "object"? (target[key] = value): can.core.Item(value, function(sub, value) { + target[key] && (target[key][sub] = value); + }) + }); + return target; + }), + Create: shy("创建节点", function(can, key, value) { + return can.page.Modify(can, document.createElement(key), value); }), Append: shy("添加节点", function(can, target, key, value) { - if (typeof key == "string") {var res = document.createElement(key); - return target.appendChild(res), can.page.Modify(can, res, value); - } + if (typeof key == "string") {var res = can.page.Create(can, key, value); return target.appendChild(res), res} + + value = value || {} + can.core.List(key, function(item, index) { + // 基本结构: type name data list + var type = item.type || "div", data = item.data || {}; + var name = item.name || data.name; + + // 数据调整 + can.core.Item(item, function(key, value) { + switch (key) { + case "type": + case "name": + case "data": + case "list": + break + case "click": + data.onclick = item.click; + break + case "inner": + data.innerHTML = item.inner; + break + default: + data[key] = item[key]; + } + }) + + if (item.view) {var list = can.core.List(item.view); + (list.length > 0 && list[0]) && can.page.ClassList.add(can, data, list[0]) + type = list[1] || "div" + data.innerHTML = list[2] || "" + name = name || list[3] || "" + } + + // 创建节点 + name = name || data.className || type; + var node = can.page.Create(can, type, data); + value.last = node, value.first || (value.first = node), name && (value[name] = node); + item.list && can.page.Append(can, node, item.list, value); + target && target.append && target.append(node); + }) + return value }), + Appends: shy("添加节点", function(can, target, key, value) { + return target.innerHTML = "", can.page.Append(can, target, key, value) + }), + AppendTable: shy("添加表格", function(can, target, msg, list) { - var table = can.page.Append(can, target, "table") + var table = can.page.Append(can, target, "table"); var tr = can.page.Append(can, table, "tr"); can.core.List(list, function(key) {can.page.Append(can, tr, "th", key)}); msg.Table(function(line) {var tr = can.page.Append(can, table, "tr"); can.core.List(list, function(key) {can.page.Append(can, tr, "td", can.page.Display(line[key]))}); }) - return table + return table; }), + + Display: function(text) { + if (text.startsWith("http")) {return ""+text+""} + return text; + }, + CopyText: function(can, text) { + if (text) { + var input = can.page.Append(can, document.body, [{type: "textarea", inner: text}]).last; + input.focus(), input.setSelectionRange(0, text.length); + } + + text = window.getSelection().toString(); + if (text == "") {return ""} + + // kit.History("txt", -1) && kit.History("txt", -1).data == text || kit.History("txt", -1, text) && + document.execCommand("copy"); + input && document.body.removeChild(input); + return text; + }, + Download: function(can, name, value) { + can.user.toast({title: "下载中...", width: 200, + text:''+name+'', + }) + }, }) diff --git a/proto.js b/proto.js index 88628afd..b7d4a2a2 100644 --- a/proto.js +++ b/proto.js @@ -1,4 +1,4 @@ -function shy(help, meta, list, cb) { +function shy(help, meta, list, cb) { // 封装函数 var index = -1, value = "", type = "string", args = arguments; function next(check) { if (++index >= args.length) {return false} @@ -13,15 +13,16 @@ function shy(help, meta, list, cb) { cb.runs = function() {}; return cb; } -function Volcanos(name, can, libs, cb) {var list = arguments.callee.list || [], meta = arguments.callee.meta || { - // 全局属性 +function Volcanos(name, can, libs, cb) { // 封装模块 + // 全局属性 + var list = arguments.callee.list || [], meta = arguments.callee.meta || { create_time: new Date(), path: "/static/volcanos/", index: 1, cache: {}, }; + // 定义原型 var id = 1, conf = {}, conf_cb = {}, sync = {}; can[name] || list.push({name: name, can: can, create_time: new Date()}) && (can.__proto__ = { - // 通用属性 - create_time: new Date(), name: name, help: "插件模块", load: function(name) { + create_time: new Date(), name: name, path: "", help: "插件模块", load: function(name) { if (meta.cache[name]) {var cache = meta.cache[name]; for (var i = 0; i < cache.length; i++) {var item = cache[i]; if (item.can.name == can.name) {continue} @@ -97,7 +98,7 @@ function Volcanos(name, can, libs, cb) {var list = arguments.callee.list || [], list.push(line) break } - var ui = kit.AppendChild(target, item? list: [{view: ["item"+style], data: {id: "item"+can.ID(), draggable: false}, list:list}]) + var ui = can.page.Append(can, target, item? list: [{view: ["item"+style], data: {id: "item"+can.ID(), draggable: false}, list:list}]) return ui["item"+style].Meta = text, ui }), Cache: shy("缓存器", function(name, data) { @@ -109,10 +110,12 @@ function Volcanos(name, can, libs, cb) {var list = arguments.callee.list || [], }), }), arguments.callee.meta = meta, arguments.callee.list = list; + // 加载模块 + function next() { + libs && libs.length > 1? Volcanos(name, can, libs.slice(1), cb): + typeof cb == "function" && setTimeout(function() {cb(can)}, 10); + } if (libs && libs.length > 0) { - function next() { - libs.length > 1? Volcanos(name, can, libs.slice(1), cb): setTimeout(function() {cb(can)}, 10); - } if (can[libs[0]]) { // 重复加载 next() @@ -123,12 +126,12 @@ function Volcanos(name, can, libs, cb) {var list = arguments.callee.list || [], // 加载脚本 var script = document.createElement("script"); script.src = (can.path||meta.path)+libs[0]+".js"; - script.type = "text/javascript"; script.onload = function() {can.load(libs[0]), next()} document.body.appendChild(script); } } else { - typeof cb == "function" && cb(can); + // 独立模块 + next() } return can } diff --git a/table.js b/table.js index dbfc8a0b..5510c8da 100644 --- a/table.js +++ b/table.js @@ -1,11 +1,11 @@ Volcanos("onimport", {help: "导入数据", list: [], - init: function(can, msg, cb, target, option) {target.innerHTML = "" - var table = can.page.AppendTable(can, target, msg, msg.append) + init: function(can, msg, cb, target, option) {target.innerHTML = ""; + var table = can.page.AppendTable(can, target, msg, msg.append); table.onclick = function(event) { switch (event.target.tagName) { case "TD": can.onimport.which(event, table, msg.append, function(index, key) { - can.onexport["复制"](event, can, msg, td.innerHTML) + can.ondetail["复制"](event, can, msg, event.target.innerHTML, index, key, event.target); }) break case "TH": @@ -20,16 +20,17 @@ Volcanos("onimport", {help: "导入数据", list: [], can.user.carte(event, shy("", can.ondetail, can.ondetail.list, function(event, value, meta) { var cb = meta[value]; typeof cb == "function"? cb(event, can, msg, value, index, key, target): - can.run(event, typeof cb == "string"? cb: value, index, key, target) + can.run(event, [index, typeof cb == "string"? cb: value, key, target.innerHTML], null, true) })) }) + break case "TH": case "TR": case "TABLE": can.user.carte(event, shy("", can.onchoice, can.onchoice.list, function(event, value, meta) { var cb = meta[value]; typeof cb == "function"? cb(event, can, msg, value, target): - can.run(event, typeof cb == "string"? cb: value, target) + can.run(event, [typeof cb == "string"? cb: value, target], null, true) })) } event.stopPropagation() @@ -38,8 +39,8 @@ Volcanos("onimport", {help: "导入数据", list: [], typeof cb == "function" && cb(msg); }, which: function(event, table, list, cb) {if (event.target == table) {return cb(-1, "")} - can.page.Select(can, table, "tr", can.core.List, function(tr, index) {if (event.target == tr) {return cb(index, "")} - can.page.Select(can, tr, "th,td", can.core.List, function(td, order) { + can.page.Select(can, table, "tr", function(tr, index) {if (event.target == tr) {return cb(index, "")} + can.page.Select(can, tr, "th,td", function(td, order) { if (event.target == td) {return cb(index, list[order])} }) }) @@ -48,43 +49,46 @@ Volcanos("onimport", {help: "导入数据", list: [], Volcanos("onaction", {help: "组件交互", list: [], }) Volcanos("onchoice", {help: "组件菜单", list: ["返回", "清空", "复制", "下载", "表格", "绘图", "媒体"], - void: function(event, can, msg, value) { - can.run(event, [value]) - }, "清空": function(event, can, msg, value, target) { - target.innerHMTL = "" + can.target.innerHTML = ""; }, "复制": function(event, can, msg, value, target) { - can.onexport["复制"](event, can, msg, msg.result && msg.result.join() || "") + var list = can.onexport.Format(can, msg, "data"); + can.user.toast(can.page.CopyText(can, list[2]), "复制成功") }, "下载": function(event, can, msg, value, target) { - can.onexport["下载"](event, can, msg, "hi", msg.result && msg.result.join() || "") + var list = can.onexport.Format(can, msg, "data"); + can.page.Download(can, list[0]+list[1], list[2]); }, }) Volcanos("ondetail", {help: "组件详情", list: ["选择", "修改", "删除", "复制", "下载"], - void: function(event, can, msg, value, index, key, target) { - can.run(event, [value, index, key, msg[key][index]]) - }, "选择": "select", - "修改": "modify", "删除": "delete", - "修改": function(event, can, msg, value, index, key, target) { - var text = target.innerHTML - target.innerHTML = "hi" + "修改": function(event, can, msg, value, index, key, td) { + var text = td.innerHTML; + can.page.Appends(can, td, [{type: "input", style: {width: td.clientWidth+"px"}, data: {onkeydown: function(event) { + if (event.key != "Enter") {return} + can.run(event, [index, "modify", key == "value" && msg.key? msg[key][index]: key, event.target.value,], function(msg) { + td.innerHTML = event.target.value; + can.user.toast("修改成功") + }, true) + }}}]) }, "复制": function(event, can, msg, value, index, key, target) { - can.onexport["复制"](event, can, msg, msg[key][index]) + can.user.toast(can.page.CopyText(can, target.innerHTML), "复制成功") }, "下载": function(event, can, msg, value, index, key, target) { - can.onexport["下载"](event, can, msg, "hi", msg[key][index]) + can.page.Download(can, key, target.innerHTML); }, }) -Volcanos("onexport", {help: "导出数据", list: ["复制", "下载"], - "复制": function(event, can, msg, value) { - can.Log(event, can, msg, value) - }, - "下载": function(event, can, msg, name, value) { - can.Log(event, can, msg, name, value) +Volcanos("onexport", {help: "导出数据", list: [], + Format: function(can, msg, name) { + var ext = ".csv", txt = can.page.Select(can, can.target, "tr", function(tr) { + return can.page.Select(can, tr, "td,th", function(td) {return td.innerText}).join(",") + }).join("\n"); + + !txt && (ext = ".txt", txt = msg.result && msg.result.join("") || ""); + return [name, ext, txt] }, })