Updated example files. Now they're based on a jade template so that I…

… can update them more easily
fenicento · Aug 25, 2012 · 717a5a1 · 717a5a1
1 parent 0891352
commit 717a5a1
Show file tree

Hide file tree

Showing 16 changed files with 497 additions and 123 deletions.
diff --git 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
@@ -1,31 +1,46 @@
 <!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<title>Google Spreadsheet 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'
-			}
-		</script>
-		<script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
-		<!-- END Timeline Embed -->
-	</body>
+<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: 'https://docs.google.com/spreadsheet/pub?key=0Agl_Dv6iEbDadHdKcHlHcTB5bzhvbF9iTWwyMmJHdkE&amp;output=html'
+    }
+  </script>
+  <script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
+  <!-- END Timeline Embed-->
+</body>
diff --git a/examples/example_json.html b/examples/example_json.html
@@ -1,32 +1,46 @@
 <!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<title>JSON Example Timeline</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: 'example_jsonp.jsonp',
-					debug:	false
-			}
-		</script>
-		<script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
-		<!-- END Timeline Embed -->
-	</body>
+<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_json.json'
+    }
+  </script>
+  <script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
+  <!-- END Timeline Embed-->
+</body>
diff --git a/examples/example_jsonp.html b/examples/example_jsonp.html
@@ -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>
diff --git a/examples/example_language.html b/examples/example_language.html
diff --git a/examples/example_storify.html b/examples/example_storify.html
@@ -1,31 +1,46 @@
 <!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<title>Storify 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: 'http://storify.com/zachwise/test'
-			}
-		</script>
-		<script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
-		<!-- END Timeline Embed -->
-	</body>
+<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: 'http://storify.com/zachwise/test'
+    }
+  </script>
+  <script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
+  <!-- END Timeline Embed-->
+</body>
diff --git a/source/jade/example_googlespreadsheet.jade 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')
diff --git a/source/jade/example_json.jade b/source/jade/example_json.jade
@@ -0,0 +1,4 @@
+include includes/mixins
+include sections/example-head
+body
+	mixin timeline-embed('example_json.json')
diff --git a/source/jade/example_jsonp.jade b/source/jade/example_jsonp.jade
@@ -0,0 +1,4 @@
+include includes/mixins
+include sections/example-head
+body
+	mixin timeline-embed('example_jsonp.jsonp')
diff --git a/source/jade/example_storify.jade 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')
diff --git a/source/jade/generator.jade 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 &copy; VéritéCo 2012