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.
Files changed (48) hide show
  1. data/.document +4 -0
  2. data/LICENSE.txt +18 -0
  3. data/README +15 -0
  4. data/Rakefile +98 -0
  5. data/bin/timeline-setter +9 -0
  6. data/doc/doc.markdown +253 -0
  7. data/doc/doc_wrapper.erb +87 -0
  8. data/doc/docco.css +186 -0
  9. data/doc/timeline-setter.html +592 -0
  10. data/doc/todo.markdown +28 -0
  11. data/doc/twitter-demo.html +122 -0
  12. data/documentation/TimelineSetter/CLI.html +575 -0
  13. data/documentation/TimelineSetter/Parser.html +285 -0
  14. data/documentation/TimelineSetter/Timeline.html +513 -0
  15. data/documentation/TimelineSetter/Util.html +246 -0
  16. data/documentation/TimelineSetter.html +112 -0
  17. data/documentation/_index.html +132 -0
  18. data/documentation/class_list.html +36 -0
  19. data/documentation/css/common.css +1 -0
  20. data/documentation/css/full_list.css +53 -0
  21. data/documentation/css/style.css +318 -0
  22. data/documentation/file.README.html +70 -0
  23. data/documentation/file_list.html +38 -0
  24. data/documentation/frames.html +13 -0
  25. data/documentation/index.html +70 -0
  26. data/documentation/js/app.js +203 -0
  27. data/documentation/js/full_list.js +149 -0
  28. data/documentation/js/jquery.js +16 -0
  29. data/documentation/method_list.html +155 -0
  30. data/documentation/top-level-namespace.html +88 -0
  31. data/index.html +397 -0
  32. data/lib/timeline_setter/cli.rb +85 -0
  33. data/lib/timeline_setter/parser.rb +28 -0
  34. data/lib/timeline_setter/timeline.rb +44 -0
  35. data/lib/timeline_setter/version.rb +3 -0
  36. data/lib/timeline_setter.rb +22 -0
  37. data/public/javascripts/timeline-setter.js +822 -0
  38. data/public/javascripts/vendor/jquery-min.js +16 -0
  39. data/public/javascripts/vendor/underscore-min.js +26 -0
  40. data/public/stylesheets/timeline-setter.css +396 -0
  41. data/spec/spec_helper.rb +10 -0
  42. data/spec/test_data.csv +4 -0
  43. data/spec/timeline_setter_spec.rb +85 -0
  44. data/templates/timeline-markup.erb +61 -0
  45. data/templates/timeline-min.erb +1 -0
  46. data/templates/timeline.erb +12 -0
  47. data/timeline_setter.gemspec +104 -0
  48. metadata +189 -0
