Merge branch 'release' into improved-file-handling

pull/22/head
Frode Petterson 2016-06-07 14:28:12 +02:00
commit b261754cf1
2 changed files with 48 additions and 15 deletions

View File

@ -44,6 +44,16 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
e.preventDefault(); e.preventDefault();
} }
/**
* Flow focus to element
* @param {HTMLElement} element Next element to be focused
* @param {Event} e Original tab event
*/
function flowTo(element, e) {
element.focus();
e.preventDefault();
}
// Offset of exit button // Offset of exit button
var exitButtonOffset = 2 * 16; var exitButtonOffset = 2 * 16;
var shadowOffset = 8; var shadowOffset = 8;
@ -59,7 +69,14 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
// Create outer popup // Create outer popup
var popup = document.createElement('div'); var popup = document.createElement('div');
popup.classList.add('h5p-confirmation-dialog-popup', 'hidden'); popup.classList.add('h5p-confirmation-dialog-popup', 'hidden');
popup.setAttribute('role', 'dialog');
popupBackground.appendChild(popup); popupBackground.appendChild(popup);
popup.onkeydown = function (e) {
if (e.which === 27) {// Esc key
// Exit dialog
dialogCanceled(e);
}
};
// Popup header // Popup header
var header = document.createElement('div'); var header = document.createElement('div');
@ -80,6 +97,7 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
// Popup text // Popup text
var text = document.createElement('div'); var text = document.createElement('div');
text.classList.add('h5p-confirmation-dialog-text'); text.classList.add('h5p-confirmation-dialog-text');
text.setAttribute('role', 'alert');
text.innerHTML = options.dialogText; text.innerHTML = options.dialogText;
body.appendChild(text); body.appendChild(text);
@ -92,19 +110,31 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
var cancelButton = document.createElement('button'); var cancelButton = document.createElement('button');
cancelButton.classList.add('h5p-core-cancel-button'); cancelButton.classList.add('h5p-core-cancel-button');
cancelButton.textContent = options.cancelText; cancelButton.textContent = options.cancelText;
cancelButton.onclick = dialogCanceled;
cancelButton.onkeydown = function (e) {
if (e.which === 32) { // Space
dialogCanceled(e);
}
};
buttons.appendChild(cancelButton);
// Confirm button // Confirm button
var confirmButton = document.createElement('button'); var confirmButton = document.createElement('button');
confirmButton.classList.add('h5p-core-button', confirmButton.classList.add('h5p-core-button',
'h5p-confirmation-dialog-confirm-button'); 'h5p-confirmation-dialog-confirm-button');
confirmButton.textContent = options.confirmText; confirmButton.textContent = options.confirmText;
// Exit button
var exitButton = document.createElement('button');
exitButton.classList.add('h5p-confirmation-dialog-exit');
exitButton.title = options.cancelText;
// Cancel handler
cancelButton.onclick = dialogCanceled;
cancelButton.onkeydown = function (e) {
if (e.which === 32) { // Space
dialogCanceled(e);
}
else if (e.which === 9 && e.shiftKey) { // Shift-tab
flowTo(exitButton, e);
}
};
buttons.appendChild(cancelButton);
// Confirm handler
confirmButton.onclick = dialogConfirmed; confirmButton.onclick = dialogConfirmed;
confirmButton.onkeydown = function (e) { confirmButton.onkeydown = function (e) {
if (e.which === 32) { // Space if (e.which === 32) { // Space
@ -113,14 +143,15 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
}; };
buttons.appendChild(confirmButton); buttons.appendChild(confirmButton);
// Exit button // Exit handler
var exitButton = document.createElement('button');
exitButton.classList.add('h5p-confirmation-dialog-exit');
exitButton.onclick = dialogCanceled; exitButton.onclick = dialogCanceled;
exitButton.onkeydown = function (e) { exitButton.onkeydown = function (e) {
if (e.which === 32) { // Space if (e.which === 32) { // Space
dialogCanceled(e); dialogCanceled(e);
} }
else if (e.which === 9 && !e.shiftKey) { // Tab
flowTo(cancelButton, e);
}
}; };
popup.appendChild(exitButton); popup.appendChild(exitButton);

View File

@ -122,13 +122,15 @@ H5P.init = function (target) {
delete contentData.contentUserData; delete contentData.contentUserData;
var dialog = new H5P.Dialog('content-user-data-reset', 'Data Reset', '<p>' + H5P.t('contentChanged') + '</p><p>' + H5P.t('startingOver') + '</p><div class="h5p-dialog-ok-button" tabIndex="0" role="button">OK</div>', $container); var dialog = new H5P.Dialog('content-user-data-reset', 'Data Reset', '<p>' + H5P.t('contentChanged') + '</p><p>' + H5P.t('startingOver') + '</p><div class="h5p-dialog-ok-button" tabIndex="0" role="button">OK</div>', $container);
H5P.jQuery(dialog).on('dialog-opened', function (event, $dialog) { H5P.jQuery(dialog).on('dialog-opened', function (event, $dialog) {
$dialog.find('.h5p-dialog-ok-button').click(function () {
dialog.close(); var closeDialog = function (event) {
}).keypress(function (event) { if (event.type === 'click' || event.which === 32) {
if (event.which === 32) {
dialog.close(); dialog.close();
H5P.deleteUserData(contentId, 'state', 0);
} }
}); };
$dialog.find('.h5p-dialog-ok-button').click(closeDialog).keypress(closeDialog);
}); });
dialog.open(); dialog.open();
} }