Skip to content
Snippets Groups Projects
Commit 183e7db4 authored by Aria Givi's avatar Aria Givi
Browse files

only missing comments now

parent 74762cb3
No related branches found
No related tags found
2 merge requests!1453Development,!1447Resolve "Make result page keyboard maneuverable"
var ctrlInfo = false;
var ctrlInfo = false; // Flag used for checking if the user was shown the keyboard control information
$(document).ready(function () {
$('[data-index="1"').attr("id", "results-entry");
$('#foki a').first().attr("id", "settings-entry");
$('div.search-input input').focus();
});
$('label').on('keydown', function(e) {
if(e.keyCode == '13') {
......@@ -19,122 +25,23 @@ $(document).on('keydown', function(e) {
function escKeyPressed() {
focusInfoBox();
$('input[type="checkbox"]').removeAttr('checked');
}
function focusInfoBox() {
$("#keyboard-nav-info").show();
$("#keyboard-nav-info a").first().focus();
$('#keyboard-nav-info').show();
$('#keyboard-nav-info a').first().focus();
}
function jumpToResults() {
function focusResults() {
$('#results-entry .result-title a').focus();
}
function jumpToSettings() {
}
function jumpToNavigation() {
}
/*
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.search-input input"),
type: "input",
mode: "results"
};
$(document).ready(function () {
$('[data-index="1"').attr("id", "results-entry");
focusElement($("div.search-input input"), "input");
});
// Focuses passed element and sets currentFocusedElement object
function tabKeyPressed() {
if(!ctrlInfo) {
ctrlInfo = true;
showInfoBox();
} else {
focusNextElement();
}
}
function enterKeyPressed() {
if(currentFocusedElement.type === "infobox") {
focusElement($(currentFocusedElement.element.attr('href')), "result");
console.log(currentFocusedElement.element.html());
/* 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" || "infobox") {
window.location = currentFocusedElement.element.attr('href');
} else if(currentFocusedElement.type === "input") {
$("#searchForm").submit();
}
}
function focusNextElement() {
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");
}
}
function focusNextResult() {
if(currentFocusedElement.element.next().length > 0) {
focusElement(currentFocusedElement.element.next(), "result");
} else {
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');
}
function focusSettings() {
$('#foki a').first().focus();
}
*/
\ No newline at end of file
function focusNavigation() {
$('#sidebarToggle').prop('checked', true);
$('.sidebar-list a').first().focus();
}
\ No newline at end of file
......@@ -47,7 +47,7 @@
line-height: 20px;
display: inline-block;
width: 100%;
&:hover {
&:hover, &:focus {
color: red;
}
}
......@@ -89,7 +89,7 @@
display: inline-block;
width: 100%;
color: black;
&:hover {
&:hover, &:focus {
color: red;
}
}
......
@if(isset($ad) && !$apiAuthorized)
<div class="result ad" tabindex="0">
<div class="result ad">
</span>
<div class="result-header">
<div class="result-headline">
......
......@@ -4,9 +4,9 @@
<h5 class="keyboard-nav-info-title">Tastatur-Navigation</h5>
<div class="keyboard-nav-info-body">
<ul>
<li><a href="#results-entry" id="results-nav" onclick="jumpToResults()" tabindex="1">Zu den Ergebnissen springen</a></li>
<li><a href="#settings-entry" id="settings-nav" onclick="jumpToSettings()" tabindex="2">Zu den Sucheinstellungen springen</a></li>
<li><a href="#nav-entry" id="site-nav" onclick="jumpToNavigation()" tabindex="3">Zu der Seitennavigation springen</a></li>
<li><a href="#" id="results-nav" onclick="focusResults()" tabindex="1">Zu den Ergebnissen springen</a></li>
<li><a href="#" id="settings-nav" onclick="focusSettings()" tabindex="2">Zu den Sucheinstellungen springen</a></li>
<li><a href="#" id="site-nav" onclick="focusNavigation()" tabindex="3">Zu der Seitennavigation springen</a></li>
<ul>
</div>
</div>
......
<div class="result" data-count="{{ $result->hash }}" data-index="{{$index}}" tabindex="0">
<div class="result" data-count="{{ $result->hash }}" data-index="{{$index}}">
<div class="result-header">
<div class="result-headline">
<h2 class="result-title" title="{{ $result->titel }}">
......
......@@ -52,7 +52,7 @@
<hr>
<li class="metager-dropdown">
<input id="contactToggle" class="sidebarCheckbox" type="checkbox">
<label for="contactToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" id="navigationKontakt" >
<label for="contactToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" id="navigationKontakt" tabindex=0>
<i class="fa fa-comments" aria-hidden="true"></i>
<span>{{ trans('sidebar.nav18') }}</span>
<span class="caret"></span>
......@@ -74,7 +74,7 @@
</li>
<li class="metager-dropdown">
<input id="servicesToggle" class="sidebarCheckbox" type="checkbox">
<label for="servicesToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" >
<label for="servicesToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" tabindex=0>
<i class="fa fa-wrench" aria-hidden="true"></i>
<span>{{ trans('sidebar.nav15') }}</span>
<span class="caret"></span>
......@@ -113,7 +113,7 @@
</li>
<li class="metager-dropdown">
<input id="languagesToggle" class="sidebarCheckbox" type="checkbox">
<label for="languagesToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" id="navigationSprache" >
<label for="languagesToggle" class="metager-dropdown-toggle navigation-element" aria-haspopup="true" id="navigationSprache" tabindex=0>
<i class="fa fa-globe" aria-hidden="true"></i>
<span>{{ trans('sidebar.nav19') }} ({{ LaravelLocalization::getSupportedLocales()[LaravelLocalization::getCurrentLocale()]['native'] }})</span>
<span class="caret"></span>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment