added foundation for keyboard control

resources/js/utility.js

@@ -2,3 +2,19 @@ $(document).ready(function () {
   $('.js-only').removeClass('js-only');
   $('.no-js').addClass('hide');
 });
+
+document.onkeydown = checkKey;
+
+function checkKey(e) {
+
+    e = e || window.event;
+
+
+    if (e.keyCode == '9') {
+        e.preventDefault();
+        $("#keyboard-ctrl-info").show();
+        $("#keyboard-ctrl-info").focus();
+    } else {
+    }
+
+}
\ No newline at end of file

resources/less/metager/pages/resultpage.less

@@ -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-ctrl.less";
\ No newline at end of file

resources/less/metager/pages/resultpage/keyboard-ctrl.less

+/* Keyboard control styles*/
+
+
+#keyboard-ctrl-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-ctrl-info-header{
+        text-align: center;
+    }
+}
\ No newline at end of file

resources/views/layouts/keyboardNavBox.blade.php

+<!-- 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>
+        </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

resources/views/layouts/researchandtabs.blade.php

@@ -31,6 +31,7 @@
 		@yield('results')
 	</div>
 	<div id="additions-container">
+		@include('layouts.keyboardNavBox')
 		@if( $metager->showQuicktips() )
 			<div id="quicktips">
 				@include('quicktips', ['quicktips', $quicktips])