Commit 74762cb3 authored by Aria Givi's avatar Aria Givi

Removed existing code, instead working with tabindeces, still requires logic for the navigation box

parent 466deaf9
var ctrlInfo = false;
$('label').on('keydown', function(e) {
if(e.keyCode == '13') {
$(this).click();
}
});
$(document).on('keydown', function(e) {
e = e || window.event;
if(!ctrlInfo && e.keyCode == '9') {
focusInfoBox();
e.preventDefault();
ctrlInfo = true;
} else if(e.keyCode == '27') {
escKeyPressed();
}
});
function escKeyPressed() {
focusInfoBox();
}
function focusInfoBox() {
$("#keyboard-nav-info").show();
$("#keyboard-nav-info a").first().focus();
}
function jumpToResults() {
}
function jumpToSettings() {
}
function jumpToNavigation() {
}
/*
var ctrlInfo = false; // Flag used for checking if the user was shown the keyboard control information 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 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) var currentFocusedElement = { // Object used for storing currently focused element and element type (e.g. anchor tag or result div)
...@@ -6,37 +46,17 @@ var currentFocusedElement = { // Object used for storing currently focused ...@@ -6,37 +46,17 @@ var currentFocusedElement = { // Object used for storing currently focused
mode: "results" mode: "results"
}; };
$(document).ready(function () { $(document).ready(function () {
$('[data-index="1"').attr("id", "results-entry"); $('[data-index="1"').attr("id", "results-entry");
focusElement($("div.search-input input"), "input"); focusElement($("div.search-input input"), "input");
}); });
$(document).on('keydown', function(e) {
e = e || window.event;
// Check for TAB keypress
if (e.keyCode == '9') {
if(e.shiftKey) {
// Add logic for reverse tabbing
} else {
tabKeyPressed();
e.preventDefault();
}
// Check for ENTER keypress
} else if (e.keyCode == '13') {
enterKeyPressed();
e.preventDefault();
// Check for ESC keypress
} else if(e.keyCode == '27') {
escKeyPressed();
}
});
function focusElement(e, type) {
currentFocusedElement.element = e; // Focuses passed element and sets currentFocusedElement object
currentFocusedElement.type = (type !== undefined ? type : currentFocusedElement.type);
currentFocusedElement.element.focus();
}
function tabKeyPressed() { function tabKeyPressed() {
if(!ctrlInfo) { if(!ctrlInfo) {
...@@ -50,6 +70,7 @@ function tabKeyPressed() { ...@@ -50,6 +70,7 @@ function tabKeyPressed() {
function enterKeyPressed() { function enterKeyPressed() {
if(currentFocusedElement.type === "infobox") { if(currentFocusedElement.type === "infobox") {
focusElement($(currentFocusedElement.element.attr('href')), "result"); focusElement($(currentFocusedElement.element.attr('href')), "result");
console.log(currentFocusedElement.element.html());
/* switch(currentFocusedElement.element.attr('id')) { /* switch(currentFocusedElement.element.attr('id')) {
case 'results-nav': case 'results-nav':
console.log(currentFocusedElement.element.attr('id')); console.log(currentFocusedElement.element.attr('id'));
...@@ -62,7 +83,7 @@ function enterKeyPressed() { ...@@ -62,7 +83,7 @@ function enterKeyPressed() {
break; break;
default: default:
console.log(currentFocusedElement.element.attr('id')); console.log(currentFocusedElement.element.attr('id'));
} */ }
} else if(currentFocusedElement.type === "result") { } else if(currentFocusedElement.type === "result") {
focusElement($(":focus").find("a").first(), "link") focusElement($(":focus").find("a").first(), "link")
} else if(currentFocusedElement.type === "link" || "infobox") { } else if(currentFocusedElement.type === "link" || "infobox") {
...@@ -72,16 +93,9 @@ function enterKeyPressed() { ...@@ -72,16 +93,9 @@ function enterKeyPressed() {
} }
} }
function escKeyPressed() {
if(currentFocusedElement.type === "link") {
focusElement(currentFocusedElement.element.parents(".result"), "result");
}
}
function showInfoBox() {
$("#keyboard-nav-info").show();
focusElement($("#keyboard-nav-info a").first(), "infobox");
}
function focusNextElement() { function focusNextElement() {
if(currentFocusedElement.type === "infobox") { if(currentFocusedElement.type === "infobox") {
...@@ -121,4 +135,6 @@ function rotateInfoBoxLinks() { ...@@ -121,4 +135,6 @@ function rotateInfoBoxLinks() {
default: default:
focusElement($('#results-nav'), 'infobox'); focusElement($('#results-nav'), 'infobox');
} }
} }
\ No newline at end of file
*/
\ No newline at end of file
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
<h5 class="keyboard-nav-info-title">Tastatur-Navigation</h5> <h5 class="keyboard-nav-info-title">Tastatur-Navigation</h5>
<div class="keyboard-nav-info-body"> <div class="keyboard-nav-info-body">
<ul> <ul>
<li><a href="#results-entry" id="results-nav">Zu den Ergebnissen springen</a></li> <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">Zu den Sucheinstellungen 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">Zu der Seitennavigation springen</a></li> <li><a href="#nav-entry" id="site-nav" onclick="jumpToNavigation()" tabindex="3">Zu der Seitennavigation springen</a></li>
<ul> <ul>
</div> </div>
</div> </div>
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div id="research-bar-container"> <div id="research-bar-container">
<div id="research-bar"> <div id="research-bar">
<div id="header-logo"> <div id="header-logo">
<a class="screen-large" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"> <a class="screen-large" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}" tabindex="4">
<h1>MetaGer</h1> <h1>MetaGer</h1>
</a> </a>
<a class="screen-small" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"> <a class="screen-small" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
......
...@@ -58,10 +58,10 @@ ...@@ -58,10 +58,10 @@
<a class="result-open-proxy" onmouseover="$(this).popover('show');" onmouseout="$(this).popover('hide');" data-toggle="popover" data-placement="auto right" data-container="body" data-content="@lang('result.proxytext')" href="{{ $result->proxyLink }}" target="{{ $metager->getNewtab() }}" rel="noopener"> <a class="result-open-proxy" onmouseover="$(this).popover('show');" onmouseout="$(this).popover('hide');" data-toggle="popover" data-placement="auto right" data-container="body" data-content="@lang('result.proxytext')" href="{{ $result->proxyLink }}" target="{{ $metager->getNewtab() }}" rel="noopener">
{!! trans('result.options.5') !!} {!! trans('result.options.5') !!}
</a> </a>
<label class="open-result-options navigation-element" for="result-toggle-{{$result->hash}}"> <label class="open-result-options navigation-element" for="result-toggle-{{$result->hash}}" tabindex='0'>
{{ trans('result.options.more')}} {{ trans('result.options.more')}}
</label> </label>
<label class="close-result-options navigation-element" for="result-toggle-{{$result->hash}}"> <label class="close-result-options navigation-element" for="result-toggle-{{$result->hash}}" tabindex='0'>
{{ trans('result.options.less')}} {{ trans('result.options.less')}}
</label> </label>
</div> </div>
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div id="filter-toggle"> <div id="filter-toggle">
@if(sizeof($metager->getAvailableParameterFilter()) > 0) @if(sizeof($metager->getAvailableParameterFilter()) > 0)
<div class="option-toggle"> <div class="option-toggle">
<label class="navigation-element" for="options-toggle"> <label class="navigation-element" for="options-toggle" tabindex="0">
<i class="fas fa-filter"></i> Filter&hellip; <i class="fas fa-filter"></i> Filter&hellip;
</label> </label>
</div> </div>
......
...@@ -3,18 +3,18 @@ ...@@ -3,18 +3,18 @@
<div class="searchbar {{$class ?? ''}}"> <div class="searchbar {{$class ?? ''}}">
<div class="search-input-submit"> <div class="search-input-submit">
<div id="search-key"> <div id="search-key">
<a id="key-link" @if(isset($apiAuthorized) && $apiAuthorized)class="authorized" @else class="unauthorized"@endif href="{{ action('KeyController@index', ['redirUrl' => url()->full() ]) }}" data-tooltip="{{ trans ('index.key.tooltip') }}"> <a id="key-link" @if(isset($apiAuthorized) && $apiAuthorized)class="authorized" @else class="unauthorized"@endif href="{{ action('KeyController@index', ['redirUrl' => url()->full() ]) }}" data-tooltip="{{ trans ('index.key.tooltip') }}" tabindex="0">
<i class="fa fa-key" aria-hidden="true"></i> <i class="fa fa-key" aria-hidden="true"></i>
</a> </a>
</div> </div>
<div class="search-input"> <div class="search-input">
<input type="search" name="eingabe" value="@if(isset($eingabe)){{$eingabe}}@endif" required="" @if(\Request::is('/')) autofocus @endif autocomplete="off" class="form-control" placeholder="{{ trans('index.placeholder') }}" tabindex="2"> <input type="search" name="eingabe" value="@if(isset($eingabe)){{$eingabe}}@endif" required="" @if(\Request::is('/')) autofocus @endif autocomplete="off" class="form-control" placeholder="{{ trans('index.placeholder') }}" tabindex="0">
<button id="search-delete-btn" type="button"> <button id="search-delete-btn" type="button" tabindex="-1">
&#xd7; &#xd7;
</button> </button>
</div> </div>
<div class="search-submit" id="submit-inputgroup"> <div class="search-submit" id="submit-inputgroup">
<button type="submit"> <button type="submit" tabindex="-1">
<i class="fa fa-search" aria-hidden="true"></i> <i class="fa fa-search" aria-hidden="true"></i>
</button> </button>
</div> </div>
......
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