timeline_setter 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. data/doc/doc.markdown +15 -4
  2. data/doc/timeline-setter.html +79 -94
  3. data/documentation/TimelineSetter/CLI.html +59 -9
  4. data/documentation/TimelineSetter/Parser.html +1 -1
  5. data/documentation/TimelineSetter/Timeline.html +1 -1
  6. data/documentation/TimelineSetter.html +1 -1
  7. data/documentation/_index.html +1 -1
  8. data/documentation/file.README.html +1 -1
  9. data/documentation/index.html +1 -1
  10. data/documentation/method_list.html +13 -5
  11. data/documentation/top-level-namespace.html +1 -1
  12. data/index.html +3 -2
  13. data/lib/timeline_setter/cli.rb +6 -2
  14. data/lib/timeline_setter/timeline.rb +1 -1
  15. data/lib/timeline_setter/version.rb +1 -1
  16. data/public/javascripts/timeline-setter.js +83 -87
  17. data/public/stylesheets/timeline-setter.css +5 -7
  18. data/spec/test_data.csv +4 -1
  19. data/templates/timeline-markup.erb +3 -3
  20. data/timeline_setter.gemspec +2 -2
  21. metadata +4 -4
data/doc/timeline-setter.html CHANGED
@@ -7,7 +7,7 @@ callback bound to the object is invoked.</p> </td> <td c
7
7
  <span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span> <span class="o">||</span> <span class="p">[];</span>
8
8
  <span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">cb</span><span class="p">);</span>
9
9
  <span class="p">};</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>Invoke all callbacks registered to the object with <code>bind</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">trigger</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
10
- <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
10
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
11
11
  <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">callback</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span>
12
12
  <span class="nx">callback</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
13
13
  <span class="p">};</span>
@@ -16,21 +16,21 @@ DOM elements around the page.</p> </td> <td class="code"
16
16
  aren't scoped by key, TimelineSetter uses plain old jQuery events for
17
17
  message passing. So each registered callback first checks to see if the
18
18
  event fired matches the event it is listening for.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">move</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
19
- <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">&quot;move&quot;</span> <span class="o">||</span> <span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
19
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">&quot;move&quot;</span> <span class="o">||</span> <span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
20
20
 
21
- <span class="k">if</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">currOffset</span><span class="p">))</span> <span class="k">this</span><span class="p">.</span><span class="nx">currOffset</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
21
+ <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">currOffset</span><span class="p">))</span> <span class="k">this</span><span class="p">.</span><span class="nx">currOffset</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
22
22
  <span class="k">this</span><span class="p">.</span><span class="nx">currOffset</span> <span class="o">+=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span><span class="p">;</span>
23
23
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span><span class="s2">&quot;left&quot;</span> <span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">currOffset</span><span class="p">});</span>
24
24
  <span class="p">};</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>The width for the <code>Bar</code> and <code>CardContainer</code> objects is set in percentages,
25
25
  in order to zoom the Timeline all that's needed is to increase or decrease
26
26
  the percentage width.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">zoom</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
27
- <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">&quot;zoom&quot;</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
27
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">&quot;zoom&quot;</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
28
28
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span> <span class="s2">&quot;width&quot;</span><span class="o">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">width</span> <span class="p">});</span>
29
29
  <span class="p">};</span>
30
30
  <span class="p">};</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <h2>Plugins</h2>
31
31
 
32
32
  <p>Each plugin operates on an instance of an object.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>Check to see if we're on a mobile device.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">touchInit</span> <span class="o">=</span> <span class="s1">&#39;ontouchstart&#39;</span> <span class="k">in</span> <span class="nb">document</span><span class="p">;</span>
33
- <span class="k">if</span><span class="p">(</span><span class="nx">touchInit</span><span class="p">)</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s2">&quot;touches&quot;</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <p>The <code>draggable</code> plugin tracks changes in X offsets due to mouse movement
33
+ <span class="k">if</span> <span class="p">(</span><span class="nx">touchInit</span><span class="p">)</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s2">&quot;touches&quot;</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <p>The <code>draggable</code> plugin tracks changes in X offsets due to mouse movement
34
34
  or finger gestures and proxies associated events on a particular element.
