Modal pop-up for page editing - problem with dynamically generated page tree

[Rob]

I am trying to write a module that adds a link to the page listing to allow for editing a page in a modal pop-up window rather than loading a new page for the edit.  The idea is that if I use a nested data-page structure to get around the inability to have nested repeaters then it would be nice to be a faster workflow to add/edit/save those child data-pages without leaving the site tree.

I had a look for existing modules/settings but couldn't find anything.

So next up, I'm thinking I can make the edit page appear in a fancybox modal. The problem I've run into is that I can't work out how to "attach" the fancybox to links that are being generated on-the-fly using AJAX which is how I believe the page tree is rendered.  So at the "page ready" state the links don't yet exist so the fancybox attach code doesn't do anything.

Can anyone suggest a way around this or point me in the direction of an existing module or code that can help?

Thanks!

[DaveP]

It's already been done - http://modules.processwire.com/modules/fredi/ 

[Rob]

It's already been done - http://modules.processwire.com/modules/fredi/ 

Thanks for your help, but I'm not sure that's what I'm after. I don't want to add edit links to my generated pages, I want to add an extra edit link to the page tree in the back-end so that I can click "modal edit" and have the regular page editor load but in a modal window so I don't have to leave the page tree.

This may well gives some pointers though, so thanks.

[Macrura]

The datatable module also brings up the editor in a lightbox, not sure if that would help though since it is generating it's own page list in a table

[Wanze]

Hi Rob,

I think you may be looking for this:

http://processwire.com/talk/topic/2380-fancy-admin-mode/

Made by somantastic Soma

[Soma]

You use delegate events... in jQuery this is done now with .on() previous with .live()

$('.container').on('click', 'a.editlink', function(){
    $link = $(this); ...
});

[Rob]

Thanks all.

I had the delegation+selectors correct, it's just that I needed to trigger('click') the fancybox manually.

Soma - learned a lot from examining your module code so thanks! I'll probably just use your module because it is ready-to-go, but always good to learn more about the plugin API but also JQuery in particular as it's one of my weak spots.

[ryan]

Any reason FancyAdmin isn't in the modules directory? Just re-watched the video, very nice.

[mr-fan]

Hi there i open this old topic for a question....i'm trying for a few hours to get simple add a class and the modal=1 option on the pagelisttree....and i don't get it.

i've searched - studied somas module....

all i've got is this

1. I have a Custom Admin Page (djogos addon) with renders a PageListTree with a specific ParentPage and a template file under /site/templates/myadminpage.php like: (works great)

$formImages = $this->modules->get('InputfieldForm'); // prep the form

$wrapperImages = new InputfieldWrapper; // a wrapper
$wrapperImages->attr('value', '<h2>Bilder</h2>');

$i = $this->modules->get('ProcessPageList'); // get the pagelist process
$i->set('id', 1015); // setting the parent page

$pageTreeImages = new InputfieldMarkup; // the placeholder
$pageTreeImages->value = $i->execute(); // fill the InputfieldMarkup form field...

$wrapperImages->add($pageTreeImages); // put inside the wrapper...
$formImages->append($wrapperImages); // append the wrapper

echo $formImages->render();

2. I'm calling the Core scripts for the magnific lightbox like (works easy and great)

$this->modules->get('JqueryMagnific');

3. i'll try to add simple modal=1 and a lightbox class to the a tag with this jquery script

$(document).ready(function() {

    //add trigger class and modal setup
    $('.PageListActionEdit a').each(function(){
        $(this).addClass("lb-edit").attr("href",$(this).attr('href')+"&modal=1");
    });

    //setup lightbox
    $('.lb-edit').magnificPopup({
        type: 'iframe',
        disableOn: 0
    });
});

so it seems to work only in the first level of the PageListTree....not in the second levels!!??

i don't get it - searched for :visible selector tried some other selectors to get it but no success...

maybe somebody knows why the hidden pagelists don't get it - are they build via ajax calls and i don't get this a href's to change?

i'm sadly not so skilled with jquery that i figure it out.

regards mr-fan

[Martijn Geerts]

so it seems to work only in the first level of the PageListTree....not in the second levels!!??

 

That's true, because other levels are not yet in the DOM. You have to wait for the AJAX complete event to run your scripts.

// maybe this is what you're searching
$(document).ajaxComplete(function() { console.log("Now, you can do something") });

[mr-fan]

Great BIG Thankyou!!!!

I tried so much - since i thought it should be an easy way here....it works like a charm.

I will present it on a casestudy - i've done my first project with a Adminpage for images (manage images as pages central) and since i don't wanna fall back to the /page/ while editing i search for some fancy way with a lightbox it works as expected.

here is the complete code for a simple template that runs with CustomAdminPage

http://modules.processwire.com/modules/process-admin-custom-pages/

<?php
// Bilderübersicht Custom Admin Page
?>
<style type="text/css" media="screen">
    /**
     * larget magnific popup
     */
    .mfp-iframe-holder .mfp-content {
        max-width: 1200px!important;
    }
</style>
<script type="text/javascript">
$(document).ajaxComplete(function() {

        //add trigger class and modal setup
        $('.PageListActionEdit a').each(function(){
            $(this).addClass("lb-edit").attr("href",$(this).attr('href')+"&modal=1");
        });

        $('.PageListActionNew a').each(function(){
            $(this).addClass("lb-edit").attr("href",$(this).attr('href')+"&modal=1");
        });

        //setup lightbox
        $('.lb-edit').magnificPopup({
            type: 'iframe',
            disableOn: 0
        });
});

</script>

<?php

//get Magnific css and js
$this->modules->get('JqueryMagnific');

//render PageListtree with setting the parent page
$formImages = $this->modules->get('InputfieldForm'); // prep the form
$wrapperImages = new InputfieldWrapper; // a wrapper
$wrapperImages->attr('value', '<h2>Bilder</h2>');
$i = $this->modules->get('ProcessPageList'); // get the pagelist process
$i->set('id', 1015); // setting the parent page
$pageTreeImages = new InputfieldMarkup; // the placeholder
$pageTreeImages->value = $i->execute(); // fill the InputfieldMarkup form field...
$wrapperImages->add($pageTreeImages); // put inside the wrapper...
$formImages->append($wrapperImages); // append the wrapper

echo $formImages->render();

So i've used the PageListTree with a preselected parent and the edit function works within the modal.....

It's not my threat so i couldn't vote for best answer!

Best Regards

[adrian]

@Rob - going back to your original request - this is pretty much exactly the reason I built Batch Child Editor.

It might suit your purposes better than a generic modal edit button.