diff --git a/plugin/local/wiki/word.css b/plugin/local/wiki/word.css index c850cb4a..a390dd09 100644 --- a/plugin/local/wiki/word.css +++ b/plugin/local/wiki/word.css @@ -1,90 +1,72 @@ -body fieldset.plugin.word h1:hover { - background:green; - cursor:pointer; -} -body fieldset.plugin.word h2:hover { - background:green; - cursor:pointer; -} -body fieldset.plugin.word h3:hover { - background:green; - cursor:pointer; -} - -body fieldset p.story[data-name=inner] { - padding:4px; - background-color:#4b6c8a; - border-left:solid 4px blue; -} -body fieldset p.story[data-name=inner]:hover { - cursor:copy; -} -body div.story[data-type=spark] { - background-color:#2169a9; color:white; - box-shadow: 4px 4px 10px 1px #626bd0; - border-left:solid 4px blue; - padding:4px 10px; margin:10px 0px; -} -body div.story[data-type=spark] span:hover { - background-color:#c10c8a; - cursor:copy; - box-shadow: 4px 4px 10px 1px #626bd0; -} - -body.white fieldset p.story[data-name=inner] { - /* background-color:#bad8f7; */ - border-left:solid 4px blue; -} -body.white fieldset div.story[data-type=spark] { - /* background-color:#c2daef; */ +fieldset.word h1.story { clear:both; } -body.white fieldset div.story[data-type=spark] span:hover { - background-color:blue; - /* background-color:white; */ +fieldset.word h2.story { + clear:both; +} +fieldset.word h3.story { + clear:both; } -fieldset ul.story[data-type=premenu] { +fieldset.word h1:hover { + background:green; cursor:pointer; } -fieldset ul.story[data-type=premenu] li:hover { +fieldset.word h2:hover { + background:green; + cursor:pointer; +} +fieldset.word h3:hover { + background:green; + cursor:pointer; +} + +fieldset.word ul.story[data-type=premenu] { + cursor:pointer; +} +fieldset.word ul.story[data-type=premenu] li:hover { background:cyan; } - -fieldset.plugin.word fieldset.story { - margin:10px; clear:both; float:left; - border:0; - box-shadow: 4px 4px 10px 1px #626bd0; -} - -fieldset h1.story { - clear:both; -} -fieldset h2.story { - clear:both; -} -fieldset h3.story { - clear:both; -} -fieldset li.H2 { +fieldset.word li.H2 { font-weight:bold; font-size:20px; } -fieldset br.story { +fieldset.word br.story { clear:both; } -fieldset p.story { + +fieldset.word p.story { white-space:pre; } -fieldset p.story.shell { - padding:4px; +fieldset.word p.story[data-name=inner] { + padding:4px 10px; margin:10px 0px; + background-color:#4b6c8a7a; border-left:solid 4px blue; - background-color:#c2daef; } -fieldset svg.story { +fieldset.word p.story[data-name=inner]:hover { + background-color:#c10c8a; + cursor:copy; +} +fieldset.word div.story[data-type=spark] { + background-color:#2169a9a6; color:white; + box-shadow: 4px 4px 10px 1px #626bd0; + padding:4px 10px; margin:10px 0px; + border-left:solid 4px blue; +} +fieldset.word div.story[data-type=spark] span:hover { + box-shadow: 4px 4px 10px 1px #29318e; + background-color:#c10c8a; + cursor:copy; +} +fieldset.word svg.story { display:block; float:left; } -fieldset code.story { +fieldset.word fieldset.story { + margin:10px; border:0; + clear:both; float:left; + box-shadow: 4px 4px 10px 1px #626bd0; +} +fieldset.word code.story { display:block; border:solid 3px green; color:white; background-color:#272822; font-size:14px; font-family:monospace; @@ -93,22 +75,39 @@ fieldset code.story { clear:both; } -div.show { - position:absolute; top:0; +fieldset.word.float { + width:-webkit-fill-available; + height:-webkit-fill-available; + position:absolute; left:0; top:0; + background-color:aliceblue; color:black; } -div.show table { - color:black; +fieldset.word.float div.project { + background-color:aliceblue; + padding:10px; } +fieldset.word.float div.content div.page { + margin-top:30px; + display:none; +} +fieldset.word.float div.content div.page.select { + display:block; +} + +fieldset.word.float h1 { + text-align:center; +} +fieldset.word.float h2 { + text-align:center; +} +fieldset.word.float h3 { + text-align:center; +} + + 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; } @@ -161,3 +160,17 @@ div.show>div.content div.page code.story { padding:10px; white-space:pre; clear:both; } + +body.white fieldset.word p.story[data-name=inner] { + /* background-color:#bad8f7; */ + border-left:solid 4px blue; +} +body.white fieldset.word div.story[data-type=spark] { + /* background-color:#c2daef; */ + clear:both; +} +body.white fieldset.word div.story[data-type=spark] span:hover { + background-color:blue; + /* background-color:white; */ +} + diff --git a/plugin/local/wiki/word.js b/plugin/local/wiki/word.js index b37a9a76..a6a08e38 100644 --- a/plugin/local/wiki/word.js +++ b/plugin/local/wiki/word.js @@ -14,7 +14,9 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, can.page.Select(can, can._output, "h2.story, h3.story", function(item) { can.page.Append(can, target, [{text: [item.innerHTML, "li", item.tagName], onclick: function() { item.scrollIntoView() - }}]), item.onclick = function(event) { target.scrollIntoView() } + }}]), item.onclick = function(event) { + target.scrollIntoView() + } }) }, spark: function(can, item, target) { @@ -42,8 +44,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, table: function(can, list, target) { can.page.Select(can, target, "td", function(item) { - item.title = "点击复制" - item.onclick = function(event) { + item.title = "点击复制", item.onclick = function(event) { can.user.copy(event, can, item.innerText) } }) @@ -98,8 +99,8 @@ Volcanos("onaction", {help: "控件交互", list: [], }) can.onappend._init(can, {type: "story word float"}, [], function(sub) { + sub.ui = sub.page.Append(sub, sub._output, [{view: "project"}, {view: "content"}]) sub.run = function(event, cmds, cb) { can.run(event, cmds, cb, true) } - sub.ui = sub.onlayout.profile(sub) sub.onappend._action(sub, [ ["布局", "开讲", "快闪", "网格", "层叠"], @@ -113,18 +114,20 @@ Volcanos("onaction", {help: "控件交互", list: [], "层叠": function(event) { sub.onaction.spring(sub) }, "大纲": function(event) { sub.page.Toggle(sub, sub.ui.project) }, - "首页": function(event) { can.onaction.show(can, 0) }, - "上一页": function(event) { can.onaction.prev(can) }, - "菜单": function(event) { can.onaction.prev(can) }, - "下一页": function(event) { can.onaction.next(can) }, - "隐藏": function(event) { can.page.Toggle(can, sub.ui.content) }, - "结束": function(event) { can.page.Remove(can, sub._target) }, + "首页": function(event) { can.onaction.show(sub, 0) }, + "上一页": function(event) { can.onaction.prev(sub, sub.ui.content) }, + "菜单": function(event) { can.onaction.show(sub, event.target.selectedIndex) }, + "下一页": function(event) { can.onaction.next(sub, sub.ui.content) }, + + "隐藏": function(event) { sub.page.Toggle(sub, sub._output) }, + "结束": function(event) { sub.page.Remove(sub, sub._target) }, }) - can.page.Select(can, can._output, "h1.story,h2.story,h3.story", function(item) { + can.onmotion.hidden(can, sub.ui.project) + can.page.Select(can, can._output, "h1.story,h2.story,h3.story", function(item, index) { can.onappend.item(can, "item", {name: item.innerHTML}, function(event) { - + can.onaction.show(sub, index) }, function(event) { }, sub.ui.project) @@ -143,48 +146,45 @@ Volcanos("onaction", {help: "控件交互", list: [], } }) - sub.page.Append(sub, sub.ui.content, {view: "page "+(index==0?"show": "")+(index==0? " first": ""), list: items}) + sub.page.Append(sub, sub.ui.content, [{view: "page "+(index==0?"select": "")+(index==0? " first": ""), list: items}]) }) }, document.body) }, 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") + if (index == which) { + can.page.ClassList.add(can, page, "select") + can.page.Select(can, page, "h1,h2,h3", function(item) { + can.Action("菜单", item.innerHTML) + }) + } else { + can.page.ClassList.del(can, page, "select") + } }) }, - next: function(can) { - can.page.Select(can, can.ui.content, "div.page.show", function(page) { + next: function(can, target) { + can.page.Select(can, target, "div.page.select", 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 + can.page.ClassList.del(can, page, "select") + can.page.ClassList.add(can, page.nextSibling, "select") + + can.page.Select(can, page.nextSibling, "h1,h2,h3", function(item) { + can.Action("菜单", item.innerHTML) }) } else { can.user.toast(can, "end") } }) }, - prev: function(can) { - can.page.Select(can, can.ui.content, "div.page.show", function(page) { + prev: function(can, target) { + can.page.Select(can, target, "div.page.select", 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 + can.page.ClassList.del(can, page, "select") + can.page.ClassList.add(can, page.previousSibling, "select") + + can.page.Select(can, page.previousSibling, "h1,h2,h3", function(item) { + can.Action("菜单", item.innerHTML) }) } else { can.user.toast(can, "end") @@ -269,6 +269,3 @@ Volcanos("onaction", {help: "控件交互", list: [], }, }) -Volcanos("onfigure", {help: "控件交互", list: [], - -})