timeline_setter 0.1.2 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (21) hide show
  1. data/Rakefile +2 -11
  2. data/doc/doc.markdown +22 -1
  3. data/doc/timeline-setter.html +88 -67
  4. data/doc/twitter-demo.html +5 -6
  5. data/documentation/TimelineSetter/CLI.html +1 -1
  6. data/documentation/TimelineSetter/Parser.html +1 -1
  7. data/documentation/TimelineSetter/Timeline.html +1 -1
  8. data/documentation/TimelineSetter.html +2 -2
  9. data/documentation/_index.html +1 -1
  10. data/documentation/file.README.html +1 -1
  11. data/documentation/index.html +1 -1
  12. data/documentation/top-level-namespace.html +1 -1
  13. data/index.html +12 -2
  14. data/lib/timeline_setter/cli.rb +10 -4
  15. data/lib/timeline_setter/timeline.rb +7 -2
  16. data/lib/timeline_setter/version.rb +1 -1
  17. data/public/javascripts/timeline-setter.js +74 -39
  18. data/spec/timeline_setter_spec.rb +23 -5
  19. data/templates/timeline-markup.erb +1 -1
  20. data/timeline_setter.gemspec +2 -6
  21. metadata +6 -7
data/doc/timeline-setter.html CHANGED
@@ -127,6 +127,8 @@ on the passed in <code>Bounds</code>.</p> </td> <td clas
127
127
  <span class="k">return</span> <span class="nx">dYear</span><span class="p">;</span>
128
128
  <span class="k">case</span> <span class="s2">&quot;Month&quot;</span><span class="o">:</span>
129
129
  <span class="k">return</span> <span class="nx">dMonth</span> <span class="o">+</span> <span class="s1">&#39;, &#39;</span> <span class="o">+</span> <span class="nx">dYear</span><span class="p">;</span>
130
+ <span class="k">case</span> <span class="s2">&quot;Week&quot;</span><span class="o">:</span>
131
+ <span class="k">return</span> <span class="nx">dDate</span><span class="p">;</span>
130
132
  <span class="k">case</span> <span class="s2">&quot;Date&quot;</span><span class="o">:</span>
131
133
  <span class="k">return</span> <span class="nx">dDate</span><span class="p">;</span>
132
134
  <span class="k">case</span> <span class="s2">&quot;Hours&quot;</span><span class="o">:</span>
@@ -143,11 +145,12 @@ on the passed in <code>Bounds</code>.</p> </td> <td clas
143
145
  <span class="nx">Lustrum</span> <span class="o">:</span> <span class="mi">157680000000</span><span class="p">,</span>
144
146
  <span class="nx">FullYear</span> <span class="o">:</span> <span class="mi">31536000000</span><span class="p">,</span>
145
147
  <span class="nx">Month</span> <span class="o">:</span> <span class="mi">2592000000</span><span class="p">,</span>
148
+ <span class="nx">Week</span> <span class="o">:</span> <span class="mi">604800000</span><span class="p">,</span>
146
149
  <span class="nb">Date</span> <span class="o">:</span> <span class="mi">86400000</span><span class="p">,</span>
147
150
  <span class="nx">Hours</span> <span class="o">:</span> <span class="mi">3600000</span><span class="p">,</span>
148
151
  <span class="nx">Minutes</span> <span class="o">:</span> <span class="mi">60000</span><span class="p">,</span>
149
152
  <span class="nx">Seconds</span> <span class="o">:</span> <span class="mi">1000</span>
