Use buttons instead of anchors in Confirmation Dialog.
HFJ-1930
(cherry picked from commit 27bc158
)
h5p-prerequisites-validator
parent
0d6fac4099
commit
ed13203254
|
@ -24,6 +24,26 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
|
||||||
options.cancelText = options.cancelText || H5P.t('cancelLabel');
|
options.cancelText = options.cancelText || H5P.t('cancelLabel');
|
||||||
options.confirmText = options.confirmText || H5P.t('confirmLabel');
|
options.confirmText = options.confirmText || H5P.t('confirmLabel');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle confirming event
|
||||||
|
* @param {Event} e
|
||||||
|
*/
|
||||||
|
function dialogConfirmed(e) {
|
||||||
|
self.hide();
|
||||||
|
self.trigger('confirmed');
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle dialog canceled
|
||||||
|
* @param {Event} e
|
||||||
|
*/
|
||||||
|
function dialogCanceled(e) {
|
||||||
|
self.hide();
|
||||||
|
self.trigger('canceled');
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
// Offset of exit button
|
// Offset of exit button
|
||||||
var exitButtonOffset = 2 * 16;
|
var exitButtonOffset = 2 * 16;
|
||||||
var shadowOffset = 8;
|
var shadowOffset = 8;
|
||||||
|
@ -69,70 +89,37 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
|
||||||
body.appendChild(buttons);
|
body.appendChild(buttons);
|
||||||
|
|
||||||
// Cancel button
|
// Cancel button
|
||||||
var cancelButton = document.createElement('a');
|
var cancelButton = document.createElement('button');
|
||||||
cancelButton.classList.add('h5p-core-cancel-button');
|
cancelButton.classList.add('h5p-core-cancel-button');
|
||||||
cancelButton.href = '#';
|
|
||||||
cancelButton.textContent = options.cancelText;
|
cancelButton.textContent = options.cancelText;
|
||||||
cancelButton.onclick = function (e) {
|
cancelButton.onclick = dialogCanceled;
|
||||||
self.hide();
|
|
||||||
self.trigger('canceled');
|
|
||||||
e.preventDefault();
|
|
||||||
};
|
|
||||||
cancelButton.onkeydown = function (e) {
|
cancelButton.onkeydown = function (e) {
|
||||||
if (e.which === 32) { // Space
|
if (e.which === 32) { // Space
|
||||||
// Prevent jumping
|
dialogCanceled(e);
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
else if (e.which === 13) { // Enter
|
|
||||||
self.hide();
|
|
||||||
self.trigger('canceled');
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
buttons.appendChild(cancelButton);
|
buttons.appendChild(cancelButton);
|
||||||
|
|
||||||
// Confirm button
|
// Confirm button
|
||||||
var confirmButton = document.createElement('a');
|
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.href = '#';
|
|
||||||
confirmButton.textContent = options.confirmText;
|
confirmButton.textContent = options.confirmText;
|
||||||
confirmButton.onclick = function (e) {
|
confirmButton.onclick = dialogConfirmed;
|
||||||
self.hide();
|
|
||||||
self.trigger('confirmed');
|
|
||||||
e.preventDefault();
|
|
||||||
};
|
|
||||||
confirmButton.onkeydown = function (e) {
|
confirmButton.onkeydown = function (e) {
|
||||||
if (e.which === 32) { // Space
|
if (e.which === 32) { // Space
|
||||||
// Prevent jumping
|
dialogConfirmed(e);
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
else if (e.which === 13) { // Enter
|
|
||||||
self.hide();
|
|
||||||
self.trigger('confirmed');
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
buttons.appendChild(confirmButton);
|
buttons.appendChild(confirmButton);
|
||||||
|
|
||||||
// Exit button
|
// Exit button
|
||||||
var exitButton = document.createElement('a');
|
var exitButton = document.createElement('button');
|
||||||
exitButton.href = '#';
|
|
||||||
exitButton.classList.add('h5p-confirmation-dialog-exit');
|
exitButton.classList.add('h5p-confirmation-dialog-exit');
|
||||||
exitButton.onclick = function (e) {
|
exitButton.onclick = dialogCanceled;
|
||||||
self.hide();
|
|
||||||
self.trigger('canceled');
|
|
||||||
e.preventDefault();
|
|
||||||
};
|
|
||||||
exitButton.onkeydown = function (e) {
|
exitButton.onkeydown = function (e) {
|
||||||
if (e.which === 32) { // Space
|
if (e.which === 32) { // Space
|
||||||
// Prevent jumping
|
dialogCanceled(e);
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
else if (e.which === 13) { // Enter
|
|
||||||
self.hide();
|
|
||||||
self.trigger('canceled');
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
popup.appendChild(exitButton);
|
popup.appendChild(exitButton);
|
||||||
|
|
|
@ -81,9 +81,9 @@
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.h5p-confirmation-dialog-exit:visited,
|
button.h5p-confirmation-dialog-exit:visited,
|
||||||
a.h5p-confirmation-dialog-exit:link,
|
button.h5p-confirmation-dialog-exit:link,
|
||||||
a.h5p-confirmation-dialog-exit {
|
button.h5p-confirmation-dialog-exit {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
|
@ -95,8 +95,8 @@ a.h5p-confirmation-dialog-exit {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.h5p-confirmation-dialog-exit:focus,
|
button.h5p-confirmation-dialog-exit:focus,
|
||||||
a.h5p-confirmation-dialog-exit:hover {
|
button.h5p-confirmation-dialog-exit:hover {
|
||||||
color: #555;
|
color: #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
a.h5p-core-button:visited,
|
button.h5p-core-button:visited,
|
||||||
a.h5p-core-button:link,
|
button.h5p-core-button:link,
|
||||||
a.h5p-core-button {
|
button.h5p-core-button {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
padding: 0.5em 1.25em;
|
padding: 0.5em 1.25em;
|
||||||
|
@ -20,15 +20,15 @@ a.h5p-core-button {
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
a.h5p-core-button:hover,
|
button.h5p-core-button:hover,
|
||||||
a.h5p-core-button:focus {
|
button.h5p-core-button:focus {
|
||||||
background: #1356a3;
|
background: #1356a3;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
-webkit-transition: initial;
|
-webkit-transition: initial;
|
||||||
transition: initial;
|
transition: initial;
|
||||||
}
|
}
|
||||||
a.h5p-core-button:active {
|
button.h5p-core-button:active {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #104888;
|
background: #104888;
|
||||||
|
|
||||||
|
@ -37,7 +37,7 @@ a.h5p-core-button:active {
|
||||||
box-shadow: inset 0 4px 0 #0e407a;
|
box-shadow: inset 0 4px 0 #0e407a;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.h5p-core-button:before {
|
button.h5p-core-button:before {
|
||||||
font-family: 'H5P';
|
font-family: 'H5P';
|
||||||
padding-right: 0.15em;
|
padding-right: 0.15em;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
|
@ -45,9 +45,10 @@ a.h5p-core-button:before {
|
||||||
line-height: 0.7;
|
line-height: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.h5p-core-cancel-button:visited,
|
button.h5p-core-cancel-button:visited,
|
||||||
a.h5p-core-cancel-button:link,
|
button.h5p-core-cancel-button:link,
|
||||||
a.h5p-core-cancel-button {
|
button.h5p-core-cancel-button {
|
||||||
|
border: none;
|
||||||
background: none;
|
background: none;
|
||||||
color: #a00;
|
color: #a00;
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
|
@ -55,8 +56,8 @@ a.h5p-core-cancel-button {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.h5p-core-cancel-button:hover,
|
button.h5p-core-cancel-button:hover,
|
||||||
a.h5p-core-cancel-button:focus {
|
button.h5p-core-cancel-button:focus {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: #e40000;
|
color: #e40000;
|
||||||
|
|
Loading…
Reference in New Issue