playground
/
TimelineJS
mirror of https://github.com/NUKnightLab/TimelineJS.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Updated example files. Now they're based on a jade template so that I can update them more easily

pull/227/head
Zach Wise 12 years ago
parent
0891352f3e
commit
717a5a13a2
16 changed files with 497 additions and 123 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      .gitignore
  2. 71
      examples/example_googlespreadsheet.html
  3. 72
      examples/example_json.html
  4. 46
      examples/example_jsonp.html
  5. 33
      examples/example_language.html
  6. 71
      examples/example_storify.html
  7. 4
      source/jade/example_googlespreadsheet.jade
  8. 4
      source/jade/example_json.jade
  9. 4
      source/jade/example_jsonp.jade
  10. 4
      source/jade/example_storify.jade
  11. 42
      source/jade/generator.jade
  12. 15
      source/jade/includes/ascii.jade
  13. 32
      source/jade/includes/mixins.jade
  14. 26
      source/jade/index.jade
  15. 167
      source/jade/sections/embed-generator.jade
  16. 19
      source/jade/sections/example-head.jade

4
.gitignore vendored
Unescape View File

@ -6,8 +6,8 @@ Embed.CDN.js
Embed.CDN.Generator.js
compiled/generator.html
compiled/index.html
compiled/js/timeline-embed-cdn.js
compiled/js/timeline-embed-generator.js
compiled/js/storyjs-embed-cdn.js
compiled/js/storyjs-embed-generator.js
compiled/css/timeline-generator.css
*.tmproj
*.tmproject

71
examples/example_googlespreadsheet.html
Unescape View File

@ -1,31 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google Spreadsheet Example</title>
<meta name="description" content="TimelineJS example">
<html lang="en"><!--
<style>
html, body {
height:100%;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<!-- BEGIN Timeline Embed -->
<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
width: "100%",
height: "100%",
source: 'https://docs.google.com/spreadsheet/pub?key=0Agl_Dv6iEbDadHdKcHlHcTB5bzhvbF9iTWwyMmJHdkE&output=html'
}
</script>
<script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
<!-- END Timeline Embed -->
</body>
88888888888 d8b 888 d8b 888888 d8888b
888 Y8P 888 Y8P 88b d88P Y88b
888 888 888 Y88b
888 888 88888b d88b d88b 888 888 88888b d88b 888 Y888b
888 888 888 888 88b d8P Y8b 888 888 888 88b d8P Y8b 888 Y88b
888 888 888 888 888 88888888 888 888 888 888 88888888 888 888
888 888 888 888 888 Y8b 888 888 888 888 Y8b 88P Y88b d88P
888 888 888 888 888 Y8888 888 888 888 888 Y8888 888 Y8888P
d88P
d88P
888P
-->
<head>
<title>Timeline JS Example</title>
<meta charset="utf-8">
<meta name="description" content="TimelineJS example">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<!-- Style-->
<style>
html, body {
height:100%;
padding: 0px;
margin: 0px;
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
</html>
<body>
<!-- BEGIN Timeline Embed -->
<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
width: "100%",
height: "100%",
source: 'https://docs.google.com/spreadsheet/pub?key=0Agl_Dv6iEbDadHdKcHlHcTB5bzhvbF9iTWwyMmJHdkE&amp;output=html'
}
</script>
<script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
<!-- END Timeline Embed-->
</body>

72
examples/example_json.html
Unescape View File

@ -1,32 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSON Example Timeline</title>
<meta name="description" content="TimelineJS example">
<html lang="en"><!--
<style>
html, body {
height:100%;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<!-- BEGIN Timeline Embed -->
<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
width: "100%",
height: "100%",
source: 'example_jsonp.jsonp',
debug: false
}
</script>
<script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
<!-- END Timeline Embed -->
</body>
88888888888 d8b 888 d8b 888888 d8888b
888 Y8P 888 Y8P 88b d88P Y88b
888 888 888 Y88b
888 888 88888b d88b d88b 888 888 88888b d88b 888 Y888b
888 888 888 888 88b d8P Y8b 888 888 888 88b d8P Y8b 888 Y88b
888 888 888 888 888 88888888 888 888 888 888 88888888 888 888
888 888 888 888 888 Y8b 888 888 888 888 Y8b 88P Y88b d88P
888 888 888 888 888 Y8888 888 888 888 888 Y8888 888 Y8888P
d88P
d88P
888P
-->
<head>
<title>Timeline JS Example</title>
<meta charset="utf-8">
<meta name="description" content="TimelineJS example">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<!-- Style-->
<style>
html, body {
height:100%;
padding: 0px;
margin: 0px;
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
</html>
<body>
<!-- BEGIN Timeline Embed -->
<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
width: "100%",
height: "100%",
source: 'example_json.json'
}
</script>
<script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
<!-- END Timeline Embed-->
</body>

46
examples/example_jsonp.html
Unescape View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en"><!--
88888888888 d8b 888 d8b 888888 d8888b
888 Y8P 888 Y8P 88b d88P Y88b
888 888 888 Y88b
888 888 88888b d88b d88b 888 888 88888b d88b 888 Y888b
888 888 888 888 88b d8P Y8b 888 888 888 88b d8P Y8b 888 Y88b
888 888 888 888 888 88888888 888 888 888 888 88888888 888 888
888 888 888 888 888 Y8b 888 888 888 888 Y8b 88P Y88b d88P
888 888 888 888 888 Y8888 888 888 888 888 Y8888 888 Y8888P
d88P
d88P
888P
-->
<head>
<title>Timeline JS Example</title>
<meta charset="utf-8">
<meta name="description" content="TimelineJS example">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<!-- Style-->
<style>
html, body {
height:100%;
padding: 0px;
margin: 0px;
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
</html>
<body>
<!-- BEGIN Timeline Embed -->
<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
width: "100%",
height: "100%",
source: 'example_jsonp.jsonp'
}
</script>
<script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
<!-- END Timeline Embed-->
</body>

33
examples/example_language.html
Unescape View File

@ -1,33 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Language Example</title>
<meta name="description" content="TimelineJS example">
<style>
html, body {
height:100%;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<!-- BEGIN Timeline Embed -->
<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
width: "100%",
height: "100%",
source: 'https://docs.google.com/spreadsheet/pub?key=0Agl_Dv6iEbDadHdKcHlHcTB5bzhvbF9iTWwyMmJHdkE&output=html',
lang: 'fr' //FRENCH
}
</script>
<script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
<!-- END Timeline Embed -->
</body>
</html>

71
examples/example_storify.html
Unescape View File

@ -1,31 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Storify Example</title>
<meta name="description" content="TimelineJS example">
<html lang="en"><!--
<style>
html, body {
height:100%;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<!-- BEGIN Timeline Embed -->
<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
width: "100%",
height: "100%",
source: 'http://storify.com/zachwise/test'
}
</script>
<script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
<!-- END Timeline Embed -->
</body>
88888888888 d8b 888 d8b 888888 d8888b
888 Y8P 888 Y8P 88b d88P Y88b
888 888 888 Y88b
888 888 88888b d88b d88b 888 888 88888b d88b 888 Y888b
888 888 888 888 88b d8P Y8b 888 888 888 88b d8P Y8b 888 Y88b
888 888 888 888 888 88888888 888 888 888 888 88888888 888 888
888 888 888 888 888 Y8b 888 888 888 888 Y8b 88P Y88b d88P
888 888 888 888 888 Y8888 888 888 888 888 Y8888 888 Y8888P
d88P
d88P
888P
-->
<head>
<title>Timeline JS Example</title>
<meta charset="utf-8">
<meta name="description" content="TimelineJS example">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<!-- Style-->
<style>
html, body {
height:100%;
padding: 0px;
margin: 0px;
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
</html>
<body>
<!-- BEGIN Timeline Embed -->
<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
width: "100%",
height: "100%",
source: 'http://storify.com/zachwise/test'
}
</script>
<script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
<!-- END Timeline Embed-->
</body>

4
source/jade/example_googlespreadsheet.jade
Unescape View File

