timeline_setter 0.2.0 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (40) hide show
  1. data/Rakefile +11 -2
  2. data/config/assets.yml +9 -0
  3. data/doc/doc.markdown +65 -17
  4. data/doc/templates.html +3 -0
  5. data/doc/timeline-setter.html +327 -238
  6. data/doc/timeline-setter.min.html +3 -0
  7. data/documentation/TimelineSetter/CLI.html +77 -52
  8. data/documentation/TimelineSetter/Parser.html +40 -39
  9. data/documentation/TimelineSetter/Timeline.html +132 -83
  10. data/documentation/TimelineSetter.html +27 -12
  11. data/documentation/_index.html +23 -12
  12. data/documentation/class_list.html +20 -9
  13. data/documentation/css/style.css +7 -5
  14. data/documentation/file.README.html +33 -23
  15. data/documentation/file_list.html +20 -9
  16. data/documentation/frames.html +1 -1
  17. data/documentation/index.html +33 -23
  18. data/documentation/js/app.js +16 -14
  19. data/documentation/js/full_list.js +7 -6
  20. data/documentation/js/jquery.js +3 -3
  21. data/documentation/method_list.html +42 -23
  22. data/documentation/top-level-namespace.html +26 -11
  23. data/index.html +100 -19
  24. data/lib/timeline_setter/cli.rb +2 -0
  25. data/lib/timeline_setter/timeline.rb +6 -3
  26. data/lib/timeline_setter/version.rb +1 -1
  27. data/lib/timeline_setter.rb +0 -7
  28. data/public/javascripts/templates/card.jst +21 -0
  29. data/public/javascripts/templates/notch.jst +1 -0
  30. data/public/javascripts/templates/series_legend.jst +3 -0
  31. data/public/javascripts/templates/timeline.jst +20 -0
  32. data/public/javascripts/templates/year_notch.jst +3 -0
  33. data/public/javascripts/templates.js +1 -0
  34. data/public/javascripts/timeline-setter.js +303 -167
  35. data/public/javascripts/timeline-setter.min.js +1 -0
  36. data/public/stylesheets/timeline-setter.css +5 -5
  37. data/spec/timeline_setter_spec.rb +2 -2
  38. data/templates/timeline-markup.erb +5 -59
  39. data/timeline_setter.gemspec +15 -5
  40. metadata +15 -5
data/doc/timeline-setter.html CHANGED
@@ -1,44 +1,47 @@
1
- <!DOCTYPE html> <html> <head> <title>timeline-setter.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> timeline-setter.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="p">(</span><span class="kd">function</span><span class="p">(){</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <p>Expose <code>TimelineSetter</code> globally, so we can call <code>Timeline.Timeline.boot()</code>
2
- to kick off at any point.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">TimelineSetter</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">TimelineSetter</span> <span class="o">=</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">TimelineSetter</span> <span class="o">||</span> <span class="p">{});</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <h2>Mixins</h2>
1
+ <!DOCTYPE html> <html> <head> <title>timeline-setter.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="templates.html"> templates.js </a> <a class="source" href="timeline-setter.html"> timeline-setter.js </a> <a class="source" href="timeline-setter.min.html"> timeline-setter.min.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> timeline-setter.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="kc">undefined</span><span class="p">){</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <p>Expose <code>TimelineSetter</code> globally, so we can call <code>Timeline.Timeline.boot()</code>
2
+ to kick off at any point.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">TimelineSetter</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">TimelineSetter</span> <span class="o">=</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">TimelineSetter</span> <span class="o">||</span> <span class="p">{});</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <p>Current version of <code>TimelineSetter</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">VERSION</span> <span class="o">=</span> <span class="s2">&quot;0.3.0&quot;</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <h2>Mixins</h2>
3
3
 
4
- <p>Each mixin operates on an object's <code>prototype</code>.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <p>The <code>observable</code> mixin adds simple event notifications to the passed in
4
+ <p>Each mixin operates on an object's <code>prototype</code>.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <p>The <code>observable</code> mixin adds simple event notifications to the passed in
5
5
  object. Unlike other notification systems, when an event is triggered every
6
- callback bound to the object is invoked.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">observable</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">obj</span><span class="p">){</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <p>Registers a callback function for notification at a later time.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">bind</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">cb</span><span class="p">){</span>
7
- <span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span> <span class="o">||</span> <span class="p">[];</span>
8
- <span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">cb</span><span class="p">);</span>
9
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>Invoke all callbacks registered to the object with <code>bind</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">trigger</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
10
- <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
11
- <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">callback</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span>
12
- <span class="nx">callback</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="nx">arguments</span><span class="p">);</span>
6
+ callback bound to the object is invoked.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">observable</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">obj</span><span class="p">){</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>Registers a callback function for notification at a later time.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">bind</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">cb</span><span class="p">){</span>
7
+ <span class="kd">var</span> <span class="nx">callbacks</span> <span class="o">=</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span> <span class="o">||</span> <span class="p">{});</span>
8
+ <span class="kd">var</span> <span class="nx">list</span> <span class="o">=</span> <span class="p">(</span><span class="nx">callbacks</span><span class="p">[</span><span class="nx">e</span><span class="p">]</span> <span class="o">=</span> <span class="nx">callbacks</span><span class="p">[</span><span class="nx">e</span><span class="p">]</span> <span class="o">||</span> <span class="p">[]);</span>
9
+ <span class="nx">list</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">cb</span><span class="p">);</span>
10
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>Invoke all callbacks registered to the object with <code>bind</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">trigger</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
11
+ <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
12
+ <span class="kd">var</span> <span class="nx">list</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span><span class="p">[</span><span class="nx">e</span><span class="p">];</span>
13
+ <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">list</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
14
+ <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="nx">list</span><span class="p">[</span><span class="nx">i</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="nx">arguments</span><span class="p">);</span>
13
15
  <span class="p">};</span>
14
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>Each <code>transformable</code> contains two event listeners that handle moving associated
15
- DOM elements around the page.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">transformable</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">obj</span><span class="p">){</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <p>Move the associated element a specified delta. Of note: because events
16
- aren't scoped by key, TimelineSetter uses plain old jQuery events for
17
- message passing. So each registered callback first checks to see if the
18
- event fired matches the event it is listening for.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">move</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
19
- <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">&quot;move&quot;</span> <span class="o">||</span> <span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
20
-
16
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <p>Each <code>transformable</code> contains two event listeners that handle moving associated
17
+ DOM elements around the page.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">transformable</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">obj</span><span class="p">){</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>Move the associated element a specified delta.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">move</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">evtName</span><span class="p">,</span> <span class="nx">e</span><span class="p">){</span>
18
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
21
19
  <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">currOffset</span><span class="p">))</span> <span class="k">this</span><span class="p">.</span><span class="nx">currOffset</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
22
20
  <span class="k">this</span><span class="p">.</span><span class="nx">currOffset</span> <span class="o">+=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span><span class="p">;</span>
23
21
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span><span class="s2">&quot;left&quot;</span> <span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">currOffset</span><span class="p">});</span>
24
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>The width for the <code>Bar</code> and <code>CardContainer</code> objects is set in percentages,
22
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <p>The width for the <code>Bar</code> and <code>CardContainer</code> objects is set in percentages,
25
23
  in order to zoom the Timeline all that's needed is to increase or decrease
26
- the percentage width.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">zoom</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
27
- <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">&quot;zoom&quot;</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
24
+ the percentage width.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">zoom</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">evtName</span><span class="p">,</span> <span class="nx">e</span><span class="p">){</span>
25
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">width</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
28
26
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span> <span class="s2">&quot;width&quot;</span><span class="o">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">width</span> <span class="p">});</span>
29
27
  <span class="p">};</span>
30
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <h2>Plugins</h2>
28
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>The <code>queryable</code> mixin scopes jQuery to
29
+ a given container.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">queryable</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span> <span class="nx">container</span><span class="p">)</span> <span class="p">{</span>
30
+ <span class="nx">obj</span><span class="p">.</span><span class="nx">$</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">query</span><span class="p">)</span> <span class="p">{</span>
31
+ <span class="k">return</span> <span class="nb">window</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="nx">query</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
32
+ <span class="p">};</span>
33
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <h2>Plugins</h2>
31
34
 
32
- <p>Each plugin operates on an instance of an object.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>Check to see if we're on a mobile device.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">touchInit</span> <span class="o">=</span> <span class="s1">&#39;ontouchstart&#39;</span> <span class="k">in</span> <span class="nb">document</span><span class="p">;</span>
33
- <span class="k">if</span> <span class="p">(</span><span class="nx">touchInit</span><span class="p">)</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s2">&quot;touches&quot;</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <p>The <code>draggable</code> plugin tracks changes in X offsets due to mouse movement
35
+ <p>Each plugin operates on an instance of an object.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>Check to see if we're on a mobile device.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">touchInit</span> <span class="o">=</span> <span class="s1">&#39;ontouchstart&#39;</span> <span class="k">in</span> <span class="nb">document</span><span class="p">;</span>
36
+ <span class="k">if</span> <span class="p">(</span><span class="nx">touchInit</span><span class="p">)</span> <span class="nx">$</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s2">&quot;touches&quot;</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>The <code>draggable</code> plugin tracks changes in X offsets due to mouse movement
34
37
  or finger gestures and proxies associated events on a particular element.
35
38
  Most of this is inspired by polymaps.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">draggable</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">obj</span><span class="p">){</span>
36
- <span class="kd">var</span> <span class="nx">drag</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>Start tracking deltas due to a tap or single click.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">mousedown</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
39
+ <span class="kd">var</span> <span class="nx">drag</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>Start tracking deltas due to a tap or single click.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">mousedown</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
37
40
  <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
38
41
  <span class="nx">drag</span> <span class="o">=</span> <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span><span class="p">};</span>
39
42
  <span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">&quot;dragstart&quot;</span><span class="p">;</span>
40
43
  <span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
41
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>The user is interacting; capture the offset and trigger a <code>dragging</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">mousemove</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
44
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>The user is interacting; capture the offset and trigger a <code>dragging</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">mousemove</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
42
45
  <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">drag</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
43
46
  <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
44
47
  <span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">&quot;dragging&quot;</span><span class="p">;</span>
@@ -47,18 +50,18 @@ Most of this is inspired by polymaps.</p> </td> <td clas
47
50
  <span class="p">});</span>
48
51
  <span class="nx">drag</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">x</span><span class="o">:</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span> <span class="o">||</span> <span class="nx">e</span><span class="p">.</span><span class="nx">touches</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">pageX</span><span class="p">)</span> <span class="p">};</span>
49
52
  <span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
50
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>We're done tracking the movement set drag back to <code>null</code> for the next event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">mouseup</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
53
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>We're done tracking the movement set drag back to <code>null</code> for the next event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">mouseup</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
51
54
  <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">drag</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
52
55
  <span class="nx">drag</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
53
56
  <span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">&quot;dragend&quot;</span><span class="p">;</span>
54
57
  <span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
55
58
  <span class="p">};</span>
56
59
 
57
- <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">touchInit</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>Bind on mouse events if we have a mouse...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;mousedown&quot;</span><span class="p">,</span> <span class="nx">mousedown</span><span class="p">);</span>
60
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">touchInit</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <p>Bind on mouse events if we have a mouse...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;mousedown&quot;</span><span class="p">,</span> <span class="nx">mousedown</span><span class="p">);</span>
58
61
 
59
62
  <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;mousemove&quot;</span><span class="p">,</span> <span class="nx">mousemove</span><span class="p">);</span>
60
63
  <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;mouseup&quot;</span><span class="p">,</span> <span class="nx">mouseup</span><span class="p">);</span>
61
- <span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>otherwise capture <code>touchstart</code> events in order to simulate <code>doubletap</code> events.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">last</span><span class="p">;</span>
64
+ <span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <p>otherwise capture <code>touchstart</code> events in order to simulate <code>doubletap</code> events.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">last</span><span class="p">;</span>
62
65
  <span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;touchstart&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
63
66
  <span class="kd">var</span> <span class="nx">now</span> <span class="o">=</span> <span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
64
67
  <span class="kd">var</span> <span class="nx">delta</span> <span class="o">=</span> <span class="nx">now</span> <span class="o">-</span> <span class="p">(</span><span class="nx">last</span> <span class="o">||</span> <span class="nx">now</span><span class="p">);</span>
@@ -71,8 +74,8 @@ Most of this is inspired by polymaps.</p> </td> <td clas
71
74
  <span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;touchmove&quot;</span><span class="p">,</span> <span class="nx">mousemove</span><span class="p">);</span>
72
75
  <span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;touchend&quot;</span><span class="p">,</span> <span class="nx">mouseup</span><span class="p">);</span>
73
76
  <span class="p">};</span>
74
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <p>Older versions of safari fire incredibly huge mousewheel deltas. We'll need
75
- to dampen the effects.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">safari</span> <span class="o">=</span> <span class="sr">/WebKit\/533/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <p>The <code>wheel</code> plugin captures events triggered by mousewheel, and dampen the
77
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <p>Older versions of safari fire incredibly huge mousewheel deltas. We'll need
78
+ to dampen the effects.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">safari</span> <span class="o">=</span> <span class="sr">/WebKit\/533/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p>The <code>wheel</code> plugin captures events triggered by mousewheel, and dampen the
76
79
  <code>delta</code> if running in Safari.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">wheel</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">obj</span><span class="p">){</span>
77
80
  <span class="kd">function</span> <span class="nx">mousewheel</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
78
81
  <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
@@ -87,7 +90,7 @@ to dampen the effects.</p> </td> <td class="code">
87
90
  <span class="p">};</span>
88
91
 
89
92
  <span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;mousewheel DOMMouseScroll&quot;</span><span class="p">,</span> <span class="nx">mousewheel</span><span class="p">);</span>
