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

  • 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)

    @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)

    Thank you!

    Plugin Author webbistro

    (@webbistro)

    @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)

    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)

    @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)

    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)

    @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)

    @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)

    @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.