Commit 5fe284a4 authored by Dave Lane's avatar Dave Lane
Browse files

working keyboard navigation

parent e1784c61
...@@ -75,7 +75,7 @@ article.ore-form .container .entry-content > div.ore { ...@@ -75,7 +75,7 @@ article.ore-form .container .entry-content > div.ore {
text-decoration: none; text-decoration: none;
border: none; border: none;
} }
#ore-container .button:hover { #ore-container .button:hover, #ore-container button:focus {
/*color: #000;*/ /*color: #000;*/
color: #FFFE89; color: #FFFE89;
box-shadow: 4px 4px 10px #999; box-shadow: 4px 4px 10px #999;
...@@ -115,6 +115,7 @@ article.ore-form .container .entry-content > div.ore { ...@@ -115,6 +115,7 @@ article.ore-form .container .entry-content > div.ore {
/* correct padding around general anchors in modal content */ /* correct padding around general anchors in modal content */
#ore-container .ore-modal { top: 0px; } #ore-container .ore-modal { top: 0px; }
#ore-container .modal a { padding: 0; } #ore-container .modal a { padding: 0; }
/*#ore-container .modal a:focus, #ore-container .modal a:active { color: black; }*/
/* status */ /* status */
...@@ -157,6 +158,7 @@ article.ore-form .container .entry-content > div.ore { ...@@ -157,6 +158,7 @@ article.ore-form .container .entry-content > div.ore {
.ore-trigger { } .ore-trigger { }
.ore-extra { margin-left: 1em; } .ore-extra { margin-left: 1em; }
.ore-extra a { font-weight: bold; } .ore-extra a { font-weight: bold; }
.ore-extra a:focus, .ore-extra a:active { color: black; }
#ore-container .ore-enrolled, #ore-container .ore-unenrolled { #ore-container .ore-enrolled, #ore-container .ore-unenrolled {
left: 0; left: 0;
...@@ -209,7 +211,8 @@ article.ore-form .container .entry-content > div.ore { ...@@ -209,7 +211,8 @@ article.ore-form .container .entry-content > div.ore {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#ore-container .modal-dialog span.close:hover { color: #000; } /*#ore-container .modal-dialog span.close:hover { color: #000; } */
#ore-container .modal-dialog .close:hover { color: #000; }
#ore-container .modal-content { #ore-container .modal-content {
position: relative; position: relative;
background-color: #fefefe; background-color: #fefefe;
...@@ -315,6 +318,10 @@ button.ore-processing { ...@@ -315,6 +318,10 @@ button.ore-processing {
color: black; color: black;
} }
/*#ore-login-status button.button:focus {
box-shadow: 0 2px 2px rgb(0,0,0,0.5);
}*/
/* end accessibility styles */ /* end accessibility styles */
/* mobile configuration */ /* mobile configuration */
......
...@@ -84,7 +84,7 @@ jQuery(document).ready(function() { ...@@ -84,7 +84,7 @@ jQuery(document).ready(function() {
*/ */
function visitor_menu() { function visitor_menu() {
text = '<div class="ore-menu-block ore-left"><p>Don\'t have an account? We invite you to</p><p style="text-align: center;"> <span id="ore-register-button" class="button ore-button" data-toggle="modal" data-target="#ore-modal">Register</span></p></div><div class="ore-menu-block ore-right"><p>Already have an account? Please</p><p style="text-align: center;"><span id="ore-login-button" class="button ore-button" data-toggle="modal" data-target="#ore-modal">Log In</span></p></div>'; text = '<div class="ore-menu-block ore-left"><p>Don\'t have an account? We invite you to</p><p style="text-align: center;"> <span id="ore-register-button" class="button ore-button" data-toggle="modal" data-target="#ore-modal">Register</span></p></div><div class="ore-menu-block ore-right"><p>Already have an account? Please</p><p style="text-align: center;"><span id="ore-login-button" class="button ore-button" data-toggle="modal" data-target="#ore-modal">Log In</span></p></div>';
LOG('new text: '+text); LOG('(visitor menu) new text: '+text);
// enable menus // enable menus
show_menu(text); show_menu(text);
} }
...@@ -95,7 +95,7 @@ jQuery(document).ready(function() { ...@@ -95,7 +95,7 @@ jQuery(document).ready(function() {
user = ore_data.user; user = ore_data.user;
text = ''; text = '';
login_text = '<p>You are logged in as '+user.display_name+' ('+user.username+').</p>'; login_text = '<p>You are logged in as '+user.display_name+' ('+user.username+').</p>';
button_text = '<span id="ore-edit-profile-button" class="button ore-button" data-toggle="modal" data-target="#ore-modal">Edit Profile</span>&nbsp;<span id="ore-update-password-button" class="button ore-button">Update Password</span>&nbsp;&nbsp;&nbsp;<span id="ore-log-out-button" class="button ore-button">Log Out</span>'; button_text = '<button id="ore-edit-profile-button" class="button ore-button" data-toggle="modal" data-target="#ore-modal">Edit Profile</button>&nbsp;<button id="ore-update-password-button" class="button ore-button">Update Password</button>&nbsp;&nbsp;&nbsp;<button id="ore-log-out-button" class="button ore-button">Log Out</button>';
course = false; course = false;
var cat, label, extra = "", course_text; var cat, label, extra = "", course_text;
if (user.hasOwnProperty('course') && user.course != null) { if (user.hasOwnProperty('course') && user.course != null) {
...@@ -117,9 +117,9 @@ jQuery(document).ready(function() { ...@@ -117,9 +117,9 @@ jQuery(document).ready(function() {
text += '<div class="ore-menu-block '+extra_class+' ore-first">'+login_text+button_text+'</div>'; text += '<div class="ore-menu-block '+extra_class+' ore-first">'+login_text+button_text+'</div>';
if (course) { if (course) {
// course enrollment status // course enrollment status
text += '<div class="ore-menu-block '+extra_class+' ore-second">'+course_text+'<span id="ore-'+cat+'-button" class="button ore-button" data-toggle="modal" data-target="#ore-modal">'+label+'</span>'+extra+'</div>'; text += '<div class="ore-menu-block '+extra_class+' ore-second">'+course_text+'<button id="ore-'+cat+'-button" class="button ore-button" data-toggle="modal" data-target="#ore-modal">'+label+'</button>'+extra+'</div>';
} }
LOG('new text: '+text); LOG('(authenticated menu) new text: '+text);
// enable menus // enable menus
show_menu(text); show_menu(text);
} }
...@@ -208,16 +208,33 @@ jQuery(document).ready(function() { ...@@ -208,16 +208,33 @@ jQuery(document).ready(function() {
// for accessibility, make this tab indexable! // for accessibility, make this tab indexable!
$(this).attr('tabindex', '0'); $(this).attr('tabindex', '0');
// manage clicks, e.g. from touch devices // manage clicks, e.g. from touch devices
$(trigger).keyup(function(e) { $(trigger).click( function(e) {
LOG('got keyup event ', e); create_menu($(this), text);
if (e.keyCode === 32 || e.keyCode === 13) { LOG('enabling menu');
LOG('got a enter or spacebar!'); enable_menu();
prepare_menu(text); LOG('click');
} set_menu_fade();
}); // if the user clicks within the box, fade shortly thereafter
$(trigger).click(function(e) { //
LOG('got click event ', e) // Process Menu Click Events
prepare_menu(text); LOG('setting $this.next to $next...');
$next = $(this).next();
// give the modal popup focus...
$next.focus();
$next.attr('tabindex', '0');
$next.click( function (e) {
LOG('click in menu - this should be passed on!')
//LOG('this = ', $(this));
//LOG('e = ', e);
if (!menu_events(e.target.id)) {
LOG('menu_event '+e.target.id+' was false - stopping propagation');
e.stopPropagation();
} else {
LOG('menu_event '+e.target.id+' was true... eventually stopping propagation');
}
});
// don't send this click to the "hide menu" function below.
e.stopPropagation();
}); });
}); });
function set_menu_fade() { function set_menu_fade() {
...@@ -226,32 +243,6 @@ jQuery(document).ready(function() { ...@@ -226,32 +243,6 @@ jQuery(document).ready(function() {
} }
}); });
} }
function prepare_menu(text) {
LOG('preparing menu with ', text);
create_menu($(this), text);
LOG('enabling menu');
enable_menu();
LOG('click');
set_menu_fade();
// if the user clicks within the box, fade shortly thereafter
//
// Process Menu Click Events
$(this).next().click( function (e) {
LOG('click in menu - this should be passed on!')
//LOG('this = ', $(this));
//LOG('e = ', e);
if (!menu_events(e.target.id)) {
LOG('menu_event '+e.target.id+' was false - stopping propagation');
e.stopPropagation();
} else {
LOG('menu_event '+e.target.id+' was true... eventually stopping propagation');
}
});
// don't send this click to the "hide menu" function below.
e.stopPropagation();
}
function create_menu(trigger, text) { function create_menu(trigger, text) {
trigger.next('.'+menu).remove(); trigger.next('.'+menu).remove();
// create the menu // create the menu
...@@ -590,6 +581,15 @@ $(form_container).on('click', '.close', function(e) { ...@@ -590,6 +581,15 @@ $(form_container).on('click', '.close', function(e) {
clear_hash(); clear_hash();
} }
}); });
// default close button behaviour (on each modal)
$(form_container).on('keyUp', '.close', function(e) {
LOG('keyUp! (close) e.target ', e.target);
if (value_in_object(e.target.classList, 'close')) {
LOG('close the modal!');
close_modal();
clear_hash();
}
});
// show a modal based on its id, the key in the modals array in ore_modals.php // show a modal based on its id, the key in the modals array in ore_modals.php
function show_modal(id) { function show_modal(id) {
LOG('show_modal', id); LOG('show_modal', id);
...@@ -1065,19 +1065,29 @@ if (user_status()) { ...@@ -1065,19 +1065,29 @@ if (user_status()) {
// on a click outside the menu, close the menu // on a click outside the menu, close the menu
$(document).click(function(){ $(document).click(function(){
LOG('document click - closing menus: '+menu); LOG('document click - closing menus: '+menu);
//$("."+menu).hide();
$("."+menu).remove(); $("."+menu).remove();
/* if (menu == )
$("#"+menu).remove();
*/
}); });
// set this up to submit on 'enter' // set this up to submit on 'enter'
$('input').keypress( function (e) { //$('input').keypress( function (e) {
$(document).keydown( function (e) {
c = e.which ? e.which : e.keyCode; c = e.which ? e.which : e.keyCode;
LOG('input: ' + c); LOG('input: ', c);
if (c == 13) { if (c == 13 || c == 32) { // the enter key or spacebar
$('#ore-default').click(); //$('#ore-default').click();
var $focused = $(':focus');
LOG('document keypress (enter or spacebar)!');
LOG('Clicking on ', $focused);
$focused.click();
return false; return false;
} }
}); });
$(document).keyup( function (e) {
c = e.which ? e.which : e.keyCode;
LOG('input: ', c);
if (e.key === 'Escape') { // ESCape pressed
LOG('document keypress (ESC) - closing menus: '+menu);
$("."+menu).remove();
}
});
}); });
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment