timeline_setter 0.3.0 → 0.3.1
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/Rakefile +4 -4
- data/doc/doc.markdown +50 -27
- data/doc/timeline-setter.html +170 -119
- data/doc/twitter-demo.html +4 -57
- data/documentation/TimelineSetter/CLI.html +87 -78
- data/documentation/TimelineSetter/Parser.html +45 -31
- data/documentation/TimelineSetter/Timeline.html +70 -48
- data/documentation/TimelineSetter.html +6 -4
- data/documentation/_index.html +4 -4
- data/documentation/css/full_list.css +2 -0
- data/documentation/css/style.css +12 -10
- data/documentation/file.README.html +22 -18
- data/documentation/frames.html +1 -1
- data/documentation/index.html +22 -18
- data/documentation/js/app.js +4 -4
- data/documentation/js/full_list.js +29 -6
- data/documentation/method_list.html +19 -19
- data/documentation/top-level-namespace.html +5 -3
- data/index.html +42 -15
- data/lib/timeline_setter/cli.rb +2 -1
- data/lib/timeline_setter/timeline.rb +1 -1
- data/lib/timeline_setter/version.rb +1 -1
- data/public/javascripts/timeline-setter.js +117 -57
- data/public/javascripts/vendor/jquery-min.js +4 -16
- data/public/javascripts/vendor/jquery.js +9404 -0
- data/public/javascripts/vendor/underscore-min.js +26 -21
- data/public/javascripts/vendor/underscore.js +999 -0
- data/spec/test_data.csv +3 -3
- data/spec/timeline-debug.html +19 -0
- data/templates/timeline-markup.erb +25 -1
- data/timeline_setter.gemspec +11 -10
- metadata +9 -8
data/Rakefile
CHANGED
@@ -8,16 +8,16 @@ require './lib/timeline_setter'
|
|
8
8
|
desc "generate templates and minified JS. Stash them in public/javascripts"
|
9
9
|
task :jammit do
|
10
10
|
%x{
|
11
|
-
cd #{TimelineSetter::ROOT} &&
|
12
|
-
jammit &&
|
13
|
-
mv public/assets/templates.js public/javascripts/templates.js &&
|
11
|
+
cd #{TimelineSetter::ROOT} &&
|
12
|
+
jammit &&
|
13
|
+
mv public/assets/templates.js public/javascripts/templates.js &&
|
14
14
|
mv public/assets/main.js public/javascripts/timeline-setter.min.js
|
15
15
|
rm -rf public/assets
|
16
16
|
}
|
17
17
|
end
|
18
18
|
|
19
19
|
desc "build docs"
|
20
|
-
task :docs do
|
20
|
+
task :docs do
|
21
21
|
require 'rdiscount'
|
22
22
|
require 'erb'
|
23
23
|
version = TimelineSetter::VERSION
|
data/doc/doc.markdown
CHANGED
@@ -30,7 +30,7 @@ generating the assets, and the HTML, CSS and JavaScript for the timeline
|
|
30
30
|
itself. TimelineSetter will create a unique HTML page that embeds a JSON
|
31
31
|
object with your data. The CSS and JavaScript are identical for every timeline
|
32
32
|
created, so you can host those centrally and simply point to them when you
|
33
|
-
deploy a timeline, or (with the minified option) you can package them up with your HTML
|
33
|
+
deploy a timeline, or (with the minified option) you can package them up with your HTML
|
34
34
|
and paste it into your CMS all at once. You can [customize the CSS](#styling) to match the look
|
35
35
|
and feel of your site.
|
36
36
|
|
@@ -41,7 +41,7 @@ TimelineSetter relies on [TableFu](http://propublica.github.com/table-fu/), as
|
|
41
41
|
well as the JavaScript libraries
|
42
42
|
[Underscore](http://documentcloud.github.com/underscore/) and
|
43
43
|
[jQuery](http://jquery.com/). All of these are either installed along with
|
44
|
-
TableSetter, or packaged with the source. It has been tested with jQuery 1.5.1
|
44
|
+
TableSetter, or packaged with the source. It has been tested with jQuery 1.5.1
|
45
45
|
and Underscore 1.1.5.
|
46
46
|
|
47
47
|
<a id="install"></a>
|
@@ -50,7 +50,7 @@ and Underscore 1.1.5.
|
|
50
50
|
Install TimelineSetter through RubyGems on Unix-like OSes:
|
51
51
|
|
52
52
|
gem install timeline_setter
|
53
|
-
|
53
|
+
|
54
54
|
(Note: We haven't tested using the TimelineSetter tools on Windows even once,
|
55
55
|
though the timelines themselves have been tested in modern browsers on
|
56
56
|
Windows, Mac and Linux.)
|
@@ -65,7 +65,7 @@ without any arguments, or by adding the `-h` flag. Run the command like so:
|
|
65
65
|
|
66
66
|
timeline-setter -c /path/to/data.csv -o /path/to/output/directory
|
67
67
|
|
68
|
-
Running `timeline-setter` with no `-o` option will generate the timeline (and
|
68
|
+
Running `timeline-setter` with no `-o` option will generate the timeline (and
|
69
69
|
supporting assets if applicable) within the current directory.
|
70
70
|
|
71
71
|
Full list of options:
|
@@ -141,10 +141,10 @@ should see a structure much like this where you've specified your output:
|
|
141
141
|
|-----timeline-setter.js
|
142
142
|
|-----vendor
|
143
143
|
|-------underscore-min.js
|
144
|
-
|-------jquery-min.js
|
144
|
+
|-------jquery-min.js
|
145
145
|
|---stylesheets
|
146
146
|
|-----timeline-setter.css
|
147
|
-
|
147
|
+
|
148
148
|
Dropping the whole folder onto your server or an asset host like S3 will allow
|
149
149
|
the app to run self-contained. It requires no server-side processing at all.
|
150
150
|
To drop into your CMS, simply copy the relevant bits of `timeline.html` and
|
@@ -165,13 +165,14 @@ Although the `timeline-setter` command generates a JavaScript embed that prepopu
|
|
165
165
|
|
166
166
|
var myTimeline = TimelineSetter.Timeline.boot([{card}...], {config})
|
167
167
|
|
168
|
-
The config object looks for `interval`, `container`, and `formatter` options.
|
168
|
+
The config object looks for `interval`, `container`, and `formatter` options.
|
169
169
|
|
170
170
|
The `interval` option takes an [interval](#interval_notch_options) in the form of a JavaScript date getter. The `container` option allows you to inject the entire timeline into an element with the given selector. (By default this is `#timeline`). Finally, `formatter` is a way to format dates on the timeline's interval notches. Write a formatter like so:
|
171
171
|
|
172
172
|
formatter : function(d, defaults) {
|
173
|
-
|
174
|
-
|
173
|
+
var months = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'];
|
174
|
+
defaults.month = months[d.getMonth()];
|
175
|
+
return defaults;
|
175
176
|
}
|
176
177
|
|
177
178
|
|
@@ -214,14 +215,14 @@ The position of interval notches is based on the interval of time between events
|
|
214
215
|
|
215
216
|
<a id="interval_notch_options"></a>
|
216
217
|
The interval notches date spans themselves can be customized by using the `-i` flag when generating a timeline. The available parameters are
|
217
|
-
|
218
|
+
|
218
219
|
Decade
|
219
|
-
Lustrum
|
220
|
+
Lustrum
|
220
221
|
FullYear
|
221
222
|
Month
|
222
|
-
Week
|
223
|
-
Date
|
224
|
-
Hours
|
223
|
+
Week
|
224
|
+
Date
|
225
|
+
Hours
|
225
226
|
Minutes
|
226
227
|
Seconds
|
227
228
|
|
@@ -231,7 +232,7 @@ The interval notches date spans themselves can be customized by using the `-i` f
|
|
231
232
|
As of version 0.3.0, TimelineSetter has a JavaScript API that allows programmatic access to certain events, and the ability to activate cards. To use the API, assign the `TimelineSetter.Timeline.boot()` function to a variable, and then use methods in the `api` object like so:
|
232
233
|
|
233
234
|
var currentTimeline = TimelineSetter.Timeline.boot(options);
|
234
|
-
currentTimeline.api.onLoad(function() {
|
235
|
+
currentTimeline.api.onLoad(function() {
|
235
236
|
console.log("I'm ready")
|
236
237
|
});
|
237
238
|
|
@@ -245,10 +246,13 @@ Register a callback for when the timeline is loaded.
|
|
245
246
|
|
246
247
|
Register a callback for when a card is added to the timeline. This method has access to the event name and the card object.
|
247
248
|
|
248
|
-
currentTimeline.api.onCardAdd(function(evtName, obj) {
|
249
|
+
currentTimeline.api.onCardAdd(function(evtName, obj, card) {
|
249
250
|
console.log(obj);
|
251
|
+
console.log(card);
|
250
252
|
});
|
251
253
|
|
254
|
+
If you want to customize the card's template, set `card.template` to an undescore template function.
|
255
|
+
|
252
256
|
### onCardActivate
|
253
257
|
|
254
258
|
Register a callback for when a card is activated (i.e. shown). This method has access to the event name and the card object.
|
@@ -272,17 +276,28 @@ On the client side, there are a number of features we plan to add, including:
|
|
272
276
|
* More iOS gestures such as "pinching"
|
273
277
|
* Zooming to fit a series when the series is activated
|
274
278
|
* Ranges of events (e.g. Elizabeth Taylor was married to Michael Wilding between
|
275
|
-
Feb. 21, 1952 and Jan. 26, 1957, as shown
|
279
|
+
Feb. 21, 1952 and Jan. 26, 1957, as shown
|
276
280
|
[here](http://www.nytimes.com/interactive/2011/03/23/movies/20110323-ELIZABETH-TAYLOR-TIMELINE.html))
|
277
281
|
* Embed code
|
278
282
|
* JavaScript tests
|
279
283
|
|
280
|
-
<a id="
|
281
|
-
##
|
282
|
-
|
283
|
-
*
|
284
|
-
*
|
285
|
-
*
|
284
|
+
<a id="orgs"></a>
|
285
|
+
## Media Organizations Using TimelineSetter
|
286
|
+
|
287
|
+
* [ProPublica](http://www.propublica.org/special/tbi-psycho-platoon-timeline)
|
288
|
+
* [Los Angeles Times](http://timelines.latimes.com/bell/)
|
289
|
+
* [Chicago Tribune](http://www.chicagotribune.com/news/local/chi-taxi-ts-docs-20111118,0,3641202.htmlstory)
|
290
|
+
* [Huffington Post](http://www.huffingtonpost.com/2011/09/09/ground-zero-world-trade-center-freedom-tower_n_955845.html)
|
291
|
+
* [Talking Points Memo](http://www.talkingpointsmemo.com/interactive/2011/04/the-wisconsin-union-struggle-timeline.php)
|
292
|
+
* [MinnPost](http://www.minnpost.com/bachmanntimeline/)
|
293
|
+
* [Milwaukee Journal-Sentinel](http://www.jsonline.com/news/129159038.html)
|
294
|
+
* [WNYC](http://www.wnyc.org/articles/its-free-country/2011/may/20/timeline-gay-marriage-nystate/)
|
295
|
+
* [ArtInfo](http://www.artinfo.com/news/story/37506/getting-to-know-ai-weiwei-a-multimedia-biographical-timeline/)
|
296
|
+
* [Global TV News (Canada)](http://www.globalnews.ca/afghanistan/timeline/index.html?utm_source=facebook-twitter&utm_medium=link&utm_campaign=community)
|
297
|
+
* [PBS Newshour](http://www.pbs.org/newshour/timeline/uprising/)
|
298
|
+
* [American Public Media: Marketplace](http://www.marketplace.org/topics/economy/raising-debt-ceiling)
|
299
|
+
* [San Antonio Express-News](http://blog.chron.com/rickperry/timeline-the-rise-of-rick-perry/)
|
300
|
+
* [Voice of America](http://www.voanews.com/english/news/asia/southeast/Burma-Timeline-134760588.html#1183262400000-)
|
286
301
|
|
287
302
|
<a id="credits"></a>
|
288
303
|
## Credits
|
@@ -292,13 +307,21 @@ On the client side, there are a number of features we plan to add, including:
|
|
292
307
|
<a id="contact"></a>
|
293
308
|
## Contact
|
294
309
|
|
295
|
-
For issues with TimelineSetter, use the
|
296
|
-
[Issue Tracker](https://github.com/propublica/timeline-setter/issues). General
|
310
|
+
For issues with TimelineSetter, use the
|
311
|
+
[Issue Tracker](https://github.com/propublica/timeline-setter/issues). General
|
297
312
|
questions should go to <a href="mailto:opensource@propublica.org">opensource@propublica.org</a>.
|
298
313
|
|
299
314
|
<a id="changelog"></a>
|
300
315
|
## Change Log
|
301
316
|
|
317
|
+
<a id="release-031"></a>
|
318
|
+
### 0.3.1
|
319
|
+
|
320
|
+
* Fix position bug that was preventing card flipping in IE <= 8
|
321
|
+
* Add `noscript` fallback
|
322
|
+
* Add Century, HalfCentury, Quincenenary, HalfHour, QuarterHour, Millenium intervals
|
323
|
+
* Fix CLI in cases where output directory already exists
|
324
|
+
|
302
325
|
<a id="release-030"></a>
|
303
326
|
### 0.3.0
|
304
327
|
|
@@ -336,6 +359,6 @@ _Thanks to [Ben Welsh](http://github.com/palewire) for pointing out most of thes
|
|
336
359
|
Initial release
|
337
360
|
|
338
361
|
<a id="license"></a>
|
339
|
-
## License
|
362
|
+
## License
|
340
363
|
|
341
|
-
<%= license %>
|
364
|
+
<%= license %>
|