[CSS3] Collapsing elements proposal [wasRe: Collapsing elements]

Daniel Glazman wrote:
>
> Andrew, I just cannot read messages whith three or four level
> of quotation... Could you please send us a detailed and complete
> proposal for tree-like rendering ? Gather everything and let's
> discuss it.
>
> </Daiel>
>
First of all, initial proposal to add list-style-type: tree-line value is
not related to  collapsing per se.  It can be used for styling
of static lists too. See two lists at the bottom of [1].
I propose to allow outline-color and outline-style to style appearance
of such tree outlines.

--------------------------
My proposal is to add  :collapsed and :expanded state flags for the DOM
elements (and correspondent pseudo-classes in CSS)

Here are couple of examples of real life cases where these states are 
needed:
1) Collapsible/expandable lists.
2) Tab views (a.k.a. stack views). Set of panels where all panels are in 
collapsed
state except of one - current panel.
3) "Read more..." views where DOM element in collapsed state show part of
text and in expanded state this element shows full content.

Such :collapsed and :expanded states should be modifiable by methods of
DOM::Element interface. (There are other flags that makes sense to enable
this way, e.g. :checked and :current). Probably as:

interface Element 
{
  ...
  void setState(enum ELEMENT_STATE state, bool onOff);
  bool getState(enum ELEMENT_STATE state);
}


Behaviors. [optional but desirable section]

I propose to add (or to extend for those UAs that already support this 
attribute)
attribute "behavior" that accepts one of predefined values:

behavior: checkbox | radio | select | multi-select | stack-tab | etc.

=== behavior: checkbox ===
   when set will make the element:
   a) focusable and
   b) onClick event will set/reset :checked state of the DOM element.
Pretty much the same of what does code behind <button type="checkbox">

=== behavior: radio ===
   will mimic behavior of code behind <button type="radio"> - will
   set/reset :checked state for the group of elements with the same 
@name value.

=== behavior: select ===
   will make the element
   1) focusable and
   2) will handle navigational keys UP, DOWN, HOME, END and
       set :current state flag for contained elements with role="option".
       :current element should be scrolled into the view if needed.
   3) will handle navigational keys LEFT, RIGHT and set :collapsed
       and :expanded state for nearest parent having role="option-group"
       of :current element.
   4) will handle mouse events correspondingly, e.g. DOUBLE_CLICK
       will trigger :collapsed  :expanded  state of nearest 
role="option-group"
       element.

@role attribute auto-assignment:
      All list item elements (e.g. <li>) are treated as is if 
role="option" is defined
      for them.
      All contained list elements (e.g. <ul>, <ol>) with first 
sub-element of type
      <caption> are treated as if role="option-group" is defined for them.
      (Such auto-assignment could be done also through @role *CSS* 
attribute)

Example:
     <ul style="behavior:select">
           <li>First terminal node</li>
           <li>Second terminal node</li>
           <ul><caption>Third node: option group</caption>
                 <li>Terminal node 3.1</li>
                 <li>Terminal node 3.2</li>
           </ul>
     </ul>

=== behavior: multi-select ===
     The same as select but additionally sets/resets :checked state flag
     for the :current item when SPACE key or DOUBLE_CLICK is
     received.

=== behavior: stack-tab ===
    The same as behavior: radio - switches :checked state of
    of group of elements with the same value of @name.
    Additionally interprets @for attribute for such elements and if it 
has an id of
    valid element then sets/resets value of  :expanded  attribute (when 
:checked)
    and sets :collapsed  attribute (when  :not(:checked)) for element 
with the id.

Example of the tab view:
CSS:
   ul.tab-strip > li { behavior:stack-tab; }   
   div.panel  { visibility:hidden; }
   div.panel:expanded  { visibility:visible; }

Markup:
   <ul class="tab-strip">
      <li for="#panel-1" checked>First tab</li>
      <li for="#panel-2">Second tab</li>
      <li for="#panel-3">Third tab</li>
   <ul>
   <div class="panel" id="panel-1">...</div>
   <div class="panel" id="panel-2">...</div>
   <div class="panel" id="panel-3">...</div>

------------
Behaviors defined above are pretty standard an universal UI state automats
and so can be used for various purposes. E.g. behavior: stack-tab can be 
used
for expanding/collapsing tree alike structures too:

<div id="node1">
    <h><img style="behavior:stack-tab" for="node1" /> header </h>
    <p>Body text that will be shown/hidden if you click on the image 
above</p>
</div>

(I think that "stack-tab" should have more universal name then)

[eof]

-- 
Andrew Fedoniouk.

http://terrainformatica.com

[1] http://www.terrainformatica.com/htmlayout/images/tree-view-lines.png

Received on Friday, 22 February 2008 20:22:33 UTC