close button is missing from modal dialog

[soniktrooth]

This missing close dialog led me to discover a name space collision for .button() method. Both Bootstrap and jQueryUI implement this method.

[soniktrooth]

It comes down to the fact that the markup is different:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
  <span id="ui-id-1" class="ui-dialog-title">&nbsp;</span>
  <button class="ui-dialog-titlebar-close"></button>
</div>

vs

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
  <span id="ui-id-2" class="ui-dialog-title">&nbsp;</span>
  <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
    <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
    <span class="ui-button-text">close</span>
  </button>
</div>

And I think it comes down to this piece of code from jquery.ui.dialog.js:

        this.uiDialogTitlebarClose = $("<button></button>")
            .button({
                label: this.options.closeText,
                icons: {
                    primary: "ui-icon-closethick"
                },
                text: false
            })
            .addClass("ui-dialog-titlebar-close")
            .appendTo( this.uiDialogTitlebar );

[soniktrooth]

I think this is a name space clash. Both Bootstrap and jQuery UI have a .button() method. Removing BS from the page lets the code in jquery.ui.dialog.js run properly and gives us the correct markup.

[andrewmallis]

See https://www.drupal.org/node/2525208

[soniktrooth]

@andrewmallis I don't believe that's the same issue. Some little css tweaks fixed their problem but ours is that the markup is completely different—and it's the .button() method that is adding the required markup.

[soniktrooth]

Here are some options:

We could use the widget bridge included in jQuery UI as outlined here: http://www.ryadel.com/en/using-jquery-ui-bootstrap-togheter-web-page/ however we have no control over how it's called in Panopoly so I don't think this will work.

So I'm leaning towards this:

var btn = $.fn.button.noConflict() // reverts $.fn.button to jqueryui btn
$.fn.btn = btn // assigns bootstrap button functionality to $.fn.btn

This will mean that any time we want to use the button method from BS we use .btn() instead. Not great because it doesn't match up with the BS docs but I don't think there's a better way around this. We will have to document it well.

We will have to do the same thing for .tooltip() because it is implemented by both libraries too.

[andrewmallis]

@soniktrooth I'd like if we can keep the issue descriptions more focused on the problem that is exhibited, as this will help users with the same problem identify the the issue.

[andrewmallis]

I am not excited to break the documented bootstrap pattern in principal. I lack js fluency to propose anything concrete, but perhaps @RobLoach may be of assistance here.

I do recall in the vestigial 4.x branch we managed to replace the modals with BS modals straight up. Please see SHA 5644548

Also, please see this issue: https://www.drupal.org/node/2546874
which I believe is related, and does bring a solution to radix, another BS based theme that plays nice with Panopoly.

[soniktrooth]

I'm not excited about changing the documented BS patterns either but there's not a lot of options for two libraries to co-exist. Ultimately, replacing jQueryUI modals with BS modals would be ideal, and we'd have to look at tooltips too and investigate if there are any other namespace collisions to address.

I will look into the radix solution you linked to—if we can fix this with js file ordering for now that would be great as I was hoping to do a 'bring in the goodness from 4.x' sprint at some stage soon.