90
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <h2>Utilities</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p>A utility class for storing the extent of the timeline.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Bounds</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
93
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <h2>Utilities</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <p>A utility class for storing the extent of the timeline.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Bounds</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
91
94
  <span class="k">this</span><span class="p">.</span><span class="nx">min</span> <span class="o">=</span> <span class="o">+</span><span class="kc">Infinity</span><span class="p">;</span>
92
95
  <span class="k">this</span><span class="p">.</span><span class="nx">max</span> <span class="o">=</span> <span class="o">-</span><span class="kc">Infinity</span><span class="p">;</span>
93
96
  <span class="p">};</span>
@@ -99,48 +102,69 @@ to dampen the effects.</p> </td> <td class="code">
99
102
 
100
103
  <span class="nx">Bounds</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
101
104
  <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">max</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">min</span><span class="p">;</span>
102
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <p>Translate a particular number from the current bounds to a given range.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Bounds</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">project</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">num</span><span class="p">,</span> <span class="nx">max</span><span class="p">){</span>
105
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <p>Translate a particular number from the current bounds to a given range.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Bounds</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">project</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">num</span><span class="p">,</span> <span class="nx">max</span><span class="p">){</span>
103
106
  <span class="k">return</span> <span class="p">(</span><span class="nx">num</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">min</span><span class="p">)</span> <span class="o">/</span> <span class="k">this</span><span class="p">.</span><span class="nx">width</span><span class="p">()</span> <span class="o">*</span> <span class="nx">max</span><span class="p">;</span>
104
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <p><code>Intervals</code> is a particularly focused class to calculate even breaks based
105
- on the passed in <code>Bounds</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Intervals</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">bounds</span><span class="p">)</span> <span class="p">{</span>
107
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</a> </div> <p><code>Intervals</code> is a particularly focused class to calculate even breaks based
108
+ on the passed in <code>Bounds</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Intervals</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">bounds</span><span class="p">,</span> <span class="nx">interval</span><span class="p">)</span> <span class="p">{</span>
106
109
  <span class="k">this</span><span class="p">.</span><span class="nx">max</span> <span class="o">=</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">max</span><span class="p">;</span>
107
110
  <span class="k">this</span><span class="p">.</span><span class="nx">min</span> <span class="o">=</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">min</span><span class="p">;</span>
108
- <span class="k">this</span><span class="p">.</span><span class="nx">setMaxInterval</span><span class="p">();</span>
109
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <p>An object containing human translations for date indexes.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Intervals</span><span class="p">.</span><span class="nx">HUMAN_DATES</span> <span class="o">=</span> <span class="p">{</span>
110
- <span class="nx">months</span> <span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Jan.&#39;</span><span class="p">,</span> <span class="s1">&#39;Feb.&#39;</span><span class="p">,</span> <span class="s1">&#39;March&#39;</span><span class="p">,</span> <span class="s1">&#39;April&#39;</span><span class="p">,</span> <span class="s1">&#39;May&#39;</span><span class="p">,</span> <span class="s1">&#39;June&#39;</span><span class="p">,</span> <span class="s1">&#39;July&#39;</span><span class="p">,</span> <span class="s1">&#39;Aug.&#39;</span><span class="p">,</span> <span class="s1">&#39;Sept.&#39;</span><span class="p">,</span> <span class="s1">&#39;Oct.&#39;</span><span class="p">,</span> <span class="s1">&#39;Nov.&#39;</span><span class="p">,</span> <span class="s1">&#39;Dec.&#39;</span><span class="p">]</span>
111
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</a> </div> <p>A utility function to format dates in AP Style.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Intervals</span><span class="p">.</span><span class="nx">dateStr</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">timestamp</span><span class="p">,</span> <span class="nx">interval</span><span class="p">)</span> <span class="p">{</span>
112
- <span class="kd">var</span> <span class="nx">d</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">timestamp</span><span class="p">);</span>
113
- <span class="kd">var</span> <span class="nx">dYear</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">();</span>
114
- <span class="kd">var</span> <span class="nx">dMonth</span> <span class="o">=</span> <span class="nx">Intervals</span><span class="p">.</span><span class="nx">HUMAN_DATES</span><span class="p">.</span><span class="nx">months</span><span class="p">[</span><span class="nx">d</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">()];</span>
115
- <span class="kd">var</span> <span class="nx">dDate</span> <span class="o">=</span> <span class="nx">dMonth</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span> <span class="o">+</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getDate</span><span class="p">()</span> <span class="o">+</span> <span class="s1">&#39;, &#39;</span> <span class="o">+</span> <span class="nx">dYear</span><span class="p">;</span>
116
- <span class="kd">var</span> <span class="nx">bigHours</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getHours</span><span class="p">()</span> <span class="o">&gt;</span> <span class="mi">12</span><span class="p">;</span>
117
- <span class="kd">var</span> <span class="nx">isPM</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getHours</span><span class="p">()</span> <span class="o">&gt;=</span> <span class="mi">12</span><span class="p">;</span>
118
- <span class="kd">var</span> <span class="nx">dHourWithMinutes</span> <span class="o">=</span> <span class="p">(</span><span class="nx">bigHours</span> <span class="o">?</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getHours</span><span class="p">()</span> <span class="o">-</span> <span class="mi">12</span> <span class="o">:</span> <span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">getHours</span><span class="p">()</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="o">?</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getHours</span><span class="p">()</span> <span class="o">:</span> <span class="s2">&quot;12&quot;</span><span class="p">))</span> <span class="o">+</span> <span class="s2">&quot;:&quot;</span> <span class="o">+</span> <span class="nx">padNumber</span><span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">getMinutes</span><span class="p">())</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">isPM</span> <span class="o">?</span> <span class="s1">&#39;p.m.&#39;</span> <span class="o">:</span> <span class="s1">&#39;a.m.&#39;</span><span class="p">);</span>
119
- <span class="kd">var</span> <span class="nx">dHourMinuteSecond</span> <span class="o">=</span> <span class="nx">dHourWithMinutes</span> <span class="o">+</span> <span class="s2">&quot;:&quot;</span> <span class="o">+</span> <span class="nx">padNumber</span><span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">getSeconds</span><span class="p">());</span>
120
111
 
112
+ <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">interval</span> <span class="o">||</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">INTERVALS</span><span class="p">[</span><span class="nx">interval</span><span class="p">])</span> <span class="p">{</span>
113
+ <span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">computeMaxInterval</span><span class="p">();</span>
114
+ <span class="k">this</span><span class="p">.</span><span class="nx">maxInterval</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
115
+ <span class="k">this</span><span class="p">.</span><span class="nx">idx</span> <span class="o">=</span> <span class="nx">i</span><span class="p">;</span>
116
+ <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
117
+ <span class="k">this</span><span class="p">.</span><span class="nx">maxInterval</span> <span class="o">=</span> <span class="nx">interval</span><span class="p">;</span>
118
+ <span class="k">this</span><span class="p">.</span><span class="nx">idx</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">,</span> <span class="nx">interval</span><span class="p">);</span>
119
+ <span class="p">}</span>
120
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">&#182;</a> </div> <p>Format dates based for AP style.
121
+ Pass an override function in the config object to override.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Intervals</span><span class="p">.</span><span class="nx">dateFormats</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">timestamp</span><span class="p">)</span> <span class="p">{</span>
122
+ <span class="kd">var</span> <span class="nx">d</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">timestamp</span><span class="p">);</span>
123
+ <span class="kd">var</span> <span class="nx">defaults</span> <span class="o">=</span> <span class="p">{};</span>
124
+ <span class="kd">var</span> <span class="nx">months</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;Jan.&#39;</span><span class="p">,</span> <span class="s1">&#39;Feb.&#39;</span><span class="p">,</span> <span class="s1">&#39;March&#39;</span><span class="p">,</span> <span class="s1">&#39;April&#39;</span><span class="p">,</span> <span class="s1">&#39;May&#39;</span><span class="p">,</span> <span class="s1">&#39;June&#39;</span><span class="p">,</span> <span class="s1">&#39;July&#39;</span><span class="p">,</span> <span class="s1">&#39;Aug.&#39;</span><span class="p">,</span> <span class="s1">&#39;Sept.&#39;</span><span class="p">,</span> <span class="s1">&#39;Oct.&#39;</span><span class="p">,</span> <span class="s1">&#39;Nov.&#39;</span><span class="p">,</span> <span class="s1">&#39;Dec.&#39;</span><span class="p">];</span>
125
+ <span class="kd">var</span> <span class="nx">bigHours</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getHours</span><span class="p">()</span> <span class="o">&gt;</span> <span class="mi">12</span><span class="p">;</span>
126
+ <span class="kd">var</span> <span class="nx">ampm</span> <span class="o">=</span> <span class="s2">&quot; &quot;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">getHours</span><span class="p">()</span> <span class="o">&gt;=</span> <span class="mi">12</span> <span class="o">?</span> <span class="s1">&#39;p.m.&#39;</span> <span class="o">:</span> <span class="s1">&#39;a.m.&#39;</span><span class="p">);</span>
127
+
128
+
129
+ <span class="nx">defaults</span><span class="p">.</span><span class="nx">month</span> <span class="o">=</span> <span class="nx">months</span><span class="p">[</span><span class="nx">d</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">()];</span>
130
+ <span class="nx">defaults</span><span class="p">.</span><span class="nx">year</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">();</span>
131
+ <span class="nx">defaults</span><span class="p">.</span><span class="nx">date</span> <span class="o">=</span> <span class="nx">defaults</span><span class="p">.</span><span class="nx">month</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span> <span class="o">+</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getDate</span><span class="p">()</span> <span class="o">+</span> <span class="s1">&#39;, &#39;</span> <span class="o">+</span> <span class="nx">defaults</span><span class="p">.</span><span class="nx">year</span><span class="p">;</span>
132
+
133
+ <span class="kd">var</span> <span class="nx">hours</span><span class="p">;</span>
134
+ <span class="k">if</span><span class="p">(</span><span class="nx">bigHours</span><span class="p">)</span> <span class="p">{</span>
135
+ <span class="nx">hours</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getHours</span><span class="p">()</span> <span class="o">-</span> <span class="mi">12</span><span class="p">;</span>
136
+ <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
137
+ <span class="nx">hours</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getHours</span><span class="p">()</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="o">?</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getHours</span><span class="p">()</span> <span class="o">:</span> <span class="s2">&quot;12&quot;</span><span class="p">;</span>
138
+ <span class="p">}</span>
139
+
140
+ <span class="nx">hours</span> <span class="o">+=</span> <span class="s2">&quot;:&quot;</span> <span class="o">+</span> <span class="nx">padNumber</span><span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">getMinutes</span><span class="p">());</span>
141
+ <span class="nx">defaults</span><span class="p">.</span><span class="nx">hourWithMinutes</span> <span class="o">=</span> <span class="nx">hours</span> <span class="o">+</span> <span class="nx">ampm</span><span class="p">;</span>
142
+ <span class="nx">defaults</span><span class="p">.</span><span class="nx">hourWithMinutesAndSeconds</span> <span class="o">=</span> <span class="nx">hours</span> <span class="o">+</span> <span class="s2">&quot;:&quot;</span> <span class="o">+</span> <span class="nx">padNumber</span><span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">getSeconds</span><span class="p">())</span> <span class="o">+</span> <span class="nx">ampm</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <p>If we have user overrides, set them to defaults.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">Intervals</span><span class="p">.</span><span class="nx">formatter</span><span class="p">(</span><span class="nx">d</span><span class="p">,</span> <span class="nx">defaults</span><span class="p">)</span> <span class="o">||</span> <span class="nx">defaults</span><span class="p">;</span>
143
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <p>A utility function to format dates in AP Style.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Intervals</span><span class="p">.</span><span class="nx">dateStr</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">timestamp</span><span class="p">,</span> <span class="nx">interval</span><span class="p">)</span> <span class="p">{</span>
144
+ <span class="kd">var</span> <span class="nx">d</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Intervals</span><span class="p">.</span><span class="nx">dateFormats</span><span class="p">(</span><span class="nx">timestamp</span><span class="p">);</span>
121
145
  <span class="k">switch</span> <span class="p">(</span><span class="nx">interval</span><span class="p">)</span> <span class="p">{</span>
122
146
  <span class="k">case</span> <span class="s2">&quot;Decade&quot;</span><span class="o">:</span>
123
- <span class="k">return</span> <span class="nx">dYear</span><span class="p">;</span>
147
+ <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">year</span><span class="p">;</span>
124
148
  <span class="k">case</span> <span class="s2">&quot;Lustrum&quot;</span><span class="o">:</span>
125
- <span class="k">return</span> <span class="nx">dYear</span><span class="p">;</span>
149
+ <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">year</span><span class="p">;</span>
126
150
  <span class="k">case</span> <span class="s2">&quot;FullYear&quot;</span><span class="o">:</span>
127
- <span class="k">return</span> <span class="nx">dYear</span><span class="p">;</span>
151
+ <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">year</span><span class="p">;</span>
128
152
  <span class="k">case</span> <span class="s2">&quot;Month&quot;</span><span class="o">:</span>
129
- <span class="k">return</span> <span class="nx">dMonth</span> <span class="o">+</span> <span class="s1">&#39;, &#39;</span> <span class="o">+</span> <span class="nx">dYear</span><span class="p">;</span>
153
+ <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">month</span> <span class="o">+</span> <span class="s1">&#39;, &#39;</span> <span class="o">+</span> <span class="nx">d</span><span class="p">.</span><span class="nx">year</span><span class="p">;</span>
130
154
  <span class="k">case</span> <span class="s2">&quot;Week&quot;</span><span class="o">:</span>
131
- <span class="k">return</span> <span class="nx">dDate</span><span class="p">;</span>
155
+ <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">date</span><span class="p">;</span>
132
156
  <span class="k">case</span> <span class="s2">&quot;Date&quot;</span><span class="o">:</span>
133
- <span class="k">return</span> <span class="nx">dDate</span><span class="p">;</span>
157
+ <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">date</span><span class="p">;</span>
134
158
  <span class="k">case</span> <span class="s2">&quot;Hours&quot;</span><span class="o">:</span>
135
- <span class="k">return</span> <span class="nx">dHourWithMinutes</span><span class="p">;</span>
159
+ <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">hourWithMinutes</span><span class="p">;</span>
136
160
  <span class="k">case</span> <span class="s2">&quot;Minutes&quot;</span><span class="o">:</span>
137
- <span class="k">return</span> <span class="nx">dHourWithMinutes</span><span class="p">;</span>
161
+ <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">hourWithMinutes</span><span class="p">;</span>
138
162
  <span class="k">case</span> <span class="s2">&quot;Seconds&quot;</span><span class="o">:</span>
139
- <span class="k">return</span> <span class="nx">dHourMinuteSecond</span><span class="p">;</span>
163
+ <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">hourWithMinutesAndSeconds</span><span class="p">;</span>
140
164
  <span class="p">}</span>
141
165
  <span class="p">};</span>
142
166
 
143
- <span class="nx">Intervals</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">&#182;</a> </div> <p>Sane estimates of date ranges for the <code>isAtLeastA</code> test.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">INTERVALS</span> <span class="o">:</span> <span class="p">{</span>
167
+ <span class="nx">Intervals</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">&#182;</a> </div> <p>Sane estimates of date ranges for the <code>isAtLeastA</code> test.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">INTERVALS</span> <span class="o">:</span> <span class="p">{</span>
144
168
  <span class="nx">Decade</span> <span class="o">:</span> <span class="mi">315360000000</span><span class="p">,</span>
145
169
  <span class="nx">Lustrum</span> <span class="o">:</span> <span class="mi">157680000000</span><span class="p">,</span>
146
170
  <span class="nx">FullYear</span> <span class="o">:</span> <span class="mi">31536000000</span><span class="p">,</span>
@@ -150,49 +174,43 @@ on the passed in <code>Bounds</code>.</p> </td> <td clas
150
174
  <span class="nx">Hours</span> <span class="o">:</span> <span class="mi">3600000</span><span class="p">,</span>
151
175
  <span class="nx">Minutes</span> <span class="o">:</span> <span class="mi">60000</span><span class="p">,</span>
152
176
  <span class="nx">Seconds</span> <span class="o">:</span> <span class="mi">1000</span>
153
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <p>The order used when testing where exactly a timespan falls.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">INTERVAL_ORDER</span> <span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Seconds&#39;</span><span class="p">,</span><span class="s1">&#39;Minutes&#39;</span><span class="p">,</span><span class="s1">&#39;Hours&#39;</span><span class="p">,</span><span class="s1">&#39;Date&#39;</span><span class="p">,</span><span class="s1">&#39;Week&#39;</span><span class="p">,</span><span class="s1">&#39;Month&#39;</span><span class="p">,</span><span class="s1">&#39;FullYear&#39;</span><span class="p">,</span><span class="s1">&#39;Lustrum&#39;</span><span class="p">,</span><span class="s1">&#39;Decade&#39;</span><span class="p">],</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <p>A test to find the appropriate range of intervals, for example if a range of
177
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">&#182;</a> </div> <p>The order used when testing where exactly a timespan falls.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">INTERVAL_ORDER</span> <span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Seconds&#39;</span><span class="p">,</span><span class="s1">&#39;Minutes&#39;</span><span class="p">,</span><span class="s1">&#39;Hours&#39;</span><span class="p">,</span><span class="s1">&#39;Date&#39;</span><span class="p">,</span><span class="s1">&#39;Week&#39;</span><span class="p">,</span><span class="s1">&#39;Month&#39;</span><span class="p">,</span><span class="s1">&#39;FullYear&#39;</span><span class="p">,</span><span class="s1">&#39;Lustrum&#39;</span><span class="p">,</span><span class="s1">&#39;Decade&#39;</span><span class="p">],</span></pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">&#182;</a> </div> <p>A test to find the appropriate range of intervals, for example if a range of
154
178
  timestamps only spans hours this will return true when called with <code>"Hours"</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">isAtLeastA</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">interval</span><span class="p">)</span> <span class="p">{</span>
155
179
  <span class="k">return</span> <span class="p">((</span><span class="k">this</span><span class="p">.</span><span class="nx">max</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">min</span><span class="p">)</span> <span class="o">&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">INTERVALS</span><span class="p">[</span><span class="nx">interval</span><span class="p">]);</span>
156
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">&#182;</a> </div> <p>Find the maximum interval we should use based on the estimates in <code>INTERVALS</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setMaxInterval</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
157
- <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span>
180
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">&#182;</a> </div> <p>Find the maximum interval we should use based on the estimates in <code>INTERVALS</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">computeMaxInterval</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
181
+ <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
158
182
  <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">isAtLeastA</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">[</span><span class="nx">i</span><span class="p">]))</span> <span class="k">break</span><span class="p">;</span>
159
-
160
- <span class="k">this</span><span class="p">.</span><span class="nx">maxInterval</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">[</span><span class="nx">i</span> <span class="o">-</span> <span class="mi">1</span><span class="p">];</span>
161
- <span class="k">this</span><span class="p">.</span><span class="nx">idx</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">-</span> <span class="mi">1</span><span class="p">;</span>
162
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">&#182;</a> </div> <p>Return the calculated <code>maxInterval</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getMaxInterval</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
183
+ <span class="p">}</span>
184
+ <span class="k">return</span> <span class="nx">i</span> <span class="o">-</span> <span class="mi">1</span><span class="p">;</span>
185
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">&#182;</a> </div> <p>Return the calculated <code>maxInterval</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getMaxInterval</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
163
186
  <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">INTERVALS</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">idx</span><span class="p">]];</span>
164
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">&#182;</a> </div> <p>Return the first year of the decade a Date belongs to as an integer.
187
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">&#182;</a> </div> <p>Return the first year of the decade a Date belongs to as an integer.
165
188
  Decades are defined in the conventional (ie. 60s) sense,
166
189
  instead of the more precise mathematical method that starts
167
190
  with year one. For example, the current decade runs from 2010-2019.
168
191
  And if you pass in the year 2010 or 2015 you'll get 2010 back.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getDecade</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">date</span><span class="p">)</span> <span class="p">{</span>
169
192
  <span class="k">return</span> <span class="p">(</span><span class="nx">date</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">()</span> <span class="o">/</span> <span class="mi">10</span> <span class="o">|</span> <span class="mi">0</span><span class="p">)</span> <span class="o">*</span> <span class="mi">10</span><span class="p">;</span>
170
- <span class="p">},</span>
171
- </pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">&#182;</a> </div> <p>Returns the first year of the five year "lustrum" a Date belongs to
193
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">&#182;</a> </div> <p>Returns the first year of the five year "lustrum" a Date belongs to
172
194
  as an integer. A lustrum is a fancy Roman word for a "five-year period."
173
- You can read more about it <a href="http://en.wikipedia.org/wiki/Lustrum">here</a>.
195
+ You can read more about it <a href="http://en.wikipedia.org/wiki/Lustrum">here</a>.
174
196
  This all means that if you pass in the year 2011 you'll get 2010 back.
175
197
  And if you pass in the year 1997 you'll get 1995 back.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getLustrum</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">date</span><span class="p">)</span> <span class="p">{</span>
176
198
  <span class="k">return</span> <span class="p">(</span><span class="nx">date</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">()</span> <span class="o">/</span> <span class="mi">5</span> <span class="o">|</span> <span class="mi">0</span><span class="p">)</span> <span class="o">*</span> <span class="mi">5</span><span class="p">;</span>
177
- <span class="p">},</span>
178
- </pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">&#182;</a> </div> <p>Return a Date object rounded down to the previous Sunday, a.k.a. the first day of the week.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getWeekFloor</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">date</span><span class="p">)</span> <span class="p">{</span>
199
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">&#182;</a> </div> <p>Return a Date object rounded down to the previous Sunday, a.k.a. the first day of the week.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getWeekFloor</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">date</span><span class="p">)</span> <span class="p">{</span>
179
200
  <span class="nx">thisDate</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">date</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">(),</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">(),</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getDate</span><span class="p">());</span>
180
201
  <span class="nx">thisDate</span><span class="p">.</span><span class="nx">setDate</span><span class="p">(</span><span class="nx">date</span><span class="p">.</span><span class="nx">getDate</span><span class="p">()</span> <span class="o">-</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getDay</span><span class="p">());</span>
181
202
  <span class="k">return</span> <span class="nx">thisDate</span><span class="p">;</span>
182
- <span class="p">},</span>
183
- </pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">&#182;</a> </div> <p>Return a Date object rounded up to the next Sunday, a.k.a. the start of the next week.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getWeekCeil</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">date</span><span class="p">)</span> <span class="p">{</span>
203
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">&#182;</a> </div> <p>Return a Date object rounded up to the next Sunday, a.k.a. the start of the next week.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getWeekCeil</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">date</span><span class="p">)</span> <span class="p">{</span>
184
204
  <span class="nx">thisDate</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">date</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">(),</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">(),</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getDate</span><span class="p">());</span>
185
205
  <span class="nx">thisDate</span><span class="p">.</span><span class="nx">setDate</span><span class="p">(</span><span class="nx">thisDate</span><span class="p">.</span><span class="nx">getDate</span><span class="p">()</span> <span class="o">+</span> <span class="p">(</span><span class="mi">7</span> <span class="o">-</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getDay</span><span class="p">()));</span>
186
206
  <span class="k">return</span> <span class="nx">thisDate</span><span class="p">;</span>
187
- <span class="p">},</span>
188
- </pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">&#182;</a> </div> <p>Zero out a date from the current interval down to seconds.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">floor</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ts</span><span class="p">){</span>
207
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-38"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-38">&#182;</a> </div> <p>Zero out a date from the current interval down to seconds.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">floor</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ts</span><span class="p">){</span>
189
208
  <span class="kd">var</span> <span class="nx">date</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">ts</span><span class="p">);</span>
190
209
  <span class="kd">var</span> <span class="nx">intvl</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">idx</span><span class="p">];</span>
191
210
  <span class="kd">var</span> <span class="nx">idx</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">idx</span> <span class="o">&gt;</span> <span class="nx">_</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">,</span><span class="s1">&#39;FullYear&#39;</span><span class="p">)</span> <span class="o">?</span>
192
211
  <span class="nx">_</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">,</span><span class="s1">&#39;FullYear&#39;</span><span class="p">)</span> <span class="o">:</span>
193
- <span class="nx">idx</span><span class="p">;</span>
194
- </pre></div> </td> </tr> <tr id="section-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">&#182;</a> </div> <p>Zero the special extensions, and adjust as idx necessary.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">switch</span><span class="p">(</span><span class="nx">intvl</span><span class="p">){</span>
195
- <span class="k">case</span> <span class="s1">&#39;Decade&#39;</span><span class="o">:</span>
212
+ <span class="nx">idx</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-39"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-39">&#182;</a> </div> <p>Zero the special extensions, and adjust as idx necessary.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">switch</span><span class="p">(</span><span class="nx">intvl</span><span class="p">){</span>
213
+ <span class="k">case</span> <span class="s1">&#39;Decade&#39;</span><span class="o">:</span>
196
214
  <span class="nx">date</span><span class="p">.</span><span class="nx">setFullYear</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getDecade</span><span class="p">(</span><span class="nx">date</span><span class="p">));</span>
