Modal Overlay

[elli]

I have this script that creates an overlay behind modals when they're opened, to bring focus to the modal and prevent accidental clicks outside of it. (The concept of overlaying ads seems iffy RE: the TOS, even temporarily, so reds can feel free to correct me if that's a no-no. Although, the forum where this will be used is ad-free.)

It's pretty messy, and for some reason, a few of these selectors don't actually work to select that particular modal, such as announcement-options and groupsDialog.

Is there any way to improve this to simply select all modals, or to reduce the number of selectors needed?

var $dialogSelectors = $('#recent-threads, #guests-online, #poll-dialog, #show-attachment, #announcement-options, #threads-list-search-dialog, #posts-list-search-dialog, #conversations-list-search-dialog, #messages-list-search-dialog, #members-list-search-dialog, #image-avatar-editor-container, #signature_preview_pane, #board_listing, #groupsDialog, #change-users-container, #loading-dialog');

if ($dialogSelectors.length) {
  $dialogSelectors.dialog('option', 'modal', true);
} else {
  $(document).on('dialogcreate', function(event) {
    if (event.target.id == 'recent-threads' || 'guests-online' || 'poll-dialog' || 'show-attachment' || 'announcement-options' || 'threads-list-search-dialog' || 'posts-list-search-dialog' || 'conversations-list-search-dialog' || 'messages-list-search-dialog' || 'members-list-search-dialog' || 'image-avatar-editor-container' || 'signature_preview_pane' || 'board_listing' || 'groupsDialog' || 'change-users-container' || 'loading-dialog') {
      $(event.target).dialog('option', 'modal', true);
    }
  });
}

This is easy enough when creating a new modal, but editing existing ones is another story.

[Quozzo]

Jan 31, 2019 14:02:52 GMT -8 elli said:

if (event.target.id == 'recent-threads' || 'guests-online' || 'poll-dialog' || 'show-attachment' || 'announcement-options' || 'threads-list-search-dialog' || 'posts-list-search-dialog' || 'conversations-list-search-dialog' || 'messages-list-search-dialog' || 'members-list-search-dialog' || 'image-avatar-editor-container' || 'signature_preview_pane' || 'board_listing' || 'groupsDialog' || 'change-users-container' || 'loading-dialog') 

This line will always be true since you're not comparing the id to each string, just the first. You're then saying if anything is not empty, which is isn't. To get the expected result you need to explicitly compare the `event.target.id` to each string. That said, it can't be that important if you haven't noticed it and more worryingly it should be activating on  all `dialogcreate` events anyway.

[elli]

Quozzo Yeah, that's what's weird about this. If I change it to check event.target.id against each string, or remove the conditional completely, nothing changes.

So I think either of these don't actually do anything:

if (event.target.id == 'recent-threads' || 'guests-online' || 'poll-dialog' || 'show-attachment' || 'announcement-options' || 'threads-list-search-dialog' || 'posts-list-search-dialog' || 'conversations-list-search-dialog' || 'messages-list-search-dialog' || 'members-list-search-dialog' || 'image-avatar-editor-container' || 'signature_preview_pane' || 'board_listing' || 'groupsDialog' || 'change-users-container' || 'loading-dialog')

if (event.target.id == 'recent-threads' || event.target.id == 'guests-online' || event.target.id == 'poll-dialog' || event.target.id == 'show-attachment' || event.target.id == 'announcement-options' || event.target.id == 'threads-list-search-dialog' || event.target.id == 'posts-list-search-dialog' || event.target.id == 'conversations-list-search-dialog' || event.target.id == 'messages-list-search-dialog' || event.target.id == 'members-list-search-dialog' || event.target.id == 'image-avatar-editor-container' || event.target.id == 'signature_preview_pane' || event.target.id == 'board_listing' || event.target.id == 'groupsDialog' || event.target.id == 'change-users-container' || event.target.id == 'loading-dialog')
Which means that it should be more related to the first conditional:

if ($dialogSelectors.length)
But still, announcement-options, board_listing, groupsDialog, and change-users-container aren't getting selected.

EDIT: If I remove if ($dialogSelectors.length), leaving the below, it gets the four modals mentioned above, but none of the others??

$(document).on('dialogcreate', function(event) {
  $(event.target).dialog('option', 'modal', true);
});

[Quozzo]

Jan 31, 2019 15:09:29 GMT -8 elli said:

Quozzo Yeah, that's what's weird about this. If I change it to check event.target.id against each string, or remove the conditional completely, nothing changes.

So I think either of these don't actually do anything:

if (event.target.id == 'recent-threads' || 'guests-online' || 'poll-dialog' || 'show-attachment' || 'announcement-options' || 'threads-list-search-dialog' || 'posts-list-search-dialog' || 'conversations-list-search-dialog' || 'messages-list-search-dialog' || 'members-list-search-dialog' || 'image-avatar-editor-container' || 'signature_preview_pane' || 'board_listing' || 'groupsDialog' || 'change-users-container' || 'loading-dialog')

