3.0 source code
284
OfficeWeb/vendor/backbone/docs/backbone-localstorage.html
vendored
Normal file
@@ -0,0 +1,284 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>backbone-localstorage.js</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
||||
<link rel="stylesheet" media="all" href="public/stylesheets/normalize.css" />
|
||||
<link rel="stylesheet" media="all" href="docco.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="page">
|
||||
|
||||
<div class="header">
|
||||
|
||||
<h1>backbone-localstorage.js</h1>
|
||||
|
||||
|
||||
|
||||
<div class="toc">
|
||||
<h3>Table of Contents</h3>
|
||||
<ol>
|
||||
|
||||
|
||||
<li>
|
||||
<a class="source" href="backbone-localstorage.html">
|
||||
backbone-localstorage.js
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a class="source" href="todos.html">
|
||||
todos.js
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="highlight"><pre><span class="cm">/**</span>
|
||||
<span class="cm"> * Backbone localStorage Adapter</span>
|
||||
<span class="cm"> * https://github.com/jeromegn/Backbone.localStorage</span>
|
||||
<span class="cm"> */</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>A simple module to replace <code>Backbone.sync</code> with <em>localStorage</em>-based
|
||||
persistence. Models are given GUIDS, and saved into a JSON object. Simple
|
||||
as that.
|
||||
|
||||
</p>
|
||||
<p>Hold reference to Underscore.js and Backbone.js in the closure in order
|
||||
to make things work even if they are removed from the global namespace
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<div class="highlight"><pre><span class="kd">var</span> <span class="nx">_</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">Backbone</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">Backbone</span><span class="p">;</span></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Generate four random hex digits.
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<div class="highlight"><pre><span class="kd">function</span> <span class="nx">S4</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(((</span><span class="mi">1</span><span class="o">+</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">())</span><span class="o">*</span><span class="mh">0x10000</span><span class="p">)</span><span class="o">|</span><span class="mi">0</span><span class="p">).</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">).</span><span class="nx">substring</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
|
||||
<span class="p">};</span></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Generate a pseudo-GUID by concatenating random hexadecimal.
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<div class="highlight"><pre><span class="kd">function</span> <span class="nx">guid</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span><span class="nx">S4</span><span class="p">()</span><span class="o">+</span><span class="nx">S4</span><span class="p">()</span><span class="o">+</span><span class="s2">"-"</span><span class="o">+</span><span class="nx">S4</span><span class="p">()</span><span class="o">+</span><span class="s2">"-"</span><span class="o">+</span><span class="nx">S4</span><span class="p">()</span><span class="o">+</span><span class="s2">"-"</span><span class="o">+</span><span class="nx">S4</span><span class="p">()</span><span class="o">+</span><span class="s2">"-"</span><span class="o">+</span><span class="nx">S4</span><span class="p">()</span><span class="o">+</span><span class="nx">S4</span><span class="p">()</span><span class="o">+</span><span class="nx">S4</span><span class="p">());</span>
|
||||
<span class="p">};</span></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Our Store is represented by a single JS object in <em>localStorage</em>. Create it
|
||||
with a meaningful name, like the name you'd give a table.
|
||||
window.Store is deprectated, use Backbone.LocalStorage instead
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<div class="highlight"><pre><span class="nx">Backbone</span><span class="p">.</span><span class="nx">LocalStorage</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">Store</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">store</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">().</span><span class="nx">getItem</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">records</span> <span class="o">=</span> <span class="p">(</span><span class="nx">store</span> <span class="o">&&</span> <span class="nx">store</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s2">","</span><span class="p">))</span> <span class="o">||</span> <span class="p">[];</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Backbone</span><span class="p">.</span><span class="nx">LocalStorage</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Save the current state of the <strong>Store</strong> to <em>localStorage</em>.
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<div class="highlight"><pre> <span class="nx">save</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">().</span><span class="nx">setItem</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">records</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s2">","</span><span class="p">));</span>
|
||||
<span class="p">},</span></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
|
||||
have an id of it's own.
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<div class="highlight"><pre> <span class="nx">create</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</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">model</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">model</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">guid</span><span class="p">();</span>
|
||||
<span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">idAttribute</span><span class="p">,</span> <span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">().</span><span class="nx">setItem</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="o">+</span><span class="s2">"-"</span><span class="o">+</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">model</span><span class="p">));</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">records</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">save</span><span class="p">();</span>
|
||||
<span class="k">return</span> <span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="p">},</span></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Update a model by replacing its copy in <code>this.data</code>.
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<div class="highlight"><pre> <span class="nx">update</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">().</span><span class="nx">setItem</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="o">+</span><span class="s2">"-"</span><span class="o">+</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">model</span><span class="p">));</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">_</span><span class="p">.</span><span class="nx">include</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">records</span><span class="p">,</span> <span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">.</span><span class="nx">toString</span><span class="p">()))</span> <span class="k">this</span><span class="p">.</span><span class="nx">records</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span> <span class="k">this</span><span class="p">.</span><span class="nx">save</span><span class="p">();</span>
|
||||
<span class="k">return</span> <span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="p">},</span></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Retrieve a model from <code>this.data</code> by id.
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<div class="highlight"><pre> <span class="nx">find</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">().</span><span class="nx">getItem</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="o">+</span><span class="s2">"-"</span><span class="o">+</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">));</span>
|
||||
<span class="p">},</span></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Return the array of all models currently in storage.
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<div class="highlight"><pre> <span class="nx">findAll</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">_</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">records</span><span class="p">).</span><span class="nx">chain</span><span class="p">()</span>
|
||||
<span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">){</span><span class="k">return</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">().</span><span class="nx">getItem</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="o">+</span><span class="s2">"-"</span><span class="o">+</span><span class="nx">id</span><span class="p">));},</span> <span class="k">this</span><span class="p">)</span>
|
||||
<span class="p">.</span><span class="nx">compact</span><span class="p">()</span>
|
||||
<span class="p">.</span><span class="nx">value</span><span class="p">();</span>
|
||||
<span class="p">},</span></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Delete a model from <code>this.data</code>, returning it.
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<div class="highlight"><pre> <span class="nx">destroy</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">().</span><span class="nx">removeItem</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="o">+</span><span class="s2">"-"</span><span class="o">+</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">records</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">records</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">record_id</span><span class="p">){</span><span class="k">return</span> <span class="nx">record_id</span> <span class="o">==</span> <span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">.</span><span class="nx">toString</span><span class="p">();});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">save</span><span class="p">();</span>
|
||||
<span class="k">return</span> <span class="nx">model</span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">localStorage</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">localStorage</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="p">});</span></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>localSync delegate to the model or collection's
|
||||
<em>localStorage</em> property, which should be an instance of <code>Store</code>.
|
||||
window.Store.sync and Backbone.localSync is deprectated, use Backbone.LocalStorage.sync instead
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<div class="highlight"><pre><span class="nx">Backbone</span><span class="p">.</span><span class="nx">LocalStorage</span><span class="p">.</span><span class="nx">sync</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">Store</span><span class="p">.</span><span class="nx">sync</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">localSync</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">method</span><span class="p">,</span> <span class="nx">model</span><span class="p">,</span> <span class="nx">options</span><span class="p">,</span> <span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">store</span> <span class="o">=</span> <span class="nx">model</span><span class="p">.</span><span class="nx">localStorage</span> <span class="o">||</span> <span class="nx">model</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">;</span></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Backwards compatibility with Backbone <= 0.3.3
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
<div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">options</span> <span class="o">==</span> <span class="s1">'function'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">options</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">success</span><span class="o">:</span> <span class="nx">options</span><span class="p">,</span>
|
||||
<span class="nx">error</span><span class="o">:</span> <span class="nx">error</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">resp</span><span class="p">;</span>
|
||||
|
||||
<span class="k">switch</span> <span class="p">(</span><span class="nx">method</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">case</span> <span class="s2">"read"</span><span class="o">:</span> <span class="nx">resp</span> <span class="o">=</span> <span class="nx">model</span><span class="p">.</span><span class="nx">id</span> <span class="o">!=</span> <span class="kc">undefined</span> <span class="o">?</span> <span class="nx">store</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="o">:</span> <span class="nx">store</span><span class="p">.</span><span class="nx">findAll</span><span class="p">();</span> <span class="k">break</span><span class="p">;</span>
|
||||
<span class="k">case</span> <span class="s2">"create"</span><span class="o">:</span> <span class="nx">resp</span> <span class="o">=</span> <span class="nx">store</span><span class="p">.</span><span class="nx">create</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span> <span class="k">break</span><span class="p">;</span>
|
||||
<span class="k">case</span> <span class="s2">"update"</span><span class="o">:</span> <span class="nx">resp</span> <span class="o">=</span> <span class="nx">store</span><span class="p">.</span><span class="nx">update</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span> <span class="k">break</span><span class="p">;</span>
|
||||
<span class="k">case</span> <span class="s2">"delete"</span><span class="o">:</span> <span class="nx">resp</span> <span class="o">=</span> <span class="nx">store</span><span class="p">.</span><span class="nx">destroy</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span> <span class="k">break</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">resp</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">options</span><span class="p">.</span><span class="nx">success</span><span class="p">(</span><span class="nx">resp</span><span class="p">);</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="nx">options</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">'Record not found.'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="nx">Backbone</span><span class="p">.</span><span class="nx">ajaxSync</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">sync</span><span class="p">;</span>
|
||||
|
||||
<span class="nx">Backbone</span><span class="p">.</span><span class="nx">getSyncMethod</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span><span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">localStorage</span> <span class="o">||</span> <span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">collection</span> <span class="o">&&</span> <span class="nx">model</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">))</span>
|
||||
<span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">localSync</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">return</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">ajaxSync</span><span class="p">;</span>
|
||||
<span class="p">};</span></pre></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Override 'Backbone.sync' to default to localSync,
|
||||
the original 'Backbone.sync' is still available in 'Backbone.ajaxSync'
|
||||
</p>
|
||||
|
||||
|
||||
<div class="highlight"><pre><span class="nx">Backbone</span><span class="p">.</span><span class="nx">sync</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">method</span><span class="p">,</span> <span class="nx">model</span><span class="p">,</span> <span class="nx">options</span><span class="p">,</span> <span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">getSyncMethod</span><span class="p">(</span><span class="nx">model</span><span class="p">).</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="p">[</span><span class="nx">method</span><span class="p">,</span> <span class="nx">model</span><span class="p">,</span> <span class="nx">options</span><span class="p">,</span> <span class="nx">error</span><span class="p">]);</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="p">})();</span>
|
||||
|
||||
</pre></div>
|
||||
|
||||
|
||||
<div class="fleur">h</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
3958
OfficeWeb/vendor/backbone/docs/backbone.html
vendored
Normal file
438
OfficeWeb/vendor/backbone/docs/backbone.localstorage.html
vendored
Normal file
@@ -0,0 +1,438 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>backbone.localstorage.js</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
||||
<link rel="stylesheet" media="all" href="docco.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="background"></div>
|
||||
|
||||
<ul id="jump_to">
|
||||
<li>
|
||||
<a class="large" href="javascript:void(0);">Jump To …</a>
|
||||
<a class="small" href="javascript:void(0);">+</a>
|
||||
<div id="jump_wrapper">
|
||||
<div id="jump_page">
|
||||
|
||||
|
||||
<a class="source" href="backbone.localstorage.html">
|
||||
backbone.localstorage.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="todos.html">
|
||||
todos.js
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="sections">
|
||||
|
||||
<li id="title">
|
||||
<div class="annotation">
|
||||
<h1>backbone.localstorage.js</h1>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li id="section-1">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-1">¶</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre><span class="comment">/**
|
||||
* Backbone localStorage Adapter
|
||||
* Version 1.1.0
|
||||
*
|
||||
* https://github.com/jeromegn/Backbone.localStorage
|
||||
*/</span>
|
||||
(<span class="function"><span class="keyword">function</span> <span class="params">(root, factory)</span> {</span>
|
||||
<span class="keyword">if</span> (<span class="keyword">typeof</span> define === <span class="string">"function"</span> && define.amd) {</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-2">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-2">¶</a>
|
||||
</div>
|
||||
<p>AMD. Register as an anonymous module.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> define([<span class="string">"underscore"</span>,<span class="string">"backbone"</span>], <span class="keyword">function</span>(_, Backbone) {</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-3">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-3">¶</a>
|
||||
</div>
|
||||
<p>Use global variables if the locals are undefined.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="keyword">return</span> factory(_ || root._, Backbone || root.Backbone);
|
||||
});
|
||||
} <span class="keyword">else</span> {</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-4">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-4">¶</a>
|
||||
</div>
|
||||
<p>RequireJS isn't being used. Assume underscore and backbone are loaded in <script> tags</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> factory(_, Backbone);
|
||||
}
|
||||
}(<span class="keyword">this</span>, <span class="keyword">function</span>(_, Backbone) {</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-5">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-5">¶</a>
|
||||
</div>
|
||||
<p>A simple module to replace <code>Backbone.sync</code> with <em>localStorage</em>-based
|
||||
persistence. Models are given GUIDS, and saved into a JSON object. Simple
|
||||
as that.</p>
|
||||
<p>Hold reference to Underscore.js and Backbone.js in the closure in order
|
||||
to make things work even if they are removed from the global namespace</p>
|
||||
<p>Generate four random hex digits.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre><span class="function"><span class="keyword">function</span> <span class="title">S4</span><span class="params">()</span> {</span>
|
||||
<span class="keyword">return</span> (((<span class="number">1</span>+Math.random())*<span class="number">0x10000</span>)|<span class="number">0</span>).toString(<span class="number">16</span>).substring(<span class="number">1</span>);
|
||||
};</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-6">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-6">¶</a>
|
||||
</div>
|
||||
<p>Generate a pseudo-GUID by concatenating random hexadecimal.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre><span class="function"><span class="keyword">function</span> <span class="title">guid</span><span class="params">()</span> {</span>
|
||||
<span class="keyword">return</span> (S4()+S4()+<span class="string">"-"</span>+S4()+<span class="string">"-"</span>+S4()+<span class="string">"-"</span>+S4()+<span class="string">"-"</span>+S4()+S4()+S4());
|
||||
};</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-7">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-7">¶</a>
|
||||
</div>
|
||||
<p>Our Store is represented by a single JS object in <em>localStorage</em>. Create it
|
||||
with a meaningful name, like the name you'd give a table.
|
||||
window.Store is deprectated, use Backbone.LocalStorage instead</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre>Backbone.LocalStorage = window.Store = <span class="keyword">function</span>(name) {
|
||||
<span class="keyword">this</span>.name = name;
|
||||
<span class="keyword">var</span> store = <span class="keyword">this</span>.localStorage().getItem(<span class="keyword">this</span>.name);
|
||||
<span class="keyword">this</span>.records = (store && store.split(<span class="string">","</span>)) || [];
|
||||
};
|
||||
|
||||
_.extend(Backbone.LocalStorage.prototype, {</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-8">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-8">¶</a>
|
||||
</div>
|
||||
<p>Save the current state of the <strong>Store</strong> to <em>localStorage</em>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> save: <span class="keyword">function</span>() {
|
||||
<span class="keyword">this</span>.localStorage().setItem(<span class="keyword">this</span>.name, <span class="keyword">this</span>.records.join(<span class="string">","</span>));
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-9">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-9">¶</a>
|
||||
</div>
|
||||
<p>Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
|
||||
have an id of it's own.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> create: <span class="keyword">function</span>(model) {
|
||||
<span class="keyword">if</span> (!model.id) {
|
||||
model.id = guid();
|
||||
model.set(model.idAttribute, model.id);
|
||||
}
|
||||
<span class="keyword">this</span>.localStorage().setItem(<span class="keyword">this</span>.name+<span class="string">"-"</span>+model.id, JSON.stringify(model));
|
||||
<span class="keyword">this</span>.records.push(model.id.toString());
|
||||
<span class="keyword">this</span>.save();
|
||||
<span class="keyword">return</span> <span class="keyword">this</span>.find(model);
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-10">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-10">¶</a>
|
||||
</div>
|
||||
<p>Update a model by replacing its copy in <code>this.data</code>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> update: <span class="keyword">function</span>(model) {
|
||||
<span class="keyword">this</span>.localStorage().setItem(<span class="keyword">this</span>.name+<span class="string">"-"</span>+model.id, JSON.stringify(model));
|
||||
<span class="keyword">if</span> (!_.include(<span class="keyword">this</span>.records, model.id.toString()))
|
||||
<span class="keyword">this</span>.records.push(model.id.toString()); <span class="keyword">this</span>.save();
|
||||
<span class="keyword">return</span> <span class="keyword">this</span>.find(model);
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-11">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-11">¶</a>
|
||||
</div>
|
||||
<p>Retrieve a model from <code>this.data</code> by id.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> find: <span class="keyword">function</span>(model) {
|
||||
<span class="keyword">return</span> <span class="keyword">this</span>.jsonData(<span class="keyword">this</span>.localStorage().getItem(<span class="keyword">this</span>.name+<span class="string">"-"</span>+model.id));
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-12">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-12">¶</a>
|
||||
</div>
|
||||
<p>Return the array of all models currently in storage.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> findAll: <span class="keyword">function</span>() {
|
||||
<span class="keyword">return</span> _(<span class="keyword">this</span>.records).chain()
|
||||
.map(<span class="keyword">function</span>(id){
|
||||
<span class="keyword">return</span> <span class="keyword">this</span>.jsonData(<span class="keyword">this</span>.localStorage().getItem(<span class="keyword">this</span>.name+<span class="string">"-"</span>+id));
|
||||
}, <span class="keyword">this</span>)
|
||||
.compact()
|
||||
.value();
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-13">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-13">¶</a>
|
||||
</div>
|
||||
<p>Delete a model from <code>this.data</code>, returning it.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> destroy: <span class="keyword">function</span>(model) {
|
||||
<span class="keyword">if</span> (model.isNew())
|
||||
<span class="keyword">return</span> <span class="literal">false</span>
|
||||
<span class="keyword">this</span>.localStorage().removeItem(<span class="keyword">this</span>.name+<span class="string">"-"</span>+model.id);
|
||||
<span class="keyword">this</span>.records = _.reject(<span class="keyword">this</span>.records, <span class="keyword">function</span>(id){
|
||||
<span class="keyword">return</span> id === model.id.toString();
|
||||
});
|
||||
<span class="keyword">this</span>.save();
|
||||
<span class="keyword">return</span> model;
|
||||
},
|
||||
|
||||
localStorage: <span class="keyword">function</span>() {
|
||||
<span class="keyword">return</span> localStorage;
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-14">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-14">¶</a>
|
||||
</div>
|
||||
<p>fix for "illegal access" error on Android when JSON.parse is passed null</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> jsonData: <span class="function"><span class="keyword">function</span> <span class="params">(data)</span> {</span>
|
||||
<span class="keyword">return</span> data && JSON.parse(data);
|
||||
}
|
||||
|
||||
});</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-15">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-15">¶</a>
|
||||
</div>
|
||||
<p>localSync delegate to the model or collection's
|
||||
<em>localStorage</em> property, which should be an instance of <code>Store</code>.
|
||||
window.Store.sync and Backbone.localSync is deprectated, use Backbone.LocalStorage.sync instead</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre>Backbone.LocalStorage.sync = window.Store.sync = Backbone.localSync = <span class="keyword">function</span>(method, model, options) {
|
||||
<span class="keyword">var</span> store = model.localStorage || model.collection.localStorage;
|
||||
|
||||
<span class="keyword">var</span> resp, errorMessage, syncDfd = $.Deferred && $.Deferred(); <span class="comment">//If $ is having Deferred - use it.</span>
|
||||
|
||||
<span class="keyword">try</span> {
|
||||
|
||||
<span class="keyword">switch</span> (method) {
|
||||
<span class="keyword">case</span> <span class="string">"read"</span>:
|
||||
resp = model.id != <span class="literal">undefined</span> ? store.find(model) : store.findAll();
|
||||
<span class="keyword">break</span>;
|
||||
<span class="keyword">case</span> <span class="string">"create"</span>:
|
||||
resp = store.create(model);
|
||||
<span class="keyword">break</span>;
|
||||
<span class="keyword">case</span> <span class="string">"update"</span>:
|
||||
resp = store.update(model);
|
||||
<span class="keyword">break</span>;
|
||||
<span class="keyword">case</span> <span class="string">"delete"</span>:
|
||||
resp = store.destroy(model);
|
||||
<span class="keyword">break</span>;
|
||||
}
|
||||
|
||||
} <span class="keyword">catch</span>(error) {
|
||||
<span class="keyword">if</span> (error.code === DOMException.QUOTA_EXCEEDED_ERR && window.localStorage.length === <span class="number">0</span>)
|
||||
errorMessage = <span class="string">"Private browsing is unsupported"</span>;
|
||||
<span class="keyword">else</span>
|
||||
errorMessage = error.message;
|
||||
}
|
||||
|
||||
<span class="keyword">if</span> (resp) {
|
||||
model.trigger(<span class="string">"sync"</span>, model, resp, options);
|
||||
<span class="keyword">if</span> (options && options.success)
|
||||
options.success(resp);
|
||||
<span class="keyword">if</span> (syncDfd)
|
||||
syncDfd.resolve(resp);
|
||||
|
||||
} <span class="keyword">else</span> {
|
||||
errorMessage = errorMessage ? errorMessage
|
||||
: <span class="string">"Record Not Found"</span>;
|
||||
|
||||
<span class="keyword">if</span> (options && options.error)
|
||||
options.error(errorMessage);
|
||||
<span class="keyword">if</span> (syncDfd)
|
||||
syncDfd.reject(errorMessage);
|
||||
}</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-16">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-16">¶</a>
|
||||
</div>
|
||||
<p>add compatibility with $.ajax
|
||||
always execute callback for success and error</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="keyword">if</span> (options && options.complete) options.complete(resp);
|
||||
|
||||
<span class="keyword">return</span> syncDfd && syncDfd.promise();
|
||||
};
|
||||
|
||||
Backbone.ajaxSync = Backbone.sync;
|
||||
|
||||
Backbone.getSyncMethod = <span class="keyword">function</span>(model) {
|
||||
<span class="keyword">if</span>(model.localStorage || (model.collection && model.collection.localStorage)) {
|
||||
<span class="keyword">return</span> Backbone.localSync;
|
||||
}
|
||||
|
||||
<span class="keyword">return</span> Backbone.ajaxSync;
|
||||
};</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-17">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-17">¶</a>
|
||||
</div>
|
||||
<p>Override 'Backbone.sync' to default to localSync,
|
||||
the original 'Backbone.sync' is still available in 'Backbone.ajaxSync'</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre>Backbone.sync = <span class="keyword">function</span>(method, model, options) {
|
||||
<span class="keyword">return</span> Backbone.getSyncMethod(model).apply(<span class="keyword">this</span>, [method, model, options]);
|
||||
};
|
||||
|
||||
<span class="keyword">return</span> Backbone.LocalStorage;
|
||||
}));</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
500
OfficeWeb/vendor/backbone/docs/docco.css
vendored
Normal file
@@ -0,0 +1,500 @@
|
||||
/*--------------------- Typography ----------------------------*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'aller-light';
|
||||
src: url('public/fonts/aller-light.eot');
|
||||
src: url('public/fonts/aller-light.eot?#iefix') format('embedded-opentype'),
|
||||
url('public/fonts/aller-light.woff') format('woff'),
|
||||
url('public/fonts/aller-light.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'aller-bold';
|
||||
src: url('public/fonts/aller-bold.eot');
|
||||
src: url('public/fonts/aller-bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('public/fonts/aller-bold.woff') format('woff'),
|
||||
url('public/fonts/aller-bold.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'novecento-bold';
|
||||
src: url('public/fonts/novecento-bold.eot');
|
||||
src: url('public/fonts/novecento-bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('public/fonts/novecento-bold.woff') format('woff'),
|
||||
url('public/fonts/novecento-bold.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/*--------------------- Layout ----------------------------*/
|
||||
html { height: 100%; }
|
||||
body {
|
||||
font-family: "aller-light";
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: #30404f;
|
||||
margin: 0; padding: 0;
|
||||
height:100%;
|
||||
}
|
||||
#container { min-height: 100%; }
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: normal;
|
||||
font-family: "aller-bold";
|
||||
}
|
||||
|
||||
p, ul, ol {
|
||||
margin: 15px 0 0px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #112233;
|
||||
line-height: 1em;
|
||||
font-weight: normal;
|
||||
font-family: "novecento-bold";
|
||||
text-transform: uppercase;
|
||||
margin: 30px 0 15px 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
background: 1px solid #ddd;
|
||||
height: 1px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
pre, tt, code {
|
||||
font-size: 12px; line-height: 16px;
|
||||
font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
|
||||
margin: 0; padding: 0;
|
||||
}
|
||||
.annotation pre {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 7px 10px;
|
||||
background: #fcfcfc;
|
||||
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
|
||||
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
|
||||
box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
|
||||
overflow-x: auto;
|
||||
}
|
||||
.annotation pre code {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid #ccc;
|
||||
margin: 0;
|
||||
padding: 1px 0 1px 1em;
|
||||
}
|
||||
.sections blockquote p {
|
||||
font-family: Menlo, Consolas, Monaco, monospace;
|
||||
font-size: 12px; line-height: 16px;
|
||||
color: #999;
|
||||
margin: 10px 0 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
ul.sections {
|
||||
list-style: none;
|
||||
padding:0 0 5px 0;;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
/*
|
||||
Force border-box so that % widths fit the parent
|
||||
container without overlap because of margin/padding.
|
||||
|
||||
More Info : http://www.quirksmode.org/css/box.html
|
||||
*/
|
||||
ul.sections > li > div {
|
||||
-moz-box-sizing: border-box; /* firefox */
|
||||
-ms-box-sizing: border-box; /* ie */
|
||||
-webkit-box-sizing: border-box; /* webkit */
|
||||
-khtml-box-sizing: border-box; /* konqueror */
|
||||
box-sizing: border-box; /* css3 */
|
||||
}
|
||||
|
||||
|
||||
/*---------------------- Jump Page -----------------------------*/
|
||||
#jump_to, #jump_page {
|
||||
margin: 0;
|
||||
background: white;
|
||||
-webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;
|
||||
-webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;
|
||||
font: 16px Arial;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#jump_to a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#jump_to a.large {
|
||||
display: none;
|
||||
}
|
||||
#jump_to a.small {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #676767;
|
||||
}
|
||||
|
||||
#jump_to, #jump_wrapper {
|
||||
position: fixed;
|
||||
right: 0; top: 0;
|
||||
padding: 10px 15px;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#jump_wrapper {
|
||||
display: none;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
#jump_to:hover #jump_wrapper {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#jump_page {
|
||||
padding: 5px 0 3px;
|
||||
margin: 0 0 25px 25px;
|
||||
}
|
||||
|
||||
#jump_page .source {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
#jump_page .source:hover {
|
||||
background: #f5f5ff;
|
||||
}
|
||||
|
||||
#jump_page .source:first-child {
|
||||
}
|
||||
|
||||
/*---------------------- Low resolutions (> 320px) ---------------------*/
|
||||
@media only screen and (min-width: 320px) {
|
||||
.pilwrap { display: none; }
|
||||
|
||||
ul.sections > li > div {
|
||||
display: block;
|
||||
padding:5px 10px 0 10px;
|
||||
}
|
||||
|
||||
ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
ul.sections > li > div.content {
|
||||
background: #f5f5ff;
|
||||
overflow-x:auto;
|
||||
-webkit-box-shadow: inset 0 0 5px #e5e5ee;
|
||||
box-shadow: inset 0 0 5px #e5e5ee;
|
||||
border: 1px solid #dedede;
|
||||
margin:5px 10px 5px 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
ul.sections > li > div.annotation pre {
|
||||
margin: 7px 0 7px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
ul.sections > li > div.annotation p tt, .annotation code {
|
||||
background: #f8f8ff;
|
||||
border: 1px solid #dedede;
|
||||
font-size: 12px;
|
||||
padding: 0 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
/*---------------------- (> 481px) ---------------------*/
|
||||
@media only screen and (min-width: 481px) {
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
body {
|
||||
background-color: #F5F5FF;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
}
|
||||
pre, tt, code {
|
||||
line-height: 18px;
|
||||
}
|
||||
p, ul, ol {
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
|
||||
|
||||
#jump_to {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
#jump_wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
#jump_to, #jump_page {
|
||||
font: 10px Arial;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#jump_page .source {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
#jump_to a.large {
|
||||
display: inline-block;
|
||||
}
|
||||
#jump_to a.small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#background {
|
||||
position: absolute;
|
||||
top: 0; bottom: 0;
|
||||
width: 350px;
|
||||
background: #fff;
|
||||
border-right: 1px solid #e5e5ee;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
ul.sections > li {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
ul.sections > li > div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ul.sections > li > div.annotation {
|
||||
max-width: 350px;
|
||||
min-width: 350px;
|
||||
min-height: 5px;
|
||||
padding: 13px;
|
||||
overflow-x: hidden;
|
||||
white-space: normal;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
ul.sections > li > div.annotation pre {
|
||||
margin: 15px 0 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
ul.sections > li > div.content {
|
||||
padding: 13px;
|
||||
vertical-align: top;
|
||||
background: #f5f5ff;
|
||||
border: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pilwrap {
|
||||
position: relative;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.pilcrow {
|
||||
font: 12px Arial;
|
||||
text-decoration: none;
|
||||
color: #454545;
|
||||
position: absolute;
|
||||
top: 3px; left: -20px;
|
||||
padding: 1px 2px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
}
|
||||
.for-h1 .pilcrow {
|
||||
top: 47px;
|
||||
}
|
||||
.for-h2 .pilcrow, .for-h3 .pilcrow, .for-h4 .pilcrow {
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
ul.sections > li > div.annotation:hover .pilcrow {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*---------------------- (> 1025px) ---------------------*/
|
||||
@media only screen and (min-width: 1025px) {
|
||||
|
||||
body {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
#background {
|
||||
width: 525px;
|
||||
}
|
||||
ul.sections > li > div.annotation {
|
||||
max-width: 525px;
|
||||
min-width: 525px;
|
||||
padding: 10px 25px 1px 50px;
|
||||
}
|
||||
ul.sections > li > div.content {
|
||||
padding: 9px 15px 16px 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/*---------------------- Syntax Highlighting -----------------------------*/
|
||||
|
||||
td.linenos { background-color: #f0f0f0; padding-right: 10px; }
|
||||
span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; }
|
||||
/*
|
||||
|
||||
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
||||
|
||||
*/
|
||||
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
color: #000;
|
||||
background: #f8f8ff
|
||||
}
|
||||
|
||||
pre .comment,
|
||||
pre .template_comment,
|
||||
pre .diff .header,
|
||||
pre .javadoc {
|
||||
color: #408080;
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
pre .keyword,
|
||||
pre .assignment,
|
||||
pre .literal,
|
||||
pre .css .rule .keyword,
|
||||
pre .winutils,
|
||||
pre .javascript .title,
|
||||
pre .lisp .title,
|
||||
pre .subst {
|
||||
color: #954121;
|
||||
/*font-weight: bold*/
|
||||
}
|
||||
|
||||
pre .number,
|
||||
pre .hexcolor {
|
||||
color: #40a070
|
||||
}
|
||||
|
||||
pre .string,
|
||||
pre .tag .value,
|
||||
pre .phpdoc,
|
||||
pre .tex .formula {
|
||||
color: #219161;
|
||||
}
|
||||
|
||||
pre .title,
|
||||
pre .id {
|
||||
color: #19469D;
|
||||
}
|
||||
pre .params {
|
||||
color: #00F;
|
||||
}
|
||||
|
||||
pre .javascript .title,
|
||||
pre .lisp .title,
|
||||
pre .subst {
|
||||
font-weight: normal
|
||||
}
|
||||
|
||||
pre .class .title,
|
||||
pre .haskell .label,
|
||||
pre .tex .command {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
pre .tag,
|
||||
pre .tag .title,
|
||||
pre .rules .property,
|
||||
pre .django .tag .keyword {
|
||||
color: #000080;
|
||||
font-weight: normal
|
||||
}
|
||||
|
||||
pre .attribute,
|
||||
pre .variable,
|
||||
pre .instancevar,
|
||||
pre .lisp .body {
|
||||
color: #008080
|
||||
}
|
||||
|
||||
pre .regexp {
|
||||
color: #B68
|
||||
}
|
||||
|
||||
pre .class {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
pre .symbol,
|
||||
pre .ruby .symbol .string,
|
||||
pre .ruby .symbol .keyword,
|
||||
pre .ruby .symbol .keymethods,
|
||||
pre .lisp .keyword,
|
||||
pre .tex .special,
|
||||
pre .input_number {
|
||||
color: #990073
|
||||
}
|
||||
|
||||
pre .builtin,
|
||||
pre .constructor,
|
||||
pre .built_in,
|
||||
pre .lisp .title {
|
||||
color: #0086b3
|
||||
}
|
||||
|
||||
pre .preprocessor,
|
||||
pre .pi,
|
||||
pre .doctype,
|
||||
pre .shebang,
|
||||
pre .cdata {
|
||||
color: #999;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
pre .deletion {
|
||||
background: #fdd
|
||||
}
|
||||
|
||||
pre .addition {
|
||||
background: #dfd
|
||||
}
|
||||
|
||||
pre .diff .change {
|
||||
background: #0086b3
|
||||
}
|
||||
|
||||
pre .chunk {
|
||||
color: #aaa
|
||||
}
|
||||
|
||||
pre .tex .formula {
|
||||
opacity: 0.5;
|
||||
}
|
||||
BIN
OfficeWeb/vendor/backbone/docs/images/airbnb.png
vendored
Normal file
|
After Width: | Height: | Size: 298 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/arrows.png
vendored
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/artsy.png
vendored
Normal file
|
After Width: | Height: | Size: 220 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/backbone-mobile.png
vendored
Normal file
|
After Width: | Height: | Size: 89 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/backbone.png
vendored
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/background.png
vendored
Normal file
|
After Width: | Height: | Size: 2.1 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/baroque.jpg
vendored
Normal file
|
After Width: | Height: | Size: 83 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/basecamp-calendar.jpg
vendored
Normal file
|
After Width: | Height: | Size: 55 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/bitbucket.png
vendored
Normal file
|
After Width: | Height: | Size: 71 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/blossom.png
vendored
Normal file
|
After Width: | Height: | Size: 81 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/cloudapp.png
vendored
Normal file
|
After Width: | Height: | Size: 101 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/code-school.png
vendored
Normal file
|
After Width: | Height: | Size: 290 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/dc-workspace.png
vendored
Normal file
|
After Width: | Height: | Size: 102 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/diaspora.png
vendored
Normal file
|
After Width: | Height: | Size: 140 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/disqus.png
vendored
Normal file
|
After Width: | Height: | Size: 84 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/do.png
vendored
Normal file
|
After Width: | Height: | Size: 100 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/easel.png
vendored
Normal file
|
After Width: | Height: | Size: 65 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/favicon.ico
vendored
Normal file
|
After Width: | Height: | Size: 8.2 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/flow.png
vendored
Normal file
|
After Width: | Height: | Size: 151 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/foursquare.png
vendored
Normal file
|
After Width: | Height: | Size: 226 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/gawker.png
vendored
Normal file
|
After Width: | Height: | Size: 1010 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/gilt.jpg
vendored
Normal file
|
After Width: | Height: | Size: 78 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/groupon.png
vendored
Normal file
|
After Width: | Height: | Size: 236 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/hulu.png
vendored
Normal file
|
After Width: | Height: | Size: 287 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/inkling.png
vendored
Normal file
|
After Width: | Height: | Size: 180 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/irccloud.png
vendored
Normal file
|
After Width: | Height: | Size: 160 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/jolicloud.jpg
vendored
Normal file
|
After Width: | Height: | Size: 206 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/khan-academy.png
vendored
Normal file
|
After Width: | Height: | Size: 139 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/lens.png
vendored
Normal file
|
After Width: | Height: | Size: 466 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/menagerievet.png
vendored
Normal file
|
After Width: | Height: | Size: 75 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/newsblur.jpg
vendored
Normal file
|
After Width: | Height: | Size: 200 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/pandora.png
vendored
Normal file
|
After Width: | Height: | Size: 128 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/pitchfork.png
vendored
Normal file
|
After Width: | Height: | Size: 214 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/quartz.jpg
vendored
Normal file
|
After Width: | Height: | Size: 149 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/rdio.png
vendored
Normal file
|
After Width: | Height: | Size: 225 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/salon.png
vendored
Normal file
|
After Width: | Height: | Size: 254 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/seatgeek.png
vendored
Normal file
|
After Width: | Height: | Size: 266 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/slavery-footprint.png
vendored
Normal file
|
After Width: | Height: | Size: 120 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/soundcloud.png
vendored
Normal file
|
After Width: | Height: | Size: 129 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/spin.png
vendored
Normal file
|
After Width: | Height: | Size: 283 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/stripe.png
vendored
Normal file
|
After Width: | Height: | Size: 130 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/syllabus.jpg
vendored
Normal file
|
After Width: | Height: | Size: 146 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/tilemill.png
vendored
Normal file
|
After Width: | Height: | Size: 149 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/todos.png
vendored
Normal file
|
After Width: | Height: | Size: 41 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/trello.png
vendored
Normal file
|
After Width: | Height: | Size: 112 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/tzigla.png
vendored
Normal file
|
After Width: | Height: | Size: 276 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/usa-today.png
vendored
Normal file
|
After Width: | Height: | Size: 331 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/walmart-mobile.png
vendored
Normal file
|
After Width: | Height: | Size: 136 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/wpcom-notifications.png
vendored
Normal file
|
After Width: | Height: | Size: 79 KiB |
BIN
OfficeWeb/vendor/backbone/docs/images/zocdoc.jpg
vendored
Normal file
|
After Width: | Height: | Size: 156 KiB |
210
OfficeWeb/vendor/backbone/docs/js/jquery.lazyload.js
vendored
Normal file
@@ -0,0 +1,210 @@
|
||||
/*
|
||||
* Lazy Load - jQuery plugin for lazy loading images
|
||||
*
|
||||
* Copyright (c) 2007-2012 Mika Tuupola
|
||||
*
|
||||
* Licensed under the MIT license:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Project home:
|
||||
* http://www.appelsiini.net/projects/lazyload
|
||||
*
|
||||
* Version: 1.7.2
|
||||
*
|
||||
*/
|
||||
(function($, window) {
|
||||
|
||||
$window = $(window);
|
||||
|
||||
$.fn.lazyload = function(options) {
|
||||
var elements = this;
|
||||
var settings = {
|
||||
threshold : 0,
|
||||
failure_limit : 0,
|
||||
event : "scroll",
|
||||
effect : "show",
|
||||
container : window,
|
||||
data_attribute : "original",
|
||||
skip_invisible : true,
|
||||
appear : null,
|
||||
load : null
|
||||
};
|
||||
|
||||
function update() {
|
||||
var counter = 0;
|
||||
|
||||
elements.each(function() {
|
||||
var $this = $(this);
|
||||
if (settings.skip_invisible && !$this.is(":visible")) {
|
||||
return;
|
||||
}
|
||||
if ($.abovethetop(this, settings) ||
|
||||
$.leftofbegin(this, settings)) {
|
||||
/* Nothing. */
|
||||
} else if (!$.belowthefold(this, settings) &&
|
||||
!$.rightoffold(this, settings)) {
|
||||
$this.trigger("appear");
|
||||
} else {
|
||||
if (++counter > settings.failure_limit) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
if(options) {
|
||||
/* Maintain BC for a couple of versions. */
|
||||
if (undefined !== options.failurelimit) {
|
||||
options.failure_limit = options.failurelimit;
|
||||
delete options.failurelimit;
|
||||
}
|
||||
if (undefined !== options.effectspeed) {
|
||||
options.effect_speed = options.effectspeed;
|
||||
delete options.effectspeed;
|
||||
}
|
||||
|
||||
$.extend(settings, options);
|
||||
}
|
||||
|
||||
/* Cache container as jQuery as object. */
|
||||
$container = (settings.container === undefined ||
|
||||
settings.container === window) ? $window : $(settings.container);
|
||||
|
||||
/* Fire one scroll event per scroll. Not one scroll event per image. */
|
||||
if (0 === settings.event.indexOf("scroll")) {
|
||||
$container.bind(settings.event, function(event) {
|
||||
return update();
|
||||
});
|
||||
}
|
||||
|
||||
this.each(function() {
|
||||
var self = this;
|
||||
var $self = $(self);
|
||||
|
||||
self.loaded = false;
|
||||
|
||||
/* When appear is triggered load original image. */
|
||||
$self.one("appear", function() {
|
||||
if (!this.loaded) {
|
||||
if (settings.appear) {
|
||||
var elements_left = elements.length;
|
||||
settings.appear.call(self, elements_left, settings);
|
||||
}
|
||||
$("<img />")
|
||||
.bind("load", function() {
|
||||
$self
|
||||
.hide()
|
||||
.attr("src", $self.data(settings.data_attribute))
|
||||
[settings.effect](settings.effect_speed);
|
||||
self.loaded = true;
|
||||
|
||||
/* Remove image from array so it is not looped next time. */
|
||||
var temp = $.grep(elements, function(element) {
|
||||
return !element.loaded;
|
||||
});
|
||||
elements = $(temp);
|
||||
|
||||
if (settings.load) {
|
||||
var elements_left = elements.length;
|
||||
settings.load.call(self, elements_left, settings);
|
||||
}
|
||||
})
|
||||
.attr("src", $self.data(settings.data_attribute));
|
||||
}
|
||||
});
|
||||
|
||||
/* When wanted event is triggered load original image */
|
||||
/* by triggering appear. */
|
||||
if (0 !== settings.event.indexOf("scroll")) {
|
||||
$self.bind(settings.event, function(event) {
|
||||
if (!self.loaded) {
|
||||
$self.trigger("appear");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/* Check if something appears when window is resized. */
|
||||
$window.bind("resize", function(event) {
|
||||
update();
|
||||
});
|
||||
|
||||
/* Force initial check if images should appear. */
|
||||
update();
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
/* Convenience methods in jQuery namespace. */
|
||||
/* Use as $.belowthefold(element, {threshold : 100, container : window}) */
|
||||
|
||||
$.belowthefold = function(element, settings) {
|
||||
var fold;
|
||||
|
||||
if (settings.container === undefined || settings.container === window) {
|
||||
fold = $window.height() + $window.scrollTop();
|
||||
} else {
|
||||
fold = $container.offset().top + $container.height();
|
||||
}
|
||||
|
||||
return fold <= $(element).offset().top - settings.threshold;
|
||||
};
|
||||
|
||||
$.rightoffold = function(element, settings) {
|
||||
var fold;
|
||||
|
||||
if (settings.container === undefined || settings.container === window) {
|
||||
fold = $window.width() + $window.scrollLeft();
|
||||
} else {
|
||||
fold = $container.offset().left + $container.width();
|
||||
}
|
||||
|
||||
return fold <= $(element).offset().left - settings.threshold;
|
||||
};
|
||||
|
||||
$.abovethetop = function(element, settings) {
|
||||
var fold;
|
||||
|
||||
if (settings.container === undefined || settings.container === window) {
|
||||
fold = $window.scrollTop();
|
||||
} else {
|
||||
fold = $container.offset().top;
|
||||
}
|
||||
|
||||
return fold >= $(element).offset().top + settings.threshold + $(element).height();
|
||||
};
|
||||
|
||||
$.leftofbegin = function(element, settings) {
|
||||
var fold;
|
||||
|
||||
if (settings.container === undefined || settings.container === window) {
|
||||
fold = $window.scrollLeft();
|
||||
} else {
|
||||
fold = $container.offset().left;
|
||||
}
|
||||
|
||||
return fold >= $(element).offset().left + settings.threshold + $(element).width();
|
||||
};
|
||||
|
||||
$.inviewport = function(element, settings) {
|
||||
return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) &&
|
||||
!$.belowthefold(element, settings) && !$.abovethetop(element, settings);
|
||||
};
|
||||
|
||||
/* Custom selectors for your convenience. */
|
||||
/* Use as $("img:below-the-fold").something() */
|
||||
|
||||
$.extend($.expr[':'], {
|
||||
"below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0, container: window}); },
|
||||
"above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0, container: window}); },
|
||||
"right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0, container: window}); },
|
||||
"left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0, container: window}); },
|
||||
"in-viewport" : function(a) { return !$.inviewport(a, {threshold : 0, container: window}); },
|
||||
/* Maintain BC for couple of versions. */
|
||||
"above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0, container: window}); },
|
||||
"right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0, container: window}); },
|
||||
"left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0, container: window}); }
|
||||
});
|
||||
|
||||
})(jQuery, window);
|
||||
44
OfficeWeb/vendor/backbone/docs/jsl.conf
vendored
Normal file
@@ -0,0 +1,44 @@
|
||||
# JavaScriptLint configuration file for CoffeeScript.
|
||||
|
||||
+no_return_value # function {0} does not always return a value
|
||||
+duplicate_formal # duplicate formal argument {0}
|
||||
-equal_as_assign # test for equality (==) mistyped as assignment (=)?{0}
|
||||
+var_hides_arg # variable {0} hides argument
|
||||
+redeclared_var # redeclaration of {0} {1}
|
||||
-anon_no_return_value # anonymous function does not always return a value
|
||||
+missing_semicolon # missing semicolon
|
||||
+meaningless_block # meaningless block; curly braces have no impact
|
||||
-comma_separated_stmts # multiple statements separated by commas (use semicolons?)
|
||||
+unreachable_code # unreachable code
|
||||
+missing_break # missing break statement
|
||||
+missing_break_for_last_case # missing break statement for last case in switch
|
||||
-comparison_type_conv # comparisons against null, 0, true, false, or an empty string allowing implicit type conversion (use === or !==)
|
||||
-inc_dec_within_stmt # increment (++) and decrement (--) operators used as part of greater statement
|
||||
-useless_void # use of the void type may be unnecessary (void is always undefined)
|
||||
+multiple_plus_minus # unknown order of operations for successive plus (e.g. x+++y) or minus (e.g. x---y) signs
|
||||
+use_of_label # use of label
|
||||
-block_without_braces # block statement without curly braces
|
||||
+leading_decimal_point # leading decimal point may indicate a number or an object member
|
||||
+trailing_decimal_point # trailing decimal point may indicate a number or an object member
|
||||
+octal_number # leading zeros make an octal number
|
||||
+nested_comment # nested comment
|
||||
+misplaced_regex # regular expressions should be preceded by a left parenthesis, assignment, colon, or comma
|
||||
+ambiguous_newline # unexpected end of line; it is ambiguous whether these lines are part of the same statement
|
||||
+empty_statement # empty statement or extra semicolon
|
||||
-missing_option_explicit # the "option explicit" control comment is missing
|
||||
+partial_option_explicit # the "option explicit" control comment, if used, must be in the first script tag
|
||||
+dup_option_explicit # duplicate "option explicit" control comment
|
||||
+useless_assign # useless assignment
|
||||
+ambiguous_nested_stmt # block statements containing block statements should use curly braces to resolve ambiguity
|
||||
+ambiguous_else_stmt # the else statement could be matched with one of multiple if statements (use curly braces to indicate intent)
|
||||
-missing_default_case # missing default case in switch statement
|
||||
+duplicate_case_in_switch # duplicate case in switch statements
|
||||
+default_not_at_end # the default case is not at the end of the switch statement
|
||||
+legacy_cc_not_understood # couldn't understand control comment using /*@keyword@*/ syntax
|
||||
+jsl_cc_not_understood # couldn't understand control comment using /*jsl:keyword*/ syntax
|
||||
+useless_comparison # useless comparison; comparing identical expressions
|
||||
+with_statement # with statement hides undeclared variables; use temporary variable instead
|
||||
+trailing_comma_in_array # extra comma is not recommended in array initializers
|
||||
+assign_to_function_call # assignment to a function call
|
||||
+parseint_missing_radix # parseInt missing radix parameter
|
||||
+lambda_assign_requires_semicolon
|
||||
BIN
OfficeWeb/vendor/backbone/docs/public/fonts/aller-bold.eot
vendored
Normal file
BIN
OfficeWeb/vendor/backbone/docs/public/fonts/aller-bold.ttf
vendored
Normal file
BIN
OfficeWeb/vendor/backbone/docs/public/fonts/aller-bold.woff
vendored
Normal file
BIN
OfficeWeb/vendor/backbone/docs/public/fonts/aller-light.eot
vendored
Normal file
BIN
OfficeWeb/vendor/backbone/docs/public/fonts/aller-light.ttf
vendored
Normal file
BIN
OfficeWeb/vendor/backbone/docs/public/fonts/aller-light.woff
vendored
Normal file
BIN
OfficeWeb/vendor/backbone/docs/public/fonts/fleurons.eot
vendored
Normal file
BIN
OfficeWeb/vendor/backbone/docs/public/fonts/fleurons.ttf
vendored
Normal file
BIN
OfficeWeb/vendor/backbone/docs/public/fonts/fleurons.woff
vendored
Normal file
BIN
OfficeWeb/vendor/backbone/docs/public/fonts/novecento-bold.eot
vendored
Normal file
BIN
OfficeWeb/vendor/backbone/docs/public/fonts/novecento-bold.ttf
vendored
Normal file
BIN
OfficeWeb/vendor/backbone/docs/public/fonts/novecento-bold.woff
vendored
Normal file
BIN
OfficeWeb/vendor/backbone/docs/public/images/grey_@2X.png
vendored
Normal file
|
After Width: | Height: | Size: 56 KiB |
375
OfficeWeb/vendor/backbone/docs/public/stylesheets/normalize.css
vendored
Normal file
@@ -0,0 +1,375 @@
|
||||
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Corrects `block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects `inline-block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevents modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling for `hidden` attribute not present in IE 8/9.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Sets default font family to sans-serif.
|
||||
* 2. Prevents iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improves readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
|
||||
* Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Corrects font family set oddly in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improves readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sets consistent quote types.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Removes border when inside `a` element in IE 8/9.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses margin not present in IE 8/9 and Safari 5.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects color not being inherited in IE 8/9.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects font family not being inherited in all browsers.
|
||||
* 2. Corrects font size not being inherited in all browsers.
|
||||
* 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Corrects inability to style clickable `input` types in iOS.
|
||||
* 3. Improves usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses box sizing set to `content-box` in IE 8/9.
|
||||
* 2. Removes excess padding in IE 8/9.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Removes default vertical scrollbar in IE 8/9.
|
||||
* 2. Improves readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
729
OfficeWeb/vendor/backbone/docs/todos.html
vendored
Normal file
@@ -0,0 +1,729 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>todos.js</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
||||
<link rel="stylesheet" media="all" href="docco.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="background"></div>
|
||||
|
||||
<ul id="jump_to">
|
||||
<li>
|
||||
<a class="large" href="javascript:void(0);">Jump To …</a>
|
||||
<a class="small" href="javascript:void(0);">+</a>
|
||||
<div id="jump_wrapper">
|
||||
<div id="jump_page">
|
||||
|
||||
|
||||
<a class="source" href="backbone.localstorage.html">
|
||||
backbone.localstorage.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="todos.html">
|
||||
todos.js
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="sections">
|
||||
|
||||
<li id="title">
|
||||
<div class="annotation">
|
||||
<h1>todos.js</h1>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li id="section-1">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-1">¶</a>
|
||||
</div>
|
||||
<p>An example Backbone application contributed by
|
||||
<a href="http://jgn.me/">Jérôme Gravel-Niquet</a>. This demo uses a simple
|
||||
<a href="backbone-localstorage.html">LocalStorage adapter</a>
|
||||
to persist Backbone models within your browser.</p>
|
||||
<p>Load the application once the DOM is ready, using <code>jQuery.ready</code>:</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre>$(<span class="keyword">function</span>(){</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-2">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap for-h2">
|
||||
<a class="pilcrow" href="#section-2">¶</a>
|
||||
</div>
|
||||
<h2>Todo Model</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-3">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-3">¶</a>
|
||||
</div>
|
||||
<p>Our basic <strong>Todo</strong> model has <code>title</code>, <code>order</code>, and <code>done</code> attributes.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="keyword">var</span> Todo = Backbone.Model.extend({</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-4">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-4">¶</a>
|
||||
</div>
|
||||
<p>Default attributes for the todo item.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> defaults: <span class="keyword">function</span>() {
|
||||
<span class="keyword">return</span> {
|
||||
title: <span class="string">"empty todo..."</span>,
|
||||
order: Todos.nextOrder(),
|
||||
done: <span class="literal">false</span>
|
||||
};
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-5">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-5">¶</a>
|
||||
</div>
|
||||
<p>Toggle the <code>done</code> state of this todo item.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> toggle: <span class="keyword">function</span>() {
|
||||
<span class="keyword">this</span>.save({done: !<span class="keyword">this</span>.get(<span class="string">"done"</span>)});
|
||||
}
|
||||
|
||||
});</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-6">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap for-h2">
|
||||
<a class="pilcrow" href="#section-6">¶</a>
|
||||
</div>
|
||||
<h2>Todo Collection</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-7">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-7">¶</a>
|
||||
</div>
|
||||
<p>The collection of todos is backed by <em>localStorage</em> instead of a remote
|
||||
server.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="keyword">var</span> TodoList = Backbone.Collection.extend({</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-8">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-8">¶</a>
|
||||
</div>
|
||||
<p>Reference to this collection's model.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> model: Todo,</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-9">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-9">¶</a>
|
||||
</div>
|
||||
<p>Save all of the todo items under the <code>"todos-backbone"</code> namespace.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> localStorage: <span class="keyword">new</span> Backbone.LocalStorage(<span class="string">"todos-backbone"</span>),</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-10">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-10">¶</a>
|
||||
</div>
|
||||
<p>Filter down the list of all todo items that are finished.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> done: <span class="keyword">function</span>() {
|
||||
<span class="keyword">return</span> <span class="keyword">this</span>.where({done: <span class="literal">true</span>});
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-11">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-11">¶</a>
|
||||
</div>
|
||||
<p>Filter down the list to only todo items that are still not finished.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> remaining: <span class="keyword">function</span>() {
|
||||
<span class="keyword">return</span> <span class="keyword">this</span>.where({done: <span class="literal">false</span>});
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-12">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-12">¶</a>
|
||||
</div>
|
||||
<p>We keep the Todos in sequential order, despite being saved by unordered
|
||||
GUID in the database. This generates the next order number for new items.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> nextOrder: <span class="keyword">function</span>() {
|
||||
<span class="keyword">if</span> (!<span class="keyword">this</span>.length) <span class="keyword">return</span> <span class="number">1</span>;
|
||||
<span class="keyword">return</span> <span class="keyword">this</span>.last().get(<span class="string">'order'</span>) + <span class="number">1</span>;
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-13">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-13">¶</a>
|
||||
</div>
|
||||
<p>Todos are sorted by their original insertion order.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> comparator: <span class="string">'order'</span>
|
||||
|
||||
});</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-14">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-14">¶</a>
|
||||
</div>
|
||||
<p>Create our global collection of <strong>Todos</strong>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="keyword">var</span> Todos = <span class="keyword">new</span> TodoList;</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-15">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap for-h2">
|
||||
<a class="pilcrow" href="#section-15">¶</a>
|
||||
</div>
|
||||
<h2>Todo Item View</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-16">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-16">¶</a>
|
||||
</div>
|
||||
<p>The DOM element for a todo item...</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="keyword">var</span> TodoView = Backbone.View.extend({</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-17">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-17">¶</a>
|
||||
</div>
|
||||
<p>... is a list tag.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> tagName: <span class="string">"li"</span>,</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-18">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-18">¶</a>
|
||||
</div>
|
||||
<p>Cache the template function for a single item.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> template: _.template($(<span class="string">'#item-template'</span>).html()),</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-19">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-19">¶</a>
|
||||
</div>
|
||||
<p>The DOM events specific to an item.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> events: {
|
||||
<span class="string">"click .toggle"</span> : <span class="string">"toggleDone"</span>,
|
||||
<span class="string">"dblclick .view"</span> : <span class="string">"edit"</span>,
|
||||
<span class="string">"click a.destroy"</span> : <span class="string">"clear"</span>,
|
||||
<span class="string">"keypress .edit"</span> : <span class="string">"updateOnEnter"</span>,
|
||||
<span class="string">"blur .edit"</span> : <span class="string">"close"</span>
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-20">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-20">¶</a>
|
||||
</div>
|
||||
<p>The TodoView listens for changes to its model, re-rendering. Since there's
|
||||
a one-to-one correspondence between a <strong>Todo</strong> and a <strong>TodoView</strong> in this
|
||||
app, we set a direct reference on the model for convenience.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> initialize: <span class="keyword">function</span>() {
|
||||
<span class="keyword">this</span>.listenTo(<span class="keyword">this</span>.model, <span class="string">'change'</span>, <span class="keyword">this</span>.render);
|
||||
<span class="keyword">this</span>.listenTo(<span class="keyword">this</span>.model, <span class="string">'destroy'</span>, <span class="keyword">this</span>.remove);
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-21">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-21">¶</a>
|
||||
</div>
|
||||
<p>Re-render the titles of the todo item.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> render: <span class="keyword">function</span>() {
|
||||
<span class="keyword">this</span>.$el.html(<span class="keyword">this</span>.template(<span class="keyword">this</span>.model.toJSON()));
|
||||
<span class="keyword">this</span>.$el.toggleClass(<span class="string">'done'</span>, <span class="keyword">this</span>.model.get(<span class="string">'done'</span>));
|
||||
<span class="keyword">this</span>.input = <span class="keyword">this</span>.$(<span class="string">'.edit'</span>);
|
||||
<span class="keyword">return</span> <span class="keyword">this</span>;
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-22">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-22">¶</a>
|
||||
</div>
|
||||
<p>Toggle the <code>"done"</code> state of the model.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> toggleDone: <span class="keyword">function</span>() {
|
||||
<span class="keyword">this</span>.model.toggle();
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-23">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-23">¶</a>
|
||||
</div>
|
||||
<p>Switch this view into <code>"editing"</code> mode, displaying the input field.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> edit: <span class="keyword">function</span>() {
|
||||
<span class="keyword">this</span>.$el.addClass(<span class="string">"editing"</span>);
|
||||
<span class="keyword">this</span>.input.focus();
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-24">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-24">¶</a>
|
||||
</div>
|
||||
<p>Close the <code>"editing"</code> mode, saving changes to the todo.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> close: <span class="keyword">function</span>() {
|
||||
<span class="keyword">var</span> value = <span class="keyword">this</span>.input.val();
|
||||
<span class="keyword">if</span> (!value) {
|
||||
<span class="keyword">this</span>.clear();
|
||||
} <span class="keyword">else</span> {
|
||||
<span class="keyword">this</span>.model.save({title: value});
|
||||
<span class="keyword">this</span>.$el.removeClass(<span class="string">"editing"</span>);
|
||||
}
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-25">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-25">¶</a>
|
||||
</div>
|
||||
<p>If you hit <code>enter</code>, we're through editing the item.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> updateOnEnter: <span class="keyword">function</span>(e) {
|
||||
<span class="keyword">if</span> (e.keyCode == <span class="number">13</span>) <span class="keyword">this</span>.close();
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-26">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-26">¶</a>
|
||||
</div>
|
||||
<p>Remove the item, destroy the model.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> clear: <span class="keyword">function</span>() {
|
||||
<span class="keyword">this</span>.model.destroy();
|
||||
}
|
||||
|
||||
});</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-27">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap for-h2">
|
||||
<a class="pilcrow" href="#section-27">¶</a>
|
||||
</div>
|
||||
<h2>The Application</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-28">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-28">¶</a>
|
||||
</div>
|
||||
<p>Our overall <strong>AppView</strong> is the top-level piece of UI.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="keyword">var</span> AppView = Backbone.View.extend({</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-29">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-29">¶</a>
|
||||
</div>
|
||||
<p>Instead of generating a new element, bind to the existing skeleton of
|
||||
the App already present in the HTML.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> el: $(<span class="string">"#todoapp"</span>),</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-30">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-30">¶</a>
|
||||
</div>
|
||||
<p>Our template for the line of statistics at the bottom of the app.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> statsTemplate: _.template($(<span class="string">'#stats-template'</span>).html()),</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-31">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-31">¶</a>
|
||||
</div>
|
||||
<p>Delegated events for creating new items, and clearing completed ones.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> events: {
|
||||
<span class="string">"keypress #new-todo"</span>: <span class="string">"createOnEnter"</span>,
|
||||
<span class="string">"click #clear-completed"</span>: <span class="string">"clearCompleted"</span>,
|
||||
<span class="string">"click #toggle-all"</span>: <span class="string">"toggleAllComplete"</span>
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-32">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-32">¶</a>
|
||||
</div>
|
||||
<p>At initialization we bind to the relevant events on the <code>Todos</code>
|
||||
collection, when items are added or changed. Kick things off by
|
||||
loading any preexisting todos that might be saved in <em>localStorage</em>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> initialize: <span class="keyword">function</span>() {
|
||||
|
||||
<span class="keyword">this</span>.input = <span class="keyword">this</span>.$(<span class="string">"#new-todo"</span>);
|
||||
<span class="keyword">this</span>.allCheckbox = <span class="keyword">this</span>.$(<span class="string">"#toggle-all"</span>)[<span class="number">0</span>];
|
||||
|
||||
<span class="keyword">this</span>.listenTo(Todos, <span class="string">'add'</span>, <span class="keyword">this</span>.addOne);
|
||||
<span class="keyword">this</span>.listenTo(Todos, <span class="string">'reset'</span>, <span class="keyword">this</span>.addAll);
|
||||
<span class="keyword">this</span>.listenTo(Todos, <span class="string">'all'</span>, <span class="keyword">this</span>.render);
|
||||
|
||||
<span class="keyword">this</span>.footer = <span class="keyword">this</span>.$(<span class="string">'footer'</span>);
|
||||
<span class="keyword">this</span>.main = $(<span class="string">'#main'</span>);
|
||||
|
||||
Todos.fetch();
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-33">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-33">¶</a>
|
||||
</div>
|
||||
<p>Re-rendering the App just means refreshing the statistics -- the rest
|
||||
of the app doesn't change.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> render: <span class="keyword">function</span>() {
|
||||
<span class="keyword">var</span> done = Todos.done().length;
|
||||
<span class="keyword">var</span> remaining = Todos.remaining().length;
|
||||
|
||||
<span class="keyword">if</span> (Todos.length) {
|
||||
<span class="keyword">this</span>.main.show();
|
||||
<span class="keyword">this</span>.footer.show();
|
||||
<span class="keyword">this</span>.footer.html(<span class="keyword">this</span>.statsTemplate({done: done, remaining: remaining}));
|
||||
} <span class="keyword">else</span> {
|
||||
<span class="keyword">this</span>.main.hide();
|
||||
<span class="keyword">this</span>.footer.hide();
|
||||
}
|
||||
|
||||
<span class="keyword">this</span>.allCheckbox.checked = !remaining;
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-34">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-34">¶</a>
|
||||
</div>
|
||||
<p>Add a single todo item to the list by creating a view for it, and
|
||||
appending its element to the <code><ul></code>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> addOne: <span class="keyword">function</span>(todo) {
|
||||
<span class="keyword">var</span> view = <span class="keyword">new</span> TodoView({model: todo});
|
||||
<span class="keyword">this</span>.$(<span class="string">"#todo-list"</span>).append(view.render().el);
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-35">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-35">¶</a>
|
||||
</div>
|
||||
<p>Add all items in the <strong>Todos</strong> collection at once.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> addAll: <span class="keyword">function</span>() {
|
||||
Todos.each(<span class="keyword">this</span>.addOne, <span class="keyword">this</span>);
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-36">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-36">¶</a>
|
||||
</div>
|
||||
<p>If you hit return in the main input field, create new <strong>Todo</strong> model,
|
||||
persisting it to <em>localStorage</em>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> createOnEnter: <span class="keyword">function</span>(e) {
|
||||
<span class="keyword">if</span> (e.keyCode != <span class="number">13</span>) <span class="keyword">return</span>;
|
||||
<span class="keyword">if</span> (!<span class="keyword">this</span>.input.val()) <span class="keyword">return</span>;
|
||||
|
||||
Todos.create({title: <span class="keyword">this</span>.input.val()});
|
||||
<span class="keyword">this</span>.input.val(<span class="string">''</span>);
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-37">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-37">¶</a>
|
||||
</div>
|
||||
<p>Clear all done todo items, destroying their models.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> clearCompleted: <span class="keyword">function</span>() {
|
||||
_.invoke(Todos.done(), <span class="string">'destroy'</span>);
|
||||
<span class="keyword">return</span> <span class="literal">false</span>;
|
||||
},
|
||||
|
||||
toggleAllComplete: <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span>
|
||||
<span class="keyword">var</span> done = <span class="keyword">this</span>.allCheckbox.checked;
|
||||
Todos.each(<span class="function"><span class="keyword">function</span> <span class="params">(todo)</span> {</span> todo.save({<span class="string">'done'</span>: done}); });
|
||||
}
|
||||
|
||||
});</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-38">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-38">¶</a>
|
||||
</div>
|
||||
<p>Finally, we kick things off by creating the <strong>App</strong>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="keyword">var</span> App = <span class="keyword">new</span> AppView;
|
||||
|
||||
});</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||