197
215
  <span class="k">break</span><span class="p">;</span>
198
216
  <span class="k">case</span> <span class="s1">&#39;Lustrum&#39;</span><span class="o">:</span>
@@ -201,13 +219,13 @@ And if you pass in the year 1997 you'll get 1995 back.</p> </td>
201
219
  <span class="k">case</span> <span class="s1">&#39;Week&#39;</span><span class="o">:</span>
202
220
  <span class="nx">date</span><span class="p">.</span><span class="nx">setDate</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getWeekFloor</span><span class="p">(</span><span class="nx">date</span><span class="p">).</span><span class="nx">getDate</span><span class="p">());</span>
203
221
  <span class="nx">idx</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">,</span> <span class="s1">&#39;Week&#39;</span><span class="p">);</span>
204
- <span class="p">}</span>
205
- </pre></div> </td> </tr> <tr id="section-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">&#182;</a> </div> <p>Zero out the rest</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">while</span><span class="p">(</span><span class="nx">idx</span><span class="o">--</span><span class="p">){</span>
206
- <span class="kd">var</span> <span class="nx">intvl</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">[</span><span class="nx">idx</span><span class="p">];</span>
222
+ <span class="p">}</span></pre></div> </td> </tr> <tr id="section-40"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-40">&#182;</a> </div> <p>Zero out the rest</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">while</span><span class="p">(</span><span class="nx">idx</span><span class="o">--</span><span class="p">){</span>
223
+ <span class="nx">intvl</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">[</span><span class="nx">idx</span><span class="p">];</span>
207
224
  <span class="k">if</span><span class="p">(</span><span class="nx">intvl</span> <span class="o">!==</span> <span class="s1">&#39;Week&#39;</span><span class="p">)</span> <span class="nx">date</span><span class="p">[</span><span class="s2">&quot;set&quot;</span> <span class="o">+</span> <span class="nx">intvl</span><span class="p">](</span><span class="nx">intvl</span> <span class="o">===</span> <span class="s2">&quot;Date&quot;</span> <span class="o">?</span> <span class="mi">1</span> <span class="o">:</span> <span class="mi">0</span><span class="p">);</span>
208
225
  <span class="p">}</span>
226
+
209
227
  <span class="k">return</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getTime</span><span class="p">();</span>
210
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-38"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-38">&#182;</a> </div> <p>Find the next date based on the past in timestamp.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">ceil</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ts</span><span class="p">){</span>
228
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">&#182;</a> </div> <p>Find the next date based on the past in timestamp.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">ceil</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ts</span><span class="p">){</span>
211
229
  <span class="kd">var</span> <span class="nx">date</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">ts</span><span class="p">));</span>
212
230
  <span class="kd">var</span> <span class="nx">intvl</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">idx</span><span class="p">];</span>
213
231
  <span class="k">switch</span><span class="p">(</span><span class="nx">intvl</span><span class="p">){</span>
@@ -220,14 +238,14 @@ And if you pass in the year 1997 you'll get 1995 back.</p> </td>
220
238
  <span class="k">case</span> <span class="s1">&#39;Week&#39;</span><span class="o">:</span>
221
239
  <span class="nx">date</span><span class="p">.</span><span class="nx">setTime</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getWeekCeil</span><span class="p">(</span><span class="nx">date</span><span class="p">).</span><span class="nx">getTime</span><span class="p">());</span>
222
240
  <span class="k">break</span><span class="p">;</span>
223
- <span class="k">default</span><span class="o">:</span>
241
+ <span class="k">default</span><span class="o">:</span>
224
242
  <span class="nx">date</span><span class="p">[</span><span class="s2">&quot;set&quot;</span> <span class="o">+</span> <span class="nx">intvl</span><span class="p">](</span><span class="nx">date</span><span class="p">[</span><span class="s2">&quot;get&quot;</span> <span class="o">+</span> <span class="nx">intvl</span><span class="p">]()</span> <span class="o">+</span> <span class="mi">1</span><span class="p">);</span>
225
243
  <span class="p">}</span>
