timeline_setter 0.1.1 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- data/Rakefile +1 -1
- data/doc/doc.markdown +9 -1
- data/doc/timeline-setter.html +98 -56
- data/doc/twitter-demo.html +5 -2
- data/documentation/TimelineSetter/CLI.html +1 -1
- data/documentation/TimelineSetter/Parser.html +1 -1
- data/documentation/TimelineSetter/Timeline.html +2 -2
- data/documentation/TimelineSetter.html +2 -2
- data/documentation/_index.html +1 -1
- data/documentation/file.README.html +1 -1
- data/documentation/index.html +1 -1
- data/documentation/top-level-namespace.html +1 -1
- data/index.html +19 -3
- data/lib/timeline_setter/version.rb +1 -1
- data/public/javascripts/timeline-setter.js +45 -3
- data/timeline_setter.gemspec +2 -2
- metadata +4 -4
data/Rakefile
CHANGED
data/doc/doc.markdown
CHANGED
|
@@ -231,7 +231,7 @@ On the client side, there are a number of features we plan to add, including:
|
|
|
231
231
|
<a id="credits"></a>
|
|
232
232
|
## Credits
|
|
233
233
|
|
|
234
|
-
[Al Shaw](http://
|
|
234
|
+
[Al Shaw](http://github.com/ashaw), [Jeff Larson](http://github.com/thejefflarson), ProPublica, [Ben Welsh](http://github.com/palewire), Los Angeles Times
|
|
235
235
|
|
|
236
236
|
<a id="contact"></a>
|
|
237
237
|
## Contact
|
|
@@ -243,6 +243,12 @@ questions should go to <a href="mailto:opensource@propublica.org">opensource@pro
|
|
|
243
243
|
<a id="changelog"></a>
|
|
244
244
|
## Change Log
|
|
245
245
|
|
|
246
|
+
<a id="release-012"></a>
|
|
247
|
+
### 0.1.2
|
|
248
|
+
|
|
249
|
+
* Support for decade and lustrum (five year period) interval notches. _Thanks, [Ben Welsh](http://github.com/palewire)_
|
|
250
|
+
|
|
251
|
+
|
|
246
252
|
<a id="release-011"></a>
|
|
247
253
|
### 0.1.1
|
|
248
254
|
|
|
@@ -253,6 +259,8 @@ questions should go to <a href="mailto:opensource@propublica.org">opensource@pro
|
|
|
253
259
|
* Fixed layout rendering problems when a card was more than half the size of the timeline
|
|
254
260
|
* Fixed an issue where JSON couldn't be generated in Ruby 1.9
|
|
255
261
|
|
|
262
|
+
_Thanks to [Ben Welsh](http://github.com/palewire) for pointing out most of these issues_
|
|
263
|
+
|
|
256
264
|
<a id="release-010"></a>
|
|
257
265
|
### 0.1.0
|
|
258
266
|
|
data/doc/timeline-setter.html
CHANGED
|
@@ -119,6 +119,10 @@ on the passed in <code>Bounds</code>.</p> </td> <td clas
|
|
|
119
119
|
<span class="kd">var</span> <span class="nx">dHourMinuteSecond</span> <span class="o">=</span> <span class="nx">dHourWithMinutes</span> <span class="o">+</span> <span class="s2">":"</span> <span class="o">+</span> <span class="nx">padNumber</span><span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">getSeconds</span><span class="p">());</span>
|
|
120
120
|
|
|
121
121
|
<span class="k">switch</span> <span class="p">(</span><span class="nx">interval</span><span class="p">)</span> <span class="p">{</span>
|
|
122
|
+
<span class="k">case</span> <span class="s2">"Decade"</span><span class="o">:</span>
|
|
123
|
+
<span class="k">return</span> <span class="nx">dYear</span><span class="p">;</span>
|
|
124
|
+
<span class="k">case</span> <span class="s2">"Lustrum"</span><span class="o">:</span>
|
|
125
|
+
<span class="k">return</span> <span class="nx">dYear</span><span class="p">;</span>
|
|
122
126
|
<span class="k">case</span> <span class="s2">"FullYear"</span><span class="o">:</span>
|
|
123
127
|
<span class="k">return</span> <span class="nx">dYear</span><span class="p">;</span>
|
|
124
128
|
<span class="k">case</span> <span class="s2">"Month"</span><span class="o">:</span>
|
|
@@ -135,13 +139,15 @@ on the passed in <code>Bounds</code>.</p> </td> <td clas
|
|
|
135
139
|
<span class="p">};</span>
|
|
136
140
|
|
|
137
141
|
<span class="nx">Intervals</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</a> </div> <p>Sane estimates of date ranges for the <code>isAtLeastA</code> test.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">INTERVALS</span> <span class="o">:</span> <span class="p">{</span>
|
|
142
|
+
<span class="nx">Decade</span> <span class="o">:</span> <span class="mi">315360000000</span><span class="p">,</span>
|
|
143
|
+
<span class="nx">Lustrum</span> <span class="o">:</span> <span class="mi">157680000000</span><span class="p">,</span>
|
|
138
144
|
<span class="nx">FullYear</span> <span class="o">:</span> <span class="mi">31536000000</span><span class="p">,</span>
|
|
139
145
|
<span class="nx">Month</span> <span class="o">:</span> <span class="mi">2592000000</span><span class="p">,</span>
|
|
140
146
|
<span class="nb">Date</span> <span class="o">:</span> <span class="mi">86400000</span><span class="p">,</span>
|
|
141
147
|
<span class="nx">Hours</span> <span class="o">:</span> <span class="mi">3600000</span><span class="p">,</span>
|
|
142
148
|
<span class="nx">Minutes</span> <span class="o">:</span> <span class="mi">60000</span><span class="p">,</span>
|
|
143
149
|
<span class="nx">Seconds</span> <span class="o">:</span> <span class="mi">1000</span>
|
|
144
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</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">'Seconds'</span><span class="p">,</span><span class="s1">'Minutes'</span><span class="p">,</span><span class="s1">'Hours'</span><span class="p">,</span><span class="s1">'Date'</span><span class="p">,</span><span class="s1">'Month'</span><span class="p">,</span><span class="s1">'FullYear'</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">¶</a> </div> <p>A test to find the appropriate range of intervals, for example if a range of
|
|
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">¶</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">'Seconds'</span><span class="p">,</span><span class="s1">'Minutes'</span><span class="p">,</span><span class="s1">'Hours'</span><span class="p">,</span><span class="s1">'Date'</span><span class="p">,</span><span class="s1">'Month'</span><span class="p">,</span><span class="s1">'FullYear'</span><span class="p">,</span> <span class="s1">'Lustrum'</span><span class="p">,</span> <span class="s1">'Decade'</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">¶</a> </div> <p>A test to find the appropriate range of intervals, for example if a range of
|
|
145
151
|
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>
|
|
146
152
|
<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">></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>
|
|
147
153
|
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">¶</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>
|
|
@@ -152,23 +158,55 @@ timestamps only spans hours this will return true when called with <code>"Hours"
|
|
|
152
158
|
<span class="k">this</span><span class="p">.</span><span class="nx">idx</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">-</span> <span class="mi">1</span><span class="p">;</span>
|
|
153
159
|
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">¶</a> </div> <p>Return the calculated <code>maxInterval</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getMaxInterval</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
154
160
|
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">INTERVALS</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">idx</span><span class="p">]];</span>
|
|
155
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">¶</a> </div> <p>
|
|
161
|
+
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">¶</a> </div> <p>Return the first year of the decade a Date belongs to as an integer.
|
|
162
|
+
Decades are defined in the conventional (ie. 60s) sense,
|
|
163
|
+
instead of the more precise mathematical method that starts
|
|
164
|
+
with year one. For example, the current decade runs from 2010-2019.
|
|
165
|
+
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>
|
|
167
|
+
<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">¶</a> </div> <p>Returns the first year of the five year "lustrum" a Date belongs to
|
|
169
|
+
as an integer. A lustrum is a fancy Roman word for a "five-year period."
|
|
170
|
+
You can read more about it <a href="http://en.wikipedia.org/wiki/Lustrum">here</a>.
|
|
171
|
+
This all means that if you pass in the year 2011 you'll get 2010 back.
|
|
172
|
+
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>
|
|
174
|
+
<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">¶</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>
|
|
156
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>
|
|
157
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>
|
|
158
178
|
<span class="k">while</span><span class="p">(</span><span class="nx">idx</span><span class="o">--</span><span class="p">){</span>
|
|
159
179
|
<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>
|
|
160
|
-
<span class="
|
|
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">'Lustrum'</span><span class="o">:</span>
|
|
182
|
+
<span class="nx">date</span><span class="p">[</span><span class="s2">"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>
|
|
183
|
+
<span class="k">break</span><span class="p">;</span>
|
|
184
|
+
<span class="k">case</span> <span class="s1">'FullYear'</span><span class="o">:</span>
|
|
185
|
+
<span class="nx">date</span><span class="p">[</span><span class="s2">"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>
|
|
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">"set"</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">"Date"</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>
|
|
161
190
|
<span class="p">}</span>
|
|
162
191
|
<span class="k">return</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getTime</span><span class="p">();</span>
|
|
163
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</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>
|
|
164
193
|
<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>
|
|
165
194
|
<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>
|
|
166
|
-
<span class="
|
|
195
|
+
<span class="k">switch</span><span class="p">(</span><span class="nx">intvl</span><span class="p">){</span>
|
|
196
|
+
<span class="k">case</span> <span class="s1">'Decade'</span><span class="o">:</span>
|
|
197
|
+
<span class="nx">date</span><span class="p">[</span><span class="s2">"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
|
+
<span class="k">break</span><span class="p">;</span>
|
|
199
|
+
<span class="k">case</span> <span class="s1">'Lustrum'</span><span class="o">:</span>
|
|
200
|
+
<span class="nx">date</span><span class="p">[</span><span class="s2">"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>
|
|
201
|
+
<span class="k">break</span><span class="p">;</span>
|
|
202
|
+
<span class="k">default</span><span class="o">:</span>
|
|
203
|
+
<span class="nx">date</span><span class="p">[</span><span class="s2">"set"</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">"get"</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
|
+
<span class="p">}</span>
|
|
167
205
|
<span class="k">return</span> <span class="nx">date</span><span class="p">.</span><span class="nx">getTime</span><span class="p">();</span>
|
|
168
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</a> </div> <p>The actual difference in timespans accounting for time oddities like
|
|
169
207
|
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>
|
|
170
208
|
<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>
|
|
171
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</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>
|
|
172
210
|
<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>
|
|
173
211
|
<span class="k">this</span><span class="p">.</span><span class="nx">intervals</span> <span class="o">=</span> <span class="p">[];</span>
|
|
174
212
|
<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"><=</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>
|
|
@@ -179,7 +217,7 @@ different length months and leap years.</p> </td> <td cl
|
|
|
179
217
|
<span class="p">}</span>
|
|
180
218
|
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">intervals</span><span class="p">;</span>
|
|
181
219
|
<span class="p">}</span>
|
|
182
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</a> </div> <p>Handy dandy function to bind a listener on multiple events. For example,
|
|
183
221
|
<code>Bar</code> and <code>CardContainer</code> are bound like so on "move" and "zoom":</p>
|
|
184
222
|
|
|
185
223
|
<pre><code> sync(this.bar, this.cardCont, "move", "zoom");
|
|
@@ -191,14 +229,14 @@ different length months and leap years.</p> </td> <td cl
|
|
|
191
229
|
<span class="nx">listener</span><span class="p">[</span><span class="nx">ev</span><span class="p">](</span><span class="nx">e</span><span class="p">);</span>
|
|
192
230
|
<span class="p">});</span>
|
|
193
231
|
<span class="p">});</span>
|
|
194
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</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>
|
|
195
233
|
<span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">query</span><span class="p">).</span><span class="nx">html</span><span class="p">());</span>
|
|
196
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</a> </div> <p>Simple function to strip suffixes like <code>"px"</code> and return a clean integer for
|
|
197
235
|
use.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">cleanNumber</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">str</span><span class="p">){</span>
|
|
198
236
|
<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">"$1"</span><span class="p">),</span> <span class="mi">10</span><span class="p">);</span>
|
|
199
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</a> </div> <p>Zero pad a number less than 10 and return a 2 digit value.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">padNumber</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">number</span><span class="p">)</span> <span class="p">{</span>
|
|
200
238
|
<span class="k">return</span> <span class="p">(</span><span class="nx">number</span> <span class="o"><</span> <span class="mi">10</span> <span class="o">?</span> <span class="s1">'0'</span> <span class="o">:</span> <span class="s1">''</span><span class="p">)</span> <span class="o">+</span> <span class="nx">number</span><span class="p">;</span>
|
|
201
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</a> </div> <p>A quick and dirty hash manager for setting and getting values from
|
|
202
240
|
<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>
|
|
203
241
|
<span class="kd">var</span> <span class="nx">history</span> <span class="o">=</span> <span class="p">{</span>
|
|
204
242
|
<span class="nx">get</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
|
|
@@ -208,8 +246,8 @@ use.</p> </td> <td class="code"> <div clas
|
|
|
208
246
|
<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>
|
|
209
247
|
<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>
|
|
210
248
|
<span class="p">}</span>
|
|
211
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-
|
|
212
|
-
the remaining series will be a simple gray.</p> </td> <td class="code"> <div class="highlight"><pre> </pre></div> </td> </tr> <tr id="section-
|
|
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">¶</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">¶</a> </div> <p>These colors can be styled like such in
|
|
213
251
|
timeline-setter.css, where the numbers 1-9 cycle through in that order:</p>
|
|
214
252
|
|
|
215
253
|
<pre><code> .TS-notch_color_1,.TS-series_legend_swatch_1 {
|
|
@@ -234,7 +272,7 @@ timeline-setter.css, where the numbers 1-9 cycle through in that order:</p>
|
|
|
234
272
|
<span class="nx">chosen</span> <span class="o">=</span> <span class="s2">"default"</span><span class="p">;</span>
|
|
235
273
|
<span class="p">}</span>
|
|
236
274
|
<span class="k">return</span> <span class="nx">chosen</span><span class="p">;</span>
|
|
237
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</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">¶</a> </div> <p>The main kickoff point for rendering the timeline. The <code>Timeline</code> constructor
|
|
238
276
|
takes a json array of card representations and then builds series, calculates
|
|
239
277
|
intervals <code>sync</code>s the <code>Bar</code> and <code>CardContainer</code> objects and triggers the
|
|
240
278
|
<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>
|
|
@@ -258,10 +296,10 @@ intervals <code>sync</code>s the <code>Bar</code> and <code>CardContainer</code>
|
|
|
258
296
|
<span class="p">};</span>
|
|
259
297
|
<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>
|
|
260
298
|
|
|
261
|
-
<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-
|
|
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">¶</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>
|
|
262
300
|
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</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>
|
|
263
301
|
<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>
|
|
264
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</a> </div> <p>If a particular element in the JSON array mentions a series that's not
|
|
265
303
|
in the <code>bySid</code> object add it. Then add a card to the <code>Series</code> and extend
|
|
266
304
|
the global <code>bounds</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">add</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">card</span><span class="p">){</span>
|
|
267
305
|
<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>
|
|
@@ -274,7 +312,7 @@ the global <code>bounds</code>.</p> </td> <td class="cod
|
|
|
274
312
|
<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>
|
|
275
313
|
<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>
|
|
276
314
|
<span class="p">}</span>
|
|
277
|
-
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</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">¶</a> </div> <p>The main interactive element in the timeline is <code>.TS-notchbar</code>. Behind the
|
|
278
316
|
scenes <code>Bar</code> handles the moving and zooming behaviours through the <code>draggable</code>
|
|
279
317
|
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>
|
|
280
318
|
<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">".TS-notchbar"</span><span class="p">);</span>
|
|
@@ -294,7 +332,7 @@ and <code>wheel</code> plugins.</p> </td> <td class="cod
|
|
|
294
332
|
<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>
|
|
295
333
|
<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>
|
|
296
334
|
|
|
297
|
-
<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-
|
|
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">¶</a> </div> <p>Every time the <code>Bar</code> is moved, it calculates whether the proposed movement
|
|
298
336
|
will move the <code>.TS-notchbar</code> off of its parent. If so, it recaculates
|
|
299
337
|
<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>
|
|
300
338
|
<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>
|
|
@@ -311,7 +349,7 @@ will move the <code>.TS-notchbar</code> off of its parent. If so, it recaculates
|
|
|
311
349
|
<span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">"move"</span><span class="p">;</span>
|
|
312
350
|
<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>
|
|
313
351
|
<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>
|
|
314
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</a> </div> <p>As the timeline zooms, the <code>Bar</code> tries to keep the current notch (i.e.
|
|
315
353
|
<code>.TS-notch_active</code>) as close to its original position as possible.
|
|
316
354
|
There's a slight bug here because the timeline zooms and then moves the
|
|
317
355
|
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>
|
|
@@ -334,7 +372,7 @@ bar to correct for this behaviour, and in future versions we'll fix this.</p>
|
|
|
334
372
|
<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>
|
|
335
373
|
<span class="p">}</span>
|
|
336
374
|
<span class="p">});</span>
|
|
337
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</a> </div> <p>When asked to render the bar places the appropriate timestamp notches
|
|
338
376
|
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>
|
|
339
377
|
<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>
|
|
340
378
|
<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>
|
|
@@ -344,12 +382,12 @@ inside <code>.TS-notchbar</code>.</p> </td> <td class="c
|
|
|
344
382
|
<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">"left"</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">"%"</span><span class="p">));</span>
|
|
345
383
|
<span class="p">}</span>
|
|
346
384
|
<span class="p">}</span>
|
|
347
|
-
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</a> </div> <p>The <code>CardScroller</code> mirrors the moving and zooming of the <code>Bar</code> and is the
|
|
348
386
|
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>
|
|
349
387
|
<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">"#TS-card_scroller_inner"</span><span class="p">);</span>
|
|
350
388
|
<span class="p">};</span>
|
|
351
389
|
<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>
|
|
352
|
-
<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-
|
|
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">¶</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>
|
|
353
391
|
<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>
|
|
354
392
|
<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>
|
|
355
393
|
<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">></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">"default"</span><span class="p">;</span>
|
|
@@ -360,20 +398,20 @@ canvas where individual cards are rendered.</p> </td> <t
|
|
|
360
398
|
<span class="p">};</span>
|
|
361
399
|
<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>
|
|
362
400
|
|
|
363
|
-
<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-
|
|
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">¶</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>
|
|
364
402
|
<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>
|
|
365
403
|
<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>
|
|
366
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</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>
|
|
367
405
|
<span class="k">return</span> <span class="nx">crd</span><span class="p">.</span><span class="nx">timestamp</span><span class="p">;</span>
|
|
368
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</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>
|
|
369
407
|
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
|
370
408
|
<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">"TS-series_legend_item_inactive"</span><span class="p">);</span>
|
|
371
409
|
<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">"hideNotch"</span><span class="p">));</span>
|
|
372
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</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>
|
|
373
411
|
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
|
374
412
|
<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">"TS-series_legend_item_inactive"</span><span class="p">);</span>
|
|
375
413
|
<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">"showNotch"</span><span class="p">));</span>
|
|
376
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</a> </div> <p>Create and append the label to <code>.TS-series_nav_container</code> and bind up
|
|
377
415
|
<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>
|
|
378
416
|
<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">"render"</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
|
|
379
417
|
<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>
|
|
@@ -381,11 +419,11 @@ canvas where individual cards are rendered.</p> </td> <t
|
|
|
381
419
|
<span class="nx">$</span><span class="p">(</span><span class="s2">".TS-series_nav_container"</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>
|
|
382
420
|
<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>
|
|
383
421
|
<span class="p">}</span>
|
|
384
|
-
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</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">"min"</span><span class="p">,</span> <span class="s2">"max"</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>
|
|
385
423
|
<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>
|
|
386
424
|
<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">"timestamp"</span><span class="p">);</span>
|
|
387
425
|
<span class="p">};</span>
|
|
388
|
-
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</a> </div> <p>Every <code>Card</code> handles a notch div which is immediately appended to the <code>Bar</code>
|
|
389
427
|
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>
|
|
390
428
|
<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>
|
|
391
429
|
<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>
|
|
@@ -405,11 +443,11 @@ and a <code>.TS-card_container</code> which is lazily rendered.</p>
|
|
|
405
443
|
<span class="p">].</span><span class="nx">join</span><span class="p">(</span><span class="s2">"-"</span><span class="p">);</span>
|
|
406
444
|
<span class="p">};</span>
|
|
407
445
|
|
|
408
|
-
<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-
|
|
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">¶</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>
|
|
409
447
|
<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>
|
|
410
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</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>
|
|
411
449
|
<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>
|
|
412
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</a> </div> <p>When each <code>Card</code> is rendered via a render event, it appends a notch to the
|
|
413
451
|
<code>Bar</code> and binds a click handler so it can be activated. if the <code>Card</code>'s id
|
|
414
452
|
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>
|
|
415
453
|
<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">"render"</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
|
|
@@ -419,22 +457,26 @@ is currently selected via <code>window.location.hash</code> it's activated.</p>
|
|
|
419
457
|
<span class="nx">$</span><span class="p">(</span><span class="s2">".TS-notchbar"</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>
|
|
420
458
|
<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>
|
|
421
459
|
<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>
|
|
422
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</a> </div> <p>As the <code>Bar</code> moves the current card checks to see if it's outside the viewport,
|
|
423
461
|
if it is the card is flipped so as to be visible for the longest period
|
|
424
462
|
of time. The magic number here (7) is half the width of the css arrow.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">flip</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
|
425
463
|
<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">"move"</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">":visible"</span><span class="p">))</span> <span class="k">return</span><span class="p">;</span>
|
|
426
|
-
<span class="kd">var</span> <span class="nx">rightEdge</span>
|
|
427
|
-
<span class="kd">var</span> <span class="nx">tRightEdge</span>
|
|
428
|
-
<span class="kd">var</span> <span class="nx">margin</span>
|
|
429
|
-
<span class="kd">var</span> <span class="nx">flippable</span>
|
|
430
|
-
<span class="
|
|
464
|
+
<span class="kd">var</span> <span class="nx">rightEdge</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">".TS-item"</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">".TS-item"</span><span class="p">).</span><span class="nx">width</span><span class="p">();</span>
|
|
465
|
+
<span class="kd">var</span> <span class="nx">tRightEdge</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#timeline_setter"</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">"#timeline_setter"</span><span class="p">).</span><span class="nx">width</span><span class="p">();</span>
|
|
466
|
+
<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">"margin-left"</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
|
+
<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">".TS-item"</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o"><</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#timeline_setter"</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
|
+
<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">".TS-item"</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o"><</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">¶</a> </div> <p>If the card's right edge is more than the timeline's right edge and
|
|
470
|
+
it's never been flipped before and it won't go off the timeline when
|
|
471
|
+
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"><</span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">margin</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">offTimeline</span><span class="p">)</span> <span class="p">{</span>
|
|
431
472
|
<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">"margin-left"</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">".TS-item"</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">+</span> <span class="mi">7</span><span class="p">)});</span>
|
|
432
|
-
<span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">".TS-css_arrow"</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="s2">"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">".TS-item"</span><span class="p">).</span><span class="nx">width</span><span class="p">()});</span>
|
|
433
|
-
|
|
473
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">".TS-css_arrow"</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="s2">"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">".TS-item"</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">¶</a> </div> <p>Otherwise, if the card is off the left side of the timeline and we have
|
|
474
|
+
flipped it before and the card's width is less than half of the width
|
|
475
|
+
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">"#timeline_setter"</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="mi">0</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">margin</span> <span class="o">&&</span> <span class="nx">flippable</span><span class="p">)</span> <span class="p">{</span>
|
|
434
476
|
<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">"margin-left"</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">originalMargin</span><span class="p">});</span>
|
|
435
477
|
<span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">".TS-css_arrow"</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="s2">"left"</span><span class="o">:</span> <span class="mi">0</span><span class="p">});</span>
|
|
436
478
|
<span class="p">}</span>
|
|
437
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</a> </div> <p>The first time a card is activated it renders its <code>template</code> and appends
|
|
438
480
|
its element to the <code>Bar</code>. After doing so it sets the width if <code>.TS-item_label</code>
|
|
439
481
|
and moves the <code>Bar</code> if its element outside the visible portion of the
|
|
440
482
|
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>
|
|
@@ -444,18 +486,18 @@ timeline.</p> </td> <td class="code"> <div
|
|
|
444
486
|
<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">"left"</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">"%"</span><span class="p">});</span>
|
|
445
487
|
<span class="nx">$</span><span class="p">(</span><span class="s2">"#TS-card_scroller_inner"</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>
|
|
446
488
|
<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">"margin-left"</span><span class="p">);</span>
|
|
447
|
-
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">delegate</span><span class="p">(</span><span class="s2">".TS-permalink"</span><span class="p">,</span> <span class="s2">"click"</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-
|
|
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">".TS-permalink"</span><span class="p">,</span> <span class="s2">"click"</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">¶</a> </div> <p>Reactivate if there are images in the html so we can recalculate
|
|
448
490
|
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">"img"</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>
|
|
449
491
|
<span class="p">}</span>
|
|
450
492
|
<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">"TS-card_active"</span><span class="p">));</span>
|
|
451
493
|
<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">"TS-notch_active"</span><span class="p">);</span>
|
|
452
494
|
<span class="k">this</span><span class="p">.</span><span class="nx">setWidth</span><span class="p">();</span>
|
|
453
|
-
</pre></div> </td> </tr> <tr id="section-
|
|
495
|
+
</pre></div> </td> </tr> <tr id="section-70"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-70">¶</a> </div> <p>In the case that the card is outside the bounds the wrong way when
|
|
454
496
|
it's flipped, we'll take care of it here before we move the actual
|
|
455
497
|
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">"move"</span><span class="p">));</span>
|
|
456
498
|
<span class="k">this</span><span class="p">.</span><span class="nx">move</span><span class="p">();</span>
|
|
457
499
|
<span class="p">},</span>
|
|
458
|
-
</pre></div> </td> </tr> <tr id="section-
|
|
500
|
+
</pre></div> </td> </tr> <tr id="section-71"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-71">¶</a> </div> <p>For Internet Explorer each card sets the width of<code>.TS-item_label</code> to
|
|
459
501
|
the maximum width of the card's children, or if that is less than the
|
|
460
502
|
<code>.TS-item_year</code> element's width, <code>.TS-item_label</code> gets <code>.TS-item_year</code>s
|
|
461
503
|
width. Which is a funny way of saying, if you'd like to set the width of
|
|
@@ -466,7 +508,7 @@ the card as a whole, fiddle with <code>.TS-item_year</code>s width.</p>
|
|
|
466
508
|
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
|
467
509
|
<span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">".TS-item_label"</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">"width"</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">".TS-item_year"</span><span class="p">).</span><span class="nx">width</span><span class="p">());</span>
|
|
468
510
|
<span class="p">}</span>
|
|
469
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</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>
|
|
470
512
|
<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">'moving'</span><span class="p">);</span>
|
|
471
513
|
<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">".TS-item"</span><span class="p">).</span><span class="nx">offset</span><span class="p">();</span>
|
|
472
514
|
<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">"#timeline_setter"</span><span class="p">).</span><span class="nx">offset</span><span class="p">();</span>
|
|
@@ -477,12 +519,12 @@ the card as a whole, fiddle with <code>.TS-item_year</code>s width.</p>
|
|
|
477
519
|
<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">"#timeline_setter"</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">".TS-item"</span><span class="p">).</span><span class="nx">outerWidth</span><span class="p">());</span>
|
|
478
520
|
<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>
|
|
479
521
|
<span class="p">}</span>
|
|
480
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</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>
|
|
481
523
|
<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>
|
|
482
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</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>
|
|
483
525
|
<span class="nx">$</span><span class="p">(</span><span class="s2">".TS-card_active"</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"TS-card_active"</span><span class="p">).</span><span class="nx">hide</span><span class="p">();</span>
|
|
484
526
|
<span class="nx">$</span><span class="p">(</span><span class="s2">".TS-notch_active"</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"TS-notch_active"</span><span class="p">);</span>
|
|
485
|
-
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</a> </div> <p>An event listener to toggle this notche on and off via <code>Series</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggleNotch</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
|
|
486
528
|
<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>
|
|
487
529
|
<span class="k">case</span> <span class="s2">"hideNotch"</span><span class="o">:</span>
|
|
488
530
|
<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">"TS-notch_active"</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">"TS-series_inactive"</span><span class="p">);</span>
|
|
@@ -493,24 +535,24 @@ the card as a whole, fiddle with <code>.TS-item_year</code>s width.</p>
|
|
|
493
535
|
<span class="p">}</span>
|
|
494
536
|
<span class="p">}</span>
|
|
495
537
|
|
|
496
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</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>
|
|
497
539
|
<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>
|
|
498
540
|
<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>
|
|
499
541
|
<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>
|
|
500
542
|
<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>
|
|
501
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</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">¶</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>
|
|
502
544
|
<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>
|
|
503
545
|
<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>
|
|
504
546
|
<span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
|
505
547
|
<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">'click'</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>
|
|
506
|
-
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</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>
|
|
507
549
|
<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>
|
|
508
550
|
<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>
|
|
509
551
|
<span class="p">};</span>
|
|
510
552
|
<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>
|
|
511
553
|
|
|
512
554
|
<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>
|
|
513
|
-
<span class="nx">prefix</span> <span class="o">:</span> <span class="s2">".TS-zoom_"</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-
|
|
555
|
+
<span class="nx">prefix</span> <span class="o">:</span> <span class="s2">".TS-zoom_"</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">¶</a> </div> <p>Adjust the <code>curZoom</code> up or down by 100 and trigger a <code>doZoom</code> event on
|
|
514
556
|
<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>
|
|
515
557
|
<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">"in"</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>
|
|
516
558
|
<span class="k">if</span> <span class="p">(</span><span class="nx">curZoom</span> <span class="o">>=</span> <span class="mi">100</span><span class="p">)</span> <span class="p">{</span>
|
|
@@ -519,14 +561,14 @@ the card as a whole, fiddle with <code>.TS-item_year</code>s width.</p>
|
|
|
519
561
|
<span class="nx">curZoom</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>
|
|
520
562
|
<span class="p">}</span>
|
|
521
563
|
<span class="p">}</span>
|
|
522
|
-
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</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>
|
|
523
565
|
<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>
|
|
524
566
|
<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">".TS-notch"</span><span class="p">);</span>
|
|
525
567
|
<span class="p">};</span>
|
|
526
568
|
<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>
|
|
527
569
|
|
|
528
570
|
<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>
|
|
529
|
-
<span class="nx">prefix</span><span class="o">:</span> <span class="s2">".TS-choose_"</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-
|
|
571
|
+
<span class="nx">prefix</span><span class="o">:</span> <span class="s2">".TS-choose_"</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">¶</a> </div> <p>Figure out which notch to activate and do so by triggering a click on
|
|
530
572
|
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>
|
|
531
573
|
<span class="kd">var</span> <span class="nx">el</span><span class="p">;</span>
|
|
532
574
|
<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">".TS-series_inactive"</span><span class="p">);</span>
|
|
@@ -540,7 +582,7 @@ that notch.</p> </td> <td class="code"> <d
|
|
|
540
582
|
<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>
|
|
541
583
|
<span class="nx">el</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">"click"</span><span class="p">);</span>
|
|
542
584
|
<span class="p">}</span>
|
|
543
|
-
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-
|
|
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">¶</a> </div> <p>Finally, let's create the whole timeline. Boot is exposed globally via
|
|
544
586
|
<code>TimelineSetter.Timeline.boot()</code> which takes the JSON generated by
|
|
545
587
|
the timeline-setter binary as an argument. This is handy if you want
|
|
546
588
|
to be able to generate timelines at arbitrary times (say, for example,
|
data/doc/twitter-demo.html
CHANGED
|
@@ -48,15 +48,18 @@
|
|
|
48
48
|
$.getJSON("http://api.twitter.com/1/statuses/user_timeline.json?callback=?", {screen_name : username, count : 10}, function(data) {
|
|
49
49
|
twitterToTS(data);
|
|
50
50
|
reqsDone += 1;
|
|
51
|
-
|
|
51
|
+
|
|
52
|
+
if (reqsDone === usernames.length) {
|
|
52
53
|
TimelineSetter.Timeline.boot(tsTimeline);
|
|
54
|
+
}
|
|
53
55
|
});
|
|
54
56
|
};
|
|
55
57
|
|
|
56
58
|
var twitterToTS = function(data) {
|
|
57
59
|
_(data).each(function(item) {
|
|
58
60
|
var datum = {};
|
|
59
|
-
|
|
61
|
+
var bits = item['created_at'].split(" ");
|
|
62
|
+
datum['timestamp'] = Date.parse(bits[1] + " " + bits[2] + ", " + bits[5] + " " + bits[3] + " UTC");
|
|
60
63
|
datum['date'] = item['created_at'];
|
|
61
64
|
datum['display_date'] = humanDate(datum['timestamp']);
|
|
62
65
|
datum['description'] = twttr.txt.autoLink(item['text']);
|
|
@@ -616,7 +616,7 @@ A new instance of CLI
|
|
|
616
616
|
</div>
|
|
617
617
|
|
|
618
618
|
<div id="footer">
|
|
619
|
-
Generated on
|
|
619
|
+
Generated on Thu Apr 7 13:00:38 2011 by
|
|
620
620
|
<a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
|
|
621
621
|
0.6.5 (ruby-1.8.7).
|
|
622
622
|
</div>
|
|
@@ -276,7 +276,7 @@ Returns the value of attribute events
|
|
|
276
276
|
</div>
|
|
277
277
|
|
|
278
278
|
<div id="footer">
|
|
279
|
-
Generated on
|
|
279
|
+
Generated on Thu Apr 7 13:00:39 2011 by
|
|
280
280
|
<a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
|
|
281
281
|
0.6.5 (ruby-1.8.7).
|
|
282
282
|
</div>
|
|
@@ -490,7 +490,7 @@ the events hash to JSON to stick into our HTML.
|
|
|
490
490
|
<pre class="code"><span class="info file"># File 'lib/timeline_setter/timeline.rb', line 12</span>
|
|
491
491
|
|
|
492
492
|
<span class='def def kw'>def</span> <span class='to_json identifier id'>to_json</span>
|
|
493
|
-
<span class='@events ivar id'>@events</span><span class='dot token'>.</span><span class='
|
|
493
|
+
<span class='@events ivar id'>@events</span><span class='dot token'>.</span><span class='each identifier id'>each</span> <span class='lbrace token'>{</span><span class='bitor op'>|</span><span class='r identifier id'>r</span><span class='bitor op'>|</span> <span class='r identifier id'>r</span><span class='lbrack token'>[</span><span class='symbol val'>:timestamp</span><span class='rbrack token'>]</span> <span class='assign token'>=</span> <span class='Time constant id'>Time</span><span class='dot token'>.</span><span class='parse identifier id'>parse</span><span class='lparen token'>(</span><span class='r identifier id'>r</span><span class='lbrack token'>[</span><span class='symbol val'>:date</span><span class='rbrack token'>]</span><span class='rparen token'>)</span><span class='dot token'>.</span><span class='to_i identifier id'>to_i</span> <span class='mult op'>*</span> <span class='integer val'>1000</span> <span class='rbrace token'>}</span>
|
|
494
494
|
<span class='@events ivar id'>@events</span><span class='dot token'>.</span><span class='to_json identifier id'>to_json</span>
|
|
495
495
|
<span class='end end kw'>end</span>
|
|
496
496
|
</pre>
|
|
@@ -504,7 +504,7 @@ the events hash to JSON to stick into our HTML.
|
|
|
504
504
|
</div>
|
|
505
505
|
|
|
506
506
|
<div id="footer">
|
|
507
|
-
Generated on
|
|
507
|
+
Generated on Thu Apr 7 13:00:39 2011 by
|
|
508
508
|
<a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
|
|
509
509
|
0.6.5 (ruby-1.8.7).
|
|
510
510
|
</div>
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
<dt id="VERSION-constant" class="">VERSION =
|
|
91
91
|
|
|
92
92
|
</dt>
|
|
93
|
-
<dd><pre class="code"><span class='string val'>"0.1.
|
|
93
|
+
<dd><pre class="code"><span class='string val'>"0.1.1"</span>
|
|
94
94
|
</pre></dd>
|
|
95
95
|
|
|
96
96
|
</dl>
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
</div>
|
|
104
104
|
|
|
105
105
|
<div id="footer">
|
|
106
|
-
Generated on
|
|
106
|
+
Generated on Thu Apr 7 13:00:39 2011 by
|
|
107
107
|
<a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
|
|
108
108
|
0.6.5 (ruby-1.8.7).
|
|
109
109
|
</div>
|
data/documentation/_index.html
CHANGED
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
</div>
|
|
124
124
|
|
|
125
125
|
<div id="footer">
|
|
126
|
-
Generated on
|
|
126
|
+
Generated on Thu Apr 7 13:00:37 2011 by
|
|
127
127
|
<a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
|
|
128
128
|
0.6.5 (ruby-1.8.7).
|
|
129
129
|
</div>
|
data/documentation/index.html
CHANGED
data/index.html
CHANGED
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
</head>
|
|
83
83
|
<body>
|
|
84
84
|
<a href="http://www.propublica.org" class="propublica"> </a>
|
|
85
|
-
<h1>TimelineSetter 0.1.
|
|
85
|
+
<h1>TimelineSetter 0.1.1</h1>
|
|
86
86
|
|
|
87
87
|
<p>TimelineSetter creates beautiful timelines.</p>
|
|
88
88
|
|
|
@@ -289,7 +289,7 @@ in/out, previous/next buttons) are available within <code>#TS-top_matter_contain
|
|
|
289
289
|
<p>Series checkboxes are injected into <code>.TS-series_nav_container</code> and templated
|
|
290
290
|
via <code>script#TS-notch_tmpl</code>. Currently, series colors are hard coded in the
|
|
291
291
|
JavaScript. We support a maximum of nine series colors (assigned in this order:
|
|
292
|
-
<code>#065718, #EDC047, #91ADD1, #929E5E, #9E5E23, #C44846, #
|
|
292
|
+
<code>#065718, #EDC047, #91ADD1, #929E5E, #9E5E23, #C44846, #465363, #EDD4A5, #CECECE</code>,
|
|
293
293
|
they can be overridden in the “color priority” section of <code>timeline-setter.css</code>). Technically
|
|
294
294
|
you can create an unlimited number of series, but they will eventually fall back
|
|
295
295
|
to the default charcoal notch color.</p>
|
|
@@ -365,7 +365,23 @@ questions should go to <a href="mailto:opensource@propublica.org">opensource@pro
|
|
|
365
365
|
|
|
366
366
|
<h2>Change Log</h2>
|
|
367
367
|
|
|
368
|
-
<p><a id="release-
|
|
368
|
+
<p><a id="release-011"></a></p>
|
|
369
|
+
|
|
370
|
+
<h3>0.1.1</h3>
|
|
371
|
+
|
|
372
|
+
<ul>
|
|
373
|
+
<li>Made JavaScript smarter about image widths, so now images can be used without specifying height and width attributes</li>
|
|
374
|
+
<li>Fixed “read more” buttons so they can be clicked everywhere, not just on the text</li>
|
|
375
|
+
<li>Fixed a CLI bug where timeline was being put in the wrong place when output directory is specified without a trailing slash</li>
|
|
376
|
+
<li>Fixed duplicate colors in CSS</li>
|
|
377
|
+
<li>Fixed layout rendering problems when a card was more than half the size of the timeline</li>
|
|
378
|
+
<li>Fixed an issue where JSON couldn’t be generated in Ruby 1.9</li>
|
|
379
|
+
</ul>
|
|
380
|
+
|
|
381
|
+
|
|
382
|
+
<p><em>Thanks to <a href="http://github.com/palewire">Ben Welsh</a> for pointing out most of these issues</em></p>
|
|
383
|
+
|
|
384
|
+
<p><a id="release-010"></a></p>
|
|
369
385
|
|
|
370
386
|
<h3>0.1.0</h3>
|
|
371
387
|
|
|
@@ -191,6 +191,10 @@
|
|
|
191
191
|
var dHourMinuteSecond = dHourWithMinutes + ":" + padNumber(d.getSeconds());
|
|
192
192
|
|
|
193
193
|
switch (interval) {
|
|
194
|
+
case "Decade":
|
|
195
|
+
return dYear;
|
|
196
|
+
case "Lustrum":
|
|
197
|
+
return dYear;
|
|
194
198
|
case "FullYear":
|
|
195
199
|
return dYear;
|
|
196
200
|
case "Month":
|
|
@@ -209,6 +213,8 @@
|
|
|
209
213
|
Intervals.prototype = {
|
|
210
214
|
// Sane estimates of date ranges for the `isAtLeastA` test.
|
|
211
215
|
INTERVALS : {
|
|
216
|
+
Decade : 315360000000,
|
|
217
|
+
Lustrum : 157680000000,
|
|
212
218
|
FullYear : 31536000000,
|
|
213
219
|
Month : 2592000000,
|
|
214
220
|
Date : 86400000,
|
|
@@ -218,7 +224,7 @@
|
|
|
218
224
|
},
|
|
219
225
|
|
|
220
226
|
// The order used when testing where exactly a timespan falls.
|
|
221
|
-
INTERVAL_ORDER : ['Seconds','Minutes','Hours','Date','Month','FullYear'],
|
|
227
|
+
INTERVAL_ORDER : ['Seconds','Minutes','Hours','Date','Month','FullYear', 'Lustrum', 'Decade'],
|
|
222
228
|
|
|
223
229
|
// A test to find the appropriate range of intervals, for example if a range of
|
|
224
230
|
// timestamps only spans hours this will return true when called with `"Hours"`.
|
|
@@ -240,13 +246,40 @@
|
|
|
240
246
|
return this.INTERVALS[this.INTERVAL_ORDER[this.idx]];
|
|
241
247
|
},
|
|
242
248
|
|
|
249
|
+
// Return the first year of the decade a Date belongs to as an integer.
|
|
250
|
+
// Decades are defined in the conventional (ie. 60s) sense,
|
|
251
|
+
// instead of the more precise mathematical method that starts
|
|
252
|
+
// with year one. For example, the current decade runs from 2010-2019.
|
|
253
|
+
// And if you pass in the year 2010 or 2015 you'll get 2010 back.
|
|
254
|
+
getDecade : function(date) {
|
|
255
|
+
return (date.getFullYear() / 10 | 0) * 10;
|
|
256
|
+
},
|
|
257
|
+
|
|
258
|
+
// Returns the first year of the five year "lustrum" a Date belongs to
|
|
259
|
+
// as an integer. A lustrum is a fancy Roman word for a "five-year period."
|
|
260
|
+
// You can read more about it [here](http://en.wikipedia.org/wiki/Lustrum).
|
|
261
|
+
// This all means that if you pass in the year 2011 you'll get 2010 back.
|
|
262
|
+
// And if you pass in the year 1997 you'll get 1995 back.
|
|
263
|
+
getLustrum : function(date) {
|
|
264
|
+
return (date.getFullYear() / 5 | 0) * 5;
|
|
265
|
+
},
|
|
266
|
+
|
|
243
267
|
// Zero out a date from the current interval down to seconds.
|
|
244
268
|
floor : function(ts){
|
|
245
269
|
var idx = this.idx;
|
|
246
270
|
var date = new Date(ts);
|
|
247
271
|
while(idx--){
|
|
248
272
|
var intvl = this.INTERVAL_ORDER[idx];
|
|
249
|
-
|
|
273
|
+
switch(intvl){
|
|
274
|
+
case 'Lustrum':
|
|
275
|
+
date["setFullYear"](this.getDecade(date));
|
|
276
|
+
break;
|
|
277
|
+
case 'FullYear':
|
|
278
|
+
date["setFullYear"](this.getLustrum(date));
|
|
279
|
+
break;
|
|
280
|
+
default:
|
|
281
|
+
date["set" + intvl](intvl === "Date" ? 1 : 0);
|
|
282
|
+
}
|
|
250
283
|
}
|
|
251
284
|
return date.getTime();
|
|
252
285
|
},
|
|
@@ -255,7 +288,16 @@
|
|
|
255
288
|
ceil : function(ts){
|
|
256
289
|
var date = new Date(this.floor(ts));
|
|
257
290
|
var intvl = this.INTERVAL_ORDER[this.idx];
|
|
258
|
-
|
|
291
|
+
switch(intvl){
|
|
292
|
+
case 'Decade':
|
|
293
|
+
date["setFullYear"](this.getDecade(date) + 10);
|
|
294
|
+
break;
|
|
295
|
+
case 'Lustrum':
|
|
296
|
+
date["setFullYear"](this.getLustrum(date) + 5);
|
|
297
|
+
break;
|
|
298
|
+
default:
|
|
299
|
+
date["set" + intvl](date["get" + intvl]() + 1);
|
|
300
|
+
}
|
|
259
301
|
return date.getTime();
|
|
260
302
|
},
|
|
261
303
|
|
data/timeline_setter.gemspec
CHANGED
|
@@ -5,11 +5,11 @@
|
|
|
5
5
|
|
|
6
6
|
Gem::Specification.new do |s|
|
|
7
7
|
s.name = %q{timeline_setter}
|
|
8
|
-
s.version = "0.1.
|
|
8
|
+
s.version = "0.1.2"
|
|
9
9
|
|
|
10
10
|
s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
|
|
11
11
|
s.authors = ["Al Shaw", "Jeff Larson"]
|
|
12
|
-
s.date = %q{2011-04-
|
|
12
|
+
s.date = %q{2011-04-08}
|
|
13
13
|
s.default_executable = %q{timeline-setter}
|
|
14
14
|
s.description = %q{TimelineSetter is a tool to create HTML timelines from spreadsheets of events.}
|
|
15
15
|
s.email = %q{almshaw@gmail.com}
|
metadata
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: timeline_setter
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
hash:
|
|
4
|
+
hash: 31
|
|
5
5
|
prerelease: false
|
|
6
6
|
segments:
|
|
7
7
|
- 0
|
|
8
8
|
- 1
|
|
9
|
-
-
|
|
10
|
-
version: 0.1.
|
|
9
|
+
- 2
|
|
10
|
+
version: 0.1.2
|
|
11
11
|
platform: ruby
|
|
12
12
|
authors:
|
|
13
13
|
- Al Shaw
|
|
@@ -16,7 +16,7 @@ autorequire:
|
|
|
16
16
|
bindir: bin
|
|
17
17
|
cert_chain: []
|
|
18
18
|
|
|
19
|
-
date: 2011-04-
|
|
19
|
+
date: 2011-04-08 00:00:00 -04:00
|
|
20
20
|
default_executable: timeline-setter
|
|
21
21
|
dependencies:
|
|
22
22
|
- !ruby/object:Gem::Dependency
|