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:
@@ -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;
|
||||
}
|
||||
};
|
||||
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user