HFP-2541 Fix Dialog scrollbar on small dialogs

pull/58/head
Frode Petterson 2019-02-27 16:04:37 +01:00
parent 47d049afb2
commit b64292af09
2 changed files with 28 additions and 19 deletions

View File

@ -124,6 +124,9 @@ H5P.init = function (target) {
}; };
$dialog.find('.h5p-dialog-ok-button').click(closeDialog).keypress(closeDialog); $dialog.find('.h5p-dialog-ok-button').click(closeDialog).keypress(closeDialog);
H5P.trigger(instance, 'resize');
}).on('dialog-closed', function () {
H5P.trigger(instance, 'resize');
}); });
dialog.open(); dialog.open();
} }
@ -182,14 +185,14 @@ H5P.init = function (target) {
}); });
actionBar.on('copyrights', function () { actionBar.on('copyrights', function () {
var dialog = new H5P.Dialog('copyrights', H5P.t('copyrightInformation'), copyrights, $container); var dialog = new H5P.Dialog('copyrights', H5P.t('copyrightInformation'), copyrights, $container);
dialog.open(); dialog.open(true);
instance.triggerXAPI('accessed-copyright'); instance.triggerXAPI('accessed-copyright');
}); });
actionBar.on('embed', function () { actionBar.on('embed', function () {
H5P.openEmbedDialog($actions, contentData.embedCode, contentData.resizeCode, { H5P.openEmbedDialog($actions, contentData.embedCode, contentData.resizeCode, {
width: $element.width(), width: $element.width(),
height: $element.height() height: $element.height()
}); }, instance);
instance.triggerXAPI('accessed-embed'); instance.triggerXAPI('accessed-embed');
}); });
@ -952,7 +955,10 @@ H5P.Dialog = function (name, title, content, $element) {
/** /**
* Opens the dialog. * Opens the dialog.
*/ */
self.open = function () { self.open = function (scrollbar) {
if (scrollbar) {
$dialog.css('height', '100%');
}
setTimeout(function () { setTimeout(function () {
$dialog.addClass('h5p-open'); // Fade in $dialog.addClass('h5p-open'); // Fade in
// Triggering an event, in case something has to be done after dialog has been opened. // 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 $dialog.removeClass('h5p-open'); // Fade out
setTimeout(function () { setTimeout(function () {
$dialog.remove(); $dialog.remove();
H5P.jQuery(self).trigger('dialog-closed', [$dialog]);
}, 200); }, 200);
}; };
}; };
@ -1167,6 +1174,9 @@ H5P.openReuseDialog = function ($element, contentData, library, instance, conten
H5P.setClipboard(item); H5P.setClipboard(item);
instance.triggerXAPI('copied'); instance.triggerXAPI('copied');
}); });
H5P.trigger(instance, 'resize');
}).on('dialog-closed', function () {
H5P.trigger(instance, 'resize');
}); });
dialog.open(); dialog.open();
@ -1186,7 +1196,7 @@ H5P.openReuseDialog = function ($element, contentData, library, instance, conten
* @param {number} size.width * @param {number} size.width
* @param {number} size.height * @param {number} size.height
*/ */
H5P.openEmbedDialog = function ($element, embedCode, resizeCode, size) { H5P.openEmbedDialog = function ($element, embedCode, resizeCode, size, instance) {
var fullEmbedCode = embedCode + resizeCode; var fullEmbedCode = embedCode + resizeCode;
var dialog = new H5P.Dialog('embed', H5P.t('embed'), '<textarea class="h5p-embed-code-container" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>' + H5P.t('size') + ': <input type="text" value="' + Math.ceil(size.width) + '" class="h5p-embed-size"/> × <input type="text" value="' + Math.ceil(size.height) + '" class="h5p-embed-size"/> px<br/><div role="button" tabindex="0" class="h5p-expander">' + H5P.t('showAdvanced') + '</div><div class="h5p-expander-content"><p>' + H5P.t('advancedHelp') + '</p><textarea class="h5p-embed-code-container" autocorrect="off" autocapitalize="off" spellcheck="false">' + resizeCode + '</textarea></div>', $element); var dialog = new H5P.Dialog('embed', H5P.t('embed'), '<textarea class="h5p-embed-code-container" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>' + H5P.t('size') + ': <input type="text" value="' + Math.ceil(size.width) + '" class="h5p-embed-size"/> × <input type="text" value="' + Math.ceil(size.height) + '" class="h5p-embed-size"/> px<br/><div role="button" tabindex="0" class="h5p-expander">' + H5P.t('showAdvanced') + '</div><div class="h5p-expander-content"><p>' + H5P.t('advancedHelp') + '</p><textarea class="h5p-embed-code-container" autocorrect="off" autocapitalize="off" spellcheck="false">' + resizeCode + '</textarea></div>', $element);
@ -1196,15 +1206,7 @@ H5P.openEmbedDialog = function ($element, embedCode, resizeCode, size) {
var $scroll = $inner.find('.h5p-scroll-content'); var $scroll = $inner.find('.h5p-scroll-content');
var diff = $scroll.outerHeight() - $scroll.innerHeight(); var diff = $scroll.outerHeight() - $scroll.innerHeight();
var positionInner = function () { var positionInner = function () {
var height = $inner.height(); H5P.trigger(instance, 'resize');
if ($scroll[0].scrollHeight + diff > height) {
$inner.css('height', ''); // 100%
}
else {
$inner.css('height', 'auto');
height = $inner.height();
}
$inner.css('marginTop', '-' + (height / 2) + 'px');
}; };
// Handle changing of width/height // Handle changing of width/height
@ -1256,6 +1258,8 @@ H5P.openEmbedDialog = function ($element, embedCode, resizeCode, size) {
expand.apply(this); expand.apply(this);
} }
}); });
}).on('dialog-closed', function () {
H5P.trigger(instance, 'resize');
}); });
dialog.open(); dialog.open();

View File

@ -260,7 +260,7 @@ div.h5p-fullscreen {
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; min-height: 100%;
z-index: 100; z-index: 100;
padding: 2em; padding: 2em;
box-sizing: border-box; box-sizing: border-box;
@ -303,12 +303,13 @@ div.h5p-fullscreen {
font-size: 12px; font-size: 12px;
margin-left: 1em; 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; width: 300px;
left: 50%; left: 50%;
top: 50%; top: 50%;
margin: 0 0 0 -150px; margin: 0 0 0 -150px;
transition: margin 250ms linear 100ms;
} }
.h5p-embed-dialog .h5p-embed-code-container, .h5p-embed-dialog .h5p-embed-code-container,
.h5p-embed-size { .h5p-embed-size {
@ -344,12 +345,14 @@ div.h5p-fullscreen {
padding: 1em; padding: 1em;
box-sizing: border-box; box-sizing: border-box;
-moz-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: auto;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
color: #555555; height: 100%;
z-index: 1;
} }
.h5p-popup-dialog .h5p-scroll-content::-webkit-scrollbar { .h5p-popup-dialog .h5p-scroll-content::-webkit-scrollbar {
width: 8px; width: 8px;
@ -516,6 +519,8 @@ div.h5p-fullscreen {
padding: 0.5em; padding: 0.5em;
position: absolute; position: absolute;
top: -1em; 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 */ /* This is loaded as part of Core and not Editor since this needs to be outside the editor iframe */