timeline_setter 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
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>