timeline_setter 0.3.0 → 0.3.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. data/Rakefile +4 -4
  2. data/doc/doc.markdown +50 -27
  3. data/doc/timeline-setter.html +170 -119
  4. data/doc/twitter-demo.html +4 -57
  5. data/documentation/TimelineSetter/CLI.html +87 -78
  6. data/documentation/TimelineSetter/Parser.html +45 -31
  7. data/documentation/TimelineSetter/Timeline.html +70 -48
  8. data/documentation/TimelineSetter.html +6 -4
  9. data/documentation/_index.html +4 -4
  10. data/documentation/css/full_list.css +2 -0
  11. data/documentation/css/style.css +12 -10
  12. data/documentation/file.README.html +22 -18
  13. data/documentation/frames.html +1 -1
  14. data/documentation/index.html +22 -18
  15. data/documentation/js/app.js +4 -4
  16. data/documentation/js/full_list.js +29 -6
  17. data/documentation/method_list.html +19 -19
  18. data/documentation/top-level-namespace.html +5 -3
  19. data/index.html +42 -15
  20. data/lib/timeline_setter/cli.rb +2 -1
  21. data/lib/timeline_setter/timeline.rb +1 -1
  22. data/lib/timeline_setter/version.rb +1 -1
  23. data/public/javascripts/timeline-setter.js +117 -57
  24. data/public/javascripts/vendor/jquery-min.js +4 -16
  25. data/public/javascripts/vendor/jquery.js +9404 -0
  26. data/public/javascripts/vendor/underscore-min.js +26 -21
  27. data/public/javascripts/vendor/underscore.js +999 -0
  28. data/spec/test_data.csv +3 -3
  29. data/spec/timeline-debug.html +19 -0
  30. data/templates/timeline-markup.erb +25 -1
  31. data/timeline_setter.gemspec +11 -10
  32. metadata +9 -8
data/doc/timeline-setter.html CHANGED
@@ -1,5 +1,5 @@
1
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>
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.1&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
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
@@ -41,7 +41,7 @@ Most of this is inspired by polymaps.</p> </td> <td clas
41
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>
42
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>
43
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>
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>
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>
45
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>
46
46
  <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
47
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>
@@ -50,12 +50,12 @@ Most of this is inspired by polymaps.</p> </td> <td clas
50
50
  <span class="p">});</span>
51
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>
52
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>
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>
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>
54
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>
55
55
  <span class="nx">drag</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
56
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>
57
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>
58
- <span class="p">};</span>
58
+ <span class="p">}</span>
59
59
 
60
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>
61
61
 
@@ -73,7 +73,7 @@ Most of this is inspired by polymaps.</p> </td> <td clas
73
73
 
74
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>
75
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>
76
- <span class="p">};</span>
76
+ <span class="p">}</span>
77
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
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
79
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>
@@ -83,11 +83,11 @@ to dampen the effects.</p> </td> <td class="code">
83
83
  <span class="k">if</span> <span class="p">(</span><span class="nx">safari</span><span class="p">){</span>
84
84
  <span class="kd">var</span> <span class="nx">negative</span> <span class="o">=</span> <span class="nx">delta</span> <span class="o">&lt;</span> <span class="mi">0</span> <span class="o">?</span> <span class="o">-</span><span class="mi">1</span> <span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
85
85
  <span class="nx">delta</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">delta</span><span class="p">))</span> <span class="o">*</span> <span class="nx">negative</span> <span class="o">*</span> <span class="mi">2</span><span class="p">;</span>
86
- <span class="p">};</span>
86
+ <span class="p">}</span>
87
87
  <span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">&quot;scrolled&quot;</span><span class="p">;</span>
88
88
  <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="nx">delta</span><span class="p">;</span>
89
89
  <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>
90
- <span class="p">};</span>
90
+ <span class="p">}</span>
91
91
 
