opt word

frame.js

@@ -608,12 +608,11 @@ Volcanos("onkeypop", {help: "键盘交互", list: [], _init: function(can) {
 })
 Volcanos("onmotion", {help: "动态交互", list: [], _init: function(can) {
 },
-    show: function(can, target, time) { time = time || {value: 100, length: 30}
+    show: function(can, target, time, cb) { time = time || {value: 100, length: 30}
         can.page.Modify(can, target, {style: {opacity: 0}})
         can.Timer(time, function(event, value, index) {
             can.page.Modify(can, target, {style: {opacity: (index+1)/time.length}})
-        }, function() {
+        }, cb)
-        })
     },
     hide: function(can, target, time) { time = time || {value: 100, length: 30}
         can.page.Modify(can, target, {style: {opacity: 1}})

index.css

@@ -18,6 +18,19 @@ div.hidden {
     display:none;
 }
 
+input[type=text] {
+    background-color:cyan;
+    color:black;
+}
+input[type=button] {
+    background:black;
+    color:cyan;
+}
+select {
+    background:black;
+    color:cyan;
+}
+
 fieldset>form.option {
     padding:0 5px;
 }
@@ -59,17 +72,6 @@ fieldset>form.option>div.item textarea.args {
     width:300px;
     height:50px;
 }
-fieldset>form.option>div.item.text>input {
-    background-color:cyan;
-}
-fieldset>form.option>div.item.button>input {
-    background:black;
-    color:cyan;
-}
-fieldset>form.option>div.item.select>select {
-    background:black;
-    color:cyan;
-}
 fieldset>form.option>div.item.textarea {
     margin-top:4px;
     clear:both;
@@ -82,18 +84,6 @@ fieldset>div.action>div.item {
     float:left;
     margin:2px 0;
 }
-fieldset>div.action>div.item>select {
-    color:cyan;
-    background:black;
-    /* margin:3px 0; */
-}
-fieldset>div.action>div.item>input {
-    color:cyan;
-    background:black;
-}
-fieldset>div.action>div.item>input:hover {
-    background:gray;
-}
 fieldset>div.action>div.item.space {
     width:10px;
 }
@@ -159,37 +149,37 @@ fieldset div.code {
     border:solid 3px green;
     /* max-height:640px; */
 }
-fieldset table {
+table {
     font-size:14px;
     cursor:pointer;
     border:solid 1px green;
     overflow: auto;
 }
-fieldset table tr:hover {
+table tr:hover {
     background-color:#0fbd45;
 }
-fieldset table tr.select {
+table tr.select {
     background-color:#0fbd45;
 }
-fieldset table tr.over {
+table tr.over {
     background:red;
 }
-fieldset table th {
+table th {
     font-family:monospace;
     background-color:#0fbd45;
     cursor:pointer;
     padding: 0 6px;
 }
-fieldset table td {
+table td {
     max-width:1200px;
     font-family:monospace;
     padding: 0 6px;
     white-space: pre;
 }
-fieldset table td:hover {
+table td:hover {
     background-color:red;
 }
-fieldset table td.select {
+table td.select {
     background-color:red;
 }
 
@@ -261,19 +251,53 @@ body.white {
     margin:0; padding:0;
     background-color:#0dabda;
 }
+body.white input[type=text] {
+    border:2px solid #c4c7ce;
+    border-radius:8px 8px 8px 8px;
+    background-color:white;
+    color:black;
+}
+body.white input[type=text]:hover {
+    background-color:cyan;
+}
+body.white input[type=button] {
+    padding:0 20px;
+    border-radius:10px 10px 10px 10px;
+    border:2px solid #FF9900;
+    background-color:#FF9900;
+    color:white;
+}
+body.white input[type=button]:hover {
+    border-radius:10px 10px 10px 10px;
+    border:2px solid #FFCC33;
+    background-color:#FFCC33;
+}
+body.white select {
+    padding:0 20px;
+    margin-top:2px;
+    border-radius:10px 10px 10px 10px;
+    border:2px solid #99CC66;
+    background-color:#99CC66;
+    color:white;
+}
+body.white select:hover {
+}
+
+body.white fieldset {
+    color:black;
+}
 body.white fieldset.plugin {
     margin:0; border:0;
     border-top:solid 2px #CCCCFF;
     background-color:white;
     color:black;
 }
-
 body.white fieldset.Header {
     border:solid 2px #1f2224;
     background-color:#2f3638;
     color:white;
 }
-body.white fieldset.Header input {
+body.white fieldset.Header input[type=text] {
     border:2px solid #c4c7ce;
     border-radius:10px 10px 10px 10px;
     background-color:white;
@@ -347,37 +371,6 @@ body.white fieldset.Action fieldset.plugin div.output{
 body.white fieldset.Action fieldset.plugin div.item input[type=button] {
     letter-spacing:4px;
 }
-body.white fieldset.plugin div.item input[type=text] {
-    border:2px solid #c4c7ce;
-    border-radius:8px 8px 8px 8px;
-    background-color:white;
-    color:black;
-}
-body.white fieldset.plugin div.item input[type=text]:hover {
-    background-color:cyan;
-}
-body.white fieldset.plugin div.item input[type=button] {
-    padding:0 20px;
-    border-radius:10px 10px 10px 10px;
-    border:2px solid #FF9900;
-    background-color:#FF9900;
-    color:white;
-}
-body.white fieldset.plugin div.item input[type=button]:hover {
-    border-radius:10px 10px 10px 10px;
-    border:2px solid #FFCC33;
-    background-color:#FFCC33;
-}
-body.white fieldset.plugin div.item select {
-    padding:0 20px;
-    margin-top:2px;
-    border-radius:10px 10px 10px 10px;
-    border:2px solid #99CC66;
-    background-color:#99CC66;
-    color:white;
-}
-body.white fieldset.plugin div.item select:hover {
-}
 body.white fieldset.plugin table {
     background:#9fb5bb;
     border:0;
@@ -401,3 +394,4 @@ body.white fieldset.plugin table td {
 body.white fieldset.plugin table td:hover {
     background-color:lightgray;
 }
+

lib/page.js

@@ -183,6 +183,10 @@ var page = Volcanos("page", {help: "网页模块",
     Remove: shy("删除节点", function(can, target) {
         target && target.parentNode && target.parentNode.removeChild(target)
     }),
+    Toggle: function(can, target) { var hide = target.style.display == "none"
+        can.page.Modify(can, target, {style: {display: hide? "": "none"}})
+        return hide
+    },
 
     CopySub: shy("复制节点", function(can, target, source) {
         while (source.children.length > 0) {

plugin/local/code/inner.css

@@ -21,6 +21,7 @@ fieldset.editor>div.output {
     background-color:black;
 }
 fieldset.editor>div.output>div.project {
+    text-align:left;
     max-height:400px; overflow:auto;
     max-width:120px;
     color:white;
@@ -68,6 +69,7 @@ fieldset.editor>div.output div.content>pre.item {
     padding:0; margin:0;
     padding-left:10px;
     min-width:120px;
+    background-color:black;
     color:white;
 }
 fieldset.editor>div.output div.content>pre.item.select {
@@ -103,9 +105,11 @@ fieldset.editor>div.output pre.display:hover {
     z-index:10;
 }
 fieldset.editor>div.output div.search {
+    text-align:left;
     padding:6px; border:solid 1px red;
     height:120px; overflow:auto;
     clear:both;
+    color:white;
 }
 fieldset.editor>div.output div.search td>div {
     max-height:100px;

plugin/local/code/inner.js

@@ -8,7 +8,7 @@ Volcanos("onimport", {help: "导入数据", _init: function(can, msg, list, cb,
             {view: "profile"},
 
             {view: "holdon", list: [
-                {view: "preview"}, {view: "content", style: {"max-width": can.Conf("width")-280+"px"}},
+                {view: "preview"}, {view: "content", style: {"max-width": can.Conf("width")-100+"px"}},
             ]},
 
             {view: ["editor", "textarea"], onkeydown: function(event) {
@@ -595,6 +595,7 @@ Volcanos("onaction", {help: "控件交互", list: [
     },
     "项目": function(event, can) { var hide = can.ui.project.style.display == "none"
         can.page.Modify(can, can.ui.project, {style: {display: hide? "": "none"}})
+        can.page.Modify(can, can.ui.content, {style: {"max-width": can.Conf("width")-(hide? 240: 100)+"px"}})
     },
     "上传": function(event, can) { can.user.upload(event, can) },
     "搜索": function(event, can) { var hide = can.ui.search.style.display == "none"

plugin/local/wiki/word.css

@@ -1,22 +1,22 @@
 fieldset.word h2.story {
     clear:both;
 }
+fieldset.word h3.story {
+    clear:both;
+}
 fieldset.word p.story {
     white-space:pre;
 }
-fieldset.word ul.story {
-}
 fieldset.word svg.story {
-    display:block;
+    display:block; float:left;
-    float:left;
 }
 fieldset.word fieldset.story {
-    float:left; clear:both;
+    clear:both; float:left;
 }
 fieldset.word fieldset.story:hover {
     border:solid 1px red;
 }
-fieldset code.story {
+fieldset.word code.story {
     display:block; border:solid 3px green;
     color:white; background-color:#272822;
     font-size:14px; font-family:monospace;
@@ -26,49 +26,62 @@ fieldset code.story {
 }
 
 div.show {
-    position:absolute;
+    position:absolute; top:0;
-    left:0; top:0;
+}
+div.show>div.control {
     background-color:aliceblue;
+}
+div.show>div.project {
+    background-color:aliceblue;
+    position:absolute;
+    padding:10px;
+    z-index:10;
+}
+div.show>div.project div.item {
+    cursor:pointer;
+}
+div.show>div.project div.item:hover {
+    background-color:white;
+}
+div.show>div.content {
+    background-color:aliceblue;
+    text-align:center;
+    padding:20px;
 
 }
-div.show div.control {
+div.show>div.content h1 {
-}
-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 {
+div.show>div.content h2 {
+    clear:both;
+}
+div.show>div.content h3 {
+    clear:both;
+}
+div.show>div.content ul {
+    text-align:left;
+}
+div.show>div.content div.page.first {
+}
+div.show>div.content div.page.first ul {
+    text-align:center;
+}
+div.show>div.content div.page {
+    margin-top:30px;
+    display:none;
+}
+div.show>div.content div.page.show {
+    background-color:aliceblue;
+    display:block;
+}
+div.show>div.content div.page ul li.H2 {
     font-size:24px;
 }
-div.show div.content div.page ul li.H3 {
+div.show>div.content div.page ul li.H3 {
     font-size:16px;
 }
-div.show code.story {
+div.show>div.content div.page code.story {
     display:block; border:solid 3px green;
     color:white; background-color:#272822;
     font-size:14px; font-family:monospace;
@@ -76,4 +89,3 @@ div.show code.story {
     padding:10px; white-space:pre;
     clear:both;
 }
-

plugin/local/wiki/word.js

@@ -22,9 +22,162 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
             }
         }, can._output, target)
     },
+
+    keydown: function(event, can, key) {
+        switch (key) {
+            case "g":
+                can.ui["布局"].value = "网格"
+                can.onaction.grid(can)
+                break
+            case "f":
+                can.ui["布局"].value = "快闪"
+                can.onaction.flash(can)
+                break
+            case "s":
+                can.ui["布局"].value = "层叠"
+                can.onaction.spring(can)
+                break
+            case "n":
+            case "j":
+            case "ArrowRight":
+                can.onaction.next(can)
+                break
+            case "k":
+            case "p":
+            case "ArrowLeft":
+                can.onaction.prev(can)
+                break
+            case "t":
+                can.page.Toggle(can, can.ui.content)
+                break
+            case "q":
+                can.ui && can.page.Remove(can, can.ui.show)
+        }
+    },
 }, ["/plugin/local/wiki/word.css"])
 Volcanos("onaction", {help: "控件交互", list: ["演示"],
+    show: function(can, which) {
+        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) {
+            index == which && can.page.ClassList.add(can, page, "show"), can.page.Modify(can, page, {style: {
+                "position": "absolute", "float": "none",
+                "margin-left": 20, "margin-top": 40,
+                "width": document.body.offsetWidth, "height": document.body.offsetHeight,
+                "overflow": "auto",
+                "border": "",
+            }, })
+        })
+        can.page.Select(can, can.ui.content, "h1,h2,h3", function(item) {
+            item.innerHTML == which && can.page.ClassList.add(can, item.parentNode, "show")
+        })
+    },
+    next: function(can) {
+        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")
+                can.page.Select(can, page.nextSibling, "h2,h3", function(item) {
+                    can.ui.menu.value = item.innerHTML
+                })
+            } else {
+                can.user.toast(can, "end")
+            }
+        })
+    },
+    prev: function(can) {
+        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")
+                can.page.Select(can, page.nextSibling, "h2,h3", function(item) {
+                    can.ui.menu.value = item.innerHTML
+                })
+            } else {
+                can.user.toast(can, "end")
+            }
+        })
+    },
+    grid: function(can) {
+        can.page.Select(can, can.ui.content, "div.page.show", function(page) {
+            can.page.ClassList.del(can, page, "show")
+        })
+        can.core.Next(can.page.Select(can, can.ui.content, "div.page"), function(page, next, index) {
+            can.page.ClassList.add(can, page, "show"), can.page.Modify(can, page, {style: {
+                "position": "relative", "float": "left",
+                "margin-left": 0, "margin-top": 0,
+                "width": 200, "height": 200,
+                "border": "solid 2px red",
+                "overflow": "auto",
+            }, onclick: function(event) {
+                page.style.position == "absolute"? can.page.Modify(can, page, {style: {
+                    "position": "relative", "float": "left",
+                    "margin-left": 0, "margin-top": 0,
+                    "width": 200, "height": 200,
+                    "border": "solid 2px red",
+                    "overflow": "auto",
+                    "z-index": 0,
+                }}): can.page.Modify(can, page, {style: {
+                    "position": "absolute", "float": "none",
+                    "margin-left": 20, "margin-top": 40,
+                    "width": document.body.offsetWidth, "height": document.body.offsetHeight,
+                    "overflow": "auto",
+                    "border": "",
+                    "z-index": 10,
+                }})
+            }, })
+            can.onmotion.show(can, page, {value: 10, length: 20}, next)
+        })
+    },
+    flash: function(can) {
+        can.page.Select(can, can.ui.content, "div.page.show", function(page) {
+            can.page.ClassList.del(can, page, "show")
+        })
+        can.core.Next(can.page.Select(can, can.ui.content, "div.page"), function(page, next, index) {
+            can.page.ClassList.add(can, page, "show"), can.page.Modify(can, page, {style: {
+                "position": "absolute", "float": "none",
+                "margin-left": 20, "margin-top": 40,
+                "width": document.body.offsetWidth, "height": document.body.offsetHeight,
+                "border": "none",
+                "overflow": "auto",
+            }, ondblclick: function(event) {
+                can.onaction.show(can, index)
+                can.ui["布局"].value = "开讲"
+            }, onclick: function(event) {
+                can.onaction.show(can, index)
+                can.ui["布局"].value = "开讲"
+            }, })
+            can.onmotion.show(can, page, {value: 10, length: 20}, next)
+        })
+    },
+    spring: function(can) {
+        can.page.Select(can, can.ui.content, "div.page.show", function(page) {
+            can.page.ClassList.del(can, page, "show")
+        })
+        can.core.Next(can.page.Select(can, can.ui.content, "div.page"), function(page, next, index) {
+            can.page.ClassList.add(can, page, "show"), can.page.Modify(can, page, {style: {
+                "position": "absolute", "float": "none",
+                "margin-left": 10*(index+1), "margin-top": 60*(index+1),
+                "height": document.body.offsetHeight,
+                "width": document.body.offsetWidth,
+                "border": "solid 2px red",
+                "overflow": "auto",
+            }, onclick: function(event) {
+                page.style["margin-left"] == "0px"? can.page.Modify(can, page, {style: {
+                    "margin-left": 10*(index+1), "margin-top": 60*(index+1),
+                    "z-index": 0,
+                }}): can.page.Modify(can, page, {style: {
+                    "margin-left": 0, "margin-top": 60*(index+1),
+                    "z-index": 10,
+                }})
+            }, })
+            can.onmotion.show(can, page, {value: 10, length: 20}, next)
+        })
+    },
+
     "演示": function(event, can) {
+        can.onkeypop.action = can
         var current = []; var list = []
         can.page.Select(can, can._output, ".story", function(item) {
             switch (item.tagName) {
@@ -39,108 +192,63 @@ Volcanos("onaction", {help: "控件交互", list: ["演示"],
 
         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) {
+            {select: [["布局", "开讲", "快闪", "网格", "层叠"], function(event, value) {
                 switch (value) {
-                    case "播放":
+                    case "开讲":
-                        can.page.Select(can, can.ui.content, "div.page", function(page, index) {
+                        can.onaction.show(can, 0)
-                            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.onaction.grid(can)
-                            can.page.ClassList.add(can, page, "show")
+                        break
-                            can.page.Modify(can, page, {style: {
+                    case "快闪":
-                                "border": "solid 2px red",
+                        can.onaction.flash(can)
-                                "position": "relative",
+                        break
-                                "margin-left": 0,
+                    case "层叠":
-                                "margin-top": 0,
+                        can.onaction.spring(can)
-                                "width": 200, "height": 200,
-                                "overflow": "auto",
-                                "float": "left",
-                            }})
-                        })
                         break
                 }
             }]},
+            {button: ["大纲", function(event) {
+                can.page.Toggle(can, can.ui.project)
+            }]},
             {button: ["首页", function(event) {
-                can.page.Select(can, can.ui.content, "div.page.show", function(page) {
+                can.onaction.show(can, 0)
-                    can.page.ClassList.del(can, page, "show")
+                can.onkeypop.action = can
-                })
-                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) {
+                can.onaction.prev(can)
-                    if (page.previousSibling) {
+                can.onkeypop.action = can
-                        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) {
+            {select: [["menu"].concat(can.page.Select(can, can._output, "h1,h2,h3", function(item) { return item.innerHTML })), function(event, value) {
-                can.page.Select(can, can.ui.content, "div.page", function(page, index) {
+                can.onaction.show(can, value)
-                    can.page.ClassList.del(can, page, "show")
+                can.onkeypop.action = can
-                    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) {
+                can.onaction.next(can)
-                    if (page.nextSibling) {
+                can.onkeypop.action = can
-                        can.page.ClassList.del(can, page, "show")
+            }]},
-                        can.page.ClassList.add(can, page.nextSibling, "show")
+            {button: ["隐藏", function(event) {
-                    } else {
+                can.page.Toggle(can, can.ui.content)
-                        can.ui && can.page.Remove(can, can.ui.show)
+                can.onkeypop.action = can
-                    }
-                })
             }]},
             {button: ["结束", function(event) {
                 can.ui && can.page.Remove(can, can.ui.show)
             }]},
-        ]}, {view: "content", style: {
+        ]}, {view: "project", style: {display: "none"}, list: can.page.Select(can, can._output, "h1.story,h2.story,h3.story", function(item) {
-            width: document.body.offsetWidth+"px", height: document.body.offsetHeight-45+"px",
+            return {text: [item.innerHTML, "div", "item"], onclick: function(event) {
+                can.onaction.show(can, item.innerHTML)
+            }}
+        })}, {view: "content", style: {
+            width: document.body.offsetWidth-40+"px", height: document.body.offsetHeight-25+"px",
         }, list: can.core.List(list, function(page, index) {
             return {view: "page "+(index==0?"show": "")+(index==0? " first": ""), style: {
-                width: document.body.offsetWidth+"px",
+                width: document.body.offsetWidth-40+"px",
             }, list: can.core.List(page, function(item) {
                 switch (item.tagName) {
                     case "FIELDSET":
-                        var field = document.createElement("fieldset")
+                        var field = document.createElement("fieldset"); can.page.Append(can, field, [
-                        can.page.Append(can, field, [
                             {view: ["", "legend"]},
                             {view: ["option", "form"]},
                             {view: ["action", "div"]},
@@ -148,8 +256,7 @@ Volcanos("onaction", {help: "控件交互", list: ["演示"],
                             {view: ["status", "div"]},
                         ])
                         var meta = can.base.Obj(item.dataset.meta)
-                        meta.width = document.body.offsetWidth
+                        meta.width = document.body.offsetWidth, meta.height = document.body.offsetHeight
-                        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)
@@ -163,7 +270,3 @@ Volcanos("onaction", {help: "控件交互", list: ["演示"],
         })}, ] }])
     },
 })
-Volcanos("ondetail", {help: "菜单交互", list: [], _init: function(can, msg, list, cb, target) {
-}})
-Volcanos("onexport", {help: "导出数据", list: [], _init: function(can, msg, list, cb, target) {
-}})