35
35
  Most of this is inspired by polymaps.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">draggable</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">obj</span><span class="p">){</span>
36
36
  <span class="kd">var</span> <span class="nx">drag</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>Start tracking deltas due to a tap or single click.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">mousedown</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
@@ -39,7 +39,7 @@ Most of this is inspired by polymaps.</p> </td> <td clas
39
39
  <span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">&quot;dragstart&quot;</span><span class="p">;</span>
40
40
  <span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
41
41
  <span class="p">};</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>The user is interacting; capture the offset and trigger a <code>dragging</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">mousemove</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
42
- <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>
42
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">drag</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
43
43
  <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
44
44
  <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>
45
45
  <span class="nx">e</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">e</span><span class="p">,</span> <span class="p">{</span>
@@ -48,13 +48,13 @@ Most of this is inspired by polymaps.</p> </td> <td clas
48
48
  <span class="nx">drag</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">x</span><span class="o">:</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span> <span class="o">||</span> <span class="nx">e</span><span class="p">.</span><span class="nx">touches</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">pageX</span><span class="p">)</span> <span class="p">};</span>
49
49
  <span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
50
50
  <span class="p">};</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>We're done tracking the movement set drag back to <code>null</code> for the next event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">mouseup</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
51
- <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>
51
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">drag</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
52
52
  <span class="nx">drag</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
53
53
  <span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">&quot;dragend&quot;</span><span class="p">;</span>
54
54
  <span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
55
55
  <span class="p">};</span>
56
56
 
57
- <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">touchInit</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>Bind on mouse events if we have a mouse...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;mousedown&quot;</span><span class="p">,</span> <span class="nx">mousedown</span><span class="p">);</span>
57
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">touchInit</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>Bind on mouse events if we have a mouse...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;mousedown&quot;</span><span class="p">,</span> <span class="nx">mousedown</span><span class="p">);</span>
58
58
 
59
59
  <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;mousemove&quot;</span><span class="p">,</span> <span class="nx">mousemove</span><span class="p">);</span>
60
60
  <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;mouseup&quot;</span><span class="p">,</span> <span class="nx">mouseup</span><span class="p">);</span>
@@ -77,7 +77,7 @@ to dampen the effects.</p> </td> <td class="code">
77
77
  <span class="kd">function</span> <span class="nx">mousewheel</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
78
78
  <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
79
79
  <span class="kd">var</span> <span class="nx">delta</span> <span class="o">=</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">wheelDelta</span> <span class="o">||</span> <span class="o">-</span><span class="nx">e</span><span class="p">.</span><span class="nx">detail</span><span class="p">);</span>
80
- <span class="k">if</span><span class="p">(</span><span class="nx">safari</span><span class="p">){</span>
80
+ <span class="k">if</span> <span class="p">(</span><span class="nx">safari</span><span class="p">){</span>
81
81
  <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>
82
82
  <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>
83
83
  <span class="p">};</span>
@@ -187,7 +187,7 @@ different length months and leap years.</p> </td> <td cl
187
187
  <span class="kd">var</span> <span class="nx">events</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">arguments</span><span class="p">,</span> <span class="mi">2</span><span class="p">);</span>
188
188
  <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>
189
189
  <span class="nx">origin</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
190
- <span class="k">if</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="nx">ev</span> <span class="o">&amp;&amp;</span> <span class="nx">listener</span><span class="p">[</span><span class="nx">ev</span><span class="p">])</span>
190
+ <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="nx">ev</span> <span class="o">&amp;&amp;</span> <span class="nx">listener</span><span class="p">[</span><span class="nx">ev</span><span class="p">])</span>
191
191
  <span class="nx">listener</span><span class="p">[</span><span class="nx">ev</span><span class="p">](</span><span class="nx">e</span><span class="p">);</span>
