add word.show

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 || "";

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;

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))
             })

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;
+}
+

plugin/local/wiki/word.js

@@ -1,15 +1,21 @@
-Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, list, cb, target) {
+Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, list, cb, target) { target.innerHTML = ""
-        can.onappend.table(can, target, "table", msg)
+        if (msg.Option("_display") == "table") {
-        can._output.innerHTML = msg.Result()
+            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
+        can.page.Select(can, target, ".story", function(item) { var data = item.dataset
-            var cb = can.onimport[data.type]; cb && cb(can, data, item)
+            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.width = can.Conf("width"), meta.height = can.Conf("height")
-        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) {
+}})

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(

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")
+                    var action = can.Conf("action")
-                    can.Action("speed", "100")
+                    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"]})