92
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>
93
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>
@@ -143,6 +143,14 @@ Pass an override function in the config object to override.</p> </td
143
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
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>
145
145
  <span class="k">switch</span> <span class="p">(</span><span class="nx">interval</span><span class="p">)</span> <span class="p">{</span>
146
+ <span class="k">case</span> <span class="s2">&quot;Millennium&quot;</span><span class="o">:</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>
148
+ <span class="k">case</span> <span class="s2">&quot;Quincentenary&quot;</span><span class="o">:</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>
150
+ <span class="k">case</span> <span class="s2">&quot;Century&quot;</span><span class="o">:</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>
152
+ <span class="k">case</span> <span class="s2">&quot;HalfCentury&quot;</span><span class="o">:</span>
153
+ <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">year</span><span class="p">;</span>
146
154
  <span class="k">case</span> <span class="s2">&quot;Decade&quot;</span><span class="o">:</span>
147
155
  <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">year</span><span class="p">;</span>
148
156
  <span class="k">case</span> <span class="s2">&quot;Lustrum&quot;</span><span class="o">:</span>
@@ -157,6 +165,10 @@ Pass an override function in the config object to override.</p> </td
157
165
  <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">date</span><span class="p">;</span>
158
166
  <span class="k">case</span> <span class="s2">&quot;Hours&quot;</span><span class="o">:</span>
159
167
  <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">hourWithMinutes</span><span class="p">;</span>
168
+ <span class="k">case</span> <span class="s2">&quot;HalfHour&quot;</span><span class="o">:</span>
169
+ <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">hourWithMinutes</span><span class="p">;</span>
170
+ <span class="k">case</span> <span class="s2">&quot;QuarterHour&quot;</span><span class="o">:</span>
171
+ <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">hourWithMinutes</span><span class="p">;</span>
160
172
  <span class="k">case</span> <span class="s2">&quot;Minutes&quot;</span><span class="o">:</span>
161
173
  <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">hourWithMinutes</span><span class="p">;</span>
162
174
  <span class="k">case</span> <span class="s2">&quot;Seconds&quot;</span><span class="o">:</span>
@@ -165,87 +177,124 @@ Pass an override function in the config object to override.</p> </td
165
177
  <span class="p">};</span>
166
178
 
167
179
  <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>
168
- <span class="nx">Decade</span> <span class="o">:</span> <span class="mi">315360000000</span><span class="p">,</span>
169
- <span class="nx">Lustrum</span> <span class="o">:</span> <span class="mi">157680000000</span><span class="p">,</span>
170
- <span class="nx">FullYear</span> <span class="o">:</span> <span class="mi">31536000000</span><span class="p">,</span>
171
- <span class="nx">Month</span> <span class="o">:</span> <span class="mi">2592000000</span><span class="p">,</span>
172
- <span class="nx">Week</span> <span class="o">:</span> <span class="mi">604800000</span><span class="p">,</span>
173
- <span class="nb">Date</span> <span class="o">:</span> <span class="mi">86400000</span><span class="p">,</span>
174
- <span class="nx">Hours</span> <span class="o">:</span> <span class="mi">3600000</span><span class="p">,</span>
175
- <span class="nx">Minutes</span> <span class="o">:</span> <span class="mi">60000</span><span class="p">,</span>
176
- <span class="nx">Seconds</span> <span class="o">:</span> <span class="mi">1000</span>
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
180
+ <span class="nx">Millennium</span> <span class="o">:</span> <span class="mi">69379200000000</span><span class="p">,</span> <span class="c1">// 2200 years is the trigger</span>
181
+ <span class="nx">Quincentenary</span> <span class="o">:</span> <span class="mi">34689600000000</span><span class="p">,</span> <span class="c1">// 1100 years is the trigger</span>
182
+ <span class="nx">Century</span> <span class="o">:</span> <span class="mi">9460800000000</span><span class="p">,</span> <span class="c1">// 300 years is the trigger</span>
183
+ <span class="nx">HalfCentury</span> <span class="o">:</span> <span class="mi">3153600000000</span><span class="p">,</span> <span class="c1">// 100 years is the trigger</span>
184
+ <span class="nx">Decade</span> <span class="o">:</span> <span class="mi">315360000000</span><span class="p">,</span>
185
+ <span class="nx">Lustrum</span> <span class="o">:</span> <span class="mi">157680000000</span><span class="p">,</span>
186
+ <span class="nx">FullYear</span> <span class="o">:</span> <span class="mi">31536000000</span><span class="p">,</span>
187
+ <span class="nx">Month</span> <span class="o">:</span> <span class="mi">2592000000</span><span class="p">,</span>
188
+ <span class="nx">Week</span> <span class="o">:</span> <span class="mi">604800000</span><span class="p">,</span>
189
+ <span class="nb">Date</span> <span class="o">:</span> <span class="mi">86400000</span><span class="p">,</span>
190
+ <span class="nx">Hours</span> <span class="o">:</span> <span class="mi">3600000</span><span class="p">,</span>
191
+ <span class="nx">HalfHour</span> <span class="o">:</span> <span class="mi">1800000</span><span class="p">,</span>
192
+ <span class="nx">QuarterHour</span> <span class="o">:</span> <span class="mi">900000</span><span class="p">,</span>
193
+ <span class="nx">Minutes</span> <span class="o">:</span> <span class="mi">60000</span><span class="p">,</span>
194
+ <span class="nx">Seconds</span> <span class="o">:</span> <span class="mi">1000</span> <span class="c1">// 1,000 millliseconds equals on second</span>
195
+ <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>
196
+ <span class="s1">&#39;Seconds&#39;</span><span class="p">,</span>
197
+ <span class="s1">&#39;Minutes&#39;</span><span class="p">,</span>
198
+ <span class="s1">&#39;QuarterHour&#39;</span><span class="p">,</span>
199
+ <span class="s1">&#39;HalfHour&#39;</span><span class="p">,</span>
200
+ <span class="s1">&#39;Hours&#39;</span><span class="p">,</span>
201
+ <span class="s1">&#39;Date&#39;</span><span class="p">,</span>
202
+ <span class="s1">&#39;Week&#39;</span><span class="p">,</span>
203
+ <span class="s1">&#39;Month&#39;</span><span class="p">,</span>
204
+ <span class="s1">&#39;FullYear&#39;</span><span class="p">,</span>
205
+ <span class="s1">&#39;Lustrum&#39;</span><span class="p">,</span>
206
+ <span class="s1">&#39;Decade&#39;</span><span class="p">,</span>
207
+ <span class="s1">&#39;HalfCentury&#39;</span><span class="p">,</span>
208
+ <span class="s1">&#39;Century&#39;</span><span class="p">,</span>
209
+ <span class="s1">&#39;Quincentenary&#39;</span><span class="p">,</span>
210
+ <span class="s1">&#39;Millennium&#39;</span>
211
+ <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>The year adjustment used for supra-year intervals.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">YEAR_FRACTIONS</span> <span class="o">:</span> <span class="p">{</span>
212
+ <span class="nx">Millenium</span> <span class="o">:</span> <span class="mi">1000</span><span class="p">,</span>
213
+ <span class="nx">Quincentenary</span> <span class="o">:</span> <span class="mi">500</span><span class="p">,</span>
214
+ <span class="nx">Century</span> <span class="o">:</span> <span class="mi">100</span><span class="p">,</span>
215
+ <span class="nx">HalfCentury</span> <span class="o">:</span> <span class="mi">50</span><span class="p">,</span>
216
+ <span class="nx">Decade</span> <span class="o">:</span> <span class="mi">10</span><span class="p">,</span>
217
+ <span class="nx">Lustrum</span> <span class="o">:</span> <span class="mi">5</span>
218
+ <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>A test to find the appropriate range of intervals, for example if a range of
178
219
  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>
