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

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

parent 466deaf9
No related branches found
No related tags found
2 merge requests!1453Development,!1447Resolve "Make result page keyboard maneuverable"
Hide whitespace changes
Inline Side-by-side
resources/js/keyboardNavigation.js
+ 51
− 35
View file @ 74762cb3
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 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)
......@@ -6,37 +46,17 @@ var currentFocusedElement = { // Object used for storing currently focused
mode: "results"
};
$(document).ready(function () {
$('[data-index="1"').attr("id", "results-entry");
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;
currentFocusedElement.type = (type !== undefined ? type : currentFocusedElement.type);
currentFocusedElement.element.focus();
}
// Focuses passed element and sets currentFocusedElement object
function tabKeyPressed() {
if(!ctrlInfo) {
......@@ -50,6 +70,7 @@ function tabKeyPressed() {
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'));
......@@ -62,7 +83,7 @@ function enterKeyPressed() {
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") {
......@@ -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() {
if(currentFocusedElement.type === "infobox") {
......@@ -121,4 +135,6 @@ function rotateInfoBoxLinks() {
default:
focusElement($('#results-nav'), 'infobox');
}
}
\ No newline at end of file
}
*/
\ No newline at end of file
resources/views/layouts/keyboardNavBox.blade.php
+ 3
− 3
View file @ 74762cb3
......@@ -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">Zu den Ergebnissen springen</a></li>
<li><a href="#settings-entry" id="settings-nav">Zu den Sucheinstellungen springen</a></li>
<li><a href="#nav-entry" id="site-nav">Zu der Seitennavigation 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" 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>
<ul>
</div>
</div>
......
resources/views/layouts/researchandtabs.blade.php
+ 1
− 1
View file @ 74762cb3
......@@ -3,7 +3,7 @@
<div id="research-bar-container">
<div id="research-bar">
<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>
</a>
<a class="screen-small" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
......
resources/views/layouts/result.blade.php
+ 2
− 2
View file @ 74762cb3
......@@ -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">
{!! trans('result.options.5') !!}
</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')}}
</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')}}
</label>
</div>
......
resources/views/parts/filter.blade.php
+ 1
− 1
View file @ 74762cb3
......@@ -3,7 +3,7 @@
<div id="filter-toggle">
@if(sizeof($metager->getAvailableParameterFilter()) > 0)
<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;
</label>
</div>
......
resources/views/parts/searchbar.blade.php
+ 4
− 4
View file @ 74762cb3
......@@ -3,18 +3,18 @@
<div class="searchbar {{$class ?? ''}}">
<div class="search-input-submit">
<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>
</a>
</div>
<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">
<button id="search-delete-btn" type="button">
<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" tabindex="-1">
&#xd7;
</button>
</div>
<div class="search-submit" id="submit-inputgroup">
<button type="submit">
<button type="submit" tabindex="-1">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment