How to turn off inline editor

[Colin Clark]

Hi Cindy,

Good question! The community has been really heads-down with the  
upcoming Engage/Infusion release and our interactive final report  
website, so I'm really sorry for the delay in responding.

InlineEdit's real advantage in terms of usability is that it avoids  
separate modes for editing and viewing content. The idea here is that  
users can be viewing content and quickly edit portions of it without  
having to switch into a separate mode. I don't know your particular  
design requirements, but you may want to think about how to maximize  
that advantage and not require users to activate a separate "edit"  
mode to use Inline Edit.

Since your particular example uses a tree structure, you might want to  
think about an interaction similar to what you see on the desktop,  
where activating the tree and editing its contents can be done within  
the same mode. Check out Windows Explorer or Mac OS's List View for  
some design inspiration here.

If you do need to turn Inline Edit on and off with a mode, there  
should be a few workable options for you. At the moment, we don't  
provide a way for actively destroying or unbinding InlineEdit because  
it presents a performance risk if there are a lot of components on the  
page.

One option is to use the onBeginEdit event you mentioned, along with  
some dynamic CSS changes. So for the two issues you mention--the hover  
invitation and the tooltip--there are two styles you can can adjust:

Tooltip: .fl-inlineEdit-tooltip
Hover Invitation: .fl-inlineEdit-invitation

You could write a little function that you bind to your Edit button's  
onclick event that overrides these two styles to make them invisible.

Another super-simple, though not ideal, option is to invoke a round  
trip to the server and have your PHP code only inject the InlineEdit  
JavaScript if you're in the edit mode.

I hope this helps. Don't hesitate to ping the list if you have more  
questions or need a code example of this in action.

Colin

On 9-Sep-09, at 3:59 PM, Cindy Qi Li wrote:

>
> Hi,
>
> This test script will help to understand my question:
>
> http://www.atutor.ca/atutor/test/test.html
>
> The lines on the page are either toggles to expand/collapse the tree  
> or
> links to redirect the page. By clicking the icon at the top right  
> corner,
> the fluid inline editor is applied and all the lines become  
> editable. My
> question is how to use javascript, not refreshing page, to turn off  
> the
> inline editor when clicking the icon at the top right corner again,  
> which
> means all the lines are reverted back to toggles or links. One  
> suggestion I
> received (thanks to Justin and Colin) is to return false at event
> "onBeginEdit". But it only prevents the inline editor from going  
> into the
> edit mode. All the inline editor features like mouseover, background  
> color
> change are still in place and the lines lose the functionalities of  
> being
> toggles/links. The best I hope to achieve is to revert the page back  
> to the
> initial state without the inline editor. Is this possible?
>
> Another way I was trying is to remove the objects/attributes/events  
> that are
> added fluid.inlineEdits but seems never be able to clean up all. I  
> end up
> with the this test page.
>
> Thanks.
>
> - Cindy from ATutor team

---
Colin Clark
Technical Lead, Fluid Project
http://fluidproject.org