Front-End Edit Lightbox (FEEL) for ProcessWire

[tpr]

Sorry for the trouble. At first I don't know what could be the issue. My first thought was that you have PW 2.7 but I just tried it on a 2.6.1 and it worked, though I had to manually copy "JqueryMagnific.min.js" into "/wire/modules/Jquery/JqueryMagnific/" directory, it seems that older versions doesn't have the minified version. I guess this wasn't the issue there as the module adds an error to the console that JqueryMagnific.min.js is unavailable.

On second look I noticed that you have "FrontEndEditLightbox-master" as the directory name. When I use this name I also got an error, unfortunately there's nothing in the logs. Could you try removing the "-master" part?

What PHP version do you have?

Edit: please don't forget to refresh modules by visiting Modules->Refresh.

[hellomoto]

5.6 

[tpr]

I think I've fixed the issue, try v1.3.0. The error was present only if there were no parameters passed to feel(). Unfortunately on a site where I tried to reproduce I have already fixed this months before but haven't committed. The new version also uses the non-minified MagnificPopup that is available in earlier PW installs too (<2.7 I think).

[tpr]

v131 is uploaded with a fix for a bug prevented the default edit link text to be saved (spotted by @matjazp).

[tpr]

v1.3.2 is uploaded with a tiny but useful addition: middle-click on the edit link opens the admin in a new window. This can be handy if you want to see the "big picture" or eg. when you have AdminOnSteroids' fixed CKE toolbar ON and the CKE field is too high.

We have also made the initial steps towards an "Add new" button so it will appear in a future release.

[tpr]

v134 is up with a new "fields" feature: now you can specify individual fields (comma separated) to load in the lightbox instead of the full admin. Thanks for @matjazp for this request and for the help. He has also found a few bugs that were fixed.

Example: load title and body fields only:

echo $page->feel(array(
    "text" => "Edit title and body fields",
    "fields" => "title,body"
    )
);

 

[lokomotivan]

If anyone still having an issue with edit link is not showing up, the reason is because module is loading "FrontEndEditLightbox.js" from "modules/FrontEndEditLightbox" folder, by default folder name is "FrontEndEditLightbox-master", so just rename module folder (remove "-master" part) and it works like a charm.

Thanks for the module tpr

 

[adrian]

@lokomotivan - you should never install modules with the "-master" on the folder name. The easiest way to install is to use the ClassName option, or URL, or zip links. This is way easier than manually extracting and copying to the modules folder and it takes care of this for you.

[lokomotivan]

1 minute ago, adrian said:

@lokomotivan - you should never install modules with the "-master" on the folder name. The easiest way to install is to use the ClassName option, or URL, or zip links. This is way easier than manually extracting and copying to the modules folder and it takes care of this for you.

 

Thanks, i guess i got use to just manually unzip it to modules folder :). There's probably ppl like me there so thought that info could be useful

[CarloC]

Hi everyone,
I'm using FEEL in a project of mine and I love its features! (Just like I love Processwire).

But I'm having a problem with the "fields" feature. I'm using exactly the code written in the example in the module page on processwire.com, but it doesn't work and load every fields of the page.

this is the code I'm using ($post is the page i want to edit):

<?php
echo "{$post->notes}<br />";
if($user->isLoggedin() && $user->hasRole('editor')) {
echo $post->feel(array("text" => "Modifica note", "fields" => "notes,body"));
}
?>

'notes' is a simple textarea custom field.

Do you have an idea of what's wrong?

[tpr]

At first sight everythings is OK with your code. Could you share the URL of the lightbox iframe? (only the url parameters are important)

[tpr]

@CarloC Your code runs fine here. Are you sure you have the latest version of FEEL? This feature is only available since version 1.3.4.

[CarloC]

Thank you @tpr for your answer.
yes i've the latest module version installed, the 1.3.5

At the moment I'm not using the feature, but perhaps I'll do that soon to retest.

Now I'm upgrading my project to pw 3 form 2.7 and having some issues with repeater fields in general and FEEL that now doesn't respect the visibility options that i choose for each field.

[CarloC]

@tpr Here is the iframe src url: src="/XXX/pw/page/edit/?id=1309&modal=1"

and this is the code:

if($user->isLoggedin() && $user->hasRole('editor')) {
    echo $post->feel(array("text" => "Modifica note", "fields" => "notes,body"));
}

Do you see something wrong?

This is appening in PW 2.7.

[tpr]

The iframe src should contain the fields too, not sure why not. But I guess the main problem is PW 2.7, perhaps loading fields only is not supported there.

[CarloC]

@tpr I know why this is not working.

 

