Issues with panel tab

[Toutouwai]

Short description of the issue

I found a couple of issues with the tab that's displayed on the side of an open panel.

I'm following the documentation in /wire/modules/Jquery/JqueryUI/panel.js

For testing purposes I'm adding a link to ProcessPageEdit that opens a panel showing the page list:

$wire->addHookAfter('ProcessPageEdit::buildFormContent', function(HookEvent $event) {
	$wrapper = $event->return;
	$wrapper->appendMarkup = "<a class='pw-panel' href='/processwire/page/?modal=panel&pw_panel=1'>Open panel</a>";
});

If I add a data-tab-text='My panel' attribute the text is not visible in the tab:

If I add a data-tab-icon='list-ul' attribute the tab icon is unexpectedly rotated 90 degrees:

To get the rotation corrected it seems I have to also add a data-tab-text attribute but it's not clear why that should be needed if I'm choosing to display an icon rather than text.

Also, is there supposed to be a way to not show a tab on the panel? It would be good if there was because the tab seems like it's unnecessary in many cases but data-tab-text='' and data-tab-icon='' just results in a default tab being shown, again with the icon rotated incorrectly.

Setup/Environment

• ProcessWire version: 3.0.231

[ryancramerdesign]

@Toutouwai It looks like support for this was never finished in AdminThemeUikit. I have just added it. Thanks!

[Toutouwai]

Thanks @ryancramerdesign. I think it needs a bit more tweaking though.

The first documented example in /wire/modules/Jquery/JqueryUI/panel.js is this:

<a class='pw-panel' href='/path/'>Click to open panel</a>

But when the data-tab-text and data-tab-icon are not present then a default icon is shown but it doesn't look right.

$wire->addHookAfter('ProcessPageEdit::buildFormContent', function(HookEvent $event) {
    $wrapper = $event->return;
    $wrapper->appendMarkup = "<a class='pw-panel' href='/processwire/page/?modal=panel&pw_panel=1'>Open panel</a>";
});

And any thoughts on having a way to specify that no tab should be shown? Because the tab doesn't actually do anything - you can simply click anywhere off the panel to close the panel.

Maybe this could be signalled by setting empty data attributes? data-tab-text='' or data-tab-icon='' or both?

[BernhardBaumrock]

@ryancramerdesign while you are working on panels could you please also have a look at this old issue that still exists and is a huge problem for my RockGrid module? https://github.com/processwire/processwire-requests/issues/176

The problem is that panels and modals are initialized on document.ready and that does not work on ajax loaded content inside my RockGrid (its a tabulator.info table that loads all rows via ajax).

I've tried what happens on ajax loaded inputfields with a slightly modified version of @Toutouwai 's code:

$wire->addHookAfter('ProcessPageEdit::buildFormContent', function(HookEvent $event) {
    $wrapper = $event->return;
    $f = $wrapper->get('title');
    $f->collapsed = Inputfield::collapsedYesAjax;
    $f->appendMarkup = "<a class='pw-panel' href='/processwire/page/?modal=panel&pw_panel=1'>Open panel</a>";
});

And surprise - it worked! Seems that this panel link get's initialised on mouseover! Not sure if that would work on mobile?

A workaround for panels is to trigger pwPanels.init() whenever the grid draws new rows, but I'm not sure if I'd still have to take care of not initialising links more than once? And unfortunately I didn't find a way how I would do that for modal links?

It would be great if you could find a way to properly initialise panels and modals no matter if they exist in the dom on page load or not.

Another issue that I have is this one from 2019: https://github.com/processwire/processwire-issues/issues/975

The problem here is that I don't know which panel was closed so I can't tell which rows I have to reload. So far I always found a workaround, but that's also a problem for ALFRED (the frontend editor of RockFrontend and RockPageBuilder). It would be really, really awesome if panels and modals had their own api (similar to the refactoring of inputfields) where we can do things like this:

pwPanels.open('/some/url', {reload: true});
pwPanels.on('close', '.my-table-cell', (e) => {
    // get table row and reload this row
}

// expose what happened inside the panel
pwModals.on('close', (e) => {
    if(!e.pageSaved) return;
    // reload page to show new content
});

At the moment I reload the page on every close of the modal, which works but is not ideal.

Thx a lot and sorry for hijacking this issue :) Just wanted to make you aware that they are still an issue for me and we can discuss things further there!