150
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <p>The order used when testing where exactly a timespan falls.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">INTERVAL_ORDER</span> <span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Seconds&#39;</span><span class="p">,</span><span class="s1">&#39;Minutes&#39;</span><span class="p">,</span><span class="s1">&#39;Hours&#39;</span><span class="p">,</span><span class="s1">&#39;Date&#39;</span><span class="p">,</span><span class="s1">&#39;Month&#39;</span><span class="p">,</span><span class="s1">&#39;FullYear&#39;</span><span class="p">,</span> <span class="s1">&#39;Lustrum&#39;</span><span class="p">,</span> <span class="s1">&#39;Decade&#39;</span><span class="p">],</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <p>A test to find the appropriate range of intervals, for example if a range of
153
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <p>The order used when testing where exactly a timespan falls.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">INTERVAL_ORDER</span> <span class="o">:</span> <span class="p">[</span><span class="s1">&#39;Seconds&#39;</span><span class="p">,</span><span class="s1">&#39;Minutes&#39;</span><span class="p">,</span><span class="s1">&#39;Hours&#39;</span><span class="p">,</span><span class="s1">&#39;Date&#39;</span><span class="p">,</span><span class="s1">&#39;Week&#39;</span><span class="p">,</span><span class="s1">&#39;Month&#39;</span><span class="p">,</span><span class="s1">&#39;FullYear&#39;</span><span class="p">,</span><span class="s1">&#39;Lustrum&#39;</span><span class="p">,</span><span class="s1">&#39;Decade&#39;</span><span class="p">],</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <p>A test to find the appropriate range of intervals, for example if a range of
151
154
  timestamps only spans hours this will return true when called with <code>"Hours"</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">isAtLeastA</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">interval</span><span class="p">)</span> <span class="p">{</span>
152
155
  <span class="k">return</span> <span class="p">((</span><span class="k">this</span><span class="p">.</span><span class="nx">max</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">min</span><span class="p">)</span> <span class="o">&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">INTERVALS</span><span class="p">[</span><span class="nx">interval</span><span class="p">]);</span>
153
156
  <span class="p">},</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">&#182;</a> </div> <p>Find the maximum interval we should use based on the estimates in <code>INTERVALS</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setMaxInterval</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
@@ -163,50 +166,68 @@ Decades are defined in the conventional (ie. 60s) sense,
163
166
  instead of the more precise mathematical method that starts
164
167
  with year one. For example, the current decade runs from 2010-2019.
165
168
  And if you pass in the year 2010 or 2015 you'll get 2010 back.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getDecade</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">date</span><span class="p">)</span> <span class="p">{</span>
166
- <span class="k">return</span> <span class="p">(</span><span class="nx">date</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">()</span> <span class="o">/</span> <span class="mi">10</span> <span class="o">|</span> <span class="mi">0</span><span class="p">)</span> <span class="o">*</span> <span class="mi">10</span><span class="p">;</span>
169
+ <span class="k">return</span> <span class="p">(</span><span class="nx">date</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">()</span> <span class="o">/</span> <span class="mi">10</span> <span class="o">|</span> <span class="mi">0</span><span class="p">)</span> <span class="o">*</span> <span class="mi">10</span><span class="p">;</span>
167
170
  <span class="p">},</span>
168
- </pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">&#182;</a> </div> <p>Returns the first year of the five year "lustrum" a Date belongs to
171
+ </pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">&#182;</a> </div> <p>Returns the first year of the five year "lustrum" a Date belongs to
169
172
  as an integer. A lustrum is a fancy Roman word for a "five-year period."
170
173
  You can read more about it <a href="http://en.wikipedia.org/wiki/Lustrum">here</a>.
171
174
  This all means that if you pass in the year 2011 you'll get 2010 back.
172
175
  And if you pass in the year 1997 you'll get 1995 back.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getLustrum</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">date</span><span class="p">)</span> <span class="p">{</span>
173
- <span class="k">return</span> <span class="p">(</span><span class="nx">date</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">()</span> <span class="o">/</span> <span class="mi">5</span> <span class="o">|</span> <span class="mi">0</span><span class="p">)</span> <span class="o">*</span> <span class="mi">5</span><span class="p">;</span>
176
+ <span class="k">return</span> <span class="p">(</span><span class="nx">date</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">()</span> <span class="o">/</span> <span class="mi">5</span> <span class="o">|</span> <span class="mi">0</span><span class="p">)</span> <span class="o">*</span> <span class="mi">5</span><span class="p">;</span>
177
+ <span class="p">},</span>
178
+ </pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">&#182;</a> </div> <p>Return a Date object rounded down to the previous Sunday, a.k.a. the first day of the week.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getWeekFloor</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">date</span><span class="p">)</span> <span class="p">{</span>
179
+ <span class="nx">thisDate</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">date</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">(),</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">(),</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getDate</span><span class="p">());</span>
180
+ <span class="nx">thisDate</span><span class="p">.</span><span class="nx">setDate</span><span class="p">(</span><span class="nx">date</span><span class="p">.</span><span class="nx">getDate</span><span class="p">()</span> <span class="o">-</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getDay</span><span class="p">());</span>
181
+ <span class="k">return</span> <span class="nx">thisDate</span><span class="p">;</span>
182
+ <span class="p">},</span>
183
+ </pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">&#182;</a> </div> <p>Return a Date object rounded up to the next Sunday, a.k.a. the start of the next week.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getWeekCeil</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">date</span><span class="p">)</span> <span class="p">{</span>
184
+ <span class="nx">thisDate</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">date</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">(),</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">(),</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getDate</span><span class="p">());</span>
185
+ <span class="nx">thisDate</span><span class="p">.</span><span class="nx">setDate</span><span class="p">(</span><span class="nx">thisDate</span><span class="p">.</span><span class="nx">getDate</span><span class="p">()</span> <span class="o">+</span> <span class="p">(</span><span class="mi">7</span> <span class="o">-</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getDay</span><span class="p">()));</span>
186
+ <span class="k">return</span> <span class="nx">thisDate</span><span class="p">;</span>
174
187
  <span class="p">},</span>
175
- </pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">&#182;</a> </div> <p>Zero out a date from the current interval down to seconds.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">floor</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ts</span><span class="p">){</span>
176
- <span class="kd">var</span> <span class="nx">idx</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">idx</span><span class="p">;</span>
177
- <span class="kd">var</span> <span class="nx">date</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">ts</span><span class="p">);</span>
178
- <span class="k">while</span><span class="p">(</span><span class="nx">idx</span><span class="o">--</span><span class="p">){</span>
188
+ </pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">&#182;</a> </div> <p>Zero out a date from the current interval down to seconds.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">floor</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ts</span><span class="p">){</span>
189
+ <span class="kd">var</span> <span class="nx">date</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">ts</span><span class="p">);</span>
190
+ <span class="kd">var</span> <span class="nx">intvl</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">idx</span><span class="p">];</span>
191
+ <span class="kd">var</span> <span class="nx">idx</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">idx</span> <span class="o">&gt;</span> <span class="nx">_</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">,</span><span class="s1">&#39;FullYear&#39;</span><span class="p">)</span> <span class="o">?</span>
192
+ <span class="nx">_</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">,</span><span class="s1">&#39;FullYear&#39;</span><span class="p">)</span> <span class="o">:</span>
193
+ <span class="nx">idx</span><span class="p">;</span>
194
+ </pre></div> </td> </tr> <tr id="section-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">&#182;</a> </div> <p>Zero the special extensions, and adjust as idx necessary.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">switch</span><span class="p">(</span><span class="nx">intvl</span><span class="p">){</span>
195
+ <span class="k">case</span> <span class="s1">&#39;Decade&#39;</span><span class="o">:</span>
196
+ <span class="nx">date</span><span class="p">.</span><span class="nx">setFullYear</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getDecade</span><span class="p">(</span><span class="nx">date</span><span class="p">));</span>
197
+ <span class="k">break</span><span class="p">;</span>
198
+ <span class="k">case</span> <span class="s1">&#39;Lustrum&#39;</span><span class="o">:</span>
199
+ <span class="nx">date</span><span class="p">.</span><span class="nx">setFullYear</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getLustrum</span><span class="p">(</span><span class="nx">date</span><span class="p">));</span>
200
+ <span class="k">break</span><span class="p">;</span>
201
+ <span class="k">case</span> <span class="s1">&#39;Week&#39;</span><span class="o">:</span>
202
+ <span class="nx">date</span><span class="p">.</span><span class="nx">setDate</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getWeekFloor</span><span class="p">(</span><span class="nx">date</span><span class="p">).</span><span class="nx">getDate</span><span class="p">());</span>
203
+ <span class="nx">idx</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">,</span> <span class="s1">&#39;Week&#39;</span><span class="p">);</span>
204
+ <span class="p">}</span>
205
+ </pre></div> </td> </tr> <tr id="section-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">&#182;</a> </div> <p>Zero out the rest</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">while</span><span class="p">(</span><span class="nx">idx</span><span class="o">--</span><span class="p">){</span>
179
206
  <span class="kd">var</span> <span class="nx">intvl</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">[</span><span class="nx">idx</span><span class="p">];</span>
