From b64292af094f23e32da59bb0b3e9adda3717ab0d Mon Sep 17 00:00:00 2001 From: Frode Petterson Date: Wed, 27 Feb 2019 16:04:37 +0100 Subject: [PATCH] HFP-2541 Fix Dialog scrollbar on small dialogs --- js/h5p.js | 30 +++++++++++++++++------------- styles/h5p.css | 17 +++++++++++------ 2 files changed, 28 insertions(+), 19 deletions(-) diff --git a/js/h5p.js b/js/h5p.js index e0ffeef..cc3a55b 100644 --- a/js/h5p.js +++ b/js/h5p.js @@ -124,6 +124,9 @@ H5P.init = function (target) { }; $dialog.find('.h5p-dialog-ok-button').click(closeDialog).keypress(closeDialog); + H5P.trigger(instance, 'resize'); + }).on('dialog-closed', function () { + H5P.trigger(instance, 'resize'); }); dialog.open(); } @@ -182,14 +185,14 @@ H5P.init = function (target) { }); actionBar.on('copyrights', function () { var dialog = new H5P.Dialog('copyrights', H5P.t('copyrightInformation'), copyrights, $container); - dialog.open(); + dialog.open(true); instance.triggerXAPI('accessed-copyright'); }); actionBar.on('embed', function () { H5P.openEmbedDialog($actions, contentData.embedCode, contentData.resizeCode, { width: $element.width(), height: $element.height() - }); + }, instance); instance.triggerXAPI('accessed-embed'); }); @@ -952,7 +955,10 @@ H5P.Dialog = function (name, title, content, $element) { /** * Opens the dialog. */ - self.open = function () { + self.open = function (scrollbar) { + if (scrollbar) { + $dialog.css('height', '100%'); + } setTimeout(function () { $dialog.addClass('h5p-open'); // Fade in // Triggering an event, in case something has to be done after dialog has been opened. @@ -967,6 +973,7 @@ H5P.Dialog = function (name, title, content, $element) { $dialog.removeClass('h5p-open'); // Fade out setTimeout(function () { $dialog.remove(); + H5P.jQuery(self).trigger('dialog-closed', [$dialog]); }, 200); }; }; @@ -1167,6 +1174,9 @@ H5P.openReuseDialog = function ($element, contentData, library, instance, conten H5P.setClipboard(item); instance.triggerXAPI('copied'); }); + H5P.trigger(instance, 'resize'); + }).on('dialog-closed', function () { + H5P.trigger(instance, 'resize'); }); dialog.open(); @@ -1186,7 +1196,7 @@ H5P.openReuseDialog = function ($element, contentData, library, instance, conten * @param {number} size.width * @param {number} size.height */ -H5P.openEmbedDialog = function ($element, embedCode, resizeCode, size) { +H5P.openEmbedDialog = function ($element, embedCode, resizeCode, size, instance) { var fullEmbedCode = embedCode + resizeCode; var dialog = new H5P.Dialog('embed', H5P.t('embed'), '' + H5P.t('size') + ': × px
' + H5P.t('showAdvanced') + '

' + H5P.t('advancedHelp') + '

', $element); @@ -1196,15 +1206,7 @@ H5P.openEmbedDialog = function ($element, embedCode, resizeCode, size) { var $scroll = $inner.find('.h5p-scroll-content'); var diff = $scroll.outerHeight() - $scroll.innerHeight(); var positionInner = function () { - var height = $inner.height(); - if ($scroll[0].scrollHeight + diff > height) { - $inner.css('height', ''); // 100% - } - else { - $inner.css('height', 'auto'); - height = $inner.height(); - } - $inner.css('marginTop', '-' + (height / 2) + 'px'); + H5P.trigger(instance, 'resize'); }; // Handle changing of width/height @@ -1256,6 +1258,8 @@ H5P.openEmbedDialog = function ($element, embedCode, resizeCode, size) { expand.apply(this); } }); + }).on('dialog-closed', function () { + H5P.trigger(instance, 'resize'); }); dialog.open(); diff --git a/styles/h5p.css b/styles/h5p.css index d24a8f1..e17523e 100644 --- a/styles/h5p.css +++ b/styles/h5p.css @@ -260,7 +260,7 @@ div.h5p-fullscreen { top: 0; left: 0; width: 100%; - height: 100%; + min-height: 100%; z-index: 100; padding: 2em; box-sizing: border-box; @@ -303,12 +303,13 @@ div.h5p-fullscreen { font-size: 12px; margin-left: 1em; } -.h5p-embed-dialog .h5p-inner { +.h5p-embed-dialog .h5p-inner, +.h5p-reuse-dialog .h5p-inner, +.h5p-content-user-data-reset-dialog .h5p-inner { width: 300px; left: 50%; top: 50%; margin: 0 0 0 -150px; - transition: margin 250ms linear 100ms; } .h5p-embed-dialog .h5p-embed-code-container, .h5p-embed-size { @@ -344,12 +345,14 @@ div.h5p-fullscreen { padding: 1em; box-sizing: border-box; -moz-box-sizing: border-box; - height: 100%; + color: #555555; + z-index: 1; +} +.h5p-popup-dialog.h5p-open .h5p-scroll-content { overflow: auto; overflow-x: hidden; overflow-y: auto; - color: #555555; - z-index: 1; + height: 100%; } .h5p-popup-dialog .h5p-scroll-content::-webkit-scrollbar { width: 8px; @@ -516,6 +519,8 @@ div.h5p-fullscreen { padding: 0.5em; position: absolute; top: -1em; + left: 50%; + transform: translateX(-50%); } /* This is loaded as part of Core and not Editor since this needs to be outside the editor iframe */