Some time ago I commented the following lines of code in the "FrontEndEditLightbox.module" file:
 

if (!empty($settings['fields'])) {

            $fieldsArray = explode(',', $settings['fields']);

            
            foreach ($fieldsArray as $key => $fieldName) {
                if (!$page->hasField($fieldName)) {
                    unset($fieldsArray[$key]);
                }
            }

            foreach ($fieldsArray as $key => $fieldName) {
                
                $flds = $page->getFields;
                foreach ($flds as $key => $fld) {
                    if ($fld != $fieldName) {
                        unset($fieldsArray[$key]);
                    }
                }
            }
            if (!empty($fieldsArray)) {
                $fields = '&fields=' . implode(',', $fieldsArray);
            }
        }

This is the part of the code that deals with the fields feature, but I remembered why I hidden those lines.

If I leave those lines uncommented I get the following error:

Error: Exception: Method Page::hasField does not exist or is not callable in this context (in /home/albicocc/public_html/socialhub/wire/core/Wire.php line 358)

#0 [internal function]: Wire->___callUnknown('hasField', Array)
#1 /home/albicocc/public_html/socialhub/wire/core/Wire.php(398): call_user_func_array(Array, Array)
#2 /home/albicocc/public_html/socialhub/wire/core/Wire.php(333): Wire->runHooks('callUnknown', Array)
#3 /home/albicocc/public_html/socialhub/wire/core/Wire.php(337): Wire->__call('callUnknown', Array)
#4 /home/albicocc/public_html/socialhub/wire/core/Wire.php(337): Page->callUnknown('hasField', Array)
#5 /home/albicocc/public_html/socialhub/site/modules/FrontEndEditLightbox/FrontEndEditLightbox.module(353): Wire->__call('hasField', Array)
#6 /home/albicocc/public_html/socialhub/site/modules/FrontEndEditLightbox/FrontEndEditLightbox.module(353): Page->hasField('notes')
#7 /home/albicocc/public_html/socialhub/wire/core/Wire.php(459): FrontEndEditLightbox->addMethod(Object(HookEvent))
#8 /home/albic

This error message was shown because you are logged in as a Superuser. Error has been logged.

[tpr]

Perhaps it's $page->template->hasField()? Could you try?

[CarloC]

Great! thank you @tpr, now it works!

I hope my case will be useful to you and other developers

Have a good day

 

[tpr]

Thanks, I'll update the module soon.

[tpr]

Version 1.3.7 is uploaded. Big thanks to @matjazp, this update is largely based on his excellent work.

Changelog

• skip unnecessary redirect on modal save (by matjazp)
• new "page-add" action to add child (requested/contributed by matjazp)
• use monospace font in module settings field styleOverrides (by matjazp)
• new setting: disable loading FEEL CSS (requested by matjazp)
• remove system templates from module settings
• JavaScript callback updates and documentation
• several minor tweaks

[Noel Boss]

On 5/26/2018 at 4:21 PM, tpr said:

• new setting: disable loading FEEL CSS (requested by matjazp)
•  

The latest changes to the CSS broke my edit buttons ([data-feel]). Now I know, I could just override them, (what I technically do) but since these are of a higher css-specify I would need to  make the css selectors stronger. Your CSS even includes an !important ?

Would it be possible to disable button styling but keep the Lightbox styles separate? Or, even better, in my view, the edit button should even come without any styles from the module, only the lightbox should. Because the edit buttons reside in a design, the lightbox gets added, is kind of like the backend. The edit button as a link is enough – if someone want's to style it, okay, but lets leave this to the author. IMHO this is the process-wire way. Style whats necessary but leave everything frontend related to the author.

What do you think?

Great module BTW, I like it alot!

[matjazp]

If you disable loading FEEL css, then you have unstyled <a> just like you want it, no need to override anything. That's why I requested this option, so I have full control of button styles. And as a bonus, you also have control of lightbox appearance ...

[matjazp]

Hi, @tpr As you may already know, we have Restore tab in page edit, so selectors to hide should be updated with '#_ProcessPageEditRestore, #ProcessPageEditRestore, ' (in .module and with #ProcessPageEditRestore in .js). Also, where in the source are #_WireTabDelete and #WireTabDelete? (I wrote you a PM but I guess you didn't get a notice...)

[Marty Walker]

Thank you for this module, it's very easy to implement. I was wondering if there's a chance this could be tweaked to work with Horst's CroppableImage3 (https://modules.processwire.com/modules/croppable-image3/). When I click a crop to re-edit I get pushed back to the page tree.

[tpr]

Does it also happen if you set closeOnSave to false?