Beautifully crafted timelines that are easy and intuitive to use. http://timeline.knightlab.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
168 lines
7.1 KiB
168 lines
7.1 KiB
// 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='iw') Hebrew |
|
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 |
|
|
|
|