180
- <span class="k">switch</span><span class="p">(</span><span class="nx">intvl</span><span class="p">){</span>
181
- <span class="k">case</span> <span class="s1">&#39;Lustrum&#39;</span><span class="o">:</span>
182
- <span class="nx">date</span><span class="p">[</span><span class="s2">&quot;setFullYear&quot;</span><span class="p">](</span><span class="k">this</span><span class="p">.</span><span class="nx">getDecade</span><span class="p">(</span><span class="nx">date</span><span class="p">));</span>
183
- <span class="k">break</span><span class="p">;</span>
184
- <span class="k">case</span> <span class="s1">&#39;FullYear&#39;</span><span class="o">:</span>
185
- <span class="nx">date</span><span class="p">[</span><span class="s2">&quot;setFullYear&quot;</span><span class="p">](</span><span class="k">this</span><span class="p">.</span><span class="nx">getLustrum</span><span class="p">(</span><span class="nx">date</span><span class="p">));</span>
186
- <span class="k">break</span><span class="p">;</span>
187
- <span class="k">default</span><span class="o">:</span>
188
- <span class="nx">date</span><span class="p">[</span><span class="s2">&quot;set&quot;</span> <span class="o">+</span> <span class="nx">intvl</span><span class="p">](</span><span class="nx">intvl</span> <span class="o">===</span> <span class="s2">&quot;Date&quot;</span> <span class="o">?</span> <span class="mi">1</span> <span class="o">:</span> <span class="mi">0</span><span class="p">);</span>
189
- <span class="p">}</span>
207
+ <span class="k">if</span><span class="p">(</span><span class="nx">intvl</span> <span class="o">!==</span> <span class="s1">&#39;Week&#39;</span><span class="p">)</span> <span class="nx">date</span><span class="p">[</span><span class="s2">&quot;set&quot;</span> <span class="o">+</span> <span class="nx">intvl</span><span class="p">](</span><span class="nx">intvl</span> <span class="o">===</span> <span class="s2">&quot;Date&quot;</span> <span class="o">?</span> <span class="mi">1</span> <span class="o">:</span> <span class="mi">0</span><span class="p">);</span>
190
208
  <span class="p">}</span>
191
209
  <span class="k">return</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getTime</span><span class="p">();</span>
192
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">&#182;</a> </div> <p>Find the next date based on the past in timestamp.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">ceil</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ts</span><span class="p">){</span>
210
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-38"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-38">&#182;</a> </div> <p>Find the next date based on the past in timestamp.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">ceil</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ts</span><span class="p">){</span>
193
211
  <span class="kd">var</span> <span class="nx">date</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">ts</span><span class="p">));</span>
194
212
  <span class="kd">var</span> <span class="nx">intvl</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">idx</span><span class="p">];</span>
195
213
  <span class="k">switch</span><span class="p">(</span><span class="nx">intvl</span><span class="p">){</span>
196
214
  <span class="k">case</span> <span class="s1">&#39;Decade&#39;</span><span class="o">:</span>
197
- <span class="nx">date</span><span class="p">[</span><span class="s2">&quot;setFullYear&quot;</span><span class="p">](</span><span class="k">this</span><span class="p">.</span><span class="nx">getDecade</span><span class="p">(</span><span class="nx">date</span><span class="p">)</span> <span class="o">+</span> <span class="mi">10</span><span class="p">);</span>
215
+ <span class="nx">date</span><span class="p">.</span><span class="nx">setFullYear</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getDecade</span><span class="p">(</span><span class="nx">date</span><span class="p">)</span> <span class="o">+</span> <span class="mi">10</span><span class="p">);</span>
198
216
  <span class="k">break</span><span class="p">;</span>
199
217
  <span class="k">case</span> <span class="s1">&#39;Lustrum&#39;</span><span class="o">:</span>
200
- <span class="nx">date</span><span class="p">[</span><span class="s2">&quot;setFullYear&quot;</span><span class="p">](</span><span class="k">this</span><span class="p">.</span><span class="nx">getLustrum</span><span class="p">(</span><span class="nx">date</span><span class="p">)</span> <span class="o">+</span> <span class="mi">5</span><span class="p">);</span>
218
+ <span class="nx">date</span><span class="p">.</span><span class="nx">setFullYear</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getLustrum</span><span class="p">(</span><span class="nx">date</span><span class="p">)</span> <span class="o">+</span> <span class="mi">5</span><span class="p">);</span>
219
+ <span class="k">break</span><span class="p">;</span>
220
+ <span class="k">case</span> <span class="s1">&#39;Week&#39;</span><span class="o">:</span>
221
+ <span class="nx">date</span><span class="p">.</span><span class="nx">setTime</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getWeekCeil</span><span class="p">(</span><span class="nx">date</span><span class="p">).</span><span class="nx">getTime</span><span class="p">());</span>
201
222
  <span class="k">break</span><span class="p">;</span>
202
223
  <span class="k">default</span><span class="o">:</span>
203
224
  <span class="nx">date</span><span class="p">[</span><span class="s2">&quot;set&quot;</span> <span class="o">+</span> <span class="nx">intvl</span><span class="p">](</span><span class="nx">date</span><span class="p">[</span><span class="s2">&quot;get&quot;</span> <span class="o">+</span> <span class="nx">intvl</span><span class="p">]()</span> <span class="o">+</span> <span class="mi">1</span><span class="p">);</span>
204
225
  <span class="p">}</span>
205
226
  <span class="k">return</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getTime</span><span class="p">();</span>