192
192
  <span class="p">});</span>
193
193
  <span class="p">});</span>
@@ -195,7 +195,7 @@ different length months and leap years.</p> </td> <td cl
195
195
  <span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">query</span><span class="p">).</span><span class="nx">html</span><span class="p">());</span>
196
196
  <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>Simple function to strip suffixes like <code>"px"</code> and return a clean integer for
197
197
  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>
198
- <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>
198
+ <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>
199
199
  <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 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>
200
200
  <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>
201
201
  <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>A quick and dirty hash manager for setting and getting values from
@@ -237,7 +237,7 @@ timeline-setter.css, where the numbers 1-9 cycle through in that order:</p>
237
237
  <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> <h2>Models</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-43"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43">&#182;</a> </div> <p>The main kickoff point for rendering the timeline. The <code>Timeline</code> constructor
238
238
  takes a json array of card representations and then builds series, calculates
239
239
  intervals <code>sync</code>s the <code>Bar</code> and <code>CardContainer</code> objects and triggers the
240
- <code>render</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Timeline</span> <span class="o">=</span> <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">Timeline</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
240
+ <code>render</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Timeline</span> <span class="o">=</span> <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">Timeline</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
241
241
  <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>
242
242
  <span class="k">this</span><span class="p">.</span><span class="nx">bySid</span> <span class="o">=</span> <span class="p">{};</span>
243
243
  <span class="k">this</span><span class="p">.</span><span class="nx">series</span> <span class="o">=</span> <span class="p">[];</span>
@@ -264,12 +264,13 @@ intervals <code>sync</code>s the <code>Bar</code> and <code>CardContainer</code>
264
264
  <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>If a particular element in the JSON array mentions a series that's not
265
265
  in the <code>bySid</code> object add it. Then add a card to the <code>Series</code> and extend
266
266
  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>
267
- <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>
267
+ <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>
268
268
  <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> <span class="o">=</span> <span class="k">new</span> <span class="nx">Series</span><span class="p">(</span><span class="nx">card</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
269
269
  <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>
270
270
  <span class="p">}</span>
271
271
  <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>
272
272
  <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>
273
+
273
274
  <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>
274
275
  <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>
275
276
  <span class="p">}</span>
@@ -300,11 +301,11 @@ will move the <code>.TS-notchbar</code> off of its parent. If so, it recaculates
300
301
  <span class="kd">var</span> <span class="nx">pOffset</span> <span class="o">=</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>
301
302
  <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">el</span><span class="p">.</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span><span class="p">;</span>
302
303
  <span class="kd">var</span> <span class="nx">width</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">width</span><span class="p">();</span>
303
- <span class="k">if</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span><span class="p">))</span> <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
304
+ <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span><span class="p">))</span> <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
304
305
 
305
- <span class="k">if</span><span class="p">(</span><span class="nx">offset</span> <span class="o">+</span> <span class="nx">width</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">&lt;</span> <span class="nx">pOffset</span> <span class="o">+</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">width</span><span class="p">())</span>
306
+ <span class="k">if</span> <span class="p">(</span><span class="nx">offset</span> <span class="o">+</span> <span class="nx">width</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">&lt;</span> <span class="nx">pOffset</span> <span class="o">+</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">width</span><span class="p">())</span>
306
307
  <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="p">(</span><span class="nx">pOffset</span> <span class="o">+</span> <span class="nx">parent</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="o">+</span> <span class="nx">width</span><span class="p">);</span>
