From bf7f5c863c96abfddb623c696556b374a2fd307e Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Thu, 7 Apr 2016 14:51:56 +0200 Subject: [PATCH] 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;