From e558beeb398e391eda931a6dfd796ec42d75c9c2 Mon Sep 17 00:00:00 2001 From: shaoying Date: Sun, 19 Jul 2020 01:42:12 +0800 Subject: [PATCH] add word.show --- lib/page.js | 5 ++ plugin/local/code/inner.css | 1 + plugin/local/wiki/draw.js | 2 +- plugin/local/wiki/word.css | 54 ++++++++++++ plugin/local/wiki/word.js | 163 ++++++++++++++++++++++++++++++++++-- plugin/story/spide.js | 15 ++-- plugin/story/trend.js | 15 ++-- 7 files changed, 236 insertions(+), 19 deletions(-) diff --git a/lib/page.js b/lib/page.js index 96696b6a..6ca7aec1 100644 --- a/lib/page.js +++ b/lib/page.js @@ -37,6 +37,7 @@ var page = Volcanos("page", {help: "网页模块", "max-height": true, "min-height": true, "margin-left": true, + "margin-top": true, "left": true, "right": true, "top": true, "bottom": true, } @@ -56,6 +57,10 @@ var page = Volcanos("page", {help: "网页模块", value = value || {} can.core.List(key, function(item, index) {if (!item) {return} + if (item.nodeName) { + target.appendChild(item) + return + } // 基本结构: type name data list var type = item.type || "div", data = item.data || {}; var name = item.name || data.name || ""; diff --git a/plugin/local/code/inner.css b/plugin/local/code/inner.css index 3d5ff746..43c62034 100644 --- a/plugin/local/code/inner.css +++ b/plugin/local/code/inner.css @@ -63,6 +63,7 @@ fieldset.editor>div.output div.content { float:left; } fieldset.editor>div.output div.content>pre.item { + text-align:left; height:20px; border:solid 1px black; padding:0; margin:0; padding-left:10px; diff --git a/plugin/local/wiki/draw.js b/plugin/local/wiki/draw.js index c9110509..a3aea3f3 100644 --- a/plugin/local/wiki/draw.js +++ b/plugin/local/wiki/draw.js @@ -40,8 +40,8 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, "fill": "purple", "shape": "rect", "grid": "10", - "go": "auto", "go": "manual", + "go": "auto", }, function(key, value) { can.svg.Value(key, can.Action(key, can.svg.Value(key)||value)) }) diff --git a/plugin/local/wiki/word.css b/plugin/local/wiki/word.css index 916dbb76..64a00ead 100644 --- a/plugin/local/wiki/word.css +++ b/plugin/local/wiki/word.css @@ -4,6 +4,8 @@ fieldset.word h2.story { fieldset.word p.story { white-space:pre; } +fieldset.word ul.story { +} fieldset.word svg.story { display:block; float:left; @@ -23,3 +25,55 @@ fieldset code.story { clear:both; } +div.show { + position:absolute; + left:0; top:0; + background-color:aliceblue; + +} +div.show div.control { +} +div.show div.content { + text-align:center; +} +div.show div.content h2 { + clear:both; + text-align:center; +} +div.show div.content h3 { + clear:both; + text-align:center; +} +div.show div.content ul { + text-align:left; +} +div.show div.content div.page.first { + text-align:center; +} +div.show div.content div.page { + margin-top:30px; + display:none; +} +div.show div.content div.page.show { + display:block; + background-color:aliceblue; +} +div.show div.content div.page h1 { + margin-top:100px; + font-size:60px; +} +div.show div.content div.page ul li.H2 { + font-size:24px; +} +div.show div.content div.page ul li.H3 { + font-size:16px; +} +div.show code.story { + display:block; border:solid 3px green; + color:white; background-color:#272822; + font-size:14px; font-family:monospace; + max-height:640px; overflow:auto; + padding:10px; white-space:pre; + clear:both; +} + diff --git a/plugin/local/wiki/word.js b/plugin/local/wiki/word.js index ca4dc9f2..8dd17330 100644 --- a/plugin/local/wiki/word.js +++ b/plugin/local/wiki/word.js @@ -1,15 +1,21 @@ -Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, list, cb, target) { - can.onappend.table(can, target, "table", msg) - can._output.innerHTML = msg.Result() +Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, list, cb, target) { target.innerHTML = "" + if (msg.Option("_display") == "table") { + return can.onappend.table(can, target, "table", msg) + } target.innerHTML = msg.Result() - can.page.Select(can, can._output, ".story", function(item) {var data = item.dataset - var cb = can.onimport[data.type]; cb && cb(can, data, item) + can.page.Select(can, target, ".story", function(item) { var data = item.dataset + can.page.Modify(can, item, {style: can.base.Obj(data.style)}) + var cb = can.onimport[data.type]; typeof cb == "function" && cb(can, data, item) }) return typeof cb == "function" && cb(msg) }, + premenu: function(can, list, target) { var meta = can.base.Obj(list.meta) + can.page.Select(can, can._output, "h2.story, h3.story", function(item) { + can.page.Append(can, target, [{text: [item.innerHTML, "li", item.tagName]}]) + }) + }, field: function(can, item, target) { var meta = can.base.Obj(item.meta) - meta.width = can.Conf("width") - meta.height = can.Conf("height") + meta.width = can.Conf("width"), meta.height = can.Conf("height") can.onappend._init(can, meta, Volcanos.meta.libs.concat(["/plugin/state.js"]), function(sub) { sub.run = function(event, cmds, cb, silent) { can.run(event, (cmds[0] == "search"? []: ["action", "story", item.type, item.name, item.text]).concat(cmds), cb, true) @@ -17,4 +23,147 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, }, can._output, target) }, }, ["/plugin/local/wiki/word.css"]) +Volcanos("onaction", {help: "控件交互", list: ["演示"], + "演示": function(event, can) { + var current = []; var list = [] + can.page.Select(can, can._output, ".story", function(item) { + switch (item.tagName) { + case "H1": + case "H2": + case "H3": + list.push(current = []) + break + } + current.push(item) + }) + can.ui && can.page.Remove(can, can.ui.show) + can.ui = can.page.Append(can, document.body, [{view: "show", style: { + width: document.body.offsetWidth+"px", height: document.body.offsetHeight+"px", + },list: [{view: "control", list: [ + {select: [["布局", "播放", "层叠", "网格"], function(event, value) { + switch (value) { + case "播放": + can.page.Select(can, can.ui.content, "div.page", function(page, index) { + can.page.ClassList.del(can, page, "show") + index == 0 && can.page.ClassList.add(can, page, "show") + can.page.Modify(can, page, {style: { + "position": "absolute", + "margin-left": 20, "margin-top": 40, + "width": document.body.offsetWidth, "height": document.body.offsetHeight, + "overflow": "auto", + "float": "none", + "border": "", + }}) + }) + break + case "层叠": + function show(which) { which = which || 0 + can.page.Select(can, can.ui.content, "div.page", function(page, index) { + can.page.ClassList.add(can, page, "show") + can.page.Modify(can, page, {style: { + "position": "absolute", + "margin-left": (which==index||which==page? 100: 40)*(index+1), + "margin-top": (which==index||which==page? 100: 40)*(index+1), + "width": document.body.offsetWidth, "height": document.body.offsetHeight, + "overflow": "auto", + "float": "none", + "border": "solid 2px red", + }, + onclick: function(event) { + event.target == page && show(page.nextSibling) + }, + }) + }) + } + show() + break + case "网格": + can.page.Select(can, can.ui.content, "div.page", function(page, index) { + can.page.ClassList.add(can, page, "show") + can.page.Modify(can, page, {style: { + "border": "solid 2px red", + "position": "relative", + "margin-left": 0, + "margin-top": 0, + "width": 200, "height": 200, + "overflow": "auto", + "float": "left", + }}) + }) + break + } + }]}, + {button: ["首页", function(event) { + can.page.Select(can, can.ui.content, "div.page.show", function(page) { + can.page.ClassList.del(can, page, "show") + }) + can.page.Select(can, can.ui.content, "div.page", function(page, index) { + if (index == 0) { + can.page.ClassList.add(can, page, "show") + } + }) + }]}, + {button: ["上一页", function(event) { + can.page.Select(can, can.ui.content, "div.page.show", function(page) { + if (page.previousSibling) { + can.page.ClassList.del(can, page, "show") + can.page.ClassList.add(can, page.previousSibling, "show") + } + }) + }]}, + {select: [["page"].concat(can.core.List(list, function(item, index) { return index+1 })), function(event, value) { + can.page.Select(can, can.ui.content, "div.page", function(page, index) { + can.page.ClassList.del(can, page, "show") + index+1 == parseInt(value) && can.page.ClassList.add(can, page, "show") + }) + }]}, + {button: ["下一页", function(event) { + can.page.Select(can, can.ui.content, "div.page.show", function(page) { + if (page.nextSibling) { + can.page.ClassList.del(can, page, "show") + can.page.ClassList.add(can, page.nextSibling, "show") + } else { + can.ui && can.page.Remove(can, can.ui.show) + } + }) + }]}, + {button: ["结束", function(event) { + can.ui && can.page.Remove(can, can.ui.show) + }]}, + ]}, {view: "content", style: { + width: document.body.offsetWidth+"px", height: document.body.offsetHeight-45+"px", + }, list: can.core.List(list, function(page, index) { + return {view: "page "+(index==0?"show": "")+(index==0? " first": ""), style: { + width: document.body.offsetWidth+"px", + }, list: can.core.List(page, function(item) { + switch (item.tagName) { + case "FIELDSET": + var field = document.createElement("fieldset") + can.page.Append(can, field, [ + {view: ["", "legend"]}, + {view: ["option", "form"]}, + {view: ["action", "div"]}, + {view: ["output", "div"]}, + {view: ["status", "div"]}, + ]) + var meta = can.base.Obj(item.dataset.meta) + meta.width = document.body.offsetWidth + meta.height = document.body.offsetHeight + can.onappend._init(can, meta, Volcanos.meta.libs.concat(["/plugin/state.js"]), function(sub) { + sub.run = function(event, cmds, cb, silent) { + can.run(event, (cmds[0] == "search"? []: ["action", "story", item.dataset.type, item.dataset.name, item.dataset.text]).concat(cmds), cb, true) + } + }, can._output, field) + return field + default: + return item.cloneNode(true) + } + })} + })}, ] }]) + }, +}) +Volcanos("ondetail", {help: "菜单交互", list: [], _init: function(can, msg, list, cb, target) { +}}) +Volcanos("onexport", {help: "导出数据", list: [], _init: function(can, msg, list, cb, target) { +}}) diff --git a/plugin/story/spide.js b/plugin/story/spide.js index c19c32ff..097c31ef 100644 --- a/plugin/story/spide.js +++ b/plugin/story/spide.js @@ -22,8 +22,11 @@ Volcanos("onimport", {help: "导入数据", list: [], can.msg = msg, can.data = msg.Table() can.Action("height", "400") can.Action("speed", "100") + can.Action("scale", "1") + can.sub.svg.Value("transform", "scale("+can.Action("scale")+")") can.onaction["横向"](event, can) + return can.Timer(100, function() { can.core.Next(["base", "base/mdb", "base/log", "base/gdb", "base/ctx", "base/cli", "LICENSE"], function(value, next) { can._tree[value].view.scrollIntoView() @@ -36,7 +39,7 @@ Volcanos("onimport", {help: "导入数据", list: [], }, can.ui.content) }, }) -Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", ["view", "横向", "纵向"], ["height", "100", "200", "400", "600"], ["speed", "10", "50", "100"]], +Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", ["view", "横向", "纵向"], ["height", "100", "200", "400", "600"], ["speed", "10", "50", "100"], ["scale", "0.2", "0.5", "1", "2", "5"]], "编辑": function(event, can) { var hide = can.sub._action.style.display == "none" can.page.Modify(can, can.sub._action, {style: {display: hide? "": "none"}}) @@ -51,6 +54,10 @@ Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", ["view", height: function(event, can, cmd) { can.onaction[can.Action("view")](event, can) }, + scale: function(event, can, cmd) { + can.sub.svg.Value("transform", "scale("+can.Action("scale")+")") + can.onaction[can.Action("view")](event, can) + }, _tree: function(can, msg) { var list = {} msg.Table(function(value, index) { @@ -77,7 +84,7 @@ Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", ["view", }) return tree.height = height }, - _draw: function(can, tree, x, y) { var sub = can.sub, name = tree.name || can.Option("name") + _draw: function(can, tree, x, y) { var sub = can.sub, name = tree.name || can.Option("name") || "." tree.view = sub.onimport.draw({}, sub, { shape: "text", point: [{x: x, y: y+tree.height*30/2}], style: {inner: name, "text-anchor": "start", "stroke-width": 1, fill: "yellow"}, }) @@ -109,10 +116,6 @@ Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", ["view", } sub.onimport.draw({}, sub, { - // shape: "line", point: [ - // {x: x+name.length*16-10, y: y+tree.height*30/2}, - // {x: x+name.length*16+40, y: y+offset+item.height*30/2}, - // ], style: {inner: name, "text-anchor": "start", stroke: "cyan", "stroke-width": 1}, shape: "path", point: [], style: { fill: "none", stroke: "cyan", "stroke-width": 1, d: line( diff --git a/plugin/story/trend.js b/plugin/story/trend.js index 0c9459f9..1d641caa 100644 --- a/plugin/story/trend.js +++ b/plugin/story/trend.js @@ -20,15 +20,16 @@ Volcanos("onimport", {help: "导入数据", list: [], can.Timer(100, function() { can.sub = sub._outputs[0] can.msg = msg, can.data = msg.Table() - can.Action("height", "400") - can.Action("speed", "100") + var action = can.Conf("action") + can.Action("height", parseInt(action && action.height ||"400")) + can.Action("speed", parseInt(action && action.speed ||"100")) can.onaction["股价图"](event, can) }) } }, can.ui.content) }, }) -Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", ["view", "股价图", "趋势图", "数据源"], ["height", "100", "200", "400", "600"], ["speed", "10", "50", "100"]], +Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", ["view", "股价图", "趋势图", "数据源"], ["height", "100", "200", "400", "600"], ["speed", "10", "20", "50", "100"]], "编辑": function(event, can) { var hide = can.sub._action.style.display == "none" can.page.Modify(can, can.sub._action, {style: {display: hide? "": "none"}}) @@ -45,8 +46,9 @@ Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", ["view", }, "股价图": function(event, can) { var sub = can.sub, data = can.data - if (!can.list) { var count = 0, add = 0, del = 0, max = 0 + if (!can.list) { var count = 0, add = 0, del = 0, max = 0, begin = "" can.max = 0, can.rest = 0, can.list = can.core.List(data, function(value, index) { + if (index == 0) { begin = value.date } var line = {}; line.note = value[can.msg.append[4]] line.date = value[can.msg.append[0]] @@ -69,6 +71,9 @@ Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", ["view", } return line }) + can.Status("from", begin) + can.Status("commit", count) + can.Status("total", add+del) } var space = 10 @@ -184,4 +189,4 @@ Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", ["view", }) Volcanos("onchoice", {help: "组件交互", list: []}) Volcanos("ondetail", {help: "组件详情", list: []}) -Volcanos("onexport", {help: "导出数据", list: ["date", "begin", "add", "del", "close", "note"]}) +Volcanos("onexport", {help: "导出数据", list: ["from", "commit", "total", "date", "begin", "add", "del", "close", "note"]})