tpr Posted July 19, 2015 Share Posted July 19, 2015 (edited) 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. Edited March 21, 2016 by tpr 12 1 Link to comment Share on other sites More sharing options...
matjazp Posted July 19, 2015 Share Posted July 19, 2015 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... Link to comment Share on other sites More sharing options...
tpr Posted July 19, 2015 Author Share Posted July 19, 2015 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. Link to comment Share on other sites More sharing options...
tpr Posted July 19, 2015 Author Share Posted July 19, 2015 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. 2 Link to comment Share on other sites More sharing options...
tpr Posted July 20, 2015 Author Share Posted July 20, 2015 Just added the latest release with some fixes and optimizations, see the first post. Link to comment Share on other sites More sharing options...
Pete Posted July 20, 2015 Share Posted July 20, 2015 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). Link to comment Share on other sites More sharing options...
tpr Posted July 20, 2015 Author Share Posted July 20, 2015 i removed the previous zip from the post. I think posts themself could remain in place. Thanks! Link to comment Share on other sites More sharing options...
matjazp Posted July 20, 2015 Share Posted July 20, 2015 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. Link to comment Share on other sites More sharing options...
bernhard Posted July 20, 2015 Share Posted July 20, 2015 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 Link to comment Share on other sites More sharing options...
tpr Posted July 20, 2015 Author Share Posted July 20, 2015 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. 2 Link to comment Share on other sites More sharing options...
tpr Posted July 20, 2015 Author Share Posted July 20, 2015 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. Link to comment Share on other sites More sharing options...
bernhard Posted July 20, 2015 Share Posted July 20, 2015 oh, i thought you know it because it was also a topic here: https://processwire.com/talk/topic/10006-maletschek-nautics-boat-center-at-neusiedlersee-in-austria/ just wanted to know the differences. thanks for sharing Link to comment Share on other sites More sharing options...
matjazp Posted July 20, 2015 Share Posted July 20, 2015 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? 1 Link to comment Share on other sites More sharing options...
bernhard Posted July 20, 2015 Share Posted July 20, 2015 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 Link to comment Share on other sites More sharing options...
tpr Posted July 20, 2015 Author Share Posted July 20, 2015 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. Link to comment Share on other sites More sharing options...
matjazp Posted July 20, 2015 Share Posted July 20, 2015 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... Link to comment Share on other sites More sharing options...
tpr Posted July 20, 2015 Author Share Posted July 20, 2015 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"? Link to comment Share on other sites More sharing options...
tpr Posted July 20, 2015 Author Share Posted July 20, 2015 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 Link to comment Share on other sites More sharing options...
diogo Posted July 21, 2015 Share Posted July 21, 2015 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. Link to comment Share on other sites More sharing options...
tpr Posted July 22, 2015 Author Share Posted July 22, 2015 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: This version is not released yet, I will create GitHub page with proper documentation. 4 Link to comment Share on other sites More sharing options...
tpr Posted July 22, 2015 Author Share Posted July 22, 2015 GitHub page is up, see first post. 1 Link to comment Share on other sites More sharing options...
tpr Posted September 10, 2015 Author Share Posted September 10, 2015 Just pushed a small update on GitHub: setting the wrapper element to a "span" instead of div. Link to comment Share on other sites More sharing options...
tpr Posted September 14, 2015 Author Share Posted September 14, 2015 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 2 Link to comment Share on other sites More sharing options...
tpr Posted September 17, 2015 Author Share Posted September 17, 2015 You can set the target field in your edit links (notice the blue outline): 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. 1 Link to comment Share on other sites More sharing options...
tpr Posted September 24, 2015 Author Share Posted September 24, 2015 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? 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now