From 717a5a13a20abb89ce390db432aedbe54f686a61 Mon Sep 17 00:00:00 2001 From: Zach Wise Date: Sat, 25 Aug 2012 15:15:30 -0500 Subject: [PATCH] Updated example files. Now they're based on a jade template so that I can update them more easily --- .gitignore | 4 +- examples/example_googlespreadsheet.html | 73 +++++---- examples/example_json.html | 74 +++++---- examples/example_jsonp.html | 46 ++++++ examples/example_language.html | 33 ---- examples/example_storify.html | 73 +++++---- source/jade/example_googlespreadsheet.jade | 4 + source/jade/example_json.jade | 4 + source/jade/example_jsonp.jade | 4 + source/jade/example_storify.jade | 4 + source/jade/generator.jade | 42 ++++++ source/jade/includes/ascii.jade | 15 ++ source/jade/includes/mixins.jade | 32 ++++ source/jade/index.jade | 26 ++++ source/jade/sections/embed-generator.jade | 167 +++++++++++++++++++++ source/jade/sections/example-head.jade | 19 +++ 16 files changed, 497 insertions(+), 123 deletions(-) create mode 100644 examples/example_jsonp.html delete mode 100644 examples/example_language.html create mode 100755 source/jade/example_googlespreadsheet.jade create mode 100755 source/jade/example_json.jade create mode 100755 source/jade/example_jsonp.jade create mode 100755 source/jade/example_storify.jade create mode 100755 source/jade/generator.jade create mode 100755 source/jade/includes/ascii.jade create mode 100755 source/jade/includes/mixins.jade create mode 100755 source/jade/index.jade create mode 100755 source/jade/sections/embed-generator.jade create mode 100755 source/jade/sections/example-head.jade diff --git a/.gitignore b/.gitignore index 949c1bf..93707be 100644 --- a/.gitignore +++ b/.gitignore @@ -6,8 +6,8 @@ Embed.CDN.js Embed.CDN.Generator.js compiled/generator.html compiled/index.html -compiled/js/timeline-embed-cdn.js -compiled/js/timeline-embed-generator.js +compiled/js/storyjs-embed-cdn.js +compiled/js/storyjs-embed-generator.js compiled/css/timeline-generator.css *.tmproj *.tmproject diff --git a/examples/example_googlespreadsheet.html b/examples/example_googlespreadsheet.html index 912633a..8f145ab 100644 --- a/examples/example_googlespreadsheet.html +++ b/examples/example_googlespreadsheet.html @@ -1,31 +1,46 @@ - - - - Google Spreadsheet Example - - - - - - - - -
- - - - + + + Timeline JS Example + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/examples/example_json.html b/examples/example_json.html index cbbf027..28a010a 100644 --- a/examples/example_json.html +++ b/examples/example_json.html @@ -1,32 +1,46 @@ - - - - JSON Example Timeline - - - - - - - - -
- - - - + + + Timeline JS Example + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/examples/example_jsonp.html b/examples/example_jsonp.html new file mode 100644 index 0000000..c1cfa20 --- /dev/null +++ b/examples/example_jsonp.html @@ -0,0 +1,46 @@ + + + + Timeline JS Example + + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/examples/example_language.html b/examples/example_language.html deleted file mode 100644 index 0785733..0000000 --- a/examples/example_language.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - Language Example - - - - - - - - -
- - - - - - diff --git a/examples/example_storify.html b/examples/example_storify.html index 1ecc018..be09a2a 100644 --- a/examples/example_storify.html +++ b/examples/example_storify.html @@ -1,31 +1,46 @@ - - - - Storify Example - - - - - - - - -
- - - - + + + Timeline JS Example + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/source/jade/example_googlespreadsheet.jade b/source/jade/example_googlespreadsheet.jade new file mode 100755 index 0000000..5c2ed66 --- /dev/null +++ b/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') \ No newline at end of file diff --git a/source/jade/example_json.jade b/source/jade/example_json.jade new file mode 100755 index 0000000..37dd9c4 --- /dev/null +++ b/source/jade/example_json.jade @@ -0,0 +1,4 @@ +include includes/mixins +include sections/example-head +body + mixin timeline-embed('example_json.json') \ No newline at end of file diff --git a/source/jade/example_jsonp.jade b/source/jade/example_jsonp.jade new file mode 100755 index 0000000..8714d70 --- /dev/null +++ b/source/jade/example_jsonp.jade @@ -0,0 +1,4 @@ +include includes/mixins +include sections/example-head +body + mixin timeline-embed('example_jsonp.jsonp') \ No newline at end of file diff --git a/source/jade/example_storify.jade b/source/jade/example_storify.jade new file mode 100755 index 0000000..b40be20 --- /dev/null +++ b/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') \ No newline at end of file diff --git a/source/jade/generator.jade b/source/jade/generator.jade new file mode 100755 index 0000000..84e7295 --- /dev/null +++ b/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 © VéritéCo 2012 diff --git a/source/jade/includes/ascii.jade b/source/jade/includes/ascii.jade new file mode 100755 index 0000000..1a08e88 --- /dev/null +++ b/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 + | diff --git a/source/jade/includes/mixins.jade b/source/jade/includes/mixins.jade new file mode 100755 index 0000000..66fb722 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/source/jade/index.jade b/source/jade/index.jade new file mode 100755 index 0000000..79b7cd1 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/source/jade/sections/embed-generator.jade b/source/jade/sections/embed-generator.jade new file mode 100755 index 0000000..3b41ab7 --- /dev/null +++ b/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 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 + diff --git a/source/jade/sections/example-head.jade b/source/jade/sections/example-head.jade new file mode 100755 index 0000000..3475308 --- /dev/null +++ b/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') \ No newline at end of file