change handling of pw-panel links

[BernhardBaumrock]

Short description of the enhancement

pw-panel links are great and I use them very often in my datatables.

The problem with those links is that pwpanels.init() has to be called after the dom elements already exist. On ajax loaded content this is a problem and you would need to trigger init() manually. This is sometimes not so easy and also it can be a performance killer (like here when I have a table with 1000s of rows).

Current vs. suggested behavior

My solution is to intercept clicks on all pw-panel links and add the panel on the fly only for this element. When the panel was added, the link is clicked and the panel opens:

$(document).on('click', '.RockGridItem a.pw-panel:not(.init)', function(e) {
  $el = $(this);

  // add init class to prevent double initialisation of panels
  $el.addClass('init');
  
  // init panel and click on the link when done
  $.when(pwPanels.addPanel($el)).then(function() { $el.click(); });
  
  // prevent initial click on the old link
  return false;
});

Why would the enhancement be useful to users?

I think this would be useful for any developed plugin or even for all existing pw-panel link occurances. Don't know details about browser support of $.when() but maybe this could be changed to something more foolproof.

Hope that makes sense and was explained good enough :)

[BernhardBaumrock]

And again I came to this issue during development today... Another solution is to do

pwPanels.addPanel($el);

on every element that is loaded via ajax

[BernhardBaumrock]

@ryancramerdesign and once again I need to workaround this issue. As our applications get more and more dynamic it is quite a common scenario to have links inside content that is loaded via AJAX. Could you please look into my provided 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;
});

Or maybe provide a better solution. The point is that links having the pw-panel class should open in a panel even if they have been added to the DOM after document.ready

Thx!

[jmartsch]

Bernhard's fix works fine. Also support for ES6 promises (jQuery's $.when method) is in every evergreen browser, see https://caniuse.com/?search=promises. So I think it would be fine to add this.

[BernhardBaumrock]

Thx for backing this up @jmartsch