Skip to content

Instantly share code, notes, and snippets.

@bkardell

bkardell/math-plugins.html

Created December 16, 2011 21:21
Show Gist options
  • Save bkardell/1488046 to your computer and use it in GitHub Desktop.
Save bkardell/1488046 to your computer and use it in GitHub Desktop.
Download ZIP
A dumb math plugin
Raw
math-plugins.html
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="http://69.54.28.122/describe.css" />
</head>
<body>
<h1>Math Filters Level 1 (<script type="text/javascript">document.write(window.location.href.replace(/.html/,'.js').replace('http://69.54.28.122:8081/describe?u=',''));</script>)</h1>
<h2>Math pseudo-class filters</h2>
<p>Math psudeo-classes provide a mechanism to select elements based on the
numerical qualities of one of their attributes.</p>
<h2>Table of Contents</h2>
<ol>
<li><a href="greaterthan">:-math-greaterthan</a></li>
<li><a href="#lessthan">:-math-lessthan</a></li>
<li><a href="#greatest">:-math-greatest</a></li>
<li><a href="#least">:-math-least</a></li>
</ol>
<h3 class="sectionnumber"><a name="greaterthan">1. The -math-greaterthan pseudo-class</a></h3>
<p>The greaterthan pseudo class <span class="sig">:-math-greaterthan(<span class="arg">attributeName</span>,<span class="arg">value</span>)</span>,
is a funtional notation taking two arguments, the argument name to test and the value to test against.
It represents an element whose attribute is greater than the numeric value provided.
</p>
<div class="example">
<p>Examples: </p>
<p>
The following selector matches all div elements in an HTML document with
a -data-donation attribute with a numeric value less than 100 and makes their
font bold:
</p>
<pre>div:-math-greaterthan(-data-donation, 100){
font-weight: bold;
}</pre>
</div>
<h3 class="sectionnumber"><a name="lessthan">2. The -math-lessthan pseudo-class</a></h3>
<p>The lessthan pseudo class <span class="sig">:-math-lessthan(<span class="arg">attributeName</span>,<span class="arg">value</span>)</span>,
is a funtional notation taking two arguments, the argument name to test and the value to test against.
It represents an element whose attribute is less than the numeric value provided.
</p>
<div class="example">
<p>Examples: </p>
<p>
The following selector matches all div elements in an HTML document with
a -data-highscore attribute with a numeric value less than 10000 and makes their
color blue:
</p>
<pre>div:-math-lessthan(-data-highscore, 10000){
color: blue;
}</pre>
</div>
<h3 class="sectionnumber"><a name="greatest">3. The -math-greatest pseudo-class</a></h3>
<p>The greatest pseudo class <span class="sig">:-math-greatest(<span class="arg">attributeName</span>)</span>,
is a funtional notation taking one argument, the argument name to test.
It represents a an element whose attribute is greater than those of all of its siblings.
</p>
<div class="example">
<p>Examples: </p>
<p>
The following selector matches the div element whose -data-score attribute has the greatest
value among its siblings makes its background yellow:
</p>
<pre>div:-math-greatest(-data-score){
background-color: yellow;
}</pre>
<p>Given the following html, the rule above would make background of the third div yellow:
<pre>&lt;div -data-score="10000"&gt;Clint&lt;/div&gt;
&lt;div -data-score="8000"&gt;Shekhar&lt;/div&gt;
&lt;div -data-score="12000"&gt;Brian&lt;/div&gt;
&lt;div -data-score="7450"&gt;Joe&lt;/div&gt;
</pre>
</div>
<h3 class="sectionnumber"><a name="least">3. The -math-least pseudo-class</a></h3>
<p>The least pseudo class <span class="sig">:-math-least(<span class="arg">attributeName</span>)</span>,
is a funtional notation taking one argument, the argument name to test.
It represents a an element whose attribute is lesser than those of all of its siblings.
</p>
<div class="example">
<p>Examples: </p>
<p>
The following selector matches the div element whose -data-score attribute has the least
value among its siblings makes its background red:
</p>
<pre>div:-math-least(-data-score){
background-color: yellow;
}</pre>
<p>Given the following html, the rule above would make background of the fourth div red:
<pre>&lt;div -data-score="10000"&gt;Clint&lt;/div&gt;
&lt;div -data-score="8000"&gt;Shekhar&lt;/div&gt;
&lt;div -data-score="12000"&gt;Brian&lt;/div&gt;
&lt;div -data-score="7450"&gt;Joe&lt;/div&gt;
</pre>
</div>
</body>
</html>
Raw
math-plugins.js
Hitch.add([
{
name: '-math-greaterthan',
filter: function(match,argsString){
var args = argsString.split(",");
var value = match.getAttribute(args[0]);
if(!isNaN(value) && !isNaN(args[1])){
return (value > parseInt(args[1],10));
}
return false;
}
},{
name: '-math-lessthan',
filter: function(match,argsString){
var args = argsString.split(",");
var value = match.getAttribute(args[0]);
if(!isNaN(value) && !isNaN(args[1])){
return (value < parseInt(args[1],10));
}
return false;
}
},
{
name: '-math-greatest',
filter: function(match,argsString,c){
var v1, vTemp, temp, biggest, el, args = argsString.split(",");
v1 = match.getAttribute(args[0]);
if(v1 && !isNaN(v1)){
for(var i=0;i<c.siblings.length;i++){
temp = c.siblings[i];
vTemp = temp.getAttribute(args[0]);
if(vTemp && !isNaN(vTemp)){
vTemp = parseInt(vTemp, 10);
if(!biggest || vTemp > biggest){
el = temp;
biggest = vTemp;
};
}
}
return match === el;
}
return false;
}
},
{
name: '-math-least',
filter: function(match,argsString,c){
var v1, vTemp, temp, smallest, el, args = argsString.split(",");
v1 = match.getAttribute(args[0]);
if(v1 && !isNaN(v1)){
for(var i=0;i<c.siblings.length;i++){
temp = c.siblings[i];
vTemp = temp.getAttribute(args[0]);
if(vTemp && !isNaN(vTemp)){
vTemp = parseInt(vTemp, 10);
if(!smallest || vTemp < smallest){
el = temp;
smallest = vTemp;
};
}
}
return match === el;
}
return false;
}
}
]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment