Fredi - friendly frontend editing

[Soma]

Hey, just tested this with previous version and seen you updated. So I grabed it  and I can't see a difference to before.

When on default language it open modal with body and both languages to edit fine.

When on alternative language of the page, the modal just loads the home page inside.

It would be nice to have the modal bigger. My Images Manager or insert image modal does open inside it and it's quite claustrophobic.

[apeisa]

When on alternative language of the page, the modal just loads the home page inside.

Hmm.. I have only tested this with when user language is something else than default. How is your languages setup?

It would be nice to have the modal bigger. My Images Manager or insert image modal does open inside it and it's quite claustrophobic.

I agree. I used first native-js modal solution I could find and tinybox2 doesn't support relative widths with iFrame. It seems to work very fine otherwise, so I am looking modifying it for Fredi's needs.

[Soma]

My language setup is standard languages module, language fields and language page names.

So the user language is the one you currently view on the front end. New language page names module does all the url and user language.

This is the default link

http://pwmultilang.ch/processwire/page/fredi-field-edit/?id=1001&fields=body&modal=1

this is when on alternative lang:

http://pwmultilang.ch/?id=1001&fields=body&modal=1

[apeisa]

Ok, will test with language page names, that is the one that is missing from my setup.

[Soma]

I remember when there was or maybe still is a bug with when languages installed that when installing a module admin page it doesn't set the title for alternative languages just default, depending on user language who installs the module. 

So I just went a looked at the process admin page...

Turns out the "name" of the page is correct for both languages, BUT the "active" checkbox isn't set. This is from the new Language Page Names module. Setting this checkbox active for the laternative language it starts working and the edit url is correct.

This is a tricky one that will may cause some trouble in future with module developement that use techniques like this... I can already see.

[apeisa]

Yeah, it seems to work for me with language page names. 

But I don't see that active checkbox? Where does it comes from?

[Soma]

Its in since a week or two.

[apeisa]

Must be on dev, since I am on latest master.

[kongondo]

Apeisa,

Thanks for this. Simply awesome!

/k

[Wanze]

Hi mister antii

This is a killer-feature-module, thanks very much!

Frontend-Editing the Pw way:

I can define which fields from which page I want to edit and output the edit-link where I want.

Now that's freedom!

[apeisa]

Thanks guys.

Wanze: when I got the idea of how this should work I had kind of light bulb moment. I have been thinking about front end editing in PW about two years and I think now I have nailed the right ingredients AdminBar feels like a hack now. Although I am planning simplified AdminBar which would integrate with this. It doesn't need to do anything else than provide fredi switch and full edit link.

[Marty Walker]

Hi Antti,

This does indeed work with Thumbnails. I can see all sorts of applications for this. Terrific work!

Cheers

Marty

[apeisa]

I am currently building own responsive js modal (without any library dependencies), so soon we can have bigger edit view.

[apeisa]

That would help with cropping too

[Nico Knoll]

Wow, this is actually really nice!

[apeisa]

I implemented custom modal for this. Seems to work great on IE10, Chrome, FF, iPad, iPhone... but having little issue with chrome on android.

[apeisa]

I just added this to module directory, pushed documentation to github and consider this pretty much released.

[evan]

Anyone else have their submit button end up in weird spot?  If I float the element one way or another, it's fine, but since it's within an iframe I can't just tack the CSS on.  Many of my fields are 25% or 50% width, which might have something to do with it.

Using the latest OS X Chrome, seems to do it in OS X Firefox 19.0.2 as well.

I also had to add a Z-index to the modal dialog, as it ended up under some of my own DIVs.  Maybe that should be added to the release?

This'll be incredibly useful, thanks!

[Marty Walker]

It looks ok for me here on OSX FF20.

Actually when I try this in Chrome 25 I just get the loading spinner.

[apeisa]

Marty, that is strange. Works fine here (chrome 26), although I have same problem with Android Chrome. Mind testing again when you have updated to 26?

Evan, good idea!

[Marty Walker]

Works now with the Chrome 26 update

[apeisa]

Works now with the Chrome 26 update

That is good news (hopefully will be soon fixed on android chrome too).

[kongondo]

What happened to the screencast? 

/k

[apeisa]

What happened to the screencast? 

It is little outdated (just visuals, code is right), so I removed it. But I added it back to first post until I record new one. Just noticed that there is nice typing sounds included

[3fingers]

I implemented custom modal for this. Seems to work great on IE10, Chrome, FF, iPad, iPhone... but having little issue with chrome on android.

Does this mean that I can use a custom css for the modal box to reflect the style of my front-end, even for the fileds that I want to let the user modify?