179
220
  <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>
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>
221
+ <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>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
222
  <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>
182
223
  <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>
183
224
  <span class="p">}</span>
184
225
  <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>
226
+ <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 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>
186
227
  <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>
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.
188
- Decades are defined in the conventional (ie. 60s) sense,
189
- instead of the more precise mathematical method that starts
190
- with year one. For example, the current decade runs from 2010-2019.
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>
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>
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
194
- as an integer. A lustrum is a fancy Roman word for a "five-year period."
195
- You can read more about it <a href="http://en.wikipedia.org/wiki/Lustrum">here</a>.
196
- This all means that if you pass in the year 2011 you'll get 2010 back.
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>
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>
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>
228
+ <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>Floor the year to a given epoch.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getYearFloor</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="nx">intvl</span><span class="p">){</span>
229
+ <span class="kd">var</span> <span class="nx">fudge</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">YEAR_FRACTIONS</span><span class="p">[</span><span class="nx">intvl</span><span class="p">]</span> <span class="o">||</span> <span class="mi">1</span><span class="p">;</span>
230
+ <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="nx">fudge</span> <span class="o">|</span> <span class="mi">0</span><span class="p">)</span> <span class="o">*</span> <span class="nx">fudge</span><span class="p">;</span>
231
+ <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 with the year set to the next interval in a given epoch.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getYearCeil</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="nx">intvl</span><span class="p">){</span>
232
+ <span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">YEAR_FRACTIONS</span><span class="p">[</span><span class="nx">intvl</span><span class="p">])</span> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">getYearFloor</span><span class="p">(</span><span class="nx">date</span><span class="p">,</span> <span class="nx">intvl</span><span class="p">)</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">YEAR_FRACTIONS</span><span class="p">[</span><span class="nx">intvl</span><span class="p">];</span>
233
+ <span class="k">return</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">();</span>
234
+ <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 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>
200
235
  <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>
201
236
  <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>
202
237
  <span class="k">return</span> <span class="nx">thisDate</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>
238
+ <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>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>
204
239
  <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>
205
240
  <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>
206
241
  <span class="k">return</span> <span class="nx">thisDate</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>
242
+ <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>Return the half of the hour this date belongs to. Anything before 30 min.
243
+ past the hour comes back as zero. Anything after comes back as 30.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getHalfHour</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>
244
+ <span class="k">return</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getMinutes</span><span class="p">()</span> <span class="o">&gt;</span> <span class="mi">30</span> <span class="o">?</span> <span class="mi">30</span> <span class="o">:</span> <span class="mi">0</span><span class="p">;</span>
245
+ <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>Return the quarter of the hour this date belongs to. Anything before 15 min.
246
+ past the hour comes back as zero; 15-30 comes back as 15; 30-45 as 30;
247
+ 45-60 as 45.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getQuarterHour</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>
248
+ <span class="kd">var</span> <span class="nx">minutes</span> <span class="o">=</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getMinutes</span><span class="p">();</span>
249
+ <span class="k">if</span> <span class="p">(</span><span class="nx">minutes</span> <span class="o">&lt;</span> <span class="mi">15</span><span class="p">)</span> <span class="k">return</span> <span class="mi">0</span><span class="p">;</span>
250
+ <span class="k">if</span> <span class="p">(</span><span class="nx">minutes</span> <span class="o">&lt;</span> <span class="mi">30</span><span class="p">)</span> <span class="k">return</span> <span class="mi">15</span><span class="p">;</span>
251
+ <span class="k">if</span> <span class="p">(</span><span class="nx">minutes</span> <span class="o">&lt;</span> <span class="mi">45</span><span class="p">)</span> <span class="k">return</span> <span class="mi">30</span><span class="p">;</span>
252
+ <span class="k">return</span> <span class="mi">45</span><span class="p">;</span>
253
+ <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>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>
208
254
  <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>
209
255
  <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>
210
256
  <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>
211
257
  <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>
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>
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>
215
- <span class="k">break</span><span class="p">;</span>
216
- <span class="k">case</span> <span class="s1">&#39;Lustrum&#39;</span><span class="o">:</span>
217
- <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">getLustrum</span><span class="p">(</span><span class="nx">date</span><span class="p">));</span>
218
- <span class="k">break</span><span class="p">;</span>
258
+ <span class="nx">idx</span><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>Zero the special extensions, and adjust as idx necessary.</p> </td> <td class="code"> <div class="highlight"><pre> <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">getYearFloor</span><span class="p">(</span><span class="nx">date</span><span class="p">,</span> <span class="nx">intvl</span><span class="p">));</span>
259
+ <span class="k">switch</span><span class="p">(</span><span class="nx">intvl</span><span class="p">){</span>
219
260
  <span class="k">case</span> <span class="s1">&#39;Week&#39;</span><span class="o">:</span>
220
261
  <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>
221
262
  <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>
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>
263
+ <span class="k">case</span> <span class="s1">&#39;HalfHour&#39;</span><span class="o">:</span>
264
+ <span class="nx">date</span><span class="p">.</span><span class="nx">setMinutes</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getHalfHour</span><span class="p">(</span><span class="nx">date</span><span class="p">));</span>
265
+ <span class="k">case</span> <span class="s1">&#39;QuarterHour&#39;</span><span class="o">:</span>
266
+ <span class="nx">date</span><span class="p">.</span><span class="nx">setMinutes</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getQuarterHour</span><span class="p">(</span><span class="nx">date</span><span class="p">));</span>
267
+ <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>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
268
  <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>
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>
269
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">include</span><span class="p">([</span><span class="s1">&#39;Week&#39;</span><span class="p">,</span> <span class="s1">&#39;HalfHour&#39;</span><span class="p">,</span> <span class="s1">&#39;QuarterHour&#39;</span><span class="p">].</span><span class="nx">concat</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">YEAR_FRACTIONS</span><span class="p">)),</span> <span class="nx">intvl</span><span class="p">)))</span>
270
+ <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>
225
271
  <span class="p">}</span>