307
- <span class="k">if</span><span class="p">(</span><span class="nx">offset</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">&gt;</span> <span class="nx">pOffset</span><span class="p">)</span>
308
+ <span class="k">if</span> <span class="p">(</span><span class="nx">offset</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">&gt;</span> <span class="nx">pOffset</span><span class="p">)</span>
308
309
  <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="nx">pOffset</span> <span class="o">-</span> <span class="nx">offset</span><span class="p">;</span>
309
310
 
310
311
  <span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">&quot;move&quot;</span><span class="p">;</span>
@@ -374,8 +375,8 @@ canvas where individual cards are rendered.</p> </td> <t
374
375
  <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s2">&quot;showNotch&quot;</span><span class="p">));</span>
375
376
  <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 and append the label to <code>.TS-series_nav_container</code> and bind up
376
377
  <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>
377
- <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">&quot;render&quot;</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
378
- <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>
378
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">&quot;render&quot;</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
379
+ <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>
379
380
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="k">this</span><span class="p">));</span>
380
381
  <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>
381
382
  <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>
@@ -391,12 +392,13 @@ and a <code>.TS-card_container</code> which is lazily rendered.</p>
391
392
  <span class="k">this</span><span class="p">.</span><span class="nx">timestamp</span> <span class="o">=</span> <span class="nx">card</span><span class="p">.</span><span class="nx">timestamp</span><span class="p">;</span>
392
393
  <span class="k">this</span><span class="p">.</span><span class="nx">attributes</span> <span class="o">=</span> <span class="nx">card</span><span class="p">;</span>
393
394
  <span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">topcolor</span> <span class="o">=</span> <span class="nx">series</span><span class="p">.</span><span class="nx">color</span><span class="p">;</span>
395
+
394
396
  <span class="k">this</span><span class="p">.</span><span class="nx">template</span> <span class="o">=</span> <span class="nx">template</span><span class="p">(</span><span class="s2">&quot;#TS-card_tmpl&quot;</span><span class="p">);</span>
395
397
  <span class="k">this</span><span class="p">.</span><span class="nx">ntemplate</span> <span class="o">=</span> <span class="nx">template</span><span class="p">(</span><span class="s2">&quot;#TS-notch_tmpl&quot;</span><span class="p">);</span>
396
- <span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s2">&quot;render&quot;</span><span class="p">,</span> <span class="s2">&quot;activate&quot;</span><span class="p">,</span> <span class="s2">&quot;position&quot;</span><span class="p">,</span> <span class="s2">&quot;setPermalink&quot;</span><span class="p">,</span> <span class="s2">&quot;toggleNotch&quot;</span><span class="p">);</span>
398
+ <span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s2">&quot;render&quot;</span><span class="p">,</span> <span class="s2">&quot;activate&quot;</span><span class="p">,</span> <span class="s2">&quot;flip&quot;</span><span class="p">,</span> <span class="s2">&quot;setPermalink&quot;</span><span class="p">,</span> <span class="s2">&quot;toggleNotch&quot;</span><span class="p">);</span>
397
399
  <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">toggleNotch</span><span class="p">);</span>
398
400
  <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
399
- <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">position</span><span class="p">);</span>
401
+ <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">flip</span><span class="p">);</span>
400
402
  <span class="k">this</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="p">[</span>
401
403
  <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>
402
404
  <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>
@@ -410,124 +412,105 @@ and a <code>.TS-card_container</code> which is lazily rendered.</p>
410
412
  <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>When each <code>Card</code> is rendered via a render event, it appends a notch to the
411
413
  <code>Bar</code> and binds a click handler so it can be activated. if the <code>Card</code>'s id
412
414
  is currently selected via <code>window.location.hash</code> it's activated.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
413
- <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">&quot;render&quot;</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
415
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">&quot;render&quot;</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
414
416
  <span class="k">this</span><span class="p">.</span><span class="nx">offset</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">project</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">timestamp</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
415
417
  <span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">ntemplate</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">);</span>
416
418
  <span class="k">this</span><span class="p">.</span><span class="nx">notch</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">html</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="s2">&quot;left&quot;</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">offset</span> <span class="o">+</span> <span class="s2">&quot;%&quot;</span><span class="p">});</span>
417
419
  <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>
418
420
  <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>
