Add workaround for jquery height bug with flexbox (& remove duplicate…

… event handlers)
flack · Jun 5, 2019 · fc4c1b2 · fc4c1b2
1 parent 402192e
commit fc4c1b2
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 33 deletions.
diff --git a/static/midcom.workflow/dialog.js b/static/midcom.workflow/dialog.js
@@ -76,7 +76,7 @@ $(document).ready(function() {
                 .submit();
         });
 
-        $(window).unload(function() {
+        $(window).on('unload', function() {
             dialog.nextAll('.ui-dialog-buttonpane').find('button')
                 .prop('disabled', true)
                 .addClass('ui-state-disabled');
@@ -116,7 +116,45 @@ $(document).ready(function() {
             buttons = extra_buttons.concat(buttons);
         }
 
-        dialog.dialog('option', 'buttons', buttons);
+        // This doesn't work under certain circumstances when flexbox is used somewhere in the page:
+        // dialog.dialog('option', 'buttons', buttons);
+        // @todo: The root of the problem seems to be that jquery can't set the content element
+        // to a height of 0, so at some point this could be filed as a bug against their repo. Latest
+        // stable (3.4.1) is affected. For now, we just copy the relevant part from jqueryui's
+        // _createButtons method..
+
+        var buttonset = dialog.nextAll('.ui-dialog-buttonpane').find('.ui-dialog-buttonset').empty();
+
+        $.each(buttons, function (name, props) {
+            var click, buttonOptions;
+            props = $.isFunction(props) ? {click: props, text: name} : props;
+
+            // Default to a non-submitting button
+            props = $.extend({type: "button"}, props);
+
+            // Change the context for the click callback to be the main element
+            click = props.click;
+            buttonOptions = {
+                icon: props.icon,
+                iconPosition: props.iconPosition,
+                label: props.text
+            };
+
+            delete props.click;
+            delete props.icon;
+            delete props.iconPosition;
+            delete props.text;
+
+            $('<button></button>', props)
+                .button(buttonOptions)
+                .appendTo(buttonset)
+                .on('click', function() {
+                    click.apply(dialog[0], arguments);
+                });
+        });
+
+        dialog.find('> .fa-spinner').hide();
+        dialog.find('> iframe').css('visibility', 'visible');
     } else {
         $('.midcom-view-toolbar').show();
     }

diff --git a/static/midcom.workflow/workflow.js b/static/midcom.workflow/workflow.js
@@ -212,16 +212,36 @@ function create_dialog(control, title, url) {
                    + ' marginheight="0"'
                    + ' width="100%"'
                    + ' height="100%"'
-                   + ' scrolling="auto" />')
-            .on('load', function() {
-                spinner.hide();
-                $(this).css('visibility', 'visible');
-            });
+                   + ' scrolling="auto" />');
 
         dialog = $('<div id="midcom-dialog"></div>')
             .append(spinner)
             .append(iframe)
-            .insertAfter(control);
+            .on('dialogcreate', function() {
+                var maximized = false,
+                    saved_options = {};
+                $(this).prevAll('.ui-dialog-titlebar').on('dblclick', function() {
+                    if (!maximized) {
+                        saved_options.position = dialog.dialog('option', 'position');
+                        saved_options.width = dialog.dialog('option', 'width');
+                        saved_options.height = dialog.dialog('option', 'height');
+                        dialog.dialog('option', {
+                            width: '99%',
+                            height: $(window).height(),
+                            position: {my: 'center top', at: 'center top', of: window}
+                        });
+                        maximized = true;
+                    } else {
+                        dialog.dialog('option', {
+                            height: saved_options.height,
+                            width: saved_options.width,
+                            position: saved_options.position
+                        });
+                        maximized = false;
+                    }
+                });
+            })
+            .appendTo($('body'));
     }
 
     config.height = Math.min(config.height, window.innerHeight);
@@ -237,31 +257,6 @@ function create_dialog(control, title, url) {
         //todo: find out why the click doesn't bubble automatically
         control.parent().trigger('click');
     }
-    dialog
-        .on('dialogcreate', function() {
-            var maximized = false,
-                saved_options = {};
-            $(this).prevAll('.ui-dialog-titlebar').on('dblclick', function() {
-                if (!maximized) {
-                    saved_options.position = dialog.dialog('option', 'position');
-                    saved_options.width = dialog.dialog('option', 'width');
-                    saved_options.height = dialog.dialog('option', 'height');
-                    dialog.dialog('option', {
-                        width: '99%',
-                        height: $(window).height(),
-                        position: {my: 'center top', at: 'center top', of: window}
-                    });
-                    maximized = true;
-                } else {
-                    dialog.dialog('option', {
-                        height: saved_options.height,
-                        width: saved_options.width,
-                        position: saved_options.position
-                    });
-                    maximized = false;
-                }
-            });
-        });
     make_dialog(dialog, config);
     dialog.dialog("instance").uiDialog.draggable("option", "containment", false);
 }