206
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">&#182;</a> </div> <p>The actual difference in timespans accounting for time oddities like
227
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-39"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-39">&#182;</a> </div> <p>The actual difference in timespans accounting for time oddities like
207
228
  different length months and leap years.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">span</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ts</span><span class="p">){</span>
208
229
  <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">ceil</span><span class="p">(</span><span class="nx">ts</span><span class="p">)</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">ts</span><span class="p">);</span>
209
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">&#182;</a> </div> <p>Calculate and return a list of human formatted strings and raw timestamps.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getRanges</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
230
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-40"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-40">&#182;</a> </div> <p>Calculate and return a list of human formatted strings and raw timestamps.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getRanges</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
210
231
  <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">intervals</span><span class="p">)</span> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">intervals</span><span class="p">;</span>
211
232
  <span class="k">this</span><span class="p">.</span><span class="nx">intervals</span> <span class="o">=</span> <span class="p">[];</span>
212
233
  <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">min</span><span class="p">);</span> <span class="nx">i</span> <span class="o">&lt;=</span> <span class="k">this</span><span class="p">.</span><span class="nx">ceil</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">max</span><span class="p">);</span> <span class="nx">i</span> <span class="o">+=</span> <span class="k">this</span><span class="p">.</span><span class="nx">span</span><span class="p">(</span><span class="nx">i</span><span class="p">))</span> <span class="p">{</span>
@@ -217,7 +238,7 @@ different length months and leap years.</p> </td> <td cl
217
238
  <span class="p">}</span>
218
239
  <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">intervals</span><span class="p">;</span>
219
240
  <span class="p">}</span>
220
- <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>Handy dandy function to bind a listener on multiple events. For example,
241
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">&#182;</a> </div> <p>Handy dandy function to bind a listener on multiple events. For example,
221
242
  <code>Bar</code> and <code>CardContainer</code> are bound like so on "move" and "zoom":</p>
222
243
 
223
244
  <pre><code> sync(this.bar, this.cardCont, "move", "zoom");
@@ -229,14 +250,14 @@ different length months and leap years.</p> </td> <td cl
229
250
  <span class="nx">listener</span><span class="p">[</span><span class="nx">ev</span><span class="p">](</span><span class="nx">e</span><span class="p">);</span>
230
251
  <span class="p">});</span>
231
252
  <span class="p">});</span>
232
- <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>Get a template from the DOM and return a compiled function.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">query</span><span class="p">)</span> <span class="p">{</span>
253
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-42"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42">&#182;</a> </div> <p>Get a template from the DOM and return a compiled function.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">template</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">query</span><span class="p">)</span> <span class="p">{</span>
233
254
  <span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">query</span><span class="p">).</span><span class="nx">html</span><span class="p">());</span>
234
- <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>Simple function to strip suffixes like <code>"px"</code> and return a clean integer for
255
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-43"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43">&#182;</a> </div> <p>Simple function to strip suffixes like <code>"px"</code> and return a clean integer for
235
256
  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>
236
257
  <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>
237
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-40"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-40">&#182;</a> </div> <p>Zero 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>
258
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-44"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-44">&#182;</a> </div> <p>Zero pad a number less than 10 and return a 2 digit value.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">padNumber</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">number</span><span class="p">)</span> <span class="p">{</span>
238
259
  <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>
239
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">&#182;</a> </div> <p>A quick and dirty hash manager for setting and getting values from
260
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-45"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-45">&#182;</a> </div> <p>A quick and dirty hash manager for setting and getting values from
240
261
  <code>window.location.hash</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">hashStrip</span> <span class="o">=</span> <span class="sr">/^#*/</span><span class="p">;</span>
241
262
  <span class="kd">var</span> <span class="nx">history</span> <span class="o">=</span> <span class="p">{</span>
242
263
  <span class="nx">get</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
@@ -246,8 +267,8 @@ use.</p> </td> <td class="code"> <div clas
246
267
  <span class="nx">set</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">url</span><span class="p">){</span>
247
268
  <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span> <span class="o">=</span> <span class="nx">url</span><span class="p">;</span>
248
269
  <span class="p">}</span>
249
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-42"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42">&#182;</a> </div> <p>Every new <code>Series</code> gets new color. If there are too many series
250
- the remaining series will be a simple gray.</p> </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>These colors can be styled like such in
270
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-46"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-46">&#182;</a> </div> <p>Every new <code>Series</code> gets new color. If there are too many series
271
+ the remaining series will be a simple gray.</p> </td> <td class="code"> <div class="highlight"><pre> </pre></div> </td> </tr> <tr id="section-47"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-47">&#182;</a> </div> <p>These colors can be styled like such in
251
272
  timeline-setter.css, where the numbers 1-9 cycle through in that order:</p>
252
273
 
253
274
  <pre><code> .TS-notch_color_1,.TS-series_legend_swatch_1 {
@@ -272,7 +293,7 @@ timeline-setter.css, where the numbers 1-9 cycle through in that order:</p>
272
293
  <span class="nx">chosen</span> <span class="o">=</span> <span class="s2">&quot;default&quot;</span><span class="p">;</span>
273
294
  <span class="p">}</span>
274
295
  <span class="k">return</span> <span class="nx">chosen</span><span class="p">;</span>
275
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-44"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-44">&#182;</a> </div> <h2>Models</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-45"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-45">&#182;</a> </div> <p>The main kickoff point for rendering the timeline. The <code>Timeline</code> constructor
296
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-48"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-48">&#182;</a> </div> <h2>Models</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-49"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-49">&#182;</a> </div> <p>The main kickoff point for rendering the timeline. The <code>Timeline</code> constructor
276
297
  takes a json array of card representations and then builds series, calculates
277
298
  intervals <code>sync</code>s the <code>Bar</code> and <code>CardContainer</code> objects and triggers the
278
299
  <code>render</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Timeline</span> <span class="o">=</span> <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">Timeline</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
@@ -296,10 +317,10 @@ intervals <code>sync</code>s the <code>Bar</code> and <code>CardContainer</code>
296
317
  <span class="p">};</span>
297
318
  <span class="nx">observable</span><span class="p">(</span><span class="nx">Timeline</span><span class="p">.</span><span class="nx">prototype</span><span class="p">);</span>
