Jump to content

Frontend edit with single click?


dotnetic
 Share

Recommended Posts

Hi there,

I know there is a possibility to open the Front-End Editing window with one click if if change the class of the containing div from "pw-modal-dblclick" to "pw-modal-click".

So how can I have a button/link that opens the frontend editor with a single click?

I want to use a code similar to this:

<edit field="title,user_image,facebook_url,description">
  <a href="#" class="waves-effect waves-light btn pw-modal-click">edit this page</a>
</edit>

 

Link to comment
Share on other sites

hi jmartsch,

you can use the modal directly. see here for docs: https://github.com/ryancramerdesign/ProcessWire/blob/master/wire/modules/Jquery/JqueryUI/modal.js#L10-L44

then you can do something like this:

<a href="/admin/page/edit/?id=1246&fields=title,user_image,facebook_url,description" class="pw-modal" data-buttons="#submit_save" data-autoclose>test modal</a>
<script type="text/javascript">
$('a').on('pw-modal-closed', function() {
    $('body').prepend('<div id="reload" style="width: 100%; height: 100%; position: fixed; z-index:9999; background-color: rgba(255,255,255,0.5); display: none;"></div>');
    $('#reload').fadeIn();
    location.reload();
});
</script>

now you just have to make sure that all the necessary files get loaded by having <edit title></edit> anywhere in your html markup!

  • Like 4
Link to comment
Share on other sites

@jmartsch i'm using it on a project i'm developing at the moment and it works really nicely. I've also built a little module. maybe you are interested in testing/collaboration?

at the moment it has only 2 buttons on hover:
1) show the template path that is rendering the item
2) show edit button to edit this item directly

of course it is quite similar to fredi and feel...

alfred.gif

ps: the built in modal has an awesome experience on mobile. its fullscreen and feels almost like a native app :) 

  • Like 2
Link to comment
Share on other sites

  • 5 months later...
  • 4 months later...

I'm using something like this:

<div edit='1.title' onclick='this.dispatchEvent((new MouseEvent("dblclick", { view: window, bubbles: true, cancelable: true })));'>
  <i class="fa fa-cog fa-fw" aria-hidden="true"></i>
</div>

Working pretty fine for me.

  • Like 1
  • Thanks 1
Link to comment
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
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Jozsef
      Normally I output some fields with fallback values as follows (with Headline field filled in in this case):
      $content .= "<h1>$page->get('headline|title')</h1>; How would you approach front page editing in the template for this (B/C/D method)?
      $content .= "<h1>$page->edit('headline|title')</h1>"; results in the Headline outputted but editing doesn't work.
      $content .= "<edit title>"; $content .= "<h1>{$page->get('headline|title')}</h1>"; $content .= "</edit>"; Results in the Headline outputted but double click will edit the Title field instead.
      Has anyone succeeded this way?
×
×
  • Create New...