docs/dom.html
<!DOCTYPE html>
<html>
<head>
<title>dom.js</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
<div id="container">
<div id="background"></div>
<ul id="jump_to">
<li>
<a class="large" href="javascript:void(0);">Jump To …</a>
<a class="small" href="javascript:void(0);">+</a>
<div id="jump_wrapper">
<div id="jump_page">
<a class="source" href="ajax.html">
ajax.js
</a>
<a class="source" href="anim.html">
anim.js
</a>
<a class="source" href="core.html">
core.js
</a>
<a class="source" href="detect.html">
detect.js
</a>
<a class="source" href="dom.html">
dom.js
</a>
<a class="source" href="end.html">
end.js
</a>
<a class="source" href="evt.html">
evt.js
</a>
<a class="source" href="fx.html">
fx.js
</a>
<a class="source" href="legacy.html">
legacy.js
</a>
<a class="source" href="misc.html">
misc.js
</a>
<a class="source" href="more.html">
more.js
</a>
<a class="source" href="polyfill.html">
polyfill.js
</a>
<a class="source" href="sizzle.html">
sizzle.js
</a>
<a class="source" href="start.html">
start.js
</a>
<a class="source" href="test.html">
test.js
</a>
<a class="source" href="util.html">
util.js
</a>
</div>
</li>
</ul>
<ul class="sections">
<li id="title">
<div class="annotation">
<h1>dom.js</h1>
</div>
</li>
<li id="section-1">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-1">¶</a>
</div>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-2">¶</a>
</div>
<h3 id="main-dom-class">Main DOM Class</h3>
<p><strong> Params: </strong></p>
<ul>
<li><code>els</code> {Array} The elements to manipulate</li>
<li><code>sel</code> {String} The selector used</li>
</ul>
<p><strong> Examples </strong></p>
<pre><code><span class="hljs-keyword">new</span> Dom (<span class="hljs-built_in">document</span>.querySelectorAll(p:first-child);
</code></pre><pre><code><span class="hljs-keyword">new</span> Dom ([<span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"div"</span>)]);
</code></pre><pre><code><span class="hljs-keyword">new</span> Dom ([<span class="hljs-built_in">document</span>.getElementByid(<span class="hljs-string">"box"</span>)]);
</code></pre><pre><code><span class="hljs-keyword">new</span> Dom (<span class="hljs-built_in">document</span>.getElementsByClassName(<span class="hljs-string">"hidden"</span>));
</code></pre><pre><code><span class="hljs-keyword">new</span> Dom (<span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">"mark"</span>));
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Dom</span> <span class="hljs-params">(els, sel)</span> </span>{
<span class="hljs-keyword">var</span> _i, _l;
<span class="hljs-comment">/* Note that `this` is an object and NOT an Array */</span>
<span class="hljs-comment">/* Loop thorugh the NodeList and set `this[index]` for `els[index]` */</span>
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>, _l = els.length; _i < _l; _i += <span class="hljs-number">1</span>) {
<span class="hljs-keyword">this</span>[_i] = els[_i];
}
<span class="hljs-comment">/* Useful for looping through as ours is an object and not an array */</span>
<span class="hljs-keyword">this</span>.length = els.length;
<span class="hljs-comment">/* Know what selector is used to select the elements */</span>
<span class="hljs-keyword">this</span>.sel = sel;
}
<span class="hljs-comment">/* Make it _look_ like an array */</span>
Dom.prototype = <span class="hljs-built_in">Array</span>.prototype;
extend(Dom.prototype, {
<span class="hljs-comment">/* Set the constructor to Dom. It defaults to Array. We don't that */</span>
constructor: Dom
});</pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-3">¶</a>
</div>
<h3 id="hilo-css-helper-methods">Hilo CSS Helper Methods</h3>
</div>
</li>
<li id="section-4">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-4">¶</a>
</div>
<p><strong><em>unhyph</em></strong> <em>Internal</em></p>
<p>Return a string repacing all <code>-</code>s with <code>""</code> and making the letter
next to every <code>-</code> uppercase</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>prop</code>: {String} CSS Property Name</li>
</ul>
<p><strong>Examples</strong>:</p>
<pre><code>unhyph(<span class="hljs-string">"background-color"</span>); <span class="hljs-comment">// backgroundColor</span>
unhyph(<span class="hljs-string">"color"</span>); <span class="hljs-comment">// color</span>
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">unhyph</span> <span class="hljs-params">(prop)</span> </span>{
<span class="hljs-keyword">return</span> prop.toLowerCase().replace(<span class="hljs-regexp">/-(.)/g</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(m, m1)</span> </span>{
<span class="hljs-keyword">return</span> m1.toUpperCase();
});
}</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-5">¶</a>
</div>
<p><strong><em>unitize</em></strong> <em>Internal</em></p>
<p>Add necessary suffix to the number for certain CSS properties
<em>This will later be used by .css() and a number of other methods</em></p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>unit</code>: {String|Number} Valid CSS Unit (<code>unitize()</code> Returns the same thing if {String})</li>
<li><code>prop</code>: {String} CSS Property Name</li>
</ul>
<p><strong>Examples</strong>:</p>
<pre><code>unitize(<span class="hljs-string">"background-color"</span>); <span class="hljs-comment">// backgroundColor</span>
unhyph(<span class="hljs-string">"color"</span>); <span class="hljs-comment">// color</span>
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">unitize</span> <span class="hljs-params">(unit, prop)</span> </span>{
<span class="hljs-comment">/* All the CSS props. that are to be defaulted to px values */</span>
<span class="hljs-keyword">var</span> pixel = {
<span class="hljs-string">"width"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"maxWidth"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"minWidth"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"height"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"maxHeight"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"minHeight"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"borderWidth"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"borderTopWidth"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"borderLeftWidth"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"borderBottomWidth"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"borderRightWidth"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"borderRadius"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"outlineWidth"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"outlineOffset"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"strokeWidth"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"fontSize"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"lineHeight"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"letterSpacing"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"textIndent"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"textUnderlineWidth"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"margin"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"marginTop"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"marginLeft"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"marginBottom"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"marginRight"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"padding"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"paddingTop"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"paddingLeft"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"paddingBottom"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"paddingRight"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"top"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"left"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"bottom"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"right"</span>: <span class="hljs-literal">true</span>
};
<span class="hljs-comment">/* String values are not be unitized no matter what */</span>
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> unit === <span class="hljs-string">"string"</span>) {
<span class="hljs-keyword">return</span> unit;
}
<span class="hljs-comment">/* If the property is present in the previously mentioned
object, the unit is suffixed with "px" */</span>
<span class="hljs-keyword">if</span> (pixel[prop] === <span class="hljs-literal">true</span>) {
<span class="hljs-keyword">return</span> unit + <span class="hljs-string">"px"</span>;
}
<span class="hljs-keyword">return</span> unit;
}</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-6">¶</a>
</div>
<p><strong><em>hilo.create</em></strong></p>
<p>Create an element</p>
<p><strong>Params</strong>:</p>
<ul>
<li><code>tagName</code>: {String} Tag Name or Node name of element</li>
<li><code>attrs</code>: {Object} An object containing the attributes and values</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$.create(<span class="hljs-string">"div"</span>, {
<span class="hljs-keyword">class</span>: <span class="hljs-string">"post"</span>,
<span class="hljs-string">"data-id"</span>: <span class="hljs-number">2</span>
});
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> hilo.create = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(tagName, attrs)</span> </span>{
<span class="hljs-keyword">var</span> el = <span class="hljs-keyword">new</span> Dom([<span class="hljs-built_in">document</span>.createElement(tagName)]), key;
<span class="hljs-keyword">if</span> (attrs) {
<span class="hljs-comment">/* Add Class if the `className` is set */</span>
<span class="hljs-keyword">if</span> (attrs.className) {
el.addClass(attrs.className);
<span class="hljs-keyword">delete</span> attrs.className;
}
<span class="hljs-comment">/* Set html to if `text` content is given */</span>
<span class="hljs-keyword">if</span> (attrs.text) {
el.html(attrs.text);
<span class="hljs-keyword">delete</span> attrs.text;
}
<span class="hljs-comment">/* Set other attributes */</span>
<span class="hljs-keyword">for</span> (key <span class="hljs-keyword">in</span> attrs) {
<span class="hljs-keyword">if</span>(attrs.hasOwnProperty(key)) {
el.attr(key, attrs[key]);
}
}
}
<span class="hljs-keyword">return</span> el;
};
extend(Dom.prototype, {</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-7">¶</a>
</div>
<h2 id="helper-functions">Helper Functions</h2>
</div>
</li>
<li id="section-8">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-8">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.each</em></strong></p>
<p>Execute a function on selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>fn</code>: {Function} The function to be called</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p"</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
doSomethingWith(e);
});
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> each: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(fn)</span> </span>{
<span class="hljs-keyword">this</span>.map(fn);
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; <span class="hljs-comment">/* return the current Dom instance */</span>
},</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-9">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.map</em></strong></p>
<p>Return the results of executing a function
on all the selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>fn</code>: {Function} The function to be called</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"div.need-cf"</span>).map(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(e)</span> </span>{
doSomethingWith(e);
});
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> map: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(fn)</span> </span>{
<span class="hljs-keyword">var</span> results = []
, _i
, _l;
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>, _l = <span class="hljs-keyword">this</span>.length; _i < _l; _i += <span class="hljs-number">1</span>) {
results.push(fn.call(<span class="hljs-keyword">this</span>, <span class="hljs-keyword">this</span>[_i], _i));
}
<span class="hljs-keyword">return</span> results;
},</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-10">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.one</em></strong></p>
<p>Map on selected elements and return them based
on the number of selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>fn</code>: {Function} The function to be called</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> one: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(fn)</span> </span>{
<span class="hljs-keyword">var</span> m = <span class="hljs-keyword">this</span>.map(fn);
<span class="hljs-keyword">return</span> m.length > <span class="hljs-number">1</span> ? m : m[<span class="hljs-number">0</span>];
},</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-11">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.first</em></strong></p>
<p>Execute a function on the first selected element</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>fn</code>: {Function} The function to be called</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"div"</span>).first(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(e)</span> </span>{
<span class="hljs-built_in">console</span>.log(e + <span class="hljs-string">" is the first div"</span>);
});
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> first: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(fn)</span> </span>{
<span class="hljs-keyword">return</span> fn(<span class="hljs-keyword">this</span>[<span class="hljs-number">0</span>]);
},</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-12">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.filter</em></strong></p>
<p>Filter the selected element and return the
elements that pass the test (or return true)</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>fn</code>: {Function} The function to be called</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"div"</span>).filter(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
<span class="hljs-keyword">return</span> el.className.split(<span class="hljs-string">"hidden"</span>).length > <span class="hljs-number">1</span>;
});
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> filter: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(fn)</span> </span>{
<span class="hljs-keyword">var</span> len = <span class="hljs-keyword">this</span>.length >>> <span class="hljs-number">0</span>
, _i
, t = <span class="hljs-built_in">Object</span>(<span class="hljs-keyword">this</span>)
, res = []
, val;
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < len; _i++) {
<span class="hljs-keyword">if</span> (_i <span class="hljs-keyword">in</span> t) {
val = t[_i];
<span class="hljs-keyword">if</span> (fn.call(<span class="hljs-keyword">this</span>, val, _i, t)) {
res.push(val);
}
}
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Dom(res);
},</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-13">¶</a>
</div>
<h2 id="element-selections-etc-">Element Selections, etc.</h2>
</div>
</li>
<li id="section-14">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-14">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.get</em></strong></p>
<p>Get a JavaScript Array containing selected elements</p>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"script"</span>).get();
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> get: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">var</span> els = [];
<span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
els.push(el);
});
<span class="hljs-keyword">return</span> els;
},</pre></div></div>
</li>
<li id="section-15">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-15">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.firstEl</em></strong></p>
<p>Return first element of the selected elements</p>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p.hidden"</span>).firstEl().show();
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> firstEl: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Dom([<span class="hljs-keyword">this</span>[<span class="hljs-number">0</span>]]);
},</pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-16">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.lastEl</em></strong></p>
<p>Return last element of the selected elements</p>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p.hidden"</span>).lastEl().show();
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> lastEl: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Dom([<span class="hljs-keyword">this</span>[<span class="hljs-keyword">this</span>.length - <span class="hljs-number">1</span>]]);
},</pre></div></div>
</li>
<li id="section-17">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-17">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.el</em></strong></p>
<p>Return nth element of the selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>place</code>: {Number} The index of the element (Starts from 1)</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p.hidden"</span>).el(<span class="hljs-number">3</span>).show();
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> el: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(place)</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Dom([<span class="hljs-keyword">this</span>[place - <span class="hljs-number">1</span>]]);
},</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-18">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.children</em></strong></p>
<p>Return the children of selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>sel</code>: {String} Optional filtering selector</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code><span class="hljs-keyword">var</span> childrenOfContainer = $(<span class="hljs-string">"div.container"</span>).children();
$(<span class="hljs-string">"div.container"</span>).children(<span class="hljs-string">":not(.hidden)"</span>).addClass(<span class="hljs-string">"me"</span>);
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> children: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(sel)</span> </span>{
<span class="hljs-keyword">var</span> children = [], _i, _l;
<span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
<span class="hljs-keyword">var</span> childNodes = select(sel ? sel : <span class="hljs-string">"*"</span>, el);
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>, _l = childNodes.length; _i < _l; _i += <span class="hljs-number">1</span>) {
children = children.concat(childNodes[_i]);
}
});
<span class="hljs-keyword">return</span> children;
},</pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-19">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.parents</em></strong></p>
<p>Return the parents of selected elements</p>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"div#editor"</span>).parent().hide()
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> parents: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">var</span> pars = [];
<span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
pars = pars.concat(el.parentElement);
});
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Dom(pars);
},</pre></div></div>
</li>
<li id="section-20">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-20">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.parent</em></strong></p>
<p>Return the parent of the first selected element</p>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"div#editor"</span>).parent().hide()
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> parent: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.first(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Dom([el.parentElement]);
});
},</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-21">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.rel</em></strong></p>
<p>Return relatives of selected elements based
on the given relation</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>sul</code>: {String} Relation</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"div#editor"</span>).rel(<span class="hljs-string">"nextSibling"</span>).addClass(<span class="hljs-string">"next-to-editor"</span>);
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> rel: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(sul)</span> </span>{
<span class="hljs-keyword">var</span> els = [];
<span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
els.push(el[sul]);
});
<span class="hljs-keyword">return</span> els;
},</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-22">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.next</em></strong></p>
<p>Return next sibling elements of selected elements</p>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"div#editor"</span>).next().addClass(<span class="hljs-string">"next-to-editor"</span>);
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> next: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.rel(<span class="hljs-string">"nextElementSibling"</span>);
},</pre></div></div>
</li>
<li id="section-23">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-23">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.prev</em></strong></p>
<p>Return next sibling elements of selected elements</p>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"div#editor"</span>).prev().addClass(<span class="hljs-string">"prev-to-editor"</span>);
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> prev: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.rel(<span class="hljs-string">"previousElementSibling"</span>);
},</pre></div></div>
</li>
<li id="section-24">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-24">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.html</em></strong></p>
<p>Set or return innerHTML of selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>html</code>: {String} HTML Code to be inserted</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p:first-child"</span>).html(<span class="hljs-string">"first-p"</span>);
<span class="hljs-keyword">var</span> html = $(<span class="hljs-string">"span"</span>).html();
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> html: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(htmlCode)</span> </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> htmlCode !== <span class="hljs-string">"undefined"</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el)</span> </span>{
el.innerHTML = htmlCode;
});
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.first(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el)</span> </span>{
<span class="hljs-keyword">return</span> el.innerHTML;
});
}
},</pre></div></div>
</li>
<li id="section-25">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-25">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.empty</em></strong></p>
<p>Empty the selected elements</p>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"#todo-list"</span>).empty();
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> empty: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.html(<span class="hljs-string">""</span>);
},</pre></div></div>
</li>
<li id="section-26">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-26">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.append</em></strong></p>
<p>Append html to selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>html</code>: {String} HTML Code to be appeneded</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p:first-child"</span>).append(<span class="hljs-string">" - From the first p child"</span>)
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> append: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(html)</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
el.innerHTML += html;
});
},</pre></div></div>
</li>
<li id="section-27">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-27">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.prepend</em></strong></p>
<p>Prepend html to selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>html</code>: {String} HTML Code to be appeneded</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p:first-child"</span>).append(<span class="hljs-string">" - From the first p child"</span>)
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> prepend: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(html)</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
el.innerHTML = html + el.innerHTML;
});
},</pre></div></div>
</li>
<li id="section-28">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-28">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.value</em></strong></p>
<p>Get or set the value attribute of the selected element</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>val</code>: {String} Value to set to</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"#my-form"</span>).children(<span class="hljs-string">"input#name"</span>).value();
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> value: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(val)</span> </span>{
<span class="hljs-keyword">if</span> (val) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
el.value = val;
});
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.first(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
<span class="hljs-keyword">return</span> el.value;
});
}
},</pre></div></div>
</li>
<li id="section-29">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-29">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.id</em></strong></p>
<p>Get or set the ID of first element</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>id</code>: {String} ID to set</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p.rect"</span>).first().id(<span class="hljs-string">"square"</span>);
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> id: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(id)</span> </span>{
<span class="hljs-keyword">if</span> (id) {</pre></div></div>
</li>
<li id="section-30">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-30">¶</a>
</div>
<p>Setting id of only one element because
id is intended to be an unique identifier</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.first(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el)</span> </span>{
el.id = id;
});
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.first(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
<span class="hljs-keyword">return</span> el.id;
});
}
},</pre></div></div>
</li>
<li id="section-31">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-31">¶</a>
</div>
<h3 id="classes-and-ids">Classes and IDs</h3>
</div>
</li>
<li id="section-32">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-32">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.class</em></strong></p>
<p>Add, remove, or check class(es)</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>action</code>: {String} Action to take (“add”, “remove”, “has”)</li>
<li><code>className</code>: {String|Array} Class(es) to add or remove</li>
</ul>
<p><strong>Examples</strong>:</p>
<pre><code>$(<span class="hljs-string">"div#editor"</span>).class(<span class="hljs-string">"add"</span>, <span class="hljs-string">"no-js"</span>);
</code></pre><pre><code>$(<span class="hljs-string">"div#editor"</span>).class(<span class="hljs-string">"remove"</span>, <span class="hljs-string">"no-js"</span>);
</code></pre><pre><code><span class="hljs-keyword">var</span> isHidden = $(<span class="hljs-string">"p"</span>).class(<span class="hljs-string">"has"</span>, <span class="hljs-string">"hidden"</span>);
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-string">"class"</span>: feature.classList === <span class="hljs-literal">true</span> ? <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(action, className)</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
<span class="hljs-keyword">var</span> _i, parts, contains, res = [];
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> className === <span class="hljs-string">"string"</span>) { <span class="hljs-comment">// A String</span>
parts = className.split(<span class="hljs-string">" "</span>);
<span class="hljs-keyword">if</span> (parts.length === <span class="hljs-number">1</span>) { <span class="hljs-comment">// String, one class</span>
contains = el.classList.contains(className);
<span class="hljs-keyword">switch</span> (action) {
<span class="hljs-keyword">case</span> <span class="hljs-string">"add"</span>: {
<span class="hljs-keyword">if</span> (!contains) {
el.classList.add(className);
}
} <span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"remove"</span>: {
<span class="hljs-keyword">if</span> (contains) {
el.classList.remove(className);
}
} <span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"has"</span>: {
res = <span class="hljs-literal">true</span>;
} <span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"toggle"</span>: {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < parts.length; _i += <span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (contains) {
el.classList.remove(parts[_i]);
} <span class="hljs-keyword">else</span> {
el.classList.add(parts[_i]);
}
}
} <span class="hljs-keyword">break</span>;
}
} <span class="hljs-keyword">else</span> { <span class="hljs-comment">// String, many classes</span>
contains = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(className)</span> </span>{
<span class="hljs-keyword">return</span> el.classList.contains(className);
};
<span class="hljs-keyword">switch</span> (action) {
<span class="hljs-keyword">case</span> <span class="hljs-string">"add"</span>: {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < parts.length; _i += <span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (!contains(parts[_i])) {
el.classList.add(parts[_i]);
}
}
} <span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"remove"</span>: {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < parts.length; _i += <span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (contains(parts[_i])) {
el.classList.remove(parts[_i]);
}
}
} <span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"has"</span>: {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < parts.length; _i += <span class="hljs-number">1</span>) {
res.push(contains(parts[_i]));
}
} <span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"toggle"</span>: {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < parts.length; _i += <span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (contains(parts[_i])) {
el.classList.remove(parts[_i]);
} <span class="hljs-keyword">else</span> {
el.classList.add(parts[_i]);
}
}
} <span class="hljs-keyword">break</span>;
}
}
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (className.length) { <span class="hljs-comment">// Array</span>
parts = className;
contains = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(className)</span> </span>{
<span class="hljs-keyword">return</span> el.classList.contains(className);
};
<span class="hljs-keyword">switch</span> (action) {
<span class="hljs-keyword">case</span> <span class="hljs-string">"add"</span>: {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < parts.length; _i += <span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (!contains(parts[_i])) {
el.classList.add(parts[_i]);
}
}
} <span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"remove"</span>: {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < parts.length; _i += <span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (contains(parts[_i])) {
el.classList.remove(parts[_i]);
}
}
} <span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"has"</span>: {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < parts.length; _i += <span class="hljs-number">1</span>) {
res.push(contains(parts[_i]));
}
} <span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"toggle"</span>: {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < parts.length; _i += <span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (contains(parts[_i])) {
el.classList.remove(parts[_i]);
} <span class="hljs-keyword">else</span> {
el.classList.add(parts[_i]);
}
}
} <span class="hljs-keyword">break</span>;
}
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> res === <span class="hljs-string">"boolean"</span> ? res : res.every(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
<span class="hljs-keyword">return</span> el === <span class="hljs-literal">true</span>;
});
});
} : <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(action, className)</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
<span class="hljs-keyword">var</span> _i, parts, contains, res = [];
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> className === <span class="hljs-string">"string"</span>) {
parts = className.split(<span class="hljs-string">" "</span>);
<span class="hljs-keyword">if</span> (parts.length === <span class="hljs-number">1</span>) {
contains = el.className.split(className).length > <span class="hljs-number">1</span>;
<span class="hljs-keyword">switch</span> (action) {
<span class="hljs-keyword">case</span> <span class="hljs-string">"add"</span>: {
<span class="hljs-keyword">if</span> (!contains) {
el.className += <span class="hljs-string">" "</span> + (className);
}
} <span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"remove"</span>: {
<span class="hljs-keyword">if</span> (contains) {
el.className.replace(className, <span class="hljs-string">""</span>);
}
} <span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"has"</span>: {
res = contains;
} <span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"toggle"</span>: {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < parts.length; _i += <span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (contains) {
el.className.replace(className, <span class="hljs-string">""</span>);
} <span class="hljs-keyword">else</span> {
el.className += <span class="hljs-string">" "</span> + className;
}
}
} <span class="hljs-keyword">break</span>;
}
} <span class="hljs-keyword">else</span> {
contains = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(className)</span> </span>{
<span class="hljs-keyword">return</span> el.className.split(className).length > <span class="hljs-number">1</span>;
};
<span class="hljs-keyword">switch</span> (action) {
<span class="hljs-keyword">case</span> <span class="hljs-string">"add"</span>: {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < parts.length; _i += <span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (!contains(parts[_i])) {
el.className += <span class="hljs-string">" "</span> + parts[_i];
}
}
} <span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"remove"</span>: {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < parts.length; _i += <span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (contains(parts[_i])) {
el.className.replace(parts[_i], <span class="hljs-string">""</span>);
}
}
} <span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"has"</span>: {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < parts.length; _i += <span class="hljs-number">1</span>) {
res.push(contains(parts[_i]));
}
} <span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"toggle"</span>: {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < parts.length; _i += <span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (contains(parts[_i])) {
el.className.replace(parts[_i], <span class="hljs-string">""</span>);
} <span class="hljs-keyword">else</span> {
el.className += <span class="hljs-string">" "</span> + parts[_i];
}
}
} <span class="hljs-keyword">break</span>;
}
}
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (className.length) {
parts = className;
contains = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(className)</span> </span>{
<span class="hljs-keyword">return</span> el.className.split(className).length > <span class="hljs-number">1</span>;
};
<span class="hljs-keyword">switch</span> (action) {
<span class="hljs-keyword">case</span> <span class="hljs-string">"add"</span>: {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < parts.length; _i += <span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (!contains(parts[_i])) {
el.className += <span class="hljs-string">" "</span> + parts[_i];
}
}
} <span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"remove"</span>: {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < parts.length; _i += <span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (contains(parts[_i])) {
el.className.replace(parts[_i], <span class="hljs-string">""</span>);
}
}
} <span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"has"</span>: {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < parts.length; _i += <span class="hljs-number">1</span>) {
res.push(contains(parts[_i]));
}
} <span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"toggle"</span>: {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < parts.length; _i += <span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (contains(parts[_i])) {
el.className.replace(parts[_i], <span class="hljs-string">""</span>);
} <span class="hljs-keyword">else</span> {
el.className += <span class="hljs-string">" "</span> + parts[_i];
}
}
} <span class="hljs-keyword">break</span>;
}
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> res === <span class="hljs-string">"boolean"</span> ? res : res.every(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
<span class="hljs-keyword">return</span> el === <span class="hljs-literal">true</span>;
});
});
},</pre></div></div>
</li>
<li id="section-33">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-33">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.addClass</em></strong></p>
<p>Adds class(es) to selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>className</code>: {String|Array} The class(es) to add</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p"</span>).addClass(<span class="hljs-string">"paragraph"</span>);
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> addClass: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(className)</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>[<span class="hljs-string">"class"</span>](<span class="hljs-string">"add"</span>, className);
},</pre></div></div>
</li>
<li id="section-34">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-34">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.removeClass</em></strong></p>
<p>Remove class(es) from selected elements</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>className</code>: {String|Array} The class(es) to remove</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p.hidden"</span>).removeClass(<span class="hljs-string">"hidden"</span>);
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> removeClass: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(className)</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>[<span class="hljs-string">"class"</span>](<span class="hljs-string">"remove"</span>, className);
},</pre></div></div>
</li>
<li id="section-35">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-35">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.hasClass</em></strong></p>
<p>Check if selected elements have the specified class(es)</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>className</code>: {String|Array} The class(es) to check if exists</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"pre"</span>).hasClass(<span class="hljs-string">"prettyprint"</span>);
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> hasClass: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(className)</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>[<span class="hljs-string">"class"</span>](<span class="hljs-string">"has"</span>, className);
},</pre></div></div>
</li>
<li id="section-36">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-36">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.toggleClass</em></strong></p>
<p>Add class(es) if it/they do(es) not exist(s),
remove if exist(s)</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>className</code>: {String|Array} The class(es) to toggle</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">".someClass"</span>).on(<span class="hljs-string">"click"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
$(<span class="hljs-keyword">this</span>).toggleClass(<span class="hljs-string">"opaque"</span>);
});
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> toggleClass: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(className)</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>[<span class="hljs-string">"class"</span>](<span class="hljs-string">"toggle"</span>, className);
},</pre></div></div>
</li>
<li id="section-37">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-37">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.attr</em></strong></p>
<p>Set or return attribute values</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>name</code>: {String} Name of attribute</li>
<li><code>val</code>: {String} Value of attribute</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p.hidden"</span>).attr(<span class="hljs-string">"hidden"</span>);
</code></pre><pre><code>$(<span class="hljs-string">"div.edit"</span>).attr(<span class="hljs-string">"contentEditable"</span>, <span class="hljs-string">"true"</span>);
</code></pre><pre><code>$(<span class="hljs-string">"body"</span>).attr(<span class="hljs-string">"hilo"</span>, <span class="hljs-string">"0.1.0"</span>);
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> attr: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(name, val)</span> </span>{
<span class="hljs-keyword">if</span>(val) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(el)</span> </span>{
el.setAttribute(name, val);
});
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.first(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
<span class="hljs-keyword">return</span> el.getAttribute(name);
});
}
},</pre></div></div>
</li>
<li id="section-38">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-38">¶</a>
</div>
<h3 id="hilo-css">Hilo CSS</h3>
</div>
</li>
<li id="section-39">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-39">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.css</em></strong></p>
<p>Set or return css property values</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>prop</code>: {String|Object} Name of the propety | Properties</li>
<li><code>value</code>: {String} Value of property</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"p"</span>).css(<span class="hljs-string">"margin-left"</span>, <span class="hljs-string">"10em"</span>);
</code></pre><pre><code>$(<span class="hljs-string">"p.round"</span>).css({
<span class="hljs-string">"border-radius"</span>: <span class="hljs-number">10</span>,
width: <span class="hljs-number">100</span>
});
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> css: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(prop, value)</span> </span>{
<span class="hljs-keyword">var</span> unhyphed;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> prop === <span class="hljs-string">"string"</span>) {
unhyphed = unhyph(prop);
<span class="hljs-keyword">if</span> (value) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
el.style[unhyphed] = unitize(value, unhyphed);
});
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.first(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
<span class="hljs-keyword">return</span> el.style[unhyphed];
});
}
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> prop === <span class="hljs-string">"object"</span>) {
forIn(prop, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(pr)</span> </span>{
unhyphed = unhyph(pr);
<span class="hljs-keyword">this</span>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
el.style[unhyphed] = unitize(prop[pr], unhyphed);
});
}, <span class="hljs-keyword">this</span>);
}
},</pre></div></div>
</li>
<li id="section-40">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-40">¶</a>
</div>
<p><strong><em>Hilo.Dom.prototype.computed</em></strong></p>
<p>Get computed property</p>
<p><strong>Param</strong>:</p>
<ul>
<li><code>prop</code>: {String|Object} Name of property</li>
</ul>
<p><strong>Example</strong>:</p>
<pre><code>$(<span class="hljs-string">"#box"</span>).computed(<span class="hljs-string">"width"</span>);
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> computed: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(prop)</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.first(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
<span class="hljs-keyword">return</span> win.getComputedStyle(el)[prop];
});
},</pre></div></div>
</li>
<li id="section-41">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-41">¶</a>
</div>
<p>Get outer width</p>
</div>
<div class="content"><div class='highlight'><pre>
outerWidth: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"width"</span>)) +
<span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"paddingLeft"</span>)) +
<span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"paddingRight"</span>)) +
<span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"borderLeft"</span>)) +
<span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"borderRight"</span>)) + <span class="hljs-string">"px"</span>;
},</pre></div></div>
</li>
<li id="section-42">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-42">¶</a>
</div>
<p>Get inner width</p>
</div>
<div class="content"><div class='highlight'><pre>
innerWidth: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"width"</span>)) +
<span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"paddingLeft"</span>)) +
<span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"paddingRight"</span>)) + <span class="hljs-string">"px"</span>;
},</pre></div></div>
</li>
<li id="section-43">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-43">¶</a>
</div>
<p>Get outer height</p>
</div>
<div class="content"><div class='highlight'><pre>
outerHeight: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"height"</span>)) +
<span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"paddingTop"</span>)) +
<span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"paddingBottom"</span>)) +
<span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"borderTop"</span>)) +
<span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"borderBottom"</span>)) + <span class="hljs-string">"px"</span>;
},</pre></div></div>
</li>
<li id="section-44">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-44">¶</a>
</div>
<p>Get inner height</p>
</div>
<div class="content"><div class='highlight'><pre>
innerHeight: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"height"</span>)) +
<span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"paddingTop"</span>)) +
<span class="hljs-built_in">parseFloat</span>(<span class="hljs-keyword">this</span>.computed(<span class="hljs-string">"paddingBottom"</span>)) + <span class="hljs-string">"px"</span>;
}
});</pre></div></div>
</li>
</ul>
</div>
</body>
</html>