tpr

Front-End Edit Lightbox (FEEL) for ProcessWire

Recommended Posts

Update:

Latest release and documentation is available here:

https://github.com/rolandtoth/FrontEndEditLightbox

Modules directory:

http://modules.processwire.com/modules/front-end-edit-lightbox/

-----------------------------------------------

Just implemented my front-end edit feature, minimal style :)

I know there's many other solution to this but I tried making something much simpler to implement. The result is one JavaScript snippet - no css, external js dependency, module, etc. It uses the admin's Magnific Popup because it's always at hand and works just fine.

The page automatically reloads on closing the lightbox, but only if the page was saved (via localStorage).

You can also list jQuery selectors to hide items in the admin (see "selectorsToHide").

Usage

Add the edit link to your template file (see code below) and copy the following to your main .js file.

post-3156-0-50955200-1437311072_thumb.gi

Edited by tpr
  • Like 11
  • Thanks 1

Share this post


Link to post
Share on other sites

Could the script be modified so that popup (iframe) would close itself after save ONLY if there are no errors? You are hiding tabs with javascript and that can be seen on the video...

Share this post


Link to post
Share on other sites

Could the script be modified so that popup (iframe) would close itself after save ONLY if there are no errors?

So clicking on Save would close the lightbox immediately if there are no errors?

Actually I managed to solve it though it's a bit slow - the lightbox still have to load but it's hidden, and closed automatially if there are no errors.

The problem is that Chrome throws an alert "Network error, please try again" with no error anywhere. Works fine in FF/IE though.

You are hiding tabs with javascript and that can be seen on the video...

Yes, because the JS has to wait until the iframe is loaded, and then apply remove(). I was able to mask it but first I had to solve  the Chrome issue above.

Share this post


Link to post
Share on other sites

Ok, polished this a bit and got rid of the Chrome error - unfortunately only by using setTimeout so it's not perfect.

There are some settings to tweak.

Update: see latest release and info in first post.

post-3156-0-85699800-1437337131_thumb.gi

  • Like 2

Share this post


Link to post
Share on other sites

Just added the latest release with some fixes and optimizations, see the first post.

Share this post


Link to post
Share on other sites

This is really slick tpr - good work. Did you mean to leave both .zip files up though? Seems like the one two posts up could be deleted now (happy to do it for you - just wanted to check if it could be deleted first).

Share this post


Link to post
Share on other sites

i removed the previous zip from the post. I think posts themself could remain in place. Thanks!

Share this post


Link to post
Share on other sites

Looking good! I also disabled/hid the Setting tab. You should mention in docs that jquery is needed. My development version is not on root so I had to adjust the path to lightbox css/js.

Share this post


Link to post
Share on other sites

hi tpr, what's the difference to fredi? i know you know fredi and i'm sure there's a reason you did something on your own :)

Share this post


Link to post
Share on other sites

No, I did not know fredi until the past 10 minutes :) Of course I've heard about it but never tried.

Mine (petname FEEL) is a very simple addition - only a JavaScript file (or snippet) and a link markup is needed. I was using a similar solutions in my previous projects and finally decided to make it public, that's all.

The other answer is "because I had to check if it's possible" :)

It is simple so it doesn't have many settings unlike modules like Fredi has (or will have).

If it fits your (or your client's) needs, then use it, otherwise look for more advanced frontend editors.

  • Like 2

Share this post


Link to post
Share on other sites

Looking good! I also disabled/hid the Setting tab. You should mention in docs that jquery is needed. My development version is not on root so I had to adjust the path to lightbox css/js.

I will add jQuery requirement to the description, thanks!

Is there a reliable way to check with JavaScript if the current user can edit the current page?

If there would be, then the link markup could be also handled by JS.

Share this post


Link to post
Share on other sites

hi tpr, what's the difference to fredi? i know you know fredi and i'm sure there's a reason you did something on your own :)

fredi had problems with fields that are not full width and (as far as I remember) it closes the modal even when there are errors (eg. required fields not entered). I think new version of fredi is using "native page editing". As I can see on the video at the provided link, your version of edit-shortcuts also requires manual page reload?

  • Like 1

Share this post


Link to post
Share on other sites

fredi had problems with fields that are not full width and (as far as I remember) it closes the modal even when there are errors (eg. required fields not entered). I think new version of fredi is using "native page editing". As I can see on the video at the provided link, your version of edit-shortcuts also requires manual page reload?

no you could easily adjust the lightbox to reload the page on close. i didn't try to close it automatically if there are no errors - i'm not a js guru :)

