diff --git a/resources/js/keyboardNavigation.js b/resources/js/keyboardNavigation.js index a726ce9e58d354e851a493ae4de20d55c45ab04f..308cc772c3d43cb8b39eda856eafe4e840cad19c 100644 --- a/resources/js/keyboardNavigation.js +++ b/resources/js/keyboardNavigation.js @@ -1,6 +1,6 @@ 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 currentElementData = { // 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) element: $("div.result").first(), type: "result" }; @@ -18,11 +18,10 @@ $(document).on('keydown', function(e) { } }); -function setFocus(e, type) { - currentElementData.element = e; - currentElementData.type = type; - console.log(currentElementData); - currentElementData.element.focus(); +function focusElement(e, type) { + currentFocusedElement.element = e; + currentFocusedElement.type = type; + currentFocusedElement.element.focus(); } function tabKeyPressed() { @@ -35,31 +34,31 @@ function tabKeyPressed() { } function enterKeyPressed() { - if(currentElementData.type === "result") { + if(currentFocusedElement.type === "result") { console.log($(":focus").find("a").first()); - setFocus($(":focus").find("a").first(), "link") - } else if(currentElementData.type === "link") { - window.location = currentElementData.element.attr('href'); + focusElement($(":focus").find("a").first(), "link") + } else if(currentFocusedElement.type === "link") { + window.location = currentFocusedElement.element.attr('href'); } } function showInfoBox() { - $("#keyboard-ctrl-info").show(); - setFocus($("#keyboard-ctrl-info"), "infobox"); + $("#keyboard-nav-info").show(); + focusElement($("#keyboard-nav-info"), "infobox"); } function focusNextElement() { - if(currentElementData.type === "result") { + if(currentFocusedElement.type === "result") { focusNextResult(); } else { - setFocus($("div.result").not('.ad').first(), "result"); + focusElement($("div.result").not('.ad').first(), "result"); } } function focusNextResult() { - if(currentElementData.element.next().length > 0) { - setFocus(currentElementData.element.next(), "result"); + if(currentFocusedElement.element.next().length > 0) { + focusElement(currentFocusedElement.element.next(), "result"); } else { - setFocus($("div.result").not('.ad').first(), "result"); + focusElement($("div.result").not('.ad').first(), "result"); } } diff --git a/resources/less/metager/pages/resultpage.less b/resources/less/metager/pages/resultpage.less index 01bef22bb537d4c018329cac3a7ee128a40c5700..90d190d8194ef13de6a44adfa4e7298318eb3968 100644 --- a/resources/less/metager/pages/resultpage.less +++ b/resources/less/metager/pages/resultpage.less @@ -3,4 +3,4 @@ @import "./resultpage/product.less"; @import "./resultpage/quicktips.less"; @import "./resultpage/result-saver.less"; -@import "./resultpage/keyboard-ctrl.less"; \ No newline at end of file +@import "./resultpage/keyboard-nav.less"; \ No newline at end of file diff --git a/resources/less/metager/pages/resultpage/keyboard-ctrl.less b/resources/less/metager/pages/resultpage/keyboard-nav.less similarity index 87% rename from resources/less/metager/pages/resultpage/keyboard-ctrl.less rename to resources/less/metager/pages/resultpage/keyboard-nav.less index 82e3aa9d63fa95c85aa356823c68a5b2feebaa6e..2a25a0e000100ca1505fe438bbbac6f94583ee76 100644 --- a/resources/less/metager/pages/resultpage/keyboard-ctrl.less +++ b/resources/less/metager/pages/resultpage/keyboard-nav.less @@ -1,7 +1,7 @@ /* Keyboard control styles*/ -#keyboard-ctrl-info { +#keyboard-nav-info { display: none; position: relative; margin: 10px 0; @@ -14,7 +14,7 @@ border: 10px solid yellow; } - .keyboard-ctrl-info-header{ + .keyboard-nav-info-header{ text-align: center; h5 { font-weight: bold; diff --git a/resources/views/layouts/keyboardNavBox.blade.php b/resources/views/layouts/keyboardNavBox.blade.php index 453cc367bd9582efc7632b358516869480d16be3..e194b557858cb7218ea505130a05c44b9d8c5734 100644 --- a/resources/views/layouts/keyboardNavBox.blade.php +++ b/resources/views/layouts/keyboardNavBox.blade.php @@ -1,8 +1,8 @@ -<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 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> diff --git a/webpack.mix.js b/webpack.mix.js index bf2dbd545f9f45e0a555541ddc9861935b3a05ca..573059346677b6f5738dc299cbc260fa310a51df 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -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" ) @@ -68,7 +69,7 @@ mix .babel("resources/js/bitpay.js", "public/js/bitpay.js") // utility .babel( - ["resources/js/utility.js", "resources/js/keyboardNavigation.js", "resources/js/translations.js"], + ["resources/js/utility.js", "resources/js/translations.js"], "public/js/utility.js" ) .babel("resources/js/widgets.js", "public/js/widgets.js")