298
319
 
299
- <span class="nx">Timeline</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Timeline</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-46"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-46">&#182;</a> </div> <p>Loop through the JSON and add each element to a series.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">createSeries</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">series</span><span class="p">){</span>
320
+ <span class="nx">Timeline</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Timeline</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-50"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-50">&#182;</a> </div> <p>Loop through the JSON and add each element to a series.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">createSeries</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">series</span><span class="p">){</span>
300
321
  <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">series</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span>
301
322
  <span class="k">this</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">series</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
302
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-47"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-47">&#182;</a> </div> <p>If a particular element in the JSON array mentions a series that's not
323
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-51"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-51">&#182;</a> </div> <p>If a particular element in the JSON array mentions a series that's not
303
324
  in the <code>bySid</code> object add it. Then add a card to the <code>Series</code> and extend
304
325
  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>
305
326
  <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>
@@ -312,7 +333,7 @@ the global <code>bounds</code>.</p> </td> <td class="cod
312
333
  <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>
313
334
  <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>
314
335
  <span class="p">}</span>
315
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-48"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-48">&#182;</a> </div> <h2>Views</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-49"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-49">&#182;</a> </div> <p>The main interactive element in the timeline is <code>.TS-notchbar</code>. Behind the
336
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-52"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-52">&#182;</a> </div> <h2>Views</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-53"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-53">&#182;</a> </div> <p>The main interactive element in the timeline is <code>.TS-notchbar</code>. Behind the
316
337
  scenes <code>Bar</code> handles the moving and zooming behaviours through the <code>draggable</code>
317
338
  and <code>wheel</code> plugins.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Bar</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">timeline</span><span class="p">)</span> <span class="p">{</span>
318
339
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notchbar&quot;</span><span class="p">);</span>
@@ -332,7 +353,7 @@ and <code>wheel</code> plugins.</p> </td> <td class="cod
332
353
  <span class="nx">observable</span><span class="p">(</span><span class="nx">Bar</span><span class="p">.</span><span class="nx">prototype</span><span class="p">);</span>
333
354
  <span class="nx">transformable</span><span class="p">(</span><span class="nx">Bar</span><span class="p">.</span><span class="nx">prototype</span><span class="p">);</span>
334
355
 
335
- <span class="nx">Bar</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Bar</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-50"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-50">&#182;</a> </div> <p>Every time the <code>Bar</code> is moved, it calculates whether the proposed movement
356
+ <span class="nx">Bar</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Bar</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-54"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-54">&#182;</a> </div> <p>Every time the <code>Bar</code> is moved, it calculates whether the proposed movement
336
357
  will move the <code>.TS-notchbar</code> off of its parent. If so, it recaculates
337
358
  <code>deltaX</code> to be a more correct value.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">moving</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
338
359
  <span class="kd">var</span> <span class="nx">parent</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">parent</span><span class="p">();</span>
@@ -349,7 +370,7 @@ will move the <code>.TS-notchbar</code> off of its parent. If so, it recaculates
349
370
  <span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">&quot;move&quot;</span><span class="p">;</span>
350
371
  <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
351
372
  <span class="k">this</span><span class="p">.</span><span class="nx">move</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
352
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-51"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-51">&#182;</a> </div> <p>As the timeline zooms, the <code>Bar</code> tries to keep the current notch (i.e.
373
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-55"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-55">&#182;</a> </div> <p>As the timeline zooms, the <code>Bar</code> tries to keep the current notch (i.e.
353
374
  <code>.TS-notch_active</code>) as close to its original position as possible.
354
375
  There's a slight bug here because the timeline zooms and then moves the
355
376
  bar to correct for this behaviour, and in future versions we'll fix this.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">doZoom</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">width</span><span class="p">){</span>
@@ -372,7 +393,7 @@ bar to correct for this behaviour, and in future versions we'll fix this.</p>
372
393
  <span class="nx">that</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
373
394
  <span class="p">}</span>
374
395
  <span class="p">});</span>
375
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-52"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-52">&#182;</a> </div> <p>When asked to render the bar places the appropriate timestamp notches
396
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-56"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-56">&#182;</a> </div> <p>When asked to render the bar places the appropriate timestamp notches
376
397
  inside <code>.TS-notchbar</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
377
398
  <span class="kd">var</span> <span class="nx">intervals</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">intervals</span><span class="p">;</span>
378
399
  <span class="kd">var</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bounds</span><span class="p">;</span>
@@ -382,12 +403,12 @@ inside <code>.TS-notchbar</code>.</p> </td> <td class="c
382
403
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">html</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&quot;left&quot;</span><span class="p">,</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">project</span><span class="p">(</span><span class="nx">intervals</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">timestamp</span><span class="p">,</span> <span class="mi">100</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;%&quot;</span><span class="p">));</span>
383
404
  <span class="p">}</span>
384
405
  <span class="p">}</span>
385
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-53"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-53">&#182;</a> </div> <p>The <code>CardScroller</code> mirrors the moving and zooming of the <code>Bar</code> and is the
406
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-57"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-57">&#182;</a> </div> <p>The <code>CardScroller</code> mirrors the moving and zooming of the <code>Bar</code> and is the
386
407
  canvas where individual cards are rendered.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">CardScroller</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">timeline</span><span class="p">){</span>
387
408
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#TS-card_scroller_inner&quot;</span><span class="p">);</span>
388
409
  <span class="p">};</span>
389
410
  <span class="nx">observable</span><span class="p">(</span><span class="nx">CardScroller</span><span class="p">.</span><span class="nx">prototype</span><span class="p">);</span>
