Front-End Edit Lightbox (FEEL) for ProcessWire

[bora]

Just installed and tried the dev branch and it works really good. Thank you.

I really think it should be made to a module.

By the way, I added another helper function to use while setting the FEEL js variable. So both local and live server works even if their relative paths are different.  But I'm not use if this works with all cases.

PHP:

function feelPath()
{
    //remove doc root from full wire path for relative wire path
    $wireRelativePath = str_replace($_SERVER['DOCUMENT_ROOT'],'',wire('config')->paths->wire);
    return $wireRelativePath;
}

JS:

  var FEEL = {
      wirePath: "<?=feelPath();?>"
  };

[tpr]

Thanks for the snippet. If FEEL will be made into a module then something like this is required.

I'm still unsure whether a module would make things much easier. But it would improve its popularity for sure.

Just committed some updates (dev) so now individual edit links can have custom options too.

[Juergen]

Setting and delete tab is hidden. Is there a way to activate these tabs in the modal if necessary?

Best regards

SOLVED:

Use the options to declare the tabs which should be hidden

selectorsToHide: list of selectors to hide elements from admin (for example some tabs)

[tpr]

Yep, that's it. They are set to hidden by default.

[Juergen]

I have a problem targeting the children tab.

Here is my code of the edit link:

if($page->children) {
 if (function_exists("feel")) {
    echo feel($page, $editpage, "relative button invert", 0, "Inputfield_ProcessPageEditChildren",
        array(
            "enableTemplateEdit" => false,
            "selectorsToHide" => "",
            "fieldHighlightStyle" => "outline: 4px double #ddd;",            
            "popupSettings" => array(
                "closeOnBgClick" => true
            )
        )
    );
}
}

Inputfield_ProcessPageEditChildren is the id of the children tab, but it always opens the first tab.

[tpr]

Inputfield_ProcessPageEditChildren is the id of the children tab, but it always opens the first tab.

Are you sure? It's "ProcessPageEditChildren" here and works fine.