419
421
  <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>
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 <code>Bar</code> moves each card checks to see if it's outside the viewport,
422
+ <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 <code>Bar</code> moves the current card checks to see if it's outside the viewport,
421
423
  if it is the card is flipped so as to be visible for the longest period
422
- of time.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">position</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
423
- <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">!==</span> <span class="s2">&quot;move&quot;</span> <span class="o">||</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
424
- <span class="kd">var</span> <span class="nx">onBarEdge</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">cardOffset</span><span class="p">().</span><span class="nx">onBarEdge</span><span class="p">;</span>
425
-
426
- <span class="k">switch</span><span class="p">(</span><span class="nx">onBarEdge</span><span class="p">)</span> <span class="p">{</span>
427
- <span class="k">case</span> <span class="s1">&#39;right&#39;</span><span class="o">:</span>
428
- <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">cardOffset</span><span class="p">().</span><span class="nx">item</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>
429
- <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="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">cardOffset</span><span class="p">().</span><span class="nx">item</span><span class="p">.</span><span class="nx">width</span><span class="p">());</span>
430
- <span class="k">break</span><span class="p">;</span>
431
- <span class="k">case</span> <span class="s1">&#39;default&#39;</span><span class="o">:</span>
432
- <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>
433
- <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="p">,</span> <span class="mi">0</span><span class="p">);</span>
424
+ of time. The magic number here (7) is half the width of the css arrow.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">flip</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
425
+ <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">!==</span> <span class="s2">&quot;move&quot;</span> <span class="o">||</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">||</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">is</span><span class="p">(</span><span class="s2">&quot;:visible&quot;</span><span class="p">))</span> <span class="k">return</span><span class="p">;</span>
426
+ <span class="kd">var</span> <span class="nx">rightEdge</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">();</span>
427
+ <span class="kd">var</span> <span class="nx">tRightEdge</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">).</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">();</span>
428
+ <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>
429
+ <span class="kd">var</span> <span class="nx">flippable</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">&lt;</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
430
+ <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="p">)</span> <span class="p">{</span>
431
+ <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>
432
+ <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>
433
+ <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span> <span class="o">-</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">).</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span> <span class="o">&lt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">margin</span> <span class="o">&amp;&amp;</span> <span class="nx">flippable</span><span class="p">)</span> <span class="p">{</span>
434
+ <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>
435
+ <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>
434
436
  <span class="p">}</span>
435
- <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>A utility function to suss out whether the card is fully viewable.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">cardOffset</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
436
- <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="k">return</span> <span class="p">{</span> <span class="nx">onBarEdge</span> <span class="o">:</span> <span class="kc">false</span> <span class="p">};</span>
437
-
438
- <span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
439
- <span class="kd">var</span> <span class="nx">item</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">children</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">);</span>
440
- <span class="kd">var</span> <span class="nx">currentMargin</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>
441
- <span class="kd">var</span> <span class="nx">timeline</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">);</span>
442
- <span class="kd">var</span> <span class="nx">right</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="nx">item</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">timeline</span><span class="p">.</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span> <span class="o">+</span> <span class="nx">timeline</span><span class="p">.</span><span class="nx">width</span><span class="p">());</span>
443
- <span class="kd">var</span> <span class="nx">left</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="p">)</span> <span class="o">-</span> <span class="nx">timeline</span><span class="p">.</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span><span class="p">;</span>
444
-
445
- <span class="k">return</span> <span class="p">{</span>
446
- <span class="nx">item</span> <span class="o">:</span> <span class="nx">item</span><span class="p">,</span>
447
- <span class="nx">onBarEdge</span> <span class="o">:</span> <span class="p">(</span><span class="nx">right</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nx">currentMargin</span> <span class="o">===</span> <span class="nx">that</span><span class="p">.</span><span class="nx">originalMargin</span><span class="p">)</span> <span class="o">?</span>
448
- <span class="s1">&#39;right&#39;</span> <span class="o">:</span>
449
- <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="nx">that</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="nx">that</span><span class="p">.</span><span class="nx">originalMargin</span><span class="p">)</span> <span class="o">?</span>
450
- <span class="s1">&#39;default&#39;</span> <span class="o">:</span>
451
- <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="nx">that</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="nx">that</span><span class="p">.</span><span class="nx">originalMargin</span><span class="p">)</span> <span class="o">?</span>
452
- <span class="s1">&#39;left&#39;</span> <span class="o">:</span>
453
- <span class="kc">false</span>
454
- <span class="p">};</span>
455
- <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 first time a card is activated it renders its <code>template</code> and appends
456
- its element to the <code>Bar</code>. After doing so it moves the <code>Bar</code> if its
457
- element isn't currently visible. For ie each card sets the width of
458
- <code>.TS-item_label</code> to the maximum width of the card's children, or
459
- if that is less than the <code>.TS-item_year</code> element's width, <code>.TS-item_label</code>
460
- gets <code>.TS-item_year</code>s width. Which is a funny way of saying, if you'd
461
- like to set the width of the card as a whole, fiddle with <code>.TS-item_year</code>s
462
- width.</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>
437
+ <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>The first time a card is activated it renders its <code>template</code> and appends
438
+ its element to the <code>Bar</code>. After doing so it sets the width if <code>.TS-item_label</code>
439
+ and moves the <code>Bar</code> if its element outside the visible portion of the
440
+ 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>
463
441
  <span class="k">this</span><span class="p">.</span><span class="nx">hideActiveCard</span><span class="p">();</span>
