Re: [BECS] CSSS! - CSS script

http://www.w3.org/TR/xbl/

dave

On May 7, 2008, at 7:26 PM, Andrew Fedoniouk wrote:

> Idea is to add ability to define simple event handlers in CSS.
>
> Event handlers are ordinary style attributes with names starting  
> with "when-...".
> Such attributes accept sequence of statements of so called CSSScript  
> ending with ';'
>
> Here is practical example:  implementation of Tabs functionality.
> Tabs is a set of labels and set of panels. Visibility of panel is  
> bound with correspondent tab.
> Only one tab can be in current state at the moment and so only one  
> panel from the set can be visible.
>
> Here is one of possible markups:
>
>   <div class="tab-strip">
>        <span current>First tab</span>
>        <span>Second tab</span>
>        <span>Third tab</span>
>   </div>
>   <div class="panels">
>     <div current>First panel.</div>
>     <div>Second panel.</div>
>     <div>Third panel.</div>
>   </div>
>
> Here is style definition that use CSSS! feature:
>
> div.tab-strip span
> {
>     when-active-on:
>            $(div.tab-strip span[current]).current = null
>            $(div.panels>div[current]).current = null
>            self.current = true
>            $1(div.panels>div:nth-child(< self:index >)).current =  
> true;
>  }
>  div.tab-strip span[current] { background: yellow; border:1px solid;  
> border-bottom:none; }
>  div.panels > div { display: none; }
>  div.panels > div[current] { display: block; background: yellow;  
> border:1px solid; height:200px; }
>
> This simple set of rules will present panel corresponded to its tab/ 
> label. As you may see tabs and panels may not
> be in parent/child relationship. And usually they are not.
>
> Here I am using 'when-active-on' event handler that is triggered  
> when element is getting active state.
> Meaning of statements of when-active-on handler:
>
> $(div.tab-strip span[current]).current = null
> $(div.panels>div[current]).current = null
>
>   - select set of DOM elements by the selector "div.tab-strip  
> span[current]" and remove
>     attribute 'current' from each of them (by assigning null).
>     Do the same for the "div.panels>div[current]" selector.
>
> self.current = true
>
>   - set 'current' attribute equal to "true" on the DOM element this  
> rule is applied to.
>
> $1(div.panels>div:nth-child(< self:index >)).current = true;
>
>   - set 'current' attribute equal to "true" on the DOM element  
> satisfying the selector
>     "div.panels>div:nth-child(X)" where X is an index of the 'self'  
> - DOM element this
>     rule is applied to.
>
> The CSSScript is simple. It is a sequence of statements in the form:
>
>    <target> <prop> = <left-side-expression>
>
> Where 'target' is either:
>     self - pseudo variable holding reference to the element this  
> rule is applied to (close to 'this' in JS), or
>     $xx(...) - one of six selector pseudo-functions. These functions  
> return either one or set of elements.
>
> 'prop' is either:
> .attrname - name of DOM element attribute, or
> :statename - name of state flag of the DOM element, examples are:
> :hover, :active, :checked, etc. And there are two additional state  
> fields:
> :index - index of the DOM element in its parent collection and
> :value - runtime value of the DOM element, for input elements that  
> is the value and for other it is a text of the DOM element.
> Thus CSSS! is allowed to change DOM element attributes and states  
> but not CSS attributes. For many reasons.
>
> Selector pseudo functions:
> $(selector) - select elements globally with the :root set to the  
> root node of the document.
> $1(selector) - select first matching element globally with the :root  
> set to the root node of the document.
> $c(selector) - select children of the self element, the :root is the  
> self element.
> $1c(selector) - select first matching child of the self element,  
> the :root is the self element.
> $p(selector) - select all parents of the self element matching the  
> selector, the :root is the root node of the document.
> $1p(selector) - select nearest parent of the self element matching  
> the selector.
> In principle CSSS! can interact with JS by calling functions  
> assigned to DOM elements. But this is optional.
>
> List of when-... event handlers I've found useful so far:
> when-hover-on:
> when-hover-off:
> when-active-on:
> when-active-off:
> when-focus-on:
> when-focus-off:
> when-click:
> when-value-changed:
> when-assigned: - triggered when this rule is assigned to the  
> element. Used for initialization of states.
> I have an implementation of CSSScript already - it is a simple stack  
> based machine that does not require any GC (garbage collector)
> and the like. In the case of any interest I can publish detailed  
> specification of CSSS! grammar.
>
> Some tasks that can be accomplished with CSSS!:
> Collapsible tree views, Tabs, binding value of input elements with  
> visibility of other DOM elements, etc.
> Surprisingly many common UI tasks can by handled by such simple thing.
>
> Hope this is interesting. If someone will want to play with CSSS!  
> then it will be available in the next build of
> htmlayout @ terrainformatica.com
>
> --
> Andrew Fedoniouk.
> http:/terrainformatica.com
>