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 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 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) var currentFocusedElement = { // Object used for storing currently focused element and element type (e.g. anchor tag or result div)
element: $("div.result").first(), element: $("div.search-input input"),
type: "result" 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) { $(document).on('keydown', function(e) {
e = e || window.event; e = e || window.event;
// Check for TAB keypress // Check for TAB keypress
if (e.keyCode == '9') { if (e.keyCode == '9') {
e.preventDefault(); if(e.shiftKey) {
tabKeyPressed(); // Add logic for reverse tabbing
// Check for ENTER keypress } else {
tabKeyPressed();
e.preventDefault();
}
// Check for ENTER keypress
} else if (e.keyCode == '13') { } else if (e.keyCode == '13') {
e.preventDefault();
enterKeyPressed(); enterKeyPressed();
e.preventDefault();
// Check for ESC keypress
} else if(e.keyCode == '27') {
escKeyPressed();
} }
}); });
function focusElement(e, type) { function focusElement(e, type) {
currentFocusedElement.element = e; currentFocusedElement.element = e;
currentFocusedElement.type = type; currentFocusedElement.type = (type !== undefined ? type : currentFocusedElement.type);
currentFocusedElement.element.focus(); currentFocusedElement.element.focus();
} }
...@@ -34,22 +48,48 @@ function tabKeyPressed() { ...@@ -34,22 +48,48 @@ function tabKeyPressed() {
} }
function enterKeyPressed() { function enterKeyPressed() {
if(currentFocusedElement.type === "result") { if(currentFocusedElement.type === "infobox") {
console.log($(":focus").find("a").first()); 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") focusElement($(":focus").find("a").first(), "link")
} else if(currentFocusedElement.type === "link") { } else if(currentFocusedElement.type === "link" || "infobox") {
window.location = currentFocusedElement.element.attr('href'); 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() { function showInfoBox() {
$("#keyboard-nav-info").show(); $("#keyboard-nav-info").show();
focusElement($("#keyboard-nav-info"), "infobox"); focusElement($("#keyboard-nav-info a").first(), "infobox");
} }
function focusNextElement() { function focusNextElement() {
if(currentFocusedElement.type === "result") { if(currentFocusedElement.type === "infobox") {
rotateInfoBoxLinks();
} else if(currentFocusedElement.type === "result") {
focusNextResult(); focusNextResult();
} else if (currentFocusedElement.type === "link") {
focusNextLink();
} else { } else {
focusElement($("div.result").not('.ad').first(), "result"); focusElement($("div.result").not('.ad').first(), "result");
} }
...@@ -59,6 +99,26 @@ function focusNextResult() { ...@@ -59,6 +99,26 @@ function focusNextResult() {
if(currentFocusedElement.element.next().length > 0) { if(currentFocusedElement.element.next().length > 0) {
focusElement(currentFocusedElement.element.next(), "result"); focusElement(currentFocusedElement.element.next(), "result");
} else { } 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 @@ ...@@ -6,7 +6,7 @@
position: relative; position: relative;
margin: 10px 0; margin: 10px 0;
padding: 10px; padding: 10px;
width: 100%; width: 70%;
border: 1px solid #f00; border: 1px solid #f00;
background-color: #fff; background-color: #fff;
...@@ -23,5 +23,7 @@ ...@@ -23,5 +23,7 @@
ul { ul {
text-align: left; 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 id="keyboard-nav-info" tabindex="0">
<div class="keyboard-nav-info-content"> <div class="keyboard-nav-info-content">
<div class="keyboard-nav-info-header"> <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"> <div class="keyboard-nav-info-body">
<p>Die Navigation durch die Ergebnisseite ist hierarchisch aufgebaut.</p>
<ul> <ul>
<li>TAB-Taste: Innerhalb der aktuellen Ebene zum nächsten Element springen.</li> <li><a href="#results-entry" id="results-nav">Zu den Ergebnissen springen</a></li>
<li>Enter-Taste: Aktuelles Element auswählen und eine Stufe tiefer gehen.</li> <li><a href="#settings-entry" id="settings-nav">Zu den Sucheinstellungen springen</a></li>
<li>Escape-Taste: Eine Ebene nach oben springen.</li> <li><a href="#nav-entry" id="site-nav">Zu der Seitennavigation springen</a></li>
<ul> <ul>
</div> </div>
</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