From 2614a4c8cd576aa42a2ab11be502cd2ccd260e47 Mon Sep 17 00:00:00 2001 From: Aria Date: Mon, 2 Sep 2019 11:11:40 +0200 Subject: [PATCH] changed some minor stuff, added comments --- resources/js/keyboardNavigation.js | 44 +++++++++++++++---- .../pages/resultpage/keyboard-nav.less | 7 +-- 2 files changed, 36 insertions(+), 15 deletions(-) diff --git a/resources/js/keyboardNavigation.js b/resources/js/keyboardNavigation.js index e4366bf4..938bddd0 100644 --- a/resources/js/keyboardNavigation.js +++ b/resources/js/keyboardNavigation.js @@ -1,21 +1,32 @@ -var ctrlInfo = false; // Flag used for checking if the user was shown the keyboard control information +/** + * Flag ctrlInfo is used for initial display of the navigation box + */ +var ctrlInfo = false; $(document).ready(function () { + // Add entry point for tabbing to the first result $('[data-index="1"').attr("id", "results-entry"); - $('#foki a').first().attr("id", "settings-entry"); + // Initially focus the searchbar $('div.search-input input').focus(); }); +/** + * Simulate a click on enter keypress when focused on labels + */ $('label').on('keydown', function(e) { if(e.keyCode == '13') { $(this).click(); } }); +/** + * Handles tab keypress and escape keypress + */ $(document).on('keydown', function(e) { e = e || window.event; + // On first tab keypress there is special behaviour and the ctrlInfo flag is set if(!ctrlInfo && e.keyCode == '9') { - focusInfoBox(); + focusNavBox(); e.preventDefault(); ctrlInfo = true; } else if(e.keyCode == '27') { @@ -23,24 +34,39 @@ $(document).on('keydown', function(e) { } }); -function escKeyPressed() { - focusInfoBox(); - $('input[type="checkbox"]').removeAttr('checked'); -} - -function focusInfoBox() { +/** + * Shows the navigation box and focuses the first tag + */ +function focusNavBox() { $('#keyboard-nav-info').show(); $('#keyboard-nav-info a').first().focus(); } +/** + * Focuses the navigation box and unchecks all checkboxes + */ +function escKeyPressed() { + focusNavBox(); + $('input[type="checkbox"]').removeAttr('checked'); +} + +/** + * Focuses the first tag of the first result + */ function focusResults() { $('#results-entry .result-title a').focus(); } +/** + * Focuses the first tag of the focus options + */ function focusSettings() { $('#foki a').first().focus(); } +/** + * Focuses the first of the sidebar + */ function focusNavigation() { $('#sidebarToggle').prop('checked', true); $('.sidebar-list a').first().focus(); diff --git a/resources/less/metager/pages/resultpage/keyboard-nav.less b/resources/less/metager/pages/resultpage/keyboard-nav.less index d0a348bc..b3819b5f 100644 --- a/resources/less/metager/pages/resultpage/keyboard-nav.less +++ b/resources/less/metager/pages/resultpage/keyboard-nav.less @@ -1,6 +1,5 @@ /* Keyboard control styles*/ - #keyboard-nav-info { display: none; position: relative; @@ -10,11 +9,7 @@ border: 1px solid #f00; background-color: #fff; - &:focus { - border: 10px solid yellow; - } - - .keyboard-nav-info-header{ + .keyboard-nav-info-header { text-align: center; h5 { font-weight: bold; -- GitLab