1
0
mirror of https://github.com/restoreddev/phpapprentice.git synced 2025-07-31 20:10:54 +02:00

Added ability to navigate with arrow keys

This commit is contained in:
Andrew Davis
2019-01-11 19:35:05 -06:00
parent 067f96ffe2
commit 86b53c49df
2 changed files with 22 additions and 14 deletions

View File

@@ -41,18 +41,26 @@ var onLoad = function () {
document.onkeydown = function (e) {
e = e || window.event;
var isEscape = false;
if ("key" in e) {
isEscape = (e.key == "Escape" || e.key == "Esc");
} else {
isEscape = (e.keyCode == 27);
}
if (isEscape) {
var modal = document.querySelector('.modal');
if (modal && !modal.classList.contains('closed')) {
modal.classList.add('closed');
}
switch (e.key) {
case 'Esc':
case 'Escape':
var modal = document.querySelector('.modal');
if (modal && !modal.classList.contains('closed')) {
modal.classList.add('closed');
}
break;
case 'ArrowRight':
var link = document.querySelector('#next-link');
if (link) {
window.location.href = link.href;
}
break;
case 'ArrowLeft':
var link = document.querySelector('#prev-link');
if (link) {
window.location.href = link.href;
}
break;
}
};

View File

@@ -10,13 +10,13 @@
<div class="clearfix"></div>
<div class="navigate-links">
<?php if (!empty($previous)): ?>
<a href="<?= page_path($previous) ?>" title="Previous">
<a href="<?= page_path($previous) ?>" title="Previous" id="prev-link">
<div class="icon"><?= icon('cheveron-outline-left') ?></div>
Previous
</a>
<?php endif ?>
<?php if (!empty($next)): ?>
<a href="<?= page_path($next) ?>" title="Next">
<a href="<?= page_path($next) ?>" title="Next" id="next-link">
Next
<div class="icon"><?= icon('cheveron-outline-right') ?></div>
</a>