226
272
 
227
273
  <span class="k">return</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getTime</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>
274
+ <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>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>
229
275
  <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>
230
276
  <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>
277
+
278
+ <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">getYearCeil</span><span class="p">(</span><span class="nx">date</span><span class="p">,</span> <span class="nx">intvl</span><span class="p">));</span>
231
279
  <span class="k">switch</span><span class="p">(</span><span class="nx">intvl</span><span class="p">){</span>
232
- <span class="k">case</span> <span class="s1">&#39;Decade&#39;</span><span class="o">:</span>
233
- <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> <span class="o">+</span> <span class="mi">10</span><span class="p">);</span>
234
- <span class="k">break</span><span class="p">;</span>
235
- <span class="k">case</span> <span class="s1">&#39;Lustrum&#39;</span><span class="o">:</span>
236
- <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">getLustrum</span><span class="p">(</span><span class="nx">date</span><span class="p">)</span> <span class="o">+</span> <span class="mi">5</span><span class="p">);</span>
237
- <span class="k">break</span><span class="p">;</span>
238
280
  <span class="k">case</span> <span class="s1">&#39;Week&#39;</span><span class="o">:</span>
239
281
  <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>
240
282
  <span class="k">break</span><span class="p">;</span>
283
+ <span class="k">case</span> <span class="s1">&#39;HalfHour&#39;</span><span class="o">:</span>
284
+ <span class="nx">date</span><span class="p">.</span><span class="nx">setMinutes</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getHalfHour</span><span class="p">(</span><span class="nx">date</span><span class="p">)</span> <span class="o">+</span> <span class="mi">30</span><span class="p">);</span>
285
+ <span class="k">break</span><span class="p">;</span>
286
+ <span class="k">case</span> <span class="s1">&#39;QuarterHour&#39;</span><span class="o">:</span>
287
+ <span class="nx">date</span><span class="p">.</span><span class="nx">setMinutes</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getQuarterHour</span><span class="p">(</span><span class="nx">date</span><span class="p">)</span> <span class="o">+</span> <span class="mi">15</span><span class="p">);</span>
288
+ <span class="k">break</span><span class="p">;</span>
241
289
  <span class="k">default</span><span class="o">:</span>
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>
290
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">include</span><span class="p">([</span><span class="s1">&#39;Week&#39;</span><span class="p">,</span> <span class="s1">&#39;HalfHour&#39;</span><span class="p">,</span> <span class="s1">&#39;QuarterHour&#39;</span><span class="p">].</span><span class="nx">concat</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">YEAR_FRACTIONS</span><span class="p">)),</span> <span class="nx">intvl</span><span class="p">)))</span>
291
+ <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>
243
292
  <span class="p">}</span>
