Admin In Modal

[MarkE]

I thought I would share this as I am finding it increasingly useful and am often using it to replace the standard PW modal. It allows display and customisation of admin page in front end as well as back end via a modal.

In the modules library at https://processwire.com/modules/admin-in-modal/ . Also here https://github.com/MetaTunes/AdminInModal

This module provides a Page hook method ($page->aim($array)) for front-end use and a similar Inputfield hook (for back-end use) to render a link to a lightbox modal containing an admin page.

Optionally, class styling can be passed, otherwise default button styling is supplied.

Full list of options and defaults for the array is :

•     'href' => null, // the url for the linked page (including any required GET params)
•     'text' => '##',  // the text that will appear in the link
•     'class' => "uk-button uk-button-primary", // any suitable styling for an <a> tag
•     'width' => '90%', // size for iframe
•     'height' => '95%',
•     'header-text' => 'Save required changes before closing -->', // Text to appear above top left of modal
•     'save-head-button' => '1', // Adds a save button at the top of the modal. Set to '0' to omit.
•     'suppress-notices' => 'messages', // e.g. null/[]: no suppression, 'messages': suppress messages, 'warnings messages': suppress warnings & messages, 'errors': suppress errors
•     'close-button' => '1', // set to '0' to remove close button (but you'd better be sure you know how the modal will be closed!)
•     'redirect' => '.', // url to redirect to after closing the modal - default is to reload the current page (use redirect => '' to suppress)

(From v0.3.0, these defaults can be configured in the module settings).

For front-end use, the lightbox will only be rendered if the page is editable by the current user.

Configure editability of the page by calling a hook after User::hasPagePermission

The lightbox is provided by the Magnific popup, which is in the PW core.

Although I have used it quite a lot, I cannot say that it has been fully tested, so is alpha at this stage and should be used with care. It is the user's responsibility to check that it suits their needs.
Because it allows access to the admin back-end, particular care should be taken to restrict page-edit access.

[bernhard]

Thx for sharing. Does it have a feature to auto-close the modal after page save (without errors) and then reload the page?

[MarkE]

8 minutes ago, bernhard said:

Does it have a feature to auto-close the modal after page save

No. You have to click the close box. It will reload the launching page (configurable). I could look at adding that. 

[MarkE]

Until it is in the modules library, you can get it here https://github.com/MetaTunes/AdminInModal

 

EDIT: Now in the library, Also I have released v0.3.0 which allows the defaults to be configurable.

Edited July 20 by MarkE

[zoeck]

Does the module actually do the same thing as the ‘FEEL module’ or are there big differences? It reads relatively the same to me.

[MarkE]

8 minutes ago, zoeck said:

Does the module actually do the same thing as the ‘FEEL module’ or are there big differences?

I wrote it as an alternative to FEEL, which I had problems with - in particular it didn't work properly on a iPad. It has additional functionality. It can be used in the back end as a replacement for pw-modal, as well as in the front end and has a range of configurable options.

v0.3.3 includes an ability to reload the host page after closing, with the addition of a specified hash target. I am using this, for example, to scroll to the location of a newly-added block (aka page) within a display page (built with my home-made page builder). So for example (in Latte), this code in the host page/block:

    {var $motifResourceItemId = $templates->get('name=Motif-resource-item')->id}
    {var $addPage =  $urls->admin . "page/add/?parent_id=$page->id&template_id=$motifResourceItemId?modal=1"}    

	{* Use the AdminInModal module if installed as it reloads on close *}
    {var $ids = $pages->findIDs("id>0")} {* Get the biggest ID so that we can anticipate the next ID with the redirect*}
    {if ProcessWire\wire()->modules->isInstalled('AdminInModal')}
        {$page->aim([
        'href' => $addPage,
        'text' => "Add new resource item",
        'save-head-button' => 0,
        'header-text' => "Publish (at bottom of modal) to add the new resource item, or save it as a draft before closing with x ------>",
        'class' => "bg-[var(--motif-links)] text-white p-3 text-l uppercase w-fit h-fit",
        'redirect' => '#resource-item' . array_pop($ids) + 1,
        ])|noescape}
    {else}
        <a class="bg-[var(--motif-links)] text-white p-3 text-l uppercase w-fit h-fit pw-modal"  href="{$addPage}">Add new resource item</a>
    {/if}

with this js to open a containing <details> element and scroll to the target:

// Purpose: Open the target details element when the page is loaded with a hash.
// Source: https://stackoverflow.com/questions/37033406/automatically-open-details-element-on-id-call#37033774/
document.addEventListener('DOMContentLoaded', function() {
    function openTarget() {
        // console.log('openTarget');
        const hash = location.hash.substring(1);
        // console.log('Hash:', hash); // Debugging line
        if (hash) {
            const target = document.getElementById(hash);
            // console.log('Target:', target); // Debugging line
            if (target) {
                const details = target.closest('details');
                // console.log('Details:', details); // Debugging line
                if (details) {
                    details.open = true;
                    // console.log('Details opened'); // Debugging line
                    // Scroll the target element into view as it does not always seem to happen automatically
                    requestAnimationFrame(() => {
                        target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                    });
                }
            }
        }
    }

    openTarget(); // onload
    window.addEventListener('hashchange', openTarget);
});

 

[MarkE]

32 minutes ago, MarkE said:

It has additional functionality

I should also say that FEEL has some additional features, such as autoclose on save, which I am looking into.

[szabesz]

On 7/31/2024 at 11:36 AM, zoeck said:

the ‘FEEL module’

FYI: @tpr's modules can/should be considered abandoned.

[MarkE]

On 7/14/2024 at 11:30 AM, bernhard said:

Does it have a feature to auto-close the modal after page save (without errors) and then reload the page?

Hi @bernhard. I have now a 'close on save' feature as an option.

    *   'close-on-save' => 'no',  // "no": no close-on-save, "":  allow, but any error, warning or message will prevent close-on-save,
                                  // "messages": allow close if there are only messages, "errors warnings messages": always close regardless of notices
                                  // If "add" is included in the list, then the popup will close on save if it is a page add operation, otherwise it will remain open to edit  
   

There was already an option to reload/redirect the page on close:

    *   'redirect' => '.', // url to redirect to after closing the modal - default is to reload the current page (use redirect => '' to suppress). 
                              Use '#divid' to scroll to a specific div on current page

All defaults can be changed in the module config.