Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

309 lines (239 sloc) 45.803 kb
<!DOCTYPE html> <html> <head> <title>jquery.sausage.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> jquery.sausage.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> <pre><code>jquery.sausage.js 1.0.0
(c) 2011 Christopher Cliff
Freely distributed under the MIT license.
For all details and documentation:
http://christophercliff.github.com/sausage
</code></pre> </td> <td class="code"> <div class="highlight"><pre><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="kc">undefined</span><span class="p">){</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">widget</span><span class="p">(</span><span class="s1">&#39;cc.sausage&#39;</span><span class="p">,</span> <span class="p">{</span>
</pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h1>Options</h1> </td> <td class="code"> <div class="highlight"><pre>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
</pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <h3>page <code>string</code></h3>
<p>Sets the string to be used to select page elements.</p>
<p>Example:</p>
<pre><code> $(window)
.sausage({
page: '.my-page-selector'
})
;
</code></pre> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">page</span><span class="o">:</span> <span class="s1">&#39;.page&#39;</span><span class="p">,</span>
</pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <h3>content <code>function</code></h3>
<p>Sets the content of the sausage elements. Use <code>i</code> and <code>$page</code> to render content dynamically.</p>
<p>Example:</p>
<pre><code> $(window)
.sausage({
content: function (i, $page) {
return '&lt;div&gt;' + $page.data('name') + '&lt;/div&gt;';
}
})
;
</code></pre> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">content</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">$page</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="s1">&#39;&lt;span class=&quot;sausage-span&quot;&gt;&#39;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="s1">&#39;&lt;/span&gt;&#39;</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">},</span>
</pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <h1>Private Methods</h1> </td> <td class="code"> <div class="highlight"><pre> </pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <h2>._create()</h2> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_create</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">,</span>
<span class="nx">$el</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">element</span><span class="p">;</span>
</pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>Use $el for the outer element.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">$outer</span> <span class="o">=</span> <span class="nx">$el</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <p>Use <code>body</code> for the inner element if the outer element is <code>window</code>. Otherwise, use the first child of <code>$el</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">$inner</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">isWindow</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="mi">0</span><span class="p">))</span> <span class="o">?</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;body&#39;</span><span class="p">)</span> <span class="o">:</span> <span class="nx">$el</span><span class="p">.</span><span class="nx">children</span><span class="p">(</span><span class="s1">&#39;:first-child&#39;</span><span class="p">);</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">$sausages</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;&lt;div class=&quot;sausage-set&quot;/&gt;&#39;</span><span class="p">);</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">sausages</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">$sausages</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">offsets</span> <span class="o">=</span> <span class="p">[];</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">$sausages</span>
<span class="p">.</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">$inner</span><span class="p">)</span>
<span class="p">;</span>
</pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>Trigger the <code>create</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">_trigger</span><span class="p">(</span><span class="s1">&#39;create&#39;</span><span class="p">);</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">},</span>
</pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <h2>._init()</h2> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_init</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
</pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>Stop and destroy if scroll bar is not present.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">$outer</span><span class="p">.</span><span class="nx">height</span><span class="p">()</span> <span class="o">&gt;=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">$inner</span><span class="p">.</span><span class="nx">height</span><span class="p">())</span>
<span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">destroy</span><span class="p">();</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">draw</span><span class="p">();</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">_update</span><span class="p">();</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">_events</span><span class="p">();</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">_delegates</span><span class="p">();</span>
</pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <p>Add a CSS class for styling purposes.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">$sausages</span>
<span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">&#39;sausage-set-init&#39;</span><span class="p">)</span>
<span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">blocked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
</pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>Trigger the <code>init</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">_trigger</span><span class="p">(</span><span class="s1">&#39;init&#39;</span><span class="p">);</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">},</span>
</pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <h2>._events()</h2> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_events</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">hasScrolled</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">)</span>
<span class="p">.</span><span class="nx">resize</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">draw</span><span class="p">();</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">scroll</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">hasScrolled</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">})</span>
<span class="p">;</span>
</pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p><a href="http://ejohn.org/blog/learning-from-twitter/">Prevent crazy amounts of scroll events from being fired</a> by setting an interval and listening.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">hasScrolled</span><span class="p">)</span>
<span class="p">{</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">hasScrolled</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">_update</span><span class="p">();</span>
<span class="p">},</span> <span class="mi">250</span><span class="p">);</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">},</span>
</pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <h2>._getCurrent()</h2> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_getCurrent</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">,</span>
<span class="nx">st</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">$outer</span><span class="p">.</span><span class="nx">scrollTop</span><span class="p">()</span> <span class="o">+</span> <span class="nx">self</span><span class="p">.</span><span class="nx">_getHandleHeight</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">$outer</span><span class="p">,</span> <span class="nx">self</span><span class="p">.</span><span class="nx">$inner</span><span class="p">)</span><span class="o">/</span><span class="mi">4</span><span class="p">,</span>
<span class="nx">h_win</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">$outer</span><span class="p">.</span><span class="nx">height</span><span class="p">(),</span>
<span class="nx">h_doc</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">$inner</span><span class="p">.</span><span class="nx">height</span><span class="p">(),</span>
<span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">for</span> <span class="p">(</span><span class="nx">l</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">offsets</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">l</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span>
<span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">offsets</span><span class="p">[</span><span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">])</span>
<span class="p">{</span>
<span class="k">return</span> <span class="nx">i</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">st</span> <span class="o">&lt;=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">offsets</span><span class="p">[</span><span class="nx">i</span><span class="p">])</span>
<span class="p">{</span>
<span class="k">return</span> <span class="nx">i</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">st</span> <span class="o">&gt;</span> <span class="nx">self</span><span class="p">.</span><span class="nx">offsets</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">&amp;&amp;</span> <span class="nx">st</span> <span class="o">&lt;=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">offsets</span><span class="p">[</span><span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">])</span>
<span class="p">{</span>
<span class="k">return</span> <span class="nx">i</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">i</span><span class="p">;</span>
<span class="p">},</span>
</pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <h2>._delegates()</h2> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_delegates</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">$sausages</span>
<span class="p">.</span><span class="nx">delegate</span><span class="p">(</span><span class="s1">&#39;.sausage&#39;</span><span class="p">,</span> <span class="s1">&#39;hover&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">blocked</span><span class="p">)</span>
<span class="p">{</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
<span class="p">.</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">&#39;sausage-hover&#39;</span><span class="p">)</span>
<span class="p">;</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">delegate</span><span class="p">(</span><span class="s1">&#39;.sausage&#39;</span><span class="p">,</span> <span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">blocked</span><span class="p">)</span>
<span class="p">{</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">$sausage</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">),</span>
<span class="nx">val</span> <span class="o">=</span> <span class="nx">$sausage</span><span class="p">.</span><span class="nx">index</span><span class="p">(),</span>
<span class="nx">o</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">$inner</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">page</span><span class="p">).</span><span class="nx">eq</span><span class="p">(</span><span class="nx">val</span><span class="p">).</span><span class="nx">offset</span><span class="p">().</span><span class="nx">top</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">$outer</span>
<span class="p">.</span><span class="nx">scrollTop</span><span class="p">(</span><span class="nx">o</span><span class="p">)</span>
<span class="p">;</span>
</pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <p>Trigger the <code>onClick</code> event.</p>
<p>Example:</p>
<pre><code> $(window)
.sausage({
onClick: function (e, o) {
alert('You clicked the sausage at index: ' + o.i);
}
})
;
</code></pre> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">_trigger</span><span class="p">(</span><span class="s1">&#39;onClick&#39;</span><span class="p">,</span> <span class="nx">e</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">$sausage</span><span class="o">:</span> <span class="nx">$sausage</span><span class="p">,</span>
<span class="nx">i</span><span class="o">:</span> <span class="nx">val</span>
<span class="p">});</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">$sausage</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="s1">&#39;current&#39;</span><span class="p">))</span>
<span class="p">{</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
</pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <p>Trigger the <code>onUpdate</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">_trigger</span><span class="p">(</span><span class="s1">&#39;onUpdate&#39;</span><span class="p">,</span> <span class="nx">e</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">$sausage</span><span class="o">:</span> <span class="nx">$sausage</span><span class="p">,</span>
<span class="nx">i</span><span class="o">:</span> <span class="nx">val</span>
<span class="p">});</span>
<span class="p">})</span>
<span class="p">;</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">},</span>
</pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <h2>._update()</h2> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_update</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="nx">i</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">_getCurrent</span><span class="p">(),</span>
<span class="nx">c</span> <span class="o">=</span> <span class="s1">&#39;sausage-current&#39;</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">i</span> <span class="o">===</span> <span class="nx">self</span><span class="p">.</span><span class="nx">current</span> <span class="o">||</span> <span class="nx">self</span><span class="p">.</span><span class="nx">blocked</span><span class="p">)</span>
<span class="p">{</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">current</span> <span class="o">=</span> <span class="nx">i</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">$sausages</span><span class="p">.</span><span class="nx">children</span><span class="p">().</span><span class="nx">eq</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span>
<span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="nx">c</span><span class="p">)</span>
<span class="p">.</span><span class="nx">siblings</span><span class="p">()</span>
<span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="nx">c</span><span class="p">)</span>
<span class="p">;</span>
</pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p>Trigger the <code>update</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">_trigger</span><span class="p">(</span><span class="s1">&#39;update&#39;</span><span class="p">);</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">},</span>
</pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <h3>._getHandleHeight()</h3> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_getHandleHeight</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">$outer</span><span class="p">,</span> <span class="nx">$inner</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">h_outer</span> <span class="o">=</span> <span class="nx">$outer</span><span class="p">.</span><span class="nx">height</span><span class="p">(),</span>
<span class="nx">h_inner</span> <span class="o">=</span> <span class="nx">$inner</span><span class="p">.</span><span class="nx">height</span><span class="p">();</span>
<span class="k">return</span> <span class="nx">h_outer</span><span class="o">/</span><span class="nx">h_inner</span><span class="o">*</span><span class="nx">h_outer</span><span class="p">;</span>
<span class="p">},</span>
</pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <h1>Public Methods</h1> </td> <td class="code"> <div class="highlight"><pre> </pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <h3>draw <code>.sausage("draw")</code></h3>
<p>Creates the sausage UI elements.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">draw</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">,</span>
<span class="nx">h_win</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">$outer</span><span class="p">.</span><span class="nx">height</span><span class="p">(),</span>
<span class="nx">h_doc</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">$inner</span><span class="p">.</span><span class="nx">height</span><span class="p">(),</span>
<span class="nx">$items</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">$inner</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">page</span><span class="p">),</span>
<span class="nx">$page</span><span class="p">,</span>
<span class="nx">s</span> <span class="o">=</span> <span class="p">[],</span>
<span class="nx">offset_p</span><span class="p">,</span>
<span class="nx">offset_s</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">offsets</span> <span class="o">=</span> <span class="p">[];</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">count</span> <span class="o">=</span> <span class="nx">$items</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
</pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</a> </div> <p>Detach from DOM while making changes.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">$sausages</span>
<span class="p">.</span><span class="nx">detach</span><span class="p">()</span>
<span class="p">.</span><span class="nx">empty</span><span class="p">()</span>
<span class="p">;</span>
</pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">&#182;</a> </div> <p>Calculate the element heights and push to an array.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">self</span><span class="p">.</span><span class="nx">count</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span>
<span class="p">{</span>
<span class="nx">$page</span> <span class="o">=</span> <span class="nx">$items</span><span class="p">.</span><span class="nx">eq</span><span class="p">(</span><span class="nx">i</span><span class="p">);</span>
<span class="nx">offset_p</span> <span class="o">=</span> <span class="nx">$page</span><span class="p">.</span><span class="nx">offset</span><span class="p">();</span>
<span class="nx">offset_s</span> <span class="o">=</span> <span class="nx">offset_p</span><span class="p">.</span><span class="nx">top</span><span class="o">/</span><span class="nx">h_doc</span><span class="o">*</span><span class="nx">h_win</span><span class="p">;</span>
<span class="nx">s</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;&lt;div class=&quot;sausage&#39;</span> <span class="o">+</span> <span class="p">((</span><span class="nx">i</span> <span class="o">===</span> <span class="nx">self</span><span class="p">.</span><span class="nx">current</span><span class="p">)</span> <span class="o">?</span> <span class="s1">&#39; sausage-current&#39;</span> <span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">)</span> <span class="o">+</span> <span class="s1">&#39;&quot; style=&quot;height:&#39;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">$page</span><span class="p">.</span><span class="nx">outerHeight</span><span class="p">()</span><span class="o">/</span><span class="nx">h_doc</span><span class="o">*</span><span class="nx">h_win</span><span class="p">)</span> <span class="o">+</span> <span class="s1">&#39;px;top:&#39;</span> <span class="o">+</span> <span class="nx">offset_s</span> <span class="o">+</span> <span class="s1">&#39;px;&quot;&gt;&#39;</span> <span class="o">+</span> <span class="nx">self</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">content</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">$page</span><span class="p">)</span> <span class="o">+</span> <span class="s1">&#39;&lt;/div&gt;&#39;</span><span class="p">);</span>
</pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <p>Create <code>self.offsets</code> for calculating current sausage.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">offsets</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">offset_p</span><span class="p">.</span><span class="nx">top</span><span class="p">);</span>
<span class="p">}</span>
</pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <p>Use Array.join() for speed.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">sausages</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">s</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
</pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">&#182;</a> </div> <p>And reattach.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">$sausages</span>
<span class="p">.</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">$inner</span><span class="p">)</span>
<span class="p">;</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">},</span>
</pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">&#182;</a> </div> <h3>block <code>.sausage("block")</code></h3>
<p>Blocks the UI to prevent users from interacting with the sausage UI. Useful when loading data and updating the DOM.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">block</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">,</span>
<span class="nx">c</span> <span class="o">=</span> <span class="s1">&#39;sausage-set-blocked&#39;</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">blocked</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
</pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">&#182;</a> </div> <p>Add a CSS class for styling purposes.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">$sausages</span>
<span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="nx">c</span><span class="p">)</span>
<span class="p">;</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">},</span>
</pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">&#182;</a> </div> <h3>unblock <code>.sausage("unblock")</code></h3>
<p>Unblocks the UI once loading and DOM manipulation are complete.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">unblock</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">,</span>
<span class="nx">c</span> <span class="o">=</span> <span class="s1">&#39;sausage-set-blocked&#39;</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">$sausages</span>
<span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="nx">c</span><span class="p">)</span>
<span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">blocked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">},</span>
</pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">&#182;</a> </div> <h3>destroy <code>.sausage("destroy")</code></h3>
<p>Removes the sausage instance from the DOM.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">destroy</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">$sausages</span>
<span class="p">.</span><span class="nx">remove</span><span class="p">()</span>
<span class="p">;</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">);</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
Jump to Line
Something went wrong with that request. Please try again.