Revamped iframe modal handling (references #2480 and #2421)

This commit is contained in:
Bernd Bestel 2024-02-25 10:40:11 +01:00
parent 8ba3305a21
commit e01e0f3abe
No known key found for this signature in database
GPG Key ID: 71BD34C0D4891300
10 changed files with 28 additions and 42 deletions

View File

@ -27,6 +27,7 @@
"daterangepicker": "^3.1.0",
"fullcalendar": "^3.10.1",
"gettext-translator": "3.0.1",
"iframe-resizer": "^4.3.9",
"jquery": "^3.6.0",
"jquery-serializejson": "^2.9.0",
"moment": "^2.27.0",

View File

@ -107,8 +107,10 @@ button.disabled {
margin-left: 0;
}
iframe {
iframe.embed-responsive {
border: 0;
width: 1px;
min-width: 100%;
}
/* Hide the default up/down arrow buttons for number inputs because we use our own buttons in numberpicker */

View File

@ -552,41 +552,19 @@ ResizeResponsiveEmbeds = function(fillEntireViewport = false)
{
var maxHeight = $("body").height();
}
$("embed.embed-responsive").attr("height", maxHeight.toString() + "px");
ResizeIframes();
}
ResizeIframes = function()
{
$("iframe.embed-responsive").each(function()
{
if (!$(this).isVisibleInViewport())
{
return;
}
var desiredHeight = $(this)[0].contentWindow.document.body.scrollHeight;
if (desiredHeight == 0)
{
// The corresponding frame should be loaded after the "onload" event fired,
// this seems to be sometimes (not really reproducible) not the case in Chrome based Browsers...
// => So if that happens, just try this again later
setTimeout(function()
{
ResizeIframes();
}, 200);
}
else
{
$(this).attr("height", desiredHeight.toString() + "px");
}
});
}
$(window).on('resize', function()
{
ResizeResponsiveEmbeds($("body").hasClass("fullscreen-card"));
});
if (GetUriParam("embedded"))
{
window.parent.iFrameResize({ "checkOrigin": false, "warningTimeout": 0 }, "iframe.embed-responsive");
}
function WindowMessageBag(message, payload = null)
{
var obj = {};
@ -726,7 +704,7 @@ $(document).on("click", ".show-as-dialog-link", function(e)
var link = $(e.currentTarget).attr("href");
bootbox.dialog({
message: '<iframe height="650px" class="embed-responsive" onload="ResizeResponsiveEmbeds();" src="' + link + '"></iframe>',
message: '<iframe class="embed-responsive" src="' + link + '"></iframe>',
size: 'large',
backdrop: true,
closeButton: false,

View File

@ -927,7 +927,7 @@ $(document).on("click", ".display-recipe-button", function(e)
function(result)
{
bootbox.dialog({
message: '<iframe height="650px" class="embed-responsive" onload="ResizeResponsiveEmbeds();" src="' + U("/recipes?embedded&recipe=") + objectId + '#fullscreen"></iframe>',
message: '<iframe class="embed-responsive" src="' + U("/recipes?embedded&recipe=") + objectId + '#fullscreen"></iframe>',
size: 'extra-large',
backdrop: true,
closeButton: false,

View File

@ -198,7 +198,7 @@ $("#test-quantityunit-plural-forms-button").on("click", function(e)
$("#save-quantityunit-button").click();
bootbox.alert({
message: '<iframe height="400px" class="embed-responsive" onload="ResizeResponsiveEmbeds();" src="' + U("/quantityunitpluraltesting?embedded&qu=") + Grocy.EditObjectId.toString() + '"></iframe>',
message: '<iframe class="embed-responsive" src="' + U("/quantityunitpluraltesting?embedded&qu=") + Grocy.EditObjectId.toString() + '"></iframe>',
closeButton: false,
size: "large",
callback: function(result)

View File

@ -220,7 +220,7 @@ $(document).on('click', '.recipe-pos-edit-button', function(e)
var recipePosId = $(e.currentTarget).attr('data-recipe-pos-id');
bootbox.dialog({
message: '<iframe height="650px" class="embed-responsive" onload="ResizeResponsiveEmbeds();" src="' + U("/recipe/") + Grocy.EditObjectId.toString() + '/pos/' + recipePosId.toString() + '?embedded&product=' + productId.toString() + '"></iframe>',
message: '<iframe class="embed-responsive" src="' + U("/recipe/") + Grocy.EditObjectId.toString() + '/pos/' + recipePosId.toString() + '?embedded&product=' + productId.toString() + '"></iframe>',
size: 'large',
backdrop: true,
closeButton: false,
@ -266,7 +266,7 @@ $("#recipe-pos-add-button").on("click", function(e)
e.preventDefault();
bootbox.dialog({
message: '<iframe height="650px" class="embed-responsive" onload="ResizeResponsiveEmbeds();" src="' + U("/recipe/") + Grocy.EditObjectId + '/pos/new?embedded"></iframe>',
message: '<iframe class="embed-responsive" src="' + U("/recipe/") + Grocy.EditObjectId + '/pos/new?embedded"></iframe>',
size: 'large',
backdrop: true,
closeButton: false,

View File

@ -291,7 +291,7 @@ recipesTables.on('select', function(e, dt, type, indexes)
else
{
bootbox.dialog({
message: '<iframe height="650px" class="embed-responsive" onload="ResizeResponsiveEmbeds();" src="' + U("/recipes?embedded&recipe=") + selectedRecipeId + '#fullscreen"></iframe>',
message: '<iframe class="embed-responsive" src="' + U("/recipes?embedded&recipe=") + selectedRecipeId + '#fullscreen"></iframe>',
size: 'extra-large',
backdrop: true,
closeButton: false,
@ -323,7 +323,7 @@ $(".recipe-gallery-item").on("click", function(e)
else
{
bootbox.dialog({
message: '<iframe height="650px" class="embed-responsive" onload="ResizeResponsiveEmbeds();" src="' + U("/recipes?embedded&recipe=") + selectedRecipeId + '#fullscreen"></iframe>',
message: '<iframe class="embed-responsive" src="' + U("/recipes?embedded&recipe=") + selectedRecipeId + '#fullscreen"></iframe>',
size: 'extra-large',
backdrop: true,
closeButton: false,

View File

@ -624,8 +624,3 @@ if ($(window).width() < 768 || !Grocy.FeatureFlags.GROCY_FEATURE_FLAG_STOCK)
{
$("#filter-container").removeClass("border-bottom");
}
$("#shopping-list-stock-add-workflow-purchase-form-frame").on("load", function()
{
ResizeResponsiveEmbeds();
});

View File

@ -124,7 +124,7 @@
</head>
<body class="fixed-nav @if(boolval($userSettings['night_mode_enabled_internal'])) night-mode @endif @if($embedded) embedded @endif">
@if(!($embedded))
@if(!$embedded)
<nav id="mainNav"
class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand py-0"
@ -745,6 +745,11 @@
<script src="{{ $U('/packages/chartjs-plugin-doughnutlabel/dist/chartjs-plugin-doughnutlabel.js?v=', true) }}{{ $version }}"></script>
<script src="{{ $U('/packages/chartjs-plugin-piechart-outlabels/dist/chartjs-plugin-piechart-outlabels.min.js?v=', true) }}{{ $version}}"></script>
@endif
@if($embedded)
<script src="{{ $U('/packages/iframe-resizer/js/iframeResizer.contentWindow.js?v=', true) }}{{ $version}}"></script>
@else
<script src="{{ $U('/packages/iframe-resizer/js/iframeResizer.js?v=', true) }}{{ $version}}"></script>
@endif
<script src="{{ $U('/js/extensions.js?v=', true) }}{{ $version }}"></script>
<script src="{{ $U('/js/grocy_menu_layout.js?v=', true) }}{{ $version }}"></script>

View File

@ -415,6 +415,11 @@ http-signature@~1.2.0:
jsprim "^1.2.2"
sshpk "^1.7.0"
iframe-resizer@^4.3.9:
version "4.3.9"
resolved "https://registry.yarnpkg.com/iframe-resizer/-/iframe-resizer-4.3.9.tgz#a2fcdb0f35a2eba1b3a3984c883193a849e1a6ce"
integrity sha512-MCt+V/THB4a9OcAdrWo5NsI2CRpeMM4ijhTfiLtsdgDJXWYXf62Ve8yO8rKGmYNs991zty/EolYOxActlkfU+A==
iota-array@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/iota-array/-/iota-array-1.0.0.tgz#81ef57fe5d05814cd58c2483632a99c30a0e8087"