(But there's an unrelated bug: tabs can be loaded even they are hidden, will fix it)

[Juergen]

You are right. I have tried it with "ProcessPageEditChildren" first and it didnt work. Then I have tried "Inputfield_ProcessPageEditChildren" and were also not successfull. Now it works - why it didnt work before - I dont know.

Best regards

[Juergen]

@tpr

Have you ever tried to edit pages in the children tab? I have tried it, but the modal window will be closed after clicking the edit link of a child page in the children tab.

[tpr]

I guess I haven't, and as I see there's no easy way to make that work, unless setting "closeOnSave" to false.

Perhaps I could come up with something but I don't see any general solution for that atm.

Btw, the target tab needs the href attribute instead of the id, just figured out myself

[tpr]

Actually it could work but it would be a mess. The lightbox would navigate to another page to edit and as there are no menus and Back button, one would really get out of control.

The lightbox is opened in a "modal" mode and that is for a reason, FEEL does not try to bring the full admin to the frontend. However, there will be callback functions (js) in the next update where you can remove the "&modal=1" part of the iframe src if you wish.

[Juergen]

Thanks tpr!

A workaround is to add a pagetable field to the template. There you can add/edit/remove children if you want and its not necessary to let the children tab be visible. Disadvantage: it opens the child in another modal (modal in modal) - but it works.

Best regards

[tpr]

It's a clever idea, thanks! I will add this to the upcoming FAQ section of the readme.

As I wrote, closeOnSave=false also let you edit the Children, but the "modal in modal" is better because the parent page remains in sight.

[tpr]

In the past few days I rewrote FEEL as a module. I can say that it's more usable this way, and will be even more if it gets to the modules directory.

Module settings makes it easier to adjust global options. The ability to override options on individual edit link was also kept.

There may be some quirks in the module version but it's quite stable as it is. I tested it on 3 sites (single-lang and multilang) and seems to work fine.

Notable changes:

• rewritten as a module, usage mode changed to $page->feel()
• array format for options (options can be accessed by their names)
• new option: "Enable module" - toggle module on/off globally
• new option: confirm iframe close if edit form has changed (only on Pages, uses the built-in admin notification message)
• fixed: wire("user")->language only available on multi-lang setups
• JS callback functions (still in WiP status)
• new: override options on individual edit links

The new github repo is here:

https://github.com/rolandtoth/FrontEndEditLightbox

I'll keep the previous repo for historical reasons, with a big "unmaintaned" warning.

[matjazp]

Great to see FEEL as a module, thank you.

- FrontEndEditLightbox.css.min is missing.

- Maybe you should add the checkbox (unchecked by default) in the module config to add JqueryCore.js in case someone is not yet using it?

- This is not working (should be name instead of text):

echo $page->feel("text" => "Edit page");

- I would like to have popup opened 100% width. How can I override:

.mfp-feel .mfp-content {
    background: #fff;
    max-width: 90%;
    max-height: 90%;
}

- How can I style edit button other than using positional classes? Ok, I can use exesting css and ad my styling, but would be nice if you could provide a simple textarea in config, where I could enter css?

- Idea: how about automatically adding feel button to pages? 

[tpr]

Thanks for the report! Version 1.1.1 is uploaded with changes below.

FrontEndEditLightbox.css.min is missing

Yep, my IDE has fooled me. Anyways, I think it would be better to use the unminified CSS, so I made that the default.

Maybe you should add the checkbox (unchecked by default) in the module config to add JqueryCore.js in case someone is not yet using it?

I'll think about how to implement it.

This is not working (should be name instead of text):

That was one of the latest modifications, somehow it didn't made through. So "text" is the new key for the edit link text ("name" could be confused with the "name" html attribute).

Custom CSS styling: yes, you can override in your own CSS file. I'll add a textarea later for such custom styles (only one).

Idea: how about automatically adding feel button to pages?

It could work if everyone would use only 1 PW page per website page. However, that's not the case so I don't think it's doable (think about 1 page portfolio sites).

[Juergen]

Maybe I have done something wrong, but the edit link will not be displayed, because it is set to "display:none!important" inside the added <feel>-tag.

Jquery is loaded. Also the other files (modal.js and fredi.js) are loaded as well.

Link is included in the template via

echo $page->feel(array(
    "text" => "Edit this page",
    "class" => "fixed left"
    )
);

Are there further steps required to make the links appear?

Best regards

[tpr]

No, that's all you need to do. Do you have "FrontEndEditLightbox.js" added to the site by the module? (check the page source)

Using "display: none" is intentional, just to make sure it won't gets visible by the site's CSS. The above mentioned JS should remove the style attribute.

The module adds its JS file to the bottom of the page, right before the closing "</body>" tag. The first thing I can think of is that you don't have "</body>", and the second is cache

[Juergen]

Yes this file is also added at the end

en m\u00f6chten?"}</script><script src="/site/modules/FrontEndEditLightbox/FrontEndEditLightbox.js"></script></body></html>

[tpr]

No idea then. Do you by any chance added a FEEL JS callback?

What you could do is add "console.log"-s to the FrontEndEditLightbox.js at various places to see where it chokes. Line 69 is where the style attribute gets removed, try logging before that.

If you remove display: none from the element, does it work fine afterwards?

[Juergen]

I will try that tomorrow and post the result here.

Thanks for your effort

Best regards

[Juergen]

Maybe there was an JS conflict that makes FEEL working not properly. I have deleted some JS files that I dont need anymore and now FEEL works as expected.

[tpr]

Thanks, good to know. It were even better to know the cause though

I have some updates queued up but no time to look at them in detail

[Juergen]

I dont know which JS causes FEEL not to work properly. I deleted some JS which works with onload property and my aim was not to make FEEL work - it was a positive side effect. So I didnt take care of the JS names and functions - I only deleted some of them.

[matjash]

It doesn't work for me:

JqueryMagnific.js:4 Uncaught TypeError: e is not a function(anonymous function) @ JqueryMagnific.js:4(anonymous function) @ JqueryMagnific.js:4

FrontEndEditLightbox.js:77 Uncaught TypeError: Cannot read property 'defaults' of undefined

 

I tried to disable other scripts but no success so far.

 

Javascript is loaded before the end of body tag.

 

I am using jquery-2.1.0.min.js

 

I found the error. I had all the script added at the body tag. But the JqueryMagnific gets added at the head, so it was inserted before jQuery.

[tpr]

v1.1.5 is up with a handful of fixes and some new features. Thanks for all who reported/suggested/helped in any ways.

Changelog