Share this post


Link to post
Share on other sites

As I can see on the video at the provided link, your version of edit-shortcuts also requires manual page reload?

Not sure I get it right, but once you click on the "Save" button in the lightboxed admin, after closing the lightbox the underlying page will be reloaded.

(actually hitting "Enter" is enough instead of "Save").

If you don't click on the "Save" button then you can close the lightbox and the page won't reload.

Share this post


Link to post
Share on other sites

tpr, I was commenting BernhardB's video, not yours. 

Is there a reliable way to check with JavaScript if the current user can edit the current page?

When in admin, there is javascript config variable and config.url.modules points to core modules directory so that could be used in FEEL.lightboxJSpath/lightboxCSSpath? But config is defined only when page is loaded and you need the path before that...

Share this post


Link to post
Share on other sites

I wanted to know whether I could add the Edit link wit JS only, so no markup would needed.

That would make FEEL really easy to add, only including the script. Perhaps there's an Ajax call to figure this out, or the cookie "wire_challenge"?

Share this post


Link to post
Share on other sites

But config is defined only when page is loaded and you need the path before that...

I guess if someone knows how to move the "wire" dir (or setting up an environment not in the root) then setting paths in the JS won't be a challenge :)

Share this post


Link to post
Share on other sites

You will always have to do something in the markup. To make a AJAX call you would have to rely on some markup anyway, I think adding the link to the page is the most transparent way to do it.

Share this post


Link to post
Share on other sites

You will always have to do something in the markup. To make a AJAX call you would have to rely on some markup anyway, I think adding the link to the page is the most transparent way to do it.

Agreed. I did some tests and while it could work the safest thing is adding the markup manually.

In the meantime I added some cool things to make you FEEL better :)

  • FEEL.popupSettings: settings to pass to Magnific Popup
  • FEEL.wirePath instead of lightboxJSpath & lightboxCSSpath
  • FEEL.stickSaveButton: set Save button position fixed to the top-right corner
  • Multiple edit links
  • Edit link positioning helper classes
  • Simplified markup

Preview of inline and fixed modes:

post-3156-0-44277300-1437552469_thumb.pn

This version is not released yet, I will create GitHub page with proper documentation.
  • Like 4

Share this post


Link to post
Share on other sites

GitHub page is up, see first post.

  • Like 1

Share this post


Link to post
Share on other sites

Just pushed a small update on GitHub: setting the wrapper element to a "span" instead of div.

Share this post


Link to post
Share on other sites

Two important updates:

  • initializing the lightbox on click instead of document ready: this allows DOM manipulation and keeping functionality (eg. when appending or cloning the item elsewhere in the document)
  • multilanguage-aware helper function: tabs of the active language are opened by default (see examples on GitHub). This is really handy because it is easy to mix up languages even for me not to mention the clients :) Unfortunately the built-in editUrl() doesn't seem to provide this feature but appending "&language=LANG_ID" did the trick. No more messing with language tabs :)
  • Like 2

Share this post


Link to post
Share on other sites

You can set the target field in your edit links (notice the blue outline):

post-3156-0-90310100-1442521337_thumb.gi

This works with tabs too (see details on GitHub). Unfortunately there's a WebKit bug that causes the lightboxed iframe jumping to top but it's only a cosmetical issue, hope it will be fixed soon.

  • Like 1

Share this post


Link to post
Share on other sites

The dev branch contains the latest updates on FEEL. It has some BC breaks but it's for the better :)

Some highlights:

  • new feature: edit page template on ctrl-click
  • redesigned class system
  • changed edit link html element to "<feel />"
  • wrapper element removed
  • extendable options
  • rewritten & more verbose docs
  • make the helper function the recommended usage mode
  • using "all: initial" to reset all styles of edit links

As the helper function is promoted as the main usage mode, perhaps FEEL could be made to a module. Any thoughts on this?

  • Like 3

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.