244
293
  <span class="k">return</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getTime</span><span class="p">();</span>
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
294
+ <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>The actual difference in timespans accounting for time oddities like
246
295
  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>
247
296
  <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>
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>
297
+ <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>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>
249
298
  <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>
250
299
  <span class="k">this</span><span class="p">.</span><span class="nx">intervals</span> <span class="o">=</span> <span class="p">[];</span>
251
300
  <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>
@@ -256,7 +305,7 @@ different length months and leap years.</p> </td> <td cl
256
305
  <span class="p">}</span>
257
306
  <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">intervals</span><span class="p">;</span>
258
307
  <span class="p">}</span>
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,
308
+ <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>Handy dandy function to bind a listener on multiple events. For example,
260
309
  <code>Bar</code> and <code>CardContainer</code> are bound like so on "move" and "zoom":</p>
261
310
 
262
311
  <pre><code> sync(this.bar, this.cardCont, "move", "zoom");
@@ -265,12 +314,12 @@ different length months and leap years.</p> </td> <td cl
265
314
  <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>
266
315
  <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>
267
316
  <span class="p">});</span>
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
317
+ <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>Simple function to strip suffixes like <code>"px"</code> and return a clean integer for
269
318
  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>
270
319
  <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>
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>
320
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-49"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-49">&#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>
272
321
  <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>
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
322
+ <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>A quick and dirty hash manager for setting and getting values from
274
323
  <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>
275
324
  <span class="kd">var</span> <span class="nx">history</span> <span class="o">=</span> <span class="p">{</span>
276
325
  <span class="nx">get</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
@@ -280,8 +329,8 @@ use.</p> </td> <td class="code"> <div clas
280
329
  <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>
281
330
  <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>
282
331
  <span class="p">}</span>
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
332
+ <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>Every new <code>Series</code> gets new color. If there are too many series
333
+ the remaining series will be a simple gray.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-52"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-52">&#182;</a> </div> <p>These colors can be styled like such in
285
334
  timeline-setter.css, where the numbers 1-9 cycle through in that order:</p>
286
335
 
287
336
  <pre><code> .TS-notch_color_1,.TS-series_legend_swatch_1 {
@@ -306,7 +355,7 @@ timeline-setter.css, where the numbers 1-9 cycle through in that order:</p>
306
355
  <span class="nx">chosen</span> <span class="o">=</span> <span class="s2">&quot;default&quot;</span><span class="p">;</span>
307
356
  <span class="p">}</span>
308
357
  <span class="k">return</span> <span class="nx">chosen</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
358
+ <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> <h2>Models</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-54"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-54">&#182;</a> </div> <p>Initialize a Timeline object in a container element specified
310
359
  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
360
  <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
361
  <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>
@@ -314,7 +363,7 @@ in the config object.</p> </td> <td class="code">
314
363
  <span class="k">this</span><span class="p">.</span><span class="nx">cards</span> <span class="o">=</span> <span class="p">[];</span>
315
364
  <span class="k">this</span><span class="p">.</span><span class="nx">series</span> <span class="o">=</span> <span class="p">[];</span>
316
365
  <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
366
+ <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-55"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-55">&#182;</a> </div> <p>Override default date formats
318
367
  by writing a <code>formatter</code> function that returns
319
368
  an object containing all the formats
320
369
  you'd like to override. Pass in <code>d</code>
@@ -322,9 +371,9 @@ which is a date object, and <code>defaults</code>, which
322
371
  are the formatters we override.</p>
323
372
 
