// 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='ar') Arabic (beta)
option(value='bg') Bulgarian
option(value='ca') Catalan
option(value='cz') Czech
option(value='da') Danish
option(value='de') German / Deutsch
option(value='el') Greek
option(value='es') Spanish
option(value='eu') Basque/ Euskara
option(value='fi') Finnish
option(value='fo') Faroese
option(value='fr') French
option(value='gl') Galician
option(value='hu') Hungarian
option(value='hy') Armenian
option(value='id') Indonesian
option(value='is') Icelandic
option(value='it') Italian
option(value='iw') Hebrew (beta)
option(value='ja') Japanese
option(value='ka') Georgian
option(value='ko') Korean
option(value='lv') Latvian
option(value='nl') Dutch
option(value='no') Norwegian
option(value='pl') Polish
option(value='pt-br') Brazilian Portuguese
option(value='pt') Portuguese
option(value='ru') Russian
option(value='sk') Slovak
option(value='sl') Slovenian
option(value='sr-cy') Serbian (Cyrillic)
option(value='sr') Serbian (Latin)
option(value='sv') Swedish
option(value='ta') Tamil
option(value='tl') Tagalog
option(value='tr') Turkish
option(value='zh-cn') Chinese
option(value='zh-tw') Taiwanese
// 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 Wordpress Plugin?
// 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
|
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