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
commit
717a5a13a2
  1. 4
      .gitignore
  2. 29
      examples/example_googlespreadsheet.html
  3. 30
      examples/example_json.html
  4. 46
      examples/example_jsonp.html
  5. 33
      examples/example_language.html
  6. 27
      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

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

29
examples/example_googlespreadsheet.html

@ -1,10 +1,25 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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> <head>
<title>Timeline JS Example</title>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Google Spreadsheet Example</title>
<meta name="description" content="TimelineJS example"> <meta name="description" content="TimelineJS example">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<!-- Style-->
<style> <style>
html, body { html, body {
height:100%; height:100%;
@ -12,9 +27,10 @@
margin: 0px; margin: 0px;
} }
</style> </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> </head>
</html>
<body> <body>
<!-- BEGIN Timeline Embed --> <!-- BEGIN Timeline Embed -->
<div id="timeline-embed"></div> <div id="timeline-embed"></div>
@ -22,10 +38,9 @@
var timeline_config = { var timeline_config = {
width: "100%", width: "100%",
height: "100%", height: "100%",
source: 'https://docs.google.com/spreadsheet/pub?key=0Agl_Dv6iEbDadHdKcHlHcTB5bzhvbF9iTWwyMmJHdkE&output=html' source: 'https://docs.google.com/spreadsheet/pub?key=0Agl_Dv6iEbDadHdKcHlHcTB5bzhvbF9iTWwyMmJHdkE&amp;output=html'
} }
</script> </script>
<script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script> <script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
<!-- END Timeline Embed--> <!-- END Timeline Embed-->
</body> </body>
</html>

30
examples/example_json.html

@ -1,10 +1,25 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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> <head>
<title>Timeline JS Example</title>
<meta charset="utf-8"> <meta charset="utf-8">
<title>JSON Example Timeline</title>
<meta name="description" content="TimelineJS example"> <meta name="description" content="TimelineJS example">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<!-- Style-->
<style> <style>
html, body { html, body {
height:100%; height:100%;
@ -12,9 +27,10 @@
margin: 0px; margin: 0px;
} }
</style> </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> </head>
</html>
<body> <body>
<!-- BEGIN Timeline Embed --> <!-- BEGIN Timeline Embed -->
<div id="timeline-embed"></div> <div id="timeline-embed"></div>
@ -22,11 +38,9 @@
var timeline_config = { var timeline_config = {
width: "100%", width: "100%",
height: "100%", height: "100%",
source: 'example_jsonp.jsonp', source: 'example_json.json'
debug: false
} }
</script> </script>
<script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script> <script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
<!-- END Timeline Embed--> <!-- END Timeline Embed-->
</body> </body>
</html>

46
examples/example_jsonp.html

@ -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

@ -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>

27
examples/example_storify.html

@ -1,10 +1,25 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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> <head>
<title>Timeline JS Example</title>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Storify Example</title>
<meta name="description" content="TimelineJS example"> <meta name="description" content="TimelineJS example">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<!-- Style-->
<style> <style>
html, body { html, body {
height:100%; height:100%;
@ -12,9 +27,10 @@
margin: 0px; margin: 0px;
} }
</style> </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> </head>
</html>
<body> <body>
<!-- BEGIN Timeline Embed --> <!-- BEGIN Timeline Embed -->
<div id="timeline-embed"></div> <div id="timeline-embed"></div>
@ -28,4 +44,3 @@
<script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script> <script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
<!-- END Timeline Embed--> <!-- END Timeline Embed-->
</body> </body>
</html>

4
source/jade/example_googlespreadsheet.jade

@ -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

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

4
source/jade/example_jsonp.jade

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

4
source/jade/example_storify.jade

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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')
Loading…
Cancel
Save