390
- <span class="nx">transformable</span><span class="p">(</span><span class="nx">CardScroller</span><span class="p">.</span><span class="nx">prototype</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-54"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-54">&#182;</a> </div> <p>Each <code>Series</code> picks a unique color and keeps an array of <code>Cards</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Series</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">series</span><span class="p">,</span> <span class="nx">timeline</span><span class="p">)</span> <span class="p">{</span>
411
+ <span class="nx">transformable</span><span class="p">(</span><span class="nx">CardScroller</span><span class="p">.</span><span class="nx">prototype</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-58"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-58">&#182;</a> </div> <p>Each <code>Series</code> picks a unique color and keeps an array of <code>Cards</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Series</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">series</span><span class="p">,</span> <span class="nx">timeline</span><span class="p">)</span> <span class="p">{</span>
391
412
  <span class="k">this</span><span class="p">.</span><span class="nx">timeline</span> <span class="o">=</span> <span class="nx">timeline</span><span class="p">;</span>
392
413
  <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">series</span><span class="p">.</span><span class="nx">series</span><span class="p">;</span>
393
414
  <span class="k">this</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="o">?</span> <span class="nx">color</span><span class="p">()</span> <span class="o">:</span> <span class="s2">&quot;default&quot;</span><span class="p">;</span>
@@ -398,20 +419,20 @@ canvas where individual cards are rendered.</p> </td> <t
398
419
  <span class="p">};</span>
399
420
  <span class="nx">observable</span><span class="p">(</span><span class="nx">Series</span><span class="p">.</span><span class="nx">prototype</span><span class="p">);</span>
400
421
 
401
- <span class="nx">Series</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Series</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-55"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-55">&#182;</a> </div> <p>Create and add a particular card to the cards array.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">add</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">card</span><span class="p">){</span>
422
+ <span class="nx">Series</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Series</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-59"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-59">&#182;</a> </div> <p>Create and add a particular card to the cards array.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">add</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">card</span><span class="p">){</span>
402
423
  <span class="kd">var</span> <span class="nx">crd</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Card</span><span class="p">(</span><span class="nx">card</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
403
424
  <span class="k">this</span><span class="p">.</span><span class="nx">cards</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">crd</span><span class="p">);</span>
404
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-56"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-56">&#182;</a> </div> <p>The comparing function for <code>max</code> and <code>min</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_comparator</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">crd</span><span class="p">){</span>
425
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-60"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-60">&#182;</a> </div> <p>The comparing function for <code>max</code> and <code>min</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_comparator</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">crd</span><span class="p">){</span>
405
426
  <span class="k">return</span> <span class="nx">crd</span><span class="p">.</span><span class="nx">timestamp</span><span class="p">;</span>
406
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-57"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-57">&#182;</a> </div> <p>Inactivate this series legend item and trigger a <code>hideNotch</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">hideNotches</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
427
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-61"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-61">&#182;</a> </div> <p>Inactivate this series legend item and trigger a <code>hideNotch</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">hideNotches</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
407
428
  <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
408
429
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;TS-series_legend_item_inactive&quot;</span><span class="p">);</span>
409
430
  <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s2">&quot;hideNotch&quot;</span><span class="p">));</span>
410
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-58"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-58">&#182;</a> </div> <p>Activate the legend item and trigger the <code>showNotch</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">showNotches</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
431
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-62"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-62">&#182;</a> </div> <p>Activate the legend item and trigger the <code>showNotch</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">showNotches</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
411
432
  <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
412
433
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;TS-series_legend_item_inactive&quot;</span><span class="p">);</span>
413
434
  <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s2">&quot;showNotch&quot;</span><span class="p">));</span>
414
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-59"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-59">&#182;</a> </div> <p>Create and append the label to <code>.TS-series_nav_container</code> and bind up
435
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-63"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-63">&#182;</a> </div> <p>Create and append the label to <code>.TS-series_nav_container</code> and bind up
415
436
  <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>
416
437
  <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">&quot;render&quot;</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
417
438
  <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>
@@ -419,11 +440,11 @@ canvas where individual cards are rendered.</p> </td> <t
419
440
  <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-series_nav_container&quot;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
420
441
  <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>
421
442
  <span class="p">}</span>
422
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-60"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-60">&#182;</a> </div> <p>Proxy to underscore for <code>min</code> and <code>max</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span><span class="p">([</span><span class="s2">&quot;min&quot;</span><span class="p">,</span> <span class="s2">&quot;max&quot;</span><span class="p">]).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">){</span>
443
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-64"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-64">&#182;</a> </div> <p>Proxy to underscore for <code>min</code> and <code>max</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span><span class="p">([</span><span class="s2">&quot;min&quot;</span><span class="p">,</span> <span class="s2">&quot;max&quot;</span><span class="p">]).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">){</span>
423
444
  <span class="nx">Series</span><span class="p">.</span><span class="nx">prototype</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
424
445
  <span class="k">return</span> <span class="nx">_</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">call</span><span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">cards</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_comparator</span><span class="p">).</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;timestamp&quot;</span><span class="p">);</span>
425
446
  <span class="p">};</span>
426
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-61"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-61">&#182;</a> </div> <p>Every <code>Card</code> handles a notch div which is immediately appended to the <code>Bar</code>
447
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-65"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-65">&#182;</a> </div> <p>Every <code>Card</code> handles a notch div which is immediately appended to the <code>Bar</code>
427
448
  and a <code>.TS-card_container</code> which is lazily rendered.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Card</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">card</span><span class="p">,</span> <span class="nx">series</span><span class="p">)</span> <span class="p">{</span>
428
449
  <span class="k">this</span><span class="p">.</span><span class="nx">series</span> <span class="o">=</span> <span class="nx">series</span><span class="p">;</span>
429
450
  <span class="kd">var</span> <span class="nx">card</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">clone</span><span class="p">(</span><span class="nx">card</span><span class="p">);</span>
@@ -443,11 +464,11 @@ and a <code>.TS-card_container</code> which is lazily rendered.</p>
443
464
  <span class="p">].</span><span class="nx">join</span><span class="p">(</span><span class="s2">&quot;-&quot;</span><span class="p">);</span>
444
465
  <span class="p">};</span>
445
466
 
446
- <span class="nx">Card</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-62"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-62">&#182;</a> </div> <p>Get a particular attribute by key.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">get</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">){</span>
467
+ <span class="nx">Card</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-66"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-66">&#182;</a> </div> <p>Get a particular attribute by key.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">get</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">){</span>
447
468
  <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">[</span><span class="nx">key</span><span class="p">];</span>