226
244
  <span class="k">return</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getTime</span><span class="p">();</span>
227
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-39"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-39">&#182;</a> </div> <p>The actual difference in timespans accounting for time oddities like
245
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-42"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42">&#182;</a> </div> <p>The actual difference in timespans accounting for time oddities like
228
246
  different length months and leap years.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">span</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ts</span><span class="p">){</span>
229
247
  <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">ceil</span><span class="p">(</span><span class="nx">ts</span><span class="p">)</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">ts</span><span class="p">);</span>
230
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-40"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-40">&#182;</a> </div> <p>Calculate and return a list of human formatted strings and raw timestamps.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getRanges</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
248
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-43"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43">&#182;</a> </div> <p>Calculate and return a list of human formatted strings and raw timestamps.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getRanges</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
231
249
  <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">intervals</span><span class="p">)</span> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">intervals</span><span class="p">;</span>
232
250
  <span class="k">this</span><span class="p">.</span><span class="nx">intervals</span> <span class="o">=</span> <span class="p">[];</span>
233
251
  <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">min</span><span class="p">);</span> <span class="nx">i</span> <span class="o">&lt;=</span> <span class="k">this</span><span class="p">.</span><span class="nx">ceil</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">max</span><span class="p">);</span> <span class="nx">i</span> <span class="o">+=</span> <span class="k">this</span><span class="p">.</span><span class="nx">span</span><span class="p">(</span><span class="nx">i</span><span class="p">))</span> <span class="p">{</span>
@@ -238,26 +256,21 @@ different length months and leap years.</p> </td> <td cl
238
256
  <span class="p">}</span>
239
257
  <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">intervals</span><span class="p">;</span>
240
258
  <span class="p">}</span>
241
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">&#182;</a> </div> <p>Handy dandy function to bind a listener on multiple events. For example,
259
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-44"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-44">&#182;</a> </div> <p>Handy dandy function to bind a listener on multiple events. For example,
242
260
  <code>Bar</code> and <code>CardContainer</code> are bound like so on "move" and "zoom":</p>
243
261
 
244
262
  <pre><code> sync(this.bar, this.cardCont, "move", "zoom");
245
263
  </code></pre> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">sync</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">origin</span><span class="p">,</span> <span class="nx">listener</span><span class="p">){</span>
246
264
  <span class="kd">var</span> <span class="nx">events</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">arguments</span><span class="p">,</span> <span class="mi">2</span><span class="p">);</span>
247
265
  <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">events</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ev</span><span class="p">){</span>
248
- <span class="nx">origin</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
249
- <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="nx">ev</span> <span class="o">&amp;&amp;</span> <span class="nx">listener</span><span class="p">[</span><span class="nx">ev</span><span class="p">])</span>
250
- <span class="nx">listener</span><span class="p">[</span><span class="nx">ev</span><span class="p">](</span><span class="nx">e</span><span class="p">);</span>
251
- <span class="p">});</span>
266
+ <span class="nx">origin</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="nx">ev</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> <span class="nx">listener</span><span class="p">[</span><span class="nx">ev</span><span class="p">].</span><span class="nx">apply</span><span class="p">(</span><span class="nx">listener</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span> <span class="p">});</span>
252
267
  <span class="p">});</span>
253
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-42"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42">&#182;</a> </div> <p>Get a template from the DOM and return a compiled function.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">query</span><span class="p">)</span> <span class="p">{</span>
254
- <span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">query</span><span class="p">).</span><span class="nx">html</span><span class="p">());</span>
255
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-43"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43">&#182;</a> </div> <p>Simple function to strip suffixes like <code>"px"</code> and return a clean integer for
268
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-45"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-45">&#182;</a> </div> <p>Simple function to strip suffixes like <code>"px"</code> and return a clean integer for
256
269
  use.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">cleanNumber</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">str</span><span class="p">){</span>
257
270
  <span class="k">return</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">str</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/^[^+\-\d]?([+\-]?\d+)?.*$/</span><span class="p">,</span> <span class="s2">&quot;$1&quot;</span><span class="p">),</span> <span class="mi">10</span><span class="p">);</span>
258
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-44"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-44">&#182;</a> </div> <p>Zero pad a number less than 10 and return a 2 digit value.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">padNumber</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">number</span><span class="p">)</span> <span class="p">{</span>
271
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-46"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-46">&#182;</a> </div> <p>Zero pad a number less than 10 and return a 2 digit value.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">padNumber</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">number</span><span class="p">)</span> <span class="p">{</span>
259
272
  <span class="k">return</span> <span class="p">(</span><span class="nx">number</span> <span class="o">&lt;</span> <span class="mi">10</span> <span class="o">?</span> <span class="s1">&#39;0&#39;</span> <span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">)</span> <span class="o">+</span> <span class="nx">number</span><span class="p">;</span>
260
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-45"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-45">&#182;</a> </div> <p>A quick and dirty hash manager for setting and getting values from
273
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-47"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-47">&#182;</a> </div> <p>A quick and dirty hash manager for setting and getting values from
261
274
  <code>window.location.hash</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">hashStrip</span> <span class="o">=</span> <span class="sr">/^#*/</span><span class="p">;</span>
262
275
  <span class="kd">var</span> <span class="nx">history</span> <span class="o">=</span> <span class="p">{</span>
263
276
  <span class="nx">get</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
@@ -267,8 +280,8 @@ use.</p> </td> <td class="code"> <div clas
267
280
  <span class="nx">set</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">url</span><span class="p">){</span>
268
281
  <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span> <span class="o">=</span> <span class="nx">url</span><span class="p">;</span>
269
282
  <span class="p">}</span>
270
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-46"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-46">&#182;</a> </div> <p>Every new <code>Series</code> gets new color. If there are too many series
271
- the remaining series will be a simple gray.</p> </td> <td class="code"> <div class="highlight"><pre> </pre></div> </td> </tr> <tr id="section-47"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-47">&#182;</a> </div> <p>These colors can be styled like such in
283
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-48"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-48">&#182;</a> </div> <p>Every new <code>Series</code> gets new color. If there are too many series
284
+ the remaining series will be a simple gray.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-49"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-49">&#182;</a> </div> <p>These colors can be styled like such in
272
285
  timeline-setter.css, where the numbers 1-9 cycle through in that order:</p>
273
286
 
274
287
  <pre><code> .TS-notch_color_1,.TS-series_legend_swatch_1 {
@@ -293,34 +306,65 @@ timeline-setter.css, where the numbers 1-9 cycle through in that order:</p>
293
306
  <span class="nx">chosen</span> <span class="o">=</span> <span class="s2">&quot;default&quot;</span><span class="p">;</span>
294
307
  <span class="p">}</span>
295
308
  <span class="k">return</span> <span class="nx">chosen</span><span class="p">;</span>
296
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-48"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-48">&#182;</a> </div> <h2>Models</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-49"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-49">&#182;</a> </div> <p>The main kickoff point for rendering the timeline. The <code>Timeline</code> constructor
297
- takes a json array of card representations and then builds series, calculates
298
- intervals <code>sync</code>s the <code>Bar</code> and <code>CardContainer</code> objects and triggers the
299
- <code>render</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Timeline</span> <span class="o">=</span> <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">Timeline</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
300
- <span class="nx">data</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">sort</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">){</span> <span class="k">return</span> <span class="nx">a</span><span class="p">.</span><span class="nx">timestamp</span> <span class="o">-</span> <span class="nx">b</span><span class="p">.</span><span class="nx">timestamp</span><span class="p">;</span> <span class="p">});</span>
309
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-50"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-50">&#182;</a> </div> <h2>Models</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-51"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-51">&#182;</a> </div> <p>Initialize a Timeline object in a container element specified
310
+ in the config object.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Timeline</span> <span class="o">=</span> <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">Timeline</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
311
+ <span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">&#39;render&#39;</span><span class="p">,</span> <span class="s1">&#39;setCurrentTimeline&#39;</span><span class="p">);</span>
312
+ <span class="k">this</span><span class="p">.</span><span class="nx">data</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">sort</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">){</span> <span class="k">return</span> <span class="nx">a</span><span class="p">.</span><span class="nx">timestamp</span> <span class="o">-</span> <span class="nx">b</span><span class="p">.</span><span class="nx">timestamp</span><span class="p">;</span> <span class="p">});</span>
301
313
  <span class="k">this</span><span class="p">.</span><span class="nx">bySid</span> <span class="o">=</span> <span class="p">{};</span>
314
+ <span class="k">this</span><span class="p">.</span><span class="nx">cards</span> <span class="o">=</span> <span class="p">[];</span>
302
315
  <span class="k">this</span><span class="p">.</span><span class="nx">series</span> <span class="o">=</span> <span class="p">[];</span>
303
- <span class="k">this</span><span class="p">.</span><span class="nx">bounds</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Bounds</span><span class="p">();</span>
304
- <span class="k">this</span><span class="p">.</span><span class="nx">bar</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Bar</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
305
- <span class="k">this</span><span class="p">.</span><span class="nx">cardCont</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">CardScroller</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
306
- <span class="k">this</span><span class="p">.</span><span class="nx">createSeries</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
307
-
308
- <span class="kd">var</span> <span class="nx">range</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Intervals</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">);</span>
309
- <span class="k">this</span><span class="p">.</span><span class="nx">intervals</span> <span class="o">=</span> <span class="nx">range</span><span class="p">.</span><span class="nx">getRanges</span><span class="p">();</span>
310
- <span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">min</span> <span class="o">-</span> <span class="nx">range</span><span class="p">.</span><span class="nx">getMaxInterval</span><span class="p">()</span> <span class="o">/</span> <span class="mi">2</span><span class="p">);</span>
311
- <span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">max</span> <span class="o">+</span> <span class="nx">range</span><span class="p">.</span><span class="nx">getMaxInterval</span><span class="p">()</span> <span class="o">/</span> <span class="mi">2</span><span class="p">);</span>
312
- <span class="k">this</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
313
-
314
- <span class="nx">sync</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">bar</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">cardCont</span><span class="p">,</span> <span class="s2">&quot;move&quot;</span><span class="p">,</span> <span class="s2">&quot;zoom&quot;</span><span class="p">);</span>
315
- <span class="kd">var</span> <span class="nx">e</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s2">&quot;render&quot;</span><span class="p">);</span>
316
- <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
316
+ <span class="k">this</span><span class="p">.</span><span class="nx">config</span> <span class="o">=</span> <span class="nx">config</span><span class="p">;</span>
317
+ <span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">container</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">container</span> <span class="o">||</span> <span class="s2">&quot;#timeline&quot;</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-52"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-52">&#182;</a> </div> <p>Override default date formats
318
+ by writing a <code>formatter</code> function that returns
319
+ an object containing all the formats
320
+ you'd like to override. Pass in <code>d</code>
321
+ which is a date object, and <code>defaults</code>, which
322
+ are the formatters we override.</p>
323
+
324
+ <pre><code> formatter : function(d, defaults) {
325
+ defaults.months = ['enero', 'febrero', 'marzo',
326
+ 'abril', 'mayo', 'junio', 'julio',
327
+ 'agosto', 'septiembre', 'octubre',
328
+ 'noviembre', 'diciembre'];
329
+ return defaults;
330
+ }
331
+ </code></pre> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Intervals</span><span class="p">.</span><span class="nx">formatter</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">formatter</span> <span class="o">||</span> <span class="kd">function</span><span class="p">(</span><span class="nx">d</span><span class="p">,</span> <span class="nx">defaults</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">defaults</span><span class="p">;</span> <span class="p">};</span>
317
332
  <span class="p">};</span>
318
333
  <span class="nx">observable</span><span class="p">(</span><span class="nx">Timeline</span><span class="p">.</span><span class="nx">prototype</span><span class="p">);</span>
319
334
 
