Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Close #21; ref() exceptions + initial support states

  • Loading branch information...
commit c683ff71e3b782256a97e52fcab4c061d22da9e9 1 parent 96282c8
@Mouvedia Mouvedia authored
Showing with 126 additions and 63 deletions.
  1. +126 −63 specification.html
View
189 specification.html
@@ -23,9 +23,9 @@
FILE INFORMATION:
=================
- Last changed: 2012/06/14
+ Last changed: 2012/06/21
HSS version: 1.0
- Revision: 1.21
+ Revision: 1.22
****************************************************************-->
@@ -146,10 +146,10 @@
.modifier
{
-
+ color: #16B65E;
}
-
- .instruction
+
+ .instruction
{
}
@@ -161,12 +161,12 @@
.flag
{
-
+ color: #8D8711;
}
.splitter
{
-
+ color: #E52A90;
}
pre .highlighted
@@ -261,6 +261,22 @@
content:"1." counter(section) "." counter(subsection) " ";
}
+ .sub.yet:hover h4:after, .sub.part:hover h4:after, .sub.comp:hover h4:after
+ {
+ content:" [not supported yet]";
+ font-weight:normal;
+ font-size:xx-small;
+ vertical-align:text-top;
+ }
+ .sub.part:hover h4:after
+ {
+ content:" [partially supported]"
+ }
+ .sub.comp:hover h4:after
+ {
+ content:" [supported]"
+ }
+
#btt {
position:fixed;
bottom:5px;
@@ -330,14 +346,14 @@
<li><a href="#1.6.3">Functions</a></li>
<li><a href="#1.6.4">Color</a></li>
<li><a href="#1.6.5">isA</a></li>
+ <li><a href="#1.6.6">Read-only properties</a></li>
</ul>
</li>
<li><a href="#1.7">Objects</a>
<ul>
- <li><a href="#1.7.1">The support object</a></li>
+ <li><a href="#1.7.1">Object dot notation</a></li>
<li><a href="#1.7.2">Named objects</a></li>
<li><a href="#1.7.3">Anonymous objects</a></li>
- <li><a href="#1.7.4">Object dot notation</a></li>
</ul>
</li>
</ul>
@@ -362,7 +378,7 @@
<h4><span class="number"><a name="1.2.2">1.2.2</a></span> Selector basic principles</h4>
<p><a href="#1.3">Selectors</a> are used to point to certain elements of the document, so that the properties defined inside of the block get applied to them. You define a search pattern and all applicable elements will be searched to see if the conditions match. If so, the property definitions are applied.</p>
- <p><a href="#1.3.1">Simple selectors</a> are the element name or <a href="#1.3.4">universal selector</a>, combined with one or several appended <a href="#1.5">filters, flags or splitters</a>. A series of simple selectors joined by <a href="#1.4">combinators</a> is called the selector chain or simply selector.</p>
+ <p><a href="#1.3.1">Simple selectors</a> are the element name or <a href="#1.3.4">universal selector</a>, combined with one or several appended <a href="#1.5">filters, flags or splitters</a>. A series of simple selectors joined by <a href="#1.4">combinators</a> is called the selector chain (or simply selector) and reads from left to right.</p>
<p>In order to access elements' parents or the root element you can use the <span class="object">@root</span> and <span class="object">@parent</span> <a href="#1.3.7">reference objects</a>. <a href="#1.3.6">Regular expressions</a> are also available to select elements based on their name.</p>
<p>Some examples:</p>
<pre><span class="comment">//select elements with name “document”</span>
@@ -410,9 +426,9 @@
}</pre>
<h4><span class="number"><a name="1.2.5">1.2.5</a></span> Instructions</h4>
#TODO <a href="https://github.com/AXR/Specification/issues/27">Issue 27</a>
-
+<div class="sub part">
<h4><span class="number"><a name="1.2.6">1.2.6</a></span> The negator</h4>
- <p>You can negate <a href="#1.3.1">simple selectors</a> by prefixing them with <span class="modifier">!</span>, meaning that all elements in the current scope that don’t match the selector will be selected.</p>
+ <p>You can negate <a href="#1.3.1">simple selectors</a> by prefixing them with <code>!</code>, meaning that all elements in the current scope that don’t match the selector will be selected.</p>
<pre><span class="comment">//this selects the children of note which are not message elements</span>
<span class="selector">note</span><span class="combinator"> </span><span class="modifier">!</span><span class="selector">message</span> { }</pre>
<p>Likewise you can negate filters and flags.</p>
@@ -420,10 +436,11 @@
<span class="selector">note</span><span class="modifier">!</span><span class="filter">:first</span> { }
<span class="comment">//this selects any note element which is not being hovered</span>
<span class="selector">note</span><span class="modifier">!</span><span class="flag">::hover</span> { }</pre>
- <p>To negate an entire selector (including its filters or flags) you have to use the alternate <span class="modifier">![]</span> notation.</p>
+ <p>To negate an entire selector (including its filters or flags) you have to use the alternate <code>![]</code> notation.</p>
<pre><span class="comment">//this matches all elements except the last note(s)</span>
<span class="modifier">!</span>[<span class="selector">note</span><span class="filter">:last</span>] {}</pre>
#TODO <a href="https://github.com/AXR/Specification/issues/48">Issue 48</a>
+</div>
</section>
<section class="chapter">
@@ -437,12 +454,14 @@
&lt;/<span class="selector">note</span>&gt;</pre>
<p>In the following examples we will be using rules, but without property definitions for clarity.</p>
+<div class="sub comp">
<h4><span class="number"><a name="1.3.1">1.3.1</a></span> A simple selector</h4>
<p>You can target an element by its name. </p>
<pre><span class="comment">//match every note element (within the current scope) and apply
//the style rules declared within the block (in this case none)</span>
<span class="selector">note</span> { }</pre>
-
+</div>
+<div class="sub comp">
<h4><span class="number"><a name="1.3.2">1.3.2</a></span> Hierarchy &amp; Scope</h4>
<p>Usually what the HSS author does is following the document tree and applying styles to most elements. Rules can be nested inside other rules which will only match children of the elements matched by the parent selector. This is what gives HSS its name.</p>
<p>The scope refers to the elements targeted by the selector. In the following example, only subject elements that are children of note can be selected, because the scope is restricted to the children of the note element(s).</p>
@@ -453,17 +472,19 @@
<span class="selector">subject</span> { }
}</pre>
#TODO <a href="https://github.com/AXR/Specification/issues/18">Issue 18</a>
-<p>Similarly you can nest filters using the <a href="#1.3.7.1">this object</a> (or its shorthand <span class="object">@</span>).</p>
+<p>Similarly to avoid repetition you can nest the <a href="#1.3.7.1">this object</a> affixed with filters or flags.</p>
<pre><span class="selector">note</span><br />{
- <span class="object">@</span><span class="filter">::hover</span> { }
+ <span class="object">@</span><span class="flag">::hover</span> { }
}
<span class="comment">//which is equivalent to</span>
<span class="selector">note</span><br />{
- <span class="object">@this</span><span class="filter">::hover</span> { }
+ <span class="object">@this</span><span class="flag">::hover</span> { }
}
<span class="comment">//which is equivalent to</span>
<span class="selector">note</span> { }
-<span class="selector">note</span><span class="filter">::hover</span> { }</pre>
+<span class="selector">note</span><span class="flag">::hover</span> { }</pre>
+</div>
+<div class="sub part">
<h4><span class="number"><a name="1.3.3">1.3.3</a></span> Grouping</h4>
<p>You can group multiple selectors together which is convenient when they share the same properties (or rules).</p>
<pre><span class="comment">//match every subject element and every message element</span>
@@ -496,6 +517,8 @@
<span class="comment">//this couldn't: the B elements would have to come after an A
//and before a C</span>
A + [C - B] { }</pre>
+</div>
+<div class="sub comp">
<h4><span class="number"><a name="1.3.4">1.3.4</a></span> The universal selector</h4>
<p>The universal selector <span class="selector">*</span> matches every element in the current scope:</p>
<pre><span class="comment">//matches every element that is a child of &lsquo;note&rsquo;</span>
@@ -517,28 +540,31 @@
<span class="comment">//and so are these</span>
<span class="selector">*</span> <span class="combinator">&gt;</span> <span class="selector">*</span> <span class="combinator">&gt;</span> <span class="selector">*</span> { }
<span class="selector">*</span> <span class="combinator">&gt;&gt;</span> <span class="selector">*</span> { }</pre>
-
+</div>
+<div class="sub yet">
<h4><span class="number"><a name="1.3.5">1.3.5</a></span> Selecting the subject</h4>
<p>Using the subject selector <code>$</code> you can match an element anywhere in the selector chain thus turning everything that follows it into a condition.</p>
<pre><span class="comment">//matches all note elements which have at least one comment element as a child</span>
-<span class="selector">$note</span><span class="combinator"> </span><span class="selector">comment</span> { }
+<span class="modifier">$</span><span class="selector">note</span><span class="combinator"> </span><span class="selector">comment</span> { }
<span class="comment">//matches a note element when the mouse hovers on an
//important element which is his descendant</span>
-<span class="selector">$note</span> <span class="combinator">..</span> <span class="selector">important</span><span class="filter">::hover</span> { }</pre>
-
+<span class="modifier">$</span><span class="selector">note</span> <span class="combinator">..</span> <span class="selector">important</span><span class="flag">::hover</span> { }</pre>
+</div>
+<div class="sub yet">
<h4><span class="number"><a name="1.3.6">1.3.6</a></span> Regex selector</h4>
<p>You can use a regular expression to select elements based on their names.</p>
<pre><span class="comment">//matches every element whose name starts with a number (in the current scope)</span>
<span class="selector">/^[0-9]/</span> { }</pre>
-
+</div>
+<div class="sub part">
<h4 class="title"><span class="number"><a name="1.3.7">1.3.7</a></span> Reference Objects</h4>
<p>The <a name="1.3.7.1"><strong>this object</strong></a> always refers to the current element either from a rule (or a property) directly inside it or through display objects (which are bound to be used inside elements).</p>
-<pre><span class="comment">//using the <a href="#1.7.4">object dot notation</a> and the <a href="#1.6.5">isA property</a>
+<pre><span class="comment">//using the <a href="#1.7.1">object dot notation</a> and the <a href="#1.6.5">isA property</a>
//this would set the image's width value to the height value
//of the element which is a <em>reusable</em> image</span>
<span class="object">@image</span> reusable
{
- <span class="property">source</span>: "/image.png";
+ <span class="property">src</span>: "/image.png";
<span class="property">height</span>: 100%;
<span class="property">width</span>: @this.height;
}
@@ -576,32 +602,44 @@ <h4 class="title"><span class="number"><a name="1.3.7">1.3.7</a></span> Referenc
{
<span class="property">height</span>: ref(<span class="property">height</span> of <span class="object">@parent</span> <span class="object">@parent</span>);
}</pre>
- <p>The <a name="1.3.7.5"><strong>owner object</strong></a> refers to the object which immediately contains the current object. It's designed to retrieve values from varying or multiple owners.</p>
+ <p>The <a name="1.3.7.5"><strong>owner object</strong></a> refers to the object or element which immediately contains the current object. It's designed to retrieve values from varying or multiple owners.</p>
#TODO example
+</div>
</section>
<section class="chapter">
<h3 class="title"><span class="number"><a name="1.4">1.4</a></span> Combinators</h3>
- <p>Combinators allow you to select an element based on its relationship to another in the hierarchy. Multiple simple selectors can be chained together, forming the selector chain. Usually this is done when you want to “skip” an element and style one that is inside it instead: in the case of parent-child ties, it is more convenient to use the child combinator than to use hierarchy. In other cases, combinators are mandatory regardless.</p>
+ <p>Combinators allow you to select an element based on its relationship to another in the hierarchy. Multiple simple selectors can be chained together, forming the selector chain. Usually this is done when you want to “skip” the elements which leads to the one you want to style: in the case of parent-child ties, it is more convenient to use the child combinator than to use hierarchy. In other cases, combinators are mandatory regardless.</p>
<pre><span class="comment">//matches every <em>important</em> element which is a child of <em>message</em>,
//which itself is a child of <em>note</em></span>
-<span class="selector">note</span> <span class="selector">message</span> <span class="selector">important</span> { }</pre><p>Keep in mind that these examples only select elements in the current scope, and therefore will select elements depending on where in the hierarchy you are using them.</p>
-<div class="sub">
+<span class="selector">note</span> <span class="selector">message</span> <span class="selector">important</span> { }
+
+<span class="comment">//you can start a selector chain by a combinator
+//even in a hierarchical context</span>
+<span class="selector">note</span> {
+ <span class="comment">//this matches <em>important</em> elements which are descendants of <em>note</em> elements</span>
+ <span class="combinator">..</span> <span class="selector">important</span> { }
+}
+<span class="comment">//which is equivalent to</span>
+<span class="selector">note</span> { }
+<span class="selector">note</span> <span class="combinator">..</span> <span class="selector">important</span> { }</pre>
+<p>Keep in mind that these examples only select elements in the current scope, and therefore will select elements depending on where in the hierarchy you are using them.</p>
+<div class="sub comp">
<h4 class="title"><span class="number"><a name="1.4.1">1.4.1</a></span> Child combinator</h4>
<p>Children—or more explicitly level one descendants—may be selected using the child combinator (whitespace)&nbsp;<span class="combinator"> </span>.</p>
<p><em>Note:</em> This is different from CSS, where the whitespace represents the descendant combinator. The reasoning behind this is that authors are inherently lazy, and thus end up using the descendant combinator when they really should be using the child combinator instead, because it’s just much more convenient.</p>
<pre><span class="comment">//matches every subject element which is a child of note</span><br><span class="selector">note subject</span> { }</pre>
</div>
-<div class="sub">
+<div class="sub comp">
<h4 class="title"><span class="number"><a name="1.4.2">1.4.2</a></span> Descendant combinator</h4>
<p>If you want to select elements which are descendants (could be direct children of the element, or more generations down), the descendant combinator <span class="combinator">..</span> is used.</p><pre><span class="comment">//matches every subject element which is a descendant of note</span><br><span class="selector">note</span> <span class="combinator">..</span> <span class="selector">subject</span> { }</pre>
</div>
-<div class="sub">
+<div class="sub part">
<h4 class="title"><span class="number"><a name="1.4.3">1.4.3</a></span> Siblings combinator</h4>
<p>Sibling elements can be accessed via the siblings combinator <span class="combinator">=</span>:</p>
<pre><span class="comment">//matches all the subject elements that are siblings of<br>//the message element(s)</span><br><span class="selector">message</span> <span class="combinator">=</span> <span class="selector">subject</span> { }</pre>
<p><em>Note:</em> You shouldn't use <code>==</code> since it can only select what precedes it, rendering it totally useless.</p>
</div>
-<div class="sub">
+<div class="sub comp">
<h4 class="title"><span class="number"><a name="1.4.4">1.4.4</a></span> Next and previous siblings combinators</h4>
<p>Use the next siblings combinator <span class="combinator">+</span> and previous siblings combinator <span class="combinator">-</span> if you want to access elements following or preceding (in the <em>current</em> tree order) a specified element in the same scope.</p>
<pre><span class="comment">//this will match the message element(s) following a from sibling</span>
@@ -610,9 +648,10 @@ <h4 class="title"><span class="number"><a name="1.4.4">1.4.4</a></span> Next and
<span class="selector">message</span> <span class="combinator">-</span> <span class="selector">subject</span> { }</pre>
<p><em>Note:</em> For further instructions on how to select amongst the following or preceding elements read the <a href="#1.5">filters, flags and splitters</a> chapter.</p>
</div>
-<div class="sub">
+<div class="sub yet">
<h4 class="title"><span class="number"><a name="1.4.5">1.4.5</a></span> Accessing elements laid out in lines</h4>
- <p><strong>Note:</strong> This section is just the explanation of the very basic idea, and may change soon.</p><p>Containers that are in flow might be laid out in various lines and subjacent line(s) of elements (see 1.x.x Layout of elements in Flow). You can target them by the use of the line combinator.</p><p>It works very similarly to how the <a href="#1.4.6">content text combinator</a> works, but the line combinator uses the vertical bar <span class="combinator">|</span> instead. Placing a pipe selects the lines of elements in a container, selecting as many as you define with the next simple selector. </p>
+ <p><strong>Note:</strong> This section is just the explanation of the very basic idea, and may change soon.</p>
+ <p>Containers that are in flow might be laid out in various lines and subjacent line(s) of elements (see 1.x.x Layout of elements in Flow). You can target them by the use of the line combinator.</p><p>It works very similarly to how the <a href="#1.4.6">content text combinator</a> works, but the line combinator uses the vertical bar <span class="combinator">|</span> instead. Placing a pipe selects the lines of elements in a container, selecting as many as you define with the next simple selector. </p>
#TODO link "see 1.x.x etc"
<pre><span class="comment">//this will select all the lines of elements inside of the
//document element</span>
@@ -629,7 +668,7 @@ <h4 class="title"><span class="number"><a name="1.4.5">1.4.5</a></span> Accessin
#TODO add schema which will illustrate all examples
<p>Since each line is a somewhat abstract concept - there is no element representing each line, if you create new elements in the scope of a line, only one element per line will be created, and not one per selected element, and it will be attached to the parent element. On the other hand, properties applied in the scope of the line will be applied to all elements in that line. </p><p>The <a href="#1.3.7.4">parent object</a> will refer to the parent line, in case of a subjacent line, or the parent element, in case of a line.</p>
</div>
-<div class="sub">
+<div class="sub yet">
<h4 class="title"><span class="number"><a name="1.4.6">1.4.6</a></span> Accessing the content text</h4>
<p>Many times you will want to access a part of an element's content text—a word, or a particular line, for example—rather than its container.</p><p>Consider this snippet of XML code:</p>
<pre class="xml">&lt;<span class="selector">document</span>&gt;
@@ -713,7 +752,7 @@ <h3 class="title"><span class="number"><a name="1.5">1.5</a></span> Filters, fla
&lt;<span class="selector">message</span>&gt;Meet me at the inn.&lt;/<span class="selector">message</span>&gt;
&lt;/<span class="selector">note</span>&gt;</pre>
#TODO JS
-<div class="sub">
+<div class="sub part">
<h4 class="title"><span class="number"><a name="1.5.1">1.5.1</a></span> Position filters</h4>
<p>The following filters are used to select a subset of elements, depending on their position in the <em>current</em> tree order.</p>
<p>In the case of several matched parents the filters refer to the <strong>combined collection</strong> returned whereas their <tt>Child</tt> variant to the children's position <strong>inside their own parent</strong>.</p>
@@ -752,12 +791,12 @@ <h4 class="title"><span class="number"><a name="1.5.1">1.5.1</a></span> Position
<span class="comment">//this matches elements whose index is 1, 2, 3 and &ge; 8 in the collection</span>
<span class="filter">:nth</span>(<span class="number">1</span>, <span class="number">3</span> &amp; <span class="number">8</span>, <span class="number">*</span>) { }</pre>
</div>
-<div class="sub">
+<div class="sub yet">
<h4 class="title"><span class="number"><a name="1.5.2">1.5.2</a></span> Hierarchy filters</h4>
<p>You can filter elements by their relationship with the other elements in the tree.</p>
<p>The <strong>parent filter</strong> matches every element that is a parent, which means that it has at least one child. If the element is an ancestor it will always also be a parent.</p>
<pre><span class="comment">//this matches childless elements</span>
-!<span class="filter">:parent</span> { }</pre>
+<span class="modifier">!</span><span class="filter">:parent</span> { }</pre>
<p>The <strong>has filter</strong> matches every element of which at least one child matches the specified selector. If a number or a condition is given, the amount of children is compared.</p>
<pre><span class="comment">//this matches only elements that are parent of a message element</span>
<span class="filter">:has</span>(<span class="selector">message</span>) { }
@@ -770,7 +809,7 @@ <h4 class="title"><span class="number"><a name="1.5.2">1.5.2</a></span> Hierarch
<span class="comment">//this matches only element that have 4 or more ancestors</span>
<span class="filter">:has</span>(.. &gt;= <span class="number">4</span>) { }</pre>
</div>
-<div class="sub">
+<div class="sub part">
<h4 class="title"><span class="number"><a name="1.5.3">1.5.3</a></span> System flags</h4>
<p>You usually want to provide some kind of feedback to the user when he/she is using your site. Targeting elements using flags is an easy way to add interactivity to the site, to create a compelling user experience.</p>
<p>The <a name="f_hover"><strong>hover flag</strong></a> targets only elements that are lying under the mouse pointer.</p><pre><span class="comment">//matches every element which has the mouse over it
@@ -783,17 +822,15 @@ <h4 class="title"><span class="number"><a name="1.5.3">1.5.3</a></span> System f
<p>The <strong>target flag</strong> targets elements which are a potential landing point for the currently dragged element(s).</p><pre><span class="comment">//matches every element that is a dragging destination of the
//currently dragged element</span>
<span class="flag">::target</span> { }</pre>
-<p><em>Note:</em> If you want to match a dragging destination which is currently hovered by a dragged element you just need to append the <a href="#f_hover">hover flag</a>:</p>
+<p><em>Note:</em> If you want to match a dragging destination which is currently hovered by a dragged element you just need to append the hover flag:</p>
<pre><span class="comment">//matches every dragging destination elements when a dragged
//element is over it</span>
<span class="flag">::target::hover</span> { }</pre>
<p>The <strong>focus flag</strong> matches the element that currently receives user input (through tabbing for example).</p>
<pre><span class="comment">//matches every element which receives user input</span>
-<span class="flag">::focus</span> { }
-<span class="comment">//matches every element that does not receive user input</span>
-!<span class="flag">::focus</span> { }</pre>
+<span class="flag">::focus</span> { }</pre>
</div>
-<div class="sub">
+<div class="sub yet">
<h4 class="title"><span class="number"><a name="1.5.4">1.5.4</a></span> The attribute filter</h4>
<p>You can filter elements based on their attributes using the <strong>attribute filter</strong>.</p>
<pre>
@@ -806,7 +843,7 @@ <h4 class="title"><span class="number"><a name="1.5.4">1.5.4</a></span> The attr
<span class="comment">//which is equivalent to</span>
:[title], :[href] { }</pre>
</div>
-<div class="sub">
+<div class="sub yet">
<h4 class="title"><span class="number"><a name="1.5.5">1.5.5</a></span> Text matching filters</h4>
<p>These filters select elements which text—either the content text or the value of the attribute(s)—matches a given string, condition or pattern. You can use the sensitive argument to enable the case sensitivity.</p>
<p>The <strong>contains filter</strong> matches elements that contain a given string in the text.</p>
@@ -840,7 +877,7 @@ <h4 class="title"><span class="number"><a name="1.5.5">1.5.5</a></span> Text mat
<span class="comment">//matches the element(s) whose content text has the less characters</span>
<span class="filter">:length</span>(min) { }</pre>
</div>
-<div class="sub">
+<div class="sub yet">
<h4 class="title"><span class="number"><a name="1.5.6">1.5.6</a></span> Property filters</h4>
<p>Conditions are used to test whether an element is matched based on its properties.</p>
<p>The computed values are tested against, not the declared ones. For example if you set the height of a container to 50%, the value will be dynamically returned in points.</p>
@@ -852,7 +889,7 @@ <h4 class="title"><span class="number"><a name="1.5.6">1.5.6</a></span> Property
<span class="selector">*</span>(<span class="property">height</span> &gt; <span class="number">300</span> &amp; <span class="property">width</span> &lt; <span class="number">400</span>) { }</pre>
<p><em>Note:</em> If recursion occurences are detected the condition(s) will be evaluated in one pass thus the value(s) returned will always be the same.</p>
</div>
-<div class="sub">
+<div class="sub part">
<h4 class="title"><span class="number"><a name="1.5.7">1.5.7</a></span> Custom filters &amp; User flags</h4>
<p>In HSS it is possible to extend the available filters with your own using the <span class="instruction">#filter</span> instruction. They can also be imported from an external file, as any other part of your HSS code, which enables the creation of custom libraries.</p>
<pre>
@@ -872,7 +909,7 @@ <h4 class="title"><span class="number"><a name="1.5.7">1.5.7</a></span> Custom f
</pre>
#TODO <a href="https://github.com/AXR/Specification/issues/36">Issue 36</a>
</div>
-<div class="sub">
+<div class="sub part">
<h4 class="title"><span class="number"><a name="1.5.8">1.5.8</a></span> Splitters</h4>
<p>Splitters are preceded by <code>/</code> and directly act on the current selection outputting one or more collections in result.</p>
<p>The <a name="s_each"><strong>each splitter</strong></a> separates each element that would otherwise be joined in a selection. Apart from being a content text splitter, it is particularly useful in association with sibling combinators, <a href="#1.5.9">collection filters</a> or other splitters.</p>
@@ -884,7 +921,7 @@ <h4 class="title"><span class="number"><a name="1.5.8">1.5.8</a></span> Splitter
<p><em>Note:</em> You can't negate a splitter.</p>
#TODO <a href="https://github.com/AXR/Specification/issues/47">47</a> and <a href="https://github.com/AXR/Specification/issues/46">46</a>
</div>
-<div class="sub">
+<div class="sub yet">
<h4 class="title"><span class="number"><a name="1.5.9">1.5.9</a></span> Collection Filters</h4>
<p>The <strong>is filter</strong> lets you filter the returned collection(s) by a particular element type.</p>
<pre><span class="comment">//this will only match the <strong>first siblings</strong> following <em>from</em> elements
@@ -897,13 +934,13 @@ <h4 class="title"><span class="number"><a name="1.5.9">1.5.9</a></span> Collecti
<span class="comment">//this matches the fourth element out of the combined collection
//of notes' children if it's not a <em>message</em> element</span>
-<span class="selector">note</span> <span class="filter">:nth(<span class="number">4</span>)</span><span class="filter">!:is(<span class="selector">message</span>)</span> { }
+<span class="selector">note</span> <span class="filter">:nth(<span class="number">4</span>)</span><span class="modifier">!</span><span class="filter">:is(<span class="selector">message</span>)</span> { }
<span class="comment">//if the <em>message</em> element is either the 1st, 2nd, 3rd or 4th element
//and then removed from the returned collection (!message)
//it would have an impact on the position of the remaining elements
//in these cases the following example wouldn't match the
//same element(s) than the previous example</span>
-<span class="selector">note</span> !<span class="selector">message</span><span class="filter">:nth(<span class="number">4</span>)</span> { }</pre>
+<span class="selector">note</span> <span class="modifier">!</span><span class="selector">message</span><span class="filter">:nth(<span class="number">4</span>)</span> { }</pre>
<p>Using the <strong>oneIs filter</strong> you can match a collection on the condition that it contains a certain element.</p>
<pre>
<span class="comment">//this matches the children of the first <em>note</em> element
@@ -914,54 +951,80 @@ <h4 class="title"><span class="number"><a name="1.5.9">1.5.9</a></span> Collecti
<section class="chapter">
<h3 class="title"><span class="number"><a name="1.6">1.6</a></span> Properties</h3>
- <div class="sub">
+ <div class="sub part">
<h4 class="title"><span class="number"><a name="1.6.1">1.6.1</a></span> Literal values</h4>
<p>Literal values are keywords, numbers, strings. As opposed to more complex constructs they just represent one value.</p>
+ <h5>Special keywords</h5>
+ <p>inherit</p>
+ <p>current</p>
+ <p>default</p>
+#TODO <a href="https://github.com/AXR/Specification/issues/51">Issue 51</a>
</div>
- <div class="sub">
+ <div class="sub comp">
<h4 class="title"><span class="number"><a name="1.6.2">1.6.2</a></span> Expressions</h4>
- <p>You can write an expression anywhere a numerical value is accepted, and it is generally only useful when used with a variable value. If all the values are fixed numbers, the result will be calculated at parse time and it would be interpreted as if the result had been written. The available operators are: sum (+), subtract (-), multiply (*) and divide (/). You can also use parenthesis to designate the order of the operations, in an inside-out order. Otherwise, multiple operations are executed following the mathematical order (first multiply and divide, then sum and subtract).</p>
+ <p>You can write an expression anywhere a numerical value is accepted, and it is generally only useful when used with a variable value. If all the values are fixed numbers, the result will be calculated at parse time and it would be interpreted as if the result had been written. The available operations are: sum (+), subtraction (-), multiplication (*) and division (/). You can also use parenthesis to designate the order of the operations, in an inside-out order. Otherwise, multiple operations are executed following the mathematical order (first multiply and divide, then sum and subtract).</p>
</div>
- <div class="sub">
+ <div class="sub part">
<h4 class="title"><span class="number"><a name="1.6.3">1.6.3</a></span> Functions</h4>
<p>Functions take some parameters and create an output. The result of the function is what is assigned to the property.</p>
<h5><a name="1.6.3.1">References</a></h5>
-
<p>You can take values from other elements to apply them to the properties of the currently selected element(s).&#160; The value returned is always the computed value of that property, not the declared one. The syntax is <span>ref(<span class="property">propertyName</span> of <span class="selector">selector</span>)</span> and can be used anywhere a value is accepted.</p>
<p>Consider the following XML snippet:</p>
<pre class="xml">&lt;<span class="selector">parent</span>&gt;
- &lt;<span class="selector">child</span>&gt;dynamically generated content text, changes in height&lt;/<span class="selector">child</span>&gt;
+ &lt;<span class="selector">child1</span>&gt;dynamically generated content text, changes in height&lt;/<span class="selector">child1</span>&gt;
&lt;<span class="selector">child2</span>&gt;static content text&lt;/<span class="selector">child2</span>&gt;
&lt;/<span class="selector">parent</span>&gt;</pre>
<p>Suppose that in your layout each child elements is a column, taking half of the horizontal width. If you wanted the second child element to always have the same height as the first one, since the first changes in height, you could not use any static value. Instead, you would reference the first child from the second one.</p>
<pre><span class="comment">//this makes both columns the same height</span>
<span class="selector">parent child2</span>
{
-&#160;&#160;&#160; <span class="property">height</span>: ref(<span class="property">height</span> of <span class="selector">child</span>)
+&#160;&#160;&#160; <span class="property">height</span>: ref(<span class="property">height</span> of <span class="selector">child1</span>)
}</pre>
<p>As you can see, the scope of the specified selector is the scope of the element on which you are declaring the reference. To select elements outside of that scope, the <span class="object">@parent</span> or <span class="object">@root</span> objects are used.</p>
-<p>modifiers: max, min, avg and sum</p>
-#TODO <a href="https://github.com/AXR/Specification/issues/21">Issue 21</a> and exceptions
+<p>Using the sum, avg, max and min <strong>modifiers</strong> you can respectively do a summation, get an average and retrieve the maximum or minimum.</p>
+<pre><span class="selector">parent *</span>
+{
+ <span class="comment">//this sets the width of <em>parent</em>s' children
+ //to the width of whichever is the widest one</span>
+ <span class="property">width</span>: ref(<span class="modifier">max</span> <span class="property">width</span>);
+ <span class="comment">//which is equivalent to</span>
+ <span class="property">width</span>: ref(<span class="modifier">max</span> <span class="property">width</span> of <span class="object">@this</span>);
+}</pre>
+<p>Normally if several elements, which don't share the same value for the referenced property, are matched by the inner selector, the reference, expecting only one value, will return nothing. Setting modifiers or using certain <a href="#1.3.7">reference objects</a> at the end of the selector chain permit to bypass this rule.</p>
+<pre><span class="selector">parent</span>
+{
+ <span class="selector">child1</span> { <span class="property">background</span>: <span class="value">#0</span> }
+ <span class="selector">child2</span> { <span class="property">background</span>: <span class="value">#F</span> }
+
+ <span class="comment">//the reference won't return anything</span>
+ <span class="property">background</span>: ref(<span class="property">background</span> of <span class="selector">@this *</span>);
+}</pre>
<h5>attr()</h5>
<h5>sel()</h5>
<h5>max() and min()</h5>
<h5>floor(), ceil() and round()</h5>
</div>
- <div class="sub">
+ <div class="sub part">
<h4 class="title"><span class="number"><a name="1.6.4">1.6.4</a></span> Color</h4>
<p></p>
</div>
- <div class="sub">
+ <div class="sub part">
<h4 class="title"><span class="number"><a name="1.6.5">1.6.5</a></span> isA</h4>
#TODO <a href="https://github.com/AXR/Specification/issues/19">Issue 19</a>
</div>
+ <div class="sub">
+ <h4 class="title"><span class="number"><a name="1.6.6">1.6.6</a></span> Read-only properties</h4>
+ <h5>x and y</h5>
+ <h5>level</h5>
+ <h5>children</h5>
+ </div>
</section>
<section class="chapter">
<h3 class="title"><span class="number"><a name="1.7">1.7</a></span> Objects</h3>
<p>Objects have a hierarchy, in which objects can descend from others, hence inheriting all the properties defined in their <a href="#1.3.7.5">owner</a>. This enables great flexibility and modularization of the code.</p>
<p>Objects can be set to be of a certain type, placing an object type immediately after the at sign, or automatically deriving it from the context. It is followed by whitespace, and optionally an object name and more optional whitespace, followed by a block. Inside the block, its properties are defined.</p>
<div class="sub">
- <h4 class="title"><span class="number"><a name="1.7.1">1.7.1</a></span> The support object</h4>
+ <h4 class="title"><span class="number"><a name="1.7.1">1.7.1</a></span> Object dot notation</h4>
</div>
</section>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.