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