[Plugin: Front-end Editor] is there a FrontEndEditor show event I can bind to?

Ok well thats one thing off the list…

You can use

jQuery(document).bind(“edit_start”, function(){
alert(‘we started editing!’);
}),

To attach functions to when the editor starts and the same but with ‘edit_stop’ to do stuff when the editor ends…

Am still looking for a method to temporarily hide the editor…

Actually my idea in the previous post was no good as when that fires the actual .fee-form does not exist so I need something that triggers when the form is actually ready to edit…:(

2) Is there a method I can call that will temporarily hide the editor?

There isn’t.

1) Is there an event I can bind to when FEE activates so I can attach some of my own functions to elements that are being edited?

There is no event specifically for that.

Reason being that I’d like to show a ‘Save’ and ‘Cancel’ button in place of the ‘Edit’ button when the editor is active- amongst other things…

That would mean that you would also have to hide the default Save and Cancel button sets (one set built into Aloha and another set for the others). Why would you need to do that?

Basically its because I think that the user may well expect to see save/cancel buttons in the same place as they saw the ‘edit’ button- specifically if you have for example inserted an image and the save cancel buttons are not visible in that ‘insert’ tab. Also if you have large images at the top of your post quite often the editor goes off screen untill you click on text below- in which case you cant see what to do to get out of the mode. If there were save/cancel buttons following you down the post this would all be obvious to the user.

The way I was planning on doing it to avoid the problem you mention is to clone the buttons from the editor (which should also carry over their functionality) and insert them into the edit button itself and give that button a different class at the same time which would make them show correctly.

Thats why I need to bind to the stage ready event or something so that I know when the editor and its buttons and the fee-form are all ready to go…

Really hope this is something you have some ideas about as I really think it will have big usability benefits…

Actually, now that you’ve mentioned it, I think that’s how the Save/Cancel buttons should work out of the box:

https://github.com/scribu/wp-front-end-editor/issues/66

Are you familiar with CoffeeScript? ??

https://github.com/scribu/wp-front-end-editor/wiki/Development-guide

CoffeeScript- I am afraid not… I will look into it though, whats it for/do?

CoffeeScript is a way of writing better JavaScript.

I actually use Coco, a CoffeeScript dialect, in Front-end Editor but I’ll probably switch back to plain CoffeeScript, since it’s a little better known.

Hmm, had a look at CoffeeScript. I think it would be a good idea for me to learn it but just don’t think I can right now… I take it that you’d like me to have a go at writing the changes in Coffee script so you can compile them into the output your end is that right?

I think it should be a pretty straight forward change though actually- couldn’t we just include the buttons in the markup and hide them- then show them on start_editing (maybe with a little timeout unless we can make them show when the fee-form is loaded) and bind a click function that triggers a click on the aloha buttons?

Yeah, it shouldn’t be too hard. My only concern is this: what happens if there isn’t enough room on the left side of the element to display the buttons?

Did a first pass at this. You can try it out by downloading the development version (2.3-alpha).

The buttons currently have no CSS of their own.

Yep that all seems to work great ??

Still got issues with text aligning btw

Still got issues with text aligning btw

If it’s not related to the Save/Cancel buttons, please open a new topic, with a screenshot attached.

Also am having issues with jQuery UI draggable in this new version with the save/cancel buttons- I am not sure if this is down to those changes or the new version of Aloha…

What I am doing is making images editable in various ways when the editor is in editing mode. One of the things I do is initialise draggable on click on the image which enables the image to be able to be dragged around inside its own container.

This was working in FEE 2.2 but in this new version the drag is not working. If I bind an alert to the dragstart event on the image that shows up- but the actual jQuery ui ‘drag’ event seems to be being blocked.

Any idea why that may be?

In the new version, there are ‘mouseover’, ‘mouseout’ and ‘mousemove’ listeners on the form too, not just on the element before it’s edited.

Your best bet is to follow the execution step by step using a breakpoint in Firebug or Chrome Console.

Do you disable these listeners when the mouse is over the floating editor controls? The save and cancel buttons hide themselves when the mouse is over the editor controls… I’d like to replicate that when the mouse is over one of my active images- or perhaps when my ‘edit image’ button has been clicked…

I can see now that this is because the mouse is not over the form when it is over the editor- so it constitutes a mouseout and so the buttons get hidden…