320
- <span class="nx">Timeline</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Timeline</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-50"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-50">&#182;</a> </div> <p>Loop through the JSON and add each element to a series.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">createSeries</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">series</span><span class="p">){</span>
335
+ <span class="nx">Timeline</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Timeline</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-53"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-53">&#182;</a> </div> <p>The main kickoff point for rendering the timeline. The <code>Timeline</code> constructor
336
+ takes a JSON array of card representations and then builds series, calculates
337
+ intervals <code>sync</code>s the <code>Bar</code> and <code>CardContainer</code> objects.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
338
+ <span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-54"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-54">&#182;</a> </div> <p>create <code>this.$</code> from queryable mixin.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">queryable</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">container</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-55"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-55">&#182;</a> </div> <p>Stick the barebones HTML structure in the dom,
339
+ so we can play with it.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">container</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">JST</span><span class="p">.</span><span class="nx">timeline</span><span class="p">());</span>
340
+
341
+ <span class="k">this</span><span class="p">.</span><span class="nx">bounds</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Bounds</span><span class="p">();</span>
342
+ <span class="k">this</span><span class="p">.</span><span class="nx">bar</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Bar</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
343
+ <span class="k">this</span><span class="p">.</span><span class="nx">cardCont</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">CardScroller</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
344
+ <span class="k">this</span><span class="p">.</span><span class="nx">createSeries</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
345
+ <span class="kd">var</span> <span class="nx">range</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Intervals</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">interval</span><span class="p">);</span>
346
+ <span class="k">this</span><span class="p">.</span><span class="nx">intervals</span> <span class="o">=</span> <span class="nx">range</span><span class="p">.</span><span class="nx">getRanges</span><span class="p">();</span>
347
+ <span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">min</span> <span class="o">-</span> <span class="nx">range</span><span class="p">.</span><span class="nx">getMaxInterval</span><span class="p">()</span> <span class="o">/</span> <span class="mi">2</span><span class="p">);</span>
348
+ <span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">max</span> <span class="o">+</span> <span class="nx">range</span><span class="p">.</span><span class="nx">getMaxInterval</span><span class="p">()</span> <span class="o">/</span> <span class="mi">2</span><span class="p">);</span>
349
+ <span class="k">this</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
350
+ <span class="nx">sync</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">bar</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">cardCont</span><span class="p">,</span> <span class="s2">&quot;move&quot;</span><span class="p">,</span> <span class="s2">&quot;zoom&quot;</span><span class="p">);</span>
351
+ <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;render&#39;</span><span class="p">);</span>
352
+
353
+ <span class="k">new</span> <span class="nx">Zoom</span><span class="p">(</span><span class="s2">&quot;in&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
354
+ <span class="k">new</span> <span class="nx">Zoom</span><span class="p">(</span><span class="s2">&quot;out&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
355
+ <span class="k">this</span><span class="p">.</span><span class="nx">chooseNext</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Chooser</span><span class="p">(</span><span class="s2">&quot;next&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
356
+ <span class="k">this</span><span class="p">.</span><span class="nx">choosePrev</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Chooser</span><span class="p">(</span><span class="s2">&quot;prev&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
357
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-card_active&quot;</span><span class="p">).</span><span class="nx">is</span><span class="p">(</span><span class="s2">&quot;*&quot;</span><span class="p">))</span> <span class="k">this</span><span class="p">.</span><span class="nx">chooseNext</span><span class="p">.</span><span class="nx">click</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-56"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-56">&#182;</a> </div> <p>Bind a click handler to this timeline container
358
+ that sets it as as the global current timeline
359
+ for key presses.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">container</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">setCurrentTimeline</span><span class="p">);</span>
360
+
361
+ <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;load&#39;</span><span class="p">);</span>
362
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-57"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-57">&#182;</a> </div> <p>Set a global with the current timeline, mostly for key presses.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setCurrentTimeline</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
363
+ <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">currentTimeline</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
364
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-58"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-58">&#182;</a> </div> <p>Loop through the JSON and add each element to a series.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">createSeries</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">series</span><span class="p">){</span>
321
365
  <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">series</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span>
322
366
  <span class="k">this</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">series</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
323
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-51"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-51">&#182;</a> </div> <p>If a particular element in the JSON array mentions a series that's not
367
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-59"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-59">&#182;</a> </div> <p>If a particular element in the JSON array mentions a series that's not
324
368
  in the <code>bySid</code> object add it. Then add a card to the <code>Series</code> and extend
325
369
  the global <code>bounds</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">add</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">card</span><span class="p">){</span>
326
370
  <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="nx">card</span><span class="p">.</span><span class="nx">series</span> <span class="k">in</span> <span class="k">this</span><span class="p">.</span><span class="nx">bySid</span><span class="p">)){</span>
@@ -329,31 +373,34 @@ the global <code>bounds</code>.</p> </td> <td class="cod
329
373
  <span class="p">}</span>
330
374
  <span class="kd">var</span> <span class="nx">series</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">bySid</span><span class="p">[</span><span class="nx">card</span><span class="p">.</span><span class="nx">series</span><span class="p">];</span>
331
375
  <span class="nx">series</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">card</span><span class="p">);</span>
332
-
376
+
333
377
  <span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">series</span><span class="p">.</span><span class="nx">max</span><span class="p">());</span>
334
378
  <span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">series</span><span class="p">.</span><span class="nx">min</span><span class="p">());</span>
379
+
380
+ <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;cardAdd&#39;</span><span class="p">,</span> <span class="nx">card</span><span class="p">);</span>
335
381
  <span class="p">}</span>
336
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-52"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-52">&#182;</a> </div> <h2>Views</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-53"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-53">&#182;</a> </div> <p>The main interactive element in the timeline is <code>.TS-notchbar</code>. Behind the
382
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-60"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-60">&#182;</a> </div> <h2>Views</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-61"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-61">&#182;</a> </div> <p>The main interactive element in the timeline is <code>.TS-notchbar</code>. Behind the
337
383
  scenes <code>Bar</code> handles the moving and zooming behaviours through the <code>draggable</code>
338
384
  and <code>wheel</code> plugins.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Bar</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">timeline</span><span class="p">)</span> <span class="p">{</span>
339
- <span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notchbar&quot;</span><span class="p">);</span>
340
- <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span> <span class="s2">&quot;left&quot;</span><span class="o">:</span> <span class="mi">0</span> <span class="p">});</span>
385
+ <span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
341
386
  <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span> <span class="o">=</span> <span class="nx">timeline</span><span class="p">;</span>
387
+
388
+ <span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notchbar&quot;</span><span class="p">);</span>
389
+ <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span> <span class="s2">&quot;left&quot;</span><span class="o">:</span> <span class="mi">0</span> <span class="p">});</span>
342
390
  <span class="nx">draggable</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
343
391
  <span class="nx">wheel</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
344
392
  <span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s2">&quot;moving&quot;</span><span class="p">,</span> <span class="s2">&quot;doZoom&quot;</span><span class="p">);</span>
345
393
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;dragging scrolled&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">moving</span><span class="p">);</span>
346
394
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;doZoom&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">doZoom</span><span class="p">);</span>
347
- <span class="k">this</span><span class="p">.</span><span class="nx">template</span> <span class="o">=</span> <span class="nx">template</span><span class="p">(</span><span class="s2">&quot;#TS-year_notch_tmpl&quot;</span><span class="p">);</span>
348
395
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;dblclick doubletap&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
349
396
  <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
350
- <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-zoom_in&quot;</span><span class="p">).</span><span class="nx">click</span><span class="p">();</span>
397
+ <span class="nx">that</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-zoom_in&quot;</span><span class="p">).</span><span class="nx">click</span><span class="p">();</span>
351
398
  <span class="p">});</span>
352
399
  <span class="p">};</span>
353
400
  <span class="nx">observable</span><span class="p">(</span><span class="nx">Bar</span><span class="p">.</span><span class="nx">prototype</span><span class="p">);</span>
354
401
  <span class="nx">transformable</span><span class="p">(</span><span class="nx">Bar</span><span class="p">.</span><span class="nx">prototype</span><span class="p">);</span>
355
402
 
356
- <span class="nx">Bar</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Bar</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-54"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-54">&#182;</a> </div> <p>Every time the <code>Bar</code> is moved, it calculates whether the proposed movement
403
+ <span class="nx">Bar</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Bar</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-62"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-62">&#182;</a> </div> <p>Every time the <code>Bar</code> is moved, it calculates whether the proposed movement
357
404
  will move the <code>.TS-notchbar</code> off of its parent. If so, it recaculates
358
405
  <code>deltaX</code> to be a more correct value.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">moving</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
359
406
  <span class="kd">var</span> <span class="nx">parent</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">parent</span><span class="p">();</span>
@@ -367,15 +414,15 @@ will move the <code>.TS-notchbar</code> off of its parent. If so, it recaculates
367
414
  <span class="k">if</span> <span class="p">(</span><span class="nx">offset</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">&gt;</span> <span class="nx">pOffset</span><span class="p">)</span>
368
415
  <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="nx">pOffset</span> <span class="o">-</span> <span class="nx">offset</span><span class="p">;</span>
369
416
 
370
- <span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">&quot;move&quot;</span><span class="p">;</span>
371
- <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
372
- <span class="k">this</span><span class="p">.</span><span class="nx">move</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
373
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-55"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-55">&#182;</a> </div> <p>As the timeline zooms, the <code>Bar</code> tries to keep the current notch (i.e.
417
+ <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;move&quot;</span><span class="p">,</span> <span class="nx">e</span><span class="p">);</span>
418
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;move&quot;</span><span class="p">,</span> <span class="nx">e</span><span class="p">);</span> <span class="c1">// for API</span>
419
+ <span class="k">this</span><span class="p">.</span><span class="nx">move</span><span class="p">(</span><span class="s2">&quot;move&quot;</span><span class="p">,</span> <span class="nx">e</span><span class="p">);</span>
420
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-63"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-63">&#182;</a> </div> <p>As the timeline zooms, the <code>Bar</code> tries to keep the current notch (i.e.
374
421
  <code>.TS-notch_active</code>) as close to its original position as possible.
375
422
  There's a slight bug here because the timeline zooms and then moves the
376
423
  bar to correct for this behaviour, and in future versions we'll fix this.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">doZoom</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">width</span><span class="p">){</span>
377
424
  <span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
378
- <span class="kd">var</span> <span class="nx">notch</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notch_active&quot;</span><span class="p">);</span>
425
+ <span class="kd">var</span> <span class="nx">notch</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notch_active&quot;</span><span class="p">);</span>
379
426
  <span class="kd">var</span> <span class="nx">getCur</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
380
427
  <span class="k">return</span> <span class="nx">notch</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="o">?</span> <span class="nx">notch</span><span class="p">.</span><span class="nx">position</span><span class="p">().</span><span class="nx">left</span> <span class="o">:</span> <span class="mi">0</span><span class="p">;</span>
381
428
  <span class="p">};</span>
@@ -390,163 +437,160 @@ bar to correct for this behaviour, and in future versions we'll fix this.</p>
390
437
  <span class="nx">curr</span> <span class="o">=</span> <span class="nx">getCur</span><span class="p">();</span>
391
438
  <span class="nx">e</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s2">&quot;zoom&quot;</span><span class="p">);</span>
392
439
  <span class="nx">e</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">current</span> <span class="o">+</span> <span class="s2">&quot;%&quot;</span><span class="p">;</span>
393
- <span class="nx">that</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
440
+ <span class="nx">that</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;zoom&quot;</span><span class="p">,</span> <span class="nx">e</span><span class="p">);</span>
394
441
  <span class="p">}</span>
395
442
  <span class="p">});</span>
396
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-56"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-56">&#182;</a> </div> <p>When asked to render the bar places the appropriate timestamp notches
443
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-64"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-64">&#182;</a> </div> <p>When asked to render the bar places the appropriate timestamp notches
397
444
  inside <code>.TS-notchbar</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
398
445
  <span class="kd">var</span> <span class="nx">intervals</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">intervals</span><span class="p">;</span>
399
446
  <span class="kd">var</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bounds</span><span class="p">;</span>
400
447
 
401
448
  <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">intervals</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
402
- <span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">({</span><span class="s1">&#39;timestamp&#39;</span> <span class="o">:</span> <span class="nx">intervals</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">timestamp</span><span class="p">,</span> <span class="s1">&#39;human&#39;</span> <span class="o">:</span> <span class="nx">intervals</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">human</span> <span class="p">});</span>
449
+ <span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="nx">JST</span><span class="p">.</span><span class="nx">year_notch</span><span class="p">({</span><span class="s1">&#39;timestamp&#39;</span> <span class="o">:</span> <span class="nx">intervals</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">timestamp</span><span class="p">,</span> <span class="s1">&#39;human&#39;</span> <span class="o">:</span> <span class="nx">intervals</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">human</span> <span class="p">});</span>
403
450
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">html</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&quot;left&quot;</span><span class="p">,</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">project</span><span class="p">(</span><span class="nx">intervals</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">timestamp</span><span class="p">,</span> <span class="mi">100</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;%&quot;</span><span class="p">));</span>
404
451
  <span class="p">}</span>
405
452
  <span class="p">}</span>
406
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-57"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-57">&#182;</a> </div> <p>The <code>CardScroller</code> mirrors the moving and zooming of the <code>Bar</code> and is the
453
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-65"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-65">&#182;</a> </div> <p>The <code>CardScroller</code> mirrors the moving and zooming of the <code>Bar</code> and is the
407
454
  canvas where individual cards are rendered.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">CardScroller</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">timeline</span><span class="p">){</span>
408
- <span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#TS-card_scroller_inner&quot;</span><span class="p">);</span>
455
+ <span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-card_scroller_inner&quot;</span><span class="p">);</span>
409
456
  <span class="p">};</span>
410
457
  <span class="nx">observable</span><span class="p">(</span><span class="nx">CardScroller</span><span class="p">.</span><span class="nx">prototype</span><span class="p">);</span>