464
442
  <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>
465
443
  <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>
466
444
  <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>
467
445
  <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>
468
446
  <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>
469
- <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>
447
+ <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-65"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-65">&#182;</a> </div> <p>Reactivate if there are images in the html so we can recalculate
448
+ widths and position accordingly.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;img&quot;</span><span class="p">).</span><span class="nx">load</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">activate</span><span class="p">);</span>
470
449
  <span class="p">}</span>
471
-
472
450
  <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>
473
-
451
+ <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>
452
+ <span class="k">this</span><span class="p">.</span><span class="nx">setWidth</span><span class="p">();</span>
453
+ </pre></div> </td> </tr> <tr id="section-66"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-66">&#182;</a> </div> <p>In the case that the card is outside the bounds the wrong way when
454
+ it's flipped, we'll take care of it here before we move the actual
455
+ card. </p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">flip</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s2">&quot;move&quot;</span><span class="p">));</span>
456
+ <span class="k">this</span><span class="p">.</span><span class="nx">move</span><span class="p">();</span>
457
+ <span class="p">},</span>
458
+ </pre></div> </td> </tr> <tr id="section-67"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-67">&#182;</a> </div> <p>For Internet Explorer each card sets the width of<code>.TS-item_label</code> to
459
+ the maximum width of the card's children, or if that is less than the
460
+ <code>.TS-item_year</code> element's width, <code>.TS-item_label</code> gets <code>.TS-item_year</code>s
461
+ width. Which is a funny way of saying, if you'd like to set the width of
462
+ the card as a whole, fiddle with <code>.TS-item_year</code>s width.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setWidth</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
474
463
  <span class="kd">var</span> <span class="nx">max</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">toArray</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item_user_html&quot;</span><span class="p">).</span><span class="nx">children</span><span class="p">()),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">el</span><span class="p">){</span> <span class="k">return</span> <span class="nx">$</span><span class="p">(</span><span class="nx">el</span><span class="p">).</span><span class="nx">width</span><span class="p">();</span> <span class="p">});</span>
475
- <span class="k">if</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">max</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item_year&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()){</span>
464
+ <span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">max</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item_year&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">())</span> <span class="p">{</span>
476
465
  <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item_label&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&quot;width&quot;</span><span class="p">,</span> <span class="nx">$</span><span class="p">(</span><span class="nx">max</span><span class="p">).</span><span class="nx">width</span><span class="p">());</span>