324
373
  <pre><code> formatter : function(d, defaults) {
325
- defaults.months = ['enero', 'febrero', 'marzo',
326
- 'abril', 'mayo', 'junio', 'julio',
327
- 'agosto', 'septiembre', 'octubre',
374
+ defaults.months = ['enero', 'febrero', 'marzo',
375
+ 'abril', 'mayo', 'junio', 'julio',
376
+ 'agosto', 'septiembre', 'octubre',
328
377
  'noviembre', 'diciembre'];
329
378
  return defaults;
330
379
  }
@@ -332,10 +381,10 @@ are the formatters we override.</p>
332
381
  <span class="p">};</span>
333
382
  <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>
334
383
 
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
384
+ <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-56"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-56">&#182;</a> </div> <p>The main kickoff point for rendering the timeline. The <code>Timeline</code> constructor
336
385
  takes a JSON array of card representations and then builds series, calculates
337
386
  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,
387
+ <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-57"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-57">&#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-58"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-58">&#182;</a> </div> <p>Stick the barebones HTML structure in the dom,
339
388
  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
389
 
341
390
  <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>
@@ -354,17 +403,17 @@ so we can play with it.</p> </td> <td class="code">
354
403
  <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
404
  <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
405
  <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
406
+ <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-59"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-59">&#182;</a> </div> <p>Bind a click handler to this timeline container
358
407
  that sets it as as the global current timeline
359
408
  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
409
 
361
410
  <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>
411
+ <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>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
412
  <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>
413
+ <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>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>
365
414
  <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>
366
415
  <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>
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
416
+ <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>If a particular element in the JSON array mentions a series that's not
368
417
  in the <code>bySid</code> object add it. Then add a card to the <code>Series</code> and extend
369
418
  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>
370
419
  <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>
@@ -372,14 +421,14 @@ the global <code>bounds</code>.</p> </td> <td class="cod
372
421
  <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">push</span><span class="p">(</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>
373
422
  <span class="p">}</span>
374
423
  <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>
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>
424
+ <span class="kd">var</span> <span class="nx">crd</span> <span class="o">=</span> <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>
376
425
 
377
426
  <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>
378
427
  <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
428
 
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>
429
+ <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> <span class="nx">crd</span><span class="p">);</span>
381
430
  <span class="p">}</span>
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
431
+ <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> <h2>Views</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-64"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-64">&#182;</a> </div> <p>The main interactive element in the timeline is <code>.TS-notchbar</code>. Behind the
383
432
  scenes <code>Bar</code> handles the moving and zooming behaviours through the <code>draggable</code>
384
433
  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>
385
434
  <span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
@@ -400,7 +449,7 @@ and <code>wheel</code> plugins.</p> </td> <td class="cod
400
449
  <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>
401
450
  <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>
402
451
 
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
452
+ <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-65"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-65">&#182;</a> </div> <p>Every time the <code>Bar</code> is moved, it calculates whether the proposed movement
404
453
  will move the <code>.TS-notchbar</code> off of its parent. If so, it recaculates
405
454
  <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>
406
455
  <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>
@@ -417,7 +466,7 @@ will move the <code>.TS-notchbar</code> off of its parent. If so, it recaculates
417
466
  <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
467
  <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
468
  <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.
469
+ <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>As the timeline zooms, the <code>Bar</code> tries to keep the current notch (i.e.
421
470
  <code>.TS-notch_active</code>) as close to its original position as possible.
422
471
  There's a slight bug here because the timeline zooms and then moves the
423
472
  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>
@@ -440,7 +489,7 @@ bar to correct for this behaviour, and in future versions we'll fix this.</p>
440
489
  <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>
441
490
  <span class="p">}</span>
442
491
  <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>When asked to render the bar places the appropriate timestamp notches
492
+ <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>When asked to render the bar places the appropriate timestamp notches
444
493
  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>
445
494
  <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>
446
495
  <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>
@@ -450,12 +499,12 @@ inside <code>.TS-notchbar</code>.</p> </td> <td class="c
450
499
  <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>
451
500
  <span class="p">}</span>
452
501
  <span class="p">}</span>
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
502
+ <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 <code>CardScroller</code> mirrors the moving and zooming of the <code>Bar</code> and is the
454
503
  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>
455
504
  <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>
456
505
  <span class="p">};</span>
457
506
  <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>
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>
507
+ <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-69"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-69">&#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>
459
508
  <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>
460
509
  <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>
461
510
  <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>
@@ -465,31 +514,32 @@ canvas where individual cards are rendered.</p> </td> <t
465
514
  <span class="p">};</span>
466
515
  <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>
467
516
 
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>
517
+ <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-70"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-70">&#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>
469
518
  <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>
470
519
  <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>
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>
520
+ <span class="k">return</span> <span class="nx">crd</span><span class="p">;</span>
521
+ <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>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>
472
522
  <span class="k">return</span> <span class="nx">crd</span><span class="p">.</span><span class="nx">timestamp</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>
523
+ <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>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>
474
524
  <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
475
525
  <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>
476
526
  <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>
527
+ <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>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>
478
528
  <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