448
- <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>A version of <code>jQuery</code> scoped to the <code>Card</code>'s element.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">query</span><span class="p">){</span>
469
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-67"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-67">&#182;</a> </div> <p>A version of <code>jQuery</code> scoped to the <code>Card</code>'s element.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">query</span><span class="p">){</span>
449
470
  <span class="k">return</span> <span class="nx">$</span><span class="p">(</span><span class="nx">query</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
450
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-64"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-64">&#182;</a> </div> <p>When each <code>Card</code> is rendered via a render event, it appends a notch to the
471
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-68"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-68">&#182;</a> </div> <p>When each <code>Card</code> is rendered via a render event, it appends a notch to the
451
472
  <code>Bar</code> and binds a click handler so it can be activated. if the <code>Card</code>'s id
452
473
  is currently selected via <code>window.location.hash</code> it's activated.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
453
474
  <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">&quot;render&quot;</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
@@ -457,7 +478,7 @@ is currently selected via <code>window.location.hash</code> it's activated.</p>
457
478
  <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notchbar&quot;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">notch</span><span class="p">);</span>
458
479
  <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>
459
480
  <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>
460
- <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>As the <code>Bar</code> moves the current card checks to see if it's outside the viewport,
481
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-69"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-69">&#182;</a> </div> <p>As the <code>Bar</code> moves the current card checks to see if it's outside the viewport,
461
482
  if it is the card is flipped so as to be visible for the longest period
462
483
  of time. The magic number here (7) is half the width of the css arrow.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">flip</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
463
484
  <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">!==</span> <span class="s2">&quot;move&quot;</span> <span class="o">||</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">||</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">is</span><span class="p">(</span><span class="s2">&quot;:visible&quot;</span><span class="p">))</span> <span class="k">return</span><span class="p">;</span>
@@ -466,17 +487,17 @@ of time. The magic number here (7) is half the width of the css arrow.</p>
466
487
  <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>
467
488
  <span class="kd">var</span> <span class="nx">flippable</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">&lt;</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
468
489
  <span class="kd">var</span> <span class="nx">offTimeline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">position</span><span class="p">().</span><span class="nx">left</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">&lt;</span> <span class="mi">0</span><span class="p">;</span>
469
- </pre></div> </td> </tr> <tr id="section-66"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-66">&#182;</a> </div> <p>If the card's right edge is more than the timeline's right edge and
490
+ </pre></div> </td> </tr> <tr id="section-70"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-70">&#182;</a> </div> <p>If the card's right edge is more than the timeline's right edge and
470
491
  it's never been flipped before and it won't go off the timeline when
471
492
  flipped. We'll flip it.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">tRightEdge</span> <span class="o">-</span> <span class="nx">rightEdge</span> <span class="o">&lt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nx">margin</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">offTimeline</span><span class="p">)</span> <span class="p">{</span>
472
493
  <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>
473
- <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-css_arrow&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="s2">&quot;left&quot;</span> <span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()});</span></pre></div> </td> </tr> <tr id="section-67"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-67">&#182;</a> </div> <p>Otherwise, if the card is off the left side of the timeline and we have
494
+ <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-css_arrow&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="s2">&quot;left&quot;</span> <span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()});</span></pre></div> </td> </tr> <tr id="section-71"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-71">&#182;</a> </div> <p>Otherwise, if the card is off the left side of the timeline and we have
474
495
  flipped it before and the card's width is less than half of the width
475
496
  of the whole timeline, we'll flip it to the default position.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span> <span class="o">-</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">).</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span> <span class="o">&lt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">margin</span> <span class="o">&amp;&amp;</span> <span class="nx">flippable</span><span class="p">)</span> <span class="p">{</span>
476
497
  <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>
477
498
  <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>
478
499
  <span class="p">}</span>
479
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-68"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-68">&#182;</a> </div> <p>The first time a card is activated it renders its <code>template</code> and appends
500
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-72"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-72">&#182;</a> </div> <p>The first time a card is activated it renders its <code>template</code> and appends
480
501
  its element to the <code>Bar</code>. After doing so it sets the width if <code>.TS-item_label</code>
481
502
  and moves the <code>Bar</code> if its element outside the visible portion of the
482
503
  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>
@@ -486,18 +507,18 @@ timeline.</p> </td> <td class="code"> <div
486
507
  <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>
487
508
  <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#TS-card_scroller_inner&quot;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
488
509
  <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>
489
- <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-69"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-69">&#182;</a> </div> <p>Reactivate if there are images in the html so we can recalculate
510
+ <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">delegate</span><span class="p">(</span><span class="s2">&quot;.TS-permalink&quot;</span><span class="p">,</span> <span class="s2">&quot;click&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">setPermalink</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-73"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-73">&#182;</a> </div> <p>Reactivate if there are images in the html so we can recalculate
490
511
  widths and position accordingly.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;img&quot;</span><span class="p">).</span><span class="nx">load</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">activate</span><span class="p">);</span>
491
512
  <span class="p">}</span>
492
513
  <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>
493
514
  <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>
494
515
  <span class="k">this</span><span class="p">.</span><span class="nx">setWidth</span><span class="p">();</span>
495
- </pre></div> </td> </tr> <tr id="section-70"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-70">&#182;</a> </div> <p>In the case that the card is outside the bounds the wrong way when
516
+ </pre></div> </td> </tr> <tr id="section-74"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-74">&#182;</a> </div> <p>In the case that the card is outside the bounds the wrong way when
496
517
  it's flipped, we'll take care of it here before we move the actual
497
518
  card. </p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">flip</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s2">&quot;move&quot;</span><span class="p">));</span>
498
519
  <span class="k">this</span><span class="p">.</span><span class="nx">move</span><span class="p">();</span>
499
520
  <span class="p">},</span>
500
- </pre></div> </td> </tr> <tr id="section-71"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-71">&#182;</a> </div> <p>For Internet Explorer each card sets the width of<code>.TS-item_label</code> to
521
+ </pre></div> </td> </tr> <tr id="section-75"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-75">&#182;</a> </div> <p>For Internet Explorer each card sets the width of<code>.TS-item_label</code> to
501
522
  the maximum width of the card's children, or if that is less than the