@ -0,0 +1,4 @@
include includes/mixins
include sections/example-head
body
mixin timeline-embed('https://docs.google.com/spreadsheet/pub?key=0Agl_Dv6iEbDadHdKcHlHcTB5bzhvbF9iTWwyMmJHdkE&output=html')

4
source/jade/example_json.jade
Unescape View File

@ -0,0 +1,4 @@
include includes/mixins
include sections/example-head
body
mixin timeline-embed('example_json.json')

4
source/jade/example_jsonp.jade
Unescape View File

@ -0,0 +1,4 @@
include includes/mixins
include sections/example-head
body
mixin timeline-embed('example_jsonp.jsonp')

4
source/jade/example_storify.jade
Unescape View File

@ -0,0 +1,4 @@
include includes/mixins
include sections/example-head
body
mixin timeline-embed('http://storify.com/zachwise/test')

42
source/jade/generator.jade
Unescape View File

@ -0,0 +1,42 @@
!!! 5
html(lang="en")
include includes/ascii
head
title TimelineJS Embed Generator
meta(charset='utf-8')
meta(name='description', content='Timeline JS Embed Generator')
// CSS
link(href='css/timeline-generator.css', rel='stylesheet')
// JavaScript
script(type='text/javascript', src='js/storyjs-embed-generator.js')
script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js')
script
$(document).ready(function() {
updateEmbedCode();
$("#embed_code").click(function() { $(this).select(); });
$('#embed-width').change(function(evt) { updateEmbedCode(evt); });
$('#embed-wordpressplugin').change(function(evt) { updateEmbedCode(evt); });
$('#embed-font').change(function(evt) { updateEmbedCode(evt); });
$('#embed-height').change(function(evt) { updateEmbedCode(evt); });
$('#embed-maptype').change(function(evt) { updateEmbedCode(evt); });
$('#embed-googlemapkey').change(function(evt) { updateEmbedCode(evt); });
$('#embed-source-url').change(function(evt) { updateEmbedCode(evt); });
$('#embed-language').change(function(evt) { updateEmbedCode(evt); });
$('#embed-startatend').change(function(evt) { updateEmbedCode(evt); });
$('#embed-hashbookmark').change(function(evt) { updateEmbedCode(evt); });
$('#embed-startatslide').change(function(evt) { updateEmbedCode(evt); });
$('#embed-startzoomadjust').change(function(evt) { updateEmbedCode(evt); });
$('#embed-debug').change(function(evt) { updateEmbedCode(evt); });
});
body
include sections/embed-generator
// Footer
footer
div.container
p &copy; VéritéCo 2012

15
source/jade/includes/ascii.jade
Unescape View File

@ -0,0 +1,15 @@
//
|
| 88888888888 d8b 888 d8b 888888 d8888b
| 888 Y8P 888 Y8P 88b d88P Y88b
| 888 888 888 Y88b
| 888 888 88888b d88b d88b 888 888 88888b d88b 888 Y888b
| 888 888 888 888 88b d8P Y8b 888 888 888 88b d8P Y8b 888 Y88b
| 888 888 888 888 888 88888888 888 888 888 888 88888888 888 888
| 888 888 888 888 888 Y8b 888 888 888 888 Y8b 88P Y88b d88P
| 888 888 888 888 888 Y8888 888 888 888 888 Y8888 888 Y8888P
| d88P
| d88P
| 888P
|

32
source/jade/includes/mixins.jade
Unescape View File

@ -0,0 +1,32 @@
mixin brand(name, ext)
span.verite-brand #{name}
span.verite-brand-ext #{ext}
mixin example(title, link, thumb, description)
// Example
div.span3
p
a(href='#{link}', target='_blank')
img(src='#{thumb}').with-shadow
h3
a(href='#{link}', target='_blank') #{title}
p #{description}
mixin faq-accordian(parent, id, question, answer)
div.accordion-group
div.accordion-heading
a.accordion-toggle(data-toggle='collapse', data-parent='#{parent}', href='##{id}')!= question
div(id='#{id}', style='height: 0px;').accordion-body.collapse
div.accordion-inner!= answer
mixin timeline-embed(thesource)
// BEGIN Timeline Embed
div#timeline-embed
script(type='text/javascript')
var timeline_config = {
width: "100%",
height: "100%",
source: '#{thesource}'
}
script(type='text/javascript', src='../compiled/js/storyjs-embed.js')
// END Timeline Embed