411
- <span class="nx">transformable</span><span class="p">(</span><span class="nx">CardScroller</span><span class="p">.</span><span class="nx">prototype</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-58"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-58">&#182;</a> </div> <p>Each <code>Series</code> picks a unique color and keeps an array of <code>Cards</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Series</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">series</span><span class="p">,</span> <span class="nx">timeline</span><span class="p">)</span> <span class="p">{</span>
458
+ <span class="nx">transformable</span><span class="p">(</span><span class="nx">CardScroller</span><span class="p">.</span><span class="nx">prototype</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-66"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-66">&#182;</a> </div> <p>Each <code>Series</code> picks a unique color and keeps an array of <code>Cards</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Series</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">series</span><span class="p">,</span> <span class="nx">timeline</span><span class="p">)</span> <span class="p">{</span>
412
459
  <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span> <span class="o">=</span> <span class="nx">timeline</span><span class="p">;</span>
413
460
  <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">series</span><span class="p">.</span><span class="nx">series</span><span class="p">;</span>
414
461
  <span class="k">this</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="o">?</span> <span class="nx">color</span><span class="p">()</span> <span class="o">:</span> <span class="s2">&quot;default&quot;</span><span class="p">;</span>
415
462
  <span class="k">this</span><span class="p">.</span><span class="nx">cards</span> <span class="o">=</span> <span class="p">[];</span>
416
463
  <span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s2">&quot;render&quot;</span><span class="p">,</span> <span class="s2">&quot;showNotches&quot;</span><span class="p">,</span> <span class="s2">&quot;hideNotches&quot;</span><span class="p">);</span>
417
- <span class="k">this</span><span class="p">.</span><span class="nx">template</span> <span class="o">=</span> <span class="nx">template</span><span class="p">(</span><span class="s2">&quot;#TS-series_legend_tmpl&quot;</span><span class="p">);</span>
418
- <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
464
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;render&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
419
465
  <span class="p">};</span>
420
466
  <span class="nx">observable</span><span class="p">(</span><span class="nx">Series</span><span class="p">.</span><span class="nx">prototype</span><span class="p">);</span>
421
467
 
422
- <span class="nx">Series</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Series</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-59"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-59">&#182;</a> </div> <p>Create and add a particular card to the cards array.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">add</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">card</span><span class="p">){</span>
468
+ <span class="nx">Series</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Series</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-67"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-67">&#182;</a> </div> <p>Create and add a particular card to the cards array.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">add</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">card</span><span class="p">){</span>
423
469
  <span class="kd">var</span> <span class="nx">crd</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Card</span><span class="p">(</span><span class="nx">card</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
424
470
  <span class="k">this</span><span class="p">.</span><span class="nx">cards</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">crd</span><span class="p">);</span>
425
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-60"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-60">&#182;</a> </div> <p>The comparing function for <code>max</code> and <code>min</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_comparator</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">crd</span><span class="p">){</span>
471
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-68"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-68">&#182;</a> </div> <p>The comparing function for <code>max</code> and <code>min</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_comparator</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">crd</span><span class="p">){</span>
426
472
  <span class="k">return</span> <span class="nx">crd</span><span class="p">.</span><span class="nx">timestamp</span><span class="p">;</span>
427
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-61"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-61">&#182;</a> </div> <p>Inactivate this series legend item and trigger a <code>hideNotch</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">hideNotches</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
473
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-69"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-69">&#182;</a> </div> <p>Inactivate this series legend item and trigger a <code>hideNotch</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">hideNotches</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
428
474
  <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
429
475
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;TS-series_legend_item_inactive&quot;</span><span class="p">);</span>
430
- <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s2">&quot;hideNotch&quot;</span><span class="p">));</span>
431
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-62"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-62">&#182;</a> </div> <p>Activate the legend item and trigger the <code>showNotch</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">showNotches</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
476
+ <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;hideNotch&quot;</span><span class="p">);</span>
477
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-70"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-70">&#182;</a> </div> <p>Activate the legend item and trigger the <code>showNotch</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">showNotches</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
432
478
  <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
433
479
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;TS-series_legend_item_inactive&quot;</span><span class="p">);</span>
434
- <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s2">&quot;showNotch&quot;</span><span class="p">));</span>
435
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-63"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-63">&#182;</a> </div> <p>Create and append the label to <code>.TS-series_nav_container</code> and bind up
480
+ <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;showNotch&quot;</span><span class="p">);</span>
481
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-71"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-71">&#182;</a> </div> <p>Create and append the label to <code>.TS-series_nav_container</code> and bind up
436
482
  <code>hideNotches</code> and <code>showNotches</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
437
- <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">&quot;render&quot;</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
438
483
  <span class="k">if</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="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
439
- <span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="k">this</span><span class="p">));</span>
440
- <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-series_nav_container&quot;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
484
+ <span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">JST</span><span class="p">.</span><span class="nx">series_legend</span><span class="p">(</span><span class="k">this</span><span class="p">));</span>
485
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-series_nav_container&quot;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
441
486
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">toggle</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">hideNotches</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">showNotches</span><span class="p">);</span>
442
487
  <span class="p">}</span>
443
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-64"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-64">&#182;</a> </div> <p>Proxy to underscore for <code>min</code> and <code>max</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span><span class="p">([</span><span class="s2">&quot;min&quot;</span><span class="p">,</span> <span class="s2">&quot;max&quot;</span><span class="p">]).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">){</span>
488
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-72"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-72">&#182;</a> </div> <p>Proxy to underscore for <code>min</code> and <code>max</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span><span class="p">([</span><span class="s2">&quot;min&quot;</span><span class="p">,</span> <span class="s2">&quot;max&quot;</span><span class="p">]).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">){</span>
444
489
  <span class="nx">Series</span><span class="p">.</span><span class="nx">prototype</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
445
490
  <span class="k">return</span> <span class="nx">_</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">call</span><span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">cards</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_comparator</span><span class="p">).</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;timestamp&quot;</span><span class="p">);</span>
446
491
  <span class="p">};</span>
447
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-65"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-65">&#182;</a> </div> <p>Every <code>Card</code> handles a notch div which is immediately appended to the <code>Bar</code>
492
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-73"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-73">&#182;</a> </div> <p>Every <code>Card</code> handles a notch div which is immediately appended to the <code>Bar</code>
448
493
  and a <code>.TS-card_container</code> which is lazily rendered.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Card</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">card</span><span class="p">,</span> <span class="nx">series</span><span class="p">)</span> <span class="p">{</span>
449
494
  <span class="k">this</span><span class="p">.</span><span class="nx">series</span> <span class="o">=</span> <span class="nx">series</span><span class="p">;</span>
450
- <span class="kd">var</span> <span class="nx">card</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">clone</span><span class="p">(</span><span class="nx">card</span><span class="p">);</span>
495
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">;</span>
496
+ <span class="nx">card</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">clone</span><span class="p">(</span><span class="nx">card</span><span class="p">);</span>
451
497
  <span class="k">this</span><span class="p">.</span><span class="nx">timestamp</span> <span class="o">=</span> <span class="nx">card</span><span class="p">.</span><span class="nx">timestamp</span><span class="p">;</span>
452
498
  <span class="k">this</span><span class="p">.</span><span class="nx">attributes</span> <span class="o">=</span> <span class="nx">card</span><span class="p">;</span>
453
499
  <span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">topcolor</span> <span class="o">=</span> <span class="nx">series</span><span class="p">.</span><span class="nx">color</span><span class="p">;</span>
454
-
455
- <span class="k">this</span><span class="p">.</span><span class="nx">template</span> <span class="o">=</span> <span class="nx">template</span><span class="p">(</span><span class="s2">&quot;#TS-card_tmpl&quot;</span><span class="p">);</span>
456
- <span class="k">this</span><span class="p">.</span><span class="nx">ntemplate</span> <span class="o">=</span> <span class="nx">template</span><span class="p">(</span><span class="s2">&quot;#TS-notch_tmpl&quot;</span><span class="p">);</span>
457
500
  <span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s2">&quot;render&quot;</span><span class="p">,</span> <span class="s2">&quot;activate&quot;</span><span class="p">,</span> <span class="s2">&quot;flip&quot;</span><span class="p">,</span> <span class="s2">&quot;setPermalink&quot;</span><span class="p">,</span> <span class="s2">&quot;toggleNotch&quot;</span><span class="p">);</span>
458
- <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">toggleNotch</span><span class="p">);</span>
459
- <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
460
- <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">flip</span><span class="p">);</span>
501
+ <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;hideNotch&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">toggleNotch</span><span class="p">);</span>
502
+ <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;showNotch&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">toggleNotch</span><span class="p">);</span>
503
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;render&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
504
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;flip&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">flip</span><span class="p">);</span>
461
505
  <span class="k">this</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="p">[</span>
462
506
  <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;timestamp&#39;</span><span class="p">),</span>
463
507
  <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;description&#39;</span><span class="p">).</span><span class="nx">split</span><span class="p">(</span><span class="sr">/ /</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/[^a-zA-Z\-]/g</span><span class="p">,</span><span class="s2">&quot;&quot;</span><span class="p">)</span>
464
508
  <span class="p">].</span><span class="nx">join</span><span class="p">(</span><span class="s2">&quot;-&quot;</span><span class="p">);</span>
509
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">cards</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
465
510
  <span class="p">};</span>
466
511
 
467
- <span class="nx">Card</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-66"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-66">&#182;</a> </div> <p>Get a particular attribute by key.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">get</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">){</span>
512
+ <span class="nx">Card</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Card</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-74"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-74">&#182;</a> </div> <p>Get a particular attribute by key.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">get</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">){</span>
468
513
  <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">[</span><span class="nx">key</span><span class="p">];</span>
469
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-67"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-67">&#182;</a> </div> <p>A version of <code>jQuery</code> scoped to the <code>Card</code>'s element.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">query</span><span class="p">){</span>
470
- <span class="k">return</span> <span class="nx">$</span><span class="p">(</span><span class="nx">query</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
471
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-68"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-68">&#182;</a> </div> <p>When each <code>Card</code> is rendered via a render event, it appends a notch to the
514
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-75"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-75">&#182;</a> </div> <p>When each <code>Card</code> is rendered via a render event, it appends a notch to the
472
515
  <code>Bar</code> and binds a click handler so it can be activated. if the <code>Card</code>'s id
473
- is currently selected via <code>window.location.hash</code> it's activated.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
474
- <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">&quot;render&quot;</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
475
- <span class="k">this</span><span class="p">.</span><span class="nx">offset</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">project</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">timestamp</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
476
- <span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">ntemplate</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">);</span>
516
+ is currently selected via <code>window.location.hash</code> it's activated.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
517
+ <span class="k">this</span><span class="p">.</span><span class="nx">offset</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">project</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">timestamp</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
518
+ <span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="nx">JST</span><span class="p">.</span><span class="nx">notch</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">);</span>
477
519
  <span class="k">this</span><span class="p">.</span><span class="nx">notch</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">html</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="s2">&quot;left&quot;</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">offset</span> <span class="o">+</span> <span class="s2">&quot;%&quot;</span><span class="p">});</span>
478
- <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notchbar&quot;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">notch</span><span class="p">);</span>
520
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notchbar&quot;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">notch</span><span class="p">);</span>
479
521
  <span class="k">this</span><span class="p">.</span><span class="nx">notch</span><span class="p">.</span><span class="nx">click</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">activate</span><span class="p">);</span>
480
522
  <span class="k">if</span> <span class="p">(</span><span class="nx">history</span><span class="p">.</span><span class="nx">get</span><span class="p">()</span> <span class="o">===</span> <span class="k">this</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">activate</span><span class="p">();</span>
481
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-69"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-69">&#182;</a> </div> <p>As the <code>Bar</code> moves the current card checks to see if it's outside the viewport,
523
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-76"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-76">&#182;</a> </div> <p>As the <code>Bar</code> moves the current card checks to see if it's outside the viewport,
482
524
  if it is the card is flipped so as to be visible for the longest period
483
- of time. The magic number here (7) is half the width of the css arrow.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">flip</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
484
- <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">!==</span> <span class="s2">&quot;move&quot;</span> <span class="o">||</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">||</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">is</span><span class="p">(</span><span class="s2">&quot;:visible&quot;</span><span class="p">))</span> <span class="k">return</span><span class="p">;</span>
525
+ of time. The magic number here (7) is half the width of the css arrow.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">flip</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
526
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">||</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">is</span><span class="p">(</span><span class="s2">&quot;:visible&quot;</span><span class="p">))</span> <span class="k">return</span><span class="p">;</span>
485
527
  <span class="kd">var</span> <span class="nx">rightEdge</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">();</span>
486
- <span class="kd">var</span> <span class="nx">tRightEdge</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">).</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">();</span>
528
+ <span class="kd">var</span> <span class="nx">tRightEdge</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.timeline_setter&quot;</span><span class="p">).</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.timeline_setter&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">();</span>
487
529
  <span class="kd">var</span> <span class="nx">margin</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s2">&quot;margin-left&quot;</span><span class="p">)</span> <span class="o">===</span> <span class="k">this</span><span class="p">.</span><span class="nx">originalMargin</span><span class="p">;</span>
488
- <span class="kd">var</span> <span class="nx">flippable</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">&lt;</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
489
- <span class="kd">var</span> <span class="nx">offTimeline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">position</span><span class="p">().</span><span class="nx">left</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">&lt;</span> <span class="mi">0</span><span class="p">;</span>
490
- </pre></div> </td> </tr> <tr id="section-70"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-70">&#182;</a> </div> <p>If the card's right edge is more than the timeline's right edge and
530
+ <span class="kd">var</span> <span class="nx">flippable</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">&lt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.timeline_setter&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
531
+ <span class="kd">var</span> <span class="nx">offTimeline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">position</span><span class="p">().</span><span class="nx">left</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">&lt;</span> <span class="mi">0</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-77"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-77">&#182;</a> </div> <p>If the card's right edge is more than the timeline's right edge and
491
532
  it's never been flipped before and it won't go off the timeline when
492
533
  flipped. We'll flip it.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">tRightEdge</span> <span class="o">-</span> <span class="nx">rightEdge</span> <span class="o">&lt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nx">margin</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">offTimeline</span><span class="p">)</span> <span class="p">{</span>