479
529
  <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>
480
530
  <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
531
+ <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>Create and append the label to <code>.TS-series_nav_container</code> and bind up
482
532
  <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>
483
533
  <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>
484
534
  <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
535
  <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>
486
536
  <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>
487
537
  <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>
538
+ <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>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>
489
539
  <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>
490
540
  <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>
491
541
  <span class="p">};</span>
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>
542
+ <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>Every <code>Card</code> handles a notch div which is immediately appended to the <code>Bar</code>
493
543
  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>
494
544
  <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>
495
545
  <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>
@@ -501,17 +551,18 @@ and a <code>.TS-card_container</code> which is lazily rendered.</p>
501
551
  <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
552
  <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
553
  <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>
554
+ <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;move&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">flip</span><span class="p">);</span>
505
555
  <span class="k">this</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="p">[</span>
506
556
  <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>
507
557
  <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>
508
558
  <span class="p">].</span><span class="nx">join</span><span class="p">(</span><span class="s2">&quot;-&quot;</span><span class="p">);</span>
509
559
  <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>
560
+ <span class="k">this</span><span class="p">.</span><span class="nx">template</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">JST</span><span class="p">.</span><span class="nx">card</span><span class="p">;</span>
510
561
  <span class="p">};</span>
511
562
 
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>
563
+ <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-77"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-77">&#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>
513
564
  <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>
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
565
+ <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>When each <code>Card</code> is rendered via a render event, it appends a notch to the
515
566
  <code>Bar</code> and binds a click handler so it can be activated. if the <code>Card</code>'s id
516
567
  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
568
  <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>
@@ -520,7 +571,7 @@ is currently selected via <code>window.location.hash</code> it's activated.</p>
520
571
  <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>
521
572
  <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>
522
573
  <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>
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,
574
+ <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>As the <code>Bar</code> moves the current card checks to see if it's outside the viewport,
524
575
  if it is the card is flipped so as to be visible for the longest period
525
576
  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
577
  <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>
@@ -528,40 +579,40 @@ of time. The magic number here (7) is half the width of the css arrow.</p>
528
579
  <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>
529
580
  <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>
530
581
  <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
582
+ <span class="kd">var</span> <span class="nx">offTimeline</span> <span class="o">=</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">el</span><span class="p">.</span><span class="nx">parent</span><span class="p">().</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</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-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-80"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-80">&#182;</a> </div> <p>If the card's right edge is more than the timeline's right edge and
532
583
  it's never been flipped before and it won't go off the timeline when
533
584
  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>
534
585
  <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>
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
586
+ <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-81"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-81">&#182;</a> </div> <p>Otherwise, if the card is off the left side of the timeline and we have
536
587
  flipped it before and the card's width is less than half of the width
537
588
  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>
538
589
  <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>
539
590
  <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>
540
591
  <span class="p">}</span>
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
592
+ <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>The first time a card is activated it renders its <code>template</code> and appends
542
593
  its element to the <code>Bar</code>. After doing so it sets the width if <code>.TS-item_label</code>
543
594
  and moves the <code>Bar</code> if its element outside the visible portion of the
544
595
  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
596
  <span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
546
597
  <span class="k">this</span><span class="p">.</span><span class="nx">hideActiveCard</span><span class="p">();</span>
547
598
  <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>
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>
599
+ <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></pre></div> </td> </tr> <tr id="section-83"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-83">&#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
600
 
550
601
  <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>
551
602
  <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>
552
603
  <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>
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
604
+ <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-84"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-84">&#182;</a> </div> <p>Reactivate if there are images in the html so we can recalculate
554
605
  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>
555
606
  <span class="p">}</span>
556
607
 
557
608
  <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>
558
609
  <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>
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
610
+ <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-85"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-85">&#182;</a> </div> <p>In the case that the card is outside the bounds the wrong way when
560
611
  it's flipped, we'll take care of it here before we move the actual
561
612
  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>
562
613
  <span class="k">this</span><span class="p">.</span><span class="nx">move</span><span class="p">();</span>
563
614
  <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
615
+ <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>For Internet Explorer each card sets the width of<code>.TS-item_label</code> to
565
616
  the maximum width of the card's children, or if that is less than the
566
617
  <code>.TS-item_year</code> element's width, <code>.TS-item_label</code> gets <code>.TS-item_year</code>s
567
618
  width. Which is a funny way of saying, if you'd like to set the width of
@@ -573,7 +624,7 @@ the card as a whole, fiddle with <code>.TS-item_year</code>s width.</p>
573
624
  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
574
625
  <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>
575
626
  <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>
627
+ <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>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>
577
628
  <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>
578
629
  <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>
579
630
  <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>
@@ -584,12 +635,12 @@ the card as a whole, fiddle with <code>.TS-item_year</code>s width.</p>
584
635
  <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
636
  <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>
