diff --git a/README.md b/README.md index 789ea716..2a0aaeab 100644 --- a/README.md +++ b/README.md @@ -5,57 +5,7 @@ volcanos是一个前端框架。 通过插件化方式加载功能模块，每个模块都有框架与输入与输出。 通过模块化方式管理模块依赖，可以动态按需加载各种模块。 - - -chat - -proto - -ID 生成器 - -Log 日志器 - -Conf 配置器 - -Sync 同步器 - -Timer 定时器 - -Event 触发器 - -Dream 构造器 - -Cache 缓存器 - -Story 存储器 - -Plugin - -Inputs - -onimport 导入数据 - -onaction 控件交互 - -onchoice 控件菜单 - -ondetail 控件详情 - -onexport 导出数据 - -Output - -base 基础模块 - -core 核心模块 - -misc 工具模块 - -page 网页模块 - -user 用户模块" - - + ## 1 原型 ### 1.1 ID 生成器 @@ -69,14 +19,33 @@ volcanos是一个前端框架。 ### 1.9 Story 存储器 ## 2 框架 -### 2.1 Plugin 插件 -### 2.2 Inputs 控件 -### 2.3 Output 组件 +### 2.1 Page 页面 +### 2.2 Pane 面板 +### 2.3 Plugin 插件 +### 2.4 Inputs 控件 +### 2.5 Output 组件 -## 3 模块 +## 3 核心模块 ### 3.1 base 模块 ### 3.2 core 模块 ### 3.3 misc 模块 ### 3.4 page 模块 ### 3.5 user 模块 +## 4 事件模块 +### 4.1 onimport 模块 +### 4.2 onaction 模块 +### 4.3 onchoice 模块 +### 4.4 ondetail 模块 +### 4.5 onexport 模块 + +## 5 配置 +### 5.1 Header +### 5.2 Ocean +### 5.3 River +### 5.4 Target +### 5.5 Source +### 5.6 Action +### 5.7 Storm +### 5.8 Steam +### 5.9 Footer diff --git a/frame.js b/frame.js index ce65aabb..5be2ded7 100644 --- a/frame.js +++ b/frame.js @@ -1,67 +1,61 @@ var can = Volcanos("chat", { - Page: shy("构造网页", function(can, name, list, cb, target) { + Page: shy("构造网页", function(can, name, conf, cb, body) { var page = Volcanos(name, {type: "local", - Plugin: can.Plugin, - Inputs: can.Inputs, - Output: can.Output, - run: function(event, option, cmds, cb) { - ctx.Run(event, option, cmds, cb) + Plugin: can.Plugin, Inputs: can.Inputs, Output: can.Output, + + Report: function(event, value, key) { + kit.Item(page, function(index, item) { + item.Import && item.Import(event, value, key) + }) }, - }, ["core", "page", "user", "page/"+name], function(page) { - can.core.Next(list, function(item, cb) { - page[item] = can.Pane(page, item, cb, can.page.Select(can, target, "fieldset."+item)[0] || - can.page.AppendField(can, target, item+" dialog")) + + run: function(event, option, cmds, cb) {ctx.Run(event, option, cmds, cb)}, + }, Config.libs.concat(["page/"+name]), function(page) { + can.core.Next(conf.pane, function(item, cb) { + page[item.name] = can.Pane(page, item.name, item, cb, can.page.Select(can, body, "fieldset."+item.name)[0] || + can.page.AppendField(can, body, item.name+" dialog", item)) }, function() {typeof cb == "function" && cb(page)}) }) - return page + return page.target = body, page }), - Pane: shy("构造面板", function(can, name, cb, field) { + Pane: shy("构造面板", function(can, name, meta, cb, field) { var option = field.querySelector("form.option"); var action = field.querySelector("div.action"); var output = field.querySelector("div.output"); var river = "", storm = ""; + var pane = Volcanos(name, {type: "local", - Save: function(name, output) {pane.Cache(name, output, "hi")}, - Load: function(name, output) {pane.Cache(name, output)}, + Plugin: can.Plugin, Inputs: can.Inputs, Output: can.Output, - Inputs: can.Inputs, - Output: can.Output, - Plugin: function(item, type, index) {var name = item.name; - pane[item.name] = can.Plugin(pane, item, type, function(event, cmds, cbs) { - pane.run(event, [item.river, item.storm, item.action].concat(cmds), cbs) - }, can.page.AppendField(can, output, "item "+item.group+" "+item.name, item)) + Export: function(event, value, key) {can.Report(event, value, key)}, + Import: function(event, value, key) {var cb = pane.onimport[key]; + typeof cb == "function" && cb(event, pane, value, key, output); }, - Show: function(river, storm) { - if (river && storm && field.Pane.Load(river+"."+storm, output)) {return} - pane.run(event, [river, storm], function(msg) { - pane.onimport.init(pane, msg, output) - }) - }, run: function(event, cmds, cb) {var msg = pane.Event(event) can.page.Select(can, action, "input", function(item, index) { - msg.Option(item.name, item.value) + msg.Option(name, item.value) }) can.run(event, option.dataset, cmds, cb) }, - }, ["core", "page", "user", "pane/"+name], function(pane) { + }, Config.libs.concat(["pane/"+name]), function(pane) { typeof cb == "function" && cb(pane) }) - return pane.target = field, field.Pane = pane + return pane.target = field, pane }), - Plugin: shy("构造插件", function(can, meta, type, run, field) { + Plugin: shy("构造插件", function(can, name, meta, run, field) { var option = field.querySelector("form.option"); var action = field.querySelector("div.action"); var output = field.querySelector("div.output"); var history = [] - var name = meta.name, args = meta.args || []; + var args = meta.args || []; var feature = JSON.parse(meta.feature||'{}'); var plugin = Volcanos(name, {type: "local", - Inputs: can.Inputs, - Output: can.Output, + Inputs: can.Inputs, Output: can.Output, + 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 = ""; @@ -106,7 +100,7 @@ var can = Volcanos("chat", { Show: function(type, msg, cb) {msg._plugin_name = name; return plugin[type] = can.Output(plugin, type, msg, cb, output, option) }, - }, ["core", "page", "user", "plugin/"+type], function(plugin) { + }, Config.libs.concat(["plugin/"+(meta.type||"state")]), function(plugin) { can.core.Next(JSON.parse(meta.inputs||"[]"), plugin.Append) }) return plugin.target = field, field.Plugin = plugin @@ -121,9 +115,11 @@ var can = Volcanos("chat", { (input[item.cb] || can[item.cb] || can.Check)(event, event.target, cb); }, - }, ["core", "page", "user", "plugin/"+type], function(input) {typeof cb == "function" && cb(); + }, Config.libs.concat(["plugin/"+type]), function(input) { var target = input.onimport.init(input, item, name, value, option); input.target = target, target.Input = input; + + typeof cb == "function" && cb(); }) return input }), @@ -133,15 +129,18 @@ var can = Volcanos("chat", { run: function(event, cmd, cb, silent) { (output[cmd[1]] || can[cmd[1]] || can.Run)(event, cmd, cb, silent); }, - }, ["core", "page", "user", "plugin/"+type], function(output) { + }, Config.libs.concat(["plugin/"+type]), function(output) { output.onimport.init(output, msg, cb, target, option); }, msg) return output.target = target, target.Output = output }), -}, ["base", "core", "misc", "page", "user", - "plugin/state", "plugin/input", "plugin/table"], function(can) { - // can.Page(can, Config.main, Config.list, document.body) - can.user.carte = page.carte.Pane.Show; - can.user.toast = page.toast.Pane.Show; +}, Config.libs.concat(Config.list), function(can) { + if (ctx.Search("feature") != "") { + can[Config.main] = can.Page(can, Config.main, Config, function(chat) { + can.user.carte = page.carte.Pane.Show; + can.user.toast = page.toast.Pane.Show; + chat.River.Import(event||{}, "shy", "username") + }, document.body) + } }) diff --git a/base.js b/lib/base.js similarity index 100% rename from base.js rename to lib/base.js diff --git a/core.js b/lib/core.js similarity index 100% rename from core.js rename to lib/core.js diff --git a/misc.js b/lib/misc.js similarity index 100% rename from misc.js rename to lib/misc.js diff --git a/page.js b/lib/page.js similarity index 100% rename from page.js rename to lib/page.js diff --git a/user.js b/lib/user.js similarity index 100% rename from user.js rename to lib/user.js diff --git a/miss.svg b/miss.svg new file mode 100644 index 00000000..33fd80c0 --- /dev/null +++ b/miss.svg @@ -0,0 +1,78 @@ + + +volcanos + +proto.js + +ID 生成器 + +Log 日志器 + +Conf 配置器 + +Sync 同步器 + +Timer 定时器 + +Event 触发器 + +Dream 构造器 + +Cache 缓存器 + +Story 存储器 + +frame.js + +Page + +Pane + +base 基础模块 + +core 核心模块 + +misc 工具模块 + +page 网页模块 + +user 用户模块 + +Plugin + +Inputs + +onimport 导入数据 + +onaction 控件交互 + +onchoice 控件菜单 + +ondetail 控件详情 + +onexport 导出数据 + +Output + +order.js + +Header + +Ocean + +River + +Target + +Source + +Action + +Storm + +Steam + +Footer + + + diff --git a/order.js b/order.js new file mode 100644 index 00000000..bfe6993c --- /dev/null +++ b/order.js @@ -0,0 +1,12 @@ +var Config = { + main: "chat", list: [ + "page/chat", "pane/River", "pane/Storm", "pane/Action", + "plugin/state", "plugin/input", "plugin/table", "plugin/inner", + ], + libs: ["lib/base", "lib/core", "lib/misc", "lib/page", "lib/user"], + pane: [ + {group: "index", name: "River"}, + {group: "index", name: "Storm"}, + {group: "index", name: "Action"}, + ], +} diff --git a/pane/Action.js b/pane/Action.js new file mode 100644 index 00000000..f729a576 --- /dev/null +++ b/pane/Action.js @@ -0,0 +1,75 @@ +Volcanos("onimport", {help: "导入数据", list: [], + init: function(can, msg, output) {output.innerHTML = ""; + msg.Table(function(item, index) { + can[item.name] = can.Plugin(can, item.name, item, function(event, cmds, cbs) { + can.run(event, [item.river, item.storm, item.action].concat(cmds), cbs) + }, can.page.AppendField(can, output, "item "+item.group+" "+item.name, item)) + }) + }, + river: function(event, can, value, key, output) { + can.Conf("temp_river", value) + }, + storm: function(event, can, value, key, output) { + can.Cache(can.Conf("river")+"."+can.Conf("storm"), output, "some"); + + can.Conf("river", can.Conf("temp_river")) + can.Conf("storm", value) + var data = can.Cache(can.Conf("river")+"."+can.Conf("storm"), output); + if (!data) { + can.run(event, [can.Conf("river"), can.Conf("storm")], function(msg) { + can.onimport.init(can, msg, output) + }) + } + }, +}) +Volcanos("onaction", {help: "组件交互", list: [], +}) +Volcanos("onchoice", {help: "组件菜单", list: ["返回", "清空", "复制", "下载", "表格", "绘图", "媒体"], + "返回": function(event, can, msg, value, target) { + can.run(event, ["", "Last"]) + }, + "清空": function(event, can, msg, value, target) { + can.target.innerHTML = ""; + }, + "复制": function(event, can, msg, value, target) { + var list = can.onexport.Format(can, msg, "data"); + can.user.toast(can.page.CopyText(can, list[2]), "复制成功") + }, + "下载": function(event, can, msg, value, target) { + var list = can.onexport.Format(can, msg, msg._plugin_name||"data"); + can.page.Download(can, list[0]+list[1], list[2]); + }, +}) +Volcanos("ondetail", {help: "组件详情", list: ["选择", "修改", "删除", "复制", "下载"], + "选择": "select", + "删除": "delete", + "修改": 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.user.toast(can.page.CopyText(can, target.innerHTML), "复制成功") + }, + "下载": function(event, can, msg, value, index, key, target) { + can.page.Download(can, key, target.innerHTML); + }, +}) +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] + }, +}) + + + diff --git a/pane/River.js b/pane/River.js new file mode 100644 index 00000000..0b088d1c --- /dev/null +++ b/pane/River.js @@ -0,0 +1,67 @@ +Volcanos("onimport", {help: "导入数据", list: [], + init: function(can, msg, output) {output.innerHTML = ""; + msg.Table(function(item, index) { + can.page.Append(can, output, [{view: ["item"], list: [{text: [item.nick||item.key]}], click: function(event) { + can.Export(event, item.key, "river") + }}]) + }) + }, + username: function(event, can, value, key, output) { + can.run(event, [], function(msg) { + can.onimport.init(can, msg, output) + can.Export(event, msg.key[0], "river") + }) + }, +}) +Volcanos("onaction", {help: "组件交互", list: [], +}) +Volcanos("onchoice", {help: "组件菜单", list: ["返回", "清空", "复制", "下载", "表格", "绘图", "媒体"], + "返回": function(event, can, msg, value, target) { + can.run(event, ["", "Last"]) + }, + "清空": function(event, can, msg, value, target) { + can.target.innerHTML = ""; + }, + "复制": function(event, can, msg, value, target) { + var list = can.onexport.Format(can, msg, "data"); + can.user.toast(can.page.CopyText(can, list[2]), "复制成功") + }, + "下载": function(event, can, msg, value, target) { + var list = can.onexport.Format(can, msg, msg._plugin_name||"data"); + can.page.Download(can, list[0]+list[1], list[2]); + }, +}) +Volcanos("ondetail", {help: "组件详情", list: ["选择", "修改", "删除", "复制", "下载"], + "选择": "select", + "删除": "delete", + "修改": 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.user.toast(can.page.CopyText(can, target.innerHTML), "复制成功") + }, + "下载": function(event, can, msg, value, index, key, target) { + can.page.Download(can, key, target.innerHTML); + }, +}) +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] + }, +}) + + + + diff --git a/pane/Storm.js b/pane/Storm.js new file mode 100644 index 00000000..2b010fbc --- /dev/null +++ b/pane/Storm.js @@ -0,0 +1,67 @@ +Volcanos("onimport", {help: "导入数据", list: [], + init: function(can, msg, output) {output.innerHTML = ""; + msg.Table(function(item, index) { + can.page.Append(can, output, [{view: ["item"], list: [{text: [item.key]}], click: function(event) { + can.Export(event, item.key, "storm") + }}]) + }) + }, + river: function(event, can, value, key, output) { + can.run(event, [value], function(msg) { + can.onimport.init(can, msg, output) + can.Export(event, msg.key[0], "storm") + }) + }, +}) +Volcanos("onaction", {help: "组件交互", list: [], +}) +Volcanos("onchoice", {help: "组件菜单", list: ["返回", "清空", "复制", "下载", "表格", "绘图", "媒体"], + "返回": function(event, can, msg, value, target) { + can.run(event, ["", "Last"]) + }, + "清空": function(event, can, msg, value, target) { + can.target.innerHTML = ""; + }, + "复制": function(event, can, msg, value, target) { + var list = can.onexport.Format(can, msg, "data"); + can.user.toast(can.page.CopyText(can, list[2]), "复制成功") + }, + "下载": function(event, can, msg, value, target) { + var list = can.onexport.Format(can, msg, msg._plugin_name||"data"); + can.page.Download(can, list[0]+list[1], list[2]); + }, +}) +Volcanos("ondetail", {help: "组件详情", list: ["选择", "修改", "删除", "复制", "下载"], + "选择": "select", + "删除": "delete", + "修改": 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.user.toast(can.page.CopyText(can, target.innerHTML), "复制成功") + }, + "下载": function(event, can, msg, value, index, key, target) { + can.page.Download(can, key, target.innerHTML); + }, +}) +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] + }, +}) + + + + diff --git a/plugin/input.js b/plugin/input.js index fb999bfc..a87c72fc 100644 --- a/plugin/input.js +++ b/plugin/input.js @@ -29,7 +29,7 @@ Volcanos("onimport", {help: "导入数据", list: [], var target = can.Dream(option, "input", input)[input.name]; (item.type == "text" || item.type == "textarea") && !target.placeholder && (target.placeholder = item.name); item.type == "text" && !target.title && (target.title = item.placeholder || item.name || ""); - item.type == "button" && item.action == "auto" && can.run && can.run(event); + item.type == "button" && item.action == "auto" && can.run && can.run({}); return target; }), })