turn theme-picker into an extension

nuclearsandwich · Jan 11, 2012 · de5604d · de5604d
1 parent 17074a0
commit de5604d
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 138 deletions.
diff --git a/deck/introduction/introduction.css → ...nsions/theme-picker/deck.theme-picker.css b/deck/introduction/introduction.css → ...nsions/theme-picker/deck.theme-picker.css
@@ -1,8 +1,8 @@
-.deck-container .theme-menu {
+.deck-container .theme-picker {
   display: none;
   position: fixed;
   z-index: 3;
-  top: 10px;
+  bottom: -20px;
   right: 10px;
   height: 20px;
   line-height: 20px;
@@ -16,12 +16,12 @@
   font-family: sans-serif;
   color: #888;
 }
-.js .deck-container .theme-menu {
+.js .deck-container .theme-picker {
   display: block;
 }
-.deck-container .theme-menu h2 {
+.deck-container .theme-picker h2 {
   float: left;
-  font-size: 20px;
+  font-size: 12px;
   border: 0;
   padding: 5px 10px;
   margin: 0;
@@ -35,21 +35,21 @@
   font-family: sans-serif;
   font-weight: bold;
 }
-.deck-container .theme-menu label {
+.deck-container .theme-picker label {
   float: left;
   display: block;
   font-size: 12px;
   vertical-align: baseline;
   margin: 0 4px 0 15px;
 }
-.deck-container .theme-menu select {
+.deck-container .theme-picker select {
   float: left;
   display: block;
   font-size: 14px;
 }
 
 @media print {
-  .theme-menu {
+  .theme-picker {
     display: none !important;
   }
 }
diff --git a/deck/extensions/theme-picker/deck.theme-picker.js b/deck/extensions/theme-picker/deck.theme-picker.js
@@ -0,0 +1,13 @@
+$(function() {
+
+	$('.deck-container').prepend('<div class="theme-picker"><h2>Themes</h2><label for="style-themes">Style:</label><select id="style-themes"><option selected="selected" value="deck/themes/style/web-2.0.css">Web 2.0</option><option value="deck/themes/style/swiss.css">Swiss</option><option value="deck/themes/style/neon.css">Neon</option><option value="">None</option></select><label for="transition-themes">Transition:</label><select id="transition-themes"><option value="deck/themes/transition/horizontal-slide.css">Horizontal Slide</option><option value="deck/themes/transition/vertical-slide.css">Vertical Slide</option><option value="deck/themes/transition/fade.css">Fade</option><option selected="selected" value="">None</option></select></div>');
+
+	$('#style-themes').change(function() {
+		$('#style-theme-link').attr('href', $(this).val());
+	});
+
+	$('#transition-themes').change(function() {
+		$('#transition-theme-link').attr('href', $(this).val());
+	});
+});
+
diff --git a/deck/introduction/index.html b/deck/introduction/index.html
@@ -33,7 +33,7 @@
 
 <body class="deck-container">
 
-<div class="theme-menu">
+<div class="theme-picker">
 	<h2>Themes</h2>	
 
 	<label for="style-themes">Style:</label>

diff --git a/deck/introduction/introduction.js b/deck/introduction/introduction.js
diff --git a/deck/introduction/introduction.scss b/deck/introduction/introduction.scss
diff --git a/lib/deck.rb b/lib/deck.rb
@@ -50,15 +50,13 @@ def head_content
     stylesheet "deck/extensions/status/deck.status.css"
     stylesheet "deck/extensions/hash/deck.hash.css"
     stylesheet "deck/extensions/scale/deck.scale.css"
+
+    stylesheet "deck/extensions/theme-picker/deck.theme-picker.css"
 
     # <!-- Theme CSS files (menu swaps these out) -->
     stylesheet "deck/themes/style/web-2.0.css", :id=>"style-theme-link"
     stylesheet "deck/themes/transition/horizontal-slide.css", :id => "transition-theme-link"
 
-    # <!-- Custom CSS just for this page -->
-    # (this is mostly just for the theme menu, so we'll leave it in the parent)
-    stylesheet "deck/introduction/introduction.css"
-
     script :src=>"deck/modernizr.custom.js"
   end
 
@@ -77,66 +75,27 @@ def scripts
     script :type => "text/javascript", :src => 'deck/extensions/navigation/deck.navigation.js'
     script :type => "text/javascript", :src => 'deck/extensions/scale/deck.scale.js'
 
-    # (this is really just for the theme menu, so we'll leave it in the parent)
-    script :src => 'deck/introduction/introduction.js'
+
+    # fire up deck.js
+    script "$(function(){$.deck('.slide');});"
+
+    script :type => "text/javascript", :src => 'deck/extensions/theme-picker/deck.theme-picker.js'
+
   end
 
   def body_attributes
     {:class=>"deck-container"}
   end
 
   def body_content
-    theme_menu
     slides
     slide_navigation
     deck_status
     goto_slide
     permalink
     scripts
   end
-
-  def theme_menu
-    div :class => 'theme-menu' do
-      h2 do
-        text 'Themes'
-      end
-      label :for => 'style-themes' do
-        text 'Style:'
-      end
-      select :id => 'style-themes' do
-        option :selected => 'selected', :value => 'deck/themes/style/web-2.0.css' do
-          text 'Web 2.0'
-        end
-        option :value => 'deck/themes/style/swiss.css' do
-          text 'Swiss'
-        end
-        option :value => 'deck/themes/style/neon.css' do
-          text 'Neon'
-        end
-        option :value => '' do
-          text 'None'
-        end
-      end
-      label :for => 'transition-themes' do
-        text 'Transition:'
-      end
-      select :id => 'transition-themes' do
-        option :selected => 'selected', :value => 'deck/themes/transition/horizontal-slide.css' do
-          text 'Horizontal Slide'
-        end
-        option :value => 'deck/themes/transition/vertical-slide.css' do
-          text 'Vertical Slide'
-        end
-        option :value => 'deck/themes/transition/fade.css' do
-          text 'Fade'
-        end
-        option :value => '' do
-          text 'None'
-        end
-      end
-    end
-  end
-
+
   def slide slide_id
     # todo: use Slide object, but without markdown
     # slide = Slide.new(:slide_id => slide_id)

diff --git a/public/deck.html b/public/deck.html
@@ -1,3 +1,3 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html;charset=UTF-8" http-equiv="content-type" /><title>deck.rb presentation</title><meta charset="utf-8" /><meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" /><meta content="width=1024, user-scalable=no" name="viewport" /><link href="deck/core/deck.core.css" rel="stylesheet" /><link href="deck/core/deck.core.css" rel="stylesheet" /><link href="deck/extensions/goto/deck.goto.css" rel="stylesheet" /><link href="deck/extensions/menu/deck.menu.css" rel="stylesheet" /><link href="deck/extensions/navigation/deck.navigation.css" rel="stylesheet" /><link href="deck/extensions/status/deck.status.css" rel="stylesheet" /><link href="deck/extensions/hash/deck.hash.css" rel="stylesheet" /><link href="deck/extensions/scale/deck.scale.css" rel="stylesheet" /><link href="deck/themes/style/web-2.0.css" id="style-theme-link" rel="stylesheet" /><link href="deck/themes/transition/horizontal-slide.css" id="transition-theme-link" rel="stylesheet" /><link href="deck/introduction/introduction.css" rel="stylesheet" /><script src="deck/modernizr.custom.js"></script></head><body class="deck-container"><div class="theme-menu"><h2>Themes</h2><label for="style-themes">Style:</label><select id="style-themes"><option selected="selected" value="deck/themes/style/web-2.0.css">Web 2.0</option><option value="deck/themes/style/swiss.css">Swiss</option><option value="deck/themes/style/neon.css">Neon</option><option value="">None</option></select><label for="transition-themes">Transition:</label><select id="transition-themes"><option selected="selected" value="deck/themes/transition/horizontal-slide.css">Horizontal Slide</option><option value="deck/themes/transition/vertical-slide.css">Vertical Slide</option><option value="deck/themes/transition/fade.css">Fade</option><option value="">None</option></select></div><section class="slide" id="readme"><h2>deck.rb</h2><ul><li>based on deck.js</li><li>create a subclass of Deck (see introduction.rb)</li><li>run erector to build it</li></ul><pre>erector --to-html ./deck.rb  # generates deck.html</pre></section><a class="deck-prev-link" href="#" title="Previous"></a><a class="deck-next-link" href="#" title="Next"></a><p class="deck-status"><span class="deck-status-current"></span>/<span class="deck-status-total"></span></p><form action="." class="goto-form" method="get"><label for="goto-slide">Go to slide:</label><input id="goto-slide" list="goto-datalist" name="slidenum" type="text" /><datalist id="goto-datalist"></datalist><input type="submit" value="Go" /></form><a class="deck-permalink" href="." title="Permalink to this slide">#</a><script src="./deck/jquery-1.7.min.js"></script><!--Deck Core and extensions-->
+       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html;charset=UTF-8" http-equiv="content-type" /><title>deck.rb presentation</title><meta charset="utf-8" /><meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" /><meta content="width=1024, user-scalable=no" name="viewport" /><link href="deck/core/deck.core.css" rel="stylesheet" /><link href="deck/core/deck.core.css" rel="stylesheet" /><link href="deck/extensions/goto/deck.goto.css" rel="stylesheet" /><link href="deck/extensions/menu/deck.menu.css" rel="stylesheet" /><link href="deck/extensions/navigation/deck.navigation.css" rel="stylesheet" /><link href="deck/extensions/status/deck.status.css" rel="stylesheet" /><link href="deck/extensions/hash/deck.hash.css" rel="stylesheet" /><link href="deck/extensions/scale/deck.scale.css" rel="stylesheet" /><link href="deck/themes/style/web-2.0.css" id="style-theme-link" rel="stylesheet" /><link href="deck/themes/transition/horizontal-slide.css" id="transition-theme-link" rel="stylesheet" /><link href="deck/introduction/introduction.css" rel="stylesheet" /><script src="deck/modernizr.custom.js"></script></head><body class="deck-container"><div class="theme-picker"><h2>Themes</h2><label for="style-themes">Style:</label><select id="style-themes"><option selected="selected" value="deck/themes/style/web-2.0.css">Web 2.0</option><option value="deck/themes/style/swiss.css">Swiss</option><option value="deck/themes/style/neon.css">Neon</option><option value="">None</option></select><label for="transition-themes">Transition:</label><select id="transition-themes"><option selected="selected" value="deck/themes/transition/horizontal-slide.css">Horizontal Slide</option><option value="deck/themes/transition/vertical-slide.css">Vertical Slide</option><option value="deck/themes/transition/fade.css">Fade</option><option value="">None</option></select></div><section class="slide" id="readme"><h2>deck.rb</h2><ul><li>based on deck.js</li><li>create a subclass of Deck (see introduction.rb)</li><li>run erector to build it</li></ul><pre>erector --to-html ./deck.rb  # generates deck.html</pre></section><a class="deck-prev-link" href="#" title="Previous"></a><a class="deck-next-link" href="#" title="Next"></a><p class="deck-status"><span class="deck-status-current"></span>/<span class="deck-status-total"></span></p><form action="." class="goto-form" method="get"><label for="goto-slide">Go to slide:</label><input id="goto-slide" list="goto-datalist" name="slidenum" type="text" /><datalist id="goto-datalist"></datalist><input type="submit" value="Go" /></form><a class="deck-permalink" href="." title="Permalink to this slide">#</a><script src="./deck/jquery-1.7.min.js"></script><!--Deck Core and extensions-->
 <script src="deck/core/deck.core.js" type="text/javascript"></script><script src="deck/extensions/hash/deck.hash.js" type="text/javascript"></script><script src="deck/extensions/menu/deck.menu.js" type="text/javascript"></script><script src="deck/extensions/goto/deck.goto.js" type="text/javascript"></script><script src="deck/extensions/status/deck.status.js" type="text/javascript"></script><script src="deck/extensions/navigation/deck.navigation.js" type="text/javascript"></script><script src="deck/extensions/scale/deck.scale.js" type="text/javascript"></script><script src="deck/introduction/introduction.js"></script></body></html>
diff --git a/public/introduction.html b/public/introduction.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html;charset=UTF-8" http-equiv="content-type" /><title>Getting Started with deck.js</title><meta charset="utf-8" /><meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" /><meta content="width=1024, user-scalable=no" name="viewport" /><meta content="A jQuery library for modern HTML presentations" name="description" /><meta content="Caleb Troughton" name="author" /><link href="deck/core/deck.core.css" rel="stylesheet" /><link href="deck/core/deck.core.css" rel="stylesheet" /><link href="deck/extensions/goto/deck.goto.css" rel="stylesheet" /><link href="deck/extensions/menu/deck.menu.css" rel="stylesheet" /><link href="deck/extensions/navigation/deck.navigation.css" rel="stylesheet" /><link href="deck/extensions/status/deck.status.css" rel="stylesheet" /><link href="deck/extensions/hash/deck.hash.css" rel="stylesheet" /><link href="deck/extensions/scale/deck.scale.css" rel="stylesheet" /><link href="deck/themes/style/web-2.0.css" id="style-theme-link" rel="stylesheet" /><link href="deck/themes/transition/horizontal-slide.css" id="transition-theme-link" rel="stylesheet" /><link href="deck/introduction/introduction.css" rel="stylesheet" /><script src="deck/modernizr.custom.js"></script></head><body class="deck-container"><div class="theme-menu"><h2>Themes</h2><label for="style-themes">Style:</label><select id="style-themes"><option selected="selected" value="deck/themes/style/web-2.0.css">Web 2.0</option><option value="deck/themes/style/swiss.css">Swiss</option><option value="deck/themes/style/neon.css">Neon</option><option value="">None</option></select><label for="transition-themes">Transition:</label><select id="transition-themes"><option selected="selected" value="deck/themes/transition/horizontal-slide.css">Horizontal Slide</option><option value="deck/themes/transition/vertical-slide.css">Vertical Slide</option><option value="deck/themes/transition/fade.css">Fade</option><option value="">None</option></select></div><section class="slide" id="how-to-overview"><h2>How to Make a Deck</h2><ol><li><h3>Write Slides</h3><p>Slide content is simple&nbsp;HTML.</p></li><li><h3>Choose Themes</h3><p>One for slide styles and one for deck&nbsp;transitions.</p></li><li><h3>Include Extensions</h3><p>Add extra functionality to your deck, or leave it stripped&nbsp;down.</p></li></ol></section><section class="slide" id="markup"><h2>The Markup</h2><p>Slides are just HTML elements with a class of<code>slide</code>.</p><pre><code>&lt;section class=&quot;slide&quot;&gt;
+       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html;charset=UTF-8" http-equiv="content-type" /><title>Getting Started with deck.js</title><meta charset="utf-8" /><meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" /><meta content="width=1024, user-scalable=no" name="viewport" /><meta content="A jQuery library for modern HTML presentations" name="description" /><meta content="Caleb Troughton" name="author" /><link href="deck/core/deck.core.css" rel="stylesheet" /><link href="deck/core/deck.core.css" rel="stylesheet" /><link href="deck/extensions/goto/deck.goto.css" rel="stylesheet" /><link href="deck/extensions/menu/deck.menu.css" rel="stylesheet" /><link href="deck/extensions/navigation/deck.navigation.css" rel="stylesheet" /><link href="deck/extensions/status/deck.status.css" rel="stylesheet" /><link href="deck/extensions/hash/deck.hash.css" rel="stylesheet" /><link href="deck/extensions/scale/deck.scale.css" rel="stylesheet" /><link href="deck/themes/style/web-2.0.css" id="style-theme-link" rel="stylesheet" /><link href="deck/themes/transition/horizontal-slide.css" id="transition-theme-link" rel="stylesheet" /><link href="deck/introduction/introduction.css" rel="stylesheet" /><script src="deck/modernizr.custom.js"></script></head><body class="deck-container"><div class="theme-picker"><h2>Themes</h2><label for="style-themes">Style:</label><select id="style-themes"><option selected="selected" value="deck/themes/style/web-2.0.css">Web 2.0</option><option value="deck/themes/style/swiss.css">Swiss</option><option value="deck/themes/style/neon.css">Neon</option><option value="">None</option></select><label for="transition-themes">Transition:</label><select id="transition-themes"><option selected="selected" value="deck/themes/transition/horizontal-slide.css">Horizontal Slide</option><option value="deck/themes/transition/vertical-slide.css">Vertical Slide</option><option value="deck/themes/transition/fade.css">Fade</option><option value="">None</option></select></div><section class="slide" id="how-to-overview"><h2>How to Make a Deck</h2><ol><li><h3>Write Slides</h3><p>Slide content is simple&nbsp;HTML.</p></li><li><h3>Choose Themes</h3><p>One for slide styles and one for deck&nbsp;transitions.</p></li><li><h3>Include Extensions</h3><p>Add extra functionality to your deck, or leave it stripped&nbsp;down.</p></li></ol></section><section class="slide" id="markup"><h2>The Markup</h2><p>Slides are just HTML elements with a class of<code>slide</code>.</p><pre><code>&lt;section class=&quot;slide&quot;&gt;
 &lt;h2&gt;How to Make a Deck&lt;/h2&gt;
 &lt;ol&gt;
 &lt;li&gt;

diff --git a/ruby_for_beginners.html b/ruby_for_beginners.html
@@ -19,7 +19,7 @@
     <script src="deck/modernizr.custom.js"></script>
   </head>
   <body class="deck-container">
-    <div class="theme-menu">
+    <div class="theme-picker">
       <h2>Themes</h2>
       <label for="style-themes">Style:</label>
       <select id="style-themes">

diff --git a/teacher_training.html b/teacher_training.html
@@ -19,7 +19,7 @@
     <script src="deck/modernizr.custom.js"></script>
   </head>
   <body class="deck-container">
-    <div class="theme-menu">
+    <div class="theme-picker">
       <h2>Themes</h2>
       <label for="style-themes">Style:</label>
       <select id="style-themes">