493
534
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span><span class="s2">&quot;margin-left&quot;</span><span class="o">:</span> <span class="o">-</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">+</span> <span class="mi">7</span><span class="p">)});</span>
494
- <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-css_arrow&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="s2">&quot;left&quot;</span> <span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()});</span></pre></div> </td> </tr> <tr id="section-71"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-71">&#182;</a> </div> <p>Otherwise, if the card is off the left side of the timeline and we have
535
+ <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-css_arrow&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="s2">&quot;left&quot;</span> <span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()});</span></pre></div> </td> </tr> <tr id="section-78"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-78">&#182;</a> </div> <p>Otherwise, if the card is off the left side of the timeline and we have
495
536
  flipped it before and the card's width is less than half of the width
496
- of the whole timeline, we'll flip it to the default position.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span> <span class="o">-</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">).</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span> <span class="o">&lt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">margin</span> <span class="o">&amp;&amp;</span> <span class="nx">flippable</span><span class="p">)</span> <span class="p">{</span>
537
+ of the whole timeline, we'll flip it to the default position.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.timeline_setter&quot;</span><span class="p">).</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span> <span class="o">&lt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">margin</span> <span class="o">&amp;&amp;</span> <span class="nx">flippable</span><span class="p">)</span> <span class="p">{</span>
497
538
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span><span class="s2">&quot;margin-left&quot;</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">originalMargin</span><span class="p">});</span>
498
539
  <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-css_arrow&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="s2">&quot;left&quot;</span><span class="o">:</span> <span class="mi">0</span><span class="p">});</span>
499
540
  <span class="p">}</span>
500
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-72"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-72">&#182;</a> </div> <p>The first time a card is activated it renders its <code>template</code> and appends
541
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-79"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-79">&#182;</a> </div> <p>The first time a card is activated it renders its <code>template</code> and appends
501
542
  its element to the <code>Bar</code>. After doing so it sets the width if <code>.TS-item_label</code>
502
543
  and moves the <code>Bar</code> if its element outside the visible portion of the
503
544
  timeline.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">activate</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
545
+ <span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
504
546
  <span class="k">this</span><span class="p">.</span><span class="nx">hideActiveCard</span><span class="p">();</span>
505
547
  <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">)</span> <span class="p">{</span>
506
- <span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">({</span><span class="nx">card</span><span class="o">:</span> <span class="k">this</span><span class="p">}));</span>
548
+ <span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">JST</span><span class="p">.</span><span class="nx">card</span><span class="p">({</span><span class="nx">card</span><span class="o">:</span> <span class="k">this</span><span class="p">}));</span></pre></div> </td> </tr> <tr id="section-80"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-80">&#182;</a> </div> <p>create a <code>this.$</code> scoped to its card.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">queryable</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
549
+
507
550
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span><span class="s2">&quot;left&quot;</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">offset</span> <span class="o">+</span> <span class="s2">&quot;%&quot;</span><span class="p">});</span>
508
- <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#TS-card_scroller_inner&quot;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
551
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-card_scroller_inner&quot;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
509
552
  <span class="k">this</span><span class="p">.</span><span class="nx">originalMargin</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s2">&quot;margin-left&quot;</span><span class="p">);</span>
510
- <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">delegate</span><span class="p">(</span><span class="s2">&quot;.TS-permalink&quot;</span><span class="p">,</span> <span class="s2">&quot;click&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">setPermalink</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-73"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-73">&#182;</a> </div> <p>Reactivate if there are images in the html so we can recalculate
511
- widths and position accordingly.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;img&quot;</span><span class="p">).</span><span class="nx">load</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">activate</span><span class="p">);</span>
553
+ <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">delegate</span><span class="p">(</span><span class="s2">&quot;.TS-permalink&quot;</span><span class="p">,</span> <span class="s2">&quot;click&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">setPermalink</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-81"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-81">&#182;</a> </div> <p>Reactivate if there are images in the html so we can recalculate
554
+ widths and position accordingly.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;img&quot;</span><span class="p">).</span><span class="nx">load</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">activate</span><span class="p">);</span>
512
555
  <span class="p">}</span>
556
+
513
557
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">show</span><span class="p">().</span><span class="nx">addClass</span><span class="p">((</span><span class="s2">&quot;TS-card_active&quot;</span><span class="p">));</span>
514
558
  <span class="k">this</span><span class="p">.</span><span class="nx">notch</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;TS-notch_active&quot;</span><span class="p">);</span>
515
- <span class="k">this</span><span class="p">.</span><span class="nx">setWidth</span><span class="p">();</span>
516
- </pre></div> </td> </tr> <tr id="section-74"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-74">&#182;</a> </div> <p>In the case that the card is outside the bounds the wrong way when
559
+ <span class="k">this</span><span class="p">.</span><span class="nx">setWidth</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-82"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-82">&#182;</a> </div> <p>In the case that the card is outside the bounds the wrong way when
517
560
  it's flipped, we'll take care of it here before we move the actual
518
- card. </p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">flip</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s2">&quot;move&quot;</span><span class="p">));</span>
561
+ card.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">flip</span><span class="p">();</span>
519
562
  <span class="k">this</span><span class="p">.</span><span class="nx">move</span><span class="p">();</span>
520
- <span class="p">},</span>
521
- </pre></div> </td> </tr> <tr id="section-75"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-75">&#182;</a> </div> <p>For Internet Explorer each card sets the width of<code>.TS-item_label</code> to
563
+ <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;cardActivate&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">);</span>
564
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-83"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-83">&#182;</a> </div> <p>For Internet Explorer each card sets the width of<code>.TS-item_label</code> to
522
565
  the maximum width of the card's children, or if that is less than the
523
566
  <code>.TS-item_year</code> element's width, <code>.TS-item_label</code> gets <code>.TS-item_year</code>s
524
567
  width. Which is a funny way of saying, if you'd like to set the width of
525
568
  the card as a whole, fiddle with <code>.TS-item_year</code>s width.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setWidth</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
526
- <span class="kd">var</span> <span class="nx">max</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">toArray</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item_user_html&quot;</span><span class="p">).</span><span class="nx">children</span><span class="p">()),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">el</span><span class="p">){</span> <span class="k">return</span> <span class="nx">$</span><span class="p">(</span><span class="nx">el</span><span class="p">).</span><span class="nx">width</span><span class="p">();</span> <span class="p">});</span>
527
- <span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">max</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item_year&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">())</span> <span class="p">{</span>
528
- <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item_label&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&quot;width&quot;</span><span class="p">,</span> <span class="nx">$</span><span class="p">(</span><span class="nx">max</span><span class="p">).</span><span class="nx">width</span><span class="p">());</span>
569
+ <span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
570
+ <span class="kd">var</span> <span class="nx">max</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">toArray</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item_user_html&quot;</span><span class="p">).</span><span class="nx">children</span><span class="p">()),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">el</span><span class="p">){</span> <span class="k">return</span> <span class="nx">that</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="nx">el</span><span class="p">).</span><span class="nx">width</span><span class="p">();</span> <span class="p">});</span>
571
+ <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="nx">max</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item_year&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">())</span> <span class="p">{</span>
572
+ <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item_label&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&quot;width&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="nx">max</span><span class="p">).</span><span class="nx">width</span><span class="p">());</span>
529
573
  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
530
574
  <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item_label&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&quot;width&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item_year&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">());</span>
531
575
  <span class="p">}</span>
532
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-76"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-76">&#182;</a> </div> <p>Move the <code>Bar</code> if the card is outside the visible region on activation.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">move</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
576
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-84"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-84">&#182;</a> </div> <p>Move the <code>Bar</code> if the card is outside the visible region on activation.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">move</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
533
577
  <span class="kd">var</span> <span class="nx">e</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s1">&#39;moving&#39;</span><span class="p">);</span>
534
578
  <span class="kd">var</span> <span class="nx">offset</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">offset</span><span class="p">();</span>
535
- <span class="kd">var</span> <span class="nx">toffset</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">).</span><span class="nx">offset</span><span class="p">();</span>
579
+ <span class="kd">var</span> <span class="nx">toffset</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.timeline_setter&quot;</span><span class="p">).</span><span class="nx">offset</span><span class="p">();</span>
536
580
  <span class="k">if</span> <span class="p">(</span><span class="nx">offset</span><span class="p">.</span><span class="nx">left</span> <span class="o">&lt;</span> <span class="nx">toffset</span><span class="p">.</span><span class="nx">left</span><span class="p">)</span> <span class="p">{</span>
537
581
  <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="nx">toffset</span><span class="p">.</span><span class="nx">left</span> <span class="o">-</span> <span class="nx">offset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="nx">cleanNumber</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&quot;padding-left&quot;</span><span class="p">));</span>
538
- <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">moving</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
539
- <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">offset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">outerWidth</span><span class="p">()</span> <span class="o">&gt;</span> <span class="nx">toffset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">())</span> <span class="p">{</span>
540
- <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="nx">toffset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">-</span> <span class="p">(</span><span class="nx">offset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">outerWidth</span><span class="p">());</span>
541
- <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">moving</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
582
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">moving</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
583
+ <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">offset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">outerWidth</span><span class="p">()</span> <span class="o">&gt;</span> <span class="nx">toffset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.timeline_setter&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">())</span> <span class="p">{</span>
584
+ <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="nx">toffset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.timeline_setter&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">-</span> <span class="p">(</span><span class="nx">offset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">outerWidth</span><span class="p">());</span>
585
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">moving</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
542
586
  <span class="p">}</span>
543
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-77"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-77">&#182;</a> </div> <p>The click handler to set the current hash to the <code>Card</code>'s id.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setPermalink</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
587
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-85"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-85">&#182;</a> </div> <p>The click handler to set the current hash to the <code>Card</code>'s id.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setPermalink</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
544
588
  <span class="nx">history</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
545
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-78"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-78">&#182;</a> </div> <p>Globally hide any cards with <code>TS-card_active</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">hideActiveCard</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
546
- <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-card_active&quot;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;TS-card_active&quot;</span><span class="p">).</span><span class="nx">hide</span><span class="p">();</span>
547
- <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notch_active&quot;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;TS-notch_active&quot;</span><span class="p">);</span>
548
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-79"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-79">&#182;</a> </div> <p>An event listener to toggle this notche on and off via <code>Series</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggleNotch</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
549
- <span class="k">switch</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span><span class="p">)</span> <span class="p">{</span>
589
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-86"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-86">&#182;</a> </div> <p>Globally hide any cards with <code>TS-card_active</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">hideActiveCard</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
590
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-card_active&quot;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;TS-card_active&quot;</span><span class="p">).</span><span class="nx">hide</span><span class="p">();</span>
591
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notch_active&quot;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;TS-notch_active&quot;</span><span class="p">);</span>
592
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-87"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-87">&#182;</a> </div> <p>An event listener to toggle this notch on and off via <code>Series</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggleNotch</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
593
+ <span class="k">switch</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
550
594
  <span class="k">case</span> <span class="s2">&quot;hideNotch&quot;</span><span class="o">:</span>
551
595
  <span class="k">this</span><span class="p">.</span><span class="nx">notch</span><span class="p">.</span><span class="nx">hide</span><span class="p">().</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;TS-notch_active&quot;</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;TS-series_inactive&quot;</span><span class="p">);</span>
552
596
  <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
@@ -556,44 +600,45 @@ the card as a whole, fiddle with <code>.TS-item_year</code>s width.</p>
556
600
  <span class="p">}</span>
557
601
  <span class="p">}</span>
558
602
 
559
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-80"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-80">&#182;</a> </div> <p>Simple inheritance helper for <code>Controls</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">ctor</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){};</span>
603
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-88"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-88">&#182;</a> </div> <p>Simple inheritance helper for <code>Controls</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">ctor</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){};</span>
560
604
  <span class="kd">var</span> <span class="nx">inherits</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">child</span><span class="p">,</span> <span class="nx">parent</span><span class="p">){</span>
561
605
  <span class="nx">ctor</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">prototype</span><span class="p">;</span>
562
606
  <span class="nx">child</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ctor</span><span class="p">();</span>
563
607
  <span class="nx">child</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">constructor</span> <span class="o">=</span> <span class="nx">child</span><span class="p">;</span>
564
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-81"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-81">&#182;</a> </div> <h2>Controls</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-82"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-82">&#182;</a> </div> <p>Each control is basically a callback wrapper for a given DOM element.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Control</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">direction</span><span class="p">){</span>
608
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-89"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-89">&#182;</a> </div> <h2>Controls</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-90"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-90">&#182;</a> </div> <p>Each control is basically a callback wrapper for a given DOM element.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Control</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">direction</span><span class="p">,</span> <span class="nx">timeline</span><span class="p">){</span>
609
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span> <span class="o">=</span> <span class="nx">timeline</span><span class="p">;</span>
565
610
  <span class="k">this</span><span class="p">.</span><span class="nx">direction</span> <span class="o">=</span> <span class="nx">direction</span><span class="p">;</span>
566
- <span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">prefix</span> <span class="o">+</span> <span class="nx">direction</span><span class="p">);</span>
611
+ <span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">prefix</span> <span class="o">+</span> <span class="nx">direction</span><span class="p">);</span>
567
612
  <span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
568
613
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="nx">that</span><span class="p">.</span><span class="nx">click</span><span class="p">(</span><span class="nx">e</span><span class="p">);});</span>
569
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-83"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-83">&#182;</a> </div> <p>Each <code>Zoom</code> control adjusts the <code>curZoom</code> when clicked.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">curZoom</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>
570
- <span class="kd">var</span> <span class="nx">Zoom</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">direction</span><span class="p">)</span> <span class="p">{</span>
614
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-91"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-91">&#182;</a> </div> <p>Each <code>Zoom</code> control adjusts the <code>curZoom</code> when clicked.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">curZoom</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>
615
+ <span class="kd">var</span> <span class="nx">Zoom</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">direction</span><span class="p">,</span> <span class="nx">timeline</span><span class="p">)</span> <span class="p">{</span>
571
616
  <span class="nx">Control</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="nx">arguments</span><span class="p">);</span>