586
637
  <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>
638
+ <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>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>
588
639
  <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>
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>
640
+ <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> <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
641
  <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
642
  <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>
643
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-90"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-90">&#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
644
  <span class="k">switch</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
594
645
  <span class="k">case</span> <span class="s2">&quot;hideNotch&quot;</span><span class="o">:</span>
595
646
  <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>
@@ -600,25 +651,25 @@ the card as a whole, fiddle with <code>.TS-item_year</code>s width.</p>
600
651
  <span class="p">}</span>
601
652
  <span class="p">}</span>
602
653
 
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>
654
+ <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>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>
604
655
  <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>
605
656
  <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>
606
657
  <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>
607
658
  <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>
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>
659
+ <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> <h2>Controls</h2> </td> <td class="code"> <div class="highlight"><pre></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 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
660
  <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>
610
661
  <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>
611
662
  <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>
612
663
  <span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
613
664
  <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>
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>
665
+ <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>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
666
  <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>
616
667
  <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>
617
668
  <span class="p">};</span>
618
669
  <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>
619
670
 
620
671
  <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>
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
672
+ <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-95"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-95">&#182;</a> </div> <p>Adjust the <code>curZoom</code> up or down by 100 and trigger a <code>doZoom</code> event on
622
673
  <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>
623
674
  <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>
624
675
  <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>
@@ -627,14 +678,14 @@ the card as a whole, fiddle with <code>.TS-item_year</code>s width.</p>
627
678
  <span class="nx">curZoom</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>
628
679
  <span class="p">}</span>
629
680
  <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>
681
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-96"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-96">&#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>
631
682
  <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>
632
683
  <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>
633
684
  <span class="p">};</span>
634
685
  <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>
635
686
 
636
687
  <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>
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
688
+ <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-97"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-97">&#182;</a> </div> <p>Figure out which notch to activate and do so by triggering a click on
638
689
  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>
639
690
  <span class="kd">var</span> <span class="nx">el</span><span class="p">;</span>
640
691
  <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>
@@ -648,9 +699,9 @@ that notch.</p> </td> <td class="code"> <d
648
699
  <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>
649
700
  <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>
650
701
  <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
702
+ <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> <h2>JS API</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-99"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-99">&#182;</a> </div> <p>The TimelineSetter JS API allows you to listen to certain
652
703
  timeline events, and activate cards programmatically.
653
- To take advantage of it, assign the timeline boot function to a variable
704
+ To take advantage of it, assign the timeline boot function to a variable
654
705
  like so:</p>
655
706
 
656
707
  <pre><code>var currentTimeline = TimelineSetter.Timeline.boot(
@@ -660,32 +711,32 @@ like so:</p>
660
711
 
661
712
  <p>then call methods on the <code>currentTimeline.api</code> object</p>
662
713
 
663
- <pre><code>currentTimeline.api.onLoad(function() {
714
+ <pre><code>currentTimeline.api.onLoad(function() {
664
715
  console.log("I'm ready");
665
716
  });
666
717
  </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
718
  <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
719
  <span class="p">};</span>
669
720
 
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>
721
+ <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-100"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-100">&#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
722
  <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
723
+ <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>Register a callback for when a card is added to the timeline
673
724
  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
725
  <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.
726
+ <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>Register a callback for when a card is activated.
676
727
  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
728
  <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.
729
+ <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>Register a callback for when the bar is moved or zoomed.
679
730
  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
731
+ 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-104"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-104">&#182;</a> </div> <p>Bind a 'move' event to the timeline, because
681
732
  at this point, <code>timeline.bar</code> isn't available yet.
682
733
  To get around this, we'll trigger the bar's
683
734
  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
735
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-105"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-105">&#182;</a> </div> <p>Show the card matching a given timestamp
685
736
  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
737
  <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
738
  <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
739
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-106"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-106">&#182;</a> </div> <p>Global TS keydown function to bind key events to the
689
740
  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
741
  <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
742
  <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>
@@ -696,15 +747,15 @@ current global currentTimeline.</p> </td> <td class="cod
696
747
  <span class="k">return</span><span class="p">;</span>
697
748
  <span class="p">}</span>
698
749
  <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
750
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-107"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-107">&#182;</a> </div> <p>Finally, let's create the whole timeline. Boot is exposed globally via
700
751
  <code>TimelineSetter.Timeline.boot()</code> which takes the JSON generated by
701
752
  the timeline-setter binary as its first argument, and a config hash as its second.
702
753
  The config hash looks for a container element, an interval for interval notches
703
754
  and a formatter function for dates. All of these are optional.</p>
704
755
 
705
756
  <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
757
+ timeline variable's <code>api</code> method (e.g. <code>currentTimeline.api</code>) and look for
758
+ how many timelines are globally on the page for keydown purposes. We'll only
708
759
  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
760
  <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
761
  <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>