From bf7f5c863c96abfddb623c696556b374a2fd307e Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Thu, 7 Apr 2016 14:51:56 +0200 Subject: [PATCH 1/4] Confirmation dialog adjustments. Translated copyright dialog default texts. Removed focus on click. Adjusted left positioning when showing dialog. Adjusted max width of dialog. HFJ-1572 --- js/h5p-confirmation-dialog.js | 103 +++++++++++++++++++++++------ js/h5p.js | 4 +- styles/h5p-confirmation-dialog.css | 19 +++++- 3 files changed, 102 insertions(+), 24 deletions(-) diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js index 7675d06..74b701d 100644 --- a/js/h5p-confirmation-dialog.js +++ b/js/h5p-confirmation-dialog.js @@ -18,12 +18,14 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { // Default options options = options || {}; - options.headerText = options.headerText || - 'Confirm action'; - options.dialogText = options.dialogText || - 'Please confirm that you wish to proceed. This action will not be reversible.'; - options.cancelText = options.cancelText || 'Cancel'; - options.confirmText = options.confirmText || 'Confirm'; + options.headerText = options.headerText || H5P.t('confirmDialogHeader'); + options.dialogText = options.dialogText || H5P.t('confirmDialogBody'); + options.cancelText = options.cancelText || H5P.t('cancelLabel'); + options.confirmText = options.confirmText || H5P.t('confirmLabel'); + + // Offset of exit button + var exitButtonOffset = 2 * 16; + var shadowOffset = 8; // Create background var popupBackground = document.createElement('div'); @@ -63,35 +65,71 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { body.appendChild(buttons); // Cancel button - var cancelButton = document.createElement('button'); + var cancelButton = document.createElement('a'); cancelButton.classList.add('h5p-core-cancel-button'); - cancelButton.tabindex = 0; + cancelButton.href = '#'; cancelButton.textContent = options.cancelText; - cancelButton.onclick = function () { + cancelButton.onclick = function (e) { self.hide(); self.trigger('canceled'); + e.preventDefault(); + }; + cancelButton.onkeydown = function (e) { + if (e.which === 32) { // Space + // Prevent jumping + e.preventDefault(); + } + else if (e.which === 13) { // Enter + self.hide(); + self.trigger('canceled'); + e.preventDefault(); + } }; buttons.appendChild(cancelButton); // Confirm button - var confirmButton = document.createElement('button'); + var confirmButton = document.createElement('a'); confirmButton.classList.add('h5p-core-button', 'h5p-confirmation-dialog-confirm-button'); - confirmButton.tabindex = 0; + confirmButton.href = '#'; confirmButton.textContent = options.confirmText; - confirmButton.onclick = function () { + confirmButton.onclick = function (e) { self.hide(); self.trigger('confirmed'); + e.preventDefault(); + }; + confirmButton.onkeydown = function (e) { + if (e.which === 32) { // Space + // Prevent jumping + e.preventDefault(); + } + else if (e.which === 13) { // Enter + self.hide(); + self.trigger('confirmed'); + e.preventDefault(); + } }; buttons.appendChild(confirmButton); // Exit button - var exitButton = document.createElement('button'); + var exitButton = document.createElement('a'); + exitButton.href = '#'; exitButton.classList.add('h5p-confirmation-dialog-exit'); - exitButton.tabindex = 0; - exitButton.onclick = function () { + exitButton.onclick = function (e) { self.hide(); self.trigger('canceled'); + e.preventDefault(); + }; + exitButton.onkeydown = function (e) { + if (e.which === 32) { // Space + // Prevent jumping + e.preventDefault(); + } + else if (e.which === 13) { // Enter + self.hide(); + self.trigger('canceled'); + e.preventDefault(); + } }; popup.appendChild(exitButton); @@ -114,22 +152,45 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { * Fit popup to container. Makes sure it doesn't overflow. */ var fitToContainer = function () { - var popupOffset = parseInt(popup.style.top, 10) + popup.offsetHeight; + var popupOffsetTop = parseInt(popup.style.top, 10); - // Overflows wrapper - if (popupOffset > wrapperElement.offsetHeight) { - var overflowedContainerOffset = wrapperElement.offsetHeight - popup.offsetHeight; - popup.style.top = overflowedContainerOffset + 'px'; + // Overflows height + if (popupOffsetTop + popup.offsetHeight > wrapperElement.offsetHeight) { + popupOffsetTop = wrapperElement.offsetHeight - popup.offsetHeight; } + + if (popupOffsetTop - exitButtonOffset <= 0) { + popupOffsetTop = exitButtonOffset; + } + popup.style.top = popupOffsetTop + 'px'; + + // Overflows width + var popupOffsetLeft = parseInt(popup.style.left, 10); + + if (popupOffsetLeft + popup.offsetWidth + exitButtonOffset + shadowOffset > wrapperElement.offsetWidth) { + popupOffsetLeft = wrapperElement.offsetWidth - exitButtonOffset - shadowOffset - popup.offsetWidth; + } + + if (popupOffsetLeft < 0) { + popupOffsetLeft = 0; + } + + popup.style.left = popupOffsetLeft + 'px'; }; /** * Show confirmation dialog * @params {number} offsetTop Offset top + * @params {number} [offsetLeft] Offset left * @returns {H5P.ConfirmationDialog} */ - this.show = function (offsetTop) { + this.show = function (offsetTop, offsetLeft) { + popup.classList.remove('not-centered'); popup.style.top = offsetTop + 'px'; + if (offsetLeft !== undefined) { + popup.classList.add('not-centered'); + popup.style.left = offsetLeft + 'px'; + } popupBackground.classList.remove('hidden'); fitToContainer(); popupBackground.classList.remove('hiding'); diff --git a/js/h5p.js b/js/h5p.js index fa2e4c7..6fb0707 100644 --- a/js/h5p.js +++ b/js/h5p.js @@ -836,9 +836,9 @@ H5P.error = function (err) { * * @param {string} key * Translation identifier, may only contain a-zA-Z0-9. No spaces or special chars. - * @param {Object} vars + * @param {Object} [vars] * Data for placeholders. - * @param {string} ns + * @param {string} [ns] * Translation namespace. Defaults to H5P. * @returns {string} * Translated text diff --git a/styles/h5p-confirmation-dialog.css b/styles/h5p-confirmation-dialog.css index b7b4475..a8ebce2 100644 --- a/styles/h5p-confirmation-dialog.css +++ b/styles/h5p-confirmation-dialog.css @@ -32,7 +32,7 @@ justify-content: center; box-sizing: border-box; - max-width: calc(100% - 2em); + max-width: 35em; min-width: 25em; top: 2em; @@ -48,6 +48,18 @@ transition: transform 0.1s ease-in; } +.h5p-confirmation-dialog-popup.not-centered { + -webkit-transform: translate(0.5em, 0%); + -ms-transform: translate(0.5em, 0%); + transform: translate(0.5em, 0%); +} + +.h5p-confirmation-dialog-popup.hidden.not-centered { + -webkit-transform: translate(0.5em, 50%); + -ms-transform: translate(0.5em, 50%); + transform: translate(0.5em, 50%); +} + .h5p-confirmation-dialog-popup.hidden { -webkit-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); @@ -77,6 +89,11 @@ float: right; } +.h5p-confirmation-dialog-exit:focus, +.h5p-confirmation-dialog-exit:hover { + color: #555; +} + .h5p-confirmation-dialog-exit { position: absolute; background: none; From ea620e12f0a5f4249329c7632cbdcae4de945158 Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Thu, 7 Apr 2016 15:22:19 +0200 Subject: [PATCH 2/4] Reverted left adjustment of confirmation dialog. HFJ-1572 --- js/h5p-confirmation-dialog.js | 21 +-------------------- 1 file changed, 1 insertion(+), 20 deletions(-) diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js index 74b701d..b631c0c 100644 --- a/js/h5p-confirmation-dialog.js +++ b/js/h5p-confirmation-dialog.js @@ -163,34 +163,15 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { popupOffsetTop = exitButtonOffset; } popup.style.top = popupOffsetTop + 'px'; - - // Overflows width - var popupOffsetLeft = parseInt(popup.style.left, 10); - - if (popupOffsetLeft + popup.offsetWidth + exitButtonOffset + shadowOffset > wrapperElement.offsetWidth) { - popupOffsetLeft = wrapperElement.offsetWidth - exitButtonOffset - shadowOffset - popup.offsetWidth; - } - - if (popupOffsetLeft < 0) { - popupOffsetLeft = 0; - } - - popup.style.left = popupOffsetLeft + 'px'; }; /** * Show confirmation dialog * @params {number} offsetTop Offset top - * @params {number} [offsetLeft] Offset left * @returns {H5P.ConfirmationDialog} */ - this.show = function (offsetTop, offsetLeft) { - popup.classList.remove('not-centered'); + this.show = function (offsetTop) { popup.style.top = offsetTop + 'px'; - if (offsetLeft !== undefined) { - popup.classList.add('not-centered'); - popup.style.left = offsetLeft + 'px'; - } popupBackground.classList.remove('hidden'); fitToContainer(); popupBackground.classList.remove('hiding'); From e8adccaa02a1184542db15b6eb177aed315af505 Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Thu, 7 Apr 2016 16:31:41 +0200 Subject: [PATCH 3/4] Updated confirmation dialog styles. HFJ-1572 --- styles/h5p-confirmation-dialog.css | 13 +------------ styles/h5p-core-button.css | 2 ++ 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/styles/h5p-confirmation-dialog.css b/styles/h5p-confirmation-dialog.css index a8ebce2..8b9fedd 100644 --- a/styles/h5p-confirmation-dialog.css +++ b/styles/h5p-confirmation-dialog.css @@ -48,18 +48,6 @@ transition: transform 0.1s ease-in; } -.h5p-confirmation-dialog-popup.not-centered { - -webkit-transform: translate(0.5em, 0%); - -ms-transform: translate(0.5em, 0%); - transform: translate(0.5em, 0%); -} - -.h5p-confirmation-dialog-popup.hidden.not-centered { - -webkit-transform: translate(0.5em, 50%); - -ms-transform: translate(0.5em, 50%); - transform: translate(0.5em, 50%); -} - .h5p-confirmation-dialog-popup.hidden { -webkit-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); @@ -103,6 +91,7 @@ right: -1.15em; color: #777; cursor: pointer; + text-decoration: none; } .h5p-confirmation-dialog-exit:before { diff --git a/styles/h5p-core-button.css b/styles/h5p-core-button.css index e073e74..f7cc3f1 100644 --- a/styles/h5p-core-button.css +++ b/styles/h5p-core-button.css @@ -16,6 +16,7 @@ text-align: center; text-shadow: none; vertical-align: baseline; + text-decoration: none; } .h5p-core-button:hover, .h5p-core-button:focus { @@ -49,6 +50,7 @@ color: #a00; margin-right: 1em; font-size: 1em; + text-decoration: none; } .h5p-core-cancel-button:hover, From 233b5e76530806124ae8f750f071b5ff8e1f108a Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Fri, 8 Apr 2016 10:23:55 +0200 Subject: [PATCH 4/4] Programmatically set focus to confirmation dialog. HFJ-1572 --- js/h5p-confirmation-dialog.js | 5 ++++- styles/h5p-confirmation-dialog.css | 4 ++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js index b631c0c..3263b76 100644 --- a/js/h5p-confirmation-dialog.js +++ b/js/h5p-confirmation-dialog.js @@ -176,7 +176,10 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { fitToContainer(); popupBackground.classList.remove('hiding'); popup.classList.remove('hidden'); - cancelButton.focus(); + + // Programmatically focus popup + popup.setAttribute('tabindex', '-1'); + popup.focus(); return this; }; diff --git a/styles/h5p-confirmation-dialog.css b/styles/h5p-confirmation-dialog.css index 8b9fedd..05e3a3f 100644 --- a/styles/h5p-confirmation-dialog.css +++ b/styles/h5p-confirmation-dialog.css @@ -25,6 +25,10 @@ transition: opacity 0.1s linear 0s, visibility 0s linear 0.1s; } +.h5p-confirmation-dialog-popup:focus { + outline: none; +} + .h5p-confirmation-dialog-popup { position: absolute; display: flex;