26
source/jade/index.jade
Unescape View File

@ -0,0 +1,26 @@
include includes/mixins
!!! 5
html(lang="en")
include includes/ascii
head
title TimelineJS Embed
meta(charset='utf-8')
meta(name='description', content='TimelineJS Embed')
meta(name='apple-mobile-web-app-capable', content='yes')
meta(name='apple-touch-fullscreen', content='yes')
// Style
style
html, body {
height:100%;
padding: 0px;
margin: 0px;
}
// HTML5 shim, for IE6-8 support of HTML elements
//if lt IE 9
script(src='http://html5shim.googlecode.com/svn/trunk/html5.js')
body
// BEGIN Timeline Embed
div#timeline-embed
script(type='text/javascript', src='js/storyjs-embed-cdn.js?v210')
// END Timeline Embed

167
source/jade/sections/embed-generator.jade
Unescape View File

@ -0,0 +1,167 @@
// Embed Generator
include ../includes/mixins
section#embed.embed-form
div.container
h2
mixin brand('Timeline', 'JS')
| Embed Generator
p.lead On your site or blog in no time.
div.row
div.span7
form.form-horizontal
fieldset
// Required elements for embed
// Embed Source
div.control-group
label.control-label
a(href='https://docs.google.com/a/digitalartwork.net/previewtemplate?id=0AppSVxABhnltdEhzQjQ4MlpOaldjTmZLclQxQWFTOUE&mode=public',target='_blank') Google Spreadsheet
| or other data source URL
div.controls
input(type='text')#embed-source-url.span4
p.help-inline Make sure you've published it.
// Size
div.control-group
label.control-label Size
div.controls
div.input-prepend
span.add-on Width
input(type='text', value='900', placeholder='900')#embed-width.input-mini
div.input-prepend
span.add-on Height
input(type='text', value='650', placeholder='650')#embed-height.input-mini
// Optional elements for embed
div.well
h4 Optional
// Language
div.control-group
label.control-label Language
div.controls
select#embed-language
option(value='en') English
option(value='fr') French
option(value='es') Spanish
option(value='de') German / Deutsch
option(value='pt') Portuguese
option(value='pt-br') Brazilian Portuguese
option(value='nl') Dutch
option(value='it') Italian
option(value='is') Icelandic
option(value='no') Norwegian
option(value='bg') Bulgarian
option(value='si') Slovenian
option(value='hu') Hungarian
option(value='fo') Faroese
option(value='cz') Czech
option(value='dk') Danish
option(value='id') Indonesian
option(value='pl') Polish
option(value='ru') Russian
option(value='ja') Japanese
option(value='kr') Korean
option(value='zh-ch') Chinese
option(value='zh-tw') Taiwanese
option(value='el') Greek
option(value='ta') Tamil
option(value='ar') Arabic
// Map Type
div.control-group
label.control-label Map Type
div.controls
select#embed-maptype
option(value='toner') Stamen Maps: Toner
option(value='toner-lines') Stamen Maps: Toner Lines
option(value='toner-labels') Stamen Maps: Toner Labels
option(value='watercolor') Stamen Maps: Watercolor
option(value='sterrain') Stamen Maps: Terrain
option(value='ROADMAP') Google Maps: Roadmap
option(value='TERRAIN') Google Maps: Terrain
option(value='HYBRID') Google Maps: Hybrid
option(value='SATELLITE') Google Maps: Satellite
input(type='text',placeholder='Google Maps API Key')#embed-googlemapkey
p.help-block
| Due to recent changes to the Google Maps API, you need a
a(href='https://developers.google.com/places/documentation/#Authentication', target='_blank') API Key
| in order to use custom map types.
// Fonts
div.control-group
label.control-label Fonts
div.controls
select#embed-font
option(value='Bevan-PotanoSans') Bevan & Potano Sans
option(value='Merriweather-NewsCycle') Merriweather & News Cycle
option(value='NewsCycle-Merriweather') News Cycle & Merriweather
option(value='PoiretOne-Molengo') Poiret One & Molengo
option(value='Arvo-PTSans') Arvo & PT Sans
option(value='PTSerif-PTSans') PT Serif & PT Sans
option(value='DroidSerif-DroidSans') Droid Serif & Droid Sans
option(value='Lekton-Molengo') Lekton & Molengo
option(value='NixieOne-Ledger') Nixie One & Ledger
option(value='AbrilFatface-Average') Abril Fatface & Average
option(value='PlayfairDisplay-Muli') Playfair Display & Muli
option(value='Rancho-Gudea') Rancho & Gudea
option(value='BreeSerif-OpenSans') Bree Serif & Open Sans
option(value='SansitaOne-Kameron') Sansita One & Kameron
option(value='Pacifico-Arimo') Pacifico & Arimo
option(value='PT') PT Sans & PT Narrow & PT Serif
// Wordpress Plugin
div.control-group
label.control-label Misc
div.controls
label.checkbox
input#embed-wordpressplugin(type='checkbox', value='option1')
| Wordpress Plugin
span.help-inline Is the embed for the <a href="https://github.com/VeriteCo/Timeline-Wordpress-Plugin" target="_blank">Wordpress Plugin</a>?
// Start at End?
label.checkbox
input#embed-startatend(type='checkbox', value='option1')
| Start at the End?
span.help-inline The most recent event will be shown first.
// Hash Bookmarks
label.checkbox
input#embed-hashbookmark(type='checkbox', value='option1')
| Hash Bookmarks
span.help-inline On each slide change, a # will be added to the end of the url in the url bar. These urls are bookmarkable so you can share or return to the same place in the timeline
// Debug
label.checkbox
input#embed-debug(type='checkbox', value='option1')
| Debug
span.help-inline In debug mode, you will see console logs.
// Start Zoom Adjust
div.control-group
label.control-label Adjust the default calculated zoom level
div.controls
input#embed-startzoomadjust.input-mini(type='text', value='0', placeholder='0')
p.help-block This will tweak the default zoom level. Equivilent to pressing the zoom in or zoom out button the specified number of times. Negative numbers zoom out.
// Start at Slide
div.control-group
label.control-label Start at specific slide number?
div.controls
div.input-prepend
span.add-on Slide
input#embed-startatslide.input-mini(type='text', value='0', placeholder='0')
p.help-block You can tell TimelineJS to start at a specific slide number
// Embed Copy and Paste
div.span5
form.form-horizontal
fieldset
h4 Embed Code
p Copy this code and paste it where you want your
mixin brand('Timeline', 'JS')
| to appear.
br
textarea(readonly='readonly', style='width: 100%; height: 160px; min-height: 110px; max-height: 300px; resize: none; font-family: Menlo,Monaco,\'Courier New\',monospace; font-size: 11px;')#embed_code
| <iframe src='http://embed.verite.co/timeline/?source=0Agl_Dv6iEbDadHdKcHlHcTB5bzhvbF9iTWwyMmJHdkE&font=Bevan-PotanoSans&maptype=toner&width=600&height=600' width='600' height='600' frameborder='0'></iframe>
div(style='text-align:center;')
a(href='#preview-embed-iframe')#iframe-preview-button.btn.btn-primary Preview
| &nbsp;
a(href='#embed', target='_blank')#preview-embed-link.btn Link to Preview
section.background-fabric
div.container
h2 Preview
div.row
div#preview-embed-iframe.span12
br
br

19
source/jade/sections/example-head.jade
Unescape View File

@ -0,0 +1,19 @@
!!! 5
html(lang="en")
include ../includes/ascii
head
title Timeline JS Example
meta(charset='utf-8')
meta(name='description', content='TimelineJS example')
meta(name='apple-mobile-web-app-capable', content='yes')
meta(name='apple-touch-fullscreen', content='yes')
// Style
style
html, body {
height:100%;
padding: 0px;
margin: 0px;
}
// HTML5 shim, for IE6-8 support of HTML elements
//if lt IE 9
script(src='http://html5shim.googlecode.com/svn/trunk/html5.js')
Write Preview
Loading…
Cancel
Save