Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
tree: 50db24a658
Fetching contributors…

Cannot retrieve contributors at this time

352 lines (266 sloc) 49.405 kB
<!DOCTYPE html> <html> <head> <title>stitches.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> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="file.html"> file.js </a> <a class="source" href="icon.html"> icon.js </a> <a class="source" href="icons.html"> icons.js </a> <a class="source" href="page.html"> page.js </a> <a class="source" href="stitches.html"> stitches.js </a> <a class="source" href="tmpl.html"> tmpl.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> stitches.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> <h2>Stitches - HTML5 Sprite Sheet Generator</h2>
<p><a href="http://draeton.github.com/stitches">http://draeton.github.com/stitches</a></p>
<p>Copyright 2011, Matthew Cobbs
Licensed under the MIT license.</p> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*global jQuery, Stitches, Modernizr */</span>
<span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nb">window</span><span class="p">,</span> <span class="nx">$</span><span class="p">,</span> <span class="nx">Modernizr</span><span class="p">)</span> <span class="p">{</span>
<span class="s2">&quot;use strict&quot;</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> <h2>Stitches namespace</h2>
<p>Holds all methods</p> </td> <td class="code"> <div class="highlight"><pre>
<span class="kd">var</span> <span class="nx">S</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">Stitches</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="cm">/* Some configuration defaults */</span>
<span class="kd">var</span> <span class="nx">defaults</span> <span class="o">=</span> <span class="p">{</span>
<span class="s2">&quot;jsdir&quot;</span><span class="o">:</span> <span class="s2">&quot;js&quot;</span><span class="p">,</span>
<span class="s2">&quot;prefix&quot;</span><span class="o">:</span> <span class="s2">&quot;sprite&quot;</span><span class="p">,</span>
<span class="s2">&quot;padding&quot;</span><span class="o">:</span> <span class="mi">10</span><span class="p">,</span>
<span class="s2">&quot;dataURI&quot;</span><span class="o">:</span> <span class="kc">false</span>
<span class="p">};</span>
<span class="k">return</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>init</h3>
<p>Readies everything for user interaction.</p>
<pre><code>@param {jQuery} $elem A wrapped DOM node
@param {Object} config An optional settings object
</code></pre> </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="nx">$elem</span><span class="p">,</span> <span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">settings</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">({},</span> <span class="nx">defaults</span><span class="p">,</span> <span class="nx">config</span><span class="p">);</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">iconQueue</span> <span class="o">=</span> <span class="p">[];</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">topics</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">Page</span><span class="p">.</span><span class="nx">$elem</span> <span class="o">=</span> <span class="nx">$elem</span><span class="p">;</span>
<span class="cm">/* setup subscriptions */</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;page.error&quot;</span><span class="p">,</span> <span class="nx">S</span><span class="p">.</span><span class="nx">Page</span><span class="p">.</span><span class="nx">errorHandler</span><span class="p">);</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;page.init.done&quot;</span><span class="p">,</span> <span class="nx">S</span><span class="p">.</span><span class="nx">Page</span><span class="p">.</span><span class="nx">fetchTemplates</span><span class="p">);</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;page.templates.done&quot;</span><span class="p">,</span> <span class="nx">S</span><span class="p">.</span><span class="nx">Page</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;page.render.done&quot;</span><span class="p">,</span> <span class="nx">S</span><span class="p">.</span><span class="nx">checkAPIs</span><span class="p">);</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;page.apis.done&quot;</span><span class="p">,</span> <span class="nx">S</span><span class="p">.</span><span class="nx">Page</span><span class="p">.</span><span class="nx">bindDragAndDrop</span><span class="p">);</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;page.apis.done&quot;</span><span class="p">,</span> <span class="nx">S</span><span class="p">.</span><span class="nx">Page</span><span class="p">.</span><span class="nx">bindButtons</span><span class="p">);</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;page.apis.done&quot;</span><span class="p">,</span> <span class="nx">S</span><span class="p">.</span><span class="nx">Page</span><span class="p">.</span><span class="nx">bindCabinet</span><span class="p">);</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;page.apis.done&quot;</span><span class="p">,</span> <span class="nx">S</span><span class="p">.</span><span class="nx">Page</span><span class="p">.</span><span class="nx">bindOptions</span><span class="p">);</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;page.apis.done&quot;</span><span class="p">,</span> <span class="nx">S</span><span class="p">.</span><span class="nx">Page</span><span class="p">.</span><span class="nx">subscribe</span><span class="p">);</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;page.drop.done&quot;</span><span class="p">,</span> <span class="nx">S</span><span class="p">.</span><span class="nx">File</span><span class="p">.</span><span class="nx">queueFiles</span><span class="p">);</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;file.queue.done&quot;</span><span class="p">,</span> <span class="nx">S</span><span class="p">.</span><span class="nx">File</span><span class="p">.</span><span class="nx">queueIcons</span><span class="p">);</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;file.icon.done&quot;</span><span class="p">,</span> <span class="nx">S</span><span class="p">.</span><span class="nx">Page</span><span class="p">.</span><span class="nx">addIcon</span><span class="p">);</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;file.remove.done&quot;</span><span class="p">,</span> <span class="nx">S</span><span class="p">.</span><span class="nx">Page</span><span class="p">.</span><span class="nx">removeIcon</span><span class="p">);</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;file.unqueue&quot;</span><span class="p">,</span> <span class="nx">S</span><span class="p">.</span><span class="nx">File</span><span class="p">.</span><span class="nx">unqueueIcon</span><span class="p">);</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;file.unqueue.all&quot;</span><span class="p">,</span> <span class="nx">S</span><span class="p">.</span><span class="nx">File</span><span class="p">.</span><span class="nx">unqueueAllIcons</span><span class="p">);</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;sprite.generate&quot;</span><span class="p">,</span> <span class="nx">S</span><span class="p">.</span><span class="nx">generateStitches</span><span class="p">);</span>
<span class="cm">/* notify */</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">pub</span><span class="p">(</span><span class="s2">&quot;page.init.done&quot;</span><span class="p">);</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>sub</h3>
<p>Subscribe to a topic</p>
<pre><code>@param {String} topic The subscription topic name
@param {Function} fn A callback to fire
</code></pre> </td> <td class="code"> <div class="highlight"><pre>
<span class="nx">sub</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">topic</span><span class="p">,</span> <span class="nx">fn</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">callbacks</span> <span class="o">=</span> <span class="nx">S</span><span class="p">.</span><span class="nx">topics</span><span class="p">[</span><span class="nx">topic</span><span class="p">]</span> <span class="o">||</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Callbacks</span><span class="p">(</span><span class="s2">&quot;stopOnFalse&quot;</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">fn</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">callbacks</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">fn</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">topics</span><span class="p">[</span><span class="nx">topic</span><span class="p">]</span> <span class="o">=</span> <span class="nx">callbacks</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> <h3>unsub</h3>
<p>Unsubscribe from a topic</p>
<pre><code>@param {String} topic The subscription topic name
@param {Function} fn A callback to remove
</code></pre> </td> <td class="code"> <div class="highlight"><pre>
<span class="nx">unsub</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">topic</span><span class="p">,</span> <span class="nx">fn</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">callbacks</span> <span class="o">=</span> <span class="nx">S</span><span class="p">.</span><span class="nx">topics</span><span class="p">[</span><span class="nx">topic</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">callbacks</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">callbacks</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="nx">fn</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span>
</pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <h3>pub</h3>
<p>Publish a topic</p>
<pre><code>@param {String} topic The subscription topic name
</code></pre> </td> <td class="code"> <div class="highlight"><pre>
<span class="nx">pub</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">topic</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">callbacks</span> <span class="o">=</span> <span class="nx">S</span><span class="p">.</span><span class="nx">topics</span><span class="p">[</span><span class="nx">topic</span><span class="p">],</span>
<span class="nx">args</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">arguments</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">callbacks</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">callbacks</span><span class="p">.</span><span class="nx">fire</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">callbacks</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="p">}</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> <h3>checkAPIs</h3>
<p>Load supporting libraries for browsers with no native support. Uses
Modernizr to check for drag-and-drop, FileReader, and canvas
functionality.</p> </td> <td class="code"> <div class="highlight"><pre>
<span class="nx">checkAPIs</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">Modernizr</span><span class="p">.</span><span class="nx">load</span><span class="p">([</span>
<span class="p">{</span>
<span class="nx">test</span><span class="o">:</span> <span class="k">typeof</span> <span class="nx">FileReader</span> <span class="o">!==</span> <span class="s2">&quot;undefined&quot;</span> <span class="o">&amp;&amp;</span> <span class="nx">Modernizr</span><span class="p">.</span><span class="nx">draganddrop</span><span class="p">,</span>
<span class="nx">nope</span><span class="o">:</span> <span class="nx">S</span><span class="p">.</span><span class="nx">settings</span><span class="p">.</span><span class="nx">jsdir</span> <span class="o">+</span> <span class="s2">&quot;/dropfile/dropfile.js&quot;</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="nx">test</span><span class="o">:</span> <span class="nx">Modernizr</span><span class="p">.</span><span class="nx">canvas</span><span class="p">,</span>
<span class="nx">nope</span><span class="o">:</span> <span class="nx">S</span><span class="p">.</span><span class="nx">settings</span><span class="p">.</span><span class="nx">jsdir</span> <span class="o">+</span> <span class="s2">&quot;/flashcanvas/flashcanvas.js&quot;</span><span class="p">,</span>
<span class="nx">complete</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">FileReader</span> <span class="o">!==</span> <span class="s2">&quot;undefined&quot;</span> <span class="o">&amp;&amp;</span> <span class="nx">Modernizr</span><span class="p">.</span><span class="nx">draganddrop</span> <span class="o">&amp;&amp;</span> <span class="nx">Modernizr</span><span class="p">.</span><span class="nx">canvas</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">pub</span><span class="p">(</span><span class="s2">&quot;page.apis.done&quot;</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">pub</span><span class="p">(</span><span class="s2">&quot;page.error&quot;</span><span class="p">,</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">&quot;Required APIs are not present.&quot;</span><span class="p">));</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">]);</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> <h3>generateStitches</h3>
<p>Positions all of the icons from the $filelist on the canvas;
crate the sprite link and the stylesheet link;
updates button state</p>
<pre><code>@param {[Icon]} looseIcons An Icon array of images to place
</code></pre> </td> <td class="code"> <div class="highlight"><pre>
<span class="nx">generateStitches</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">looseIcons</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">placedIcons</span> <span class="o">=</span> <span class="nx">S</span><span class="p">.</span><span class="nx">positionImages</span><span class="p">(</span><span class="nx">looseIcons</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">sprite</span> <span class="o">=</span> <span class="nx">S</span><span class="p">.</span><span class="nx">makeStitches</span><span class="p">(</span><span class="nx">placedIcons</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">stylesheet</span> <span class="o">=</span> <span class="nx">S</span><span class="p">.</span><span class="nx">makeStylesheet</span><span class="p">(</span><span class="nx">placedIcons</span><span class="p">,</span> <span class="nx">sprite</span><span class="p">);</span>
<span class="cm">/* notify */</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">pub</span><span class="p">(</span><span class="s2">&quot;sprite.generate.done&quot;</span><span class="p">,</span> <span class="nx">sprite</span><span class="p">,</span> <span class="nx">stylesheet</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> <h3>positionImages</h3>
<p>Position all of the images in the <code>looseIcons</code> array within the canvas</p>
<pre><code>@param {[Icon]} looseIcons An Icon array of images to place
@return {[Icon]} The placed images array
</code></pre> </td> <td class="code"> <div class="highlight"><pre>
<span class="nx">positionImages</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">looseIcons</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">placedIcons</span> <span class="o">=</span> <span class="p">[];</span>
<span class="cm">/* reset position of icons */</span>
<span class="nx">$</span><span class="p">(</span><span class="nx">looseIcons</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">idx</span><span class="p">,</span> <span class="nx">icon</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">icon</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">icon</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="nx">icon</span><span class="p">.</span><span class="nx">isPlaced</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">});</span>
<span class="cm">/* reverse sort by area */</span>
<span class="nx">looseIcons</span> <span class="o">=</span> <span class="nx">looseIcons</span><span class="p">.</span><span class="nx">sort</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">b</span><span class="p">.</span><span class="nx">area</span> <span class="o">===</span> <span class="nx">a</span><span class="p">.</span><span class="nx">area</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">b</span><span class="p">.</span><span class="nx">name</span> <span class="o">&gt;</span> <span class="nx">a</span><span class="p">.</span><span class="nx">name</span> <span class="o">?</span> <span class="mi">1</span> <span class="o">:</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">b</span><span class="p">.</span><span class="nx">area</span> <span class="o">-</span> <span class="nx">a</span><span class="p">.</span><span class="nx">area</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="cm">/* find the ideal sprite for this set of icons */</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">canvas</span> <span class="o">=</span> <span class="nx">S</span><span class="p">.</span><span class="nx">Icons</span><span class="p">.</span><span class="nx">idealCanvas</span><span class="p">(</span><span class="nx">looseIcons</span><span class="p">);</span>
<span class="cm">/* try to place all of the icons on the ideal canvas */</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">Icons</span><span class="p">.</span><span class="nx">placeIcons</span><span class="p">(</span><span class="nx">looseIcons</span><span class="p">,</span> <span class="nx">placedIcons</span><span class="p">,</span> <span class="nx">S</span><span class="p">.</span><span class="nx">canvas</span><span class="p">);</span>
<span class="cm">/* trim empty edges */</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">Icons</span><span class="p">.</span><span class="nx">cropCanvas</span><span class="p">(</span><span class="nx">placedIcons</span><span class="p">,</span> <span class="nx">S</span><span class="p">.</span><span class="nx">canvas</span><span class="p">);</span>
<span class="cm">/* notify and return */</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">pub</span><span class="p">(</span><span class="s2">&quot;sprite.position.done&quot;</span><span class="p">,</span> <span class="nx">placedIcons</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">placedIcons</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> <h3>makeStitches</h3>
<p>Draw images on canvas</p>
<pre><code>@param {[Icon]} The placed images array
@return {String} The sprite image data URL
</code></pre> </td> <td class="code"> <div class="highlight"><pre>
<span class="nx">makeStitches</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">placedIcons</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">context</span><span class="p">,</span> <span class="nx">data</span><span class="p">;</span>
<span class="cm">/* this block often fails as a result of the cross-</span>
<span class="cm"> domain blocking in browses for access to write</span>
<span class="cm"> image data to the canvas */</span>
<span class="k">try</span> <span class="p">{</span>
<span class="nx">context</span> <span class="o">=</span> <span class="nx">S</span><span class="p">.</span><span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="nx">placedIcons</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">idx</span><span class="p">,</span> <span class="nx">icon</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">context</span><span class="p">.</span><span class="nx">drawImage</span><span class="p">(</span><span class="nx">icon</span><span class="p">.</span><span class="nx">image</span><span class="p">,</span> <span class="nx">icon</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span> <span class="nx">icon</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span>
<span class="p">});</span>
<span class="cm">/* create image link */</span>
<span class="nx">data</span> <span class="o">=</span> <span class="nx">S</span><span class="p">.</span><span class="nx">canvas</span><span class="p">.</span><span class="nx">toDataURL</span><span class="p">(</span><span class="s2">&quot;image/png&quot;</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">pub</span><span class="p">(</span><span class="s2">&quot;page.error&quot;</span><span class="p">,</span> <span class="nx">e</span><span class="p">);</span>
<span class="p">}</span>
<span class="cm">/* notify and return */</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">pub</span><span class="p">(</span><span class="s2">&quot;sprite.image.done&quot;</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">data</span><span class="p">;</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> <h3>makeStylesheet</h3>
<p>Create stylesheet text</p>
<pre><code>@param {[Icon]} The placed images array
@param {String} The sprite data URI string
@return {String} The sprite stylesheet
</code></pre> </td> <td class="code"> <div class="highlight"><pre>
<span class="nx">makeStylesheet</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">placedIcons</span><span class="p">,</span> <span class="nx">sprite</span><span class="p">)</span> <span class="p">{</span>
<span class="cm">/* sort by name for css output */</span>
<span class="nx">placedIcons</span> <span class="o">=</span> <span class="nx">placedIcons</span><span class="p">.</span><span class="nx">sort</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span><span class="p">.</span><span class="nx">name</span> <span class="o">&lt;</span> <span class="nx">b</span><span class="p">.</span><span class="nx">name</span> <span class="o">?</span> <span class="o">-</span><span class="mi">1</span> <span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">prefix</span> <span class="o">=</span> <span class="nx">S</span><span class="p">.</span><span class="nx">settings</span><span class="p">.</span><span class="nx">prefix</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">backgroundImage</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">S</span><span class="p">.</span><span class="nx">settings</span><span class="p">.</span><span class="nx">dataURI</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">backgroundImage</span> <span class="o">=</span> <span class="nx">sprite</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">backgroundImage</span> <span class="o">=</span> <span class="s2">&quot;download.png&quot;</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">css</span> <span class="o">=</span> <span class="p">[</span>
<span class="s2">&quot;.&quot;</span> <span class="o">+</span> <span class="nx">prefix</span> <span class="o">+</span> <span class="s2">&quot; {&quot;</span><span class="p">,</span>
<span class="s2">&quot; background: url(&quot;</span> <span class="o">+</span> <span class="nx">backgroundImage</span> <span class="o">+</span> <span class="s2">&quot;) no-repeat;&quot;</span><span class="p">,</span>
<span class="s2">&quot;}\n&quot;</span>
<span class="p">];</span>
<span class="nx">$</span><span class="p">(</span><span class="nx">placedIcons</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">idx</span><span class="p">,</span> <span class="nx">icon</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">css</span> <span class="o">=</span> <span class="nx">css</span><span class="p">.</span><span class="nx">concat</span><span class="p">([</span>
<span class="s2">&quot;.&quot;</span> <span class="o">+</span> <span class="nx">prefix</span> <span class="o">+</span> <span class="s2">&quot;-&quot;</span> <span class="o">+</span> <span class="nx">icon</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="s2">&quot; {&quot;</span><span class="p">,</span>
<span class="s2">&quot; width: &quot;</span> <span class="o">+</span> <span class="nx">icon</span><span class="p">.</span><span class="nx">image</span><span class="p">.</span><span class="nx">width</span> <span class="o">+</span> <span class="s2">&quot;px;&quot;</span><span class="p">,</span>
<span class="s2">&quot; height: &quot;</span> <span class="o">+</span> <span class="nx">icon</span><span class="p">.</span><span class="nx">image</span><span class="p">.</span><span class="nx">height</span> <span class="o">+</span> <span class="s2">&quot;px;&quot;</span><span class="p">,</span>
<span class="s2">&quot; background-position: -&quot;</span> <span class="o">+</span> <span class="nx">icon</span><span class="p">.</span><span class="nx">x</span> <span class="o">+</span> <span class="s2">&quot;px -&quot;</span> <span class="o">+</span> <span class="nx">icon</span><span class="p">.</span><span class="nx">y</span> <span class="o">+</span> <span class="s2">&quot;px;&quot;</span><span class="p">,</span>
<span class="s2">&quot;}\n&quot;</span>
<span class="p">]);</span>
<span class="p">});</span>
<span class="cm">/* create stylesheet link */</span>
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="s2">&quot;data:text/plain,&quot;</span> <span class="o">+</span> <span class="nb">encodeURIComponent</span><span class="p">(</span><span class="nx">css</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s2">&quot;\n&quot;</span><span class="p">));</span>
<span class="cm">/* notify and return */</span>
<span class="nx">S</span><span class="p">.</span><span class="nx">pub</span><span class="p">(</span><span class="s2">&quot;sprite.stylesheet.done&quot;</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">data</span><span class="p">;</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> <h3>dataToObjectURL</h3>
<p>Convert base64 data or raw binary data to an object URL
See: http://stackoverflow.com/a/5100158/230483</p>
<pre><code>@param {String} dataURI
@return {String} The object URL
</code></pre> </td> <td class="code"> <div class="highlight"><pre>
<span class="nx">dataToObjectURL</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">dataURI</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">dataParts</span> <span class="o">=</span> <span class="nx">dataURI</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;,&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">byteString</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>convert base64 to raw binary data held in a string</p> </td> <td class="code"> <div class="highlight"><pre>
<span class="k">if</span> <span class="p">(</span><span class="nx">dataParts</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;base64&#39;</span><span class="p">)</span> <span class="o">&gt;=</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">byteString</span> <span class="o">=</span> <span class="nx">atob</span><span class="p">(</span><span class="nx">dataParts</span><span class="p">[</span><span class="mi">1</span><span class="p">]);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">byteString</span> <span class="o">=</span> <span class="nx">unescape</span><span class="p">(</span><span class="nx">dataParts</span><span class="p">[</span><span class="mi">1</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> <p>separate out the mime component</p> </td> <td class="code"> <div class="highlight"><pre>
<span class="kd">var</span> <span class="nx">mimeString</span> <span class="o">=</span> <span class="nx">dataParts</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;:&#39;</span><span class="p">)[</span><span class="mi">1</span><span class="p">].</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;;&#39;</span><span class="p">)[</span><span class="mi">0</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>write the bytes of the string to an ArrayBuffer</p> </td> <td class="code"> <div class="highlight"><pre>
<span class="kd">var</span> <span class="nx">bl</span> <span class="o">=</span> <span class="nx">byteString</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">ab</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ArrayBuffer</span><span class="p">(</span><span class="nx">bl</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">ia</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Uint8Array</span><span class="p">(</span><span class="nx">ab</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">i</span><span class="p">;</span>
<span class="k">for</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="nx">i</span> <span class="o">&lt;</span> <span class="nx">bl</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">ia</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">byteString</span><span class="p">.</span><span class="nx">charCodeAt</span><span class="p">(</span><span class="nx">i</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> <p>get the blob and create an object URL</p> </td> <td class="code"> <div class="highlight"><pre>
<span class="kd">var</span> <span class="nx">blob</span> <span class="o">=</span> <span class="nx">S</span><span class="p">.</span><span class="nx">createBlob</span><span class="p">(</span><span class="nx">ab</span><span class="p">,</span> <span class="nx">mimeString</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">url</span> <span class="o">=</span> <span class="nx">S</span><span class="p">.</span><span class="nx">createObjectURL</span><span class="p">(</span><span class="nx">blob</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">url</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> <h3>createBlob</h3>
<p>Polyfill</p> </td> <td class="code"> <div class="highlight"><pre>
<span class="nx">createBlob</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">arrayBuffer</span><span class="p">,</span> <span class="nx">mimeString</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">BlobBuilder</span> <span class="o">=</span> <span class="nx">BlobBuilder</span> <span class="o">||</span> <span class="nx">WebKitBlobBuilder</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">BlobBuilder</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">&quot;BlobBuilder is unsupported.&quot;</span><span class="p">)</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">bb</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">BlobBuilder</span><span class="p">();</span>
<span class="nx">bb</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">arrayBuffer</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">bb</span><span class="p">.</span><span class="nx">getBlob</span><span class="p">(</span><span class="nx">mimeString</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> <h3>createObjectURL</h3>
<p>Polyfill</p> </td> <td class="code"> <div class="highlight"><pre>
<span class="nx">createObjectURL</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">file</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">URL</span> <span class="o">&amp;&amp;</span> <span class="nb">window</span><span class="p">.</span><span class="nx">URL</span><span class="p">.</span><span class="nx">createObjectURL</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nb">window</span><span class="p">.</span><span class="nx">URL</span><span class="p">.</span><span class="nx">createObjectURL</span><span class="p">(</span><span class="nx">file</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">webkitURL</span> <span class="o">&amp;&amp;</span> <span class="nb">window</span><span class="p">.</span><span class="nx">webkitURL</span><span class="p">.</span><span class="nx">createObjectURL</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nb">window</span><span class="p">.</span><span class="nx">webkitURL</span><span class="p">.</span><span class="nx">createObjectURL</span><span class="p">(</span><span class="nx">file</span><span class="p">);</span>
<span class="p">}</span>
<span class="cm">/* if we reached here, it&#39;s unsupported */</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">&quot;createObjectURL is unsupported.&quot;</span><span class="p">)</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="p">})();</span>
<span class="p">})(</span><span class="nb">window</span><span class="p">,</span> <span class="nx">jQuery</span><span class="p">,</span> <span class="nx">Modernizr</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.