Zach Wise
13 years ago
16 changed files with 497 additions and 123 deletions
@ -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> |
||||||
@ -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> |
|
||||||
|
|
||||||
@ -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') |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
include includes/mixins |
||||||
|
include sections/example-head |
||||||
|
body |
||||||
|
mixin timeline-embed('example_json.json') |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
include includes/mixins |
||||||
|
include sections/example-head |
||||||
|
body |
||||||
|
mixin timeline-embed('example_jsonp.jsonp') |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
include includes/mixins |
||||||
|
include sections/example-head |
||||||
|
body |
||||||
|
mixin timeline-embed('http://storify.com/zachwise/test') |
||||||
@ -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 © VĂ©ritĂ©Co 2012 |
||||||
@ -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 |
||||||
|
| |
||||||
@ -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 |
||||||
@ -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 |
||||||
@ -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 |
||||||
|
| |
||||||
|
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 |
||||||
|
|
||||||
@ -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…
Reference in new issue