mirror of
https://shylinux.com/x/volcanos
synced 2025-04-25 16:58:06 +08:00
add keypop.show
This commit is contained in:
shaoying
parent
184828c3e7
commit
c67adbab52
114
frame.js
114
frame.js
@ -629,38 +629,128 @@ Volcanos("onlayout", {help: "页面布局", list: [], _init: function(can, meta,
|
||||
},
|
||||
})
|
||||
Volcanos("onkeypop", {help: "键盘交互", list: [], _init: function(can) {
|
||||
var list = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
|
||||
var list = ['q', 'a', 'z', 'w', 's', 'x', 'e', 'd', 'c', 'r', 'f', 'v', 't', 'g', 'b', 'y', 'h', 'n', 'u', 'j', 'm', 'i', 'k', 'o', 'l', 'p'];
|
||||
var ui = can.page.Append(can, document.body, [{view: "high", list: can.core.List(list, function(c, i) {
|
||||
return {view: "char "+c, style: {position: "absolute", "bottom": "0",
|
||||
return {view: "char "+c, style: {position: "fixed", "bottom": "0",
|
||||
left: document.body.clientWidth/list.length*i+"px",
|
||||
width: document.body.clientWidth/list.length+"px",
|
||||
height: "10px",
|
||||
background: "red",
|
||||
height: "10px", background: "red",
|
||||
}}
|
||||
})}])
|
||||
|
||||
var iu = can.page.Append(can, document.body, [{view: "nice", style: {position: "fixed", top: 40, width: document.body.clientWidth, height: 40}}])
|
||||
can.Timer({interval: 1000}, function() {
|
||||
can.page.Select(can, ui.high, "div.char", function(item) {
|
||||
item.offsetHeight > 0 && can.page.Modify(can, item, {style: {height: item.offsetHeight-1+"px"}})
|
||||
item.offsetHeight > 0 && can.page.Modify(can, item, {style: {
|
||||
height: item.offsetHeight-item.offsetHeight/200-1+"px",
|
||||
}})
|
||||
})
|
||||
can.page.Select(can, document.body, "div.nice", function(item) {
|
||||
can.page.Modify(can, item, {style: {
|
||||
width: item.offsetWidth-1, left: (document.body.clientWidth-item.offsetWidth-1)/2,
|
||||
}})
|
||||
})
|
||||
})
|
||||
|
||||
document.body.onkeydown = function(event) { if (event.target != document.body) { return }
|
||||
event.key !== " " && can.page.Select(can, ui.high, "div.char."+event.key, function(item) {
|
||||
can.page.Modify(can, item, {style: {height: item.offsetHeight+500+"px"}})
|
||||
})
|
||||
if (can.onkeypop.action && can.onkeypop.action.onimport) {
|
||||
can.onkeypop.action.onimport.keydown(event, can.onkeypop.action, event.key)
|
||||
return
|
||||
}
|
||||
switch (event.key) {
|
||||
case " ":
|
||||
default:
|
||||
return
|
||||
}
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
console.log(event)
|
||||
}
|
||||
document.body.onkeyup = function(event) {
|
||||
}
|
||||
}, action: null,
|
||||
})
|
||||
}, action: null, show: function(event, can) {
|
||||
var key = event.key, map = {
|
||||
"~": "q",
|
||||
"`": "q",
|
||||
"1": "q",
|
||||
"2": "w",
|
||||
"3": "e",
|
||||
"4": "r",
|
||||
"5": "t",
|
||||
"6": "y",
|
||||
"7": "u",
|
||||
"8": "i",
|
||||
"9": "o",
|
||||
"0": "p",
|
||||
"-": "o",
|
||||
"=": "p",
|
||||
"[": "i",
|
||||
"]": "o",
|
||||
"\\": "p",
|
||||
";": "k",
|
||||
"'": "l",
|
||||
",": "k",
|
||||
".": "l",
|
||||
"/": "p",
|
||||
}; key = map[key]||key
|
||||
|
||||
var some = 0.8
|
||||
key >= 'a' && key <= 'z' && can.page.Select(can, document.body, "div.char."+key, function(item) {
|
||||
can.page.Modify(can, item, {style: {
|
||||
background: "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+some+")",
|
||||
height: item.offsetHeight+100+"px",
|
||||
}})
|
||||
})
|
||||
key >= 'a' && key <= 'z' && can.page.Select(can, document.body, "div.nice", function(item) {
|
||||
can.page.Modify(can, item, {style: {
|
||||
background: "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+some+")",
|
||||
width: item.offsetWidth+10, left: (document.body.clientWidth-item.offsetWidth-10)/2,
|
||||
}})
|
||||
})
|
||||
|
||||
switch (event.key) {
|
||||
case " ":
|
||||
can.page.Select(can, document.body, "div.char", function(item) {
|
||||
can.page.Modify(can, item, {style: {
|
||||
background: "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+some+")",
|
||||
height: item.offsetHeight+100+"px",
|
||||
}})
|
||||
})
|
||||
can.page.Select(can, document.body, "div.nice", function(item) {
|
||||
can.page.Modify(can, item, {style: {
|
||||
background: "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+some+")",
|
||||
width: item.offsetWidth+100, left: (document.body.clientWidth-item.offsetWidth-100)/2,
|
||||
}})
|
||||
})
|
||||
break
|
||||
case "Backspace":
|
||||
event.key !== " " && can.page.Select(can, document.body, "div.char", function(item) {
|
||||
can.page.Modify(can, item, {style: {
|
||||
background: "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+some+")",
|
||||
height: "100px",
|
||||
}})
|
||||
})
|
||||
can.page.Select(can, document.body, "div.nice", function(item) {
|
||||
can.page.Modify(can, item, {style: {
|
||||
background: "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+some+")",
|
||||
width: 300, left: (document.body.clientWidth-300)/2,
|
||||
}})
|
||||
})
|
||||
break
|
||||
case "Enter":
|
||||
event.key !== " " && can.page.Select(can, document.body, "div.char", function(item) {
|
||||
can.page.Modify(can, item, {style: {
|
||||
background: "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+some+")",
|
||||
height: "100px",
|
||||
}})
|
||||
})
|
||||
can.page.Select(can, document.body, "div.nice", function(item) {
|
||||
can.page.Modify(can, item, {style: {
|
||||
background: "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+some+")",
|
||||
width: 600, left: (document.body.clientWidth-600)/2,
|
||||
}})
|
||||
})
|
||||
break
|
||||
}
|
||||
}})
|
||||
Volcanos("onmotion", {help: "动态交互", list: [], _init: function(can) {
|
||||
},
|
||||
modify: function(can, target, cb) { var back = target.innerHTML
|
||||
|
||||
@ -42,24 +42,9 @@ Volcanos("onaction", {help: "控件交互", list: [],
|
||||
}
|
||||
},
|
||||
onkeydown: function(event, can) {
|
||||
event.key !== " " && can.page.Select(can, document.body, "div.char."+event.key, function(item) {
|
||||
can.page.Modify(can, item, {style: {background: "rgb("
|
||||
+parseInt(Math.random()*255)+","
|
||||
+parseInt(Math.random()*255)+","
|
||||
+parseInt(Math.random()*255)+")",
|
||||
height: item.offsetHeight+100+"px"}})
|
||||
})
|
||||
|
||||
can.onkeypop.show(event, can)
|
||||
switch (event.key) {
|
||||
case " ":
|
||||
can.page.Select(can, document.body, "div.char", function(item) {
|
||||
can.page.Modify(can, item, {style: {height: item.offsetHeight+100+"px"}})
|
||||
})
|
||||
break
|
||||
case "Enter":
|
||||
event.key !== " " && can.page.Select(can, document.body, "div.char", function(item) {
|
||||
can.page.Modify(can, item, {style: {height: 0+"px"}})
|
||||
})
|
||||
if (event.target.tagName == "TEXTAREA") {
|
||||
break
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
|
||||
// can.page.Modify(can, can._option, {style: {display: "none"}})
|
||||
var ui = can.page.Append(can, can.ui.profile, [
|
||||
{view: ["editor", "input"], "rows": "1", onkeydown: function(event) {
|
||||
can.onkeypop.show(event, can)
|
||||
can.onkeymap.parse(event, can, "insert"), can.Timer(10, function() {
|
||||
can.onaction.modifyLine(can, can.current, can.editor.value)
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user