diff --git a/resources/js/keyboardNavigation.js b/resources/js/keyboardNavigation.js index 308cc772c3d43cb8b39eda856eafe4e840cad19c..6093a60c81ff352e6ddb092409cb6b9041a9af05 100644 --- a/resources/js/keyboardNavigation.js +++ b/resources/js/keyboardNavigation.js @@ -1,26 +1,40 @@ 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 diff --git a/resources/less/metager/pages/resultpage/keyboard-nav.less b/resources/less/metager/pages/resultpage/keyboard-nav.less index 2a25a0e000100ca1505fe438bbbac6f94583ee76..d0a348bc6d0f00a2a62fd78b43ffc9b923b3a867 100644 --- a/resources/less/metager/pages/resultpage/keyboard-nav.less +++ b/resources/less/metager/pages/resultpage/keyboard-nav.less @@ -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 diff --git a/resources/views/layouts/keyboardNavBox.blade.php b/resources/views/layouts/keyboardNavBox.blade.php index e194b557858cb7218ea505130a05c44b9d8c5734..638656ae2c8d48f8796cd88f0e0f40d732be1c54 100644 --- a/resources/views/layouts/keyboardNavBox.blade.php +++ b/resources/views/layouts/keyboardNavBox.blade.php @@ -1,13 +1,12 @@ <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>