data/documentation/method_list.html ADDED
@@ -0,0 +1,155 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
+ <html>
4
+ <head>
5
+ <meta name="Content-Type" content="text/html; charset=utf-8" />
6
+ <link rel="stylesheet" href="css/full_list.css" type="text/css" media="screen" charset="utf-8" />
7
+ <link rel="stylesheet" href="css/common.css" type="text/css" media="screen" charset="utf-8" />
8
+ <script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
9
+ <script type="text/javascript" charset="utf-8" src="js/full_list.js"></script>
10
+ <base id="base_target" target="_parent" />
11
+ </head>
12
+ <body>
13
+ <script type="text/javascript" charset="utf-8">
14
+ if (window.top.frames.main) {
15
+ document.getElementById('base_target').target = 'main';
16
+ document.body.className = 'frames';
17
+ }
18
+ </script>
19
+ <div id="content">
20
+ <h1 id="full_list_header">Method List</h1>
21
+ <div id="nav">
22
+ <a target="_self" href="class_list.html">Classes</a> |
23
+ <a target="_self" href="method_list.html">Methods</a> |
24
+ <a target="_self" href="file_list.html">Files</a>
25
+ </div>
26
+ <div id="search">Search: <input type="text" /></div>
27
+
28
+ <ul id="full_list" class="methods">
29
+
30
+
31
+ <li class="r1 ">
32
+ <span class='object_link'><a href="TimelineSetter/CLI.html#compile%21-instance_method" title="TimelineSetter::CLI#compile! (method)">#compile!</a></span>
33
+
34
+ <small>TimelineSetter::CLI</small>
35
+
36
+ </li>
37
+
38
+
39
+ <li class="r2 ">
40
+ <span class='object_link'><a href="TimelineSetter/Parser.html#events-instance_method" title="TimelineSetter::Parser#events (method)">#events</a></span>
41
+
42
+ <small>TimelineSetter::Parser</small>
43
+
44
+ </li>
45
+
46
+
47
+ <li class="r1 ">
48
+ <span class='object_link'><a href="TimelineSetter/CLI.html#events-instance_method" title="TimelineSetter::CLI#events (method)">#events</a></span>
49
+
50
+ <small>TimelineSetter::CLI</small>
51
+
52
+ </li>
53
+
54
+
55
+ <li class="r2 ">
56
+ <span class='object_link'><a href="TimelineSetter/CLI.html#html-instance_method" title="TimelineSetter::CLI#html (method)">#html</a></span>
57
+
58
+ <small>TimelineSetter::CLI</small>
59
+
60
+ </li>
61
+
62
+
63
+ <li class="r1 ">
64
+ <span class='object_link'><a href="TimelineSetter/Timeline.html#initialize-instance_method" title="TimelineSetter::Timeline#initialize (method)">#initialize</a></span>
65
+
66
+ <small>TimelineSetter::Timeline</small>
67
+
68
+ </li>
69
+
70
+
71
+ <li class="r2 ">
72
+ <span class='object_link'><a href="TimelineSetter/CLI.html#initialize-instance_method" title="TimelineSetter::CLI#initialize (method)">#initialize</a></span>
73
+
74
+ <small>TimelineSetter::CLI</small>
75
+
76
+ </li>
77
+
78
+
79
+ <li class="r1 ">
80
+ <span class='object_link'><a href="TimelineSetter/Parser.html#initialize-instance_method" title="TimelineSetter::Parser#initialize (method)">#initialize</a></span>
81
+
82
+ <small>TimelineSetter::Parser</small>
83
+
84
+ </li>
85
+
86
+
87
+ <li class="r2 ">
88
+ <span class='object_link'><a href="TimelineSetter/CLI.html#outdir-instance_method" title="TimelineSetter::CLI#outdir (method)">#outdir</a></span>
89
+
90
+ <small>TimelineSetter::CLI</small>
91
+
92
+ </li>
93
+
94
+
95
+ <li class="r1 ">
96
+ <span class='object_link'><a href="TimelineSetter/CLI.html#parse_options%21-instance_method" title="TimelineSetter::CLI#parse_options! (method)">#parse_options!</a></span>
97
+
98
+ <small>TimelineSetter::CLI</small>
99
+
100
+ </li>
101
+
102
+
103
+ <li class="r2 ">
104
+ <span class='object_link'><a href="TimelineSetter/CLI.html#sheet-instance_method" title="TimelineSetter::CLI#sheet (method)">#sheet</a></span>
105
+
106
+ <small>TimelineSetter::CLI</small>
107
+
108
+ </li>
109
+
110
+
111
+ <li class="r1 ">
112
+ <span class='object_link'><a href="TimelineSetter/Timeline.html#timeline-instance_method" title="TimelineSetter::Timeline#timeline (method)">#timeline</a></span>
113
+
114
+ <small>TimelineSetter::Timeline</small>
115
+
116
+ </li>
117
+
118
+
119
+ <li class="r2 ">
120
+ <span class='object_link'><a href="TimelineSetter/Timeline.html#timeline_markup-instance_method" title="TimelineSetter::Timeline#timeline_markup (method)">#timeline_markup</a></span>
121
+
122
+ <small>TimelineSetter::Timeline</small>
123
+
124
+ </li>
125
+
126
+
127
+ <li class="r1 ">
128
+ <span class='object_link'><a href="TimelineSetter/Timeline.html#timeline_min-instance_method" title="TimelineSetter::Timeline#timeline_min (method)">#timeline_min</a></span>
129
+
130
+ <small>TimelineSetter::Timeline</small>
131
+
132
+ </li>
133
+
134
+
135
+ <li class="r2 ">
136
+ <span class='object_link'><a href="TimelineSetter/Timeline.html#tmpl-instance_method" title="TimelineSetter::Timeline#tmpl (method)">#tmpl</a></span>
137
+
138
+ <small>TimelineSetter::Timeline</small>
139
+
140
+ </li>
141
+
142
+
143
+ <li class="r1 ">
144
+ <span class='object_link'><a href="TimelineSetter/Timeline.html#to_json-instance_method" title="TimelineSetter::Timeline#to_json (method)">#to_json</a></span>
145
+
146
+ <small>TimelineSetter::Timeline</small>
147
+
148
+ </li>
149
+
150
+
151
+ </ul>
152
+ </div>
153
+ </body>
154
+ </html>
155
+
data/documentation/top-level-namespace.html ADDED
@@ -0,0 +1,88 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
+ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4
+ <head>
5
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
+ <title>Top Level Namespace</title>
7
+ <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8" />
8
+ <link rel="stylesheet" href="css/common.css" type="text/css" media="screen" charset="utf-8" />
9
+
10
+ <script type="text/javascript" charset="utf-8">
11
+ relpath = '';
12
+ if (relpath != '') relpath += '/';
13
+ </script>
14
+ <script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
15
+ <script type="text/javascript" charset="utf-8" src="js/app.js"></script>
16
+
17
+ </head>
18
+ <body>
19
+ <script type="text/javascript" charset="utf-8">
20
+ if (window.top.frames.main) document.body.className = 'frames';
21
+ </script>
22
+
23
+ <div id="header">
24
+ <div id="menu">
25
+
26
+ <a href="_index.html">Index</a> &raquo;
27
+
28
+
29
+ <span class="title">Top Level Namespace</span>
30
+
31
+
32
+ <div class="noframes"><span class="title">(</span><a href="." target="_top">no frames</a><span class="title">)</span></div>
33
+ </div>
34
+
35
+ <div id="search">
36
+ <a id="class_list_link" href="#">Class List</a>
37
+ <a id="method_list_link" href="#">Method List</a>
38
+ <a id ="file_list_link" href="#">File List</a>
39
+ </div>
40
+
41
+ <div class="clear"></div>
42
+ </div>
43
+
44
+ <iframe id="search_frame"></iframe>
45
+
46
+ <div id="content"><h1>Top Level Namespace
47
+
48
+
49
+
50
+ </h1>
51
+
52
+ <dl class="box">
53
+
54
+
55
+
56
+
57
+
58
+
59
+
60
+
61
+ </dl>
62
+ <div class="clear"></div>
63
+
64
+ <h2>Defined Under Namespace</h2>
65
+ <p class="children">
66
+
67
+
68
+ <strong class="modules">Modules:</strong> <span class='object_link'><a href="TimelineSetter.html" title="TimelineSetter (module)">TimelineSetter</a></span>
69
+
70
+
71
+
72
+
73
+ </p>
74
+
75
+
76
+
77
+
78
+
79
+ </div>
80
+
81
+ <div id="footer">
82
+ Generated on Mon Apr 4 11:05:25 2011 by
83
+ <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
84
+ 0.6.5 (ruby-1.8.7).
85
+ </div>
86
+
87
+ </body>
88
+ </html>
data/index.html ADDED
@@ -0,0 +1,397 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
+ <link href="http://cloud.webtype.com/css/50942e7d-aebe-4c83-9824-ead7e49ec5af.css" rel="stylesheet" type="text/css" />
6
+ <style>
7
+ html {
8
+ background: #f7f7f7;
9
+ }
10
+ body {
11
+ font-family: Georgia, serif;
12
+ font-size: 16px;
13
+ line-height:24px;
14
+ width: 600px;
15
+ margin-left:auto;
16
+ margin-right:auto;
17
+ margin-top:10px;
18
+ background: #fff;
19
+ padding:10px 10px;
20
+ color:#444;
21
+ border-top:1px solid #cecece;
22
+ border-bottom:1px solid #cecece;
23
+ }
24
+ h1,h2,h3,h4,h5 {
25
+ font-family: 'Helvetica Neue', Arial, sans-serif;
26
+ color:#444;
27
+ }
28
+ h1 {
29
+ padding-top:0;
30
+ margin-top:0;
31
+ }
32
+ h2,h3 {
33
+ }
34
+ a.propublica{
35
+ position:absolute;
36
+ background: transparent url(http://propublica.github.com/table-fu/documentation/images/proplogo.png) no-repeat -40px -20px;
37
+ top: 0;
38
+ left: 0;
39
+ width: 160px;
40
+ height: 141px;
41
+ }
42
+
43
+ pre,code {
44
+ font-family: Monaco, Courier, monospace;
45
+ font-size:12px;
46
+ }
47
+ pre {
48
+ line-height: 16px;
49
+ padding:0.5em 1em;
50
+ overflow: auto;
51
+ border-left: 1px solid #cecece;
52
+ margin-left: 0;
53
+ background:#f7f7f7;
54
+ }
55
+ code {
56
+ padding: 2px;
57
+ background-color: #f7f7f7;
58
+ }
59
+ pre > code {
60
+ padding:0;
61
+ }
62
+ a {
63
+ color: #4369AF;
64
+ text-decoration: none;
65
+ font-weight: bold;
66
+ }
67
+ a:hover {
68
+ text-decoration:underline;
69
+ }
70
+ ul {
71
+ margin:0 1em;
72
+ padding:0;
73
+ list-style: disc;
74
+ }
75
+ li {
76
+ margin:0;
77
+ padding:0;
78
+ }
79
+
80
+ </style>
81
+ <title>TimelineSetter</title>
82
+ </head>
83
+ <body>
84
+ <a href="http://www.propublica.org" class="propublica">&nbsp;</a>
85
+ <h1>TimelineSetter 0.1.0</h1>
86
+
87
+ <p>TimelineSetter creates beautiful timelines.</p>
88
+
89
+ <p>It is a command-line utility that takes a <a href="#csv">specially-structured CSV file</a>
90
+ as input and outputs standards-compliant HTML/CSS/JavaScript. It supports any
91
+ span of time from minutes to years, and supports multiple parallel event
92
+ series in a single timeline. It can handle custom descriptions and even
93
+ arbitrary HTML in each event &ldquo;card.&rdquo; It creates fluid embeds that will look
94
+ great at any width.</p>
95
+
96
+ <p>TimelineSetter &ldquo;bakes out&rdquo; timelines, ready for uploading directly into your
97
+ CMS, Amazon S3, or however you typically serve static files. It requires no
98
+ server-side processing at all once you&rsquo;ve generated a timeline.</p>
99
+
100
+ <p>TimelineSetter <a href="https://github.com/propublica/timeline-setter/">source on Github</a>.</p>
101
+
102
+ <p><a id="samples"></a></p>
103
+
104
+ <h2>Assorted Docs and Samples</h2>
105
+
106
+ <ul>
107
+ <li>TimelineSetter Ruby source <a href="documentation/index.html">documentation</a></li>
108
+ <li>timeline-setter.js <a href="doc/timeline-setter.html">annotated source</a></li>
109
+ <li>A <a href="doc/twitter-demo.html">TimelineSetter demo</a> using Twitter data</li>
110
+ </ul>
111
+
112
+
113
+ <p><a id="innards"></a></p>
114
+
115
+ <h2>How it Works</h2>
116
+
117
+ <p>The project is broken into two parts: a Ruby package (along with a binary) for
118
+ generating the assets, and the HTML, CSS and JavaScript for the timeline
119
+ itself. TimelineSetter will create a unique HTML page that embeds a JSON
120
+ object with your data. The CSS and JavaScript are identical for every timeline
121
+ created, so you can host those centrally and simply point to them when you
122
+ deploy a timeline, or (with the minified option) you can package them up with your HTML
123
+ and paste it into your CMS all at once. You can <a href="#styling">customize the CSS</a> to match the look
124
+ and feel of your site.</p>
125
+
126
+ <p><a id="deps"></a></p>
127
+
128
+ <h2>Dependencies</h2>
129
+
130
+ <p>TimelineSetter relies on <a href="http://propublica.github.com/table-fu/">TableFu</a>, as
131
+ well as the JavaScript libraries
132
+ <a href="http://documentcloud.github.com/underscore/">Underscore</a> and
133
+ <a href="http://jquery.com/">jQuery</a>. All of these are either installed along with
134
+ TableSetter, or packaged with the source. It has been tested with jQuery 1.5.1
135
+ and Underscore 1.1.5.</p>
136
+
137
+ <p><a id="install"></a></p>
138
+
139
+ <h2>Installation</h2>
140
+
141
+ <p>Install TimelineSetter through RubyGems on Unix-like OSes:</p>
142
+
143
+ <pre><code>gem install timeline_setter
144
+ </code></pre>
145
+
146
+ <p>(Note: We haven&rsquo;t tested using the TimelineSetter tools on Windows even once,
147
+ though the timelines themselves have been tested in modern browsers on
148
+ Windows, Mac and Linux.)</p>
149
+
150
+ <p><a id="commandline"></a></p>
151
+
152
+ <h2>The `timeline-setter` command</h2>
153
+
154
+ <p>After TimelineSetter is installed, the <code>timeline-setter</code> command should be
155
+ available in your shell. The command looks for a CSV file to parse and outputs
156
+ static assets. At any point, you can find help by running <code>timeline-setter</code>
157
+ without any arguments, or by adding the <code>-h</code> flag. Run the command like so:</p>
158
+
159
+ <pre><code>timeline-setter -c /path/to/data.csv -o /path/to/output/directory
160
+ </code></pre>
161
+
162
+ <p>Running <code>timeline-setter</code> with no <code>-o</code> option will generate the timeline (and
163
+ supporting assets if applicable) within the current directory.</p>
164
+
165
+ <p>Full list of options:</p>
166
+
167
+ <ul>
168
+ <li><code>-c CSV</code> Path to your CSV file.</li>
169
+ <li><code>-o OUTPUT_PATH</code> Path to output timeline and assets. If absent, timeline will be created in current directory.</li>
170
+ <li><code>-a</code> Add the default supporting assets to the output directory, along with the timeline itself.</li>
171
+ <li><code>-m</code> Create a minified one-page version of your timeline with all supporting assets inline.</li>
172
+ <li><code>-O</code> Open a browser to your new timeline after it is generated (currently Mac OS only).</li>
173
+ <li><code>-h</code> Print help to standard output.</li>
174
+ </ul>
175
+
176
+
177
+ <p><a id="csv"></a></p>
178
+
179
+ <h2>Setting Up Your CSV File</h2>
180
+
181
+ <p>TimelineSetter looks for certain column names in your CSV file in order to
182
+ generate a timeline. All columns are required, though as you&rsquo;ll see, some of
183
+ them can be left blank. Here&rsquo;s a summary of each column and its significance:</p>
184
+
185
+ <p><a id="date-csv"></a></p>
186
+
187
+ <h3>date</h3>
188
+
189
+ <p>The date the event happened. Right now, TimelineSetter only supports
190
+ single-date events, but this can be specific down to the second. The generator
191
+ will try its best to parse out human dates. Try &ldquo;March 20, 2010,&rdquo; &ldquo;3/20/2010,&rdquo;
192
+ &ldquo;Mar. 20, 2010 11:59 PM&rdquo; etc.</p>
193
+
194
+ <p><a id="display-date-csv"></a></p>
195
+
196
+ <h3>display_date</h3>
197
+
198
+ <p>The date <em>displayed</em> on the event&rsquo;s card in the timeline. If this is blank, it
199
+ will fall back to <code>date</code></p>
200
+
201
+ <p><a id="desc-csv"></a></p>
202
+
203
+ <h3>description</h3>
204
+
205
+ <p>A description of the event.</p>
206
+
207
+ <p><a id="link-csv"></a></p>
208
+
209
+ <h3>link</h3>
210
+
211
+ <p>A URL to send users to more details about an event. This will generate a &ldquo;read
212
+ more&rdquo; button at the bottom of the card pointing to the URL.</p>
213
+
214
+ <p><a id="series-csv"></a></p>
215
+
216
+ <h3>series</h3>
217
+
218
+ <p>A string representing the name of the series of events this particular event
219
+ is a part of. TimelineSetter will find all the unique series among events in
220
+ the spreadsheet and assign both colors and checkboxes for them at the top of
221
+ the spreadsheet. Events not assigned to a series will be part of the &ldquo;default&rdquo;
222
+ series, which have their timeline notches colored charcoal, and have no
223
+ associated checkbox. <strong>Note:</strong> As a corollary, if you only have one series, it is
224
+ best not to assign a name.</p>
225
+
226
+ <p><a id="html-csv"></a></p>
227
+
228
+ <h3>html</h3>
229
+
230
+ <p>Any arbitrary HTML that will be inserted above <code>description</code>. This
231
+ field may contain image tags, YouTube tags, etc. &mdash; nearly everything except
232
+ <code>&lt;script&gt;</code> tags. If you choose to use JavaScript, you must do it inside an
233
+ iframe and call that iframe inside this field.</p>
234
+
235
+ <p><a id="deployment"></a></p>
236
+
237
+ <h2>Folder structure and deployment</h2>
238
+
239
+ <p>After you&rsquo;ve generated a timeline with the <code>timeline-setter</code> command, you
240
+ should see a structure much like this where you&rsquo;ve specified your output:</p>
241
+
242
+ <pre><code> |-output
243
+ |---timeline.html
244
+ |---javascripts
245
+ |-----timeline-setter.js
246
+ |-----vendor
247
+ |-------underscore-min.js
248
+ |-------jquery-min.js
249
+ |---stylesheets
250
+ |-----timeline-setter.css
251
+ </code></pre>
252
+
253
+ <p>Dropping the whole folder onto your server or an asset host like S3 will allow
254
+ the app to run self-contained. It requires no server-side processing at all.
255
+ To drop into your CMS, simply copy the relevant bits of <code>timeline.html</code> and
256
+ paste into your site&rsquo;s template. Then, adjust the <code>&lt;link&gt;</code> and <code>&lt;script&gt;</code> tags
257
+ to point to their appropriate destinations.</p>
258
+
259
+ <p><a id="defn"></a></p>
260
+
261
+ <h2>Definitions</h2>
262
+
263
+ <p>The timeline is made up of non-clickable <em>interval notches</em> used to denote
264
+ periods of time, and <em>event notches</em>, which, when clicked, reveal their
265
+ associated <em>event cards</em>.</p>
266
+
267
+ <p><a name="styling"></a></p>
268
+
269
+ <h2>Styling Your Timeline</h2>
270
+
271
+ <p>TimelineSetter timelines are fully style-able. The default &ldquo;ProPublica theme&rdquo;
272
+ stylesheet is packaged alongside each generated asset bundle, and is available
273
+ in <code>stylesheets/timeline-setter.css</code>. You can alter this stylesheet, or
274
+ replace it completely. Here&rsquo;s a guide to do that.</p>
275
+
276
+ <p><a id="styling-container"></a></p>
277
+
278
+ <h3>Overview and Styling the Container and Top Matter</h3>
279
+
280
+ <p>All TimelineSetter CSS is scoped within a namespace starting with <code>TS.</code> The
281
+ outermost container is <code>#timeline_setter.</code></p>
282
+
283
+ <p>Upon first glance, it may not seem like there is much markup at all. That&rsquo;s
284
+ because we make extensive use of JavaScript (ERB-style) templating via
285
+ <a href="http://documentcloud.github.com/underscore/#template">Underscore.js</a> &mdash; so
286
+ templates for each part of the timeline reside in the DOM. The controls (zoom
287
+ in/out, previous/next buttons) are available within <code>#TS-top_matter_container .TS-controls</code>.</p>
288
+
289
+ <p>Series checkboxes are injected into <code>.TS-series_nav_container</code> and templated
290
+ via <code>script#TS-notch_tmpl</code>. Currently, series colors are hard coded in the
291
+ JavaScript. We support a maximum of nine series colors (assigned in this order:
292
+ <code>#065718, #EDC047, #91ADD1, #929E5E, #9E5E23, #C44846, #065718, #EDD4A5, #CECECE</code>,
293
+ they can be overridden in the &ldquo;color priority&rdquo; section of <code>timeline-setter.css</code>). Technically
294
+ you can create an unlimited number of series, but they will eventually fall back
295
+ to the default charcoal notch color.</p>
296
+
297
+ <p><a id="styling-bar"></a></p>
298
+
299
+ <h3>Styling the bar, notches and cards</h3>
300
+
301
+ <p>Interval notches are templated within <code>script#TS-year_notch_tmpl</code>. Their
302
+ position is based on the interval of time between events as automatically
303
+ determined by the JavaScript. Here&rsquo;s a sampling of what you might see in
304
+ interval notches:</p>
305
+
306
+ <pre><code>year =&gt; 2001
307
+ month =&gt; June, 2004
308
+ day =&gt; May 1, 2005
309
+ hour/minute =&gt; 11:59
310
+ second =&gt; 11:59:22
311
+ </code></pre>
312
+
313
+ <p>Event notches are templated through <code>#TS-card-tmpl</code> and contain individual
314
+ classes corresponding to spreadsheet columns. <code>.TS-item-label</code> corresponds to
315
+ <code>description</code>, <code>.TS-item_html</code> corresponds to <code>html</code>,
316
+ <code>.TS-read_btn</code> is linked to <code>link</code> and <code>.TS-item_year</code> corresponds to
317
+ <code>display_date</code> falling through to <code>date</code>. Finally, <code>TS-permalink</code>
318
+ is a fragment link which will show the active card on page load if used.</p>
319
+
320
+ <p><a id="roadmap"></a></p>
321
+
322
+ <h2>Roadmap</h2>
323
+
324
+ <p>On the client side, there are a number of features we plan to add, including:</p>
325
+
326
+ <ul>
327
+ <li>Smoother zooming</li>
328
+ <li>Deactivating series checkboxes if none of its events are within the zoomed viewport</li>
329
+ <li>Auto-zooming the timeline if embedded into smaller containers</li>
330
+ <li>More iOS gestures such as &ldquo;pinching&rdquo;</li>
331
+ <li>Zooming to fit a series when the series is activated</li>
332
+ <li>Ranges of events (e.g. Elizabeth Taylor was married to Michael Wilding between
333
+ Feb. 21, 1952 and Jan. 26, 1957, as shown
334
+ <a href="http://www.nytimes.com/interactive/2011/03/23/movies/20110323-ELIZABETH-TAYLOR-TIMELINE.html">here</a>)</li>
335
+ <li>Embed code</li>
336
+ <li>JavaScript tests</li>
337
+ </ul>
338
+
339
+
340
+ <p><a id="links"></a></p>
341
+
342
+ <h2>Links</h2>
343
+
344
+ <ul>
345
+ <li>In the Wild: <a href="http://www.propublica.org/special/tbi-psycho-platoon-timeline">ProPublica: How One Blast Affected Five Soldiers</a></li>
346
+ </ul>
347
+
348
+
349
+ <p><a id="credits"></a></p>
350
+
351
+ <h2>Credits</h2>
352
+
353
+ <p><a href="http://twitter.com/a_l">Al Shaw</a>, <a href="http://github.com/thejefflarson">Jeff Larson</a>, ProPublica</p>
354
+
355
+ <p><a id="contact"></a></p>
356
+
357
+ <h2>Contact</h2>
358
+
359
+ <p>For issues with TimelineSetter, use the
360
+ <a href="https://github.com/propublica/timeline-setter/issues">Issue Tracker</a>. General
361
+ questions should go to <a href="mailto:opensource@propublica.org">opensource@propublica.org</a>.</p>
362
+
363
+ <p><a id="changelog"></a></p>
364
+
365
+ <h2>Change Log</h2>
366
+
367
+ <p><a id="release-001"></a></p>
368
+
369
+ <h3>0.1.0</h3>
370
+
371
+ <p>Initial release</p>
372
+
373
+ <p><a id="license"></a></p>
374
+
375
+ <h2>License</h2>
376
+
377
+ <p>Copyright © 2011 ProPublica</p>
378
+
379
+ <p>Permission is hereby granted, free of charge, to any person obtaining a copy of
380
+ this software and associated documentation files (the “Software”), to deal in
381
+ the Software without restriction, including without limitation the rights to
382
+ use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
383
+ of the Software, and to permit persons to whom the Software is furnished to
384
+ do so, subject to the following conditions:</p>
385
+
386
+ <p>The above copyright notice and this permission notice shall be included in all
387
+ copies or substantial portions of the Software.</p>
388
+
389
+ <p>THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
390
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
391
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
392
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
393
+ WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
394
+ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
395
+
396
+ </body>
397
+ </html>