How to turn off inline editor

[Cindy Qi Li]

Hi Colin,

Thanks for the reply and suggestions. Very helpful but the problem is not 
fully solved.

The nodes in the tree structure act as links at most time. Inline editor is 
to provide users with a convenient way to edit the link titles. That's why a 
switch is being used. I had a look at the windows explorer, one click on the 
folder opens up the folder content, a slow double click turns the text into 
edit mode. Is that what you meant how to have view and edit within the same 
mode. I was told that double click is not applicable for accessibility 
reason. Some ppl with disability may not be able to make 2 quick clicks.

In terms of 2 suggestions of turning on and off inline editor:

1. I use the onBeginEdit event and try to override the hover invitation and 
the tooltip. The links are still not clickable.

2. "Content navigation" is a small portion on the whole page. Re-fetching 
page from server will result in the lose of the data on the current page.

How can I switch the links from inline editor back to the real clickable 
links. Pain!

Thanks a lot for the help.

I will be on vacation for 2 weeks from tomorrow. So, I will stay quiet for a 
while. Cheers!

Cindy

----- Original Message ----- 
From: "Colin Clark" <colinbdclark at gmail.com>
To: "Cindy Qi Li" <cindyqi.li at utoronto.ca>
Cc: <fluid-work at fluidproject.org>
Sent: Monday, September 14, 2009 12:20 PM
Subject: Re: How to turn off inline editor


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