Frontend edit with single click?

[dotnetic]

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>

 

[bernhard]

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!

[dotnetic]

Thank you @bernhard. Have to test it a little more, but first try worked fine.

[bernhard]

@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...

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

[dotnetic]

3 minutes ago, bernhard said:

maybe you are interested in testing/collaboration?

@bernhard Sure. Provide me with details / login and I will have a look. We can also communicate in german if you like.

[dotnetic]

@bernhard Did you release Alfred to the public? The gitlab page does not exist anymore and I can´t find it.

[bernhard]

hi jmartsch,

no, i didn't release it, but it is still on gitlab: https://gitlab.com/baumrock/Alfred/tree/master

as i remember nothing changed since then... hope that helps. 

[hettiger]

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.