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 () {
$('.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
......@@ -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
@if(isset($ad) && !$apiAuthorized)
<div class="result ad">
<div class="result ad" tabindex="0">
</span>
<div class="result-header">
<div class="result-headline">
......
<!-- 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">&times;</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
<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 }}">
......
......@@ -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>
......@@ -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")
......
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