okay, lets add a little js arrow keys interaction

This commit is contained in:
Q
2021-11-14 11:24:28 +02:00
parent 611574efa7
commit 4a6ff9cbe2
3 changed files with 64 additions and 38 deletions

View File

@@ -1,4 +1,4 @@
__version__ = "20210920.1" __version__ = "20211114.0"
def get_version(): def get_version():

View File

@@ -158,43 +158,7 @@ Released : 20110306
<link rel="shortcut icon" href="{resource}/mirva.ico"/> <link rel="shortcut icon" href="{resource}/mirva.ico"/>
<title>{page_title}</title> <title>{page_title}</title>
<link href="{resource}/style.css" rel="stylesheet" type="text/css" media="screen" /> <link href="{resource}/style.css" rel="stylesheet" type="text/css" media="screen" />
<script> <script src="{resource}/mirva.js"></script>
function r(f){{/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}}
r(function(){{
create_nav();
}});
function create_nav() {{
let navis = document.getElementsByClassName("navigation");
for (let i = 0; i<navis.length; i++) {{
if (i==navis.length-1) {{
navis[i].appendChild(create_button("up", navis[0]));
continue;
}}
if (navis[i-1]) {{
navis[i].appendChild(create_button("up", navis[i-1]));
}} else {{
navis[i].appendChild(create_button("up", document.body));
}}
if (navis[i+1]) {{
navis[i].appendChild(create_button("down", navis[i+1]));
}}
}}
}}
function create_button(direction, to) {{
let container = document.createElement('div');
container.classList.add("float_" + direction);
let button = document.createElement('img');
button.src = "{resource}/arrow_" + direction + ".png";
button.classList.add("navigation_button");
button.onclick = function(){{
to.parentElement.scrollIntoView({{behavior: "smooth"}});
}};
container.appendChild(button);
return container
}}
</script>
</head> </head>
<body> <body>
<div id="wrapper"> <div id="wrapper">
@@ -303,6 +267,7 @@ function create_button(direction, to) {{
"arrow_down.png", "arrow_down.png",
"banner.jpg", "banner.jpg",
"mirva.ico", "mirva.ico",
"mirva.js",
): ):
if os.path.exists(os.path.join(self.resource_dir, f)): if os.path.exists(os.path.join(self.resource_dir, f)):
continue continue

61
mirva/resources/mirva.js Normal file
View File

@@ -0,0 +1,61 @@
let current=0;
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
create_nav();
document.onkeydown = keyboard_entry;
});
function create_nav() {
let navis = document.getElementsByClassName("navigation");
for (let i = 0; i<navis.length; i++) {
if (i==navis.length-1) {
navis[i].appendChild(create_button("up", navis[0], 0));
continue;
}
if (navis[i-1]) {
navis[i].appendChild(create_button("up", navis[i-1], i-1));
} else {
navis[i].appendChild(create_button("up", document.body, 0));
}
if (navis[i+1]) {
navis[i].appendChild(create_button("down", navis[i+1], i+1));
}
}
}
function create_button(direction, to, next) {
let container = document.createElement('div');
container.classList.add("float_" + direction);
let button = document.createElement('img');
button.src = ".mirva/arrow_" + direction + ".png";
button.classList.add("navigation_button");
button.onclick = function(){
to.parentElement.scrollIntoView({behavior: "smooth"});
current = next;
};
container.appendChild(button);
return container
}
function keyboard_entry(ev) {
var kC = ev.keyCode;
var k = String.fromCharCode(ev.keyCode);
var ctrlDown = ev.ctrlKey || ev.metaKey;
if (ctrlDown) {
return;
}
let navis = document.getElementsByClassName("navigation");
if (kC == '39') { // right
current += 1;
}
if (kC == '37') { // left
current -= 1;
}
if (kC == '36') { // home
current = 0;
}
if (kC == '35') { // end
current = navis.length-1;
}
current = Math.max(0, current);
current = Math.min(navis.length-1, current);
navis[current].parentElement.scrollIntoView({behavior: "smooth"});
}