diff --git a/frame.js b/frame.js index 466cc6f9..d1c95add 100644 --- a/frame.js +++ b/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}}) diff --git a/index.css b/index.css index b6cbf93a..622594cc 100644 --- a/index.css +++ b/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; } + diff --git a/lib/page.js b/lib/page.js index 6ca7aec1..ae1bc184 100644 --- a/lib/page.js +++ b/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) { diff --git a/plugin/local/code/inner.css b/plugin/local/code/inner.css index 43c62034..15863edd 100644 --- a/plugin/local/code/inner.css +++ b/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; diff --git a/plugin/local/code/inner.js b/plugin/local/code/inner.js index 8306eebd..eacb192d 100644 --- a/plugin/local/code/inner.js +++ b/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" diff --git a/plugin/local/wiki/word.css b/plugin/local/wiki/word.css index 64a00ead..1750a694 100644 --- a/plugin/local/wiki/word.css +++ b/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; - float:left; + display:block; 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; - left:0; top:0; + position:absolute; 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 { - 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 { +div.show>div.content 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; } - diff --git a/plugin/local/wiki/word.js b/plugin/local/wiki/word.js index 8dd17330..2f8f3796 100644 --- a/plugin/local/wiki/word.js +++ b/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 "播放": - 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() + case "开讲": + can.onaction.show(can, 0) 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", - }}) - }) + can.onaction.grid(can) + break + case "快闪": + can.onaction.flash(can) + break + case "层叠": + can.onaction.spring(can) 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.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") - } - }) + can.onaction.show(can, 0) + can.onkeypop.action = can }]}, {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") - } - }) + can.onaction.prev(can) + can.onkeypop.action = can }]}, - {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") - }) + {select: [["menu"].concat(can.page.Select(can, can._output, "h1,h2,h3", function(item) { return item.innerHTML })), function(event, value) { + can.onaction.show(can, value) + can.onkeypop.action = can }]}, {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) - } - }) + can.onaction.next(can) + can.onkeypop.action = can + }]}, + {button: ["隐藏", function(event) { + can.page.Toggle(can, can.ui.content) + can.onkeypop.action = can }]}, {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", + ]}, {view: "project", style: {display: "none"}, list: can.page.Select(can, can._output, "h1.story,h2.story,h3.story", function(item) { + 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") - can.page.Append(can, field, [ + var field = document.createElement("fieldset"); 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.height = document.body.offsetHeight + 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) @@ -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) { -}})