477
466
  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
478
467
  <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>
479
468
  <span class="p">}</span>
480
-
481
- <span class="k">this</span><span class="p">.</span><span class="nx">moveBarWithCard</span><span class="p">();</span>
482
- <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>
483
- <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>Move the <code>Bar</code> if the <code>Card</code>'s element isn't visible.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">moveBarWithCard</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
469
+ <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>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>
484
470
  <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>
485
- <span class="kd">var</span> <span class="nx">onBarEdge</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">cardOffset</span><span class="p">().</span><span class="nx">onBarEdge</span><span class="p">;</span>
486
-
487
- <span class="k">switch</span><span class="p">(</span><span class="nx">onBarEdge</span><span class="p">)</span> <span class="p">{</span>
488
- <span class="k">case</span> <span class="s1">&#39;right&#39;</span><span class="o">:</span>
489
- <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</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">cardOffset</span><span class="p">().</span><span class="nx">item</span><span class="p">.</span><span class="nx">width</span><span class="p">());</span>
490
- <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">moving</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
491
- <span class="k">break</span><span class="p">;</span>
492
- <span class="k">case</span> <span class="s1">&#39;left&#39;</span><span class="o">:</span>
493
- <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">cardOffset</span><span class="p">().</span><span class="nx">item</span><span class="p">.</span><span class="nx">width</span><span class="p">());</span>
494
- <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">moving</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
471
+ <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>
472
+ <span class="kd">var</span> <span class="nx">toffset</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">).</span><span class="nx">offset</span><span class="p">();</span>
473
+ <span class="k">if</span> <span class="p">(</span><span class="nx">offset</span><span class="p">.</span><span class="nx">left</span> <span class="o">&lt;</span> <span class="nx">toffset</span><span class="p">.</span><span class="nx">left</span><span class="p">)</span> <span class="p">{</span>
474
+ <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="nx">toffset</span><span class="p">.</span><span class="nx">left</span> <span class="o">-</span> <span class="nx">offset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="nx">cleanNumber</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&quot;padding-left&quot;</span><span class="p">));</span>
475
+ <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">moving</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
476
+ <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">offset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">outerWidth</span><span class="p">()</span> <span class="o">&gt;</span> <span class="nx">toffset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">())</span> <span class="p">{</span>
477
+ <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="nx">toffset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">-</span> <span class="p">(</span><span class="nx">offset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">outerWidth</span><span class="p">());</span>
478
+ <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">moving</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
495
479
  <span class="p">}</span>
496
- <span class="k">this</span><span class="p">.</span><span class="nx">position</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s1">&#39;move&#39;</span><span class="p">));</span>
497
- <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>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>
480
+ <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>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>
498
481
  <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>
499
- <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>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>
482
+ <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>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>
500
483
  <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>
501
484
  <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>
502
- <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>An event listener to toggle this notche on and off via <code>Series</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggleNotch</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
503
- <span class="k">switch</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span><span class="p">)</span> <span class="p">{</span>
485
+ <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>An event listener to toggle this notche on and off via <code>Series</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggleNotch</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
486
+ <span class="k">switch</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span><span class="p">)</span> <span class="p">{</span>
504
487
  <span class="k">case</span> <span class="s2">&quot;hideNotch&quot;</span><span class="o">:</span>
505
488
  <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>
506
- <span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
489
+ <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
507
490
  <span class="k">return</span><span class="p">;</span>
508
491
  <span class="k">case</span> <span class="s2">&quot;showNotch&quot;</span><span class="o">:</span>
509
492
  <span class="k">this</span><span class="p">.</span><span class="nx">notch</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;TS-series_inactive&quot;</span><span class="p">).</span><span class="nx">show</span><span class="p">();</span>
510
493
  <span class="p">}</span>
511
494
  <span class="p">}</span>
512
495
 
513
- <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>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>
496
+ <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>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>
514
497
  <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>
515
498
  <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>
516
499
  <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>
