...
 
Commits (2)
......@@ -75,7 +75,7 @@ article.ore-form .container .entry-content > div.ore {
text-decoration: none;
border: none;
}
#ore-container .button:hover {
#ore-container .button:hover, #ore-container button:focus {
/*color: #000;*/
color: #FFFE89;
box-shadow: 4px 4px 10px #999;
......@@ -115,6 +115,7 @@ article.ore-form .container .entry-content > div.ore {
/* correct padding around general anchors in modal content */
#ore-container .ore-modal { top: 0px; }
#ore-container .modal a { padding: 0; }
/*#ore-container .modal a:focus, #ore-container .modal a:active { color: black; }*/
/* status */
......@@ -157,6 +158,7 @@ article.ore-form .container .entry-content > div.ore {
.ore-trigger { }
.ore-extra { margin-left: 1em; }
.ore-extra a { font-weight: bold; }
.ore-extra a:focus, .ore-extra a:active { color: black; }
#ore-container .ore-enrolled, #ore-container .ore-unenrolled {
left: 0;
......@@ -209,7 +211,8 @@ article.ore-form .container .entry-content > div.ore {
margin: 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 {
position: relative;
background-color: #fefefe;
......@@ -310,6 +313,17 @@ button.ore-processing {
list-style-type: decimal;
}
/* accessibility styles */
#ore-login-status .ore-trigger:focus {
color: black;
}
/*#ore-login-status button.button:focus {
box-shadow: 0 2px 2px rgb(0,0,0,0.5);
}*/
/* end accessibility styles */
/* mobile configuration */
@media (max-width: 992px) {
#ore-login-status {
......
......@@ -84,9 +84,9 @@ jQuery(document).ready(function() {
*/
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>';
LOG('new text: '+text);
LOG('(visitor menu) new text: '+text);
// enable menus
prepare_menu(text);
show_menu(text);
}
/*
* Menu for an unauthenticated (anonymous) user
......@@ -95,7 +95,7 @@ jQuery(document).ready(function() {
user = ore_data.user;
text = '';
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;
var cat, label, extra = "", course_text;
if (user.hasOwnProperty('course') && user.course != null) {
......@@ -117,11 +117,11 @@ jQuery(document).ready(function() {
text += '<div class="ore-menu-block '+extra_class+' ore-first">'+login_text+button_text+'</div>';
if (course) {
// 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
prepare_menu(text);
show_menu(text);
}
// replace country selector tag with country selector
function add_countries(markup, select) {
......@@ -192,7 +192,7 @@ jQuery(document).ready(function() {
return match;
}
// set up the menu infrastructure
function prepare_menu(text) {
function show_menu(text) {
// menu pause and fade times in milliseconds
var pausetime = 3000;
var postclicktime = 500;
......@@ -205,16 +205,24 @@ jQuery(document).ready(function() {
$(this).data('title', $(this).attr('title'));
LOG('sorted trigger with text '+$(this).data('title'));
$(this).removeAttr('title');
// for accessibility, make this tab indexable!
$(this).attr('tabindex', '0');
// manage clicks, e.g. from touch devices
$(trigger).click( function(e) {
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('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);
......@@ -573,6 +581,15 @@ $(form_container).on('click', '.close', function(e) {
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
function show_modal(id) {
LOG('show_modal', id);
......@@ -1048,19 +1065,29 @@ if (user_status()) {
// on a click outside the menu, close the menu
$(document).click(function(){
LOG('document click - closing menus: '+menu);
//$("."+menu).hide();
$("."+menu).remove();
/* if (menu == )
$("#"+menu).remove();
*/
});
// 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;
LOG('input: ' + c);
if (c == 13) {
$('#ore-default').click();
LOG('input: ', c);
if (c == 13 || c == 32) { // the enter key or spacebar
//$('#ore-default').click();
var $focused = $(':focus');
LOG('document keypress (enter or spacebar)!');
LOG('Clicking on ', $focused);
$focused.click();
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();
}
});
});