Commit 466deaf9 authored by Aria Givi's avatar Aria Givi

added jump links for different navigation entry points, functionality not 100% existant yet

parent 06a4d28f
var ctrlInfo = false; // Flag used for checking if the user was shown the keyboard control information
var currentResultIndex = 1; // stores index of result which was focused last
var currentFocusedElement = { // Object used for storing currently focused element and element type (e.g. anchor tag or result div)
element: $("div.result").first(),
type: "result"
element: $("div.search-input input"),
type: "input",
mode: "results"
};
$(document).ready(function () {
$('[data-index="1"').attr("id", "results-entry");
focusElement($("div.search-input input"), "input");
});
$(document).on('keydown', function(e) {
e = e || window.event;
// Check for TAB keypress
if (e.keyCode == '9') {
e.preventDefault();
tabKeyPressed();
// Check for ENTER keypress
if(e.shiftKey) {
// Add logic for reverse tabbing
} else {
tabKeyPressed();
e.preventDefault();
}
// Check for ENTER keypress
} else if (e.keyCode == '13') {
e.preventDefault();
enterKeyPressed();
e.preventDefault();
// Check for ESC keypress
} else if(e.keyCode == '27') {
escKeyPressed();
}
});
function focusElement(e, type) {
currentFocusedElement.element = e;
currentFocusedElement.type = type;
currentFocusedElement.type = (type !== undefined ? type : currentFocusedElement.type);
currentFocusedElement.element.focus();
}
......@@ -34,22 +48,48 @@ function tabKeyPressed() {
}
function enterKeyPressed() {
if(currentFocusedElement.type === "result") {
console.log($(":focus").find("a").first());
if(currentFocusedElement.type === "infobox") {
focusElement($(currentFocusedElement.element.attr('href')), "result");
/* switch(currentFocusedElement.element.attr('id')) {
case 'results-nav':
console.log(currentFocusedElement.element.attr('id'));
break;
case 'settings-nav':
console.log(currentFocusedElement.element.attr('id'));
break;
case 'site-nav':
console.log(currentFocusedElement.element.attr('id'));
break;
default:
console.log(currentFocusedElement.element.attr('id'));
} */
} else if(currentFocusedElement.type === "result") {
focusElement($(":focus").find("a").first(), "link")
} else if(currentFocusedElement.type === "link") {
} else if(currentFocusedElement.type === "link" || "infobox") {
window.location = currentFocusedElement.element.attr('href');
} else if(currentFocusedElement.type === "input") {
$("#searchForm").submit();
}
}
function escKeyPressed() {
if(currentFocusedElement.type === "link") {
focusElement(currentFocusedElement.element.parents(".result"), "result");
}
}
function showInfoBox() {
$("#keyboard-nav-info").show();
focusElement($("#keyboard-nav-info"), "infobox");
focusElement($("#keyboard-nav-info a").first(), "infobox");
}
function focusNextElement() {
if(currentFocusedElement.type === "result") {
if(currentFocusedElement.type === "infobox") {
rotateInfoBoxLinks();
} else if(currentFocusedElement.type === "result") {
focusNextResult();
} else if (currentFocusedElement.type === "link") {
focusNextLink();
} else {
focusElement($("div.result").not('.ad').first(), "result");
}
......@@ -59,6 +99,26 @@ function focusNextResult() {
if(currentFocusedElement.element.next().length > 0) {
focusElement(currentFocusedElement.element.next(), "result");
} else {
focusElement($("div.result").not('.ad').first(), "result");
focusElement($("div.search-input input"), "input");
}
}
function focusNextLink() {
console.log(currentFocusedElement.element.closest('a'));
}
function rotateInfoBoxLinks() {
switch(currentFocusedElement.element.attr('id')) {
case 'results-nav':
focusElement($('#settings-nav'), 'infobox');
break;
case 'settings-nav':
focusElement($('#site-nav'), 'infobox');
break;
case 'site-nav':
focusElement($('#results-nav'), 'infobox');
break;
default:
focusElement($('#results-nav'), 'infobox');
}
}
\ No newline at end of file
......@@ -6,7 +6,7 @@
position: relative;
margin: 10px 0;
padding: 10px;
width: 100%;
width: 70%;
border: 1px solid #f00;
background-color: #fff;
......@@ -23,5 +23,7 @@
ul {
text-align: left;
list-style: none;
padding:0 0 0 40px;
}
}
\ No newline at end of file
<div id="keyboard-nav-info" tabindex="0">
<div class="keyboard-nav-info-content">
<div class="keyboard-nav-info-header">
<h5 class="keyboard-nav-info-title">Tastatur-Navigationsanleitung</h5>
<h5 class="keyboard-nav-info-title">Tastatur-Navigation</h5>
<div class="keyboard-nav-info-body">
<p>Die Navigation durch die Ergebnisseite ist hierarchisch aufgebaut.</p>
<ul>
<li>TAB-Taste: Innerhalb der aktuellen Ebene zum nächsten Element springen.</li>
<li>Enter-Taste: Aktuelles Element auswählen und eine Stufe tiefer gehen.</li>
<li>Escape-Taste: Eine Ebene nach oben springen.</li>
<li><a href="#results-entry" id="results-nav">Zu den Ergebnissen springen</a></li>
<li><a href="#settings-entry" id="settings-nav">Zu den Sucheinstellungen springen</a></li>
<li><a href="#nav-entry" id="site-nav">Zu der Seitennavigation springen</a></li>
<ul>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment