x/volcanos
1
0
Fork 1
mirror of https://shylinux.com/x/volcanos synced 2025-04-25 08:48:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

opt word

Browse Source
This commit is contained in:
shaoying 2020-07-20 01:36:17 +08:00
parent e558beeb39
commit f541fdaac0
7 changed files with 311 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frame.js
View File

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

122
index.css
View File

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

4
lib/page.js
View File

@ -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) {

4
plugin/local/code/inner.css
View File

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

3
plugin/local/code/inner.js
View File

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

92
plugin/local/wiki/word.css
View File

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

275
plugin/local/wiki/word.js
View File

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