diff --git a/resources/js/keyboardNavigation.js b/resources/js/keyboardNavigation.js
new file mode 100644
index 0000000000000000000000000000000000000000..4b52bc439f20d972846f0012ec2458cc6cf5be59
--- /dev/null
+++ b/resources/js/keyboardNavigation.js
@@ -0,0 +1,49 @@
+var ctrlInfo = false; // Flag used for checking if the user was shown the keyboard control information
+var currentResultIndex = 1; // stores result which was focused last
+
+document.onkeydown = checkKey;
+function checkKey(e) {
+ e = e || window.event;
+// Check for TAB keypress
+ if (e.keyCode == '9') {
+ e.preventDefault();
+ tabKeyPressed($(document.activeElement));
+ }
+}
+
+function tabKeyPressed() {
+ if(!ctrlInfo) {
+ ctrlInfo = true;
+ showInfoBox();
+ } else {
+ focusNextElement($(":focus"));
+ }
+}
+
+function showInfoBox() {
+ $("#keyboard-ctrl-info").show();
+ $("#keyboard-ctrl-info").focus();
+}
+
+function focusNextElement(currentFocus) {
+ if(currentFocus.hasClass("result")) {
+ focusNextResult(currentFocus);
+ } else if(false) {
+
+ } else {
+ focusResult();
+ }
+}
+function focusResult() {
+ $("div[data-index='"+ currentResultIndex + "'").focus();
+ n = $(".result").length;
+ currentResultIndex = 1 + currentResultIndex % n;
+ console.log(currentResultIndex + " - " + n);
+}
+
+function focusNextResult(currentFocus) {
+ if(!currentFocus.next().focus()) {
+ alert("test");
+ }
+ console.log(currentFocus);
+}
\ No newline at end of file
diff --git a/resources/js/utility.js b/resources/js/utility.js
index 9e958be17afca4a74382ad580c24692191be8ef0..4a94950271def55a3b887de3b0bfaee2a4a4dbd9 100644
--- a/resources/js/utility.js
+++ b/resources/js/utility.js
@@ -1,41 +1,4 @@
$(document).ready(function () {
$('.js-only').removeClass('js-only');
$('.no-js').addClass('hide');
-});
-
-// Flag used for checking if the user was shown the keyboard control information
-ctrlInfo = false;
-currentResultIndex = 1;
-
-document.onkeydown = checkKey;
-function checkKey(e) {
-
- e = e || window.event;
-
- if (e.keyCode == '9') {
- e.preventDefault();
- guideThroughMenu($(document.activeElement));
- }
-
-}
-
-function guideThroughMenu(focused) {
- if(!ctrlInfo) {
- ctrlInfo = true;
- showInfoBox();
- } else {
- focusNextResult();
- }
-}
-
-function showInfoBox() {
- $("#keyboard-ctrl-info").show();
- $("#keyboard-ctrl-info").focus();
-}
-
-function focusNextResult() {
- $("div[data-index='"+ currentResultIndex + "'").focus();
- n = $(".result").length;
- currentResultIndex = 1 + currentResultIndex % n;
- console.log(currentResultIndex + " - " + n);
-}
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/resources/less/metager/pages/resultpage/keyboard-ctrl.less b/resources/less/metager/pages/resultpage/keyboard-ctrl.less
index af67c504469a200011276fbdd55f0ca2cd3e388c..82e3aa9d63fa95c85aa356823c68a5b2feebaa6e 100644
--- a/resources/less/metager/pages/resultpage/keyboard-ctrl.less
+++ b/resources/less/metager/pages/resultpage/keyboard-ctrl.less
@@ -16,5 +16,12 @@
.keyboard-ctrl-info-header{
text-align: center;
+ h5 {
+ font-weight: bold;
+ }
+ }
+
+ ul {
+ text-align: left;
}
}
\ No newline at end of file
diff --git a/resources/views/layouts/ad.blade.php b/resources/views/layouts/ad.blade.php
index dc010c73d12cde5d72ddcc16741f62502a050eef..c7cd6e4d64f65824dc1b6ce8a1ed061d83ff43eb 100644
--- a/resources/views/layouts/ad.blade.php
+++ b/resources/views/layouts/ad.blade.php
@@ -1,5 +1,5 @@
@if(isset($ad) && !$apiAuthorized)
- <div class="result ad">
+ <div class="result ad" tabindex="0">
</span>
<div class="result-header">
<div class="result-headline">
diff --git a/resources/views/layouts/keyboardNavBox.blade.php b/resources/views/layouts/keyboardNavBox.blade.php
index 3d6558e26495e62c286ed4b0ba72ef10f0d17348..453cc367bd9582efc7632b358516869480d16be3 100644
--- a/resources/views/layouts/keyboardNavBox.blade.php
+++ b/resources/views/layouts/keyboardNavBox.blade.php
@@ -1,30 +1,15 @@
-<!-- Modal HTML
-<div id="myModal" class="modal fade" tabindex="-1">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title">Confirmation</h5>
- <button type="button" class="close" data-dismiss="modal">×</button>
- </div>
- <div class="modal-body">
- <p>Do you want to save changes to this document before closing?</p>
- <p class="text-secondary"><small>If you don't save, your changes will be lost.</small></p>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
- <button type="button" class="btn btn-primary">Save changes</button>
- </div>
+<div id="keyboard-ctrl-info" tabindex="0">
+ <div class="keyboard-ctrl-info-content">
+ <div class="keyboard-ctrl-info-header">
+ <h5 class="keyboard-ctrl-info-title">Tastatur-Navigationsanleitung</h5>
+ <div class="keyboard-ctrl-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>
+ <ul>
</div>
</div>
</div>
-
- -->
- <div id="keyboard-ctrl-info" tabindex="0">
- <div class="keyboard-ctrl-info-content">
- <div class="keyboard-ctrl-info-header">
- <h5 class="keyboard-ctrl-info-title">Tastatur-Navigationsanleitung</h5>
- <div class="keyboard-ctrl-info-body">
- </div>
- </div>
- </div>
- </div>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/resources/views/layouts/result.blade.php b/resources/views/layouts/result.blade.php
index e04ee81ab3f8ff1d8e8d45b92f03cc8af99fc234..e12011ec72ecde43419161a55f3c9552121ad885 100644
--- a/resources/views/layouts/result.blade.php
+++ b/resources/views/layouts/result.blade.php
@@ -1,4 +1,4 @@
-<div class="result" data-count="{{ $result->hash }}">
+<div class="result" data-count="{{ $result->hash }}" data-index="{{$index}}" tabindex="0">
<div class="result-header">
<div class="result-headline">
<h2 class="result-title" title="{{ $result->titel }}">
diff --git a/resources/views/resultpages/results.blade.php b/resources/views/resultpages/results.blade.php
index 0775be1f294fb391921e1f61512fadfed535c7d9..f250677d49e9b6e369f6f1fe83eb17dc86e0861c 100644
--- a/resources/views/resultpages/results.blade.php
+++ b/resources/views/resultpages/results.blade.php
@@ -18,7 +18,7 @@
@include('layouts.ad', ['ad' => $metager->popAd()])
@endif
@endif
- @include('layouts.result', ['result' => $result])
+ @include('layouts.result', ['result' => $result, 'index' => $index + 1])
@endforeach
@include('parts.pager')
</div>
diff --git a/webpack.mix.js b/webpack.mix.js
index aea26fc5dfa049d8924766b4d82fc0df3693016d..bf2dbd545f9f45e0a555541ddc9861935b3a05ca 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -68,7 +68,7 @@ mix
.babel("resources/js/bitpay.js", "public/js/bitpay.js")
// utility
.babel(
- ["resources/js/utility.js", "resources/js/translations.js"],
+ ["resources/js/utility.js", "resources/js/keyboardNavigation.js", "resources/js/translations.js"],
"public/js/utility.js"
)
.babel("resources/js/widgets.js", "public/js/widgets.js")