docs/hilo-legacy.html
<!DOCTYPE html>
<html>
<head>
<title>Hilo</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="hilo-legacy.html">
hilo-legacy.js
</a>
<a class="source" href="hilo-legacy.min.html">
hilo-legacy.min.js
</a>
<a class="source" href="hilo.html">
hilo.js
</a>
<a class="source" href="hilo.min.html">
hilo.min.js
</a>
</div>
</li>
</ul>
<ul class="sections">
<li id="section-1">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-1">¶</a>
</div>
<h1 id="hilo">Hilo</h1>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-2">¶</a>
</div>
<p><code>0.1.0-pre-dev-beta-10</code><br/></p>
</div>
</li>
<li id="section-3">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-3">¶</a>
</div>
<p>Built on: 2014-10-06<br/>
Project started before 1 year, 3 months and 6 days<br/>
<a href="http://erikroyall.github.com/hilo">http://erikroyall.github.com/hilo</a><br/>
Copyright (c) 2013 Erik Royall<br/>
Licensed under MIT (see LICENSE-MIT) </p>
</div>
<div class="content"><div class='highlight'><pre>
(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(A, M, D)</span> </span>{
<span class="hljs-comment">/* Register Hilo as an AMD module */</span>
<span class="hljs-comment">/*globals YUI: false, module: false, define: false*/</span>
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> <span class="hljs-built_in">module</span> !== <span class="hljs-string">"undefined"</span> && <span class="hljs-built_in">module</span>.exports) {
<span class="hljs-built_in">module</span>.exports = D;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> define === <span class="hljs-string">"function"</span> && define.amd) {
define(D);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> YUI === <span class="hljs-string">"function"</span>) {
YUI.add(A, D);
} <span class="hljs-keyword">else</span> {
M[A] = D();
}
}(<span class="hljs-string">"Hilo"</span>, <span class="hljs-keyword">this</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-comment">/*jshint -W083, -W064, -W061, -W030*/</span>
<span class="hljs-comment">/* JSHint escapes:
- W083 - Don't make function within a loop (Evts)
- W064 - Eval can be harmful (JSON)
- W064 - Missing new prefix when invoking constructor (Sizzle)
- W030 - Saw an expression (Sizzle, Me) */</span>
<span class="hljs-pi">
"use strict"</span>;
<span class="hljs-keyword">var</span> hilo <span class="hljs-comment">/* Public API */</span>
<span class="hljs-comment">/* Used to measure performace (Hilo.perf) */</span>
, start
<span class="hljs-comment">/* References to browser objects */</span>
, win = <span class="hljs-built_in">window</span> <span class="hljs-comment">// Reference to window</span>
, doc = win.document <span class="hljs-comment">// Reference to document</span>
<span class="hljs-comment">/* Used for storing detected features */</span>
, detected
<span class="hljs-comment">/* Key mappings (Hilo.keys) */</span>
, key
<span class="hljs-comment">/*Array of callbacks to be exec.ed on DOMReady */</span>
, callbacks = [] <span class="hljs-comment">// Array of functions to be executed on DOMReady</span>
<span class="hljs-comment">/* Private Selector Function */</span>
, select
<span class="hljs-comment">/* Feature Detection (Hilo.feature) */</span>
, feature
<span class="hljs-comment">/* Main AJAX function (Hilo.ajax) */</span>
, hiloAjax
<span class="hljs-comment">/* hasOwnProperty helper */</span>
, own = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(obj, prop)</span> </span>{
<span class="hljs-keyword">return</span> obj.hasOwnProperty(prop);
}
<span class="hljs-comment">/* Loop Variable */</span>
, _i;
<span class="hljs-comment">/* Start performace testing */</span>
start = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().getTime();</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-4">¶</a>
</div>
<h2 id="feature-detection">Feature Detection</h2>
</div>
<div class="content"><div class='highlight'><pre> feature = (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">var</span> c = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(tagName)</span> </span>{
<span class="hljs-keyword">return</span> doc.createElement(tagName);
}
, i = c(<span class="hljs-string">"input"</span>)
, d = c(<span class="hljs-string">"div"</span>)
, cn = c(<span class="hljs-string">"canvas"</span>)
, fr = c(<span class="hljs-string">"iframe"</span>)
, is = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(i, attr, val)</span> </span>{
<span class="hljs-keyword">return</span> !!(i.setAttribute (attr, val));
}
, a = c(<span class="hljs-string">"audio"</span>)
, s = c(<span class="hljs-string">"span"</span>)
, v = c(<span class="hljs-string">"video"</span>)
, xr = <span class="hljs-keyword">new</span> XMLHttpRequest();
<span class="hljs-keyword">return</span> {</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-5">¶</a>
</div>
<p>addEventListener()</p>
</div>
<div class="content"><div class='highlight'><pre> addEventListener: (<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">typeof</span> win.addEventListener === <span class="hljs-string">"function"</span>;
}()),</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-6">¶</a>
</div>
<p>Application Cache (or Offline Web Apps)</p>
</div>
<div class="content"><div class='highlight'><pre> applicationCache: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> !!win.applicationCache;
}()),</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-7">¶</a>
</div>
<p>Audio (tag)</p>
</div>
<div class="content"><div class='highlight'><pre> audio: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> !!a.canPlayType;
}()),</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-8">¶</a>
</div>
<p>Preload audio (hmm.. background music?)</p>
</div>
<div class="content"><div class='highlight'><pre> audioPreload: (<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-string">"preload"</span> <span class="hljs-keyword">in</span> a;
}()),</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-9">¶</a>
</div>
<p>Audio Types</p>
</div>
<div class="content"><div class='highlight'><pre> audioType: {</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-10">¶</a>
</div>
<p>MP3 audio format</p>
</div>
<div class="content"><div class='highlight'><pre> mp3: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> !!(a.canPlayType && a.canPlayType(<span class="hljs-string">"audio/mpeg;"</span>).replace(<span class="hljs-regexp">/no/</span>, <span class="hljs-string">""</span>));
}()),</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-11">¶</a>
</div>
<p>Vorbis audio format</p>
</div>
<div class="content"><div class='highlight'><pre> vorbis: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> !!(a.canPlayType && a.canPlayType(<span class="hljs-string">"audio/ogg; codecs='vorbis'"</span>).replace(<span class="hljs-regexp">/no/</span>, <span class="hljs-string">""</span>));
}()),</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-12">¶</a>
</div>
<p>MS WAV audio format</p>
</div>
<div class="content"><div class='highlight'><pre> wav: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> !!(a.canPlayType && a.canPlayType(<span class="hljs-string">"audio/wav; codecs='1'"</span>).replace(<span class="hljs-regexp">/no/</span>, <span class="hljs-string">""</span>));
}()),</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-13">¶</a>
</div>
<p>AAC audio format</p>
</div>
<div class="content"><div class='highlight'><pre> aac: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> !!(a.canPlayType && a.canPlayType(<span class="hljs-string">"audio/mp4; codecs='mp4a.40.2'"</span>).replace(<span class="hljs-regexp">/no/</span>, <span class="hljs-string">""</span>));
}())
},</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-14">¶</a>
</div>
<p>Canvas API </p>
</div>
<div class="content"><div class='highlight'><pre> canvas: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> !!cn.getContext;
}()),</pre></div></div>
</li>
<li id="section-15">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-15">¶</a>
</div>
<p>Canvas Text</p>
</div>
<div class="content"><div class='highlight'><pre> canvasText: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> !!cn.getContext && <span class="hljs-keyword">typeof</span> cn.getContext(<span class="hljs-string">"2d"</span>).fillText === <span class="hljs-string">"function"</span>;
}()),</pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-16">¶</a>
</div>
<p>classList prop. in HTMLElement </p>
</div>
<div class="content"><div class='highlight'><pre> classList: (<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-string">"classList"</span> <span class="hljs-keyword">in</span> s;
}()),</pre></div></div>
</li>
<li id="section-17">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-17">¶</a>
</div>
<p>Command </p>
</div>
<div class="content"><div class='highlight'><pre> command: (<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-string">"type"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"command"</span>);
}()),</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-18">¶</a>
</div>
<p>Form Constraint Validation</p>
</div>
<div class="content"><div class='highlight'><pre> consval: (<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-string">"noValidate"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"form"</span>);
}()),</pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-19">¶</a>
</div>
<p>contentEditable attribute</p>
</div>
<div class="content"><div class='highlight'><pre> contentEditable: (<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-string">"isContentEditable"</span> <span class="hljs-keyword">in</span> s;
}()),</pre></div></div>
</li>
<li id="section-20">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-20">¶</a>
</div>
<p>Datalist (tag) </p>
</div>
<div class="content"><div class='highlight'><pre> datalist: (<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-string">"options"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"datalist"</span>);
}()),</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-21">¶</a>
</div>
<p>Details (tag)</p>
</div>
<div class="content"><div class='highlight'><pre> details: (<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-string">"open"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"details"</span>);
}()),</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-22">¶</a>
</div>
<p>Drag & Drop </p>
</div>
<div class="content"><div class='highlight'><pre> dragdrop: (<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-string">"draggable"</span> <span class="hljs-keyword">in</span> s;
}()),</pre></div></div>
</li>
<li id="section-23">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-23">¶</a>
</div>
<p>ECMAScript 6 </p>
</div>
<div class="content"><div class='highlight'><pre> es6: (<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">typeof</span> <span class="hljs-built_in">String</span>.prototype.contains === <span class="hljs-string">"function"</span>;
}()),</pre></div></div>
</li>
<li id="section-24">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-24">¶</a>
</div>
<p>File system API </p>
</div>
<div class="content"><div class='highlight'><pre> fileapi: (<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">typeof</span> FileReader !== <span class="hljs-string">"undefined"</span>;
}()),</pre></div></div>
</li>
<li id="section-25">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-25">¶</a>
</div>
<p>5th Generation Rendering Engine </p>
</div>
<div class="content"><div class='highlight'><pre> gen5: (<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">parseInt</span>(win.navigator.appVersion, <span class="hljs-number">10</span>) === <span class="hljs-number">5</span>;
}()),</pre></div></div>
</li>
<li id="section-26">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-26">¶</a>
</div>
<p>Geolocation</p>
</div>
<div class="content"><div class='highlight'><pre> geolocation: (<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-string">"geolocation"</span> <span class="hljs-keyword">in</span> win.navigator;
}()),</pre></div></div>
</li>
<li id="section-27">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-27">¶</a>
</div>
<p>window.getSelection() method</p>
</div>
<div class="content"><div class='highlight'><pre> getSelection: (<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">typeof</span> win.getSelection === <span class="hljs-string">"function"</span>;
}()),</pre></div></div>
</li>
<li id="section-28">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-28">¶</a>
</div>
<p>History API</p>
</div>
<div class="content"><div class='highlight'><pre> history: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> !!(win.history && history.pushState);
}()),</pre></div></div>
</li>
<li id="section-29">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-29">¶</a>
</div>
<p>IFrame</p>
</div>
<div class="content"><div class='highlight'><pre> iframe: {
sandbox: (<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-string">"sandbox"</span> <span class="hljs-keyword">in</span> fr;
}()),
srdoc: (<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-string">"srcdoc"</span> <span class="hljs-keyword">in</span> fr;
}())
},</pre></div></div>
</li>
<li id="section-30">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-30">¶</a>
</div>
<p>IndexedDB (use this instead of WebSQL) </p>
</div>
<div class="content"><div class='highlight'><pre> indexeddb: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> !!(win.indexedDB && win.IDBKeyRange && win.IDBTransaction);
}()),</pre></div></div>
</li>
<li id="section-31">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-31">¶</a>
</div>
<p>Input</p>
</div>
<div class="content"><div class='highlight'><pre>
input: {</pre></div></div>
</li>
<li id="section-32">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-32">¶</a>
</div>
<p>Input Auto Focus</p>
</div>
<div class="content"><div class='highlight'><pre> autofocus: (<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-string">"autofocus"</span> <span class="hljs-keyword">in</span> i;
}()),</pre></div></div>
</li>
<li id="section-33">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-33">¶</a>
</div>
<p>Placeholder</p>
</div>
<div class="content"><div class='highlight'><pre> placeholder: (<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-string">"placeholder"</span> <span class="hljs-keyword">in</span> i;
}()),</pre></div></div>
</li>
<li id="section-34">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-34">¶</a>
</div>
<p>Input Types (they are pretty self-explanatory)</p>
</div>
<div class="content"><div class='highlight'><pre> type: {
color: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"color"</span>);
<span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
}()),
date: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"date"</span>);
<span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
}()),
datetime: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"datetime"</span>);
<span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
}()),
datetimeLocal: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"datetime-local"</span>);
<span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
}()),
email: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"email"</span>);
<span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
}()),
month: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"month"</span>);
<span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
}()),
number: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"number"</span>);
<span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
}()),
range: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"range"</span>);
<span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
}()),
search: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"search"</span>);
<span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
}()),
tel: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"tel"</span>);
<span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
}()),
time: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"time"</span>);
<span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
}()),
week: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
is(i, <span class="hljs-string">"type"</span>, <span class="hljs-string">"week"</span>);
<span class="hljs-keyword">return</span> i.type !== <span class="hljs-string">"text"</span>;
}())
}
},</pre></div></div>
</li>
<li id="section-35">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-35">¶</a>
</div>
<p>Local Storage </p>
</div>
<div class="content"><div class='highlight'><pre> localStorage: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">return</span> <span class="hljs-string">"localStorage"</span> <span class="hljs-keyword">in</span> win && win[<span class="hljs-string">"localStorage"</span>] !== <span class="hljs-literal">null</span> && !!win.localStorage.setItem;
} <span class="hljs-keyword">catch</span>(e){
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
}
}()),</pre></div></div>
</li>
<li id="section-36">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-36">¶</a>
</div>
<p>Meter (tag) </p>
</div>
<div class="content"><div class='highlight'><pre> meter: (<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-string">"value"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"meter"</span>);
}()),</pre></div></div>
</li>
<li id="section-37">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-37">¶</a>
</div>
<p>Microdata </p>
</div>
<div class="content"><div class='highlight'><pre> microdata: (<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-string">"getItems"</span> <span class="hljs-keyword">in</span> doc;
}()),</pre></div></div>
</li>
<li id="section-38">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-38">¶</a>
</div>
<p>Offline (App Cache) </p>
</div>
<div class="content"><div class='highlight'><pre> offline: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> !!win.applicationCache;
}()),</pre></div></div>
</li>
<li id="section-39">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-39">¶</a>
</div>
<p>Output (tag) </p>
</div>
<div class="content"><div class='highlight'><pre> output: (<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-string">"value"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"output"</span>);
}()),</pre></div></div>
</li>
<li id="section-40">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-40">¶</a>
</div>
<p>Progress (tag)</p>
</div>
<div class="content"><div class='highlight'><pre> progress: (<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-string">"value"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"progress"</span>);
}()),</pre></div></div>
</li>
<li id="section-41">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-41">¶</a>
</div>
<p>querySelector & querySelectorAll</p>
</div>
<div class="content"><div class='highlight'><pre> qsa: (<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-string">"querySelector"</span> <span class="hljs-keyword">in</span> doc && <span class="hljs-string">"querySelectorAll"</span> <span class="hljs-keyword">in</span> doc;
}()),</pre></div></div>
</li>
<li id="section-42">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-42">¶</a>
</div>
<p>CSS3 Selectors in querySelectorAll</p>
</div>
<div class="content"><div class='highlight'><pre> qsa3: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">return</span> doc.querySelectorAll(<span class="hljs-string">":root"</span>).length > <span class="hljs-number">0</span>;
} <span class="hljs-keyword">catch</span> (e) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
}
}()),</pre></div></div>
</li>
<li id="section-43">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-43">¶</a>
</div>
<p>requestAnimationFrame</p>
</div>
<div class="content"><div class='highlight'><pre> requestAnimationFrame: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> requestAnimationFrame === <span class="hljs-string">"function"</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> msRequestAnimationFrame === <span class="hljs-string">"function"</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-string">"ms"</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> webkitRequestAnimationFrame === <span class="hljs-string">"function"</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-string">"webkit"</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> mozRequestAnimationFrame === <span class="hljs-string">"function"</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-string">"moz"</span>;
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
}
}()),</pre></div></div>
</li>
<li id="section-44">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-44">¶</a>
</div>
<p>Server-sent Events</p>
</div>
<div class="content"><div class='highlight'><pre> serverEvt: (<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">typeof</span> EventSource !== <span class="hljs-string">"undefined"</span>;
}()),</pre></div></div>
</li>
<li id="section-45">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-45">¶</a>
</div>
<p>Session Storage</p>
</div>
<div class="content"><div class='highlight'><pre> sessionStorage: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">return</span> <span class="hljs-string">"sessionStorage"</span> <span class="hljs-keyword">in</span> win && win[<span class="hljs-string">"sessionStorage"</span>] !== <span class="hljs-literal">null</span>;
} <span class="hljs-keyword">catch</span>(e) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
}
}()),</pre></div></div>
</li>
<li id="section-46">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-46">¶</a>
</div>
<p>Modal Dialog (showModalDialog)</p>
</div>
<div class="content"><div class='highlight'><pre> showModalDialog: (<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">typeof</span> win.showModalDialog === <span class="hljs-string">"function"</span>;
}()),</pre></div></div>
</li>
<li id="section-47">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-47">¶</a>
</div>
<p>SVG (Scalable Vector Graphics)</p>
</div>
<div class="content"><div class='highlight'><pre> svg: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> !!(doc.createElementNS && doc.createElementNS(<span class="hljs-string">"http://www.w3.org/2000/svg"</span>, <span class="hljs-string">"svg"</span>).createSVGRect);
}()),</pre></div></div>
</li>
<li id="section-48">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-48">¶</a>
</div>
<p>SVG in text/html</p>
</div>
<div class="content"><div class='highlight'><pre> svginhtml:(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
d.innerHTML = <span class="hljs-string">"<svg></svg>"</span>;
<span class="hljs-keyword">return</span> !!(win.SVGSVGElement && d.firstChild <span class="hljs-keyword">instanceof</span> win.SVGSVGElement);
}()),</pre></div></div>
</li>
<li id="section-49">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-49">¶</a>
</div>
<p>Template (tag)</p>
</div>
<div class="content"><div class='highlight'><pre> template: (<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-string">"content"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"template"</span>);
}()),</pre></div></div>
</li>
<li id="section-50">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-50">¶</a>
</div>
<p>Time (tag)</p>
</div>
<div class="content"><div class='highlight'><pre> time: (<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-string">"datetime"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"time"</span>);
}()),</pre></div></div>
</li>
<li id="section-51">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-51">¶</a>
</div>
<p>Undo (not just Ctrl + Z)</p>
</div>
<div class="content"><div class='highlight'><pre> undo: (<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">typeof</span> UndoManager !== <span class="hljs-string">"undefined"</span>;
}()),</pre></div></div>
</li>
<li id="section-52">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-52">¶</a>
</div>
<p>Video</p>
</div>
<div class="content"><div class='highlight'><pre> video: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">return</span> !!v.canPlayType;
} <span class="hljs-keyword">catch</span> (e) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
}
}()),</pre></div></div>
</li>
<li id="section-53">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-53">¶</a>
</div>
<p>Video Captions</p>
</div>
<div class="content"><div class='highlight'><pre> videoCaptions: (<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-string">"src"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"track"</span>);
}()),</pre></div></div>
</li>
<li id="section-54">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-54">¶</a>
</div>
<p>Video Formats</p>
</div>
<div class="content"><div class='highlight'><pre> videoFormats: {</pre></div></div>
</li>
<li id="section-55">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-55">¶</a>
</div>
<p>H264 Video Format (MP4)</p>
</div>
<div class="content"><div class='highlight'><pre> h264: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">return</span> v.canPlayType(<span class="hljs-string">"video/mp4; codecs='avc1.42E01E, mp4a.40.2'"</span>);
} <span class="hljs-keyword">catch</span> (e) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
}
}()),</pre></div></div>
</li>
<li id="section-56">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-56">¶</a>
</div>
<p>WebM Video Format</p>
</div>
<div class="content"><div class='highlight'><pre> webm: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">return</span> v.canPlayType(<span class="hljs-string">"video/webm; codecs='vp8, vorbis'"</span>);
} <span class="hljs-keyword">catch</span> (e) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
}
}()),</pre></div></div>
</li>
<li id="section-57">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-57">¶</a>
</div>
<p>OGG Theora Video Format</p>
</div>
<div class="content"><div class='highlight'><pre> ogg: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">return</span> v.canPlayType(<span class="hljs-string">"video/ogg; codecs='theora, vorbis'"</span>);
} <span class="hljs-keyword">catch</span> (e) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
}
}())
},</pre></div></div>
</li>
<li id="section-58">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-58">¶</a>
</div>
<p>Video Poster</p>
</div>
<div class="content"><div class='highlight'><pre> videoPoster: (<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-string">"poster"</span> <span class="hljs-keyword">in</span> c(<span class="hljs-string">"video"</span>);
}()),</pre></div></div>
</li>
<li id="section-59">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-59">¶</a>
</div>
<p>Web Audio API (NOT the <audio> tag)</p>
</div>
<div class="content"><div class='highlight'><pre> webAudio: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{</pre></div></div>
</li>
<li id="section-60">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-60">¶</a>
</div>
<p>return !!(win.webkitAudioContext || win.AudioContext);</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (win.AudioContext) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (win.webkitAudioContext) {
<span class="hljs-keyword">return</span> <span class="hljs-string">"webkit"</span>;
}
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
}()),</pre></div></div>
</li>
<li id="section-61">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-61">¶</a>
</div>
<p>WebSockets</p>
</div>
<div class="content"><div class='highlight'><pre> webSockets: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> !!win.webSocket;
}()),</pre></div></div>
</li>
<li id="section-62">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-62">¶</a>
</div>
<p>WebSQL (a deprecated specification; use IndexedDB instead)</p>
</div>
<div class="content"><div class='highlight'><pre> websql: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> !!win.openDatabase;
}()),</pre></div></div>
</li>
<li id="section-63">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-63">¶</a>
</div>
<p>Web Workers</p>
</div>
<div class="content"><div class='highlight'><pre> webWorkers: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> !!win.Worker;
}()),</pre></div></div>
</li>
<li id="section-64">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-64">¶</a>
</div>
<p>Widgets</p>
</div>
<div class="content"><div class='highlight'><pre> widgets: (<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">typeof</span> widget !== <span class="hljs-string">"undefined"</span>;
}()),</pre></div></div>
</li>
<li id="section-65">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-65">¶</a>
</div>
<p>Cross-document messaging</p>
</div>
<div class="content"><div class='highlight'><pre> xdocmsg: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> !!win.postMessage;
}()),</pre></div></div>
</li>
<li id="section-66">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-66">¶</a>
</div>
<p>XML HTTP Request</p>
</div>
<div class="content"><div class='highlight'><pre> xhr: {</pre></div></div>
</li>
<li id="section-67">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-67">¶</a>
</div>
<p>Cross-domain requests</p>
</div>
<div class="content"><div class='highlight'><pre> xdr: (<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-string">"withCredentials"</span> <span class="hljs-keyword">in</span> xr;
}()),</pre></div></div>
</li>
<li id="section-68">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-68">¶</a>
</div>
<p>Send as form data</p>
</div>
<div class="content"><div class='highlight'><pre> formdata: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> !!win.FormData;
}()),</pre></div></div>
</li>
<li id="section-69">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-69">¶</a>
</div>
<p>Upload progress events</p>
</div>
<div class="content"><div class='highlight'><pre> upe: (<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-string">"upload"</span> <span class="hljs-keyword">in</span> xr;
}())
}
};
}());</pre></div></div>
</li>
<li id="section-70">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-70">¶</a>
</div>
<h2 id="browser-engine-platform-detection">Browser, Engine, Platform Detection</h2>
</div>
<div class="content"><div class='highlight'><pre>
detected = (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">var</span> engine
, browser
, system
, ua = win.navigator.userAgent
, safariVersion
, p;</pre></div></div>
</li>
<li id="section-71">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-71">¶</a>
</div>
<p>Browser</p>
</div>
<div class="content"><div class='highlight'><pre> browser = {
ie: <span class="hljs-number">0</span>,
firefox: <span class="hljs-number">0</span>,
safari: <span class="hljs-number">0</span>,
konq: <span class="hljs-number">0</span>,
opera: <span class="hljs-number">0</span>,
chrome: <span class="hljs-number">0</span>,</pre></div></div>
</li>
<li id="section-72">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-72">¶</a>
</div>
<p>Specific Version</p>
</div>
<div class="content"><div class='highlight'><pre> ver: <span class="hljs-literal">null</span>
};</pre></div></div>
</li>
<li id="section-73">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-73">¶</a>
</div>
<p>System</p>
</div>
<div class="content"><div class='highlight'><pre> system = {
win: <span class="hljs-literal">false</span>,
mac: <span class="hljs-literal">false</span>,
x11: <span class="hljs-literal">false</span>,
<span class="hljs-comment">/* Mobile Devices */</span>
iphone: <span class="hljs-literal">false</span>,
ipod: <span class="hljs-literal">false</span>,
ipad: <span class="hljs-literal">false</span>,
ios: <span class="hljs-literal">false</span>,
android: <span class="hljs-literal">false</span>,
nokiaN: <span class="hljs-literal">false</span>,
winMobile: <span class="hljs-literal">false</span>,
<span class="hljs-comment">/* Game Consoles */</span>
wii: <span class="hljs-literal">false</span>,
ps: <span class="hljs-literal">false</span>
};</pre></div></div>
</li>
<li id="section-74">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-74">¶</a>
</div>
<p>Redering engine</p>
</div>
<div class="content"><div class='highlight'><pre> engine = {
ie: <span class="hljs-number">0</span>,
gecko: <span class="hljs-number">0</span>,
webkit: <span class="hljs-number">0</span>,
khtml: <span class="hljs-number">0</span>,
opera: <span class="hljs-number">0</span>,
<span class="hljs-comment">/* Complete version*/</span>
ver: <span class="hljs-literal">null</span>
};
<span class="hljs-keyword">if</span>(<span class="hljs-built_in">window</span>.opera) {
engine.ver = browser.ver = <span class="hljs-built_in">window</span>.opera.version();
engine.opera = browser.opera = <span class="hljs-built_in">parseFloat</span>(engine.ver);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/AppleWebKit\/(\S+)/</span>.test(ua)) {
engine.ver = <span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>;
engine.webkit = <span class="hljs-built_in">parseFloat</span>(engine.ver);
<span class="hljs-comment">/* Figures out if chrome or Safari */</span>
<span class="hljs-keyword">if</span> (<span class="hljs-regexp">/Chrome\/(\S+)/</span>.test(ua)) {
browser.ver = <span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>;
browser.chrome = <span class="hljs-built_in">parseFloat</span>(browser.ver);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/Version\/(\S+)/</span>.test(ua)) {
browser.ver = <span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>;
browser.safari = <span class="hljs-built_in">parseFloat</span>(browser.ver);
} <span class="hljs-keyword">else</span> {
<span class="hljs-comment">/* Approximate version */</span>
safariVersion = <span class="hljs-number">1</span>;
<span class="hljs-keyword">if</span> (engine.webkit < <span class="hljs-number">100</span>) {
safariVersion = <span class="hljs-number">1</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (engine.webkit < <span class="hljs-number">312</span>) {
safariVersion = <span class="hljs-number">1.2</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (engine.webkit < <span class="hljs-number">412</span>) {
safariVersion = <span class="hljs-number">1.3</span>;
} <span class="hljs-keyword">else</span> {
safariVersion = <span class="hljs-number">2</span>;
}
browser.safari = browser.ver = safariVersion;
}
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/KHTML\/(\S+)/</span>.test(ua) || <span class="hljs-regexp">/Konqueror\/([^;]+)/</span>.test(ua)) {
engine.ver = browser.ver = <span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>;
engine.khtml = browser.konq = <span class="hljs-built_in">parseFloat</span>(engine.ver);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/rv:([^\)]+)\) Gecko\/\d{8}/</span>.test(ua)) {
engine.ver = <span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>;
engine.gecko = <span class="hljs-built_in">parseFloat</span>(engine.ver);
<span class="hljs-comment">/* Determine if it's firefox */</span>
<span class="hljs-keyword">if</span> (<span class="hljs-regexp">/Firefox\/(\S+)/</span>.test(ua)) {
browser.ver = <span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>;
browser.firefox = <span class="hljs-built_in">parseFloat</span>(browser.ver);
}
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/MSIE ([^;]+)/</span>.test(ua)) {
engine.ver = browser.ver = <span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>;
engine.ie = browser.ie = <span class="hljs-built_in">parseFloat</span>(engine.ver);
}
<span class="hljs-comment">/* Detect browsers */</span>
browser.ie = engine.ie;
browser.opera = engine.opera;
<span class="hljs-comment">/* Detect platform */</span>
p = navigator.platform;
system.win = p.indexOf(<span class="hljs-string">"Win"</span>) === <span class="hljs-number">0</span>;
system.mac = p.indexOf(<span class="hljs-string">"Mac"</span>) === <span class="hljs-number">0</span>;
system.x11 = (p === <span class="hljs-string">"X11"</span>) || (p.indexOf(<span class="hljs-string">"Linux"</span>) === <span class="hljs-number">0</span>);
<span class="hljs-comment">/* Detecting Windows OSs */</span>
<span class="hljs-keyword">if</span> (system.win) {
<span class="hljs-keyword">if</span> (<span class="hljs-regexp">/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/</span>.test(ua)) {
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span> === <span class="hljs-string">"NT"</span>) {
<span class="hljs-keyword">switch</span>(<span class="hljs-built_in">RegExp</span>[<span class="hljs-string">"$2"</span>]) {
<span class="hljs-keyword">case</span> <span class="hljs-string">"5.0"</span>:
system.win = <span class="hljs-string">"2000"</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"5.1"</span>:
system.win = <span class="hljs-string">"XP"</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"6.0"</span>:
system.win = <span class="hljs-string">"Vista"</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"6.1"</span>:
system.win = <span class="hljs-string">"7"</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">default</span>:
system.win = <span class="hljs-string">"NT"</span>;
<span class="hljs-keyword">break</span>;
}
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span> === <span class="hljs-string">"9x"</span>) {
system.win = <span class="hljs-string">"ME"</span>;
} <span class="hljs-keyword">else</span> {
system.win = <span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>;
}
}
}
<span class="hljs-comment">/* Mobile Devices */</span>
system.iphone = ua.indexOf(<span class="hljs-string">"iPhone"</span>) > -<span class="hljs-number">1</span>;
system.ipod = ua.indexOf(<span class="hljs-string">"iPod"</span>) > -<span class="hljs-number">1</span>;
system.ipad = ua.indexOf(<span class="hljs-string">"iPad"</span>) > -<span class="hljs-number">1</span>;
system.nokiaN = ua.indexOf(<span class="hljs-string">"NokiaN"</span>) > -<span class="hljs-number">1</span>;
<span class="hljs-comment">/* Windows Mobile */</span>
<span class="hljs-keyword">if</span> (system.win === <span class="hljs-string">"CE"</span>) {
system.winMobile = system.win;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (system.win === <span class="hljs-string">"Ph"</span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-regexp">/Windows Phone OS(\d+.\d+)/</span>.test(ua)) {
system.win = <span class="hljs-string">"Phone"</span>;
system.winMobile = <span class="hljs-built_in">parseFloat</span>(<span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>);
}
}
<span class="hljs-comment">/* Determine iOS Version */</span>
<span class="hljs-keyword">if</span> (system.mac && ua.indexOf(<span class="hljs-string">"Mobile"</span>) > -<span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-regexp">/CPU (?:iPhone )?OS (\d+_\d+)/</span>.test(ua)) {
system.ios = <span class="hljs-built_in">parseFloat</span>(<span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1.</span>replace(<span class="hljs-string">"_"</span>, <span class="hljs-string">"."</span>));
} <span class="hljs-keyword">else</span> {
system.ios = <span class="hljs-number">2</span>; <span class="hljs-comment">// Can't really detect - so guess</span>
}
}
<span class="hljs-comment">/* Determine Android Version */</span>
<span class="hljs-keyword">if</span> (<span class="hljs-regexp">/Android (\d+\.\d+)/</span>.test(ua)) {
system.android = <span class="hljs-built_in">parseFloat</span>(<span class="hljs-built_in">RegExp</span>.$<span class="hljs-number">1</span>);
}
<span class="hljs-comment">/* Gaming Consoles */</span>
system.wii = ua.indexOf(<span class="hljs-string">"Wii"</span>) > -<span class="hljs-number">1</span>;
system.ps = <span class="hljs-regexp">/playstation/i</span>.test(ua);
<span class="hljs-comment">/* Name and Version */</span>
<span class="hljs-keyword">if</span> (system.win) {
system.name = <span class="hljs-string">"Windows"</span>;
system.version = system.win;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (system.mac) {
system.name = <span class="hljs-string">"Mac"</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (system.x11) {
system.name = <span class="hljs-string">"Linux"</span>;
} <span class="hljs-keyword">else</span> {
system.name = <span class="hljs-string">"Some other"</span>;
}
<span class="hljs-comment">/* Engines */</span>
<span class="hljs-keyword">if</span> (browser.ie) {
browser.name = <span class="hljs-string">"IE"</span>;
browser.version = browser.ie;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (browser.chrome) {
browser.name = <span class="hljs-string">"Chrome"</span>;
browser.version = browser.chrome;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (browser.safari) {
browser.name = <span class="hljs-string">"Safari"</span>;
browser.version = browser.safari;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (browser.konq) {
browser.name = <span class="hljs-string">"Konqueror"</span>;
browser.version = browser.konq;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (browser.opera) {
browser.name = <span class="hljs-string">"Opera"</span>;
browser.version = browser.opera;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (browser.firefox) {
browser.name = <span class="hljs-string">"Firefox"</span>;
browser.version = browser.firefox;
}
<span class="hljs-comment">/* return them */</span>
<span class="hljs-keyword">return</span> {
engine: engine,
browser: browser,
system: system
};
}());</pre></div></div>
</li>
<li id="section-75">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-75">¶</a>
</div>
<hr>
</div>
</li>
<li id="section-76">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-76">¶</a>
</div>
<h2 id="json">JSON</h2>
</div>
</li>
<li id="section-77">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-77">¶</a>
</div>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-comment">/*!
* JSON Parser (Public Domain)
* by Douglas Crockford
* http://javascript.crockford.com/
*/</span></pre></div></div>
</li>
<li id="section-78">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-78">¶</a>
</div>
<p>Create a json object only if one does not already exist. We create the
methods in a closure to avoid creating global variables.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">var</span> json = {};
(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> <span class="hljs-built_in">window</span>.JSON === <span class="hljs-string">"object"</span> && <span class="hljs-keyword">typeof</span> <span class="hljs-built_in">window</span>.JSON.parse === <span class="hljs-string">"function"</span>) {
json = <span class="hljs-built_in">window</span>.JSON;
<span class="hljs-keyword">return</span>;
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">f</span> <span class="hljs-params">(n)</span> </span>{</pre></div></div>
</li>
<li id="section-79">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-79">¶</a>
</div>
<p>Format integers to have at least two digits.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> n < <span class="hljs-number">10</span> ? <span class="hljs-string">"0"</span> + n : n;
}
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> <span class="hljs-built_in">Date</span>.prototype.tojson !== <span class="hljs-string">"function"</span>) {
<span class="hljs-built_in">Date</span>.prototype.tojson = <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">isFinite</span>(<span class="hljs-keyword">this</span>.valueOf()) ?
<span class="hljs-keyword">this</span>.getUTCFullYear() + <span class="hljs-string">"-"</span> +
f(<span class="hljs-keyword">this</span>.getUTCMonth() + <span class="hljs-number">1</span>) + <span class="hljs-string">"-"</span> +
f(<span class="hljs-keyword">this</span>.getUTCDate()) + <span class="hljs-string">"T"</span> +
f(<span class="hljs-keyword">this</span>.getUTCHours()) + <span class="hljs-string">":"</span> +
f(<span class="hljs-keyword">this</span>.getUTCMinutes()) + <span class="hljs-string">":"</span> +
f(<span class="hljs-keyword">this</span>.getUTCSeconds()) + <span class="hljs-string">"Z"</span>
: <span class="hljs-literal">null</span>;
};
<span class="hljs-built_in">String</span>.prototype.tojson =
<span class="hljs-built_in">Number</span>.prototype.tojson =
<span class="hljs-built_in">Boolean</span>.prototype.tojson = <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>.valueOf();
};
}
<span class="hljs-keyword">var</span> cx = <span class="hljs-regexp">/[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g</span>,
escapable = <span class="hljs-regexp">/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g</span>,
gap,
indent,
meta = { <span class="hljs-comment">// table of character substitutions</span>
<span class="hljs-string">"\b"</span>: <span class="hljs-string">"\\b"</span>,
<span class="hljs-string">"\t"</span>: <span class="hljs-string">"\\t"</span>,
<span class="hljs-string">"\n"</span>: <span class="hljs-string">"\\n"</span>,
<span class="hljs-string">"\f"</span>: <span class="hljs-string">"\\f"</span>,
<span class="hljs-string">"\r"</span>: <span class="hljs-string">"\\r"</span>,
<span class="hljs-string">"\""</span> : <span class="hljs-string">"\\\""</span>,
<span class="hljs-string">"\\"</span>: <span class="hljs-string">"\\\\"</span>
},
rep;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">quote</span><span class="hljs-params">(string)</span> </span>{</pre></div></div>
</li>
<li id="section-80">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-80">¶</a>
</div>
<p>If the string contains no control characters, no quote characters, and no
backslash characters, then we can safely slap some quotes around it.
Otherwise we must also replace the offending characters with safe escape
sequences.</p>
</div>
<div class="content"><div class='highlight'><pre>
escapable.lastIndex = <span class="hljs-number">0</span>;
<span class="hljs-keyword">return</span> escapable.test(string) ? <span class="hljs-string">"\""</span> + string.replace(escapable, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(a)</span> </span>{
<span class="hljs-keyword">var</span> c = meta[a];
<span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> c === <span class="hljs-string">"string"</span> ? c
: <span class="hljs-string">"\\u"</span> + (<span class="hljs-string">"0000"</span> + a.charCodeAt(<span class="hljs-number">0</span>).toString(<span class="hljs-number">16</span>)).slice(-<span class="hljs-number">4</span>);
}) + <span class="hljs-string">"\""</span> : <span class="hljs-string">"\""</span> + string + <span class="hljs-string">"\""</span>;
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">str</span><span class="hljs-params">(key, holder)</span> </span>{</pre></div></div>
</li>
<li id="section-81">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-81">¶</a>
</div>
<p>Produce a string from holder[key].</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">var</span> i, <span class="hljs-comment">// The loop counter.</span>
k, <span class="hljs-comment">// The member key.</span>
v, <span class="hljs-comment">// The member value.</span>
length,
mind = gap,
partial,
value = holder[key];</pre></div></div>
</li>
<li id="section-82">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-82">¶</a>
</div>
<p>If the value has a tojson method, call it to obtain a replacement value.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">if</span> (value && <span class="hljs-keyword">typeof</span> value === <span class="hljs-string">"object"</span> &&
<span class="hljs-keyword">typeof</span> value.tojson === <span class="hljs-string">"function"</span>) {
value = value.tojson(key);
}</pre></div></div>
</li>
<li id="section-83">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-83">¶</a>
</div>
<p>If we were called with a replacer function, then call the replacer to
obtain a replacement value.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> rep === <span class="hljs-string">"function"</span>) {
value = rep.call(holder, key, value);
}</pre></div></div>
</li>
<li id="section-84">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-84">¶</a>
</div>
<p>What happens next depends on the value”s type.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">switch</span> (<span class="hljs-keyword">typeof</span> value) {
<span class="hljs-keyword">case</span> <span class="hljs-string">"string"</span>:
<span class="hljs-keyword">return</span> quote(value);
<span class="hljs-keyword">case</span> <span class="hljs-string">"number"</span>:</pre></div></div>
</li>
<li id="section-85">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-85">¶</a>
</div>
<p>json numbers must be finite. Encode non-finite numbers as null.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">return</span> <span class="hljs-built_in">isFinite</span>(value) ? <span class="hljs-built_in">String</span>(value) : <span class="hljs-string">"null"</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"boolean"</span>:
<span class="hljs-keyword">case</span> <span class="hljs-string">"null"</span>:</pre></div></div>
</li>
<li id="section-86">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-86">¶</a>
</div>
<p>If the value is a boolean or null, convert it to a string. Note:
typeof null does not produce “null”. The case is included here in
the remote chance that this gets fixed someday.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">return</span> <span class="hljs-built_in">String</span>(value);</pre></div></div>
</li>
<li id="section-87">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-87">¶</a>
</div>
<p>If the type is “object”, we might be dealing with an object or an array or
null.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">case</span> <span class="hljs-string">"object"</span>:</pre></div></div>
</li>
<li id="section-88">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-88">¶</a>
</div>
<p>Due to a specification blunder in ECMAScript, typeof null is “object”,
so watch out for that case.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">if</span> (!value) {
<span class="hljs-keyword">return</span> <span class="hljs-string">"null"</span>;
}</pre></div></div>
</li>
<li id="section-89">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-89">¶</a>
</div>
<p>Make an array to hold the partial results of stringifying this object value.</p>
</div>
<div class="content"><div class='highlight'><pre>
gap += indent;
partial = [];</pre></div></div>
</li>
<li id="section-90">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-90">¶</a>
</div>
<p>Is the value an array?</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">Object</span>.prototype.toString.apply(value) === <span class="hljs-string">"[object Array]"</span>) {</pre></div></div>
</li>
<li id="section-91">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-91">¶</a>
</div>
<p>The value is an array. Stringify every element. Use null as a placeholder
for non-json values.</p>
</div>
<div class="content"><div class='highlight'><pre>
length = value.length;
<span class="hljs-keyword">for</span> (i = <span class="hljs-number">0</span>; i < length; i += <span class="hljs-number">1</span>) {
partial[i] = str(i, value) || <span class="hljs-string">"null"</span>;
}</pre></div></div>
</li>
<li id="section-92">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-92">¶</a>
</div>
<p>Join all of the elements together, separated with commas, and wrap them in
brackets.</p>
</div>
<div class="content"><div class='highlight'><pre>
v = partial.length === <span class="hljs-number">0</span> ? <span class="hljs-string">"[]"</span>
: gap ? <span class="hljs-string">"[\n"</span> + gap + partial.join(<span class="hljs-string">",\n"</span> + gap) + <span class="hljs-string">"\n"</span> + mind + <span class="hljs-string">"]"</span>
: <span class="hljs-string">"["</span> + partial.join(<span class="hljs-string">","</span>) + <span class="hljs-string">"]"</span>;
gap = mind;
<span class="hljs-keyword">return</span> v;
}</pre></div></div>
</li>
<li id="section-93">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-93">¶</a>
</div>
<p>If the replacer is an array, use it to select the members to be stringified.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">if</span> (rep && <span class="hljs-keyword">typeof</span> rep === <span class="hljs-string">"object"</span>) {
length = rep.length;
<span class="hljs-keyword">for</span> (i = <span class="hljs-number">0</span>; i < length; i += <span class="hljs-number">1</span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> rep[i] === <span class="hljs-string">"string"</span>) {
k = rep[i];
v = str(k, value);
<span class="hljs-keyword">if</span> (v) {
partial.push(quote(k) + (gap ? <span class="hljs-string">": "</span> : <span class="hljs-string">":"</span>) + v);
}
}
}
} <span class="hljs-keyword">else</span> {</pre></div></div>
</li>
<li id="section-94">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-94">¶</a>
</div>
<p>Otherwise, iterate through all of the keys in the object.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">for</span> (k <span class="hljs-keyword">in</span> value) {
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">Object</span>.prototype.hasOwnProperty.call(value, k)) {
v = str(k, value);
<span class="hljs-keyword">if</span> (v) {
partial.push(quote(k) + (gap ? <span class="hljs-string">": "</span> : <span class="hljs-string">":"</span>) + v);
}
}
}
}</pre></div></div>
</li>
<li id="section-95">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-95">¶</a>
</div>
<p>Join all of the member texts together, separated with commas,
and wrap them in braces.</p>
</div>
<div class="content"><div class='highlight'><pre>
v = partial.length === <span class="hljs-number">0</span> ? <span class="hljs-string">"{}"</span>
: gap ? <span class="hljs-string">"{\n"</span> + gap + partial.join(<span class="hljs-string">",\n"</span> + gap) + <span class="hljs-string">"\n"</span> + mind + <span class="hljs-string">"}"</span>
: <span class="hljs-string">"{"</span> + partial.join(<span class="hljs-string">","</span>) + <span class="hljs-string">"}"</span>;
gap = mind;
<span class="hljs-keyword">return</span> v;
}
}</pre></div></div>
</li>
<li id="section-96">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-96">¶</a>
</div>
<p>If the json object does not yet have a stringify method, give it one.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> json.stringify !== <span class="hljs-string">"function"</span>) {
json.stringify = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(value, replacer, space)</span> </span>{</pre></div></div>
</li>
<li id="section-97">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-97">¶</a>
</div>
<p>The stringify method takes a value and an optional replacer, and an optional
space parameter, and returns a json text. The replacer can be a function
that can replace values, or an array of strings that will select the keys.
A default replacer method can be provided. Use of the space parameter can
produce text that is more easily readable.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">var</span> i;
gap = <span class="hljs-string">""</span>;
indent = <span class="hljs-string">""</span>;</pre></div></div>
</li>
<li id="section-98">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-98">¶</a>
</div>
<p>If the space parameter is a number, make an indent string containing that
many spaces.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> space === <span class="hljs-string">"number"</span>) {
<span class="hljs-keyword">for</span> (i = <span class="hljs-number">0</span>; i < space; i += <span class="hljs-number">1</span>) {
indent += <span class="hljs-string">" "</span>;
}</pre></div></div>
</li>
<li id="section-99">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-99">¶</a>
</div>
<p>If the space parameter is a string, it will be used as the indent string.</p>
</div>
<div class="content"><div class='highlight'><pre>
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> space === <span class="hljs-string">"string"</span>) {
indent = space;
}</pre></div></div>
</li>
<li id="section-100">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-100">¶</a>
</div>
<p>If there is a replacer, it must be a function or an array.
Otherwise, throw an error.</p>
</div>
<div class="content"><div class='highlight'><pre>
rep = replacer;
<span class="hljs-keyword">if</span> (replacer && <span class="hljs-keyword">typeof</span> replacer !== <span class="hljs-string">"function"</span> &&
(<span class="hljs-keyword">typeof</span> replacer !== <span class="hljs-string">"object"</span> ||
<span class="hljs-keyword">typeof</span> replacer.length !== <span class="hljs-string">"number"</span>)) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">"json.stringify"</span>);
}</pre></div></div>
</li>
<li id="section-101">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-101">¶</a>
</div>
<p>Make a fake root object containing our value under the key of “”.
Return the result of stringifying the value.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">return</span> str(<span class="hljs-string">""</span>, {<span class="hljs-string">""</span>: value});
};
}</pre></div></div>
</li>
<li id="section-102">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-102">¶</a>
</div>
<p>If the json object does not yet have a parse method, give it one.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> json.parse !== <span class="hljs-string">"function"</span>) {
json.parse = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(text, reviver)</span> </span>{</pre></div></div>
</li>
<li id="section-103">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-103">¶</a>
</div>
<p>The parse method takes a text and an optional reviver function, and returns
a JavaScript value if the text is a valid json text.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">var</span> j;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">walk</span><span class="hljs-params">(holder, key)</span> </span>{</pre></div></div>
</li>
<li id="section-104">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-104">¶</a>
</div>
<p>The walk method is used to recursively walk the resulting structure so
that modifications can be made.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">var</span> k, v, value = holder[key];
<span class="hljs-keyword">if</span> (value && <span class="hljs-keyword">typeof</span> value === <span class="hljs-string">"object"</span>) {
<span class="hljs-keyword">for</span> (k <span class="hljs-keyword">in</span> value) {
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">Object</span>.prototype.hasOwnProperty.call(value, k)) {
v = walk(value, k);
<span class="hljs-keyword">if</span> (v !== <span class="hljs-literal">undefined</span>) {
value[k] = v;
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">delete</span> value[k];
}
}
}
}
<span class="hljs-keyword">return</span> reviver.call(holder, key, value);
}</pre></div></div>
</li>
<li id="section-105">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-105">¶</a>
</div>
<p>Parsing happens in four stages. In the first stage, we replace certain
Unicode characters with escape sequences. JavaScript handles many characters
incorrectly, either silently deleting them, or treating them as line endings.</p>
</div>
<div class="content"><div class='highlight'><pre>
text = <span class="hljs-built_in">String</span>(text);
cx.lastIndex = <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (cx.test(text)) {
text = text.replace(cx, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(a)</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-string">"\\u"</span> +
(<span class="hljs-string">"0000"</span> + a.charCodeAt(<span class="hljs-number">0</span>).toString(<span class="hljs-number">16</span>)).slice(-<span class="hljs-number">4</span>);
});
}</pre></div></div>
</li>
<li id="section-106">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-106">¶</a>
</div>
<p>In the second stage, we run the text against regular expressions that look
for non-json patterns. We are especially concerned with “()” and “new”
because they can cause invocation, and “=” because it can cause mutation.
But just to be safe, we want to reject all unexpected forms.</p>
</div>
</li>
<li id="section-107">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-107">¶</a>
</div>
<p>We split the second stage into 4 regexp operations in order to work around
crippling inefficiencies in IE’s and Safari’s regexp engines. First we
replace the json backslash pairs with “@” (a non-json character). Second, we
replace all simple value tokens with “]” characters. Third, we delete all
open brackets that follow a colon or comma or that begin the text. Finally,
we look to see that the remaining characters are only whitespace or “]” or
“,” or “:” or “{“ or “}”. If that is so, then the text is safe for eval.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">if</span> (<span class="hljs-regexp">/^[\],:{}\s]*$/</span>
.test(text.replace(<span class="hljs-regexp">/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g</span>, <span class="hljs-string">"@"</span>)
.replace(<span class="hljs-regexp">/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g</span>, <span class="hljs-string">"]"</span>)
.replace(<span class="hljs-regexp">/(?:^|:|,)(?:\s*\[)+/g</span>, <span class="hljs-string">""</span>))) {</pre></div></div>
</li>
<li id="section-108">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-108">¶</a>
</div>
<p>In the third stage we use the eval function to compile the text into a
JavaScript structure. The “{“ operator is subject to a syntactic ambiguity
in JavaScript: it can begin a block or an object literal. We wrap the text
in parens to eliminate the ambiguity.</p>
</div>
<div class="content"><div class='highlight'><pre>
j = <span class="hljs-built_in">eval</span>(<span class="hljs-string">"("</span> + text + <span class="hljs-string">")"</span>);</pre></div></div>
</li>
<li id="section-109">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-109">¶</a>
</div>
<p>In the optional fourth stage, we recursively walk the new structure, passing
each name/value pair to a reviver function for possible transformation.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> reviver === <span class="hljs-string">"function"</span> ? walk({<span class="hljs-string">""</span>: j}, <span class="hljs-string">""</span>) : j;
}</pre></div></div>
</li>
<li id="section-110">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-110">¶</a>
</div>
<p>If the text is not json parseable, then a SyntaxError is thrown.</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">SyntaxError</span>(<span class="hljs-string">"json.parse"</span>);
};
}
}());</pre></div></div>
</li>
<li id="section-111">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-111">¶</a>
</div>
<p>querySelector pollyfill using Sizzle</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">var</span> sizzle = (<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">if</span> (feature.qsa3 === <span class="hljs-literal">true</span>) {
<span class="hljs-keyword">return</span>;
}
<span class="hljs-comment">/*!
* Sizzle CSS Selector Engine v1.10.6-pre
* http://sizzlejs.com/
*
* Copyright 2013 jQuery Foundation, Inc. and other contributors
* Released under the MIT license
* http://jquery.org/license
*
*/</span>
<span class="hljs-keyword">var</span> i,
support,
cachedruns = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">var</span> keys = [];
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">cache</span> <span class="hljs-params">(key, value)</span> </span>{</pre></div></div>
</li>
<li id="section-112">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-112">¶</a>
</div>
<p>Use (key + “ “) to avoid collision
with native prototype properties (see Issue #157)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (keys.push(key += <span class="hljs-string">" "</span>) > Expr.cacheLength) {</pre></div></div>
</li>
<li id="section-113">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-113">¶</a>
</div>
<p>Only keep the most recent entries</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">delete</span> cache[keys.shift()];
}
<span class="hljs-keyword">return</span> (cache[key] = value);
}
<span class="hljs-keyword">return</span> cache;
},
Expr,
getText,
isXML,
compile,
outermostContext,
sortInput,</pre></div></div>
</li>
<li id="section-114">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-114">¶</a>
</div>
<p>Local document vars</p>
</div>
<div class="content"><div class='highlight'><pre> setDocument,
<span class="hljs-built_in">document</span>,
docElem,
documentIsHTML,
rbuggyQSA,
rbuggyMatches,
matches,
contains,</pre></div></div>
</li>
<li id="section-115">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-115">¶</a>
</div>
<p>Instance-specific data</p>
</div>
<div class="content"><div class='highlight'><pre> expando = <span class="hljs-string">"sizzle"</span> + -(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>()),
preferredDoc = win.document,
dirruns = <span class="hljs-number">0</span>,
done = <span class="hljs-number">0</span>,
classCache,
tokenCache,
compilerCache,
hasDuplicate = <span class="hljs-literal">false</span>,
sortOrder = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(a, b)</span> </span>{
<span class="hljs-keyword">if</span> (a === b) {
hasDuplicate = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
}
<span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
},</pre></div></div>
</li>
<li id="section-116">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-116">¶</a>
</div>
<p>General-purpose constants</p>
</div>
<div class="content"><div class='highlight'><pre> strundefined = <span class="hljs-keyword">typeof</span> <span class="hljs-literal">undefined</span>,
MAX_NEGATIVE = <span class="hljs-number">1</span> << <span class="hljs-number">31</span>,</pre></div></div>
</li>
<li id="section-117">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-117">¶</a>
</div>
<p>Instance methods</p>
</div>
<div class="content"><div class='highlight'><pre> hasOwn = ({}).hasOwnProperty,
arr = [],
pop = arr.pop,
push_native = arr.push,
push = arr.push,
slice = arr.slice,</pre></div></div>
</li>
<li id="section-118">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-118">¶</a>
</div>
<p>Use a stripped-down indexOf if we can’t use a native one</p>
</div>
<div class="content"><div class='highlight'><pre> indexOf = arr.indexOf || <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>,
len = <span class="hljs-keyword">this</span>.length;
<span class="hljs-keyword">for</span> (; i < len; i++) {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>[i] === elem) {
<span class="hljs-keyword">return</span> i;
}
}
<span class="hljs-keyword">return</span> -<span class="hljs-number">1</span>;
},
booleans = <span class="hljs-string">"checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped"</span>,</pre></div></div>
</li>
<li id="section-119">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-119">¶</a>
</div>
<p>Regular expressions</p>
</div>
</li>
<li id="section-120">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-120">¶</a>
</div>
<p>Whitespace characters <a href="http://www.w3.org/TR/css3-selectors/#whitespace">http://www.w3.org/TR/css3-selectors/#whitespace</a></p>
</div>
<div class="content"><div class='highlight'><pre> whitespace = <span class="hljs-string">"[\\x20\\t\\r\\n\\f]"</span>,</pre></div></div>
</li>
<li id="section-121">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-121">¶</a>
</div>
<p><a href="http://www.w3.org/TR/css3-syntax/#characters">http://www.w3.org/TR/css3-syntax/#characters</a></p>
</div>
<div class="content"><div class='highlight'><pre> characterEncoding = <span class="hljs-string">"(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+"</span>,</pre></div></div>
</li>
<li id="section-122">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-122">¶</a>
</div>
<p>Loosely modeled on CSS identifier characters
An unquoted value should be a CSS identifier
<a href="http://www.w3.org/TR/css3-selectors/#attribute-selectors">http://www.w3.org/TR/css3-selectors/#attribute-selectors</a>
Proper syntax:
<a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier</a></p>
</div>
<div class="content"><div class='highlight'><pre> identifier = characterEncoding.replace(<span class="hljs-string">"w"</span>, <span class="hljs-string">"w#"</span>),</pre></div></div>
</li>
<li id="section-123">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-123">¶</a>
</div>
<p>Acceptable operators
<a href="http://www.w3.org/TR/selectors/#attribute-selectors">http://www.w3.org/TR/selectors/#attribute-selectors</a></p>
</div>
<div class="content"><div class='highlight'><pre> attributes = <span class="hljs-string">"\\["</span> + whitespace + <span class="hljs-string">"*("</span> + characterEncoding + <span class="hljs-string">")"</span> +
whitespace +
<span class="hljs-string">"*(?:([*^$|!~]?=)"</span> + whitespace +
<span class="hljs-string">"*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|("</span> + identifier + <span class="hljs-string">")|)|)"</span> +
whitespace + <span class="hljs-string">"*\\]"</span>,</pre></div></div>
</li>
<li id="section-124">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-124">¶</a>
</div>
<p>Prefer arguments quoted,
then not containing pseudos/brackets,
then attribute selectors/non-parenthetical expressions,
then anything else
These preferences are here to reduce the number of selectors
needing tokenize in the PSEUDO preFilter</p>
</div>
<div class="content"><div class='highlight'><pre> pseudos = <span class="hljs-string">":("</span> + characterEncoding +
<span class="hljs-string">")(?:\\(((['\"])((?:\\\\.|[^\\\\])*?)\\3|((?:\\\\.|[^\\\\()[\\]]|"</span> +
attributes.replace(<span class="hljs-number">3</span>, <span class="hljs-number">8</span>) + <span class="hljs-string">")*)|.*)\\)|)"</span>,</pre></div></div>
</li>
<li id="section-125">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-125">¶</a>
</div>
<p>Leading and non-escaped trailing whitespace, capturing some non-whitespace characters preceding the latter</p>
</div>
<div class="content"><div class='highlight'><pre> rtrim = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">"^"</span> + whitespace + <span class="hljs-string">"+|((?:^|[^\\\\])(?:\\\\.)*)"</span> +
whitespace + <span class="hljs-string">"+$"</span>, <span class="hljs-string">"g"</span>),
rcomma = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">"^"</span> + whitespace + <span class="hljs-string">"*,"</span> + whitespace + <span class="hljs-string">"*"</span>),
rcombinators = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">"^"</span> + whitespace + <span class="hljs-string">"*([>+~]|"</span> + whitespace +
<span class="hljs-string">")"</span> + whitespace + <span class="hljs-string">"*"</span>),
rsibling = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(whitespace + <span class="hljs-string">"*[+~]"</span>),
rattributeQuotes = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">"="</span> + whitespace + <span class="hljs-string">"*([^\\]'\"]*)"</span> +
whitespace + <span class="hljs-string">"*\\]"</span>, <span class="hljs-string">"g"</span>),
rpseudo = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(pseudos ),
ridentifier = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">"^"</span> + identifier + <span class="hljs-string">"$"</span> ),
matchExpr = {
<span class="hljs-string">"ID"</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">"^#("</span> + characterEncoding + <span class="hljs-string">")"</span> ),
<span class="hljs-string">"CLASS"</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">"^\\.("</span> + characterEncoding + <span class="hljs-string">")"</span> ),
<span class="hljs-string">"TAG"</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">"^("</span> + characterEncoding.replace(<span class="hljs-string">"w"</span>, <span class="hljs-string">"w*"</span> ) + <span class="hljs-string">")"</span> ),
<span class="hljs-string">"ATTR"</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">"^"</span> + attributes ),
<span class="hljs-string">"PSEUDO"</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">"^"</span> + pseudos ),
<span class="hljs-string">"CHILD"</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">"^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("</span> + whitespace +
<span class="hljs-string">"*(even|odd|(([+-]|)(\\d*)n|)"</span> + whitespace + <span class="hljs-string">"*(?:([+-]|)"</span> + whitespace +
<span class="hljs-string">"*(\\d+)|))"</span> + whitespace + <span class="hljs-string">"*\\)|)"</span>, <span class="hljs-string">"i"</span> ),
<span class="hljs-string">"bool"</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">"^(?:"</span> + booleans + <span class="hljs-string">")$"</span>, <span class="hljs-string">"i"</span> ),</pre></div></div>
</li>
<li id="section-126">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-126">¶</a>
</div>
<p>For use in libraries implementing .is()
We use this for POS matching in <code>select</code></p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-string">"needsContext"</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">"^"</span> + whitespace + <span class="hljs-string">"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("</span> +
whitespace + <span class="hljs-string">"*((?:-\\d)?\\d*)"</span> + whitespace + <span class="hljs-string">"*\\)|)(?=[^-]|$)"</span>, <span class="hljs-string">"i"</span> )
},
rnative = <span class="hljs-regexp">/^[^{]+\{\s*\[native \w/</span>,</pre></div></div>
</li>
<li id="section-127">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-127">¶</a>
</div>
<p>Easily-parseable/retrievable ID or TAG or CLASS selectors</p>
</div>
<div class="content"><div class='highlight'><pre> rquickExpr = <span class="hljs-regexp">/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/</span>,
rinputs = <span class="hljs-regexp">/^(?:input|select|textarea|button)$/i</span>,
rheader = <span class="hljs-regexp">/^h\d$/i</span>,
rescape = <span class="hljs-regexp">/'|\\/g</span>,</pre></div></div>
</li>
<li id="section-128">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-128">¶</a>
</div>
<p>CSS escapes <a href="http://www.w3.org/TR/CSS21/syndata.html#escaped-characters">http://www.w3.org/TR/CSS21/syndata.html#escaped-characters</a></p>
</div>
<div class="content"><div class='highlight'><pre> runescape = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">"\\\\([\\da-f]{1,6}"</span> + whitespace + <span class="hljs-string">"?|("</span> +
whitespace + <span class="hljs-string">")|.)"</span>, <span class="hljs-string">"ig"</span> ),
funescape = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(_, escaped, escapedWhitespace)</span> </span>{
<span class="hljs-keyword">var</span> high = <span class="hljs-string">"0x"</span> + escaped - <span class="hljs-number">0x10000</span>;</pre></div></div>
</li>
<li id="section-129">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-129">¶</a>
</div>
<p>NaN means non-codepoint
Support: Firefox
Workaround erroneous numeric interpretation of +”0x”</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> high !== high || escapedWhitespace ?
escaped :</pre></div></div>
</li>
<li id="section-130">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-130">¶</a>
</div>
<p>BMP codepoint</p>
</div>
<div class="content"><div class='highlight'><pre> high < <span class="hljs-number">0</span> ?
<span class="hljs-built_in">String</span>.fromCharCode(high + <span class="hljs-number">0x10000</span>) :</pre></div></div>
</li>
<li id="section-131">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-131">¶</a>
</div>
<p>Supplemental Plane codepoint (surrogate pair)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-built_in">String</span>.fromCharCode(high >> <span class="hljs-number">10</span> | <span class="hljs-number">0xD800</span>, high & <span class="hljs-number">0x3FF</span> | <span class="hljs-number">0xDC00</span>);
};</pre></div></div>
</li>
<li id="section-132">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-132">¶</a>
</div>
<p>Optimize for push.apply(_, NodeList)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">try</span> {
push.apply(
(arr = slice.call(preferredDoc.childNodes)),
preferredDoc.childNodes
);</pre></div></div>
</li>
<li id="section-133">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-133">¶</a>
</div>
<p>Support: Android<4.0
Detect silently failing push.apply</p>
</div>
<div class="content"><div class='highlight'><pre> arr[preferredDoc.childNodes.length].nodeType;
} <span class="hljs-keyword">catch</span> (e) {
push = { apply: arr.length ?</pre></div></div>
</li>
<li id="section-134">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-134">¶</a>
</div>
<p>Leverage slice if possible</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(target, els)</span> </span>{
push_native.apply(target, slice.call(els));
} :</pre></div></div>
</li>
<li id="section-135">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-135">¶</a>
</div>
<p>Support: IE<9
Otherwise append directly</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(target, els)</span> </span>{
<span class="hljs-keyword">var</span> j = target.length,
i = <span class="hljs-number">0</span>;</pre></div></div>
</li>
<li id="section-136">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-136">¶</a>
</div>
<p>Can’t trust NodeList.length</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">while</span> ((target[j++] = els[i++])) {}
target.length = j - <span class="hljs-number">1</span>;
}
};
}
<span class="hljs-comment">/**
* Create key-value caches of limited size
* @returns {Function(string, Object)} Returns the Object data after storing it on itself with
* property name the (space-suffixed) string and (if the cache is larger than Expr.cacheLength)
* deleting the oldest entry
*/</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">select</span><span class="hljs-params">(selector, context, results, seed)</span> </span>{
<span class="hljs-keyword">var</span> i, tokens, token, type, find,
match = tokenize(selector);
<span class="hljs-keyword">if</span> (!seed) {</pre></div></div>
</li>
<li id="section-137">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-137">¶</a>
</div>
<p>Try to minimize operations if there is only one group</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (match.length === <span class="hljs-number">1</span>) {</pre></div></div>
</li>
<li id="section-138">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-138">¶</a>
</div>
<p>Take a shortcut and set the context if the root selector is an ID</p>
</div>
<div class="content"><div class='highlight'><pre> tokens = match[<span class="hljs-number">0</span>] = match[<span class="hljs-number">0</span>].slice(<span class="hljs-number">0</span>);
<span class="hljs-keyword">if</span> (tokens.length > <span class="hljs-number">2</span> && (token = tokens[<span class="hljs-number">0</span>]).type === <span class="hljs-string">"ID"</span> &&
support.getById && context.nodeType === <span class="hljs-number">9</span> && documentIsHTML &&
Expr.relative[tokens[<span class="hljs-number">1</span>].type]) {
context = (Expr.find[<span class="hljs-string">"ID"</span>](token.matches[<span class="hljs-number">0</span>].replace(runescape,
funescape), context) || [])[<span class="hljs-number">0</span>];
<span class="hljs-keyword">if</span> (!context) {
<span class="hljs-keyword">return</span> results;
}
selector = selector.slice(tokens.shift().value.length);
}</pre></div></div>
</li>
<li id="section-139">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-139">¶</a>
</div>
<p>Fetch a seed set for right-to-left matching</p>
</div>
<div class="content"><div class='highlight'><pre> i = matchExpr[<span class="hljs-string">"needsContext"</span>].test(selector) ? <span class="hljs-number">0</span> : tokens.length;
<span class="hljs-keyword">while</span> (i--) {
token = tokens[i];</pre></div></div>
</li>
<li id="section-140">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-140">¶</a>
</div>
<p>Abort if we hit a combinator</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (Expr.relative[(type = token.type)]) {
<span class="hljs-keyword">break</span>;
}
<span class="hljs-keyword">if</span> ((find = Expr.find[type])) {</pre></div></div>
</li>
<li id="section-141">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-141">¶</a>
</div>
<p>Search, expanding context for leading sibling combinators</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> ((seed = find(
token.matches[<span class="hljs-number">0</span>].replace(runescape, funescape),
rsibling.test(tokens[<span class="hljs-number">0</span>].type) && context.parentNode || context
))) {</pre></div></div>
</li>
<li id="section-142">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-142">¶</a>
</div>
<p>If seed is empty or no tokens remain, we can return early</p>
</div>
<div class="content"><div class='highlight'><pre> tokens.splice(i, <span class="hljs-number">1</span>);
selector = seed.length && toSelector(tokens);
<span class="hljs-keyword">if</span> (!selector) {
push.apply(results, seed);
<span class="hljs-keyword">return</span> results;
}
<span class="hljs-keyword">break</span>;
}
}
}
}
}</pre></div></div>
</li>
<li id="section-143">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-143">¶</a>
</div>
<p>Compile and execute a filtering function
Provide <code>match</code> to avoid retokenization if we modified the selector above</p>
</div>
<div class="content"><div class='highlight'><pre> compile(selector, match)(
seed,
context,
!documentIsHTML,
results,
rsibling.test(selector)
);
<span class="hljs-keyword">return</span> results;
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Sizzle</span><span class="hljs-params">(selector, context, results, seed)</span> </span>{
<span class="hljs-keyword">var</span> match, elem, m, nodeType,</pre></div></div>
</li>
<li id="section-144">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-144">¶</a>
</div>
<p>QSA vars</p>
</div>
<div class="content"><div class='highlight'><pre> i, groups, old, nid, newContext, newSelector;
<span class="hljs-keyword">if</span> ((context ? context.ownerDocument || context : preferredDoc) !== <span class="hljs-built_in">document</span>) {
setDocument(context);
}
context = context || <span class="hljs-built_in">document</span>;
results = results || [];
<span class="hljs-keyword">if</span> (!selector || <span class="hljs-keyword">typeof</span> selector !== <span class="hljs-string">"string"</span>) {
<span class="hljs-keyword">return</span> results;
}
<span class="hljs-keyword">if</span> ((nodeType = context.nodeType) !== <span class="hljs-number">1</span> && nodeType !== <span class="hljs-number">9</span>) {
<span class="hljs-keyword">return</span> [];
}
<span class="hljs-keyword">if</span> (documentIsHTML && !seed) {</pre></div></div>
</li>
<li id="section-145">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-145">¶</a>
</div>
<p>Shortcuts</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> ((match = rquickExpr.exec(selector))) {</pre></div></div>
</li>
<li id="section-146">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-146">¶</a>
</div>
<p>Speed-up: Sizzle(“#ID”)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> ((m = match[<span class="hljs-number">1</span>])) {
<span class="hljs-keyword">if</span> (nodeType === <span class="hljs-number">9</span>) {
elem = context.getElementById(m);</pre></div></div>
</li>
<li id="section-147">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-147">¶</a>
</div>
<p>Check parentNode to catch when Blackberry 4.6 returns
nodes that are no longer in the document #6963</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (elem && elem.parentNode) {</pre></div></div>
</li>
<li id="section-148">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-148">¶</a>
</div>
<p>Handle the case where IE, Opera, and Webkit return items
by name instead of ID</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (elem.id === m) {
results.push(elem);
<span class="hljs-keyword">return</span> results;
}
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span> results;
}
} <span class="hljs-keyword">else</span> {</pre></div></div>
</li>
<li id="section-149">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-149">¶</a>
</div>
<p>Context is not a document</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (context.ownerDocument && (elem = context.ownerDocument.getElementById(m)) &&
contains(context, elem) && elem.id === m) {
results.push(elem);
<span class="hljs-keyword">return</span> results;
}
}</pre></div></div>
</li>
<li id="section-150">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-150">¶</a>
</div>
<p>Speed-up: Sizzle(“TAG”)</p>
</div>
<div class="content"><div class='highlight'><pre> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (match[<span class="hljs-number">2</span>]) {
push.apply(results, context.getElementsByTagName(selector));
<span class="hljs-keyword">return</span> results;</pre></div></div>
</li>
<li id="section-151">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-151">¶</a>
</div>
<p>Speed-up: Sizzle(“.CLASS”)</p>
</div>
<div class="content"><div class='highlight'><pre> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> ((m = match[<span class="hljs-number">3</span>]) && support.getElementsByClassName && context.getElementsByClassName) {
push.apply(results, context.getElementsByClassName(m));
<span class="hljs-keyword">return</span> results;
}
}</pre></div></div>
</li>
<li id="section-152">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-152">¶</a>
</div>
<p>QSA path</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (support.qsa && (!rbuggyQSA || !rbuggyQSA.test(selector))) {
nid = old = expando;
newContext = context;
newSelector = nodeType === <span class="hljs-number">9</span> && selector;</pre></div></div>
</li>
<li id="section-153">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-153">¶</a>
</div>
<p>qSA works strangely on Element-rooted queries
We can work around this by specifying an extra ID on the root
and working up from there (Thanks to Andrew Dupont for the technique)
IE 8 doesn’t work on object elements</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (nodeType === <span class="hljs-number">1</span> && context.nodeName.toLowerCase() !== <span class="hljs-string">"object"</span>) {
groups = tokenize(selector);
<span class="hljs-keyword">if</span> ((old = context.getAttribute(<span class="hljs-string">"id"</span>))) {
nid = old.replace(rescape, <span class="hljs-string">"\\$&"</span>);
} <span class="hljs-keyword">else</span> {
context.setAttribute(<span class="hljs-string">"id"</span>, nid);
}
nid = <span class="hljs-string">"[id='"</span> + nid + <span class="hljs-string">"'] "</span>;
i = groups.length;
<span class="hljs-keyword">while</span> (i--) {
groups[i] = nid + toSelector(groups[i]);
}
newContext = rsibling.test(selector) && context.parentNode || context;
newSelector = groups.join(<span class="hljs-string">","</span>);
}
<span class="hljs-keyword">if</span> (newSelector) {
<span class="hljs-keyword">try</span> {
push.apply(results,
newContext.querySelectorAll(newSelector)
);
<span class="hljs-keyword">return</span> results;
} <span class="hljs-keyword">catch</span>(qsaError) {
} <span class="hljs-keyword">finally</span> {
<span class="hljs-keyword">if</span> (!old) {
context.removeAttribute(<span class="hljs-string">"id"</span>);
}
}
}
}
}</pre></div></div>
</li>
<li id="section-154">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-154">¶</a>
</div>
<p>All others</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> select(selector.replace(rtrim, <span class="hljs-string">"$1"</span>), context, results, seed);
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createCache</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">var</span> keys = [];
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">cache</span><span class="hljs-params">(key, value)</span> </span>{</pre></div></div>
</li>
<li id="section-155">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-155">¶</a>
</div>
<p>Use (key + “ “) to avoid collision with native prototype properties (see Issue #157)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (keys.push(key += <span class="hljs-string">" "</span>) > Expr.cacheLength) {</pre></div></div>
</li>
<li id="section-156">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-156">¶</a>
</div>
<p>Only keep the most recent entries</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">delete</span> cache[keys.shift()];
}
<span class="hljs-keyword">return</span> (cache[key] = value);
}
<span class="hljs-keyword">return</span> cache;
}
classCache = createCache();
tokenCache = createCache();
compilerCache = createCache();
<span class="hljs-comment">/**
* Mark a function for special use by Sizzle
* @param {Function} fn The function to mark
*/</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">markFunction</span><span class="hljs-params">(fn)</span> </span>{
fn[expando] = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">return</span> fn;
}
<span class="hljs-comment">/**
* Support testing using an element
* @param {Function} fn Passed the created div and expects a boolean result
*/</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">assert</span><span class="hljs-params">(fn)</span> </span>{
<span class="hljs-keyword">var</span> div = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"div"</span>);
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">return</span> !!fn(div);
} <span class="hljs-keyword">catch</span> (e) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
} <span class="hljs-keyword">finally</span> {</pre></div></div>
</li>
<li id="section-157">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-157">¶</a>
</div>
<p>Remove from its parent by default</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (div.parentNode) {
div.parentNode.removeChild(div);
}</pre></div></div>
</li>
<li id="section-158">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-158">¶</a>
</div>
<p>release memory in IE</p>
</div>
<div class="content"><div class='highlight'><pre> div = <span class="hljs-literal">null</span>;
}
}
<span class="hljs-comment">/**
* Adds the same handler for all of the specified attrs
* @param {String} attrs Pipe-separated list of attributes
* @param {Function} handler The method that will be applied
*/</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addHandle</span><span class="hljs-params">(attrs, handler)</span> </span>{
<span class="hljs-keyword">var</span> arr = attrs.split(<span class="hljs-string">"|"</span>),
i = attrs.length;
<span class="hljs-keyword">while</span> (i--) {
Expr.attrHandle[arr[i]] = handler;
}
}
<span class="hljs-comment">/**
* Checks document order of two siblings
* @param {Element} a
* @param {Element} b
* @returns {Number} Returns less than 0 if a precedes b, greater than 0 if a follows b
*/</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">siblingCheck</span><span class="hljs-params">(a, b)</span> </span>{
<span class="hljs-keyword">var</span> cur = b && a,
diff = cur && a.nodeType === <span class="hljs-number">1</span> && b.nodeType === <span class="hljs-number">1</span> &&
(~b.sourceIndex || MAX_NEGATIVE) -
(~a.sourceIndex || MAX_NEGATIVE);</pre></div></div>
</li>
<li id="section-159">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-159">¶</a>
</div>
<p>Use IE sourceIndex if available on both nodes</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (diff) {
<span class="hljs-keyword">return</span> diff;
}</pre></div></div>
</li>
<li id="section-160">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-160">¶</a>
</div>
<p>Check if b follows a</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (cur) {
<span class="hljs-keyword">while</span> ((cur = cur.nextSibling)) {
<span class="hljs-keyword">if</span> (cur === b) {
<span class="hljs-keyword">return</span> -<span class="hljs-number">1</span>;
}
}
}
<span class="hljs-keyword">return</span> a ? <span class="hljs-number">1</span> : -<span class="hljs-number">1</span>;
}
<span class="hljs-comment">/**
* Returns a function to use in pseudos for input types
* @param {String} type
*/</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createInputPseudo</span><span class="hljs-params">(type)</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">var</span> name = elem.nodeName.toLowerCase();
<span class="hljs-keyword">return</span> name === <span class="hljs-string">"input"</span> && elem.type === type;
};
}
<span class="hljs-comment">/**
* Returns a function to use in pseudos for buttons
* @param {String} type
*/</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createButtonPseudo</span><span class="hljs-params">(type)</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">var</span> name = elem.nodeName.toLowerCase();
<span class="hljs-keyword">return</span> (name === <span class="hljs-string">"input"</span> || name === <span class="hljs-string">"button"</span>) && elem.type === type;
};
}
<span class="hljs-comment">/**
* Returns a function to use in pseudos for positionals
* @param {Function} fn
*/</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createPositionalPseudo</span><span class="hljs-params">(fn)</span> </span>{
<span class="hljs-keyword">return</span> markFunction(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(argument)</span> </span>{
argument = +argument;
<span class="hljs-keyword">return</span> markFunction(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(seed, matches)</span> </span>{
<span class="hljs-keyword">var</span> j,
matchIndexes = fn([], seed.length, argument),
i = matchIndexes.length;</pre></div></div>
</li>
<li id="section-161">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-161">¶</a>
</div>
<p>Match elements found at the specified indexes</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">while</span> (i--) {
<span class="hljs-keyword">if</span> (seed[(j = matchIndexes[i])]) {
seed[j] = !(matches[j] = seed[j]);
}
}
});
});
}
<span class="hljs-comment">/**
* Detect xml
* @param {Element|Object} elem An element or a document
*/</span>
isXML = Sizzle.isXML = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{</pre></div></div>
</li>
<li id="section-162">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-162">¶</a>
</div>
<p>documentElement is verified for cases where it doesn’t yet exist
(such as loading iframes in IE - #4833)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> documentElement = elem && (elem.ownerDocument || elem).documentElement;
<span class="hljs-keyword">return</span> documentElement ? documentElement.nodeName !== <span class="hljs-string">"HTML"</span> : <span class="hljs-literal">false</span>;
};</pre></div></div>
</li>
<li id="section-163">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-163">¶</a>
</div>
<p>Expose support vars for convenience</p>
</div>
<div class="content"><div class='highlight'><pre> support = Sizzle.support = {};
<span class="hljs-comment">/**
* Sets document-related variables once based on the current document
* @param {Element|Object} [doc] An element or document object to use to set the document
* @returns {Object} Returns the current document
*/</span>
setDocument = Sizzle.setDocument = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(node)</span> </span>{
<span class="hljs-keyword">var</span> doc = node ? node.ownerDocument || node : preferredDoc,
parent = doc.defaultView;</pre></div></div>
</li>
<li id="section-164">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-164">¶</a>
</div>
<p>If no document and documentElement is available, return</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (doc === <span class="hljs-built_in">document</span> || doc.nodeType !== <span class="hljs-number">9</span> || !doc.documentElement) {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">document</span>;
}</pre></div></div>
</li>
<li id="section-165">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-165">¶</a>
</div>
<p>Set our document</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-built_in">document</span> = doc;
docElem = doc.documentElement;</pre></div></div>
</li>
<li id="section-166">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-166">¶</a>
</div>
<p>Support tests</p>
</div>
<div class="content"><div class='highlight'><pre> documentIsHTML = !isXML(doc);</pre></div></div>
</li>
<li id="section-167">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-167">¶</a>
</div>
<p>Support: IE>8
If iframe document is assigned to “document” variable and if iframe has been reloaded,
IE will throw “permission denied” error when accessing “document” variable, see jQuery #13936
IE6-8 do not support the defaultView property so parent will be undefined</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (parent && parent.attachEvent && parent !== parent.top) {
parent.attachEvent(<span class="hljs-string">"onbeforeunload"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
setDocument();
});
}
<span class="hljs-comment">/* Attributes
---------------------------------------------------------------------- */</span></pre></div></div>
</li>
<li id="section-168">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-168">¶</a>
</div>
<p>Support: IE<8
Verify that getAttribute really returns attributes and not properties (excepting IE8 booleans)</p>
</div>
<div class="content"><div class='highlight'><pre> support.attributes = assert(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(div)</span> </span>{
div.className = <span class="hljs-string">"i"</span>;
<span class="hljs-keyword">return</span> !div.getAttribute(<span class="hljs-string">"className"</span>);
});
<span class="hljs-comment">/* getElement(s)By*
---------------------------------------------------------------------- */</span></pre></div></div>
</li>
<li id="section-169">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-169">¶</a>
</div>
<p>Check if getElementsByTagName(“*”) returns only elements</p>
</div>
<div class="content"><div class='highlight'><pre> support.getElementsByTagName = assert(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(div)</span> </span>{
div.appendChild(doc.createComment(<span class="hljs-string">""</span>));
<span class="hljs-keyword">return</span> !div.getElementsByTagName(<span class="hljs-string">"*"</span>).length;
});</pre></div></div>
</li>
<li id="section-170">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-170">¶</a>
</div>
<p>Check if getElementsByClassName can be trusted</p>
</div>
<div class="content"><div class='highlight'><pre> support.getElementsByClassName = assert(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(div)</span> </span>{
div.innerHTML = <span class="hljs-string">"<div class='a'></div><div class='a i'></div>"</span>;</pre></div></div>
</li>
<li id="section-171">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-171">¶</a>
</div>
<p>Support: Safari<4
Catch class over-caching</p>
</div>
<div class="content"><div class='highlight'><pre> div.firstChild.className = <span class="hljs-string">"i"</span>;</pre></div></div>
</li>
<li id="section-172">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-172">¶</a>
</div>
<p>Support: Opera<10
Catch gEBCN failure to find non-leading classes</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> div.getElementsByClassName(<span class="hljs-string">"i"</span>).length === <span class="hljs-number">2</span>;
});</pre></div></div>
</li>
<li id="section-173">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-173">¶</a>
</div>
<p>Support: IE<10
Check if getElementById returns elements by name
The broken getElementById methods don’t pick up programatically-set names,
so use a roundabout getElementsByName test</p>
</div>
<div class="content"><div class='highlight'><pre> support.getById = assert(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(div)</span> </span>{
docElem.appendChild(div).id = expando;
<span class="hljs-keyword">return</span> !doc.getElementsByName || !doc.getElementsByName(expando).length;
});</pre></div></div>
</li>
<li id="section-174">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-174">¶</a>
</div>
<p>ID find and filter</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (support.getById) {
Expr.find[<span class="hljs-string">"ID"</span>] = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(id, context)</span> </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> context.getElementById !== strundefined && documentIsHTML) {
<span class="hljs-keyword">var</span> m = context.getElementById(id);</pre></div></div>
</li>
<li id="section-175">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-175">¶</a>
</div>
<p>Check parentNode to catch when Blackberry 4.6 returns
nodes that are no longer in the document #6963</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> m && m.parentNode ? [m] : [];
}
};
Expr.filter[<span class="hljs-string">"ID"</span>] = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(id)</span> </span>{
<span class="hljs-keyword">var</span> attrId = id.replace(runescape, funescape);
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">return</span> elem.getAttribute(<span class="hljs-string">"id"</span>) === attrId;
};
};
} <span class="hljs-keyword">else</span> {</pre></div></div>
</li>
<li id="section-176">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-176">¶</a>
</div>
<p>Support: IE6/7
getElementById is not reliable as a find shortcut</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">delete</span> Expr.find[<span class="hljs-string">"ID"</span>];
Expr.filter[<span class="hljs-string">"ID"</span>] = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(id)</span> </span>{
<span class="hljs-keyword">var</span> attrId = id.replace(runescape, funescape);
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">var</span> node = <span class="hljs-keyword">typeof</span> elem.getAttributeNode !== strundefined && elem.getAttributeNode(<span class="hljs-string">"id"</span>);
<span class="hljs-keyword">return</span> node && node.value === attrId;
};
};
}</pre></div></div>
</li>
<li id="section-177">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-177">¶</a>
</div>
<p>Tag</p>
</div>
<div class="content"><div class='highlight'><pre> Expr.find[<span class="hljs-string">"TAG"</span>] = support.getElementsByTagName ?
<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(tag, context)</span> </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> context.getElementsByTagName !== strundefined) {
<span class="hljs-keyword">return</span> context.getElementsByTagName(tag);
}
} :
<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(tag, context)</span> </span>{
<span class="hljs-keyword">var</span> elem,
tmp = [],
i = <span class="hljs-number">0</span>,
results = context.getElementsByTagName(tag);</pre></div></div>
</li>
<li id="section-178">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-178">¶</a>
</div>
<p>Filter out possible comments</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (tag === <span class="hljs-string">"*"</span>) {
<span class="hljs-keyword">while</span> ((elem = results[i++])) {
<span class="hljs-keyword">if</span> (elem.nodeType === <span class="hljs-number">1</span>) {
tmp.push(elem);
}
}
<span class="hljs-keyword">return</span> tmp;
}
<span class="hljs-keyword">return</span> results;
};</pre></div></div>
</li>
<li id="section-179">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-179">¶</a>
</div>
<p>Class</p>
</div>
<div class="content"><div class='highlight'><pre> Expr.find[<span class="hljs-string">"CLASS"</span>] = support.getElementsByClassName && <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(className, context)</span> </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> context.getElementsByClassName !== strundefined && documentIsHTML) {
<span class="hljs-keyword">return</span> context.getElementsByClassName(className);
}
};
<span class="hljs-comment">/* QSA/matchesSelector
---------------------------------------------------------------------- */</span></pre></div></div>
</li>
<li id="section-180">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-180">¶</a>
</div>
<p>QSA and matchesSelector support</p>
</div>
</li>
<li id="section-181">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-181">¶</a>
</div>
<p>matchesSelector(:active) reports false when true (IE9/Opera 11.5)</p>
</div>
<div class="content"><div class='highlight'><pre> rbuggyMatches = [];</pre></div></div>
</li>
<li id="section-182">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-182">¶</a>
</div>
<p>qSa(:focus) reports false when true (Chrome 21)
We allow this because of a bug in IE8/9 that throws an error
whenever <code>document.activeElement</code> is accessed on an iframe
So, we allow :focus to pass through QSA all the time to avoid the IE error
See <a href="http://bugs.jquery.com/ticket/13378">http://bugs.jquery.com/ticket/13378</a></p>
</div>
<div class="content"><div class='highlight'><pre> rbuggyQSA = [];
<span class="hljs-keyword">if</span> ((support.qsa = rnative.test(doc.querySelectorAll))) {</pre></div></div>
</li>
<li id="section-183">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-183">¶</a>
</div>
<p>Build QSA regex
Regex strategy adopted from Diego Perini</p>
</div>
<div class="content"><div class='highlight'><pre> assert(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(div)</span> </span>{</pre></div></div>
</li>
<li id="section-184">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-184">¶</a>
</div>
<p>Select is set to empty string on purpose
This is to test IE’s treatment of not explicitly
setting a boolean content attribute,
since its presence should be enough
<a href="http://bugs.jquery.com/ticket/12359">http://bugs.jquery.com/ticket/12359</a></p>
</div>
<div class="content"><div class='highlight'><pre> div.innerHTML = <span class="hljs-string">"<select><option selected=''></option></select>"</span>;</pre></div></div>
</li>
<li id="section-185">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-185">¶</a>
</div>
<p>Support: IE8
Boolean attributes and “value” are not treated correctly</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!div.querySelectorAll(<span class="hljs-string">"[selected]"</span>).length) {
rbuggyQSA.push(<span class="hljs-string">"\\["</span> + whitespace + <span class="hljs-string">"*(?:value|"</span> + booleans + <span class="hljs-string">")"</span>);
}</pre></div></div>
</li>
<li id="section-186">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-186">¶</a>
</div>
<p>Webkit/Opera - :checked should return selected option elements
<a href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#checked">http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#checked</a>
IE8 throws error here and will not see later tests</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!div.querySelectorAll(<span class="hljs-string">":checked"</span>).length) {
rbuggyQSA.push(<span class="hljs-string">":checked"</span>);
}
});
assert(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(div)</span> </span>{</pre></div></div>
</li>
<li id="section-187">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-187">¶</a>
</div>
<p>Support: Opera 10-12/IE8
^= $= *= and empty values
Should not select anything
Support: Windows 8 Native Apps
The type attribute is restricted during .innerHTML assignment</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> input = doc.createElement(<span class="hljs-string">"input"</span>);
input.setAttribute(<span class="hljs-string">"type"</span>, <span class="hljs-string">"hidden"</span>);
div.appendChild(input).setAttribute(<span class="hljs-string">"t"</span>, <span class="hljs-string">""</span>);
<span class="hljs-keyword">if</span> (div.querySelectorAll(<span class="hljs-string">"[t^='']"</span>).length) {
rbuggyQSA.push(<span class="hljs-string">"[*^$]="</span> + whitespace + <span class="hljs-string">"*(?:''|\"\")"</span>);
}</pre></div></div>
</li>
<li id="section-188">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-188">¶</a>
</div>
<p>FF 3.5 - :enabled/:disabled and hidden elements (hidden elements are still enabled)
IE8 throws error here and will not see later tests</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!div.querySelectorAll(<span class="hljs-string">":enabled"</span>).length) {
rbuggyQSA.push(<span class="hljs-string">":enabled"</span>, <span class="hljs-string">":disabled"</span>);
}</pre></div></div>
</li>
<li id="section-189">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-189">¶</a>
</div>
<p>Opera 10-11 does not throw on post-comma invalid pseudos</p>
</div>
<div class="content"><div class='highlight'><pre> div.querySelectorAll(<span class="hljs-string">"*,:x"</span>);
rbuggyQSA.push(<span class="hljs-string">",.*:"</span>);
});
}
<span class="hljs-keyword">if</span> ((support.matchesSelector = rnative.test((matches = docElem.webkitMatchesSelector ||
docElem.mozMatchesSelector ||
docElem.oMatchesSelector ||
docElem.msMatchesSelector)))) {
assert(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(div)</span> </span>{</pre></div></div>
</li>
<li id="section-190">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-190">¶</a>
</div>
<p>Check to see if it’s possible to do matchesSelector
on a disconnected node (IE 9)</p>
</div>
<div class="content"><div class='highlight'><pre> support.disconnectedMatch = matches.call(div, <span class="hljs-string">"div"</span>);</pre></div></div>
</li>
<li id="section-191">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-191">¶</a>
</div>
<p>This should fail with an exception
Gecko does not error, returns false instead</p>
</div>
<div class="content"><div class='highlight'><pre> matches.call(div, <span class="hljs-string">"[s!='']:x"</span>);
rbuggyMatches.push(<span class="hljs-string">"!="</span>, pseudos);
});
}
rbuggyQSA = rbuggyQSA.length && <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(rbuggyQSA.join(<span class="hljs-string">"|"</span>));
rbuggyMatches = rbuggyMatches.length && <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(rbuggyMatches.join(<span class="hljs-string">"|"</span>));
<span class="hljs-comment">/* Contains
---------------------------------------------------------------------- */</span></pre></div></div>
</li>
<li id="section-192">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-192">¶</a>
</div>
<p>Element contains another
Purposefully does not implement inclusive descendent
As in, an element does not contain itself</p>
</div>
<div class="content"><div class='highlight'><pre> contains = rnative.test(docElem.contains) || docElem.compareDocumentPosition ?
<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(a, b)</span> </span>{
<span class="hljs-keyword">var</span> adown = a.nodeType === <span class="hljs-number">9</span> ? a.documentElement : a,
bup = b && b.parentNode;
<span class="hljs-keyword">return</span> a === bup || !!(bup && bup.nodeType === <span class="hljs-number">1</span> && (
adown.contains ?
adown.contains(bup) :
a.compareDocumentPosition && a.compareDocumentPosition(bup) & <span class="hljs-number">16</span>
));
} :
<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(a, b)</span> </span>{
<span class="hljs-keyword">if</span> (b) {
<span class="hljs-keyword">while</span> ((b = b.parentNode)) {
<span class="hljs-keyword">if</span> (b === a) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
}
}
}
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
};
<span class="hljs-comment">/* Sorting
---------------------------------------------------------------------- */</span></pre></div></div>
</li>
<li id="section-193">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-193">¶</a>
</div>
<p>Document order sorting</p>
</div>
<div class="content"><div class='highlight'><pre> sortOrder = docElem.compareDocumentPosition ?
<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(a, b)</span> </span>{</pre></div></div>
</li>
<li id="section-194">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-194">¶</a>
</div>
<p>Flag for duplicate removal</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (a === b) {
hasDuplicate = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
}
<span class="hljs-keyword">var</span> compare = b.compareDocumentPosition && a.compareDocumentPosition && a.compareDocumentPosition(b);
<span class="hljs-keyword">if</span> (compare) {</pre></div></div>
</li>
<li id="section-195">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-195">¶</a>
</div>
<p>Disconnected nodes</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (compare & <span class="hljs-number">1</span> ||
(!support.sortDetached && b.compareDocumentPosition(a) === compare)) {</pre></div></div>
</li>
<li id="section-196">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-196">¶</a>
</div>
<p>Choose the first element that is related to our preferred document</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (a === doc || contains(preferredDoc, a)) {
<span class="hljs-keyword">return</span> -<span class="hljs-number">1</span>;
}
<span class="hljs-keyword">if</span> (b === doc || contains(preferredDoc, b)) {
<span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;
}</pre></div></div>
</li>
<li id="section-197">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-197">¶</a>
</div>
<p>Maintain original order</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> sortInput ?
(indexOf.call(sortInput, a) - indexOf.call(sortInput, b)) :
<span class="hljs-number">0</span>;
}
<span class="hljs-keyword">return</span> compare & <span class="hljs-number">4</span> ? -<span class="hljs-number">1</span> : <span class="hljs-number">1</span>;
}</pre></div></div>
</li>
<li id="section-198">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-198">¶</a>
</div>
<p>Not directly comparable, sort on existence of method</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> a.compareDocumentPosition ? -<span class="hljs-number">1</span> : <span class="hljs-number">1</span>;
} :
<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(a, b)</span> </span>{
<span class="hljs-keyword">var</span> cur,
i = <span class="hljs-number">0</span>,
aup = a.parentNode,
bup = b.parentNode,
ap = [a],
bp = [b];</pre></div></div>
</li>
<li id="section-199">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-199">¶</a>
</div>
<p>Exit early if the nodes are identical</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (a === b) {
hasDuplicate = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;</pre></div></div>
</li>
<li id="section-200">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-200">¶</a>
</div>
<p>Parentless nodes are either documents or disconnected</p>
</div>
<div class="content"><div class='highlight'><pre> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (!aup || !bup) {
<span class="hljs-keyword">return</span> a === doc ? -<span class="hljs-number">1</span> :
b === doc ? <span class="hljs-number">1</span> :
aup ? -<span class="hljs-number">1</span> :
bup ? <span class="hljs-number">1</span> :
sortInput ?
(indexOf.call(sortInput, a) - indexOf.call(sortInput, b)) :
<span class="hljs-number">0</span>;</pre></div></div>
</li>
<li id="section-201">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-201">¶</a>
</div>
<p>If the nodes are siblings, we can do a quick check</p>
</div>
<div class="content"><div class='highlight'><pre> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (aup === bup) {
<span class="hljs-keyword">return</span> siblingCheck(a, b);
}</pre></div></div>
</li>
<li id="section-202">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-202">¶</a>
</div>
<p>Otherwise we need full lists of their ancestors for comparison</p>
</div>
<div class="content"><div class='highlight'><pre> cur = a;
<span class="hljs-keyword">while</span> ((cur = cur.parentNode)) {
ap.unshift(cur);
}
cur = b;
<span class="hljs-keyword">while</span> ((cur = cur.parentNode)) {
bp.unshift(cur);
}</pre></div></div>
</li>
<li id="section-203">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-203">¶</a>
</div>
<p>Walk down the tree looking for a discrepancy</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">while</span> (ap[i] === bp[i]) {
i++;
}
<span class="hljs-keyword">return</span> i ?</pre></div></div>
</li>
<li id="section-204">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-204">¶</a>
</div>
<p>Do a sibling check if the nodes have a common ancestor</p>
</div>
<div class="content"><div class='highlight'><pre> siblingCheck(ap[i], bp[i]) :</pre></div></div>
</li>
<li id="section-205">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-205">¶</a>
</div>
<p>Otherwise nodes in our document sort first</p>
</div>
<div class="content"><div class='highlight'><pre> ap[i] === preferredDoc ? -<span class="hljs-number">1</span> :
bp[i] === preferredDoc ? <span class="hljs-number">1</span> :
<span class="hljs-number">0</span>;
};
<span class="hljs-keyword">return</span> doc;
};</pre></div></div>
</li>
<li id="section-206">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-206">¶</a>
</div>
<p>Sizzle.matches = function(expr, elements) {
return Sizzle(expr, null, null, elements);
};</p>
</div>
<div class="content"><div class='highlight'><pre>
Sizzle.matchesSelector = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem, expr)</span> </span>{</pre></div></div>
</li>
<li id="section-207">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-207">¶</a>
</div>
<p>Set document vars if needed</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> ((elem.ownerDocument || elem) !== <span class="hljs-built_in">document</span>) {
setDocument(elem);
}</pre></div></div>
</li>
<li id="section-208">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-208">¶</a>
</div>
<p>Make sure that attribute selectors are quoted</p>
</div>
<div class="content"><div class='highlight'><pre> expr = expr.replace(rattributeQuotes, <span class="hljs-string">"='$1']"</span>);
<span class="hljs-keyword">if</span> (support.matchesSelector && documentIsHTML &&
(!rbuggyMatches || !rbuggyMatches.test(expr)) &&
(!rbuggyQSA || !rbuggyQSA.test(expr))) {
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">var</span> ret = matches.call(elem, expr);</pre></div></div>
</li>
<li id="section-209">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-209">¶</a>
</div>
<p>IE 9’s matchesSelector returns false on disconnected nodes</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (ret || support.disconnectedMatch ||</pre></div></div>
</li>
<li id="section-210">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-210">¶</a>
</div>
<p>As well, disconnected nodes are said to be in a document
fragment in IE 9</p>
</div>
<div class="content"><div class='highlight'><pre> elem.document && elem.document.nodeType !== <span class="hljs-number">11</span>) {
<span class="hljs-keyword">return</span> ret;
}
} <span class="hljs-keyword">catch</span>(e) {}
}
<span class="hljs-keyword">return</span> Sizzle(expr, <span class="hljs-built_in">document</span>, <span class="hljs-literal">null</span>, [elem]).length > <span class="hljs-number">0</span>;
};
Sizzle.contains = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(context, elem)</span> </span>{</pre></div></div>
</li>
<li id="section-211">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-211">¶</a>
</div>
<p>Set document vars if needed</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> ((context.ownerDocument || context) !== <span class="hljs-built_in">document</span>) {
setDocument(context);
}
<span class="hljs-keyword">return</span> contains(context, elem);
};
Sizzle.attr = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem, name)</span> </span>{</pre></div></div>
</li>
<li id="section-212">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-212">¶</a>
</div>
<p>Set document vars if needed</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> ((elem.ownerDocument || elem) !== <span class="hljs-built_in">document</span>) {
setDocument(elem);
}
<span class="hljs-keyword">var</span> fn = Expr.attrHandle[name.toLowerCase()],</pre></div></div>
</li>
<li id="section-213">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-213">¶</a>
</div>
<p>Don’t get fooled by Object.prototype properties (jQuery #13807)</p>
</div>
<div class="content"><div class='highlight'><pre> val = fn && hasOwn.call(Expr.attrHandle, name.toLowerCase()) ?
fn(elem, name, !documentIsHTML) :
<span class="hljs-literal">undefined</span>;
<span class="hljs-keyword">return</span> val === <span class="hljs-literal">undefined</span> ?
support.attributes || !documentIsHTML ?
elem.getAttribute(name) :
(val = elem.getAttributeNode(name)) && val.specified ?
val.value :
<span class="hljs-literal">null</span> :
val;
};
Sizzle.error = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(msg)</span> </span>{
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">"Syntax error, unrecognized expression: "</span> + msg);
};
<span class="hljs-comment">/**
* Document sorting and removing duplicates
* @param {ArrayLike} results
*/</span>
Sizzle.uniqueSort = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(results)</span> </span>{
<span class="hljs-keyword">var</span> elem,
duplicates = [],
j = <span class="hljs-number">0</span>,
i = <span class="hljs-number">0</span>;</pre></div></div>
</li>
<li id="section-214">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-214">¶</a>
</div>
<p>Unless we <em>know</em> we can detect duplicates, assume their presence</p>
</div>
<div class="content"><div class='highlight'><pre> hasDuplicate = !support.detectDuplicates;
sortInput = !support.sortStable && results.slice(<span class="hljs-number">0</span>);
results.sort(sortOrder);
<span class="hljs-keyword">if</span> (hasDuplicate) {
<span class="hljs-keyword">while</span> ((elem = results[i++])) {
<span class="hljs-keyword">if</span> (elem === results[i]) {
j = duplicates.push(i);
}
}
<span class="hljs-keyword">while</span> (j--) {
results.splice(duplicates[j], <span class="hljs-number">1</span>);
}
}
<span class="hljs-keyword">return</span> results;
};
<span class="hljs-comment">/**
* Utility function for retrieving the text value of an array of DOM nodes
* @param {Array|Element} elem
*/</span>
getText = Sizzle.getText = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">var</span> node,
ret = <span class="hljs-string">""</span>,
i = <span class="hljs-number">0</span>,
nodeType = elem.nodeType;
<span class="hljs-keyword">if</span> (!nodeType) {</pre></div></div>
</li>
<li id="section-215">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-215">¶</a>
</div>
<p>If no nodeType, this is expected to be an array</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">for</span> (; (node = elem[i]); i++) {</pre></div></div>
</li>
<li id="section-216">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-216">¶</a>
</div>
<p>Do not traverse comment nodes</p>
</div>
<div class="content"><div class='highlight'><pre> ret += getText(node);
}
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (nodeType === <span class="hljs-number">1</span> || nodeType === <span class="hljs-number">9</span> || nodeType === <span class="hljs-number">11</span>) {</pre></div></div>
</li>
<li id="section-217">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-217">¶</a>
</div>
<p>Use textContent for elements
innerText usage removed for consistency of new lines (see #11153)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> elem.textContent === <span class="hljs-string">"string"</span>) {
<span class="hljs-keyword">return</span> elem.textContent;
} <span class="hljs-keyword">else</span> {</pre></div></div>
</li>
<li id="section-218">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-218">¶</a>
</div>
<p>Traverse its children</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">for</span> (elem = elem.firstChild; elem; elem = elem.nextSibling) {
ret += getText(elem);
}
}
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (nodeType === <span class="hljs-number">3</span> || nodeType === <span class="hljs-number">4</span>) {
<span class="hljs-keyword">return</span> elem.nodeValue;
}</pre></div></div>
</li>
<li id="section-219">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-219">¶</a>
</div>
<p>Do not include comment or processing instruction nodes</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">return</span> ret;
};
Expr = Sizzle.selectors = {</pre></div></div>
</li>
<li id="section-220">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-220">¶</a>
</div>
<p>Can be adjusted by the user</p>
</div>
<div class="content"><div class='highlight'><pre> cacheLength: <span class="hljs-number">50</span>,
createPseudo: markFunction,
match: matchExpr,
attrHandle: {},
find: {},
relative: {
<span class="hljs-string">">"</span>: { dir: <span class="hljs-string">"parentNode"</span>, first: <span class="hljs-literal">true</span> },
<span class="hljs-string">" "</span>: { dir: <span class="hljs-string">"parentNode"</span> },
<span class="hljs-string">"+"</span>: { dir: <span class="hljs-string">"previousSibling"</span>, first: <span class="hljs-literal">true</span> },
<span class="hljs-string">"~"</span>: { dir: <span class="hljs-string">"previousSibling"</span> }
},
preFilter: {
<span class="hljs-string">"ATTR"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(match)</span> </span>{
match[<span class="hljs-number">1</span>] = match[<span class="hljs-number">1</span>].replace(runescape, funescape);</pre></div></div>
</li>
<li id="section-221">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-221">¶</a>
</div>
<p>Move the given value to match[3] whether quoted or unquoted</p>
</div>
<div class="content"><div class='highlight'><pre> match[<span class="hljs-number">3</span>] = (match[<span class="hljs-number">4</span>] || match[<span class="hljs-number">5</span>] || <span class="hljs-string">""</span>).replace(runescape, funescape);
<span class="hljs-keyword">if</span> (match[<span class="hljs-number">2</span>] === <span class="hljs-string">"~="</span>) {
match[<span class="hljs-number">3</span>] = <span class="hljs-string">" "</span> + match[<span class="hljs-number">3</span>] + <span class="hljs-string">" "</span>;
}
<span class="hljs-keyword">return</span> match.slice(<span class="hljs-number">0</span>, <span class="hljs-number">4</span>);
},
<span class="hljs-string">"CHILD"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(match)</span> </span>{
<span class="hljs-comment">/* matches from matchExpr["CHILD"]
1 type (only|nth|...)
2 what (child|of-type)
3 argument (even|odd|\d*|\d*n([+-]\d+)?|...)
4 xn-component of xn+y argument ([+-]?\d*n|)
5 sign of xn-component
6 x of xn-component
7 sign of y-component
8 y of y-component
*/</span>
match[<span class="hljs-number">1</span>] = match[<span class="hljs-number">1</span>].toLowerCase();
<span class="hljs-keyword">if</span> (match[<span class="hljs-number">1</span>].slice(<span class="hljs-number">0</span>, <span class="hljs-number">3</span>) === <span class="hljs-string">"nth"</span>) {</pre></div></div>
</li>
<li id="section-222">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-222">¶</a>
</div>
<p>nth-* requires argument</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!match[<span class="hljs-number">3</span>]) {
Sizzle.error(match[<span class="hljs-number">0</span>]);
}</pre></div></div>
</li>
<li id="section-223">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-223">¶</a>
</div>
<p>numeric x and y parameters for Expr.filter.CHILD
remember that false/true cast respectively to 0/1</p>
</div>
<div class="content"><div class='highlight'><pre> match[<span class="hljs-number">4</span>] = +(match[<span class="hljs-number">4</span>] ? match[<span class="hljs-number">5</span>] + (match[<span class="hljs-number">6</span>] || <span class="hljs-number">1</span>) : <span class="hljs-number">2</span> * (match[<span class="hljs-number">3</span>] === <span class="hljs-string">"even"</span> || match[<span class="hljs-number">3</span>] === <span class="hljs-string">"odd"</span>));
match[<span class="hljs-number">5</span>] = +((match[<span class="hljs-number">7</span>] + match[<span class="hljs-number">8</span>]) || match[<span class="hljs-number">3</span>] === <span class="hljs-string">"odd"</span>);</pre></div></div>
</li>
<li id="section-224">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-224">¶</a>
</div>
<p>other types prohibit arguments</p>
</div>
<div class="content"><div class='highlight'><pre> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (match[<span class="hljs-number">3</span>]) {
Sizzle.error(match[<span class="hljs-number">0</span>]);
}
<span class="hljs-keyword">return</span> match;
},
<span class="hljs-string">"PSEUDO"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(match)</span> </span>{
<span class="hljs-keyword">var</span> excess,
unquoted = !match[<span class="hljs-number">5</span>] && match[<span class="hljs-number">2</span>];
<span class="hljs-keyword">if</span> (matchExpr[<span class="hljs-string">"CHILD"</span>].test(match[<span class="hljs-number">0</span>])) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;
}</pre></div></div>
</li>
<li id="section-225">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-225">¶</a>
</div>
<p>Accept quoted arguments as-is</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (match[<span class="hljs-number">3</span>] && match[<span class="hljs-number">4</span>] !== <span class="hljs-literal">undefined</span>) {
match[<span class="hljs-number">2</span>] = match[<span class="hljs-number">4</span>];</pre></div></div>
</li>
<li id="section-226">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-226">¶</a>
</div>
<p>Strip excess characters from unquoted arguments</p>
</div>
<div class="content"><div class='highlight'><pre> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (unquoted && rpseudo.test(unquoted) &&</pre></div></div>
</li>
<li id="section-227">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-227">¶</a>
</div>
<p>Get excess from tokenize (recursively)</p>
</div>
<div class="content"><div class='highlight'><pre> (excess = tokenize(unquoted, <span class="hljs-literal">true</span>)) &&</pre></div></div>
</li>
<li id="section-228">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-228">¶</a>
</div>
<p>advance to the next closing parenthesis</p>
</div>
<div class="content"><div class='highlight'><pre> (excess = unquoted.indexOf(<span class="hljs-string">")"</span>, unquoted.length - excess) - unquoted.length)) {</pre></div></div>
</li>
<li id="section-229">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-229">¶</a>
</div>
<p>excess is a negative index</p>
</div>
<div class="content"><div class='highlight'><pre> match[<span class="hljs-number">0</span>] = match[<span class="hljs-number">0</span>].slice(<span class="hljs-number">0</span>, excess);
match[<span class="hljs-number">2</span>] = unquoted.slice(<span class="hljs-number">0</span>, excess);
}</pre></div></div>
</li>
<li id="section-230">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-230">¶</a>
</div>
<p>Return only captures needed by the pseudo filter method (type and argument)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> match.slice(<span class="hljs-number">0</span>, <span class="hljs-number">3</span>);
}
},
filter: {
<span class="hljs-string">"TAG"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(nodeNameSelector)</span> </span>{
<span class="hljs-keyword">var</span> nodeName = nodeNameSelector.replace(runescape, funescape).toLowerCase();
<span class="hljs-keyword">return</span> nodeNameSelector === <span class="hljs-string">"*"</span> ?
<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-literal">true</span>; } :
<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">return</span> elem.nodeName && elem.nodeName.toLowerCase() === nodeName;
};
},
<span class="hljs-string">"CLASS"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(className)</span> </span>{
<span class="hljs-keyword">var</span> pattern = classCache[className + <span class="hljs-string">" "</span>];
<span class="hljs-keyword">return</span> pattern ||
(pattern = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">"(^|"</span> + whitespace + <span class="hljs-string">")"</span> + className + <span class="hljs-string">"("</span> + whitespace + <span class="hljs-string">"|$)"</span>)) &&
classCache(className, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">return</span> pattern.test(<span class="hljs-keyword">typeof</span> elem.className === <span class="hljs-string">"string"</span> && elem.className || <span class="hljs-keyword">typeof</span> elem.getAttribute !== strundefined && elem.getAttribute(<span class="hljs-string">"class"</span>) || <span class="hljs-string">""</span>);
});
},
<span class="hljs-string">"ATTR"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(name, operator, check)</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">var</span> result = Sizzle.attr(elem, name);
<span class="hljs-keyword">if</span> (result == <span class="hljs-literal">null</span>) {
<span class="hljs-keyword">return</span> operator === <span class="hljs-string">"!="</span>;
}
<span class="hljs-keyword">if</span> (!operator) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
}
result += <span class="hljs-string">""</span>;
<span class="hljs-keyword">return</span> operator === <span class="hljs-string">"="</span> ? result === check :
operator === <span class="hljs-string">"!="</span> ? result !== check :
operator === <span class="hljs-string">"^="</span> ? check && result.indexOf(check) === <span class="hljs-number">0</span> :
operator === <span class="hljs-string">"*="</span> ? check && result.indexOf(check) > -<span class="hljs-number">1</span> :
operator === <span class="hljs-string">"$="</span> ? check && result.slice(-check.length) === check :
operator === <span class="hljs-string">"~="</span> ? (<span class="hljs-string">" "</span> + result + <span class="hljs-string">" "</span>).indexOf(check) > -<span class="hljs-number">1</span> :
operator === <span class="hljs-string">"|="</span> ? result === check || result.slice(<span class="hljs-number">0</span>, check.length + <span class="hljs-number">1</span>) === check + <span class="hljs-string">"-"</span> :
<span class="hljs-literal">false</span>;
};
},
<span class="hljs-string">"CHILD"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(type, what, argument, first, last)</span> </span>{
<span class="hljs-keyword">var</span> simple = type.slice(<span class="hljs-number">0</span>, <span class="hljs-number">3</span>) !== <span class="hljs-string">"nth"</span>,
forward = type.slice(-<span class="hljs-number">4</span>) !== <span class="hljs-string">"last"</span>,
ofType = what === <span class="hljs-string">"of-type"</span>;
<span class="hljs-keyword">return</span> first === <span class="hljs-number">1</span> && last === <span class="hljs-number">0</span> ?</pre></div></div>
</li>
<li id="section-231">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-231">¶</a>
</div>
<p>Shortcut for :nth-*(n)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">return</span> !!elem.parentNode;
} :
<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem, context, xml)</span> </span>{
<span class="hljs-keyword">var</span> cache, outerCache, node, diff, nodeIndex, start,
dir = simple !== forward ? <span class="hljs-string">"nextSibling"</span> : <span class="hljs-string">"previousSibling"</span>,
parent = elem.parentNode,
name = ofType && elem.nodeName.toLowerCase(),
useCache = !xml && !ofType;
<span class="hljs-keyword">if</span> (parent) {</pre></div></div>
</li>
<li id="section-232">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-232">¶</a>
</div>
<p>:(first|last|only)-(child|of-type)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (simple) {
<span class="hljs-keyword">while</span> (dir) {
node = elem;
<span class="hljs-keyword">while</span> ((node = node[dir])) {
<span class="hljs-keyword">if</span> (ofType ? node.nodeName.toLowerCase() === name : node.nodeType === <span class="hljs-number">1</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
}
}</pre></div></div>
</li>
<li id="section-233">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-233">¶</a>
</div>
<p>Reverse direction for :only-* (if we haven’t yet done so)</p>
</div>
<div class="content"><div class='highlight'><pre> start = dir = type === <span class="hljs-string">"only"</span> && !start && <span class="hljs-string">"nextSibling"</span>;
}
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
}
start = [forward ? parent.firstChild : parent.lastChild];</pre></div></div>
</li>
<li id="section-234">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-234">¶</a>
</div>
<p>non-xml :nth-child(…) stores cache data on <code>parent</code></p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (forward && useCache) {</pre></div></div>
</li>
<li id="section-235">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-235">¶</a>
</div>
<p>Seek <code>elem</code> from a previously-cached index</p>
</div>
<div class="content"><div class='highlight'><pre> outerCache = parent[expando] || (parent[expando] = {});
cache = outerCache[type] || [];
nodeIndex = cache[<span class="hljs-number">0</span>] === dirruns && cache[<span class="hljs-number">1</span>];
diff = cache[<span class="hljs-number">0</span>] === dirruns && cache[<span class="hljs-number">2</span>];
node = nodeIndex && parent.childNodes[nodeIndex];
<span class="hljs-keyword">while</span> ((node = ++nodeIndex && node && node[dir] ||</pre></div></div>
</li>
<li id="section-236">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-236">¶</a>
</div>
<p>Fallback to seeking <code>elem</code> from the start</p>
</div>
<div class="content"><div class='highlight'><pre> (diff = nodeIndex = <span class="hljs-number">0</span>) || start.pop())) {</pre></div></div>
</li>
<li id="section-237">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-237">¶</a>
</div>
<p>When found, cache indexes on <code>parent</code> and break</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (node.nodeType === <span class="hljs-number">1</span> && ++diff && node === elem) {
outerCache[type] = [dirruns, nodeIndex, diff];
<span class="hljs-keyword">break</span>;
}
}</pre></div></div>
</li>
<li id="section-238">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-238">¶</a>
</div>
<p>Use previously-cached element index if available</p>
</div>
<div class="content"><div class='highlight'><pre> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (useCache && (cache = (elem[expando] || (elem[expando] = {}))[type]) && cache[<span class="hljs-number">0</span>] === dirruns) {
diff = cache[<span class="hljs-number">1</span>];</pre></div></div>
</li>
<li id="section-239">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-239">¶</a>
</div>
<p>xml :nth-child(…) or :nth-last-child(…) or :nth(-last)?-of-type(…)</p>
</div>
<div class="content"><div class='highlight'><pre> } <span class="hljs-keyword">else</span> {</pre></div></div>
</li>
<li id="section-240">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-240">¶</a>
</div>
<p>Use the same loop as above to seek <code>elem</code> from the start</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">while</span> ((node = ++nodeIndex && node && node[dir] ||
(diff = nodeIndex = <span class="hljs-number">0</span>) || start.pop())) {
<span class="hljs-keyword">if</span> ((ofType ? node.nodeName.toLowerCase() === name : node.nodeType === <span class="hljs-number">1</span>) && ++diff) {</pre></div></div>
</li>
<li id="section-241">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-241">¶</a>
</div>
<p>Cache the index of each encountered element</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (useCache) {
(node[expando] || (node[expando] = {}))[type] = [dirruns, diff];
}
<span class="hljs-keyword">if</span> (node === elem) {
<span class="hljs-keyword">break</span>;
}
}
}
}</pre></div></div>
</li>
<li id="section-242">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-242">¶</a>
</div>
<p>Incorporate the offset, then check against cycle size</p>
</div>
<div class="content"><div class='highlight'><pre> diff -= last;
<span class="hljs-keyword">return</span> diff === first || (diff % first === <span class="hljs-number">0</span> && diff / first >= <span class="hljs-number">0</span>);
}
};
},
<span class="hljs-string">"PSEUDO"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(pseudo, argument)</span> </span>{</pre></div></div>
</li>
<li id="section-243">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-243">¶</a>
</div>
<p>pseudo-class names are case-insensitive
<a href="http://www.w3.org/TR/selectors/#pseudo-classes">http://www.w3.org/TR/selectors/#pseudo-classes</a>
Prioritize by case sensitivity in case custom pseudos are added with uppercase letters
Remember that SetFilters inherits from pseudos</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> args,
fn = Expr.pseudos[pseudo] || Expr.SetFilters[pseudo.toLowerCase()] ||
Sizzle.error(<span class="hljs-string">"unsupported pseudo: "</span> + pseudo);</pre></div></div>
</li>
<li id="section-244">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-244">¶</a>
</div>
<p>The user may use createPseudo to indicate that
arguments are needed to create the filter function
just as Sizzle does</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (fn[expando]) {
<span class="hljs-keyword">return</span> fn(argument);
}</pre></div></div>
</li>
<li id="section-245">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-245">¶</a>
</div>
<p>But maintain support for old signatures</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (fn.length > <span class="hljs-number">1</span>) {
args = [pseudo, pseudo, <span class="hljs-string">""</span>, argument];
<span class="hljs-keyword">return</span> Expr.SetFilters.hasOwnProperty(pseudo.toLowerCase()) ?
markFunction(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(seed, matches)</span> </span>{
<span class="hljs-keyword">var</span> idx,
matched = fn(seed, argument),
i = matched.length;
<span class="hljs-keyword">while</span> (i--) {
idx = indexOf.call(seed, matched[i]);
seed[idx] = !(matches[idx] = matched[i]);
}
}) :
<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">return</span> fn(elem, <span class="hljs-number">0</span>, args);
};
}
<span class="hljs-keyword">return</span> fn;
}
},
pseudos: {</pre></div></div>
</li>
<li id="section-246">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-246">¶</a>
</div>
<p>Potentially complex pseudos</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-string">"not"</span>: markFunction(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(selector)</span> </span>{</pre></div></div>
</li>
<li id="section-247">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-247">¶</a>
</div>
<p>Trim the selector passed to compile
to avoid treating leading and trailing
spaces as combinators</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> input = [],
results = [],
matcher = compile(selector.replace(rtrim, <span class="hljs-string">"$1"</span>));
<span class="hljs-keyword">return</span> matcher[expando] ?
markFunction(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(seed, matches, context, xml)</span> </span>{
<span class="hljs-keyword">var</span> elem,
unmatched = matcher(seed, <span class="hljs-literal">null</span>, xml, []),
i = seed.length;</pre></div></div>
</li>
<li id="section-248">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-248">¶</a>
</div>
<p>Match elements unmatched by <code>matcher</code></p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">while</span> (i--) {
<span class="hljs-keyword">if</span> ((elem = unmatched[i])) {
seed[i] = !(matches[i] = elem);
}
}
}) :
<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem, context, xml)</span> </span>{
input[<span class="hljs-number">0</span>] = elem;
matcher(input, <span class="hljs-literal">null</span>, xml, results);
<span class="hljs-keyword">return</span> !results.pop();
};
}),
<span class="hljs-string">"has"</span>: markFunction(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(selector)</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">return</span> Sizzle(selector, elem).length > <span class="hljs-number">0</span>;
};
}),
<span class="hljs-string">"contains"</span>: markFunction(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(text)</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">return</span> (elem.textContent || elem.innerText || getText(elem)).indexOf(text) > -<span class="hljs-number">1</span>;
};
}),</pre></div></div>
</li>
<li id="section-249">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-249">¶</a>
</div>
<p>“Whether an element is represented by a :lang() selector
is based solely on the element’s language value
being equal to the identifier C,
or beginning with the identifier C immediately followed by “-“.
The matching of C against the element’s language value is performed case-insensitively.
The identifier C does not have to be a valid language name.”
<a href="http://www.w3.org/TR/selectors/#lang-pseudo">http://www.w3.org/TR/selectors/#lang-pseudo</a></p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-string">"lang"</span>: markFunction(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(lang)</span> </span>{</pre></div></div>
</li>
<li id="section-250">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-250">¶</a>
</div>
<p>lang value must be a valid identifier</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!ridentifier.test(lang || <span class="hljs-string">""</span>)) {
Sizzle.error(<span class="hljs-string">"unsupported lang: "</span> + lang);
}
lang = lang.replace(runescape, funescape).toLowerCase();
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">var</span> elemLang;
<span class="hljs-keyword">do</span> {
<span class="hljs-keyword">if</span> ((elemLang = documentIsHTML ?
elem.lang :
elem.getAttribute(<span class="hljs-string">"xml:lang"</span>) || elem.getAttribute(<span class="hljs-string">"lang"</span>))) {
elemLang = elemLang.toLowerCase();
<span class="hljs-keyword">return</span> elemLang === lang || elemLang.indexOf(lang + <span class="hljs-string">"-"</span>) === <span class="hljs-number">0</span>;
}
} <span class="hljs-keyword">while</span> ((elem = elem.parentNode) && elem.nodeType === <span class="hljs-number">1</span>);
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
};
}),</pre></div></div>
</li>
<li id="section-251">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-251">¶</a>
</div>
<p>Miscellaneous</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-string">"target"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">var</span> hash = win.location && win.location.hash;
<span class="hljs-keyword">return</span> hash && hash.slice(<span class="hljs-number">1</span>) === elem.id;
},
<span class="hljs-string">"root"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">return</span> elem === docElem;
},
<span class="hljs-string">"focus"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">return</span> elem === <span class="hljs-built_in">document</span>.activeElement && (!<span class="hljs-built_in">document</span>.hasFocus || <span class="hljs-built_in">document</span>.hasFocus()) && !!(elem.type || elem.href || ~elem.tabIndex);
},</pre></div></div>
</li>
<li id="section-252">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-252">¶</a>
</div>
<p>Boolean properties</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-string">"enabled"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">return</span> elem.disabled === <span class="hljs-literal">false</span>;
},
<span class="hljs-string">"disabled"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">return</span> elem.disabled === <span class="hljs-literal">true</span>;
},
<span class="hljs-string">"checked"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{</pre></div></div>
</li>
<li id="section-253">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-253">¶</a>
</div>
<p>In CSS3, :checked should return both checked and selected elements
<a href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#checked">http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#checked</a></p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> nodeName = elem.nodeName.toLowerCase();
<span class="hljs-keyword">return</span> (nodeName === <span class="hljs-string">"input"</span> && !!elem.checked) || (nodeName === <span class="hljs-string">"option"</span> && !!elem.selected);
},
<span class="hljs-string">"selected"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{</pre></div></div>
</li>
<li id="section-254">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-254">¶</a>
</div>
<p>Accessing this property makes selected-by-default
options in Safari work properly</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (elem.parentNode) {
elem.parentNode.selectedIndex;
}
<span class="hljs-keyword">return</span> elem.selected === <span class="hljs-literal">true</span>;
},</pre></div></div>
</li>
<li id="section-255">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-255">¶</a>
</div>
<p>Contents</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-string">"empty"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{</pre></div></div>
</li>
<li id="section-256">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-256">¶</a>
</div>
<p><a href="http://www.w3.org/TR/selectors/#empty-pseudo">http://www.w3.org/TR/selectors/#empty-pseudo</a>
:empty is only affected by element nodes and content nodes(including text(3), cdata(4)),
not comment, processing instructions, or others
Thanks to Diego Perini for the nodeName shortcut
Greater than “@” means alpha characters (specifically not starting with “#” or “?”)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">for</span> (elem = elem.firstChild; elem; elem = elem.nextSibling) {
<span class="hljs-keyword">if</span> (elem.nodeName > <span class="hljs-string">"@"</span> || elem.nodeType === <span class="hljs-number">3</span> || elem.nodeType === <span class="hljs-number">4</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
}
}
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
},
<span class="hljs-string">"parent"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">return</span> !Expr.pseudos[<span class="hljs-string">"empty"</span>](elem);
},</pre></div></div>
</li>
<li id="section-257">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-257">¶</a>
</div>
<p>Element/input types</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-string">"header"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">return</span> rheader.test(elem.nodeName);
},
<span class="hljs-string">"input"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">return</span> rinputs.test(elem.nodeName);
},
<span class="hljs-string">"button"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">var</span> name = elem.nodeName.toLowerCase();
<span class="hljs-keyword">return</span> name === <span class="hljs-string">"input"</span> && elem.type === <span class="hljs-string">"button"</span> || name === <span class="hljs-string">"button"</span>;
},
<span class="hljs-string">"text"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">var</span> attr;</pre></div></div>
</li>
<li id="section-258">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-258">¶</a>
</div>
<p>IE6 and 7 will map elem.type to ‘text’ for new HTML5 types (search, etc)
use getAttribute instead to test this case</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> elem.nodeName.toLowerCase() === <span class="hljs-string">"input"</span> &&
elem.type === <span class="hljs-string">"text"</span> &&
((attr = elem.getAttribute(<span class="hljs-string">"type"</span>)) == <span class="hljs-literal">null</span> || attr.toLowerCase() === elem.type);
},</pre></div></div>
</li>
<li id="section-259">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-259">¶</a>
</div>
<p>Position-in-collection</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-string">"first"</span>: createPositionalPseudo(<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-number">0</span>];
}),
<span class="hljs-string">"last"</span>: createPositionalPseudo(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(matchIndexes, length)</span> </span>{
<span class="hljs-keyword">return</span> [length - <span class="hljs-number">1</span>];
}),
<span class="hljs-string">"eq"</span>: createPositionalPseudo(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(matchIndexes, length, argument)</span> </span>{
<span class="hljs-keyword">return</span> [argument < <span class="hljs-number">0</span> ? argument + length : argument];
}),
<span class="hljs-string">"even"</span>: createPositionalPseudo(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(matchIndexes, length)</span> </span>{
<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>;
<span class="hljs-keyword">for</span> (; i < length; i += <span class="hljs-number">2</span>) {
matchIndexes.push(i);
}
<span class="hljs-keyword">return</span> matchIndexes;
}),
<span class="hljs-string">"odd"</span>: createPositionalPseudo(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(matchIndexes, length)</span> </span>{
<span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>;
<span class="hljs-keyword">for</span> (; i < length; i += <span class="hljs-number">2</span>) {
matchIndexes.push(i);
}
<span class="hljs-keyword">return</span> matchIndexes;
}),
<span class="hljs-string">"lt"</span>: createPositionalPseudo(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(matchIndexes, length, argument)</span> </span>{
<span class="hljs-keyword">var</span> i = argument < <span class="hljs-number">0</span> ? argument + length : argument;
<span class="hljs-keyword">for</span> (; --i >= <span class="hljs-number">0</span>;) {
matchIndexes.push(i);
}
<span class="hljs-keyword">return</span> matchIndexes;
}),
<span class="hljs-string">"gt"</span>: createPositionalPseudo(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(matchIndexes, length, argument)</span> </span>{
<span class="hljs-keyword">var</span> i = argument < <span class="hljs-number">0</span> ? argument + length : argument;
<span class="hljs-keyword">for</span> (; ++i < length;) {
matchIndexes.push(i);
}
<span class="hljs-keyword">return</span> matchIndexes;
})
}
};
Expr.pseudos[<span class="hljs-string">"nth"</span>] = Expr.pseudos[<span class="hljs-string">"eq"</span>];</pre></div></div>
</li>
<li id="section-260">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-260">¶</a>
</div>
<p>Add button/input type pseudos</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">for</span> (i <span class="hljs-keyword">in</span> { radio: <span class="hljs-literal">true</span>, checkbox: <span class="hljs-literal">true</span>, file: <span class="hljs-literal">true</span>, password: <span class="hljs-literal">true</span>, image: <span class="hljs-literal">true</span> }) {
Expr.pseudos[i] = createInputPseudo(i);
}
<span class="hljs-keyword">for</span> (i <span class="hljs-keyword">in</span> { submit: <span class="hljs-literal">true</span>, reset: <span class="hljs-literal">true</span> }) {
Expr.pseudos[i] = createButtonPseudo(i);
}</pre></div></div>
</li>
<li id="section-261">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-261">¶</a>
</div>
<p>Easy API for creating new SetFilters</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">SetFilters</span><span class="hljs-params">()</span> </span>{}
SetFilters.prototype = Expr.filters = Expr.pseudos;
Expr.SetFilters = <span class="hljs-keyword">new</span> SetFilters();
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">tokenize</span><span class="hljs-params">(selector, parseOnly)</span> </span>{
<span class="hljs-keyword">var</span> matched, match, tokens, type,
soFar, groups, preFilters,
cached = tokenCache[selector + <span class="hljs-string">" "</span>];
<span class="hljs-keyword">if</span> (cached) {
<span class="hljs-keyword">return</span> parseOnly ? <span class="hljs-number">0</span> : cached.slice(<span class="hljs-number">0</span>);
}
soFar = selector;
groups = [];
preFilters = Expr.preFilter;
<span class="hljs-keyword">while</span> (soFar) {</pre></div></div>
</li>
<li id="section-262">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-262">¶</a>
</div>
<p>Comma and first run</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!matched || (match = rcomma.exec(soFar))) {
<span class="hljs-keyword">if</span> (match) {</pre></div></div>
</li>
<li id="section-263">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-263">¶</a>
</div>
<p>Don’t consume trailing commas as valid</p>
</div>
<div class="content"><div class='highlight'><pre> soFar = soFar.slice(match[<span class="hljs-number">0</span>].length) || soFar;
}
groups.push(tokens = []);
}
matched = <span class="hljs-literal">false</span>;</pre></div></div>
</li>
<li id="section-264">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-264">¶</a>
</div>
<p>Combinators</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> ((match = rcombinators.exec(soFar))) {
matched = match.shift();
tokens.push({
value: matched,</pre></div></div>
</li>
<li id="section-265">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-265">¶</a>
</div>
<p>Cast descendant combinators to space</p>
</div>
<div class="content"><div class='highlight'><pre> type: match[<span class="hljs-number">0</span>].replace(rtrim, <span class="hljs-string">" "</span>)
});
soFar = soFar.slice(matched.length);
}</pre></div></div>
</li>
<li id="section-266">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-266">¶</a>
</div>
<p>Filters</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">for</span> (type <span class="hljs-keyword">in</span> Expr.filter) {
<span class="hljs-keyword">if</span> ((match = matchExpr[type].exec(soFar)) && (!preFilters[type] ||
(match = preFilters[type](match)))) {
matched = match.shift();
tokens.push({
value: matched,
type: type,
matches: match
});
soFar = soFar.slice(matched.length);
}
}
<span class="hljs-keyword">if</span> (!matched) {
<span class="hljs-keyword">break</span>;
}
}</pre></div></div>
</li>
<li id="section-267">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-267">¶</a>
</div>
<p>Return the length of the invalid excess
if we’re just parsing
Otherwise, throw an error or return tokens</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> parseOnly ?
soFar.length :
soFar ?
Sizzle.error(selector) :</pre></div></div>
</li>
<li id="section-268">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-268">¶</a>
</div>
<p>Cache the tokens</p>
</div>
<div class="content"><div class='highlight'><pre> tokenCache(selector, groups).slice(<span class="hljs-number">0</span>);
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">toSelector</span><span class="hljs-params">(tokens)</span> </span>{
<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>,
len = tokens.length,
selector = <span class="hljs-string">""</span>;
<span class="hljs-keyword">for</span> (; i < len; i++) {
selector += tokens[i].value;
}
<span class="hljs-keyword">return</span> selector;
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addCombinator</span><span class="hljs-params">(matcher, combinator, base)</span> </span>{
<span class="hljs-keyword">var</span> dir = combinator.dir,
checkNonElements = base && dir === <span class="hljs-string">"parentNode"</span>,
doneName = done++;
<span class="hljs-keyword">return</span> combinator.first ?</pre></div></div>
</li>
<li id="section-269">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-269">¶</a>
</div>
<p>Check against closest ancestor/preceding element</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem, context, xml)</span> </span>{
<span class="hljs-keyword">while</span> ((elem = elem[dir])) {
<span class="hljs-keyword">if</span> (elem.nodeType === <span class="hljs-number">1</span> || checkNonElements) {
<span class="hljs-keyword">return</span> matcher(elem, context, xml);
}
}
} :</pre></div></div>
</li>
<li id="section-270">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-270">¶</a>
</div>
<p>Check against all ancestor/preceding elements</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem, context, xml)</span> </span>{
<span class="hljs-keyword">var</span> data, cache, outerCache,
dirkey = dirruns + <span class="hljs-string">" "</span> + doneName;</pre></div></div>
</li>
<li id="section-271">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-271">¶</a>
</div>
<p>We can’t set arbitrary data on XML nodes, so they don’t benefit from dir caching</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (xml) {
<span class="hljs-keyword">while</span> ((elem = elem[dir])) {
<span class="hljs-keyword">if</span> (elem.nodeType === <span class="hljs-number">1</span> || checkNonElements) {
<span class="hljs-keyword">if</span> (matcher(elem, context, xml)) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
}
}
}
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">while</span> ((elem = elem[dir])) {
<span class="hljs-keyword">if</span> (elem.nodeType === <span class="hljs-number">1</span> || checkNonElements) {
outerCache = elem[expando] || (elem[expando] = {});
<span class="hljs-keyword">if</span> ((cache = outerCache[dir]) && cache[<span class="hljs-number">0</span>] === dirkey) {
<span class="hljs-keyword">if</span> ((data = cache[<span class="hljs-number">1</span>]) === <span class="hljs-literal">true</span> || data === cachedruns) {
<span class="hljs-keyword">return</span> data === <span class="hljs-literal">true</span>;
}
} <span class="hljs-keyword">else</span> {
cache = outerCache[dir] = [dirkey];
cache[<span class="hljs-number">1</span>] = matcher(elem, context, xml) || cachedruns;
<span class="hljs-keyword">if</span> (cache[<span class="hljs-number">1</span>] === <span class="hljs-literal">true</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
}
}
}
}
}
};
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">elementMatcher</span><span class="hljs-params">(matchers)</span> </span>{
<span class="hljs-keyword">return</span> matchers.length > <span class="hljs-number">1</span> ?
<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem, context, xml)</span> </span>{
<span class="hljs-keyword">var</span> i = matchers.length;
<span class="hljs-keyword">while</span> (i--) {
<span class="hljs-keyword">if</span> (!matchers[i](elem, context, xml)) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
}
}
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
} :
matchers[<span class="hljs-number">0</span>];
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">condense</span><span class="hljs-params">(unmatched, map, filter, context, xml)</span> </span>{
<span class="hljs-keyword">var</span> elem,
newUnmatched = [],
i = <span class="hljs-number">0</span>,
len = unmatched.length,
mapped = map != <span class="hljs-literal">null</span>;
<span class="hljs-keyword">for</span> (; i < len; i++) {
<span class="hljs-keyword">if</span> ((elem = unmatched[i])) {
<span class="hljs-keyword">if</span> (!filter || filter(elem, context, xml)) {
newUnmatched.push(elem);
<span class="hljs-keyword">if</span> (mapped) {
map.push(i);
}
}
}
}
<span class="hljs-keyword">return</span> newUnmatched;
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">setMatcher</span><span class="hljs-params">(preFilter, selector, matcher, postFilter, postFinder, postSelector)</span> </span>{
<span class="hljs-keyword">if</span> (postFilter && !postFilter[expando]) {
postFilter = setMatcher(postFilter);
}
<span class="hljs-keyword">if</span> (postFinder && !postFinder[expando]) {
postFinder = setMatcher(postFinder, postSelector);
}
<span class="hljs-keyword">return</span> markFunction(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(seed, results, context, xml)</span> </span>{
<span class="hljs-keyword">var</span> temp, i, elem,
preMap = [],
postMap = [],
preexisting = results.length,</pre></div></div>
</li>
<li id="section-272">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-272">¶</a>
</div>
<p>Get initial elements from seed or context</p>
</div>
<div class="content"><div class='highlight'><pre> elems = seed || multipleContexts(selector || <span class="hljs-string">"*"</span>, context.nodeType ? [context] : context, []),</pre></div></div>
</li>
<li id="section-273">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-273">¶</a>
</div>
<p>Prefilter to get matcher input, preserving a map for seed-results synchronization</p>
</div>
<div class="content"><div class='highlight'><pre> matcherIn = preFilter && (seed || !selector) ?
condense(elems, preMap, preFilter, context, xml) :
elems,
matcherOut = matcher ?</pre></div></div>
</li>
<li id="section-274">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-274">¶</a>
</div>
<p>If we have a postFinder, or filtered seed, or non-seed postFilter or preexisting results,</p>
</div>
<div class="content"><div class='highlight'><pre> postFinder || (seed ? preFilter : preexisting || postFilter) ?</pre></div></div>
</li>
<li id="section-275">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-275">¶</a>
</div>
<p>…intermediate processing is necessary</p>
</div>
<div class="content"><div class='highlight'><pre> [] :</pre></div></div>
</li>
<li id="section-276">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-276">¶</a>
</div>
<p>…otherwise use results directly</p>
</div>
<div class="content"><div class='highlight'><pre> results :
matcherIn;</pre></div></div>
</li>
<li id="section-277">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-277">¶</a>
</div>
<p>Find primary matches</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (matcher) {
matcher(matcherIn, matcherOut, context, xml);
}</pre></div></div>
</li>
<li id="section-278">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-278">¶</a>
</div>
<p>Apply postFilter</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (postFilter) {
temp = condense(matcherOut, postMap);
postFilter(temp, [], context, xml);</pre></div></div>
</li>
<li id="section-279">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-279">¶</a>
</div>
<p>Un-match failing elements by moving them back to matcherIn</p>
</div>
<div class="content"><div class='highlight'><pre> i = temp.length;
<span class="hljs-keyword">while</span> (i--) {
<span class="hljs-keyword">if</span> ((elem = temp[i])) {
matcherOut[postMap[i]] = !(matcherIn[postMap[i]] = elem);
}
}
}
<span class="hljs-keyword">if</span> (seed) {
<span class="hljs-keyword">if</span> (postFinder || preFilter) {
<span class="hljs-keyword">if</span> (postFinder) {</pre></div></div>
</li>
<li id="section-280">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-280">¶</a>
</div>
<p>Get the final matcherOut by condensing this intermediate into postFinder contexts</p>
</div>
<div class="content"><div class='highlight'><pre> temp = [];
i = matcherOut.length;
<span class="hljs-keyword">while</span> (i--) {
<span class="hljs-keyword">if</span> ((elem = matcherOut[i])) {</pre></div></div>
</li>
<li id="section-281">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-281">¶</a>
</div>
<p>Restore matcherIn since elem is not yet a final match</p>
</div>
<div class="content"><div class='highlight'><pre> temp.push((matcherIn[i] = elem));
}
}
postFinder(<span class="hljs-literal">null</span>, (matcherOut = []), temp, xml);
}</pre></div></div>
</li>
<li id="section-282">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-282">¶</a>
</div>
<p>Move matched elements from seed to results to keep them synchronized</p>
</div>
<div class="content"><div class='highlight'><pre> i = matcherOut.length;
<span class="hljs-keyword">while</span> (i--) {
<span class="hljs-keyword">if</span> ((elem = matcherOut[i]) &&
(temp = postFinder ? indexOf.call(seed, elem) : preMap[i]) > -<span class="hljs-number">1</span>) {
seed[temp] = !(results[temp] = elem);
}
}
}</pre></div></div>
</li>
<li id="section-283">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-283">¶</a>
</div>
<p>Add elements to results, through postFinder if defined</p>
</div>
<div class="content"><div class='highlight'><pre> } <span class="hljs-keyword">else</span> {
matcherOut = condense(
matcherOut === results ?
matcherOut.splice(preexisting, matcherOut.length) :
matcherOut
);
<span class="hljs-keyword">if</span> (postFinder) {
postFinder(<span class="hljs-literal">null</span>, results, matcherOut, xml);
} <span class="hljs-keyword">else</span> {
push.apply(results, matcherOut);
}
}
});
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">matcherFromTokens</span><span class="hljs-params">(tokens)</span> </span>{
<span class="hljs-keyword">var</span> checkContext, matcher, j,
len = tokens.length,
leadingRelative = Expr.relative[tokens[<span class="hljs-number">0</span>].type],
implicitRelative = leadingRelative || Expr.relative[<span class="hljs-string">" "</span>],
i = leadingRelative ? <span class="hljs-number">1</span> : <span class="hljs-number">0</span>,</pre></div></div>
</li>
<li id="section-284">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-284">¶</a>
</div>
<p>The foundational matcher ensures that elements are reachable from top-level context(s)</p>
</div>
<div class="content"><div class='highlight'><pre> matchContext = addCombinator(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">return</span> elem === checkContext;
}, implicitRelative, <span class="hljs-literal">true</span>),
matchAnyContext = addCombinator(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem)</span> </span>{
<span class="hljs-keyword">return</span> indexOf.call(checkContext, elem) > -<span class="hljs-number">1</span>;
}, implicitRelative, <span class="hljs-literal">true</span>),
matchers = [<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem, context, xml)</span> </span>{
<span class="hljs-keyword">return</span> (!leadingRelative && (xml || context !== outermostContext)) || (
(checkContext = context).nodeType ?
matchContext(elem, context, xml) :
matchAnyContext(elem, context, xml));
}];
<span class="hljs-keyword">for</span> (; i < len; i++) {
<span class="hljs-keyword">if</span> ((matcher = Expr.relative[tokens[i].type])) {
matchers = [addCombinator(elementMatcher(matchers), matcher)];
} <span class="hljs-keyword">else</span> {
matcher = Expr.filter[tokens[i].type].apply(<span class="hljs-literal">null</span>, tokens[i].matches);</pre></div></div>
</li>
<li id="section-285">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-285">¶</a>
</div>
<p>Return special upon seeing a positional matcher</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (matcher[expando]) {</pre></div></div>
</li>
<li id="section-286">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-286">¶</a>
</div>
<p>Find the next relative operator (if any) for proper handling</p>
</div>
<div class="content"><div class='highlight'><pre> j = ++i;
<span class="hljs-keyword">for</span> (; j < len; j++) {
<span class="hljs-keyword">if</span> (Expr.relative[tokens[j].type]) {
<span class="hljs-keyword">break</span>;
}
}
<span class="hljs-keyword">return</span> setMatcher(
i > <span class="hljs-number">1</span> && elementMatcher(matchers),
i > <span class="hljs-number">1</span> && toSelector(</pre></div></div>
</li>
<li id="section-287">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-287">¶</a>
</div>
<p>If the preceding token was a descendant combinator, insert an implicit any-element <code>*</code></p>
</div>
<div class="content"><div class='highlight'><pre> tokens.slice(<span class="hljs-number">0</span>, i - <span class="hljs-number">1</span>).concat({ value: tokens[i - <span class="hljs-number">2</span>].type === <span class="hljs-string">" "</span> ? <span class="hljs-string">"*"</span> : <span class="hljs-string">""</span> })
).replace(rtrim, <span class="hljs-string">"$1"</span>),
matcher,
i < j && matcherFromTokens(tokens.slice(i, j)),
j < len && matcherFromTokens((tokens = tokens.slice(j))),
j < len && toSelector(tokens)
);
}
matchers.push(matcher);
}
}
<span class="hljs-keyword">return</span> elementMatcher(matchers);
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">matcherFromGroupMatchers</span><span class="hljs-params">(elementMatchers, setMatchers)</span> </span>{</pre></div></div>
</li>
<li id="section-288">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-288">¶</a>
</div>
<p>A counter to specify which element is currently being matched</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> matcherCachedRuns = <span class="hljs-number">0</span>,
bySet = setMatchers.length > <span class="hljs-number">0</span>,
byElement = elementMatchers.length > <span class="hljs-number">0</span>,
superMatcher = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(seed, context, xml, results, expandContext)</span> </span>{
<span class="hljs-keyword">var</span> elem, j, matcher,
setMatched = [],
matchedCount = <span class="hljs-number">0</span>,
i = <span class="hljs-string">"0"</span>,
unmatched = seed && [],
outermost = expandContext != <span class="hljs-literal">null</span>,
contextBackup = outermostContext,</pre></div></div>
</li>
<li id="section-289">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-289">¶</a>
</div>
<p>We must always have either seed elements or context</p>
</div>
<div class="content"><div class='highlight'><pre> elems = seed || byElement && Expr.find[<span class="hljs-string">"TAG"</span>](<span class="hljs-string">"*"</span>, expandContext && context.parentNode || context),</pre></div></div>
</li>
<li id="section-290">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-290">¶</a>
</div>
<p>Use integer dirruns iff this is the outermost matcher</p>
</div>
<div class="content"><div class='highlight'><pre> dirrunsUnique = (dirruns += contextBackup == <span class="hljs-literal">null</span> ? <span class="hljs-number">1</span> : <span class="hljs-built_in">Math</span>.random() || <span class="hljs-number">0.1</span>),
len = elems.length;
<span class="hljs-keyword">if</span> (outermost) {
outermostContext = context !== <span class="hljs-built_in">document</span> && context;
cachedruns = matcherCachedRuns;
}</pre></div></div>
</li>
<li id="section-291">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-291">¶</a>
</div>
<p>Add elements passing elementMatchers directly to results
Keep <code>i</code> a string if there are no elements so <code>matchedCount</code> will be “00” below
Support: IE<9, Safari
Tolerate NodeList properties (IE: "length"; Safari: <number>) matching elements by id</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">for</span> (; i !== len && (elem = elems[i]) != <span class="hljs-literal">null</span>; i++) {
<span class="hljs-keyword">if</span> (byElement && elem) {
j = <span class="hljs-number">0</span>;
<span class="hljs-keyword">while</span> ((matcher = elementMatchers[j++])) {
<span class="hljs-keyword">if</span> (matcher(elem, context, xml)) {
results.push(elem);
<span class="hljs-keyword">break</span>;
}
}
<span class="hljs-keyword">if</span> (outermost) {
dirruns = dirrunsUnique;
cachedruns = ++matcherCachedRuns;
}
}</pre></div></div>
</li>
<li id="section-292">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-292">¶</a>
</div>
<p>Track unmatched elements for set filters</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (bySet) {</pre></div></div>
</li>
<li id="section-293">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-293">¶</a>
</div>
<p>They will have gone through all possible matchers</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> ((elem = !matcher && elem)) {
matchedCount--;
}</pre></div></div>
</li>
<li id="section-294">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-294">¶</a>
</div>
<p>Lengthen the array for every element, matched or not</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (seed) {
unmatched.push(elem);
}
}
}</pre></div></div>
</li>
<li id="section-295">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-295">¶</a>
</div>
<p>Apply set filters to unmatched elements</p>
</div>
<div class="content"><div class='highlight'><pre> matchedCount += i;
<span class="hljs-keyword">if</span> (bySet && i !== matchedCount) {
j = <span class="hljs-number">0</span>;
<span class="hljs-keyword">while</span> ((matcher = setMatchers[j++])) {
matcher(unmatched, setMatched, context, xml);
}
<span class="hljs-keyword">if</span> (seed) {</pre></div></div>
</li>
<li id="section-296">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-296">¶</a>
</div>
<p>Reintegrate element matches to eliminate the need for sorting</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (matchedCount > <span class="hljs-number">0</span>) {
<span class="hljs-keyword">while</span> (i--) {
<span class="hljs-keyword">if</span> (!(unmatched[i] || setMatched[i])) {
setMatched[i] = pop.call(results);
}
}
}</pre></div></div>
</li>
<li id="section-297">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-297">¶</a>
</div>
<p>Discard index placeholder values to get only actual matches</p>
</div>
<div class="content"><div class='highlight'><pre> setMatched = condense(setMatched);
}</pre></div></div>
</li>
<li id="section-298">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-298">¶</a>
</div>
<p>Add matches to results</p>
</div>
<div class="content"><div class='highlight'><pre> push.apply(results, setMatched);</pre></div></div>
</li>
<li id="section-299">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-299">¶</a>
</div>
<p>Seedless set matches succeeding multiple successful matchers stipulate sorting</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (outermost && !seed && setMatched.length > <span class="hljs-number">0</span> &&
(matchedCount + setMatchers.length) > <span class="hljs-number">1</span>) {
Sizzle.uniqueSort(results);
}
}</pre></div></div>
</li>
<li id="section-300">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-300">¶</a>
</div>
<p>Override manipulation of globals by nested matchers</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (outermost) {
dirruns = dirrunsUnique;
outermostContext = contextBackup;
}
<span class="hljs-keyword">return</span> unmatched;
};
<span class="hljs-keyword">return</span> bySet ?
markFunction(superMatcher) :
superMatcher;
}
compile = Sizzle.compile = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(selector, group <span class="hljs-comment">/* Internal Use Only */</span>)</span> </span>{
<span class="hljs-keyword">var</span> i,
setMatchers = [],
elementMatchers = [],
cached = compilerCache[selector + <span class="hljs-string">" "</span>];
<span class="hljs-keyword">if</span> (!cached) {</pre></div></div>
</li>
<li id="section-301">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-301">¶</a>
</div>
<p>Generate a function of recursive functions that can be used to check each element</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!group) {
group = tokenize(selector);
}
i = group.length;
<span class="hljs-keyword">while</span> (i--) {
cached = matcherFromTokens(group[i]);
<span class="hljs-keyword">if</span> (cached[expando]) {
setMatchers.push(cached);
} <span class="hljs-keyword">else</span> {
elementMatchers.push(cached);
}
}</pre></div></div>
</li>
<li id="section-302">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-302">¶</a>
</div>
<p>Cache the compiled function</p>
</div>
<div class="content"><div class='highlight'><pre> cached = compilerCache(selector, matcherFromGroupMatchers(elementMatchers, setMatchers));
}
<span class="hljs-keyword">return</span> cached;
};
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">multipleContexts</span><span class="hljs-params">(selector, contexts, results)</span> </span>{
<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>,
len = contexts.length;
<span class="hljs-keyword">for</span> (; i < len; i++) {
Sizzle(selector, contexts[i], results);
}
<span class="hljs-keyword">return</span> results;
}</pre></div></div>
</li>
<li id="section-303">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-303">¶</a>
</div>
<p>One-time assignments</p>
</div>
</li>
<li id="section-304">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-304">¶</a>
</div>
<p>Sort stability</p>
</div>
<div class="content"><div class='highlight'><pre> support.sortStable = expando.split(<span class="hljs-string">""</span>).sort(sortOrder).join(<span class="hljs-string">""</span>) === expando;</pre></div></div>
</li>
<li id="section-305">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-305">¶</a>
</div>
<p>Support: Chrome<14
Always assume duplicates if they aren’t passed to the comparison function</p>
</div>
<div class="content"><div class='highlight'><pre> support.detectDuplicates = hasDuplicate;</pre></div></div>
</li>
<li id="section-306">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-306">¶</a>
</div>
<p>Initialize against the default document</p>
</div>
<div class="content"><div class='highlight'><pre> setDocument();</pre></div></div>
</li>
<li id="section-307">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-307">¶</a>
</div>
<p>Support: Webkit<537.32 - Safari 6.0.3/Chrome 25 (fixed in Chrome 27)
Detached nodes confoundingly follow <em>each other</em></p>
</div>
<div class="content"><div class='highlight'><pre> support.sortDetached = assert(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(div1)</span> </span>{</pre></div></div>
</li>
<li id="section-308">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-308">¶</a>
</div>
<p>Should return 1, but returns 4 (following)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> div1.compareDocumentPosition(<span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"div"</span>)) & <span class="hljs-number">1</span>;
});</pre></div></div>
</li>
<li id="section-309">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-309">¶</a>
</div>
<p>Support: IE<8
Prevent attribute/property “interpolation”
<a href="http://msdn.microsoft.com/en-us/library/ms536429%28VS.85%29.aspx">http://msdn.microsoft.com/en-us/library/ms536429%28VS.85%29.aspx</a></p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!assert(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(div)</span> </span>{
div.innerHTML = <span class="hljs-string">"<a href='#'></a>"</span>;
<span class="hljs-keyword">return</span> div.firstChild.getAttribute(<span class="hljs-string">"href"</span>) === <span class="hljs-string">"#"</span> ;
})) {
addHandle(<span class="hljs-string">"type|href|height|width"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem, name, isXML)</span> </span>{
<span class="hljs-keyword">if</span> (!isXML) {
<span class="hljs-keyword">return</span> elem.getAttribute(name, name.toLowerCase() === <span class="hljs-string">"type"</span> ? <span class="hljs-number">1</span> : <span class="hljs-number">2</span>);
}
});
}</pre></div></div>
</li>
<li id="section-310">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-310">¶</a>
</div>
<p>Support: IE<9
Use defaultValue in place of getAttribute(“value”)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!support.attributes || !assert(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(div)</span> </span>{
div.innerHTML = <span class="hljs-string">"<input/>"</span>;
div.firstChild.setAttribute(<span class="hljs-string">"value"</span>, <span class="hljs-string">""</span>);
<span class="hljs-keyword">return</span> div.firstChild.getAttribute(<span class="hljs-string">"value"</span>) === <span class="hljs-string">""</span>;
})) {
addHandle(<span class="hljs-string">"value"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem, name, isXML)</span> </span>{
<span class="hljs-keyword">if</span> (!isXML && elem.nodeName.toLowerCase() === <span class="hljs-string">"input"</span>) {
<span class="hljs-keyword">return</span> elem.defaultValue;
}
});
}</pre></div></div>
</li>
<li id="section-311">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-311">¶</a>
</div>
<p>Support: IE<9
Use getAttributeNode to fetch booleans when getAttribute lies</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!assert(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(div)</span> </span>{
<span class="hljs-keyword">return</span> div.getAttribute(<span class="hljs-string">"disabled"</span>) == <span class="hljs-literal">null</span>;
})) {
addHandle(booleans, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(elem, name, isXML)</span> </span>{
<span class="hljs-keyword">var</span> val;
<span class="hljs-keyword">if</span> (!isXML) {
<span class="hljs-keyword">return</span> (val = elem.getAttributeNode(name)) && val.specified ?
val.value :
elem[name] === <span class="hljs-literal">true</span> ? name.toLowerCase() : <span class="hljs-literal">null</span>;
}
});
}
<span class="hljs-keyword">return</span> Sizzle;
}());</pre></div></div>
</li>
<li id="section-312">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-312">¶</a>
</div>
<hr>
</div>
</li>
<li id="section-313">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-313">¶</a>
</div>
<h2 id="utilities">Utilities</h2>
</div>
</li>
<li id="section-314">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-314">¶</a>
</div>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">var</span> boxedString = <span class="hljs-built_in">Object</span>(<span class="hljs-string">"a"</span>)
, splitString = boxedString[<span class="hljs-number">0</span>] !== <span class="hljs-string">"a"</span> || !(<span class="hljs-number">0</span> <span class="hljs-keyword">in</span> boxedString);
<span class="hljs-keyword">var</span> toObject = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">toObject</span> <span class="hljs-params">(o)</span> </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> o === <span class="hljs-string">"undefined"</span>) { <span class="hljs-comment">// this matches both null and undefined</span>
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">TypeError</span>(<span class="hljs-string">"can't convert "</span>+o+<span class="hljs-string">" to object"</span>);
}
<span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>(o);
};
<span class="hljs-keyword">var</span> toInteger = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">toInteger</span> <span class="hljs-params">(value)</span> </span>{
<span class="hljs-keyword">var</span> number = +value;
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">Number</span>.isNaN(number)) {
<span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
}
<span class="hljs-keyword">if</span> (number === <span class="hljs-number">0</span> || !<span class="hljs-built_in">isFinite</span>(number)) {
<span class="hljs-keyword">return</span> number;
}
<span class="hljs-keyword">return</span> sign(number) * <span class="hljs-built_in">Math</span>.floor(<span class="hljs-built_in">Math</span>.abs(number));
};
<span class="hljs-keyword">var</span> isPrimitive = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">isPrimitive</span><span class="hljs-params">(input)</span> </span>{
<span class="hljs-keyword">var</span> type = <span class="hljs-keyword">typeof</span> input;
<span class="hljs-keyword">return</span> (
input === <span class="hljs-literal">null</span> ||
type === <span class="hljs-string">"undefined"</span> ||
type === <span class="hljs-string">"boolean"</span> ||
type === <span class="hljs-string">"number"</span> ||
type === <span class="hljs-string">"string"</span>
);
};
<span class="hljs-keyword">var</span> toPrimitive = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">toPrimitive</span> <span class="hljs-params">(input)</span> </span>{
<span class="hljs-keyword">var</span> val, valueOf, toString;
<span class="hljs-keyword">if</span> (isPrimitive(input)) {
<span class="hljs-keyword">return</span> input;
}
valueOf = input.valueOf;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> valueOf === <span class="hljs-string">"function"</span>) {
val = valueOf.call(input);
<span class="hljs-keyword">if</span> (isPrimitive(val)) {
<span class="hljs-keyword">return</span> val;
}
}
toString = input.toString;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> toString === <span class="hljs-string">"function"</span>) {
val = toString.call(input);
<span class="hljs-keyword">if</span> (isPrimitive(val)) {
<span class="hljs-keyword">return</span> val;
}
}
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">TypeError</span>();
};
<span class="hljs-keyword">var</span> sign = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sign</span><span class="hljs-params">(value)</span> </span>{
<span class="hljs-keyword">var</span> number = +value;
<span class="hljs-keyword">if</span> (number === <span class="hljs-number">0</span>) {
<span class="hljs-keyword">return</span> number;
}
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">Number</span>.isNaN(number)) {
<span class="hljs-keyword">return</span> number;
}
<span class="hljs-keyword">return</span> number < <span class="hljs-number">0</span> ? -<span class="hljs-number">1</span> : <span class="hljs-number">1</span>;
};</pre></div></div>
</li>
<li id="section-315">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-315">¶</a>
</div>
<hr>
</div>
</li>
<li id="section-316">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-316">¶</a>
</div>
<h2 id="array-utilities">Array Utilities</h2>
</div>
</li>
<li id="section-317">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-317">¶</a>
</div>
</div>
</li>
<li id="section-318">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-318">¶</a>
</div>
<p>Executes a function on each of the element
in the array</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> each = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">each</span> <span class="hljs-params">(arr, fn, thisRef)</span> </span>{
<span class="hljs-keyword">var</span> _i, _l;</pre></div></div>
</li>
<li id="section-319">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-319">¶</a>
</div>
<p>Use Array.prototype.forEach if available</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-built_in">Array</span>.prototype.forEach) {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">Array</span>.prototype.forEach.call(arr, fn);
}</pre></div></div>
</li>
<li id="section-320">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-320">¶</a>
</div>
<p>Throw an error if array and function are not provided</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!(arr && fn)) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span> (
<span class="hljs-string">"Not enough arguments provided for each()"</span>
);
}</pre></div></div>
</li>
<li id="section-321">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-321">¶</a>
</div>
<p>Make the this variable the array itself if not provided</p>
</div>
<div class="content"><div class='highlight'><pre> thisRef = thisRef || arr;
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>, _l = arr.length; _i < _l; _i += <span class="hljs-number">1</span>) {
fn.call(thisRef, arr[_i]);
}
};</pre></div></div>
</li>
<li id="section-322">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-322">¶</a>
</div>
<p>Iterate over an object and execute a function on each ‘value’
of it</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> forIn = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">forIn</span> <span class="hljs-params">(obj, fn, thisRef)</span> </span>{
<span class="hljs-keyword">var</span> _i;</pre></div></div>
</li>
<li id="section-323">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-323">¶</a>
</div>
<p>Throw an error if object and function are not provided</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!(obj && fn)) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span> (
<span class="hljs-string">"Not enough arguments provided for forIn()"</span>
);
}</pre></div></div>
</li>
<li id="section-324">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-324">¶</a>
</div>
<p>Make the given object as the <code>this</code> value if one is not provided</p>
</div>
<div class="content"><div class='highlight'><pre> thisRef = thisRef || obj;
<span class="hljs-keyword">for</span> (_i <span class="hljs-keyword">in</span> obj) {
<span class="hljs-keyword">if</span> (own(obj, _i)) {
fn.call(thisRef, _i);
}
}
};</pre></div></div>
</li>
<li id="section-325">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-325">¶</a>
</div>
<p>Append all the properties of the second object to the first</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> extend = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">extend</span> <span class="hljs-params">(obj, ext)</span> </span>{
<span class="hljs-keyword">var</span> _i;</pre></div></div>
</li>
<li id="section-326">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-326">¶</a>
</div>
<p>Throw an error if object and extension are not provided</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!(obj && ext)) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span> (
<span class="hljs-string">"Not enough arguments provided for extend()"</span>
);
}
<span class="hljs-keyword">for</span> (_i <span class="hljs-keyword">in</span> ext) {
<span class="hljs-keyword">if</span> (own(ext, _i)) {
obj[_i] = ext[_i];
}
}
<span class="hljs-keyword">return</span> obj;
};</pre></div></div>
</li>
<li id="section-327">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-327">¶</a>
</div>
<p>Check if every element in the object passes the test</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> every = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">every</span> <span class="hljs-params">(o, fun)</span> </span>{
<span class="hljs-keyword">var</span> t, len, thisp, _i;
<span class="hljs-keyword">if</span> (o === <span class="hljs-literal">null</span>) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">TypeError</span>();
}
t = <span class="hljs-built_in">Object</span>(o);
len = t.length >>> <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> fun !== <span class="hljs-string">"function"</span>) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">TypeError</span>();
}
thisp = <span class="hljs-built_in">arguments</span>[<span class="hljs-number">1</span>];
<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 && !fun.call(thisp, t[_i], _i, t)) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
}
}
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
};</pre></div></div>
</li>
<li id="section-328">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-328">¶</a>
</div>
<hr>
</div>
</li>
<li id="section-329">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-329">¶</a>
</div>
<h2 id="string-utilities">String Utilities</h2>
</div>
</li>
<li id="section-330">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-330">¶</a>
</div>
</div>
</li>
<li id="section-331">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-331">¶</a>
</div>
<p>Remove whitespace at the start and end of a string</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> trim = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">trim</span> <span class="hljs-params">(str)</span> </span>{
<span class="hljs-keyword">var</span> ws = <span class="hljs-string">"\x09\x0A\x0B\x0C\x0D\x20\xA0\u1680\u180E\u2000\u2001\u2002\u2003"</span> +
<span class="hljs-string">"\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028"</span> +
<span class="hljs-string">"\u2029\uFEFF"</span>;
ws = <span class="hljs-string">"["</span> + ws + <span class="hljs-string">"]"</span>;
<span class="hljs-keyword">var</span> trimBeginRegexp = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(<span class="hljs-string">"^"</span> + ws + ws + <span class="hljs-string">"*"</span>),
trimEndRegexp = <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(ws + ws + <span class="hljs-string">"*$"</span>);
<span class="hljs-keyword">if</span> (str === <span class="hljs-keyword">void</span> <span class="hljs-number">0</span> || str === <span class="hljs-literal">null</span>) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">TypeError</span>(<span class="hljs-string">"can't convert "</span>+ str +<span class="hljs-string">" to object"</span>);
}
<span class="hljs-keyword">return</span> <span class="hljs-built_in">String</span>(str).replace(trimBeginRegexp, <span class="hljs-string">""</span>).replace(trimEndRegexp, <span class="hljs-string">""</span>);
};</pre></div></div>
</li>
<li id="section-332">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-332">¶</a>
</div>
<p>Check if a string contains another string in it</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> contains = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">contains</span> <span class="hljs-params">(haystack, needle)</span> </span>{
<span class="hljs-keyword">var</span> position = <span class="hljs-built_in">arguments</span>[<span class="hljs-number">1</span>];
<span class="hljs-keyword">return</span> haystack.indexOf(needle, position) !== -<span class="hljs-number">1</span>;
};
<span class="hljs-keyword">var</span> indexOf = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">indexOf</span><span class="hljs-params">(arr, sought <span class="hljs-comment">/*, fromIndex */</span> )</span> </span>{
<span class="hljs-keyword">var</span> self = splitString && arr.toString() === <span class="hljs-string">"[object String]"</span> ?
<span class="hljs-keyword">this</span>.split(<span class="hljs-string">""</span>) :
toObject(<span class="hljs-keyword">this</span>)
, length = self.length >>> <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (!length) {
<span class="hljs-keyword">return</span> -<span class="hljs-number">1</span>;
}
<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">arguments</span>.length > <span class="hljs-number">1</span>) {
i = toInteger(<span class="hljs-built_in">arguments</span>[<span class="hljs-number">1</span>]);
}</pre></div></div>
</li>
<li id="section-333">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-333">¶</a>
</div>
<p>handle negative indices</p>
</div>
<div class="content"><div class='highlight'><pre> i = i >= <span class="hljs-number">0</span> ? i : <span class="hljs-built_in">Math</span>.max(<span class="hljs-number">0</span>, length + i);
<span class="hljs-keyword">for</span> (; i < length; i++) {
<span class="hljs-keyword">if</span> (i <span class="hljs-keyword">in</span> self && self[i] === sought) {
<span class="hljs-keyword">return</span> i;
}
}
<span class="hljs-keyword">return</span> -<span class="hljs-number">1</span>;
};
select = feature.qsa3 ? <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(selector, root)</span> </span>{</pre></div></div>
</li>
<li id="section-334">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-334">¶</a>
</div>
<p>Set root to given root or document</p>
</div>
<div class="content"><div class='highlight'><pre> root = root || doc;
<span class="hljs-keyword">return</span> root.querySelectorAll(selector);
} : <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(selector, root)</span> </span>{
<span class="hljs-keyword">return</span> sizzle(selector, root);
};</pre></div></div>
</li>
<li id="section-335">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-335">¶</a>
</div>
<hr>
</div>
</li>
<li id="section-336">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-336">¶</a>
</div>
<h2 id="core-library">Core Library</h2>
</div>
</li>
<li id="section-337">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-337">¶</a>
</div>
</div>
</li>
<li id="section-338">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-338">¶</a>
</div>
<p>If there is a select function (sizzle), use it
or use the native querySelectorAll()</p>
</div>
<div class="content"><div class='highlight'><pre> select = select || <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(selector, root)</span> </span>{</pre></div></div>
</li>
<li id="section-339">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-339">¶</a>
</div>
<p>Set root to given root or document</p>
</div>
<div class="content"><div class='highlight'><pre> root = root || doc;</pre></div></div>
</li>
<li id="section-340">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-340">¶</a>
</div>
<p>Use the native querySelectorAll</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> root.querySelectorAll(selector);
};
<span class="hljs-comment">/**
* The main Hilo Object / function
*
* @module Hilo
* @static
* @class hilo
* @author Erik Royall
*/</span>
hilo = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(input, root, en)</span> </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> input === <span class="hljs-string">"undefined"</span>) {</pre></div></div>
</li>
<li id="section-341">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-341">¶</a>
</div>
<p>It’s better than not returning anything</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> win.Hilo;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> input === <span class="hljs-string">"number"</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> NumberObject(input);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> input === <span class="hljs-string">"string"</span>) {
<span class="hljs-keyword">if</span> (trim(input) === <span class="hljs-string">""</span>) {</pre></div></div>
</li>
<li id="section-342">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-342">¶</a>
</div>
<p>Can’t pass empty string to querySelectorAll()</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Dom({length:<span class="hljs-number">0</span>});
}</pre></div></div>
</li>
<li id="section-343">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-343">¶</a>
</div>
<p>Most common, return based on selector</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Dom(select(input, root, en), input);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> input === <span class="hljs-string">"function"</span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">document</span>.readyState === <span class="hljs-string">"complete"</span>) {
input();
} <span class="hljs-keyword">else</span> {
callbacks.push(input);
}</pre></div></div>
</li>
<li id="section-344">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-344">¶</a>
</div>
<p>Allows to immediately start executing more code
It’s better than not returning anything!</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> win.Hilo;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (input.length) { <span class="hljs-comment">// DOM Node List | Hilo DOM Object</span>
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Dom(input);
} <span class="hljs-keyword">else</span> { <span class="hljs-comment">// DOM Node</span>
input = [input];
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Dom(input);
}
};</pre></div></div>
</li>
<li id="section-345">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-345">¶</a>
</div>
<p>Enable Selector Caching</p>
</div>
<div class="content"><div class='highlight'><pre> hilo.temp = {};</pre></div></div>
</li>
<li id="section-346">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-346">¶</a>
</div>
<p>Version info</p>
</div>
<div class="content"><div class='highlight'><pre> hilo.version = <span class="hljs-string">"0.1.0-pre-dev-beta-9"</span>;</pre></div></div>
</li>
<li id="section-347">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-347">¶</a>
</div>
<p>Detections</p>
</div>
<div class="content"><div class='highlight'><pre> hilo.feature = feature;
hilo.browser = detected.browser;
hilo.engine = detected.engine;
hilo.platform = detected.system;</pre></div></div>
</li>
<li id="section-348">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-348">¶</a>
</div>
<p>ES Utils</p>
</div>
<div class="content"><div class='highlight'><pre> extend(hilo, {
each: each,
extend: extend,
every: every,
trim: trim,
contains: contains,
indexOf: indexOf,
isPrimitive: isPrimitive,
toObject: toObject,
toInteger: toInteger,
toPrimitive: toPrimitive
});</pre></div></div>
</li>
<li id="section-349">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-349">¶</a>
</div>
<p>JSON</p>
</div>
<div class="content"><div class='highlight'><pre> hilo.json = {
parse: json.parse,
stringify: json.stringify
};</pre></div></div>
</li>
<li id="section-350">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-350">¶</a>
</div>
<p>Legacy</p>
</div>
<div class="content"><div class='highlight'><pre> hilo.legacy = <span class="hljs-keyword">typeof</span> sizzle === <span class="hljs-string">"function"</span>;</pre></div></div>
</li>
<li id="section-351">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-351">¶</a>
</div>
<hr>
</div>
</li>
<li id="section-352">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-352">¶</a>
</div>
<h2 id="testing">Testing</h2>
</div>
</li>
<li id="section-353">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-353">¶</a>
</div>
</div>
<div class="content"><div class='highlight'><pre>
extend(hilo, {
<span class="hljs-comment">/**
* Public test function
*
* @for hilo
* @method test
* @param con
* @return {Test}
* @example
* <div class="code"><pre class="prettyprint">
* $.test("hello");
* </pre></div>
*
* <div class="code"><pre class="prettyprint">
* $.test({
* name: "Erik Royall",
* age: 14,
* projects: ["hilo", "helio"]
* });
* </pre></div>
* @since 0.1.0
*/</span>
test: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(con)</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Test(con);
}
});
<span class="hljs-comment">/**
* Main Test Class
*
* @constructor
* @class Test
* @param {Any} con To compare
* @param {boolean} neg Whether to inverse the result
* @return void
* @example
* <div class="code"><pre class="prettyprint">
* new Test({});
* new Test("Hilo", true);
* </pre></div>
* @since 0.1.0
*/</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Test</span> <span class="hljs-params">(con, neg)</span> </span>{
<span class="hljs-keyword">this</span>.con = con;
<span class="hljs-keyword">if</span> (neg) {
<span class="hljs-keyword">this</span>.neg = <span class="hljs-literal">true</span>;
}
}</pre></div></div>
</li>
<li id="section-354">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-354">¶</a>
</div>
<hr>
</div>
</li>
<li id="section-355">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-355">¶</a>
</div>
<h2 id="test-comparisions">Test Comparisions</h2>
</div>
</li>
<li id="section-356">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-356">¶</a>
</div>
</div>
<div class="content"><div class='highlight'><pre>
extend(Test.prototype, {
<span class="hljs-comment">/**
* Test if equal
*
* @for Test
* @method ifEquals
* @param {Any} tw Comparision object
* @return {boolean}
* @example
* <div class="code"><pre class="prettyprint">
* var isIt = $.test(hilo.version).ifEquals("v0.1.0-pre-dev-beta-9");
* </pre></div>
* @since 0.1.0
*/</span>
ifEquals: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(tw)</span> </span>{
<span class="hljs-keyword">var</span> val = <span class="hljs-keyword">this</span>.con === tw;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.neg ? !val : val;
},
<span class="hljs-comment">/**
* Test if contains
*
* @for Test
* @method ifContains
* @param {Any} tw Comparision object
* @return {boolean}
* @example
* <div class="code"><pre class="prettyprint">
* var isHiloBeta = $.test(hilo.version).ifContains("beta");
* </pre></div>
* @since 0.1.0
*/</span>
ifContains: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(tw)</span> </span>{
<span class="hljs-keyword">var</span> ifString = <span class="hljs-keyword">this</span>.con.split(tw).length === <span class="hljs-number">1</span> ? <span class="hljs-literal">false</span> : <span class="hljs-literal">true</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> tw === <span class="hljs-string">"string"</span> && <span class="hljs-keyword">typeof</span> <span class="hljs-keyword">this</span>.con === <span class="hljs-string">"object"</span> && <span class="hljs-keyword">this</span>.con.length) {
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> tw === <span class="hljs-string">"string"</span> && <span class="hljs-keyword">typeof</span> <span class="hljs-keyword">this</span>.con === <span class="hljs-string">"string"</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.neg ? !ifString : ifString;
}
},
<span class="hljs-comment">/**
* Inverse a test
*
* @for Test
* @method not
* @return {Test}
* @example
* <div class="code"><pre class="prettyprint">
* $("Hilo.js").not().ifEquals("Hilo");
* </pre></div>
* @since 0.1.0
*/</span>
not: <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> Test(<span class="hljs-keyword">this</span>, <span class="hljs-literal">true</span>);
}
});</pre></div></div>
</li>
<li id="section-357">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-357">¶</a>
</div>
<p><strong> <code>hiloAjax</code> </strong></p>
<p>Makes an AJAX request</p>
<p>Param:</p>
<p><code>config // {Object} Configuration Options</code></p>
<p>For the list of all config opts, see below.</p>
<p>Example:</p>
<pre><code>Hilo.ajax({
url: <span class="hljs-string">"requestHandler.php"</span>,
success: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(data, xhr)</span> </span>{
<span class="hljs-built_in">console</span>.log(data, xhr);
},
method: <span class="hljs-string">"GET"</span>
});
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> hiloAjax = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(config)</span> </span>{</pre></div></div>
</li>
<li id="section-358">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-358">¶</a>
</div>
<pre><code>config.
method <span class="hljs-comment">// HTTP Method (default: "POST")</span>
url <span class="hljs-comment">// The file to send request</span>
async <span class="hljs-comment">// Whether to perform an asynchronous request (default: true)</span>
data <span class="hljs-comment">// Data to be sent to the server</span>
response <span class="hljs-comment">// HTTP Response type</span>
callback <span class="hljs-comment">// function to be executed on readystatechange</span>
complete <span class="hljs-comment">// {Function} (xhr.readyState = 4) To be triggered when request is complete</span>
error <span class="hljs-comment">// {Function} To be triggered when request fails with an error</span>
timeout <span class="hljs-comment">// {Function} To be triggered when request time's out</span>
success <span class="hljs-comment">// {Function} (200) To be triggered when request is successfully made (Commonly registered event)</span>
notfound <span class="hljs-comment">// {Function} (404) To be triggered when there has been a 4oh4 NotFound exception</span>
forbidden <span class="hljs-comment">// {Function} (403) To be triggered when making the request is forbidden</span>
username <span class="hljs-comment">// {String} Username to be provided, if authentication is required</span>
password <span class="hljs-comment">// {String} Password to be provided, if...</span>
contentType <span class="hljs-comment">// HTTP Content-Type</span>
</code></pre>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">var</span> xhr;
<span class="hljs-comment">/* Use the `XMLHttpRequest` object if available
or use `ActiveXObject` */</span>
<span class="hljs-keyword">if</span> (win.XMLHttpRequest) {
xhr = <span class="hljs-keyword">new</span> win.XMLHttpRequest();
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (win.ActiveXObject) {
xhr = <span class="hljs-keyword">new</span> win.ActiveXObject(<span class="hljs-string">"Microsoft.XMLHTTP"</span>);
}
<span class="hljs-comment">/* Throw an error if a URL hasn't been provided
Seriously, wth can this do without a target url? */</span>
<span class="hljs-keyword">if</span> (!config.url) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">TypeError</span>(<span class="hljs-string">"url parameter not provided to hilo.ajax"</span>);
}
<span class="hljs-comment">/* Perform an asynchronous request by default */</span>
config.async = config.async || <span class="hljs-literal">true</span>;
<span class="hljs-comment">/* Authentication params */</span>
config.username = config.username || <span class="hljs-literal">null</span>;
config.password = config.password || <span class="hljs-literal">null</span>;
<span class="hljs-comment">/* contentType.. "application/x-www-form-urlencoded; charset=UTF-8" is preferred */</span>
config.contentType = config.contentType || <span class="hljs-string">"application/x-www-form-urlencoded; charset=UTF-8"</span>;
xhr.onreadystatechange = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">if</span> (config.callback) {
config.callback(xhr);
}
<span class="hljs-keyword">if</span> (xhr.readyState === <span class="hljs-number">4</span>) { <span class="hljs-comment">// Request is completed</span>
<span class="hljs-keyword">typeof</span> config.complete ? config.complete.call(<span class="hljs-keyword">this</span>, xhr) : <span class="hljs-literal">null</span>;
<span class="hljs-keyword">switch</span> (xhr.status) {
<span class="hljs-keyword">case</span> <span class="hljs-number">200</span>: <span class="hljs-comment">// Success</span>
<span class="hljs-keyword">typeof</span> config.success ? config.success.call(<span class="hljs-keyword">this</span>, xhr) : <span class="hljs-literal">null</span>;
<span class="hljs-keyword">typeof</span> config.error ? config.error.call(<span class="hljs-keyword">this</span>, xhr) : <span class="hljs-literal">null</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-number">404</span>: <span class="hljs-comment">// Not Found</span>
<span class="hljs-keyword">typeof</span> config.notfound ? config.notfound.call(<span class="hljs-keyword">this</span>, xhr) : <span class="hljs-literal">null</span>;
<span class="hljs-keyword">typeof</span> config.error ? config.error.call(<span class="hljs-keyword">this</span>, xhr) : <span class="hljs-literal">null</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-number">403</span>: <span class="hljs-comment">// Forbidden</span>
<span class="hljs-keyword">typeof</span> config.forbidden ? config.forbidden.call(<span class="hljs-keyword">this</span>, xhr) : <span class="hljs-literal">null</span>;
<span class="hljs-keyword">typeof</span> config.error ? config.error.call(<span class="hljs-keyword">this</span>, xhr) : <span class="hljs-literal">null</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">default</span>: <span class="hljs-comment">// Some Error</span>
<span class="hljs-keyword">typeof</span> config.error ? config.error.call(<span class="hljs-keyword">this</span>, xhr) : <span class="hljs-literal">null</span>;
<span class="hljs-keyword">break</span>;
}
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (xhr.readyState === <span class="hljs-number">3</span>) {
<span class="hljs-keyword">typeof</span> config.sent ? config.sent.call(<span class="hljs-keyword">this</span>, xhr) : <span class="hljs-literal">null</span>;
}
};
<span class="hljs-comment">/* Run this function when the request has timed out :'( */</span>
xhr.timeout = config.timeout;
<span class="hljs-comment">/* Open the request (Could've been more verbose) */</span>
xhr.open(
config.method.trim().toUpperCase() || <span class="hljs-string">"POST"</span>,
config.url,
config.async,
config.username,
config.password
);
<span class="hljs-comment">/* If config.data is an object, JSON.encode it */</span>
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> config.data === <span class="hljs-string">"object"</span>) {
config.data = <span class="hljs-built_in">JSON</span>.encode(config.data);
}
<span class="hljs-comment">/* Lauch the request */</span>
xhr.send(<span class="hljs-keyword">typeof</span> config.data === <span class="hljs-string">"string"</span> ? config.data : <span class="hljs-literal">null</span>);
};
hilo.ajax = hiloAjax;</pre></div></div>
</li>
<li id="section-359">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-359">¶</a>
</div>
<p><code>ajaxRequest</code> <em>Internal</em></p>
<p>Param:</p>
<ul>
<li><code>method</code>: {String} HTTP Method</li>
<li><code>strOpt</code>: {String} URL, or options object (see above)</li>
<li><code>callback</code>: {Function} To be executed on <code>success</code></li>
<li><code>oOpt</code>: {Object} For providing more options</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ajaxRequest</span> <span class="hljs-params">(method, strOpt, callback, oOpt)</span> </span>{
oOpt = (<span class="hljs-keyword">typeof</span> oOpt === <span class="hljs-string">"object"</span> ? oOpt : <span class="hljs-literal">undefined</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> strOpt === <span class="hljs-string">"string"</span> && <span class="hljs-keyword">typeof</span> callback === <span class="hljs-string">"function"</span>) {
hiloAjax(extend({
method: method,
url: strOpt,
success: callback
}, oOpt));
} <span class="hljs-keyword">else</span> {
hiloAjax(extend({
method: method
}, strOpt));
}
}</pre></div></div>
</li>
<li id="section-360">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-360">¶</a>
</div>
<h3 id="make-an-asynchronous-get-request">Make an asynchronous GET Request</h3>
<p>Params are similar to those of the internal <code>ajaxRequest</code> method (see above)</p>
<pre><code>$.get({
url: <span class="hljs-string">"path/to/file.js"</span>,
success: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(data)</span> </span>{
<span class="hljs-built_in">console</span>.log(data);
}
}); <span class="hljs-comment">// Long form</span>
</code></pre><pre><code>$.get(<span class="hljs-string">"path/to/file.js"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(data)</span> </span>{
<span class="hljs-built_in">console</span>.log(data);
}); <span class="hljs-comment">// This does the exact same function as above</span>
</code></pre><pre><code>$.get(<span class="hljs-string">"path/to/file.js"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(data)</span> </span>{
<span class="hljs-built_in">console</span>.log(data);
}, {
error: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(err)</span> </span>{
<span class="hljs-built_in">console</span>.error(err);
}
}); <span class="hljs-comment">// Short form, with more options</span>
</code></pre>
</div>
<div class="content"><div class='highlight'><pre>
hilo.get = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(strOpt, callback, oOpt)</span> </span>{
ajaxRequest(<span class="hljs-string">"GET"</span>, strOpt, callback, oOpt);
};</pre></div></div>
</li>
<li id="section-361">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-361">¶</a>
</div>
<h3 id="make-an-asynchronous-post-request">Make an asynchronous POST Request</h3>
<p>Params are similar to those of the internal <code>ajaxRequest</code> method (see above)</p>
<pre><code>$.post({
url: <span class="hljs-string">"path/to/file.js"</span>,
success: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(data)</span> </span>{
<span class="hljs-built_in">console</span>.log(data);
},
data: <span class="hljs-built_in">JSON</span>.encode(obj)
}); <span class="hljs-comment">// Long form</span>
</code></pre><pre><code>$.post(<span class="hljs-string">"path/to/file.js"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(data)</span> </span>{
<span class="hljs-built_in">console</span>.log(data);
}, {
data: <span class="hljs-built_in">JSON</span>.encode(obj),
error: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(err)</span> </span>{
<span class="hljs-built_in">console</span>.error(err);
}
}); <span class="hljs-comment">// Short form, with more options</span>
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> hilo.post = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(strOpt, callback, oOpt)</span> </span>{
ajaxRequest(<span class="hljs-string">"POST"</span>, strOpt, callback, oOpt);
};</pre></div></div>
</li>
<li id="section-362">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-362">¶</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-363">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-363">¶</a>
</div>
<h3 id="hilo-css-helper-methods">Hilo CSS Helper Methods</h3>
</div>
</li>
<li id="section-364">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-364">¶</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-365">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-365">¶</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-366">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-366">¶</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-367">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-367">¶</a>
</div>
<h2 id="helper-functions">Helper Functions</h2>
</div>
</li>
<li id="section-368">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-368">¶</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-369">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-369">¶</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-370">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-370">¶</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-371">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-371">¶</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-372">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-372">¶</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-373">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-373">¶</a>
</div>
<h2 id="element-selections-etc-">Element Selections, etc.</h2>
</div>
</li>
<li id="section-374">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-374">¶</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-375">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-375">¶</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-376">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-376">¶</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-377">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-377">¶</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-378">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-378">¶</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-379">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-379">¶</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-380">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-380">¶</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-381">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-381">¶</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-382">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-382">¶</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-383">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-383">¶</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-384">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-384">¶</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-385">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-385">¶</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-386">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-386">¶</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-387">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-387">¶</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-388">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-388">¶</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-389">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-389">¶</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-390">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-390">¶</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-391">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-391">¶</a>
</div>
<h3 id="classes-and-ids">Classes and IDs</h3>
</div>
</li>
<li id="section-392">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-392">¶</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-393">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-393">¶</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-394">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-394">¶</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-395">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-395">¶</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-396">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-396">¶</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-397">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-397">¶</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-398">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-398">¶</a>
</div>
<h3 id="hilo-css">Hilo CSS</h3>
</div>
</li>
<li id="section-399">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-399">¶</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-400">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-400">¶</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-401">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-401">¶</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-402">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-402">¶</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-403">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-403">¶</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-404">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-404">¶</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>
<li id="section-405">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-405">¶</a>
</div>
<hr>
</div>
</li>
<li id="section-406">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-406">¶</a>
</div>
<h2 id="events">Events</h2>
</div>
</li>
<li id="section-407">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-407">¶</a>
</div>
</div>
<div class="content"><div class='highlight'><pre>
extend(Dom.prototype, {</pre></div></div>
</li>
<li id="section-408">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-408">¶</a>
</div>
<p>Listen to an event and execute a function when that event happend</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-comment">/**
* Listen to an event and execute a function when that event happend
*
* @for Dom
* @method on
* @param {String} evt Name of event
* @param {Function} fn Function to be executed when the event is fired
* @return {Dom}
* @example
* <div class="code"><pre class="prettyprint">
* $("#box").on("click", function (e) {
* console.log("#box was clicked");
* });
* </pre></div>
* @since 0.1.0
*/</span>
on: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{</pre></div></div>
</li>
<li id="section-409">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-409">¶</a>
</div>
<p>Check if <code>document.addEventListener</code> method
is available and use it if it is</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-built_in">document</span>.addEventListener) {
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(evt, fn)</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.addEventListener(evt, fn, <span class="hljs-literal">false</span>);
});
};</pre></div></div>
</li>
<li id="section-410">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-410">¶</a>
</div>
<p>Otherwise check if <code>document.attachEvent</code>
legacy method is available and use it if it is</p>
</div>
<div class="content"><div class='highlight'><pre> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-built_in">document</span>.attachEvent) {
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(evt, fn)</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.attachEvent(<span class="hljs-string">"on"</span> + evt, fn);
});
};</pre></div></div>
</li>
<li id="section-411">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-411">¶</a>
</div>
<p>Add event the DOM Level 0 Style</p>
</div>
<div class="content"><div class='highlight'><pre> } <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(evt, fn)</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[<span class="hljs-string">"on"</span> + evt] = fn;
});
};
}
}()),</pre></div></div>
</li>
<li id="section-412">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-412">¶</a>
</div>
<p>Stop listening to an event</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-comment">/**
* Stop listening to an event
*
* @for Dom
* @method on
* @param {String} evt Name of event
* @param {Function} fn Function to stop listening to
* @return {Dom}
* @example
* <div class="code"><pre class="prettyprint">
* $("#box").off("click", fn);
* </pre></div>
* @since 0.1.0
*/</span>
off: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">document</span>.removeEventListener) {
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(evt, fn)</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.removeEventListener(evt, fn, <span class="hljs-literal">false</span>);
});
};
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-built_in">document</span>.detachEvent) {
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(evt, fn)</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.detachEvent(<span class="hljs-string">"on"</span> + evt, fn);
});
};
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(evt)</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[<span class="hljs-string">"on"</span> + evt] = <span class="hljs-literal">null</span>;
});
};
}
}()),
<span class="hljs-comment">/**
* Trigger or fire an event
*
* @for Dom
* @method fire
* @param {String} evt Name of event to fire
* @return {Dom}
* @example
* <div class="code"><pre class="prettyprint">
* $("#uploadForm").fire("overload");
* </pre></div>
* @since 0.1.0
*/</span>
fire: (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">document</span>.dispatchEvent) {
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> </span>{
<span class="hljs-keyword">var</span> evt;
<span class="hljs-keyword">try</span> {
evt = <span class="hljs-built_in">document</span>.createEvent(<span class="hljs-string">"Events"</span>);
} <span class="hljs-keyword">catch</span> (e) {
evt = <span class="hljs-built_in">document</span>.createEvent(<span class="hljs-string">"UIEvents"</span>);
}
evt.initUIEvent(event, <span class="hljs-literal">true</span>, <span class="hljs-literal">true</span>, <span class="hljs-built_in">window</span>, <span class="hljs-number">1</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.dispatchEvent(evt);
});
};
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-built_in">document</span>.fireEvent) {
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> </span>{
<span class="hljs-keyword">var</span> evt = <span class="hljs-built_in">document</span>.createEventObject();
evt.button = <span class="hljs-number">1</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.fireEvent(<span class="hljs-string">"on"</span> + event, evt);
});
};
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</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[<span class="hljs-string">"on"</span> + event].call();
});
};
}
}())
});</pre></div></div>
</li>
<li id="section-413">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-413">¶</a>
</div>
<hr>
</div>
</li>
<li id="section-414">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-414">¶</a>
</div>
<h2 id="events-imp-">Events (imp.)</h2>
</div>
</li>
<li id="section-415">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-415">¶</a>
</div>
</div>
<div class="content"><div class='highlight'><pre>
extend(Dom.prototype, {
ready: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(fn)</span> </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.onreadystatechange = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">if</span> (el.readyState = <span class="hljs-string">"complete"</span>) {
fn();
}
};
});
}
});
(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">var</span> evtObj = {}
, impEvts;
impEvts = [
<span class="hljs-string">"blur"</span>,
<span class="hljs-string">"click"</span>,
<span class="hljs-string">"change"</span>,
<span class="hljs-string">"dblclick"</span>,
<span class="hljs-string">"drag"</span>,
<span class="hljs-string">"dragstart"</span>,
<span class="hljs-string">"dragend"</span>,
<span class="hljs-string">"dragenter"</span>,
<span class="hljs-string">"dragleave"</span>,
<span class="hljs-string">"dragover"</span>,
<span class="hljs-string">"drop"</span>,
<span class="hljs-string">"error"</span>,
<span class="hljs-string">"focus"</span>,
<span class="hljs-string">"keyup"</span>,
<span class="hljs-string">"keydown"</span>,
<span class="hljs-string">"keypress"</span>,
<span class="hljs-string">"load"</span>,
<span class="hljs-string">"mousedown"</span>,
<span class="hljs-string">"mouseleave"</span>,
<span class="hljs-string">"mouseenter"</span>,
<span class="hljs-string">"mouseover"</span>,
<span class="hljs-string">"mousemove"</span>,
<span class="hljs-string">"mouseout"</span>,
<span class="hljs-string">"submit"</span>
];
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < impEvts.length; _i += <span class="hljs-number">1</span>) {
evtObj[impEvts[_i]] = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(fn)</span> </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> fn === <span class="hljs-string">"function"</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.on(impEvts[_i], fn);
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.fire(impEvts[_i]);
};
}
extend(Dom.prototype, evtObj);
}());</pre></div></div>
</li>
<li id="section-416">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-416">¶</a>
</div>
<p>These keyborad key mappings will be later used
to enable use of shortcut keys or the like</p>
</div>
<div class="content"><div class='highlight'><pre>
key = {</pre></div></div>
</li>
<li id="section-417">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-417">¶</a>
</div>
<p>Numbers</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-string">"0"</span>: <span class="hljs-number">48</span>,
<span class="hljs-string">"1"</span>: <span class="hljs-number">49</span>,
<span class="hljs-string">"2"</span>: <span class="hljs-number">50</span>,
<span class="hljs-string">"3"</span>: <span class="hljs-number">51</span>,
<span class="hljs-string">"4"</span>: <span class="hljs-number">52</span>,
<span class="hljs-string">"5"</span>: <span class="hljs-number">53</span>,
<span class="hljs-string">"6"</span>: <span class="hljs-number">54</span>,
<span class="hljs-string">"7"</span>: <span class="hljs-number">55</span>,
<span class="hljs-string">"8"</span>: <span class="hljs-number">56</span>,
<span class="hljs-string">"9"</span>: <span class="hljs-number">57</span>,</pre></div></div>
</li>
<li id="section-418">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-418">¶</a>
</div>
<p>Uppercase letters</p>
</div>
<div class="content"><div class='highlight'><pre>
A: <span class="hljs-number">65</span>,
B: <span class="hljs-number">66</span>,
C: <span class="hljs-number">67</span>,
D: <span class="hljs-number">68</span>,
E: <span class="hljs-number">69</span>,
F: <span class="hljs-number">70</span>,
G: <span class="hljs-number">71</span>,
H: <span class="hljs-number">72</span>,
I: <span class="hljs-number">73</span>,
J: <span class="hljs-number">74</span>,
K: <span class="hljs-number">75</span>,
L: <span class="hljs-number">76</span>,
M: <span class="hljs-number">77</span>,
N: <span class="hljs-number">78</span>,
O: <span class="hljs-number">79</span>,
P: <span class="hljs-number">80</span>,
Q: <span class="hljs-number">81</span>,
R: <span class="hljs-number">82</span>,
S: <span class="hljs-number">83</span>,
T: <span class="hljs-number">84</span>,
U: <span class="hljs-number">85</span>,
V: <span class="hljs-number">86</span>,
W: <span class="hljs-number">87</span>,
X: <span class="hljs-number">88</span>,
Y: <span class="hljs-number">89</span>,
Z: <span class="hljs-number">90</span>,</pre></div></div>
</li>
<li id="section-419">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-419">¶</a>
</div>
<p>Lowecase letters</p>
</div>
<div class="content"><div class='highlight'><pre>
a: <span class="hljs-number">97</span>,
b: <span class="hljs-number">98</span>,
c: <span class="hljs-number">99</span>,
d: <span class="hljs-number">100</span>,
e: <span class="hljs-number">101</span>,
f: <span class="hljs-number">102</span>,
g: <span class="hljs-number">103</span>,
h: <span class="hljs-number">104</span>,
i: <span class="hljs-number">105</span>,
j: <span class="hljs-number">106</span>,
k: <span class="hljs-number">107</span>,
l: <span class="hljs-number">108</span>,
m: <span class="hljs-number">109</span>,
n: <span class="hljs-number">110</span>,
o: <span class="hljs-number">111</span>,
p: <span class="hljs-number">112</span>,
q: <span class="hljs-number">113</span>,
r: <span class="hljs-number">114</span>,
s: <span class="hljs-number">115</span>,
t: <span class="hljs-number">116</span>,
u: <span class="hljs-number">117</span>,
v: <span class="hljs-number">118</span>,
w: <span class="hljs-number">119</span>,
x: <span class="hljs-number">120</span>,
y: <span class="hljs-number">121</span>,
z: <span class="hljs-number">122</span>,</pre></div></div>
</li>
<li id="section-420">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-420">¶</a>
</div>
<p>Other Important Keys</p>
</div>
<div class="content"><div class='highlight'><pre>
alt: <span class="hljs-number">18</span>,
caps: <span class="hljs-number">20</span>,
ctrl: <span class="hljs-number">17</span>,
cmd: <span class="hljs-number">17</span>,
enter: <span class="hljs-number">13</span>,
esc: <span class="hljs-number">27</span>,
del: <span class="hljs-number">46</span>,
end: <span class="hljs-number">35</span>,
back: <span class="hljs-number">8</span>,</pre></div></div>
</li>
<li id="section-421">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-421">¶</a>
</div>
<p>Arrows</p>
</div>
<div class="content"><div class='highlight'><pre>
left: <span class="hljs-number">37</span>,
up: <span class="hljs-number">38</span>,
right: <span class="hljs-number">39</span>,
down: <span class="hljs-number">40</span>,</pre></div></div>
</li>
<li id="section-422">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-422">¶</a>
</div>
<p>F-keys</p>
</div>
<div class="content"><div class='highlight'><pre>
f1: <span class="hljs-number">112</span>,
f2: <span class="hljs-number">113</span>,
f3: <span class="hljs-number">114</span>,
f4: <span class="hljs-number">115</span>,
f5: <span class="hljs-number">116</span>,
f6: <span class="hljs-number">117</span>,
f7: <span class="hljs-number">118</span>,
f8: <span class="hljs-number">119</span>,
f9: <span class="hljs-number">120</span>,
f10: <span class="hljs-number">121</span>,
f11: <span class="hljs-number">122</span>,
f12: <span class="hljs-number">123</span>,</pre></div></div>
</li>
<li id="section-423">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-423">¶</a>
</div>
<p>Less-used keys</p>
</div>
<div class="content"><div class='highlight'><pre>
home: <span class="hljs-number">36</span>,
insert: <span class="hljs-number">45</span>,
numlock: <span class="hljs-number">144</span>,</pre></div></div>
</li>
<li id="section-424">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-424">¶</a>
</div>
<p>Symbols</p>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-string">"`"</span>: <span class="hljs-number">222</span>,
<span class="hljs-string">"-"</span>: <span class="hljs-number">189</span>,
<span class="hljs-string">","</span>: <span class="hljs-number">188</span>,
<span class="hljs-string">"."</span>: <span class="hljs-number">190</span>,
<span class="hljs-string">"/"</span>: <span class="hljs-number">191</span>,
<span class="hljs-string">";"</span>: <span class="hljs-number">186</span>,
<span class="hljs-string">"["</span>: <span class="hljs-number">219</span>,
<span class="hljs-string">"\\"</span>: <span class="hljs-number">220</span>,
<span class="hljs-string">"]"</span>: <span class="hljs-number">221</span>,
<span class="hljs-string">"="</span>: <span class="hljs-number">187</span>
};
hilo.keys = key;</pre></div></div>
</li>
<li id="section-425">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-425">¶</a>
</div>
<hr>
</div>
</li>
<li id="section-426">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-426">¶</a>
</div>
<h2 id="effects-fx-">Effects (fx)</h2>
</div>
</li>
<li id="section-427">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-427">¶</a>
</div>
</div>
<div class="content"><div class='highlight'><pre>
extend(Dom.prototype, {
<span class="hljs-comment">/**
* Sets the display property of sel.els. to "" or given value
*
* @for Dom
* @method show
* @param {string} display Value of display prop.
* @return {Dom}
* @example
* <div class="code"><pre class="prettyprint">
* $("p").show();
* </pre></div>
* @since 0.1.0
*/</span>
show: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(display)</span> </span>{
display = display || <span class="hljs-string">""</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.style.display = display;
el.setAttribute(<span class="hljs-string">"aria-hidden"</span>, <span class="hljs-literal">false</span>);
});
},
<span class="hljs-comment">/**
* Sets the display property of sel.els. to "none"
*
* @for Dom
* @method hide
* @return {Dom}
* @example
* <div class="code"><pre class="prettyprint">
* $("p").hide();
* </pre></div>
* @since 0.1.0
*/</span>
hide: <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>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
el.style.display = <span class="hljs-string">"none"</span>;</pre></div></div>
</li>
<li id="section-428">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-428">¶</a>
</div>
<p>ARIA</p>
</div>
<div class="content"><div class='highlight'><pre> el.setAttribute(<span class="hljs-string">"aria-hidden"</span>, <span class="hljs-literal">true</span>);
});
},
<span class="hljs-comment">/**
* Shows hidden elements, hides shown elements
*
* @for Dom
* @method toggle
* @return {Dom}
* @example
* <div class="code"><pre class="prettyprint">
* $("p").toggle();
* </pre></div>
* @since 0.1.0
*/</span>
toggle: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(display)</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">if</span> (el.style.display === <span class="hljs-string">"none"</span>) {
el.style.display = display ? display : <span class="hljs-string">""</span>;</pre></div></div>
</li>
<li id="section-429">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-429">¶</a>
</div>
<p>ARIA</p>
</div>
<div class="content"><div class='highlight'><pre> el.setAttribute(<span class="hljs-string">"aria-hidden"</span>, <span class="hljs-literal">false</span>);
} <span class="hljs-keyword">else</span> {
el.style.display = <span class="hljs-string">"none"</span>;</pre></div></div>
</li>
<li id="section-430">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-430">¶</a>
</div>
<p>ARIA</p>
</div>
<div class="content"><div class='highlight'><pre> el.setAttribute(<span class="hljs-string">"aria-hidden"</span>, <span class="hljs-literal">true</span>);
}
});
},
<span class="hljs-comment">/**
* Sets visibility to "visible"
*
* @for Dom
* @method appear
* @return {Dom}
* @example
* <div class="code"><pre class="prettyprint">
* $("p").appear();
* </pre></div>
* @since 0.1.0
*/</span>
appear: <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>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
el.style.visibility = <span class="hljs-string">"visible"</span>;</pre></div></div>
</li>
<li id="section-431">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-431">¶</a>
</div>
<p>ARIA</p>
</div>
<div class="content"><div class='highlight'><pre> el.setAttribute(<span class="hljs-string">"aria-hidden"</span>, <span class="hljs-literal">false</span>);
});
},
<span class="hljs-comment">/**
* Sets visiblity to "hidden"
*
* @for Dom
* @method disappear
* @return {Dom}
* @example
* <div class="code"><pre class="prettyprint">
* $("p").disappear();
* </pre></div>
* @since 0.1.0
*/</span>
disappear: <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>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
el.style.visibility = <span class="hljs-string">"hidden"</span>;</pre></div></div>
</li>
<li id="section-432">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-432">¶</a>
</div>
<p>ARIA</p>
</div>
<div class="content"><div class='highlight'><pre> el.setAttribute(<span class="hljs-string">"aria-hidden"</span>, <span class="hljs-literal">true</span>);
});
},
<span class="hljs-comment">/**
* Appears a disappeared element, disappears an appeared element
*
* @for Dom
* @method toggleVisibility
* @return {Dom}
* @example
* <div class="code"><pre class="prettyprint">
* $("p").toggleVisibility();
* </pre></div>
* @since 0.1.0
*/</span>
toggleVisibility: <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>.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(el)</span> </span>{
<span class="hljs-keyword">if</span> (el.style.opacity === <span class="hljs-string">"0"</span>) {
el.style.visibility = <span class="hljs-string">"visible"</span>;</pre></div></div>
</li>
<li id="section-433">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-433">¶</a>
</div>
<p>ARIA</p>
</div>
<div class="content"><div class='highlight'><pre> el.setAttribute(<span class="hljs-string">"aria-hidden"</span>, <span class="hljs-literal">true</span>);
} <span class="hljs-keyword">else</span> {
el.style.visibility = <span class="hljs-string">"hidden"</span>;</pre></div></div>
</li>
<li id="section-434">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-434">¶</a>
</div>
<p>ARIA</p>
</div>
<div class="content"><div class='highlight'><pre> el.setAttribute(<span class="hljs-string">"aria-hidden"</span>, <span class="hljs-literal">true</span>);
}
});
},
<span class="hljs-comment">/**
* Animates opacity prop. from 0 to 1 or 1 to 0
*
* @for Dom
* @method fade
* @param {string} inOut Whether "in" or "out"
* @param {number|string} "fast", "slow", "normal" or a number
* @return {Dom}
* @example
* <div class="code"><pre class="prettyprint">
* $("p").fade("in");
* $("p").fade("out");
* $("p").fade("in", 140);
* $("p").fade("out", 100);
* </pre></div>
* @since 0.1.0
*/</span>
fade: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(inOut, timing)</span> </span>{
<span class="hljs-keyword">if</span> (inOut === <span class="hljs-string">"in"</span>) {
<span class="hljs-keyword">this</span>.show();
}
<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> time;
<span class="hljs-keyword">switch</span>(timing) {
<span class="hljs-keyword">case</span> <span class="hljs-string">"slow"</span>:
time = <span class="hljs-number">200</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"normal"</span>:
time = <span class="hljs-number">120</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"fast"</span>:
time = <span class="hljs-number">80</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">default</span>:
time = time || <span class="hljs-number">120</span>;
<span class="hljs-keyword">break</span>;
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">animate</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">var</span> val = <span class="hljs-number">0.3</span>
, end = <span class="hljs-number">1</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">parseFloat</span>(el.style.opacity) === (inOut === <span class="hljs-string">"in"</span> ? <span class="hljs-number">1</span> : <span class="hljs-number">0</span>)) {</pre></div></div>
</li>
<li id="section-435">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-435">¶</a>
</div>
<p>Stop the animation if the opacity is set to the final value</p>
</div>
<div class="content"><div class='highlight'><pre> clearInterval(win.Hilo.temp.anim);
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">if</span> (inOut === <span class="hljs-string">"out"</span>) {
val = -val;
end = <span class="hljs-number">0</span>;
}
el.style.opacity = <span class="hljs-built_in">parseFloat</span>(el.style.opacity || end) + val;
}
}
win.Hilo.temp.anim = setInterval(animate, timing);
});
},
<span class="hljs-comment">/**
* Animates opacity prop. from 0 to 1
*
* @for Dom
* @method fadeIn
* @param {number|string} "fast", "slow", "normal" or a number
* @return {Dom}
* @example
* <div class="code"><pre class="prettyprint">
* $("p").fadeIn();
* $("p").fadeIn(140);
* </pre></div>
* @since 0.1.0
*/</span>
fadeIn: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(timing)</span> </span>{
<span class="hljs-keyword">this</span>.fade(<span class="hljs-string">"in"</span>, timing);
},
<span class="hljs-comment">/**
* Animates opacity prop. from 1 to 0
*
* @for Dom
* @method fadeOut
* @param {number|string} "fast", "slow", "normal" or a number
* @return {Dom}
* @example
* <div class="code"><pre class="prettyprint">
* $("p").fadeOut();
* $("p").fadeOut(140);
* </pre></div>
* @since 0.1.0
*/</span>
fadeOut: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(timing)</span> </span>{
<span class="hljs-keyword">this</span>.fade(<span class="hljs-string">"out"</span>, timing);
}
});
hilo.classify = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">var</span> body = win.Hilo(<span class="hljs-string">"body"</span>)
, classes = [<span class="hljs-string">"js"</span>]
, _i;</pre></div></div>
</li>
<li id="section-436">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-436">¶</a>
</div>
<p>Remove the default no-js class</p>
</div>
<div class="content"><div class='highlight'><pre> body.removeClass(<span class="hljs-string">"no-js"</span>);
<span class="hljs-keyword">if</span> (hilo.browser.chrome) {
classes.push(<span class="hljs-string">"chrome"</span>);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (hilo.browser.firefox) {
classes.push(<span class="hljs-string">"firefox"</span>);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (hilo.browser.safari) {
classes.push(<span class="hljs-string">"safari"</span>);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (hilo.browser.ie) {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">6</span>; _i <= <span class="hljs-number">11</span>; _i++) {
<span class="hljs-keyword">if</span> (hilo.browser.ie <= _i) {
classes.push(<span class="hljs-string">"lte-ie"</span> + _i);
<span class="hljs-keyword">if</span> (hilo.browser.ie < _i) {
classes.push(<span class="hljs-string">"lt-ie"</span> + _i);
}
}
<span class="hljs-keyword">if</span> (hilo.browser.ie >= _i) {
classes.push(<span class="hljs-string">"gte-ie"</span> + _i);
<span class="hljs-keyword">if</span> (hilo.browser.ie > _i) {
classes.push(<span class="hljs-string">"gt-ie"</span> + _i);
}
}
<span class="hljs-keyword">if</span> (hilo.browser.ie === _i) {
classes.push(<span class="hljs-string">"ie"</span> + _i);
}
}
classes.push(<span class="hljs-string">"ie"</span>);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (hilo.browser.opera) {
classes.push(<span class="hljs-string">"opera"</span>);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (hilo.browser.konq) {
classes.push(<span class="hljs-string">"konqueror"</span>);
}
classes.push((<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">switch</span> (hilo.platform.name) {
<span class="hljs-keyword">case</span> <span class="hljs-string">"Windows"</span>:
<span class="hljs-keyword">return</span> <span class="hljs-string">"windows"</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"Mac"</span>:
<span class="hljs-keyword">return</span> <span class="hljs-string">"mac"</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">"Linux"</span>:
<span class="hljs-keyword">return</span> <span class="hljs-string">"linux"</span>;
}
})());
<span class="hljs-keyword">if</span> (hilo.engine.webkit) {
classes.push(<span class="hljs-string">"webkit"</span>);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (hilo.engine.ie) {
classes.push(<span class="hljs-string">"trident"</span>);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (hilo.engine.opera) {
classes.push(<span class="hljs-string">"presto"</span>);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (hilo.engine.gecko) {
classes.push(<span class="hljs-string">"gecko"</span>);
}
classes.push(hilo.browser.name.toLowerCase() + <span class="hljs-built_in">parseInt</span>(hilo.browser.version, <span class="hljs-number">10</span>));
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getBrowserVersion</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> <span class="hljs-built_in">String</span>(hilo.browser.version).replace(<span class="hljs-string">"."</span>, <span class="hljs-string">"-"</span>);
}
<span class="hljs-keyword">if</span> (getBrowserVersion() !== <span class="hljs-built_in">parseInt</span>(hilo.browser.version, <span class="hljs-number">10</span>)) {
classes.push(hilo.browser.name.toLowerCase() + getBrowserVersion());
}
<span class="hljs-keyword">for</span> (_i <span class="hljs-keyword">in</span> hilo.feature) {
<span class="hljs-keyword">if</span> (hilo.feature.hasOwnProperty(_i)) {
<span class="hljs-keyword">if</span> (hilo.feature[_i] === <span class="hljs-literal">true</span>) {
classes.push(_i.toLowerCase());
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (hilo.feature[_i] === <span class="hljs-literal">false</span>) {
classes.push(<span class="hljs-string">"no-"</span> + _i.toLowerCase());
}
}
}
body.addClass(classes);
<span class="hljs-keyword">return</span> classes;
};</pre></div></div>
</li>
<li id="section-437">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-437">¶</a>
</div>
<hr>
</div>
</li>
<li id="section-438">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-438">¶</a>
</div>
<h2 id="more-functionality">More Functionality</h2>
</div>
</li>
<li id="section-439">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-439">¶</a>
</div>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-comment">/**
* NumberObject Class
*
* @constructor
* @class NumberObject
* @param {Number} num Number
* @example
* <div class="code"><pre class="prettyprint">
* new NumberObject(2);
* </pre></div>
* <div class="code"><pre class="prettyprint">
* new NumberObject(Math.PI);
* </pre></div>
* @since 0.1.0
*/</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">NumberObject</span> <span class="hljs-params">(num)</span> </span>{
<span class="hljs-keyword">this</span>.num = num;
}
extend(NumberObject.prototype, {
<span class="hljs-comment">/**
* NumberObject.MAX_INTEGER = 9007199254740991
* The maximum value of a JavaScript integer
*
* @for NumberObject
* @property MAX_INTEGER
* @type Number
* @since 0.1.0
*/</span>
MAX_INTEGER: <span class="hljs-number">9007199254740991</span>,
<span class="hljs-comment">/**
* Epsilon
*
* @for NumberObject
* @property EPSILON
* @type Number
* @since 0.1.0
*/</span>
EPSILON: <span class="hljs-number">2.220446049250313e-16</span>,
<span class="hljs-comment">/**
* Parses integer value from a string or number
*
* @for NumberObject
* @method parseInt
* @return {Number}
* @example
* <div class="code"><pre class="prettyprint">
* new NumberObject(3.5).parseInt() // 3
* </pre></div>
* @since 0.1.0
*/</span>
<span class="hljs-built_in">parseInt</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-built_in">parseInt</span>.call(<span class="hljs-keyword">this</span>, <span class="hljs-keyword">this</span>.num);
},
<span class="hljs-comment">/**
* Parses float point number value from a string or number
*
* @for NumberObject
* @method parseFloat
* @return {Number}
* @example
* <div class="code"><pre class="prettyprint">
* new NumberObject("5.3").parseFloat() // 5.3
* </pre></div>
* @since 0.1.0
*/</span>
<span class="hljs-built_in">parseFloat</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-built_in">parseFloat</span>.call(<span class="hljs-keyword">this</span>, <span class="hljs-keyword">this</span>.num);
},
<span class="hljs-comment">/**
* Returns true if a number is a finite value
*
* @for NumberObject
* @method isFinite
* @return {Bolean} Whether the number is finite
* @example
* <div class="code"><pre class="prettyprint">
* new NumberObject(NaN).isFinite() // false
* new NumberObject(3).isFinite() // true
* </pre></div>
* @since 0.1.0
*/</span>
<span class="hljs-built_in">isFinite</span>: <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">typeof</span> <span class="hljs-keyword">this</span>.num === <span class="hljs-string">'number'</span> && <span class="hljs-built_in">isFinite</span>(<span class="hljs-keyword">this</span>.num);
},
<span class="hljs-comment">/**
* If the number is an integer
*
* @for NumberObject
* @method isInteger
* @return {Number} Whether the number is an integer
* @example
* <div class="code"><pre class="prettyprint">
* new NumberObject(5.3).isInteger() // false
* new NumberObject(4).isInteger() // true
* </pre></div>
* @since 0.1.0
*/</span>
isInteger: <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">typeof</span> <span class="hljs-keyword">this</span>.num === <span class="hljs-string">'number'</span> &&
!<span class="hljs-built_in">isNaN</span>(<span class="hljs-keyword">this</span>.num) &&
<span class="hljs-built_in">isFinite</span>(<span class="hljs-keyword">this</span>.num) &&
<span class="hljs-built_in">parseInt</span>(<span class="hljs-keyword">this</span>.num, <span class="hljs-number">10</span>) === <span class="hljs-keyword">this</span>.num;
},
<span class="hljs-comment">/**
* Returns if the number is NaN (Not a number)
*
* @for NumberObject
* @method isNan
* @return {Number} Whether the number is not a number (NaN)
* @example
* <div class="code"><pre class="prettyprint">
* new NumberObject(5).isNan() // false
* new NumberObject(NaN).isNan() // true
* </pre></div>
* @since 0.1.0
*/</span>
<span class="hljs-built_in">isNaN</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{</pre></div></div>
</li>
<li id="section-440">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-440">¶</a>
</div>
<p>NaN !== NaN, but they are identical.
NaNs are the only non-reflexive value, i.e., if x !== x,
then x is NaN.
isNaN is broken: it converts its argument to number, so
isNaN(‘foo’) => true</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.num !== <span class="hljs-keyword">this</span>.num;
},
<span class="hljs-comment">/**
* Converts ant value to an integer
*
* @for NumberObject
* @method toInteger
* @return {Number} The converted integer
* @example
* <div class="code"><pre class="prettyprint">
* new NumberObject(5).toInteger() // 5
* new NumberObject(NaN).toInteger() // 0
* </pre></div>
* @since 0.1.0
*/</span>
toInteger: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">var</span> number = +<span class="hljs-keyword">this</span>.num;
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">isNaN</span>(number)) {
<span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
}
<span class="hljs-keyword">if</span> (number === <span class="hljs-number">0</span> || !<span class="hljs-built_in">isFinite</span>(number)) {
<span class="hljs-keyword">return</span> number;
}
<span class="hljs-keyword">return</span> sign.call(<span class="hljs-keyword">this</span>, number) * <span class="hljs-built_in">Math</span>.floor(<span class="hljs-built_in">Math</span>.abs(number));
},
sign: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(value)</span> </span>{
sign.call(<span class="hljs-keyword">this</span>, <span class="hljs-keyword">this</span>.num, value);
},
<span class="hljs-comment">/**
* Call a function n times
*
* @for NumberObject
* @method times
* @param {Function} fn The function to be called
* @param {Array} args The arguments to be passed
* @return {Number} The converted integer
* @example
* <div class="code"><pre class="prettyprint">
* var i = 0;
* new NumberObject(100).times(function () {
* console.log(i++);
* });
* </pre></div>
* <div class="code"><pre class="prettyprint">
* new NumberObject(100).times(function () {
* consolee.log
* });
* </pre></div>
* @since 0.1.0
*/</span>
times: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(fn, args)</span> </span>{
<span class="hljs-keyword">var</span> _i = <span class="hljs-number">0</span>;
<span class="hljs-keyword">while</span> (_i < <span class="hljs-keyword">this</span>.num) {
fn.apply(<span class="hljs-keyword">this</span>, args);
_i += <span class="hljs-number">1</span>;
}
}
});</pre></div></div>
</li>
<li id="section-441">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-441">¶</a>
</div>
<h2 id="hilo-extension-api">Hilo Extension API</h2>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-comment">/* Provide Extension API */</span>
extend(hilo, {
Dom: Dom.prototype,
Test: Test.prototype
});
<span class="hljs-comment">/* Set event handler for triggering DOM Events */</span>
doc.onreadystatechange = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">if</span> (doc.readyState === <span class="hljs-string">"complete"</span>) {
<span class="hljs-keyword">for</span> (_i = <span class="hljs-number">0</span>; _i < callbacks.length; _i += <span class="hljs-number">1</span>) {
callbacks[_i]();
}
}
};
<span class="hljs-comment">/* Get the total time took to execute the script */</span>
hilo.perf = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().getTime() - start;</pre></div></div>
</li>
<li id="section-442">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-442">¶</a>
</div>
<p>Finally return Hilo</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> hilo;
}));</pre></div></div>
</li>
</ul>
</div>
</body>
</html>