okay, lets add a little js arrow keys interaction
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
__version__ = "20210920.1"
|
__version__ = "20211114.0"
|
||||||
|
|
||||||
|
|
||||||
def get_version():
|
def get_version():
|
||||||
|
|||||||
@@ -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
61
mirva/resources/mirva.js
Normal 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"});
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user