Commit edc862e2 authored by Dave Lane's avatar Dave Lane

Added jquery-ui-dialog functionality, aborted attempts to control tabs to...

Added jquery-ui-dialog functionality, aborted attempts to control tabs to existing 'modals', but shifting to jquery dialog for menus and modals. Also added terminology change from 'register' to 'create account' to differentiate from 'enrol'
parent 3df5c0bd
......@@ -54,7 +54,7 @@ class OREMain extends OREBase {
array('jquery'), true
);
wp_enqueue_script(ORE_SCRIPT, ORE_URL.'js/ore_script.js', array(
'jquery', 'jquery-form', 'jquery-validate'));
'jquery', 'jquery-form', 'jquery-ui-dialog', 'jquery-validate'));
global $country_selector;
$this->country_selector = $country_selector;
$user_array = $this->get_user();
......@@ -68,6 +68,7 @@ class OREMain extends OREBase {
'dn_min' => ORE_MIN_DISPLAY_NAME_LENGTH,
'un_min' => ORE_MIN_USERNAME_LENGTH,
'login_status' => ORE_LOGIN_STATUS,
'menu_label' => ORE_DEFAULT_MENU_LABEL,
'user' => $user_array,
'modals' => $this->get_modals(),
'country_select' => $this->get_country_selector($user_country)
......
......@@ -41,9 +41,9 @@ static $modals = array(
'failed' => 'failed_login',
),
'alternative' => array(
'label' => 'I need to register',
'label' => 'I need to create an account',
'class' => 'submit',
'detail' => 'If you haven\'t previously registered an account, you need to do that first.',
'detail' => 'If you haven\'t previously created an account, you need to do that first.',
'destination' => 'register',
),
),
......@@ -61,12 +61,12 @@ static $modals = array(
'title' => 'Login attempt failed',
'token' => 'failed-login',
'purpose' => 'confirmation',
'markup' => '<p>You have entered an invalid email or password. Or, is it possible you have not yet registered?'.
'markup' => '<p>You have entered an invalid email or password. Or, is it possible you have not yet created an account?'.
'<div id="ore-error-wrapper"></div>',
'default' => array(
'label' => 'Try again',
'class' => 'submit',
'detail' => 'If you think you might have mistyped or entered the wrong details, you can try again. Or you can register, if you haven\'t previously.',
'detail' => 'If you think you might have mistyped or entered the wrong details, you can try again. Or you can create an account, if you haven\'t previously.',
'destination' => 'login'
),
),
......@@ -74,7 +74,7 @@ static $modals = array(
'title' => 'Reset your password',
'token' => 'password-reset',
'auth' => 'both',
'markup' => '<p>If you have forgotten your password, you can request a reset. We need to know <em>one</em> of the following: (1) the email address you used to register, or (2) your username.</p>'.
'markup' => '<p>If you have forgotten your password, you can request a reset. We need to know <em>one</em> of the following: (1) the email address you used to create your account, or (2) your username.</p>'.
'<div class="form-group">'.
'<label for="credential">Enter your Username or Email to identify yourself.</label>'.
'<div id="ore-error-wrapper"></div>'.
......@@ -84,7 +84,7 @@ static $modals = array(
'default' => array(
'label' => 'Reset Password',
'class' => 'submit',
'detail' => 'A link will be sent to your registered email address. Check your spam folder if it doesn\'t appear within a few minutes',
'detail' => 'A link will be sent to the email address you used to create your account. Check your spam folder if it doesn\'t appear within a few minutes',
'success' => 'successful_reset',
'failure' => 'failed_reset'
),
......@@ -108,7 +108,7 @@ static $modals = array(
'purpose' => 'confirmation',
'markup' => '<p>We were not able to find a user with the details you have entered in our system.</p>'.
'<p>Please check that you have typed in your chosen identifier - your username or email - correctly.</p>'.
'<p>If it\'s possible you haven\'t previously registered an account with us, you can do that now.</p>'.
'<p>If it\'s possible you haven\'t previously created an account with us, you can do that now.</p>'.
'<div id="ore-error-wrapper"></div>',
'default' => array(
'label' => 'Try again',
......@@ -116,14 +116,14 @@ static $modals = array(
'success' => 'reset_password',
),
'alternative' => array(
'label' => 'I need to register',
'label' => 'I need to create an account',
'class' => 'submit',
'detail' => 'If you haven\'t previously registered an account, you need to do that first.',
'detail' => 'If you haven\'t previously created an account, you need to do that first.',
'destination' => 'register',
),
),
'register' => array(
'title' => 'Register on the OERu Course site',
'title' => 'Create an account on the OERu Course site',
'token' => 'register',
'auth' => false,
'markup' => '<div class="form-group">'.
......@@ -163,16 +163,16 @@ static $modals = array(
'<span id="helpUserCountry" class="help-block">Select the country with which you most closely identify, which may not be the one in which you currently are, or where you live.</span>'.
'</div>',
'default' => array(
'label' => 'Register',
'label' => 'Create an account',
'class' => 'submit',
'detail' => 'Register a new user account with the details entered above.<br/><strong>By registering, you opt in to receive course instructions via email.</strong>',
'detail' => 'Create a new user account with the details entered above.<br/><strong>By creating an account, you opt in to receive course instructions via email.</strong>',
'success' => 'successful_registration',
'failed' => 'failed_registration',
),
'alternative' => array(
'label' => 'Login',
'class' => 'submit',
'detail' => 'If you think you might have previously registered, you can try logging in.',
'detail' => 'If you think you might previously created an account, you can try logging in.',
'destination' => 'login',
),
),
......@@ -180,7 +180,7 @@ static $modals = array(
'title' => 'Registration successful',
'token' => 'successful-login',
'purpose' => 'confirmation',
'markup' => '<p>You have successfully registered a user called <strong>{display_name}</strong> with username <strong>{username}</strong>, and email <strong>{email}</strong>.</p> <p><em>Please double-check your email is correct, as it will be used to send you a link to reset your password if you forget it.</em> If you spot an error, you can go to the "edit profile" on the user menu <em>after you log in</em> to fix it. </p><p>You can now Login with those details using the password you specified.</p>',
'markup' => '<p>You have successfully created a user account called <strong>{display_name}</strong> with username <strong>{username}</strong>, and email <strong>{email}</strong>.</p> <p><em>Please double-check your email is correct, as it will be used to send you a link to reset your password if you forget it.</em> If you spot an error, you can go to the "edit profile" on the user menu <em>after you log in</em> to fix it. </p><p>You can now Login with those details using the password you specified.</p>',
'default' => array(
'label' => 'Ok',
'class' => 'submit',
......@@ -191,12 +191,12 @@ static $modals = array(
'title' => 'Registration failed',
'token' => 'failed-registration',
'purpose' => 'confirmation',
'markup' => '<p>Failed to Register a new user</p>'.
'markup' => '<p>Failed to create a new user</p>'.
'<div id="ore-error-wrapper"></div>',
'default' => array(
'label' => 'Try again',
'class' => 'submit',
'detail' => 'If you think you might have mistyped or entered the wrong details, you can try again. Or if you think you might have registered perviously, you can try logging in.',
'detail' => 'If you think you might have mistyped or entered the wrong details, you can try again. Or if you think you might perviously have created an account, you can try logging in.',
'destination' => 'register'
),
),
......
......@@ -32,6 +32,7 @@ jQuery(document).ready(function() {
var trigger = '.ore-trigger'; // trigger for menu content
var menu = 'ore-menu'; // the actual menu class
var menu_showing = false; // is menu currently showing?
var last_focus = false; // what element had focus prior to the menu
/*
* general functions, not dependent on specific data objects
......@@ -83,7 +84,7 @@ jQuery(document).ready(function() {
* Menu for an unauthenticated (anonymous) user
*/
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;"> <button id="ore-register-button" class="button ore-button" data-toggle="modal" data-target="#ore-modal">Register</button></p></div><div class="ore-menu-block ore-right"><p>Already have an account? Please</p><p style="text-align: center;"><button id="ore-login-button" class="button ore-button" data-toggle="modal" data-target="#ore-modal">Log In</button></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;"> <button id="ore-register-button" class="button ore-button" data-toggle="modal" data-target="#ore-modal">Create account</button></p></div><div class="ore-menu-block ore-right"><p>Already have an account? Please</p><p style="text-align: center;"><button id="ore-login-button" class="button ore-button" data-toggle="modal" data-target="#ore-modal">Log In</button></p></div>';
LOG('(visitor menu) new text: '+text);
// enable menus
show_menu(text);
......@@ -222,7 +223,10 @@ jQuery(document).ready(function() {
// give the modal popup's frst button focus...
$next.find('button:first').focus();
// transfer tab advancing to the menu...
$next.attr('tabindex', '0');
make_exclusive($next);
/*$next.attr('tabindex', '0');
LOG("setting menu's aria-modal=true");
$next.attr('aria-modal', 'true');*/
// be able to accept keyboard clicks.
$next.click( function (e) {
LOG('click in menu - this should be passed on!')
......@@ -243,23 +247,39 @@ jQuery(document).ready(function() {
$(this).next().animate({opacity: 1.0}, {duration: pausetime, complete: function() {
$(this).fadeOut(fadetime);
}
//menu_showing = false; // make sure we set this...
});
}
function create_menu(trigger, text) {
trigger.next('.'+menu).remove();
menu_showing = false; // make sure we set this...
// create the menu
trigger.after('<div class="'+menu+'">'+text+'</div>');
// manage positioning of the menus (voffset pixels above and hoffset left of trigger)
//var right = 0;
var top = trigger.outerHeight()+10; // offset of 10 required
//trigger.next().css('right',right);
trigger.next().css('top',top);
//trigger.next().css('top',top);
trigger.next().dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Delete all items": function() {
$(this).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
menu_showing = true; // make sure we set this...
}
function enable_menu() {
LOG('enabling menu');
last_focus = $(document).activeElement;
LOG('setting last_focus to ', last_focus);
$('.'+menu).each(function() {
// if the user explicitly clicks on a menu button, wait, and then fade
$('.'+menu).click(function() {
......@@ -279,6 +299,10 @@ function close_menu() {
$(this).remove();
menu_showing = false;
});
if (last_focus) {
LOG('returning focus to ', last_focus);
last_focus.focus();
}
}
// process button clicks and other events
function menu_events(target) {
......@@ -289,6 +313,8 @@ function menu_events(target) {
var goto = ore_data.user.log_out_url.replace('&amp;', '&')+'&redirect_to='+href;
LOG('going to url', goto);
window.location.href = goto;
LOG('returning last_focus to ore-login-modal');
last_focus = $(document).getElementById('ore-login-modal');
return true;
} else {
LOG('processing target: ', target);
......@@ -307,10 +333,38 @@ function is_menu_showing() {
return true;
}
}
// set the tab focus on just this modal or menu
function make_exclusive(modal) {
// first, set focus...
// if it's an input form, set focus on the first field, or...
pagebackground = $("bg");
if (modal.find('input').length !== 0) {
LOG('setting focus on first input...');
modal.find('input:first').focus();
} else if (modal.find('button').length !==0) { // if not, set focus on the first button
LOG('setting focus on the default button...');
modal.find('button.ore-default').focus();
} else {
LOG('not setting focus because no inputs or buttons');
modal.focus();
}
LOG('making element exclusive...');
modal.attr('tabindex', '0');
LOG("setting modal's aria-modal=true & role=dialog");
modal.attr('aria-modal', 'true');
modal.attr('role', 'dialog');
pagebackground.attr("aria-hidden","true");
}
/*
* End menu stuff
*/
/*
* Set up the default menu link/trigger textarea
*/
$(form_container).find('#ore-label').text(ore_data.menu_label);
/*
* form validation, e.g. uniqueness of username and email
*/
......@@ -685,17 +739,9 @@ function show_modal(id) {
// ensure form modal has focus for keyboard navigation
LOG('setting focus to form ', form);
LOG('form id = '+ current_modal);
// if it's an input form, set focus on the first field, or...
if (form.find('input').length !== 0) {
LOG('setting focus on first input...');
form.find('input:first').focus();
} else if (form.find('button').length !==0) { // if not, set focus on the first button
LOG('setting focus on first button...');
form.find('button.ore-default').focus();
} else {
LOG('not setting focus because no inputs or buttons');
}
form.attr('tabindex', '0');
// set the tabindex on the modal...
make_exclusive(form.find('.ore-modal'));
//
LOG('modal '+current_modal+' should be visible...');
return true;
......@@ -1110,29 +1156,84 @@ $(document).click(function(){
$("."+menu).remove();
menu_showing = false; // make sure we set this...
});
// set this up to submit on 'enter'
// set this up to submit on 'enter',
// close modals on ESC,
// and handle keyboard navigation within a modal (prevent focus from shifting away!)
//$('input').keypress( function (e) {
$(document).keydown( function (e) {
c = e.which ? e.which : e.keyCode;
//if (c == 13 || c == 32) { // the enter key or spacebar
// only do this if a menu or modal is showing...
if ((is_menu_showing() || is_modal_showing()) && c == 13) { // 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;
if (e.key === 'Escape') { // ESCape pressed
LOG('document keyup (ESC) - closing menus: '+menu);
// close any showing menus
if (is_menu_showing()) {
LOG('closing menu. ');
$("."+menu).remove();
menu_showing = false; // make sure we set this...
}
// close any showing modals
if (is_modal_showing()) {
LOG('Closing current modal: ', current_modal);
close_modal(current_modal);
}
// return focus to trigger
$(trigger).focus();
}
});
$(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();
menu_showing = false; // make sure we set this...
if (c == 13 || c == 32) { // the enter key or spacebar
LOG("space or enter key pressed.");
if (!(is_menu_showing() || is_modal_showing())) {
LOG("neither menu nor modal is showing - checking focus...");
var focused = $(':focus');
LOG('Should we open? ', focused);
if (focused.hasClass('ore-trigger')) {
LOG('found our trigger!');
focused.click();
}
}
}
// only do this if a menu or modal is showing...
/*if ((is_menu_showing() || is_modal_showing())) {
var d = null;
if (is_menu_showing()) {
LOG('selecting .ore-menu');
d = $('ore-menu');
} else if (is_modal_showing()) {
LOG('selecting .ore-modal');
d = $('ore-modal');
}
// add event listeners to make modal dialogs and menus exclusive for keyboard navigation
// see https://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box
// adapted for jquery...
// make sure focus doesn't leave it...
if (d != null) {
LOG('modal selected: ', d);
var inputs = d.find('select, input, textarea, button, a').filter(':visible');
// if even is in modal, allow it
if (d.find(e.target.id)) {
LOG('event is within modal');
if (e.target === inputs.last()) {
LOG('about to leave modal (forward)!')
if (e.which === 9 && !e.shiftKey) {
e.preventDefault();
inputs.first().focus();
}
}
if (e.target === inputs.first()) {
LOG('about to leave modal (reverse)!')
if (e.which === 9 && e.shiftKey) {
e.preventDefault();
inputs.last().focus();
}
}
} else { // event is outside modal, redirect inside to first input!
LOG('stopping event propagation: ', e.target.id);
e.preventDefault();
inputs.first().focus();
}
} else {
LOG('no modal selected...');
}
}*/
});
});
......@@ -55,6 +55,7 @@ define('ORE_SCRIPT', 'ore-script');
define('ORE_CLASS', 'ore-form');
define('ORE_COURSE_ROLE', 'subscriber');
define('ORE_ERROR_LABEL', 'ore_error');
define('ORE_DEFAULT_MENU_LABEL', 'Log in/Create account');
// these two nodes must be defined in the theme as HTML id attributes
define('ORE_CONTAINER', 'ore-container');
define('ORE_LOGIN_STATUS', 'ore-login-status');
......
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