trigger pw-panel-closed on button that opened the panel instead of $(document)

[BernhardBaumrock]

Short description of the issue

I need to reload some parts of my backend after a pw-panel has been closed. Currently the pw-panel-closed event is triggered on $(document) but it would be necessary for me that the event is triggered on the element that opened the panel so that I can reload only the corresponding grid that triggered the panel:

// whenever a panel is closed that was opened by an element having
// class "rt-reload" reload that rocktabulator grid
$(document).on('pw-panel-closed', '.rt-reload', function() {
  RockTabulator.getGrid(this).reload();
});

Quick and easy fix by changing 2 sections: https://www.diffchecker.com/hyMbR914

Sorry, there is a typo in the diff:

$($toggler).trigger('pw-panel-closed', $panel);
// should be
$toggler.trigger('pw-panel-closed', $panel);

Thx!

[jmartsch]

The word "button" might be disleading. I think you mean the element which triggered the panel to open, which could also be an anchor element or something different.

[BernhardBaumrock]

thx, updated the wording

[ryancramerdesign]

@BernhardBaumrock Wouldn't this break any existing code that is looking for the pw-panel-closed in its current setup triggered on document? (not sure if there are any instances, but just in case). If so, I'm wondering if it might be better to add a different event for the purpose?

[BernhardBaumrock]

Thx @ryancramerdesign for having a look. IMHO the event should bubble up the DOM and also fire on $(document) - at least this should be the case from jQuery 1.3+

Just tried this and it seems to work without any issues:

  $(document).on('test', function(e) {
    console.log('test triggered on', e.target);
  });

  $(document).ready(function() {
    console.log('ready');
    $(document).trigger('test');
    $('#wrap_Inputfield_icon').trigger('test');
  });

BTW: I get this 404 for a missing favicon.ico on all of my sites. I haven't investigated the reason - maybe you have an idea how that could also be fixed, thx :)

[ryancramerdesign]

@BernhardBaumrock Okay thanks, if it doesn't break other usages (and sounds like it doesn't) then I'm fine to change it per your suggestion.

The fix for the 404 is to put in a favicon file. This is one of those things that web browsers make requests for on their own, and isn't related to PW.

[ryancramerdesign]

@BernhardBaumrock One other question from the diff. Shouldn't this line:

$toggler = $($panel.data('toggler')); 

be this?

$toggler = $panel.data('toggler');

Why the extra $() call? I'm guessing it works either way though, but just curious.

[BernhardBaumrock]

Thx @ryancramerdesign !

Just tested and you are right, $toggler = $panel.data('toggler'); is correct. I thought the toggler was stored as string and therefore I did an extra $(...) to convert it to a jQuery object.

As you are working on the panel.js file, could you please also consider this request about how panels are initialized: https://github.com/processwire/processwire-requests/issues/176

Thank you Ryan!

[BernhardBaumrock]

Thank you also for the explanation regarding the favicon.ico :)

[BernhardBaumrock]

@ryancramerdesign this is causing problems for me again :(

Did you actually change anything? I'm on ProcessWire: 3.0.165 and the event is fired on (document). So I can't really tell which panel was closed... Also https://github.com/processwire/processwire-requests/issues/176 is an issue again, because I have a link in my inputfield that opens the panel. When the panel is closed, that Inputfield is refreshed (Inputfields.reload(...)), so the link to the panel does also get loaded again.

The problem here is that the panels are already initialized and I'd have to trigger pwPanels.init() again. Not a big deal, but it would not be necessary using my suggested approach and potentially save work in many situations.

Thx

This is my copy&paste fix:

$(document).on('click', '.pw-panel:not(pw-panel-init)', function(e) {
  e.preventDefault();
  let $el = $(e.target).closest('.pw-panel');
  $el.addClass('pw-panel-init');

  // setup link element
  let $a = $el.closest('a[href]');

  // add panel and trigger click
  $.when(pwPanels.addPanel($a)).then(function() { $a.click(); });
  return false;
});