Commit 2396367e authored by Aria Givi's avatar Aria Givi

outsourced javascript, made result tabbing a bit more dynamic

parent 330ffb2c
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
$(document).ready(function () { $(document).ready(function () {
$('.js-only').removeClass('js-only'); $('.js-only').removeClass('js-only');
$('.no-js').addClass('hide'); $('.no-js').addClass('hide');
}); });
\ No newline at end of file
// 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
...@@ -16,5 +16,12 @@ ...@@ -16,5 +16,12 @@
.keyboard-ctrl-info-header{ .keyboard-ctrl-info-header{
text-align: center; text-align: center;
h5 {
font-weight: bold;
}
}
ul {
text-align: left;
} }
} }
\ No newline at end of file
@if(isset($ad) && !$apiAuthorized) @if(isset($ad) && !$apiAuthorized)
<div class="result ad"> <div class="result ad" tabindex="0">
</span> </span>
<div class="result-header"> <div class="result-header">
<div class="result-headline"> <div class="result-headline">
......
<!-- Modal HTML <div id="keyboard-ctrl-info" tabindex="0">
<div id="myModal" class="modal fade" tabindex="-1"> <div class="keyboard-ctrl-info-content">
<div class="modal-dialog"> <div class="keyboard-ctrl-info-header">
<div class="modal-content"> <h5 class="keyboard-ctrl-info-title">Tastatur-Navigationsanleitung</h5>
<div class="modal-header"> <div class="keyboard-ctrl-info-body">
<h5 class="modal-title">Confirmation</h5> <p>Die Navigation durch die Ergebnisseite ist hierarchisch aufgebaut.</p>
<button type="button" class="close" data-dismiss="modal">&times;</button> <ul>
</div> <li>TAB-Taste: Innerhalb der aktuellen Ebene zum nächsten Element springen.</li>
<div class="modal-body"> <li>Enter-Taste: Aktuelles Element auswählen und eine Stufe tiefer gehen.</li>
<p>Do you want to save changes to this document before closing?</p> <li>Escape-Taste: Eine Ebene nach oben springen.</li>
<p class="text-secondary"><small>If you don't save, your changes will be lost.</small></p> <ul>
</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> </div>
</div> </div>
</div> </div>
</div>
--> \ No newline at end of file
<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 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-header">
<div class="result-headline"> <div class="result-headline">
<h2 class="result-title" title="{{ $result->titel }}"> <h2 class="result-title" title="{{ $result->titel }}">
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
@include('layouts.ad', ['ad' => $metager->popAd()]) @include('layouts.ad', ['ad' => $metager->popAd()])
@endif @endif
@endif @endif
@include('layouts.result', ['result' => $result]) @include('layouts.result', ['result' => $result, 'index' => $index + 1])
@endforeach @endforeach
@include('parts.pager') @include('parts.pager')
</div> </div>
...@@ -68,7 +68,7 @@ mix ...@@ -68,7 +68,7 @@ mix
.babel("resources/js/bitpay.js", "public/js/bitpay.js") .babel("resources/js/bitpay.js", "public/js/bitpay.js")
// utility // utility
.babel( .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" "public/js/utility.js"
) )
.babel("resources/js/widgets.js", "public/js/widgets.js") .babel("resources/js/widgets.js", "public/js/widgets.js")
......
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