From 481322e6ae589ddda2b9a6d4a304b4cecafaebbf Mon Sep 17 00:00:00 2001 From: Tom Arild Jakobsen Date: Mon, 8 May 2017 14:17:29 +0200 Subject: [PATCH 1/3] Deprecate 'overrideSettings' * Deprecate and log warning to console when 'overrideSettings' is used * Change confirmation dialog be 'fixed' e.g relative to viewport instead of and arbitrary relative parent element * Same for the overlay mask * Set minimum height on body element, to fit confirmation dialog * Remove the minimum height on close dialog Fixes HFP-574 --- js/h5p-confirmation-dialog.js | 12 +++++++++++- js/h5p.js | 21 +++++---------------- styles/h5p-confirmation-dialog.css | 4 ++-- 3 files changed, 18 insertions(+), 19 deletions(-) diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js index d34f620..22ca96c 100644 --- a/js/h5p-confirmation-dialog.js +++ b/js/h5p-confirmation-dialog.js @@ -315,7 +315,7 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { if (resizeIFrame && options.instance) { var minHeight = parseInt(popup.offsetHeight, 10) + exitButtonOffset + (2 * shadowOffset); - wrapperElement.style.minHeight = minHeight + 'px'; + self.setViewPortMinimumHeight(minHeight); options.instance.trigger('resize'); resizeIFrame = false; } @@ -340,10 +340,20 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { setTimeout(function () { popupBackground.classList.add('hidden'); wrapperElement.removeChild(popupBackground); + self.setViewPortMinimumHeight(null); }, 100); return this; }; + + /** + * Sets the minimum height of the view port + * + * @param {number|null} minHeight + */ + this.setViewPortMinimumHeight = function(minHeight) { + document.body.style.minHeight = (typeof minHeight === 'number') ? (minHeight + 'px') : minHeight; + }; } ConfirmationDialog.prototype = Object.create(EventDispatcher.prototype); diff --git a/js/h5p.js b/js/h5p.js index 36e2709..26bd5f2 100644 --- a/js/h5p.js +++ b/js/h5p.js @@ -1000,24 +1000,13 @@ H5P.findCopyrights = function (info, parameters, contentId) { continue; // Do not check } - /* - * TODO: Make parameters clean again - * Some content types adds jQuery or other objects to parameters - * in order to determine override settings for sub-content-types. - * For instance Question Set tells Multiple Choice that it should - * attach Multi Choice's confirmation dialog to a Question Set - * jQuery element, so that the confirmation dialog will not be restricted - * to the space confined by Multi Choice. - * Ideally this should not be added to parameters, we must make a better - * solution. We should likely be adding these to sub-content through - * functions/setters instead of passing them down as params. - * - * This solution is implemented as a hack that will ignore all parameters - * inside a "overrideSettings" field, this should suffice for now since - * all overridden objects are added to this field, however this is not very - * robust solution and will very likely lead to problems in the future. + /** + * @deprecated This hack should be removed after 2017-11-01 + * The code that was using this was removed by HFP-574 */ if (field === 'overrideSettings') { + console.warn("The semantics field 'overrideSettings' is DEPRECATED and should not be used."); + console.warn(parameters); continue; } diff --git a/styles/h5p-confirmation-dialog.css b/styles/h5p-confirmation-dialog.css index 5a8f597..9e5f98f 100644 --- a/styles/h5p-confirmation-dialog.css +++ b/styles/h5p-confirmation-dialog.css @@ -1,5 +1,5 @@ .h5p-confirmation-dialog-background { - position: absolute; + position: fixed; height: 100%; width: 100%; left: 0; @@ -30,7 +30,7 @@ } .h5p-confirmation-dialog-popup { - position: absolute; + position: fixed; display: flex; flex-direction: column; justify-content: center; From f277fed4d1240776921c710acc3dcca749fb861d Mon Sep 17 00:00:00 2001 From: Tom Arild Jakobsen Date: Wed, 10 May 2017 13:50:48 +0200 Subject: [PATCH 2/3] Set overlay and dialog to be 'position: absolute;' again. HFP-574 --- styles/h5p-confirmation-dialog.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/h5p-confirmation-dialog.css b/styles/h5p-confirmation-dialog.css index 9e5f98f..5a8f597 100644 --- a/styles/h5p-confirmation-dialog.css +++ b/styles/h5p-confirmation-dialog.css @@ -1,5 +1,5 @@ .h5p-confirmation-dialog-background { - position: fixed; + position: absolute; height: 100%; width: 100%; left: 0; @@ -30,7 +30,7 @@ } .h5p-confirmation-dialog-popup { - position: fixed; + position: absolute; display: flex; flex-direction: column; justify-content: center; From 87bd3c7e1132854b7abe3148d1f34b266806b4ae Mon Sep 17 00:00:00 2001 From: Tom Arild Jakobsen Date: Thu, 11 May 2017 17:09:44 +0200 Subject: [PATCH 3/3] Resize h5p container instead of body by default. HFP-574 --- js/h5p-confirmation-dialog.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js index 22ca96c..a6dd998 100644 --- a/js/h5p-confirmation-dialog.js +++ b/js/h5p-confirmation-dialog.js @@ -352,7 +352,8 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { * @param {number|null} minHeight */ this.setViewPortMinimumHeight = function(minHeight) { - document.body.style.minHeight = (typeof minHeight === 'number') ? (minHeight + 'px') : minHeight; + var container = document.querySelector('.h5p-container') || document.body; + container.style.minHeight = (typeof minHeight === 'number') ? (minHeight + 'px') : minHeight; }; }