517
500
  <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>
518
- <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> <h2>Controls</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-72"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-72">&#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>
501
+ <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> <h2>Controls</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-74"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-74">&#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>
519
502
  <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>
520
503
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">prefix</span> <span class="o">+</span> <span class="nx">direction</span><span class="p">);</span>
521
504
  <span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
522
505
  <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>
523
- <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>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>
506
+ <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>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>
524
507
  <span class="kd">var</span> <span class="nx">Zoom</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">direction</span><span class="p">)</span> <span class="p">{</span>
525
508
  <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>
526
509
  <span class="p">};</span>
527
510
  <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>
528
511
 
529
512
  <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>
530
- <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-74"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-74">&#182;</a> </div> <p>Adjust the <code>curZoom</code> up or down by 100 and trigger a <code>doZoom</code> event on
513
+ <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-76"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-76">&#182;</a> </div> <p>Adjust the <code>curZoom</code> up or down by 100 and trigger a <code>doZoom</code> event on
531
514
  <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>
532
515
  <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>
533
516
  <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>
@@ -536,14 +519,14 @@ width.</p> </td> <td class="code"> <div cl
536
519
  <span class="nx">curZoom</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>
537
520
  <span class="p">}</span>
538
521
  <span class="p">}</span>
539
- <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>Each <code>Chooser</code> activates the next or previous notch.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Chooser</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">direction</span><span class="p">)</span> <span class="p">{</span>
522
+ <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>Each <code>Chooser</code> activates the next or previous notch.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Chooser</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">direction</span><span class="p">)</span> <span class="p">{</span>
540
523
  <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>
541
524
  <span class="k">this</span><span class="p">.</span><span class="nx">notches</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notch&quot;</span><span class="p">);</span>
542
525
  <span class="p">};</span>
543
526
  <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>
544
527
 
545
528
  <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>
546
- <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-76"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-76">&#182;</a> </div> <p>Figure out which notch to activate and do so by triggering a click on
529
+ <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-78"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-78">&#182;</a> </div> <p>Figure out which notch to activate and do so by triggering a click on
547
530
  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>
548
531
  <span class="kd">var</span> <span class="nx">el</span><span class="p">;</span>
549
532
  <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>
@@ -554,10 +537,10 @@ that notch.</p> </td> <td class="code"> <d
554
537
  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
555
538
  <span class="nx">el</span> <span class="o">=</span> <span class="p">(</span><span class="nx">curCardIdx</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="o">?</span> <span class="nx">notches</span><span class="p">.</span><span class="nx">eq</span><span class="p">(</span><span class="nx">curCardIdx</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">:</span> <span class="kc">false</span><span class="p">);</span>
556
539
  <span class="p">}</span>
557
- <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>
540
+ <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>
558
541
  <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>
559
542
  <span class="p">}</span>
560
- <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>Finally, let's create the whole timeline. Boot is exposed globally via
543
+ <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>Finally, let's create the whole timeline. Boot is exposed globally via
561
544
  <code>TimelineSetter.Timeline.boot()</code> which takes the JSON generated by
562
545
  the timeline-setter binary as an argument. This is handy if you want
563
546
  to be able to generate timelines at arbitrary times (say, for example,
@@ -567,7 +550,9 @@ in an ajax callback).</p>
567
550
  HTML. We'll kick everything off by creating a <code>Timeline</code>, some <code>Controls</code>
568
551
  and binding to <code>"keydown"</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Timeline</span><span class="p">.</span><span class="nx">boot</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
569
552
  <span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
553
+
570
554
  <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>
555
+
571
556
  <span class="k">new</span> <span class="nx">Zoom</span><span class="p">(</span><span class="s2">&quot;in&quot;</span><span class="p">);</span>
572
557
  <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>
573
558
  <span class="kd">var</span> <span class="nx">chooseNext</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Chooser</span><span class="p">(</span><span class="s2">&quot;next&quot;</span><span class="p">);</span>