From 2396367ee8a9346268d683e25ff18607c4a7a85c Mon Sep 17 00:00:00 2001 From: Aria Date: Wed, 24 Jul 2019 12:30:13 +0200 Subject: [PATCH] outsourced javascript, made result tabbing a bit more dynamic --- resources/js/keyboardNavigation.js | 49 +++++++++++++++++++ resources/js/utility.js | 39 +-------------- .../pages/resultpage/keyboard-ctrl.less | 7 +++ resources/views/layouts/ad.blade.php | 2 +- .../views/layouts/keyboardNavBox.blade.php | 39 +++++---------- resources/views/layouts/result.blade.php | 2 +- resources/views/resultpages/results.blade.php | 2 +- webpack.mix.js | 2 +- 8 files changed, 73 insertions(+), 69 deletions(-) create mode 100644 resources/js/keyboardNavigation.js diff --git a/resources/js/keyboardNavigation.js b/resources/js/keyboardNavigation.js new file mode 100644 index 00000000..4b52bc43 --- /dev/null +++ b/resources/js/keyboardNavigation.js @@ -0,0 +1,49 @@ +var ctrlInfo = false; // Flag used for checking if the user was shown the keyboard control information +var currentResultIndex = 1; // stores result which was focused last + +document.onkeydown = checkKey; +function checkKey(e) { + e = e || window.event; +// Check for TAB keypress + if (e.keyCode == '9') { + e.preventDefault(); + tabKeyPressed($(document.activeElement)); + } +} + +function tabKeyPressed() { + if(!ctrlInfo) { + ctrlInfo = true; + showInfoBox(); + } else { + focusNextElement($(":focus")); + } +} + +function showInfoBox() { + $("#keyboard-ctrl-info").show(); + $("#keyboard-ctrl-info").focus(); +} + +function focusNextElement(currentFocus) { + if(currentFocus.hasClass("result")) { + focusNextResult(currentFocus); + } else if(false) { + + } else { + focusResult(); + } +} +function focusResult() { + $("div[data-index='"+ currentResultIndex + "'").focus(); + n = $(".result").length; + currentResultIndex = 1 + currentResultIndex % n; + console.log(currentResultIndex + " - " + n); +} + +function focusNextResult(currentFocus) { + if(!currentFocus.next().focus()) { + alert("test"); + } + console.log(currentFocus); +} \ No newline at end of file diff --git a/resources/js/utility.js b/resources/js/utility.js index 9e958be1..4a949502 100644 --- a/resources/js/utility.js +++ b/resources/js/utility.js @@ -1,41 +1,4 @@ $(document).ready(function () { $('.js-only').removeClass('js-only'); $('.no-js').addClass('hide'); -}); - -// Flag used for checking if the user was shown the keyboard control information -ctrlInfo = false; -currentResultIndex = 1; - -document.onkeydown = checkKey; -function checkKey(e) { - - e = e || window.event; - - if (e.keyCode == '9') { - e.preventDefault(); - guideThroughMenu($(document.activeElement)); - } - -} - -function guideThroughMenu(focused) { - if(!ctrlInfo) { - ctrlInfo = true; - showInfoBox(); - } else { - focusNextResult(); - } -} - -function showInfoBox() { - $("#keyboard-ctrl-info").show(); - $("#keyboard-ctrl-info").focus(); -} - -function focusNextResult() { - $("div[data-index='"+ currentResultIndex + "'").focus(); - n = $(".result").length; - currentResultIndex = 1 + currentResultIndex % n; - console.log(currentResultIndex + " - " + n); -} \ No newline at end of file +}); \ No newline at end of file diff --git a/resources/less/metager/pages/resultpage/keyboard-ctrl.less b/resources/less/metager/pages/resultpage/keyboard-ctrl.less index af67c504..82e3aa9d 100644 --- a/resources/less/metager/pages/resultpage/keyboard-ctrl.less +++ b/resources/less/metager/pages/resultpage/keyboard-ctrl.less @@ -16,5 +16,12 @@ .keyboard-ctrl-info-header{ text-align: center; + h5 { + font-weight: bold; + } + } + + ul { + text-align: left; } } \ No newline at end of file diff --git a/resources/views/layouts/ad.blade.php b/resources/views/layouts/ad.blade.php index dc010c73..c7cd6e4d 100644 --- a/resources/views/layouts/ad.blade.php +++ b/resources/views/layouts/ad.blade.php @@ -1,5 +1,5 @@ @if(isset($ad) && !$apiAuthorized) -
+
diff --git a/resources/views/layouts/keyboardNavBox.blade.php b/resources/views/layouts/keyboardNavBox.blade.php index 3d6558e2..453cc367 100644 --- a/resources/views/layouts/keyboardNavBox.blade.php +++ b/resources/views/layouts/keyboardNavBox.blade.php @@ -1,30 +1,15 @@ - -
-
-
-
Tastatur-Navigationsanleitung
-
-
-
-
-
\ No newline at end of file +
\ No newline at end of file diff --git a/resources/views/layouts/result.blade.php b/resources/views/layouts/result.blade.php index e04ee81a..e12011ec 100644 --- a/resources/views/layouts/result.blade.php +++ b/resources/views/layouts/result.blade.php @@ -1,4 +1,4 @@ -
+

diff --git a/resources/views/resultpages/results.blade.php b/resources/views/resultpages/results.blade.php index 0775be1f..f250677d 100644 --- a/resources/views/resultpages/results.blade.php +++ b/resources/views/resultpages/results.blade.php @@ -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')

diff --git a/webpack.mix.js b/webpack.mix.js index aea26fc5..bf2dbd54 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -68,7 +68,7 @@ mix .babel("resources/js/bitpay.js", "public/js/bitpay.js") // utility .babel( - ["resources/js/utility.js", "resources/js/translations.js"], + ["resources/js/utility.js", "resources/js/keyboardNavigation.js", "resources/js/translations.js"], "public/js/utility.js" ) .babel("resources/js/widgets.js", "public/js/widgets.js") -- GitLab