502
523
  <code>.TS-item_year</code> element's width, <code>.TS-item_label</code> gets <code>.TS-item_year</code>s
503
524
  width. Which is a funny way of saying, if you'd like to set the width of
@@ -508,7 +529,7 @@ the card as a whole, fiddle with <code>.TS-item_year</code>s width.</p>
508
529
  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
509
530
  <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>
510
531
  <span class="p">}</span>
511
- <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>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>
532
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-76"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-76">&#182;</a> </div> <p>Move the <code>Bar</code> if the card is outside the visible region on activation.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">move</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
512
533
  <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>
513
534
  <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>
514
535
  <span class="kd">var</span> <span class="nx">toffset</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">).</span><span class="nx">offset</span><span class="p">();</span>
@@ -519,12 +540,12 @@ the card as a whole, fiddle with <code>.TS-item_year</code>s width.</p>
519
540
  <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="nx">toffset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#timeline_setter&quot;</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">-</span> <span class="p">(</span><span class="nx">offset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-item&quot;</span><span class="p">).</span><span class="nx">outerWidth</span><span class="p">());</span>
520
541
  <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">moving</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
521
542
  <span class="p">}</span>
522
- <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>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>
543
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-77"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-77">&#182;</a> </div> <p>The click handler to set the current hash to the <code>Card</code>'s id.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setPermalink</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
523
544
  <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>
524
- <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>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>
545
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-78"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-78">&#182;</a> </div> <p>Globally hide any cards with <code>TS-card_active</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">hideActiveCard</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
525
546
  <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-card_active&quot;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;TS-card_active&quot;</span><span class="p">).</span><span class="nx">hide</span><span class="p">();</span>
526
547
  <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notch_active&quot;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;TS-notch_active&quot;</span><span class="p">);</span>
527
- <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>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>
548
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-79"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-79">&#182;</a> </div> <p>An event listener to toggle this notche on and off via <code>Series</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggleNotch</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
528
549
  <span class="k">switch</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span><span class="p">)</span> <span class="p">{</span>
529
550
  <span class="k">case</span> <span class="s2">&quot;hideNotch&quot;</span><span class="o">:</span>
530
551
  <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>
@@ -535,24 +556,24 @@ the card as a whole, fiddle with <code>.TS-item_year</code>s width.</p>
535
556
  <span class="p">}</span>
536
557
  <span class="p">}</span>
537
558
 
538
- <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>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>
559
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-80"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-80">&#182;</a> </div> <p>Simple inheritance helper for <code>Controls</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">ctor</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){};</span>
539
560
  <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>
540
561
  <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>
541
562
  <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>
542
563
  <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>
543
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-77"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-77">&#182;</a> </div> <h2>Controls</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-78"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-78">&#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>
564
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-81"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-81">&#182;</a> </div> <h2>Controls</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-82"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-82">&#182;</a> </div> <p>Each control is basically a callback wrapper for a given DOM element.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Control</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">direction</span><span class="p">){</span>
544
565
  <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>
545
566
  <span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">prefix</span> <span class="o">+</span> <span class="nx">direction</span><span class="p">);</span>
546
567
  <span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
547
568
  <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>
548
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-79"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-79">&#182;</a> </div> <p>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>
569
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-83"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-83">&#182;</a> </div> <p>Each <code>Zoom</code> control adjusts the <code>curZoom</code> when clicked.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">curZoom</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>
549
570
  <span class="kd">var</span> <span class="nx">Zoom</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">direction</span><span class="p">)</span> <span class="p">{</span>
550
571
  <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>
551
572
  <span class="p">};</span>
552
573
  <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>
553
574
 
554
575
  <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>
555
- <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-80"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-80">&#182;</a> </div> <p>Adjust the <code>curZoom</code> up or down by 100 and trigger a <code>doZoom</code> event on
576
+ <span class="nx">prefix</span> <span class="o">:</span> <span class="s2">&quot;.TS-zoom_&quot;</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-84"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-84">&#182;</a> </div> <p>Adjust the <code>curZoom</code> up or down by 100 and trigger a <code>doZoom</code> event on
556
577
  <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>
557
578
  <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>
558
579
  <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>
@@ -561,14 +582,14 @@ the card as a whole, fiddle with <code>.TS-item_year</code>s width.</p>
561
582
  <span class="nx">curZoom</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>
562
583
  <span class="p">}</span>
563
584
  <span class="p">}</span>
564
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-81"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-81">&#182;</a> </div> <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>
585
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-85"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-85">&#182;</a> </div> <p>Each <code>Chooser</code> activates the next or previous notch.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Chooser</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">direction</span><span class="p">)</span> <span class="p">{</span>
565
586
  <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>
566
587
  <span class="k">this</span><span class="p">.</span><span class="nx">notches</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.TS-notch&quot;</span><span class="p">);</span>
567
588
  <span class="p">};</span>
568
589
  <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>
569
590
 
570
591
  <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>
571
- <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-82"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-82">&#182;</a> </div> <p>Figure out which notch to activate and do so by triggering a click on
592
+ <span class="nx">prefix</span><span class="o">:</span> <span class="s2">&quot;.TS-choose_&quot;</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-86"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-86">&#182;</a> </div> <p>Figure out which notch to activate and do so by triggering a click on
572
593
  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>
573
594
  <span class="kd">var</span> <span class="nx">el</span><span class="p">;</span>
574
595
  <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>
@@ -582,7 +603,7 @@ that notch.</p> </td> <td class="code"> <d
582
603
  <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>
583
604
  <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>
584
605
  <span class="p">}</span>
585
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-83"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-83">&#182;</a> </div> <p>Finally, let's create the whole timeline. Boot is exposed globally via
606
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-87"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-87">&#182;</a> </div> <p>Finally, let's create the whole timeline. Boot is exposed globally via
586
607
  <code>TimelineSetter.Timeline.boot()</code> which takes the JSON generated by
587
608
  the timeline-setter binary as an argument. This is handy if you want
588
609
  to be able to generate timelines at arbitrary times (say, for example,