From 6e7e144900231c13f25dcd97a8ca7d97042e4fcf Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Tue, 3 May 2016 11:15:21 +0200 Subject: [PATCH 1/5] Confirmation dialog - Focus confirm button on show. HFJ-1860 --- js/h5p-confirmation-dialog.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js index 15dd71e..01fa1d7 100644 --- a/js/h5p-confirmation-dialog.js +++ b/js/h5p-confirmation-dialog.js @@ -185,6 +185,9 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { popup.classList.remove('hidden'); popupBackground.classList.remove('hiding'); + // Focus confirm button + confirmButton.focus(); + // Resize iFrame if necessary if (resizeIFrame && options.instance) { setTimeout(function () { @@ -198,10 +201,6 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { }, 0); - // Programmatically focus popup - popup.setAttribute('tabindex', '-1'); - popup.focus(); - return this; }; From 7782b19e997edd23a30080f089f500de4028523c Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Wed, 4 May 2016 11:53:46 +0200 Subject: [PATCH 2/5] Do not set offset initially, sometimes ended up overflowing parent element. Do calculation before setting popup offset. HFJ-1867 --- js/h5p-confirmation-dialog.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js index 01fa1d7..1d08ab6 100644 --- a/js/h5p-confirmation-dialog.js +++ b/js/h5p-confirmation-dialog.js @@ -154,9 +154,13 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { /** * Fit popup to container. Makes sure it doesn't overflow. + * @params {number} [offsetTop] Offset of popup */ - var fitToContainer = function () { + var fitToContainer = function (offsetTop) { var popupOffsetTop = parseInt(popup.style.top, 10); + if (offsetTop) { + popupOffsetTop = offsetTop; + } // Overflows height if (popupOffsetTop + popup.offsetHeight > wrapperElement.offsetHeight) { @@ -178,9 +182,8 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { * @returns {H5P.ConfirmationDialog} */ this.show = function (offsetTop) { - popup.style.top = offsetTop + 'px'; popupBackground.classList.remove('hidden'); - fitToContainer(); + fitToContainer(offsetTop); setTimeout(function () { popup.classList.remove('hidden'); popupBackground.classList.remove('hiding'); From e412c3a228a484ea8cc6233cc9091c609c799216 Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Wed, 4 May 2016 12:37:59 +0200 Subject: [PATCH 3/5] Make sure focus is set after timeout, to not skewer content. HFJ-1867 --- js/h5p-confirmation-dialog.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js index 1d08ab6..a8d4ac2 100644 --- a/js/h5p-confirmation-dialog.js +++ b/js/h5p-confirmation-dialog.js @@ -188,20 +188,19 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { popup.classList.remove('hidden'); popupBackground.classList.remove('hiding'); - // Focus confirm button - confirmButton.focus(); + setTimeout(function () { + // Focus confirm button + confirmButton.focus(); - // Resize iFrame if necessary - if (resizeIFrame && options.instance) { - setTimeout(function () { + // Resize iFrame if necessary + if (resizeIFrame && options.instance) { var minHeight = parseInt(popup.offsetHeight, 10) + exitButtonOffset + (2 * shadowOffset); wrapperElement.style.minHeight = minHeight + 'px'; options.instance.trigger('resize'); resizeIFrame = false; - }, 100); - } - + } + }, 100); }, 0); return this; From c2f5feaae5ae8450baa7b451801319786473cc6e Mon Sep 17 00:00:00 2001 From: Frode Petterson Date: Tue, 31 May 2016 10:51:59 +0200 Subject: [PATCH 4/5] Improved error message for req core version HFJ-1959 --- h5p.classes.php | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/h5p.classes.php b/h5p.classes.php index 93c4213..5e19639 100644 --- a/h5p.classes.php +++ b/h5p.classes.php @@ -1055,24 +1055,27 @@ class H5PValidator { $valid = $this->isValidRequiredH5pData($h5pData, $required, $library_name); $valid = $this->isValidOptionalH5pData($h5pData, $optional, $library_name) && $valid; - // Test library core version requirement. If no requirement is set, - // this implicitly means 1.0, which shall work on newer versions - // too. + // Check the library's required API version of Core. + // If no requirement is set this implicitly means 1.0. if (isset($h5pData['coreApi']) && !empty($h5pData['coreApi'])) { if (($h5pData['coreApi']['majorVersion'] > H5PCore::$coreApi['majorVersion']) || - (($h5pData['coreApi']['majorVersion'] == H5PCore::$coreApi['majorVersion']) && - ($h5pData['coreApi']['minorVersion'] > H5PCore::$coreApi['minorVersion']))) - { + ( ($h5pData['coreApi']['majorVersion'] == H5PCore::$coreApi['majorVersion']) && + ($h5pData['coreApi']['minorVersion'] > H5PCore::$coreApi['minorVersion']) )) { + $this->h5pF->setErrorMessage( - $this->h5pF->t('The library "%libraryName" requires H5P %requiredVersion, but only H5P %coreApi is installed.', - array( - '%libraryName' => $library_name, - '%requiredVersion' => $h5pData['coreApi']['majorVersion'] . '.' . $h5pData['coreApi']['minorVersion'], - '%coreApi' => H5PCore::$coreApi['majorVersion'] . '.' . H5PCore::$coreApi['minorVersion'] - ))); + $this->h5pF->t('The system was unable to install the %component component from the package, it requires a newer version of the H5P plugin. This site is currently running version %current, whereas the required version is %required or higher. You should consider upgrading and then try again.', + array( + '%component' => (isset($h5pData['title']) ? $h5pData['title'] : $library_name), + '%current' => H5PCore::$coreApi['majorVersion'] . '.' . H5PCore::$coreApi['minorVersion'], + '%required' => $h5pData['coreApi']['majorVersion'] . '.' . $h5pData['coreApi']['minorVersion'] + ) + ) + ); + $valid = false; } } + return $valid; } From eba774c86389f808c2d6ec54fa3179bb85b6328d Mon Sep 17 00:00:00 2001 From: Thomas Marstrander Date: Tue, 31 May 2016 10:19:07 +0200 Subject: [PATCH 5/5] Prevent DOM pollution when having many confirmation dialogs. Append confirmation dialog on show and detach it on hide. HFJ-1969 (cherry picked from commit 0a63d12) --- js/h5p-confirmation-dialog.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js index a8d4ac2..84c8827 100644 --- a/js/h5p-confirmation-dialog.js +++ b/js/h5p-confirmation-dialog.js @@ -141,14 +141,12 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { var wrapperElement; /** - * Append confirmation dialog + * Set parent of confirmation dialog * @param {HTMLElement} wrapper * @returns {H5P.ConfirmationDialog} */ this.appendTo = function (wrapper) { - wrapper.appendChild(popupBackground); wrapperElement = wrapper; - return this; }; @@ -182,6 +180,7 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { * @returns {H5P.ConfirmationDialog} */ this.show = function (offsetTop) { + wrapperElement.appendChild(popupBackground); popupBackground.classList.remove('hidden'); fitToContainer(offsetTop); setTimeout(function () { @@ -215,6 +214,7 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { popup.classList.add('hidden'); setTimeout(function () { popupBackground.classList.add('hidden'); + wrapperElement.removeChild(popupBackground); }, 100); return this;