...
  View open merge request
Commits (8)
......@@ -8,6 +8,7 @@ Homestead.yaml
.orig
.vscode
langfiles.zip
npm-debug.log
# The Files created by Webpack in the build process
/public/**/*.css
!/public/fonts/arimo/stylesheet.css
......@@ -19,4 +20,4 @@ langfiles.zip
/.buildpath
/.project
composer.lock
\ No newline at end of file
composer.lock
This diff is collapsed.
......@@ -10,9 +10,9 @@
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"cross-env": "^5.1",
"laravel-mix": "^2.0",
"less": "^3.8.1",
"cross-env": "^5.2.0",
"laravel-mix": "^2.1.14",
"less": "^3.9.0",
"less-loader": "^4.1.0"
}
}
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.result").first(),
type: "result"
};
$(document).on('keydown', function(e) {
e = e || window.event;
// Check for TAB keypress
if (e.keyCode == '9') {
e.preventDefault();
tabKeyPressed();
// Check for ENTER keypress
} else if (e.keyCode == '13') {
e.preventDefault();
enterKeyPressed();
}
});
function focusElement(e, type) {
currentFocusedElement.element = e;
currentFocusedElement.type = type;
currentFocusedElement.element.focus();
}
function tabKeyPressed() {
if(!ctrlInfo) {
ctrlInfo = true;
showInfoBox();
} else {
focusNextElement();
}
}
function enterKeyPressed() {
if(currentFocusedElement.type === "result") {
console.log($(":focus").find("a").first());
focusElement($(":focus").find("a").first(), "link")
} else if(currentFocusedElement.type === "link") {
window.location = currentFocusedElement.element.attr('href');
}
}
function showInfoBox() {
$("#keyboard-nav-info").show();
focusElement($("#keyboard-nav-info"), "infobox");
}
function focusNextElement() {
if(currentFocusedElement.type === "result") {
focusNextResult();
} else {
focusElement($("div.result").not('.ad').first(), "result");
}
}
function focusNextResult() {
if(currentFocusedElement.element.next().length > 0) {
focusElement(currentFocusedElement.element.next(), "result");
} else {
focusElement($("div.result").not('.ad').first(), "result");
}
}
$(document).ready(function () {
$('.js-only').removeClass('js-only');
$('.no-js').addClass('hide');
});
});
\ No newline at end of file
......@@ -2,4 +2,5 @@
@import "./resultpage/result.less";
@import "./resultpage/product.less";
@import "./resultpage/quicktips.less";
@import "./resultpage/result-saver.less";
\ No newline at end of file
@import "./resultpage/result-saver.less";
@import "./resultpage/keyboard-nav.less";
\ No newline at end of file
/* Keyboard control styles*/
#keyboard-nav-info {
display: none;
position: relative;
margin: 10px 0;
padding: 10px;
width: 100%;
border: 1px solid #f00;
background-color: #fff;
&:focus {
border: 10px solid yellow;
}
.keyboard-nav-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">
......
<div id="keyboard-nav-info" tabindex="0">
<div class="keyboard-nav-info-content">
<div class="keyboard-nav-info-header">
<h5 class="keyboard-nav-info-title">Tastatur-Navigationsanleitung</h5>
<div class="keyboard-nav-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>
\ No newline at end of file
......@@ -31,6 +31,7 @@
@yield('results')
</div>
<div id="additions-container">
@include('layouts.keyboardNavBox')
@if( $metager->showQuicktips() )
<div id="quicktips">
@include('quicktips', ['quicktips', $quicktips])
......
<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>
......@@ -60,7 +60,8 @@ mix
[
"resources/js/scriptResultPage.js",
"resources/js/result-saver.js",
"resources/js/translations.js"
"resources/js/translations.js",
"resources/js/keyboardNavigation.js"
],
"public/js/scriptResultPage.js"
)
......