timeline_setter 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.document +4 -0
- data/LICENSE.txt +18 -0
- data/README +15 -0
- data/Rakefile +98 -0
- data/bin/timeline-setter +9 -0
- data/doc/doc.markdown +253 -0
- data/doc/doc_wrapper.erb +87 -0
- data/doc/docco.css +186 -0
- data/doc/timeline-setter.html +592 -0
- data/doc/todo.markdown +28 -0
- data/doc/twitter-demo.html +122 -0
- data/documentation/TimelineSetter/CLI.html +575 -0
- data/documentation/TimelineSetter/Parser.html +285 -0
- data/documentation/TimelineSetter/Timeline.html +513 -0
- data/documentation/TimelineSetter/Util.html +246 -0
- data/documentation/TimelineSetter.html +112 -0
- data/documentation/_index.html +132 -0
- data/documentation/class_list.html +36 -0
- data/documentation/css/common.css +1 -0
- data/documentation/css/full_list.css +53 -0
- data/documentation/css/style.css +318 -0
- data/documentation/file.README.html +70 -0
- data/documentation/file_list.html +38 -0
- data/documentation/frames.html +13 -0
- data/documentation/index.html +70 -0
- data/documentation/js/app.js +203 -0
- data/documentation/js/full_list.js +149 -0
- data/documentation/js/jquery.js +16 -0
- data/documentation/method_list.html +155 -0
- data/documentation/top-level-namespace.html +88 -0
- data/index.html +397 -0
- data/lib/timeline_setter/cli.rb +85 -0
- data/lib/timeline_setter/parser.rb +28 -0
- data/lib/timeline_setter/timeline.rb +44 -0
- data/lib/timeline_setter/version.rb +3 -0
- data/lib/timeline_setter.rb +22 -0
- data/public/javascripts/timeline-setter.js +822 -0
- data/public/javascripts/vendor/jquery-min.js +16 -0
- data/public/javascripts/vendor/underscore-min.js +26 -0
- data/public/stylesheets/timeline-setter.css +396 -0
- data/spec/spec_helper.rb +10 -0
- data/spec/test_data.csv +4 -0
- data/spec/timeline_setter_spec.rb +85 -0
- data/templates/timeline-markup.erb +61 -0
- data/templates/timeline-min.erb +1 -0
- data/templates/timeline.erb +12 -0
- data/timeline_setter.gemspec +104 -0
- metadata +189 -0
|
@@ -0,0 +1,592 @@
|
|
|
1
|
+
<!DOCTYPE html> <html> <head> <title>timeline-setter.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> timeline-setter.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="p">(</span><span class="kd">function</span><span class="p">(){</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>Expose <code>TimelineSetter</code> globally, so we can call <code>Timeline.Timeline.boot()</code>
|
|
2
|
+
to kick off at any point.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">TimelineSetter</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">TimelineSetter</span> <span class="o">=</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">TimelineSetter</span> <span class="o">||</span> <span class="p">{});</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <h2>Mixins</h2>
|
|
3
|
+
|
|
4
|
+
<p>Each mixin operates on an object's <code>prototype</code>.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>The <code>observable</code> mixin adds simple event notifications to the passed in
|
|
5
|
+
object. Unlike other notification systems, when an event is triggered every
|
|
6
|
+
callback bound to the object is invoked.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">observable</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">obj</span><span class="p">){</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>Registers a callback function for notification at a later time.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">bind</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">cb</span><span class="p">){</span>
|
|
7
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span> <span class="o">||</span> <span class="p">[];</span>
|
|
8
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">cb</span><span class="p">);</span>
|
|
9
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>Invoke all callbacks registered to the object with <code>bind</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">trigger</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
|
|
10
|
+
<span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
|
|
11
|
+
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">callback</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span>
|
|
12
|
+
<span class="nx">callback</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
|
|
13
|
+
<span class="p">};</span>
|
|
14
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>Each <code>transformable</code> contains two event listeners that handle moving associated
|
|
15
|
+
DOM elements around the page.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">transformable</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">obj</span><span class="p">){</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>Move the associated element a specified delta. Of note: because events
|
|
16
|
+
aren't scoped by key, TimelineSetter uses plain old jQuery events for
|
|
17
|
+
message passing. So each registered callback first checks to see if the
|
|
18
|
+
event fired matches the event it is listening for.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">move</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
|
|
19
|
+
<span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">"move"</span> <span class="o">||</span> <span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
|
|
20
|
+
|
|
21
|
+
<span class="k">if</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">currOffset</span><span class="p">))</span> <span class="k">this</span><span class="p">.</span><span class="nx">currOffset</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
22
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">currOffset</span> <span class="o">+=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span><span class="p">;</span>
|
|
23
|
+
<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">currOffset</span><span class="p">});</span>
|
|
24
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>The width for the <code>Bar</code> and <code>CardContainer</code> objects is set in percentages,
|
|
25
|
+
in order to zoom the Timeline all that's needed is to increase or decrease
|
|
26
|
+
the percentage width.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">zoom</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
|
|
27
|
+
<span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">"zoom"</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
|
|
28
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span> <span class="s2">"width"</span><span class="o">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">width</span> <span class="p">});</span>
|
|
29
|
+
<span class="p">};</span>
|
|
30
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <h2>Plugins</h2>
|
|
31
|
+
|
|
32
|
+
<p>Each plugin operates on an instance of an object.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>Check to see if we're on a mobile device.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">touchInit</span> <span class="o">=</span> <span class="s1">'ontouchstart'</span> <span class="k">in</span> <span class="nb">document</span><span class="p">;</span>
|
|
33
|
+
<span class="k">if</span><span class="p">(</span><span class="nx">touchInit</span><span class="p">)</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s2">"touches"</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>The <code>draggable</code> plugin tracks changes in X offsets due to mouse movement
|
|
34
|
+
or finger gestures and proxies associated events on a particular element.
|
|
35
|
+
Most of this is inspired by polymaps.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">draggable</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">obj</span><span class="p">){</span>
|
|
36
|
+
<span class="kd">var</span> <span class="nx">drag</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>Start tracking deltas due to a tap or single click.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">mousedown</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
|
|
37
|
+
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
|
38
|
+
<span class="nx">drag</span> <span class="o">=</span> <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span><span class="p">};</span>
|
|
39
|
+
<span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">"dragstart"</span><span class="p">;</span>
|
|
40
|
+
<span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
|
|
41
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>The user is interacting; capture the offset and trigger a <code>dragging</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">mousemove</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
|
|
42
|
+
<span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">drag</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
|
|
43
|
+
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
|
44
|
+
<span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">"dragging"</span><span class="p">;</span>
|
|
45
|
+
<span class="nx">e</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="p">{</span>
|
|
46
|
+
<span class="nx">deltaX</span><span class="o">:</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span> <span class="o">||</span> <span class="nx">e</span><span class="p">.</span><span class="nx">touches</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">pageX</span><span class="p">)</span> <span class="o">-</span> <span class="nx">drag</span><span class="p">.</span><span class="nx">x</span>
|
|
47
|
+
<span class="p">});</span>
|
|
48
|
+
<span class="nx">drag</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">x</span><span class="o">:</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span> <span class="o">||</span> <span class="nx">e</span><span class="p">.</span><span class="nx">touches</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">pageX</span><span class="p">)</span> <span class="p">};</span>
|
|
49
|
+
<span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
|
|
50
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>We're done tracking the movement set drag back to <code>null</code> for the next event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">mouseup</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
|
|
51
|
+
<span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">drag</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
|
|
52
|
+
<span class="nx">drag</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
|
53
|
+
<span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">"dragend"</span><span class="p">;</span>
|
|
54
|
+
<span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
|
|
55
|
+
<span class="p">};</span>
|
|
56
|
+
|
|
57
|
+
<span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">touchInit</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>Bind on mouse events if we have a mouse...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"mousedown"</span><span class="p">,</span> <span class="nx">mousedown</span><span class="p">);</span>
|
|
58
|
+
|
|
59
|
+
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"mousemove"</span><span class="p">,</span> <span class="nx">mousemove</span><span class="p">);</span>
|
|
60
|
+
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"mouseup"</span><span class="p">,</span> <span class="nx">mouseup</span><span class="p">);</span>
|
|
61
|
+
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <p>otherwise capture <code>touchstart</code> events in order to simulate <code>doubletap</code> events.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">last</span><span class="p">;</span>
|
|
62
|
+
<span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"touchstart"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
|
63
|
+
<span class="kd">var</span> <span class="nx">now</span> <span class="o">=</span> <span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span>
|
|
64
|
+
<span class="kd">var</span> <span class="nx">delta</span> <span class="o">=</span> <span class="nx">now</span> <span class="o">-</span> <span class="p">(</span><span class="nx">last</span> <span class="o">||</span> <span class="nx">now</span><span class="p">);</span>
|
|
65
|
+
<span class="kd">var</span> <span class="nx">type</span> <span class="o">=</span> <span class="nx">delta</span> <span class="o">></span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">delta</span> <span class="o"><=</span> <span class="mi">250</span> <span class="o">?</span> <span class="s2">"doubletap"</span> <span class="o">:</span> <span class="s2">"tap"</span><span class="p">;</span>
|
|
66
|
+
<span class="nx">drag</span> <span class="o">=</span> <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">touches</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">pageX</span><span class="p">};</span>
|
|
67
|
+
<span class="nx">last</span> <span class="o">=</span> <span class="nx">now</span><span class="p">;</span>
|
|
68
|
+
<span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="nx">type</span><span class="p">));</span>
|
|
69
|
+
<span class="p">});</span>
|
|
70
|
+
|
|
71
|
+
<span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"touchmove"</span><span class="p">,</span> <span class="nx">mousemove</span><span class="p">);</span>
|
|
72
|
+
<span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"touchend"</span><span class="p">,</span> <span class="nx">mouseup</span><span class="p">);</span>
|
|
73
|
+
<span class="p">};</span>
|
|
74
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <p>Older versions of safari fire incredibly huge mousewheel deltas. We'll need
|
|
75
|
+
to dampen the effects.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">safari</span> <span class="o">=</span> <span class="sr">/WebKit\/533/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <p>The <code>wheel</code> plugin captures events triggered by mousewheel, and dampen the
|
|
76
|
+
<code>delta</code> if running in Safari.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">wheel</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">obj</span><span class="p">){</span>
|
|
77
|
+
<span class="kd">function</span> <span class="nx">mousewheel</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
|
|
78
|
+
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
|
79
|
+
<span class="kd">var</span> <span class="nx">delta</span> <span class="o">=</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">wheelDelta</span> <span class="o">||</span> <span class="o">-</span><span class="nx">e</span><span class="p">.</span><span class="nx">detail</span><span class="p">);</span>
|
|
80
|
+
<span class="k">if</span><span class="p">(</span><span class="nx">safari</span><span class="p">){</span>
|
|
81
|
+
<span class="kd">var</span> <span class="nx">negative</span> <span class="o">=</span> <span class="nx">delta</span> <span class="o"><</span> <span class="mi">0</span> <span class="o">?</span> <span class="o">-</span><span class="mi">1</span> <span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
|
|
82
|
+
<span class="nx">delta</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">delta</span><span class="p">))</span> <span class="o">*</span> <span class="nx">negative</span> <span class="o">*</span> <span class="mi">2</span><span class="p">;</span>
|
|
83
|
+
<span class="p">};</span>
|
|
84
|
+
<span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">"scrolled"</span><span class="p">;</span>
|
|
85
|
+
<span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="nx">delta</span><span class="p">;</span>
|
|
86
|
+
<span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
|
|
87
|
+
<span class="p">};</span>
|
|
88
|
+
|
|
89
|
+
<span class="nx">obj</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"mousewheel DOMMouseScroll"</span><span class="p">,</span> <span class="nx">mousewheel</span><span class="p">);</span>
|
|
90
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <h2>Utilities</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> <p>A utility class for storing the extent of the timeline.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Bounds</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
|
|
91
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">min</span> <span class="o">=</span> <span class="o">+</span><span class="kc">Infinity</span><span class="p">;</span>
|
|
92
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">max</span> <span class="o">=</span> <span class="o">-</span><span class="kc">Infinity</span><span class="p">;</span>
|
|
93
|
+
<span class="p">};</span>
|
|
94
|
+
|
|
95
|
+
<span class="nx">Bounds</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">extend</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">num</span><span class="p">){</span>
|
|
96
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">min</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">num</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">min</span><span class="p">);</span>
|
|
97
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">max</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">num</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">max</span><span class="p">);</span>
|
|
98
|
+
<span class="p">};</span>
|
|
99
|
+
|
|
100
|
+
<span class="nx">Bounds</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
|
|
101
|
+
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">max</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">min</span><span class="p">;</span>
|
|
102
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <p>Translate a particular number from the current bounds to a given range.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Bounds</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">project</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">num</span><span class="p">,</span> <span class="nx">max</span><span class="p">){</span>
|
|
103
|
+
<span class="k">return</span> <span class="p">(</span><span class="nx">num</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">min</span><span class="p">)</span> <span class="o">/</span> <span class="k">this</span><span class="p">.</span><span class="nx">width</span><span class="p">()</span> <span class="o">*</span> <span class="nx">max</span><span class="p">;</span>
|
|
104
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> <p><code>Intervals</code> is a particularly focused class to calculate even breaks based
|
|
105
|
+
on the passed in <code>Bounds</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Intervals</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">bounds</span><span class="p">)</span> <span class="p">{</span>
|
|
106
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">max</span> <span class="o">=</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">max</span><span class="p">;</span>
|
|
107
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">min</span> <span class="o">=</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">min</span><span class="p">;</span>
|
|
108
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">setMaxInterval</span><span class="p">();</span>
|
|
109
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</a> </div> <p>An object containing human translations for date indexes.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Intervals</span><span class="p">.</span><span class="nx">HUMAN_DATES</span> <span class="o">=</span> <span class="p">{</span>
|
|
110
|
+
<span class="nx">months</span> <span class="o">:</span> <span class="p">[</span><span class="s1">'Jan.'</span><span class="p">,</span> <span class="s1">'Feb.'</span><span class="p">,</span> <span class="s1">'March'</span><span class="p">,</span> <span class="s1">'April'</span><span class="p">,</span> <span class="s1">'May'</span><span class="p">,</span> <span class="s1">'June'</span><span class="p">,</span> <span class="s1">'July'</span><span class="p">,</span> <span class="s1">'Aug.'</span><span class="p">,</span> <span class="s1">'Sept.'</span><span class="p">,</span> <span class="s1">'Oct.'</span><span class="p">,</span> <span class="s1">'Nov.'</span><span class="p">,</span> <span class="s1">'Dec.'</span><span class="p">]</span>
|
|
111
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">¶</a> </div> <p>A utility function to format dates in AP Style.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Intervals</span><span class="p">.</span><span class="nx">dateStr</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">timestamp</span><span class="p">,</span> <span class="nx">interval</span><span class="p">)</span> <span class="p">{</span>
|
|
112
|
+
<span class="kd">var</span> <span class="nx">d</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">timestamp</span><span class="p">);</span>
|
|
113
|
+
<span class="kd">var</span> <span class="nx">dYear</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">();</span>
|
|
114
|
+
<span class="kd">var</span> <span class="nx">dMonth</span> <span class="o">=</span> <span class="nx">Intervals</span><span class="p">.</span><span class="nx">HUMAN_DATES</span><span class="p">.</span><span class="nx">months</span><span class="p">[</span><span class="nx">d</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">()];</span>
|
|
115
|
+
<span class="kd">var</span> <span class="nx">dDate</span> <span class="o">=</span> <span class="nx">dMonth</span> <span class="o">+</span> <span class="s2">" "</span> <span class="o">+</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getDate</span><span class="p">()</span> <span class="o">+</span> <span class="s1">', '</span> <span class="o">+</span> <span class="nx">dYear</span><span class="p">;</span>
|
|
116
|
+
<span class="kd">var</span> <span class="nx">bigHours</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getHours</span><span class="p">()</span> <span class="o">></span> <span class="mi">12</span><span class="p">;</span>
|
|
117
|
+
<span class="kd">var</span> <span class="nx">isPM</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getHours</span><span class="p">()</span> <span class="o">>=</span> <span class="mi">12</span><span class="p">;</span>
|
|
118
|
+
<span class="kd">var</span> <span class="nx">dHourWithMinutes</span> <span class="o">=</span> <span class="p">(</span><span class="nx">bigHours</span> <span class="o">?</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getHours</span><span class="p">()</span> <span class="o">-</span> <span class="mi">12</span> <span class="o">:</span> <span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nx">getHours</span><span class="p">()</span> <span class="o">></span> <span class="mi">0</span> <span class="o">?</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getHours</span><span class="p">()</span> <span class="o">:</span> <span class="s2">"12"</span><span class="p">))</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">getMinutes</span><span class="p">())</span> <span class="o">+</span> <span class="s2">" "</span> <span class="o">+</span> <span class="p">(</span><span class="nx">isPM</span> <span class="o">?</span> <span class="s1">'p.m.'</span> <span class="o">:</span> <span class="s1">'a.m.'</span><span class="p">);</span>
|
|
119
|
+
<span class="kd">var</span> <span class="nx">dHourMinuteSecond</span> <span class="o">=</span> <span class="nx">dHourWithMinutes</span> <span class="o">+</span> <span class="s2">":"</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
|
+
|
|
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">"FullYear"</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">"Month"</span><span class="o">:</span>
|
|
125
|
+
<span class="k">return</span> <span class="nx">dMonth</span> <span class="o">+</span> <span class="s1">', '</span> <span class="o">+</span> <span class="nx">dYear</span><span class="p">;</span>
|
|
126
|
+
<span class="k">case</span> <span class="s2">"Date"</span><span class="o">:</span>
|
|
127
|
+
<span class="k">return</span> <span class="nx">dDate</span><span class="p">;</span>
|
|
128
|
+
<span class="k">case</span> <span class="s2">"Hours"</span><span class="o">:</span>
|
|
129
|
+
<span class="k">return</span> <span class="nx">dHourWithMinutes</span><span class="p">;</span>
|
|
130
|
+
<span class="k">case</span> <span class="s2">"Minutes"</span><span class="o">:</span>
|
|
131
|
+
<span class="k">return</span> <span class="nx">dHourWithMinutes</span><span class="p">;</span>
|
|
132
|
+
<span class="k">case</span> <span class="s2">"Seconds"</span><span class="o">:</span>
|
|
133
|
+
<span class="k">return</span> <span class="nx">dHourMinuteSecond</span><span class="p">;</span>
|
|
134
|
+
<span class="p">}</span>
|
|
135
|
+
<span class="p">};</span>
|
|
136
|
+
|
|
137
|
+
<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>
|
|
138
|
+
<span class="nx">FullYear</span> <span class="o">:</span> <span class="mi">31536000000</span><span class="p">,</span>
|
|
139
|
+
<span class="nx">Month</span> <span class="o">:</span> <span class="mi">2592000000</span><span class="p">,</span>
|
|
140
|
+
<span class="nb">Date</span> <span class="o">:</span> <span class="mi">86400000</span><span class="p">,</span>
|
|
141
|
+
<span class="nx">Hours</span> <span class="o">:</span> <span class="mi">3600000</span><span class="p">,</span>
|
|
142
|
+
<span class="nx">Minutes</span> <span class="o">:</span> <span class="mi">60000</span><span class="p">,</span>
|
|
143
|
+
<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
|
|
145
|
+
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
|
+
<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
|
+
<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>
|
|
148
|
+
<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="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span>
|
|
149
|
+
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">isAtLeastA</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">[</span><span class="nx">i</span><span class="p">]))</span> <span class="k">break</span><span class="p">;</span>
|
|
150
|
+
|
|
151
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">maxInterval</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">INTERVAL_ORDER</span><span class="p">[</span><span class="nx">i</span> <span class="o">-</span> <span class="mi">1</span><span class="p">];</span>
|
|
152
|
+
<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
|
+
<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
|
+
<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>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
|
+
<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
|
+
<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
|
+
<span class="k">while</span><span class="p">(</span><span class="nx">idx</span><span class="o">--</span><span class="p">){</span>
|
|
159
|
+
<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="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>
|
|
161
|
+
<span class="p">}</span>
|
|
162
|
+
<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-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">¶</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
|
+
<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
|
+
<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="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>
|
|
167
|
+
<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-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">¶</a> </div> <p>The actual difference in timespans accounting for time oddities like
|
|
169
|
+
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
|
+
<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-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">¶</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
|
+
<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
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">intervals</span> <span class="o">=</span> <span class="p">[];</span>
|
|
174
|
+
<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>
|
|
175
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">intervals</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span>
|
|
176
|
+
<span class="nx">human</span> <span class="o">:</span> <span class="nx">Intervals</span><span class="p">.</span><span class="nx">dateStr</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">maxInterval</span><span class="p">),</span>
|
|
177
|
+
<span class="nx">timestamp</span> <span class="o">:</span> <span class="nx">i</span>
|
|
178
|
+
<span class="p">});</span>
|
|
179
|
+
<span class="p">}</span>
|
|
180
|
+
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">intervals</span><span class="p">;</span>
|
|
181
|
+
<span class="p">}</span>
|
|
182
|
+
<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>Handy dandy function to bind a listener on multiple events. For example,
|
|
183
|
+
<code>Bar</code> and <code>CardContainer</code> are bound like so on "move" and "zoom":</p>
|
|
184
|
+
|
|
185
|
+
<pre><code> sync(this.bar, this.cardCont, "move", "zoom");
|
|
186
|
+
</code></pre> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">sync</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">origin</span><span class="p">,</span> <span class="nx">listener</span><span class="p">){</span>
|
|
187
|
+
<span class="kd">var</span> <span class="nx">events</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">arguments</span><span class="p">,</span> <span class="mi">2</span><span class="p">);</span>
|
|
188
|
+
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">events</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ev</span><span class="p">){</span>
|
|
189
|
+
<span class="nx">origin</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
|
|
190
|
+
<span class="k">if</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="nx">ev</span> <span class="o">&&</span> <span class="nx">listener</span><span class="p">[</span><span class="nx">ev</span><span class="p">])</span>
|
|
191
|
+
<span class="nx">listener</span><span class="p">[</span><span class="nx">ev</span><span class="p">](</span><span class="nx">e</span><span class="p">);</span>
|
|
192
|
+
<span class="p">});</span>
|
|
193
|
+
<span class="p">});</span>
|
|
194
|
+
<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>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
|
+
<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-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">¶</a> </div> <p>Simple function to strip suffixes like <code>"px"</code> and return a clean integer for
|
|
197
|
+
use.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">cleanNumber</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">str</span><span class="p">){</span>
|
|
198
|
+
<span class="k">return</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">str</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/^[^+\-\d]?([+\-]\d+)?.*$/</span><span class="p">,</span> <span class="s2">"$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-38"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-38">¶</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
|
+
<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-39"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-39">¶</a> </div> <p>A quick and dirty hash manager for setting and getting values from
|
|
202
|
+
<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
|
+
<span class="kd">var</span> <span class="nx">history</span> <span class="o">=</span> <span class="p">{</span>
|
|
204
|
+
<span class="nx">get</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
|
|
205
|
+
<span class="k">return</span> <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="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="nx">hashStrip</span><span class="p">,</span> <span class="s2">""</span><span class="p">);</span>
|
|
206
|
+
<span class="p">},</span>
|
|
207
|
+
|
|
208
|
+
<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
|
+
<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
|
+
<span class="p">}</span>
|
|
211
|
+
<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>Every new <code>Series</code> gets new color. If there are too many series
|
|
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-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">¶</a> </div> <p>These colors can be styled like such in
|
|
213
|
+
timeline-setter.css, where the numbers 1-9 cycle through in that order:</p>
|
|
214
|
+
|
|
215
|
+
<pre><code> .TS-notch_color_1,.TS-series_legend_swatch_1 {
|
|
216
|
+
background: #065718 !important;
|
|
217
|
+
}
|
|
218
|
+
.TS-css_arrow_color_1 {
|
|
219
|
+
border-bottom-color:#065718 !important;
|
|
220
|
+
}
|
|
221
|
+
.TS-item_color_1 {
|
|
222
|
+
border-top:1px solid #065718 !important;
|
|
223
|
+
}
|
|
224
|
+
</code></pre>
|
|
225
|
+
|
|
226
|
+
<p>The default color will fall through to what is styled with
|
|
227
|
+
<code>.TS-foo_color_default</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">curColor</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
|
|
228
|
+
<span class="kd">var</span> <span class="nx">color</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
|
|
229
|
+
<span class="kd">var</span> <span class="nx">chosen</span><span class="p">;</span>
|
|
230
|
+
<span class="k">if</span> <span class="p">(</span><span class="nx">curColor</span> <span class="o"><</span> <span class="mi">10</span><span class="p">)</span> <span class="p">{</span>
|
|
231
|
+
<span class="nx">chosen</span> <span class="o">=</span> <span class="nx">curColor</span><span class="p">;</span>
|
|
232
|
+
<span class="nx">curColor</span> <span class="o">+=</span> <span class="mi">1</span><span class="p">;</span>
|
|
233
|
+
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
|
234
|
+
<span class="nx">chosen</span> <span class="o">=</span> <span class="s2">"default"</span><span class="p">;</span>
|
|
235
|
+
<span class="p">}</span>
|
|
236
|
+
<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-42"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42">¶</a> </div> <h2>Models</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-43"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43">¶</a> </div> <p>The main kickoff point for rendering the timeline. The <code>Timeline</code> constructor
|
|
238
|
+
takes a json array of card representations and then builds series, calculates
|
|
239
|
+
intervals <code>sync</code>s the <code>Bar</code> and <code>CardContainer</code> objects and triggers the
|
|
240
|
+
<code>render</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Timeline</span> <span class="o">=</span> <span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">Timeline</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
|
241
|
+
<span class="nx">data</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">sort</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">){</span> <span class="k">return</span> <span class="nx">a</span><span class="p">.</span><span class="nx">timestamp</span> <span class="o">-</span> <span class="nx">b</span><span class="p">.</span><span class="nx">timestamp</span><span class="p">;</span> <span class="p">});</span>
|
|
242
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">bySid</span> <span class="o">=</span> <span class="p">{};</span>
|
|
243
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">series</span> <span class="o">=</span> <span class="p">[];</span>
|
|
244
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">bounds</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Bounds</span><span class="p">();</span>
|
|
245
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">bar</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Bar</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
|
246
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">cardCont</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">CardScroller</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
|
247
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">createSeries</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
|
|
248
|
+
|
|
249
|
+
<span class="kd">var</span> <span class="nx">range</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Intervals</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">);</span>
|
|
250
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">intervals</span> <span class="o">=</span> <span class="nx">range</span><span class="p">.</span><span class="nx">getRanges</span><span class="p">();</span>
|
|
251
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">min</span> <span class="o">-</span> <span class="nx">range</span><span class="p">.</span><span class="nx">getMaxInterval</span><span class="p">()</span> <span class="o">/</span> <span class="mi">2</span><span class="p">);</span>
|
|
252
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">max</span> <span class="o">+</span> <span class="nx">range</span><span class="p">.</span><span class="nx">getMaxInterval</span><span class="p">()</span> <span class="o">/</span> <span class="mi">2</span><span class="p">);</span>
|
|
253
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
|
254
|
+
|
|
255
|
+
<span class="nx">sync</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">bar</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">cardCont</span><span class="p">,</span> <span class="s2">"move"</span><span class="p">,</span> <span class="s2">"zoom"</span><span class="p">);</span>
|
|
256
|
+
<span class="kd">var</span> <span class="nx">e</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s2">"render"</span><span class="p">);</span>
|
|
257
|
+
<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>
|
|
258
|
+
<span class="p">};</span>
|
|
259
|
+
<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
|
+
|
|
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-44"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-44">¶</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
|
+
<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
|
+
<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-45"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-45">¶</a> </div> <p>If a particular element in the JSON array mentions a series that's not
|
|
265
|
+
in the <code>bySid</code> object add it. Then add a card to the <code>Series</code> and extend
|
|
266
|
+
the global <code>bounds</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">add</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">card</span><span class="p">){</span>
|
|
267
|
+
<span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="nx">card</span><span class="p">.</span><span class="nx">series</span> <span class="k">in</span> <span class="k">this</span><span class="p">.</span><span class="nx">bySid</span><span class="p">)){</span>
|
|
268
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">bySid</span><span class="p">[</span><span class="nx">card</span><span class="p">.</span><span class="nx">series</span><span class="p">]</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Series</span><span class="p">(</span><span class="nx">card</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
|
|
269
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">bySid</span><span class="p">[</span><span class="nx">card</span><span class="p">.</span><span class="nx">series</span><span class="p">]);</span>
|
|
270
|
+
<span class="p">}</span>
|
|
271
|
+
<span class="kd">var</span> <span class="nx">series</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">bySid</span><span class="p">[</span><span class="nx">card</span><span class="p">.</span><span class="nx">series</span><span class="p">];</span>
|
|
272
|
+
<span class="nx">series</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">card</span><span class="p">);</span>
|
|
273
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">series</span><span class="p">.</span><span class="nx">max</span><span class="p">());</span>
|
|
274
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">series</span><span class="p">.</span><span class="nx">min</span><span class="p">());</span>
|
|
275
|
+
<span class="p">}</span>
|
|
276
|
+
<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> <h2>Views</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-47"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-47">¶</a> </div> <p>The main interactive element in the timeline is <code>.TS-notchbar</code>. Behind the
|
|
277
|
+
scenes <code>Bar</code> handles the moving and zooming behaviours through the <code>draggable</code>
|
|
278
|
+
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>
|
|
279
|
+
<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>
|
|
280
|
+
<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="mi">0</span> <span class="p">});</span>
|
|
281
|
+
<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>
|
|
282
|
+
<span class="nx">draggable</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
|
283
|
+
<span class="nx">wheel</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
|
284
|
+
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s2">"moving"</span><span class="p">,</span> <span class="s2">"doZoom"</span><span class="p">);</span>
|
|
285
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"dragging scrolled"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">moving</span><span class="p">);</span>
|
|
286
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"doZoom"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">doZoom</span><span class="p">);</span>
|
|
287
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">template</span> <span class="o">=</span> <span class="nx">template</span><span class="p">(</span><span class="s2">"#TS-year_notch_tmpl"</span><span class="p">);</span>
|
|
288
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"dblclick doubletap"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
|
|
289
|
+
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
|
290
|
+
<span class="nx">$</span><span class="p">(</span><span class="s2">".TS-zoom_in"</span><span class="p">).</span><span class="nx">click</span><span class="p">();</span>
|
|
291
|
+
<span class="p">});</span>
|
|
292
|
+
<span class="p">};</span>
|
|
293
|
+
<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>
|
|
294
|
+
<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>
|
|
295
|
+
|
|
296
|
+
<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-48"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-48">¶</a> </div> <p>Every time the <code>Bar</code> is moved, it calculates whether the proposed movement
|
|
297
|
+
will move the <code>.TS-notchbar</code> off of its parent. If so, it recaculates
|
|
298
|
+
<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>
|
|
299
|
+
<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>
|
|
300
|
+
<span class="kd">var</span> <span class="nx">pOffset</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span><span class="p">;</span>
|
|
301
|
+
<span class="kd">var</span> <span class="nx">offset</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span><span class="p">;</span>
|
|
302
|
+
<span class="kd">var</span> <span class="nx">width</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">width</span><span class="p">();</span>
|
|
303
|
+
<span class="k">if</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span><span class="p">))</span> <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
|
304
|
+
|
|
305
|
+
<span class="k">if</span><span class="p">(</span><span class="nx">offset</span> <span class="o">+</span> <span class="nx">width</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o"><</span> <span class="nx">pOffset</span> <span class="o">+</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">width</span><span class="p">())</span>
|
|
306
|
+
<span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="p">(</span><span class="nx">pOffset</span> <span class="o">+</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">width</span><span class="p">())</span> <span class="o">-</span> <span class="p">(</span><span class="nx">offset</span> <span class="o">+</span> <span class="nx">width</span><span class="p">);</span>
|
|
307
|
+
<span class="k">if</span><span class="p">(</span><span class="nx">offset</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">></span> <span class="nx">pOffset</span><span class="p">)</span>
|
|
308
|
+
<span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="nx">pOffset</span> <span class="o">-</span> <span class="nx">offset</span><span class="p">;</span>
|
|
309
|
+
|
|
310
|
+
<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>
|
|
311
|
+
<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>
|
|
312
|
+
<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>
|
|
313
|
+
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-49"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-49">¶</a> </div> <p>As the timeline zooms, the <code>Bar</code> tries to keep the current notch (i.e.
|
|
314
|
+
<code>.TS-notch_active</code>) as close to its original position as possible.
|
|
315
|
+
There's a slight bug here because the timeline zooms and then moves the
|
|
316
|
+
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>
|
|
317
|
+
<span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
|
318
|
+
<span class="kd">var</span> <span class="nx">notch</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">".TS-notch_active"</span><span class="p">);</span>
|
|
319
|
+
<span class="kd">var</span> <span class="nx">getCur</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
320
|
+
<span class="k">return</span> <span class="nx">notch</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">notch</span><span class="p">.</span><span class="nx">position</span><span class="p">().</span><span class="nx">left</span> <span class="o">:</span> <span class="mi">0</span><span class="p">;</span>
|
|
321
|
+
<span class="p">};</span>
|
|
322
|
+
<span class="kd">var</span> <span class="nx">curr</span> <span class="o">=</span> <span class="nx">getCur</span><span class="p">();</span>
|
|
323
|
+
|
|
324
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">animate</span><span class="p">({</span><span class="s2">"width"</span><span class="o">:</span> <span class="nx">width</span> <span class="o">+</span> <span class="s2">"%"</span><span class="p">},</span> <span class="p">{</span>
|
|
325
|
+
<span class="nx">step</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">current</span><span class="p">,</span> <span class="nx">fx</span><span class="p">)</span> <span class="p">{</span>
|
|
326
|
+
<span class="kd">var</span> <span class="nx">e</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s2">"dragging"</span><span class="p">);</span>
|
|
327
|
+
<span class="kd">var</span> <span class="nx">delta</span> <span class="o">=</span> <span class="nx">curr</span> <span class="o">-</span> <span class="nx">getCur</span><span class="p">();</span>
|
|
328
|
+
<span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="nx">delta</span><span class="p">;</span>
|
|
329
|
+
<span class="nx">that</span><span class="p">.</span><span class="nx">moving</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
|
|
330
|
+
<span class="nx">curr</span> <span class="o">=</span> <span class="nx">getCur</span><span class="p">();</span>
|
|
331
|
+
<span class="nx">e</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s2">"zoom"</span><span class="p">);</span>
|
|
332
|
+
<span class="nx">e</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">current</span> <span class="o">+</span> <span class="s2">"%"</span><span class="p">;</span>
|
|
333
|
+
<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>
|
|
334
|
+
<span class="p">}</span>
|
|
335
|
+
<span class="p">});</span>
|
|
336
|
+
<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>When asked to render the bar places the appropriate timestamp notches
|
|
337
|
+
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>
|
|
338
|
+
<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>
|
|
339
|
+
<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>
|
|
340
|
+
|
|
341
|
+
<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">intervals</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
|
|
342
|
+
<span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">({</span><span class="s1">'timestamp'</span> <span class="o">:</span> <span class="nx">intervals</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">timestamp</span><span class="p">,</span> <span class="s1">'human'</span> <span class="o">:</span> <span class="nx">intervals</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">human</span> <span class="p">});</span>
|
|
343
|
+
<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>
|
|
344
|
+
<span class="p">}</span>
|
|
345
|
+
<span class="p">}</span>
|
|
346
|
+
<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>The <code>CardScroller</code> mirrors the moving and zooming of the <code>Bar</code> and is the
|
|
347
|
+
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>
|
|
348
|
+
<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>
|
|
349
|
+
<span class="p">};</span>
|
|
350
|
+
<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>
|
|
351
|
+
<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-52"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-52">¶</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>
|
|
352
|
+
<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>
|
|
353
|
+
<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>
|
|
354
|
+
<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>
|
|
355
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">cards</span> <span class="o">=</span> <span class="p">[];</span>
|
|
356
|
+
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s2">"render"</span><span class="p">,</span> <span class="s2">"showNotches"</span><span class="p">,</span> <span class="s2">"hideNotches"</span><span class="p">);</span>
|
|
357
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">template</span> <span class="o">=</span> <span class="nx">template</span><span class="p">(</span><span class="s2">"#TS-series_legend_tmpl"</span><span class="p">);</span>
|
|
358
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
|
359
|
+
<span class="p">};</span>
|
|
360
|
+
<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>
|
|
361
|
+
|
|
362
|
+
<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-53"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-53">¶</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>
|
|
363
|
+
<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>
|
|
364
|
+
<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>
|
|
365
|
+
<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>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>
|
|
366
|
+
<span class="k">return</span> <span class="nx">crd</span><span class="p">.</span><span class="nx">timestamp</span><span class="p">;</span>
|
|
367
|
+
<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>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>
|
|
368
|
+
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
|
369
|
+
<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>
|
|
370
|
+
<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>
|
|
371
|
+
<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>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>
|
|
372
|
+
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
|
373
|
+
<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>
|
|
374
|
+
<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>
|
|
375
|
+
<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>Create and append the label to <code>.TS-series_nav_container</code> and bind up
|
|
376
|
+
<code>hideNotches</code> and <code>showNotches</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
|
|
377
|
+
<span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">"render"</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
|
|
378
|
+
<span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
|
|
379
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="k">this</span><span class="p">));</span>
|
|
380
|
+
<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>
|
|
381
|
+
<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>
|
|
382
|
+
<span class="p">}</span>
|
|
383
|
+
<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>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>
|
|
384
|
+
<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>
|
|
385
|
+
<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>
|
|
386
|
+
<span class="p">};</span>
|
|
387
|
+
<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>Every <code>Card</code> handles a notch div which is immediately appended to the <code>Bar</code>
|
|
388
|
+
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>
|
|
389
|
+
<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>
|
|
390
|
+
<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>
|
|
391
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">timestamp</span> <span class="o">=</span> <span class="nx">card</span><span class="p">.</span><span class="nx">timestamp</span><span class="p">;</span>
|
|
392
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">attributes</span> <span class="o">=</span> <span class="nx">card</span><span class="p">;</span>
|
|
393
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">topcolor</span> <span class="o">=</span> <span class="nx">series</span><span class="p">.</span><span class="nx">color</span><span class="p">;</span>
|
|
394
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">template</span> <span class="o">=</span> <span class="nx">template</span><span class="p">(</span><span class="s2">"#TS-card_tmpl"</span><span class="p">);</span>
|
|
395
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">ntemplate</span> <span class="o">=</span> <span class="nx">template</span><span class="p">(</span><span class="s2">"#TS-notch_tmpl"</span><span class="p">);</span>
|
|
396
|
+
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s2">"render"</span><span class="p">,</span> <span class="s2">"activate"</span><span class="p">,</span> <span class="s2">"position"</span><span class="p">,</span> <span class="s2">"setPermalink"</span><span class="p">,</span> <span class="s2">"toggleNotch"</span><span class="p">);</span>
|
|
397
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">toggleNotch</span><span class="p">);</span>
|
|
398
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
|
399
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">position</span><span class="p">);</span>
|
|
400
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="p">[</span>
|
|
401
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'timestamp'</span><span class="p">),</span>
|
|
402
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'description'</span><span class="p">).</span><span class="nx">split</span><span class="p">(</span><span class="sr">/ /</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/[^a-zA-Z\-]/g</span><span class="p">,</span><span class="s2">""</span><span class="p">)</span>
|
|
403
|
+
<span class="p">].</span><span class="nx">join</span><span class="p">(</span><span class="s2">"-"</span><span class="p">);</span>
|
|
404
|
+
<span class="p">};</span>
|
|
405
|
+
|
|
406
|
+
<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-60"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-60">¶</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>
|
|
407
|
+
<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>
|
|
408
|
+
<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>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>
|
|
409
|
+
<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>
|
|
410
|
+
<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>When each <code>Card</code> is rendered via a render event, it appends a notch to the
|
|
411
|
+
<code>Bar</code> and binds a click handler so it can be activated. if the <code>Card</code>'s id
|
|
412
|
+
is currently selected via <code>window.location.hash</code> it's activated.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
|
|
413
|
+
<span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">"render"</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
|
|
414
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">offset</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">project</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">timestamp</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
|
|
415
|
+
<span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">ntemplate</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">);</span>
|
|
416
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">notch</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">html</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="s2">"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>
|
|
417
|
+
<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>
|
|
418
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">notch</span><span class="p">.</span><span class="nx">click</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">activate</span><span class="p">);</span>
|
|
419
|
+
<span class="k">if</span> <span class="p">(</span><span class="nx">history</span><span class="p">.</span><span class="nx">get</span><span class="p">()</span> <span class="o">===</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">activate</span><span class="p">();</span>
|
|
420
|
+
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-63"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-63">¶</a> </div> <p>As the <code>Bar</code> moves each card checks to see if it's outside the viewport,
|
|
421
|
+
if it is the card is flipped so as to be visible for the longest period
|
|
422
|
+
of time.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">position</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
|
423
|
+
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">!==</span> <span class="s2">"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="p">)</span> <span class="k">return</span><span class="p">;</span>
|
|
424
|
+
<span class="kd">var</span> <span class="nx">onBarEdge</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">cardOffset</span><span class="p">().</span><span class="nx">onBarEdge</span><span class="p">;</span>
|
|
425
|
+
|
|
426
|
+
<span class="k">switch</span><span class="p">(</span><span class="nx">onBarEdge</span><span class="p">)</span> <span class="p">{</span>
|
|
427
|
+
<span class="k">case</span> <span class="s1">'right'</span><span class="o">:</span>
|
|
428
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span><span class="s2">"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">cardOffset</span><span class="p">().</span><span class="nx">item</span><span class="p">.</span><span class="nx">width</span><span class="p">()</span> <span class="o">+</span> <span class="mi">7</span><span class="p">)});</span>
|
|
429
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">".TS-css_arrow"</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="k">this</span><span class="p">.</span><span class="nx">cardOffset</span><span class="p">().</span><span class="nx">item</span><span class="p">.</span><span class="nx">width</span><span class="p">());</span>
|
|
430
|
+
<span class="k">break</span><span class="p">;</span>
|
|
431
|
+
<span class="k">case</span> <span class="s1">'default'</span><span class="o">:</span>
|
|
432
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span><span class="s2">"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>
|
|
433
|
+
<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="p">,</span> <span class="mi">0</span><span class="p">);</span>
|
|
434
|
+
<span class="p">}</span>
|
|
435
|
+
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-64"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-64">¶</a> </div> <p>A utility function to suss out whether the card is fully viewable.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">cardOffset</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
436
|
+
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">)</span> <span class="k">return</span> <span class="p">{</span> <span class="nx">onBarEdge</span> <span class="o">:</span> <span class="kc">false</span> <span class="p">};</span>
|
|
437
|
+
|
|
438
|
+
<span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
|
439
|
+
<span class="kd">var</span> <span class="nx">item</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">children</span><span class="p">(</span><span class="s2">".TS-item"</span><span class="p">);</span>
|
|
440
|
+
<span class="kd">var</span> <span class="nx">currentMargin</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s2">"margin-left"</span><span class="p">);</span>
|
|
441
|
+
<span class="kd">var</span> <span class="nx">timeline</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#timeline_setter"</span><span class="p">);</span>
|
|
442
|
+
<span class="kd">var</span> <span class="nx">right</span> <span class="o">=</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span> <span class="o">+</span> <span class="nx">item</span><span class="p">.</span><span class="nx">width</span><span class="p">())</span> <span class="o">-</span> <span class="p">(</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span> <span class="o">+</span> <span class="nx">timeline</span><span class="p">.</span><span class="nx">width</span><span class="p">());</span>
|
|
443
|
+
<span class="kd">var</span> <span class="nx">left</span> <span class="o">=</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span><span class="p">)</span> <span class="o">-</span> <span class="nx">timeline</span><span class="p">.</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span><span class="p">;</span>
|
|
444
|
+
|
|
445
|
+
<span class="k">return</span> <span class="p">{</span>
|
|
446
|
+
<span class="nx">item</span> <span class="o">:</span> <span class="nx">item</span><span class="p">,</span>
|
|
447
|
+
<span class="nx">onBarEdge</span> <span class="o">:</span> <span class="p">(</span><span class="nx">right</span> <span class="o">></span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">currentMargin</span> <span class="o">===</span> <span class="nx">that</span><span class="p">.</span><span class="nx">originalMargin</span><span class="p">)</span> <span class="o">?</span>
|
|
448
|
+
<span class="s1">'right'</span> <span class="o">:</span>
|
|
449
|
+
<span class="p">(</span><span class="nx">left</span> <span class="o"><</span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">that</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s2">"margin-left"</span><span class="p">)</span> <span class="o">!==</span> <span class="nx">that</span><span class="p">.</span><span class="nx">originalMargin</span><span class="p">)</span> <span class="o">?</span>
|
|
450
|
+
<span class="s1">'default'</span> <span class="o">:</span>
|
|
451
|
+
<span class="p">(</span><span class="nx">left</span> <span class="o"><</span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">that</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s2">"margin-left"</span><span class="p">)</span> <span class="o">===</span> <span class="nx">that</span><span class="p">.</span><span class="nx">originalMargin</span><span class="p">)</span> <span class="o">?</span>
|
|
452
|
+
<span class="s1">'left'</span> <span class="o">:</span>
|
|
453
|
+
<span class="kc">false</span>
|
|
454
|
+
<span class="p">};</span>
|
|
455
|
+
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-65"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-65">¶</a> </div> <p>The first time a card is activated it renders its <code>template</code> and appends
|
|
456
|
+
its element to the <code>Bar</code>. After doing so it moves the <code>Bar</code> if its
|
|
457
|
+
element isn't currently visible. For ie each card sets the width of
|
|
458
|
+
<code>.TS-item_label</code> to the maximum width of the card's children, or
|
|
459
|
+
if that is less than the <code>.TS-item_year</code> element's width, <code>.TS-item_label</code>
|
|
460
|
+
gets <code>.TS-item_year</code>s width. Which is a funny way of saying, if you'd
|
|
461
|
+
like to set the width of the card as a whole, fiddle with <code>.TS-item_year</code>s
|
|
462
|
+
width.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">activate</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
|
|
463
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">hideActiveCard</span><span class="p">();</span>
|
|
464
|
+
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">)</span> <span class="p">{</span>
|
|
465
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">({</span><span class="nx">card</span><span class="o">:</span> <span class="k">this</span><span class="p">}));</span>
|
|
466
|
+
<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>
|
|
467
|
+
<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>
|
|
468
|
+
<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>
|
|
469
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">delegate</span><span class="p">(</span><span class="s2">".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>
|
|
470
|
+
<span class="p">}</span>
|
|
471
|
+
|
|
472
|
+
<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>
|
|
473
|
+
|
|
474
|
+
<span class="kd">var</span> <span class="nx">max</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">toArray</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">".TS-item_user_html"</span><span class="p">).</span><span class="nx">children</span><span class="p">()),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">el</span><span class="p">){</span> <span class="k">return</span> <span class="nx">$</span><span class="p">(</span><span class="nx">el</span><span class="p">).</span><span class="nx">width</span><span class="p">();</span> <span class="p">});</span>
|
|
475
|
+
<span class="k">if</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">max</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="o">></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>
|
|
476
|
+
<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="nx">$</span><span class="p">(</span><span class="nx">max</span><span class="p">).</span><span class="nx">width</span><span class="p">());</span>
|
|
477
|
+
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
|
478
|
+
<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>
|
|
479
|
+
<span class="p">}</span>
|
|
480
|
+
|
|
481
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">moveBarWithCard</span><span class="p">();</span>
|
|
482
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">notch</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">"TS-notch_active"</span><span class="p">);</span>
|
|
483
|
+
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-66"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-66">¶</a> </div> <p>Move the <code>Bar</code> if the <code>Card</code>'s element isn't visible.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">moveBarWithCard</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
484
|
+
<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>
|
|
485
|
+
<span class="kd">var</span> <span class="nx">onBarEdge</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">cardOffset</span><span class="p">().</span><span class="nx">onBarEdge</span><span class="p">;</span>
|
|
486
|
+
|
|
487
|
+
<span class="k">switch</span><span class="p">(</span><span class="nx">onBarEdge</span><span class="p">)</span> <span class="p">{</span>
|
|
488
|
+
<span class="k">case</span> <span class="s1">'right'</span><span class="o">:</span>
|
|
489
|
+
<span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="o">-</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">cardOffset</span><span class="p">().</span><span class="nx">item</span><span class="p">.</span><span class="nx">width</span><span class="p">());</span>
|
|
490
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">moving</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
|
|
491
|
+
<span class="k">break</span><span class="p">;</span>
|
|
492
|
+
<span class="k">case</span> <span class="s1">'left'</span><span class="o">:</span>
|
|
493
|
+
<span class="nx">e</span><span class="p">.</span><span class="nx">deltaX</span> <span class="o">=</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">cardOffset</span><span class="p">().</span><span class="nx">item</span><span class="p">.</span><span class="nx">width</span><span class="p">());</span>
|
|
494
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">moving</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
|
|
495
|
+
<span class="p">}</span>
|
|
496
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">position</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s1">'move'</span><span class="p">));</span>
|
|
497
|
+
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-67"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-67">¶</a> </div> <p>The click handler to set the current hash to the <code>Card</code>'s id.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setPermalink</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
498
|
+
<span class="nx">history</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
|
|
499
|
+
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-68"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-68">¶</a> </div> <p>Globally hide any cards with <code>TS-card_active</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">hideActiveCard</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
500
|
+
<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>
|
|
501
|
+
<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>
|
|
502
|
+
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-69"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-69">¶</a> </div> <p>An event listener to toggle this notche on and off via <code>Series</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggleNotch</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
|
|
503
|
+
<span class="k">switch</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">type</span><span class="p">)</span> <span class="p">{</span>
|
|
504
|
+
<span class="k">case</span> <span class="s2">"hideNotch"</span><span class="o">:</span>
|
|
505
|
+
<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>
|
|
506
|
+
<span class="k">if</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
|
|
507
|
+
<span class="k">return</span><span class="p">;</span>
|
|
508
|
+
<span class="k">case</span> <span class="s2">"showNotch"</span><span class="o">:</span>
|
|
509
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">notch</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"TS-series_inactive"</span><span class="p">).</span><span class="nx">show</span><span class="p">();</span>
|
|
510
|
+
<span class="p">}</span>
|
|
511
|
+
<span class="p">}</span>
|
|
512
|
+
|
|
513
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-70"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-70">¶</a> </div> <p>Simple inheritance helper for <code>Controls</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">ctor</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){};</span>
|
|
514
|
+
<span class="kd">var</span> <span class="nx">inherits</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">child</span><span class="p">,</span> <span class="nx">parent</span><span class="p">){</span>
|
|
515
|
+
<span class="nx">ctor</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">prototype</span><span class="p">;</span>
|
|
516
|
+
<span class="nx">child</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ctor</span><span class="p">();</span>
|
|
517
|
+
<span class="nx">child</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">constructor</span> <span class="o">=</span> <span class="nx">child</span><span class="p">;</span>
|
|
518
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-71"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-71">¶</a> </div> <h2>Controls</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-72"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-72">¶</a> </div> <p>Each control is basically a callback wrapper for a given DOM element.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Control</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">direction</span><span class="p">){</span>
|
|
519
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">direction</span> <span class="o">=</span> <span class="nx">direction</span><span class="p">;</span>
|
|
520
|
+
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">prefix</span> <span class="o">+</span> <span class="nx">direction</span><span class="p">);</span>
|
|
521
|
+
<span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
|
522
|
+
<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>
|
|
523
|
+
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-73"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-73">¶</a> </div> <p>Each <code>Zoom</code> control adjusts the <code>curZoom</code> when clicked.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">curZoom</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>
|
|
524
|
+
<span class="kd">var</span> <span class="nx">Zoom</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">direction</span><span class="p">)</span> <span class="p">{</span>
|
|
525
|
+
<span class="nx">Control</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
|
|
526
|
+
<span class="p">};</span>
|
|
527
|
+
<span class="nx">inherits</span><span class="p">(</span><span class="nx">Zoom</span><span class="p">,</span> <span class="nx">Control</span><span class="p">);</span>
|
|
528
|
+
|
|
529
|
+
<span class="nx">Zoom</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Zoom</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span>
|
|
530
|
+
<span class="nx">prefix</span> <span class="o">:</span> <span class="s2">".TS-zoom_"</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-74"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-74">¶</a> </div> <p>Adjust the <code>curZoom</code> up or down by 100 and trigger a <code>doZoom</code> event on
|
|
531
|
+
<code>.TS-notchbar</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">click</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
532
|
+
<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>
|
|
533
|
+
<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>
|
|
534
|
+
<span class="nx">$</span><span class="p">(</span><span class="s2">".TS-notchbar"</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'doZoom'</span><span class="p">,</span> <span class="p">[</span><span class="nx">curZoom</span><span class="p">]);</span>
|
|
535
|
+
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
|
536
|
+
<span class="nx">curZoom</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>
|
|
537
|
+
<span class="p">}</span>
|
|
538
|
+
<span class="p">}</span>
|
|
539
|
+
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-75"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-75">¶</a> </div> <p>Each <code>Chooser</code> activates the next or previous notch.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Chooser</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">direction</span><span class="p">)</span> <span class="p">{</span>
|
|
540
|
+
<span class="nx">Control</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
|
|
541
|
+
<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>
|
|
542
|
+
<span class="p">};</span>
|
|
543
|
+
<span class="nx">inherits</span><span class="p">(</span><span class="nx">Chooser</span><span class="p">,</span> <span class="nx">Control</span><span class="p">);</span>
|
|
544
|
+
|
|
545
|
+
<span class="nx">Chooser</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">Control</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span>
|
|
546
|
+
<span class="nx">prefix</span><span class="o">:</span> <span class="s2">".TS-choose_"</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-76"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-76">¶</a> </div> <p>Figure out which notch to activate and do so by triggering a click on
|
|
547
|
+
that notch.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">click</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
|
|
548
|
+
<span class="kd">var</span> <span class="nx">el</span><span class="p">;</span>
|
|
549
|
+
<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>
|
|
550
|
+
<span class="kd">var</span> <span class="nx">curCardIdx</span> <span class="o">=</span> <span class="nx">notches</span><span class="p">.</span><span class="nx">index</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">".TS-notch_active"</span><span class="p">));</span>
|
|
551
|
+
<span class="kd">var</span> <span class="nx">numOfCards</span> <span class="o">=</span> <span class="nx">notches</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
|
|
552
|
+
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">direction</span> <span class="o">===</span> <span class="s2">"next"</span><span class="p">)</span> <span class="p">{</span>
|
|
553
|
+
<span class="nx">el</span> <span class="o">=</span> <span class="p">(</span><span class="nx">curCardIdx</span> <span class="o"><</span> <span class="nx">numOfCards</span> <span class="o">?</span> <span class="nx">notches</span><span class="p">.</span><span class="nx">eq</span><span class="p">(</span><span class="nx">curCardIdx</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">:</span> <span class="kc">false</span><span class="p">);</span>
|
|
554
|
+
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
|
555
|
+
<span class="nx">el</span> <span class="o">=</span> <span class="p">(</span><span class="nx">curCardIdx</span> <span class="o">></span> <span class="mi">0</span> <span class="o">?</span> <span class="nx">notches</span><span class="p">.</span><span class="nx">eq</span><span class="p">(</span><span class="nx">curCardIdx</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">:</span> <span class="kc">false</span><span class="p">);</span>
|
|
556
|
+
<span class="p">}</span>
|
|
557
|
+
<span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">el</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
|
|
558
|
+
<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>
|
|
559
|
+
<span class="p">}</span>
|
|
560
|
+
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-77"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-77">¶</a> </div> <p>Finally, let's create the whole timeline. Boot is exposed globally via
|
|
561
|
+
<code>TimelineSetter.Timeline.boot()</code> which takes the JSON generated by
|
|
562
|
+
the timeline-setter binary as an argument. This is handy if you want
|
|
563
|
+
to be able to generate timelines at arbitrary times (say, for example,
|
|
564
|
+
in an ajax callback).</p>
|
|
565
|
+
|
|
566
|
+
<p>In the default install of TimelineSetter, Boot is called in the generated
|
|
567
|
+
HTML. We'll kick everything off by creating a <code>Timeline</code>, some <code>Controls</code>
|
|
568
|
+
and binding to <code>"keydown"</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Timeline</span><span class="p">.</span><span class="nx">boot</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
|
569
|
+
<span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
|
|
570
|
+
<span class="nx">TimelineSetter</span><span class="p">.</span><span class="nx">timeline</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Timeline</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
|
|
571
|
+
<span class="k">new</span> <span class="nx">Zoom</span><span class="p">(</span><span class="s2">"in"</span><span class="p">);</span>
|
|
572
|
+
<span class="k">new</span> <span class="nx">Zoom</span><span class="p">(</span><span class="s2">"out"</span><span class="p">);</span>
|
|
573
|
+
<span class="kd">var</span> <span class="nx">chooseNext</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Chooser</span><span class="p">(</span><span class="s2">"next"</span><span class="p">);</span>
|
|
574
|
+
<span class="kd">var</span> <span class="nx">choosePrev</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Chooser</span><span class="p">(</span><span class="s2">"prev"</span><span class="p">);</span>
|
|
575
|
+
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">$</span><span class="p">(</span><span class="s2">".TS-card_active"</span><span class="p">).</span><span class="nx">is</span><span class="p">(</span><span class="s2">"*"</span><span class="p">))</span> <span class="nx">chooseNext</span><span class="p">.</span><span class="nx">click</span><span class="p">();</span>
|
|
576
|
+
|
|
577
|
+
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'keydown'</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>
|
|
578
|
+
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">===</span> <span class="mi">39</span><span class="p">)</span> <span class="p">{</span>
|
|
579
|
+
<span class="nx">chooseNext</span><span class="p">.</span><span class="nx">click</span><span class="p">();</span>
|
|
580
|
+
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">===</span> <span class="mi">37</span><span class="p">)</span> <span class="p">{</span>
|
|
581
|
+
<span class="nx">choosePrev</span><span class="p">.</span><span class="nx">click</span><span class="p">();</span>
|
|
582
|
+
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
|
583
|
+
<span class="k">return</span><span class="p">;</span>
|
|
584
|
+
<span class="p">}</span>
|
|
585
|
+
<span class="p">});</span>
|
|
586
|
+
<span class="p">});</span>
|
|
587
|
+
|
|
588
|
+
<span class="p">};</span>
|
|
589
|
+
|
|
590
|
+
<span class="p">})();</span>
|
|
591
|
+
|
|
592
|
+
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|