[whatwg] classList.toggle()

[Ian Hickson]

On Fri, 27 Apr 2007, Maciej Stachowiak wrote:
> 
> How about about adding a toggle() operation to classList? Adds the token 
> if not present, removes it if present. This would be useful for script 
> code that dynamically manipulates classes to cause style changes.

Added. Made it return a boolean (true if the class was added, false 
otherwise).


On Tue, 1 May 2007, Martin Atkins wrote:
> 
> It's been my experience that toggles are troublesome. In order for a 
> call to toggle() to be successful -- where by successful I mean that it 
> makes the change you intended -- you need to know the state ahead of 
> time. If you have two distinct scripts "toggling" the same value, 
> they're going to get out of step and think they're turning on when 
> they're turning off.
> 
> Or did you have a use-case in mind where it doesn't matter what the end 
> result is as long as it's not what it was before?

On Tue, 1 May 2007, Maciej Stachowiak wrote:
> 
> Yes, cases where you have a UI action that is supposed to always toggle 
> the current state, and the class is used for styling so appearance can't 
> be out of sync with the state. Here's a simple example. The images would 
> zoom out and fade when you click on them, and return to their normal 
> state when clicked again.
> 
> <section class="container">
> <h1>Bridge Gallery</h1>
> 
>   <div class="picture" onclick="classList.toggle('zoomed')">
>     <img src="goden-gate-bridge.jpg">
>   </div>
> 
>   <div class="picture" onclick="classList.toggle('zoomed')">
>     <img src="bay-bridge.jpg">
>   </div>
> 
>   <div class="picture" onclick="classList.toggle('zoomed')">
>     <img src="san-mateo-bridge.jpg">
>   </div>
> 
>   <div class="picture" onclick="classList.toggle('zoomed')">
>     <img src="benicia-bridge.jpg">
>   </div>
> 
>   <div class="picture" onclick="classList.toggle('zoomed')">
>     <img src="dumbarton-bridge.jpg">
>   </div>
> 
> </section>

That seems reasonable.

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'