if (event.target.id == 'recent-threads' || event.target.id == 'guests-online' || event.target.id == 'poll-dialog' || event.target.id == 'show-attachment' || event.target.id == 'announcement-options' || event.target.id == 'threads-list-search-dialog' || event.target.id == 'posts-list-search-dialog' || event.target.id == 'conversations-list-search-dialog' || event.target.id == 'messages-list-search-dialog' || event.target.id == 'members-list-search-dialog' || event.target.id == 'image-avatar-editor-container' || event.target.id == 'signature_preview_pane' || event.target.id == 'board_listing' || event.target.id == 'groupsDialog' || event.target.id == 'change-users-container' || event.target.id == 'loading-dialog')
Which means that it should be more related to the first conditional:

if ($dialogSelectors.length)
But still, announcement-options, board_listing, groupsDialog, and change-users-container aren't getting selected.

EDIT: If I remove if ($dialogSelectors.length), leaving the below, it gets the four modals mentioned above, but none of the others??

$(document).on('dialogcreate', function(event) {
  $(event.target).dialog('option', 'modal', true);
});

To confirm,  it works with the others and not the top four listed if you exclude the if statement? That sounds rather odd.

The only thing that comes to mind is that it could be too late to enable the model if the dialogue has already been created, or that it is created once and re-used so the custom event won't fire again. Have you tried it with all the custom events such as

$(document).on('dialogcreate dialogopen dialogclose dialogfocus', function(event) {
  $(event.target).dialog('option', 'modal', true);
});Just to ensure it is targeted at every opportunity.

Does the dialogue have the modal if it is triggered a second time?

Do you have a URL I could test this on, I'm quite intrigued how it all works.

[elli]

Other way: if I remove if ($dialogSelectors.length), the remaining code catches those four modals, but not the rest. With the if statement, it gets all but those four.

You might be right about the dialogs already being created by the time this script runs. You can see it all together on this board, but you'd have to create an account (that's fine--it's just a test forum):

gaming-boards-theme.proboards.com/

You can see this adding an overlay behind the dialog if you go to create a new thread and "Add Poll" or "Add Attachment". If you go to your user settings, under the "Notifications" tab and click "Add Board", it will pull up a dialog, but the overlay isn't being added.

I have not tried the other events, but I will.

EDIT: The other events don't have any effect.

[Philip]

Most of the UI elements are created using JQuery Widget Factory(1.8.3) and can be easily overridden/extended in the prototypes.


$.widget('ui.dialog', $.extend({}, $.ui.dialog.prototype, {
  _create : function(){ ...override the dialog create method.... }
});


If you don't want to override the methods, you can simply get a reference to said method

and call it inside the override method, whilst adding your custom code.


var _ref_create = $.ui.dialog.prototype._create;


$.widget('ui.dialog', $.extend({}, $.ui.dialog.prototype, {
  _create : function(){
       // custom code ....
      this.options.modal = true;  

      // call the original _create method
     _ref_create.apply(this, arguments);
}
}))
All widgets have certain methods in the prototype such as _create, _trigger, _close, _destroy, _init etc etc, so finding where to best place your custom code will rely on you reading the code itself.

*NOTE: The _create method may not be the best place to set your options as they may be overridden by the plugin or user.

Proboards does have some custom widgets such as pagination and some of the default widgets are customized further but a great place to start reading would be in the unminified version of jqueryUI(1.8.3)

There is a small caveat however, any methods defined outside the prototype will be broken if you use the above method(s)

So as a workaround you could try the following monkey patching(NOT TESTED)

var _ref_create = $.ui.dialog.prototype._create;

$.ui.dialog.prototype._create = function(){
   this.options.modal = true;
   _ref_create.apply(this, arguments);
}

[elli]

Forgot to come back and say no dice on that, either. I tried a few other things with jQuery UI with no success. It is very likely that I'm missing something, or not placing my script correctly, though.

I wonder if these particular dialogs are within the scope of a function, or otherwise not editable. I went through the pb.combined file to find all of the dialogs, and it looks like about half of them can't be touched.

[Peter]

elli ,

You are correct.  Some dialogs are created beforehand, so if you override _create then it appears to have no effect.

2 solutions.

1.  Try and put your override into the header (see last code snippet by Philip ).  This way it will apply to all dialogs before they are created.

2.  Override the open method if you prefer not to have your code in different locations.

let open_ref = $.ui.dialog.prototype.open;

$.ui.dialog.prototype.open = function(){
this.options.modal = true;
open_ref.apply(this, arguments);
}

[elli]

Peter When placing either of these snippets in the same location within <head>, only the latter works. I also moved the $[head] variable below the script with no change. The first one must not be catching them somehow?

This works, though, thank you so much for solving this headache!!