572
617
  <span class="p">};</span>
573
618
  <span class="nx">inherits</span><span class="p">(</span><span class="nx">Zoom</span><span class="p">,</span> <span class="nx">Control</span><span class="p">);</span>
574
619
 
575
620
  <span class="nx">Zoom</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Zoom</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span>
576
- <span class="nx">prefix</span> <span class="o">:</span> <span class="s2">&quot;.TS-zoom_&quot;</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-84"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-84">&#182;</a> </div> <p>Adjust the <code>curZoom</code> up or down by 100 and trigger a <code>doZoom</code> event on
621
+ <span class="nx">prefix</span> <span class="o">:</span> <span class="s2">&quot;.TS-zoom_&quot;</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-92"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-92">&#182;</a> </div> <p>Adjust the <code>curZoom</code> up or down by 100 and trigger a <code>doZoom</code> event on
577
622
  <code>.TS-notchbar</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">click</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
578
623
  <span class="nx">curZoom</span> <span class="o">+=</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">direction</span> <span class="o">===</span> <span class="s2">&quot;in&quot;</span> <span class="o">?</span> <span class="o">+</span><span class="mi">100</span> <span class="o">:</span> <span class="o">-</span><span class="mi">100</span><span class="p">);</span>
579
624
  <span class="k">if</span> <span class="p">(</span><span class="nx">curZoom</span> <span class="o">&gt;=</span> <span class="mi">100</span><span class="p">)</span> <span class="p">{</span>
580
- <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notchbar&quot;</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;doZoom&#39;</span><span class="p">,</span> <span class="p">[</span><span class="nx">curZoom</span><span class="p">]);</span>
625
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notchbar&quot;</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;doZoom&#39;</span><span class="p">,</span> <span class="p">[</span><span class="nx">curZoom</span><span class="p">]);</span>
581
626
  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
582
627
  <span class="nx">curZoom</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>
583
628
  <span class="p">}</span>
584
629
  <span class="p">}</span>
585
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-85"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-85">&#182;</a> </div> <p>Each <code>Chooser</code> activates the next or previous notch.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Chooser</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">direction</span><span class="p">)</span> <span class="p">{</span>
630
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-93"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-93">&#182;</a> </div> <p>Each <code>Chooser</code> activates the next or previous notch.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Chooser</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">direction</span><span class="p">,</span> <span class="nx">timeline</span><span class="p">)</span> <span class="p">{</span>
586
631
  <span class="nx">Control</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="nx">arguments</span><span class="p">);</span>
587
- <span class="k">this</span><span class="p">.</span><span class="nx">notches</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notch&quot;</span><span class="p">);</span>
632
+ <span class="k">this</span><span class="p">.</span><span class="nx">notches</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notch&quot;</span><span class="p">);</span>
588
633
  <span class="p">};</span>
589
634
  <span class="nx">inherits</span><span class="p">(</span><span class="nx">Chooser</span><span class="p">,</span> <span class="nx">Control</span><span class="p">);</span>
590
635
 
591
636
  <span class="nx">Chooser</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Control</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span>
592
- <span class="nx">prefix</span><span class="o">:</span> <span class="s2">&quot;.TS-choose_&quot;</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-86"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-86">&#182;</a> </div> <p>Figure out which notch to activate and do so by triggering a click on
637
+ <span class="nx">prefix</span><span class="o">:</span> <span class="s2">&quot;.TS-choose_&quot;</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-94"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-94">&#182;</a> </div> <p>Figure out which notch to activate and do so by triggering a click on
593
638
  that notch.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">click</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
594
639
  <span class="kd">var</span> <span class="nx">el</span><span class="p">;</span>
595
640
  <span class="kd">var</span> <span class="nx">notches</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">notches</span><span class="p">.</span><span class="nx">not</span><span class="p">(</span><span class="s2">&quot;.TS-series_inactive&quot;</span><span class="p">);</span>
596
- <span class="kd">var</span> <span class="nx">curCardIdx</span> <span class="o">=</span> <span class="nx">notches</span><span class="p">.</span><span class="nx">index</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notch_active&quot;</span><span class="p">));</span>
641
+ <span class="kd">var</span> <span class="nx">curCardIdx</span> <span class="o">=</span> <span class="nx">notches</span><span class="p">.</span><span class="nx">index</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notch_active&quot;</span><span class="p">));</span>
597
642
  <span class="kd">var</span> <span class="nx">numOfCards</span> <span class="o">=</span> <span class="nx">notches</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
598
643
  <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">direction</span> <span class="o">===</span> <span class="s2">&quot;next&quot;</span><span class="p">)</span> <span class="p">{</span>
599
644
  <span class="nx">el</span> <span class="o">=</span> <span class="p">(</span><span class="nx">curCardIdx</span> <span class="o">&lt;</span> <span class="nx">numOfCards</span> <span class="o">?</span> <span class="nx">notches</span><span class="p">.</span><span class="nx">eq</span><span class="p">(</span><span class="nx">curCardIdx</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">:</span> <span class="kc">false</span><span class="p">);</span>
@@ -603,38 +648,82 @@ that notch.</p> </td> <td class="code"> <d
603
648
  <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">el</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
604
649
  <span class="nx">el</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;click&quot;</span><span class="p">);</span>
605
650
  <span class="p">}</span>
606
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-87"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-87">&#182;</a> </div> <p>Finally, let's create the whole timeline. Boot is exposed globally via
607
- <code>TimelineSetter.Timeline.boot()</code> which takes the JSON generated by
608
- the timeline-setter binary as an argument. This is handy if you want
609
- to be able to generate timelines at arbitrary times (say, for example,
610
- in an ajax callback).</p>
611
-
612
- <p>In the default install of TimelineSetter, Boot is called in the generated
613
- HTML. We'll kick everything off by creating a <code>Timeline</code>, some <code>Controls</code>
614
- and binding to <code>"keydown"</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Timeline</span><span class="p">.</span><span class="nx">boot</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
615
- <span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
616
-
617
- <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">timeline</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Timeline</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
618
-
619
- <span class="k">new</span> <span class="nx">Zoom</span><span class="p">(</span><span class="s2">&quot;in&quot;</span><span class="p">);</span>
620
- <span class="k">new</span> <span class="nx">Zoom</span><span class="p">(</span><span class="s2">&quot;out&quot;</span><span class="p">);</span>
621
- <span class="kd">var</span> <span class="nx">chooseNext</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Chooser</span><span class="p">(</span><span class="s2">&quot;next&quot;</span><span class="p">);</span>
622
- <span class="kd">var</span> <span class="nx">choosePrev</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Chooser</span><span class="p">(</span><span class="s2">&quot;prev&quot;</span><span class="p">);</span>
623
- <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-card_active&quot;</span><span class="p">).</span><span class="nx">is</span><span class="p">(</span><span class="s2">&quot;*&quot;</span><span class="p">))</span> <span class="nx">chooseNext</span><span class="p">.</span><span class="nx">click</span><span class="p">();</span>
624
-
625
- <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;keydown&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
626
- <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">===</span> <span class="mi">39</span><span class="p">)</span> <span class="p">{</span>
627
- <span class="nx">chooseNext</span><span class="p">.</span><span class="nx">click</span><span class="p">();</span>
628
- <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">===</span> <span class="mi">37</span><span class="p">)</span> <span class="p">{</span>
629
- <span class="nx">choosePrev</span><span class="p">.</span><span class="nx">click</span><span class="p">();</span>
630
- <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
631
- <span class="k">return</span><span class="p">;</span>
632
- <span class="p">}</span>
633
- <span class="p">});</span>
651
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-95"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-95">&#182;</a> </div> <h2>JS API</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-96"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-96">&#182;</a> </div> <p>The TimelineSetter JS API allows you to listen to certain
652
+ timeline events, and activate cards programmatically.
653
+ To take advantage of it, assign the timeline boot function to a variable
654
+ like so:</p>
655
+
656
+ <pre><code>var currentTimeline = TimelineSetter.Timeline.boot(
657
+ [data], {config}
658
+ );
659
+ </code></pre>
660
+
661
+ <p>then call methods on the <code>currentTimeline.api</code> object</p>
662
+
663
+ <pre><code>currentTimeline.api.onLoad(function() {
664
+ console.log("I'm ready");
665
+ });
666
+ </code></pre> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">Api</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">timeline</span><span class="p">)</span> <span class="p">{</span>
667
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span> <span class="o">=</span> <span class="nx">timeline</span><span class="p">;</span>
668
+ <span class="p">};</span>
669
+
670
+ <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">Api</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">Api</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-97"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-97">&#182;</a> </div> <p>Register a callback for when the timeline is loaded</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onLoad</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">cb</span><span class="p">)</span> <span class="p">{</span>
671
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;load&#39;</span><span class="p">,</span> <span class="nx">cb</span><span class="p">);</span>
672
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-98"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-98">&#182;</a> </div> <p>Register a callback for when a card is added to the timeline
673
+ Callback has access to the event name and the card object</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onCardAdd</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">cb</span><span class="p">)</span> <span class="p">{</span>
674
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;cardAdd&#39;</span><span class="p">,</span> <span class="nx">cb</span><span class="p">);</span>
675
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-99"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-99">&#182;</a> </div> <p>Register a callback for when a card is activated.
676
+ Callback has access to the event name and the card object</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onCardActivate</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">cb</span><span class="p">)</span> <span class="p">{</span>
677
+ <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;cardActivate&#39;</span><span class="p">,</span> <span class="nx">cb</span><span class="p">);</span>
678
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-100"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-100">&#182;</a> </div> <p>Register a callback for when the bar is moved or zoomed.
679
+ Be careful with this one: Bar move events can be fast
680
+ and furious, especially with scroll wheels in Safari.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onBarMove</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">cb</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-101"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-101">&#182;</a> </div> <p>Bind a 'move' event to the timeline, because
681
+ at this point, <code>timeline.bar</code> isn't available yet.
682
+ To get around this, we'll trigger the bar's
683
+ timeline's move event when the bar is moved.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;move&#39;</span><span class="p">,</span> <span class="nx">cb</span><span class="p">);</span>
684
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-102"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-102">&#182;</a> </div> <p>Show the card matching a given timestamp
685
+ Right now, timelines only support one card per timestamp</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">activateCard</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">timestamp</span><span class="p">)</span> <span class="p">{</span>
686
+ <span class="nx">_</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">cards</span><span class="p">).</span><span class="nx">detect</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">card</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">card</span><span class="p">.</span><span class="nx">timestamp</span> <span class="o">===</span> <span class="nx">timestamp</span><span class="p">;</span> <span class="p">}).</span><span class="nx">activate</span><span class="p">();</span>
687
+ <span class="p">}</span>
688
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-103"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-103">&#182;</a> </div> <p>Global TS keydown function to bind key events to the
689
+ current global currentTimeline.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">bindKeydowns</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
690
+ <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;keydown&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
691
+ <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">===</span> <span class="mi">39</span><span class="p">)</span> <span class="p">{</span>
692
+ <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">currentTimeline</span><span class="p">.</span><span class="nx">chooseNext</span><span class="p">.</span><span class="nx">click</span><span class="p">();</span>
693
+ <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">===</span> <span class="mi">37</span><span class="p">)</span> <span class="p">{</span>
694
+ <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">currentTimeline</span><span class="p">.</span><span class="nx">choosePrev</span><span class="p">.</span><span class="nx">click</span><span class="p">();</span>
695
+ <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
696
+ <span class="k">return</span><span class="p">;</span>
697
+ <span class="p">}</span>
634
698
  <span class="p">});</span>
699
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-104"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-104">&#182;</a> </div> <p>Finally, let's create the whole timeline. Boot is exposed globally via
700
+ <code>TimelineSetter.Timeline.boot()</code> which takes the JSON generated by
701
+ the timeline-setter binary as its first argument, and a config hash as its second.
702
+ The config hash looks for a container element, an interval for interval notches
703
+ and a formatter function for dates. All of these are optional.</p>
704
+
705
+ <p>We also initialize a new API object for each timeline, accessible via the
706
+ timeline variable's <code>api</code> method (e.g. <code>currentTimeline.api</code>) and look for
707
+ how many timelines are globally on the page for keydown purposes. We'll only
708
+ bind keydowns globally if there's only one timeline on the page.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Timeline</span><span class="p">.</span><span class="nx">boot</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
709
+ <span class="kd">var</span> <span class="nx">timeline</span> <span class="o">=</span> <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">timeline</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Timeline</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">config</span> <span class="o">||</span> <span class="p">{});</span>
710
+ <span class="kd">var</span> <span class="nx">api</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">Api</span><span class="p">(</span><span class="nx">timeline</span><span class="p">);</span>
711
+
712
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">pageTimelines</span><span class="p">)</span> <span class="p">{</span>
713
+ <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">currentTimeline</span> <span class="o">=</span> <span class="nx">timeline</span><span class="p">;</span>
714
+ <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">bindKeydowns</span><span class="p">();</span>
715
+ <span class="p">}</span>
635
716
 
717
+ <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">pageTimelines</span> <span class="o">=</span> <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">pageTimelines</span> <span class="o">?</span> <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">pageTimelines</span> <span class="o">+=</span> <span class="mi">1</span> <span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
718
+
719
+ <span class="nx">$</span><span class="p">(</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
720
+
721
+ <span class="k">return</span> <span class="p">{</span>
722
+ <span class="nx">timeline</span> <span class="o">:</span> <span class="nx">timeline</span><span class="p">,</span>
723
+ <span class="nx">api</span> <span class="o">:</span> <span class="nx">api</span>
724
+ <span class="p">};</span>
636
725
  <span class="p">};</span>
637
726
 
638
- <span class="p">})();</span>
727
+ <span class="p">})(</span><span class="nx">jQuery</span><span class="p">);</span>
639
728
 
640
729
  </pre></div> </td> </tr> </tbody> </table> </div> </body> </html>