Support » Plugin: Enhanced Media Library » Problem with jQuery dialogs

Problem with jQuery dialogs

  • Resolved Jacob N. Breetvelt

    (@opajaap)


    9 months, 2 weeks ago

    When this plugin is active, the use of jQuery dialog by other plugins is no longer possible at the backend.

    Example: Plugin https://wordpress.org/plugins/wp-photo-album-plus/ uses jQuery dialog for shortcode generators to generate customized shortcodes. When Enhanced Media Library
    is installed, these dialogs no longer work.

    A plugin should never ‘globally’ modify the behaviour of components that may also be used by others.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author webbistro

    (@webbistro)

    9 months, 2 weeks ago

    @opajaap,

    Hi, thanks for informing me. Actually, EML does not globally modify jQuery dialog behavior, it uses it solely for creating its custom dialog popups like your plugin does. I tested plugins together and found out that removing wp_enqueue_style ( 'wp-jquery-ui-dialog' ); from the admin_enqueue_scripts action solved the issue. The line was added many years ago and all this time worked well. I will check this more carefully and release an update soon.

    Best,
    -Nadia

    Thread Starter Jacob N. Breetvelt

    (@opajaap)

    9 months, 2 weeks ago

    Thank you!

    Plugin Author webbistro

    (@webbistro)

    9 months, 2 weeks ago

    @opajaap,

    Hi again! I looked deeper into the issue and found out that:

    (1) WP offers a special CSS for jQuery Dialog which I use in EML.

    (2) Your plugin is incompatible with this CSS (it’s a z-index issue with the .ui-dialog block and .ui-widget-overlay block). So I can add a special compatibility workaround to EML but in case any other plugin enqueues wp-jquery-ui-dialog CSS for the admin, you’ll run into the same issue with it.

    To make sure I deactivated EML at all, then added this code to my theme’s function.php

    add_action( 'admin_enqueue_scripts', 'twtw_admin_enqueue_scripts' );

function twtw_admin_enqueue_scripts() {
	wp_enqueue_style ( 'wp-jquery-ui-dialog' );
}

    And it’s broken your dialog popup as well.

    I haven’t found where exactly you set the z-index for your .ui-dialog. I found that myself I previously (years ago) added the style

    .eml-dialog-modal {
    /*z-index: 300000 !important;*/
}

    I have commented it out for now, as you can see, and all works seemingly well. So, when wp-jquery-ui-dialog is enqueued it sorts it out for me these days. Though I need to do more tests.

    Resume: this looks like your plugin needs some update too 🙂

    Best,
    -Nadia

    Thread Starter Jacob N. Breetvelt

    (@opajaap)

    9 months, 2 weeks ago

    I set the css for the jquery dialog in its activation only; i think that this is the proper way.
    Example from wp-photo-album-plus/js/wppa-tinymce-shortcodes.js:

    // Add the wppa button to the mce editor
tinymce.PluginManager.add('wppagallery', function(editor, url) {

		function openWppaShortcodeGenerator() {

			var opt = {
						modal:		true,
						resizable: 	true,
						width:		720,
						show: 		{
										effect: 	"fadeIn",
										duration: 	400
									},
						closeText: 	"",
						close: 		function(event,ui) {

									},
						open: 		function(event,ui) {
										wppaGalleryEvaluate();
									}
						};

			jQuery( "#wppagallery-form" ).dialog(opt).dialog( "open" );

			jQuery( '.ui-widget-header' ).css( {
											background:			'none',
										});

			jQuery( '.ui-dialog' ).css( {
											boxShadow: 			'0px 0px 5px 5px #aaaaaa',
											borderRadius: 		wppaBoxRadius+'px',
											padding: 			'8px',
											backgroundColor: 	wppaModalBgColor,
											boxSizing: 			'content-box',
											zIndex: 			100000,
										});

			jQuery( '.ui-dialog-titlebar' ).css( {
													lineHeight: '0px',
													height: 	'24px',
													fontSize: 	'18px',
													fontWeight: 'bold',
												});

			jQuery( '.ui-dialog-title' ).css( {
													position: 	'absolute',
													top: 		'15px',
													fontSize: 	'18px',
													fontWeight: 'bold',
											});

			jQuery( '.ui-button' ).css(	{
											backgroundImage: 	wppaModalQuitImg,
											padding:			0,
											position: 			'absolute',
											right: 				'8px',
											top: 				'20px',
											width: 				'16px',
											height: 			'16px',
										});

			jQuery( '.ui-widget-overlay' ).css( {
													background:	'none',
												});

			jQuery( '.ui-button' ).attr( 'title', 'Close' );

			jQuery( '.ui-icon-closethick' ).css( {
											display: 			'none',
										});

    So this css only works when my dialog is active

    Plugin Author webbistro

    (@webbistro)

    9 months, 2 weeks ago

    @opajaap,

    I meant that EML is not a culprit of the problem. If anyone enqueues wp-jquery-ui-dialog CSS, which is a part of the WP core (/wp-includes/css/jquery-ui-dialog.css), for admin pages including those where your plugin enqueues its CSS, then it will lead to a problem with your plugin.

    Best,
    -Nadia

    Thread Starter Jacob N. Breetvelt

    (@opajaap)

    9 months, 2 weeks ago

    Yes, unfortunately you will be right. I am not glad with wp forcing me to this css depending of whether its used or not by someone else. If it would be loaded always, i could have been able to fix this many years ago.

    When i specify the css as how it should be done according to the jquery documentation, i expect it to work.

    In any case, its not your problem, and i thank you for giving me the insight into this.
    I will dig into.

    Case closed

    Plugin Author webbistro

    (@webbistro)

    9 months, 2 weeks ago

    @opajaap,

    Well, actually the simplest fix might be just setting z-index: 300000; instead of 100000, since in /wp-includes/css/jquery-ui-dialog.css .ui-widget-overlay has z-index: 100101;.

    Best,
    -Nadia

    Thread Starter Jacob N. Breetvelt

    (@opajaap)

    9 months, 1 week ago

    @webbistro
    FYI: From the changelog wppa 8.0.5:

    WPPA now uses wp-jquery-ui-dialog css file, and code has been changed to be compatible with it, to avoid conflicts with other plugins that use it also.

    Plugin Author webbistro

    (@webbistro)

    9 months, 1 week ago

    @opajaap,

    Cool! Thanks for letting me know.

    Best,
    -Nadia

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Problem with jQuery dialogs’ is closed to new replies.

Views