slideshow 0.9.5 → 0.9.6

data/History.rdoc

@@ -1,3 +1,15 @@
+=== 0.9.6 / 2010-07-18
+
+* Update builtin S6 blank templates (adding autoplay, custom transitions, custom title selector, and more)
+
+=== 0.9.5 / 2010-07-14
+
+* Minor fix (for custom converter methods)
+
+=== 0.9.4 / 2010-07-14
+
+* Added support for custom converter methods (for Markdown processing)
+
 === 0.9.3 / 2010-07-13
 
 * Added support for pandoc-ruby (for Markdown processing); skip %-filters; break slides using div/h1 rule [Thanks David Sanson]

data/Manifest.txt

@@ -31,11 +31,11 @@ lib/slideshow/textile.rb
 templates/s6.txt
 templates/s6.txt.gen
 templates/s6/jquery.js
-templates/s6/outline.css
+templates/s6/jquery.microsoft.js
+templates/s6/jquery.slideshow.js
 templates/s6/print.css
-templates/s6/slides.core.js
-templates/s6/slides.css
-templates/s6/slides.js
+templates/s6/projection.css
+templates/s6/screen.css
 templates/slides.html.erb
 templates/slides.pdf.html.erb
 templates/style.css.erb

data/lib/slideshow.rb

@@ -51,7 +51,7 @@ require 'slideshow/filters/slide_filter'
 
 module Slideshow
 
-  VERSION = '0.9.5'
+  VERSION = '0.9.6'
 
   # version string for generator meta tag (includes ruby version)
   def Slideshow.generator

data/lib/slideshow/markdown.rb

@@ -29,7 +29,7 @@ module Slideshow
     content = content.gsub(/class="incremental"/,'class="step"')
     content = content.to_a[13..-1].join # remove the layout div
   end
-
+    
   def rdiscount_to_html( content )
     RDiscount.new( content ).to_html
   end

data/templates/s6.txt

@@ -10,15 +10,15 @@ __file__.css    style.css.erb
 
 # styles
 
-s6/outline.css
+s6/projection.css
 s6/print.css
-s6/slides.css
+s6/screen.css
 
 # javascript machinery
 
 s6/jquery.js
-s6/slides.js
-s6/slides.core.js
+s6/jquery.microsoft.js
+s6/jquery.slideshow.js
 
 # template for pdf generation
 # -- use html-to-pdf tool (such as wkhtmltopdf, prince, etc) to generate pdf

data/templates/s6.txt.gen

@@ -6,9 +6,14 @@ slides.html.erb
 slides.pdf.html.erb
 style.css.erb
 
-s6/outline.css
+# styles
+
+s6/projection.css
 s6/print.css
-s6/slides.css
+s6/screen.css
+
+# javascript machinery
+
 s6/jquery.js
-s6/slides.core.js
-s6/slides.js
+s6/jquery.microsoft.js
+s6/jquery.slideshow.js

data/templates/s6/jquery.microsoft.js

@@ -0,0 +1,31 @@
+
+
+$(document).ready( function() {
+
+    // 1) remove all content 
+    $( 'body > *' ).remove();
+          
+    // 2) show banner  
+    $( "<div>" ).html(
+       "<p>"
+       + "Microsoft's Internet Explorer browser has no built-in vector graphics machinery "
+       + "required for 'loss-free' gradient background themes."
+       + "</p>"       
+       + "<p>"
+       + "Please <span style='background: yellow'>upgrade to a better browser</span> "
+       + "such as <a href='http://getfirefox.com'>Firefox</a>, <a href='http://www.opera.com/download'>Opera</a>, "
+       + "<a href='http://google.com/chrome'>Chrome</a>, <a href='http://apple.com/safari/download'>Safari</a> or others "
+       + "with built-in vector graphics machinery and much more. "
+       + "(Learn more or post questions or comments "
+       + "at the <a href='http://slideshow.rubyforge.org'>Slide Show (S9)</a> project site. Thanks!)"
+       + "</p>"      
+     )
+     .css( {   
+       border: 'red solid thick',
+       padding: '1em',
+       fontFamily: 'sans-serif',
+       fontWeight: 'bold' } )
+     .prependTo( 'body' );    
+  }
+);
+

data/templates/s6/jquery.slideshow.js

@@ -0,0 +1,466 @@
+
+var Slideshow = {};
+
+
+/************************************
+ * lets you define your own "global" transition function
+ *   passes in a reference to from and to slide wrapped in jQuery wrapper
+ */
+
+Slideshow.transition = function( $from, $to ) {
+  $from.hide();
+  $to.show();
+}
+
+/***********************
+ * sample custom transition using scrollUp effect
+ * inspired by Karl Swedberg's Scroll Up Headline Reader jQuery Tutorial[1]
+ * [1] http://docs.jquery.com/Tutorials:Scroll_Up_Headline_Reader
+ */
+function transitionScrollUp( $from, $to ) {   
+  var cheight = $from.outerHeight();
+
+  // hide scrollbar during animation
+  $( 'body' ).css( 'overflow-y', 'hidden' );
+
+  $to.css( 'top', cheight+'px' );
+  $to.show();
+
+  $from.animate( {top: -cheight}, 'slow' );
+  $to.animate( {top: 0}, 'slow', function() {
+     $from.hide().css( 'top', '0px');
+
+     // restore possible scrollbar 
+     $( 'body' ).css( 'overflow-y', 'auto' );
+  }); 
+}
+
+Slideshow.init = function( options ) {
+
+  var settings = $.extend({
+     mode              : 'slideshow', // slideshow | outline | autoplay
+     projectionStyleId : '#styleProjection',
+	   screenStyleId     : '#styleScreen',
+     titleSelector     : 'h1',      
+     slideSelector     : '.slide',   // dummy (not yet working)
+     stepSelector      : '.step',    // dummy (not yet working)
+     debug             :  false
+  }, options || {});
+
+  settings.isProjection = true; // are we in projection (slideshow) mode (in contrast to screen (outline) mode)?     
+  settings.snum = 1;      // current slide # (non-zero based index e.g. starting with 1)
+  settings.smax = 1;      // max number of slides 
+  settings.incpos = 0;    // current step in slide  
+  settings.steps  = null;
+  settings.autoplayInterval = null; 
+   
+  function debug( msg ) 
+  {
+    if( window.console && window.console.log )
+      window.console.log( '[debug] ' + msg ); 
+  }   
+
+  function showHide( action )
+  {
+    var $navLinks = $( '#navLinks' )  
+       
+    switch( action ) {
+      case 's': $navLinks.css( 'visibility', 'visible' );  break;
+      case 'h': $navLinks.css( 'visibility', 'hidden' );   break;
+      case 'c':  /* toggle control panel */
+          if( $navLinks.css( 'visibility' ) != 'visible' )
+             $navLinks.css( 'visibility', 'visible' );
+          else
+             $navLinks.css( 'visibility', 'hidden' );
+          break; 
+    }
+  }  
+   
+  function updateCurrentSlideCounter()
+  { 
+      $( '#currentSlide' ).html( '<a id="plink" href="">'
+         + '<span id="csHere">' + settings.snum + '<\/span> '
+         + '<span id="csSep">\/<\/span> ' 
+         + '<span id="csTotal">' + settings.smax + '<\/span>'
+         + '<\/a>' );
+  }
+  
+  function updateJumpList()
+  {
+      $('#jumplist').get(0).selectedIndex = (settings.snum-1);
+  }
+  
+  function updatePermaLink()
+  {
+      $('#plink').get(0).href = window.location.pathname + '#slide' + settings.snum;
+      
+      // todo: unify hash marks??; use #1 for div ids instead of #slide1? 
+      window.location.hash = '#'+settings.snum;
+  }
+
+  function goTo( target )
+  {
+       if( target > settings.smax || target == settings.snum ) return;
+       go( target - settings.snum );
+  }
+ 
+  function go( dir )
+  {
+    debug( 'go: ' + dir );
+  
+    if( dir == 0 ) return;  /* same slide; nothing to do */
+
+    var cid = '#slide' + settings.snum;   /* current slide (selector) id */
+    var csteps = settings.steps[settings.snum-1];  /* current slide steps array */
+
+    /* remove all step and stepcurrent classes from current slide */
+   if( csteps.length > 0) {
+     $( csteps ).each( function() {
+       $(this).removeClass( 'step' ).removeClass( 'stepcurrent' );
+     } );
+   }
+
+  /* set snum to next slide */
+  settings.snum += dir;
+  if( settings.snum > settings.smax ) settings.snum = settings.smax;
+  if( settings.snum < 1 ) settings.snum = 1;
+  
+  var nid = '#slide' + settings.snum;  /* next slide (selector) id */
+  var nsteps = settings.steps[settings.snum-1]; /* next slide steps array */															  
+  
+	if( dir < 0 ) /* go backwards? */
+	{
+		settings.incpos = nsteps.length;
+		/* mark last step as current step */
+		if( nsteps.length > 0 ) 
+			$( nsteps[settings.incpos-1] ).addClass( 'stepcurrent' );		
+	}
+	else /* go forwards? */
+	{
+		settings.incpos = 0;
+	  if( nsteps.length > 0 ) {
+		  $( nsteps ).each( function() {
+				$(this).addClass( 'step' ).removeClass( 'stepcurrent' );
+			} );
+		}
+	}	
+	
+  if( !(cid == nid) ) {
+    debug( "transition from " + cid + " to " + nid );
+    Slideshow.transition( $( cid ), $( nid ) );
+  }
+  
+  updateJumpList();
+  updateCurrentSlideCounter();
+  updatePermaLink(); 
+}
+
+ function subgo( dir )
+ {
+	debug( 'subgo: ' + dir + ', incpos before: ' + settings.incpos + ', after: ' + (settings.incpos+dir) );
+	
+	var csteps = settings.steps[settings.snum-1]; /* current slide steps array */
+	
+	if( dir > 0)
+  {  /* go forward? */
+		if( settings.incpos > 0 )
+      $( csteps[settings.incpos-1] ).removeClass( 'stepcurrent' );
+		$( csteps[settings.incpos] ).removeClass( 'step').addClass( 'stepcurrent' ); 
+		settings.incpos++;
+	}
+  else
+  { /* go backwards? */
+		settings.incpos--;
+		$( csteps[settings.incpos] ).removeClass( 'stepcurrent' ).addClass( 'step' );
+		if( settings.incpos > 0 )
+      $( csteps[settings.incpos-1] ).addClass( 'stepcurrent' );
+	}
+}
+
+
+function notOperaFix()
+{          
+   $( settings.projectionStyleId ).attr( 'media','screen' );
+              
+   var styleScreen = $( settings.screenStyleId ).get(0);
+   styleScreen.disabled = true;
+}    
+
+
+function toggle()
+{
+  // toggle between projection (slide show) mode
+  //   and screen (outline) mode
+
+  // get stylesheets 
+	var styleProjection  = $( settings.projectionStyleId ).get(0);
+	var styleScreen      = $( settings.screenStyleId ).get(0);
+	
+  if( !styleProjection.disabled )
+  {
+		styleProjection.disabled = true;
+		styleScreen.disabled     = false;
+		settings.isProjection    = false;
+    $('.slide').each( function() { $(this).show(); } );
+	}
+  else
+  {
+		styleProjection.disabled = false;
+		styleScreen.disabled     = true;
+		settings.isProjection    = true;
+    $('.slide').each( function(i) {
+      if( i == (settings.snum-1) )
+        $(this).show();
+      else
+        $(this).hide();
+    });
+	}
+}
+ 
+   function populateJumpList() {
+    
+     var list = $('#jumplist').get(0);
+    
+     $( '.slide' ).each( function(i) {
+       var text = $(this).find( settings.titleSelector ).text();
+       list.options[list.length] = new Option( (i+1)+' : '+ text, (i+1) );
+     });
+   } 
+   
+   function createControls()
+   {	  
+  
+     $( '.layout' )
+	    .append( "<div id='controls'>" )
+	    .append( "<div id='currentSlide'>" );
+ 
+      var $controls = $( '#controls' )
+    
+   	 $controls.html(  '<div id="navLinks">' 
+	    + '<a accesskey="t" id="toggle" href="#">&#216;<\/a>' 
+	    + '<a accesskey="z" id="prev" href="#">&laquo;<\/a>' 
+	    + '<a accesskey="x" id="next" href="#">&raquo;<\/a>' 
+	    + '<div id="navList"><select id="jumplist" /><\/div>' 
+	    + '<\/div>' ); 
+      
+      $controls.hover( function() { showHide('s') }, function() { showHide('h') });
+      $('#toggle').click( function() { toggle(); } );
+      $('#prev').click( function() { go(-1); } );
+      $('#next').click( function() { go(1); } );
+       
+      $('#jumplist').change( function() { goTo( parseInt( $( '#jumplist' ).val() )); } );
+  	
+      populateJumpList();     
+      updateCurrentSlideCounter();
+      updatePermaLink(); 
+   }
+      
+  function toggleFooter()
+  {
+     $( '#footer').toggle(); 
+  }
+  
+  
+  function keys(key)
+  {
+	if (!key) {
+		key = event;
+		key.which = key.keyCode;
+	}
+	if (key.which == 84) {
+		toggle();
+		return;
+	}
+	if( settings.isProjection ) {
+		switch (key.which) {
+			case 32: // spacebar
+			case 34: // page down
+			case 39: // rightkey
+			case 40: // downkey
+				
+        var csteps = settings.steps[settings.snum-1]; /* current slide steps array */
+        
+				if ( !csteps || settings.incpos >= csteps.length ) {
+					go(1);
+				} else {
+					subgo(1);
+				}
+				break;
+			case 33: // page up
+			case 37: // leftkey
+			case 38: // upkey
+					
+					if( !settings.steps[settings.snum-1] || settings.incpos <= 0 ) {
+					  go(-1);
+				  } else {
+					  subgo(-1);
+					}
+				  break;
+      case 36: // home
+				goTo(1);
+				break;
+			case 35: // end
+				goTo(settings.smax);
+				break;   
+			case 67: // c
+				showHide('c');
+				break;
+      case 65: //a
+			case 80: //p
+			case 83: //s
+				toggleAutoplay();
+				break;
+      case 70: //f
+        toggleFooter();
+        break;
+		}
+	}
+}
+
+function autoplay()
+{
+	// suspend autoplay in outline view (just slideshow view)
+	if( !settings.isProjection )
+	  return;
+
+     // next slide/step, please
+     var csteps = settings.steps[settings.snum-1]; // current slide steps array 
+     if( !csteps || settings.incpos >= csteps.length ) {
+			  if( settings.snum >= settings.smax )
+           goTo( 1 );   // reached end of show? start with 1st slide again (for endless cycle)
+        else
+           go(1);
+	   }
+     else {
+			  subgo(1);
+	   }
+}
+
+	 
+function toggleAutoplay()
+{
+  if( settings.autoplayInterval )
+	{
+		clearInterval( settings.autoplayInterval );
+		settings.autoplayInterval = null;
+	}
+	else
+	{
+	   settings.autoplayInterval = setInterval ( autoplay, 2000 );
+	}
+}
+
+
+
+function collectStepsWorker(obj) {
+	
+	var steps = new Array();
+	if( !obj ) 
+		return steps;
+	
+	$(obj).children().each( function() {
+	  if( $(this).hasClass( 'step' ) ) {
+			
+			debug( 'step found for ' + this.tagName );
+			$(this).removeClass( 'step' );
+
+			/* don't add enclosing list; instead add step class to all list items/children */
+			if( $(this).is( 'ol,ul' ) ) {
+				debug( '  ol or ul found; adding auto steps' );
+				$(this).children().addClass( 'step' );
+			}
+			else
+			{
+				steps.push( this )
+			}
+		}
+	 	
+		steps = steps.concat( collectStepsWorker(this) );
+	});
+	
+  return steps;
+}
+
+function collectSteps() {
+	
+	var steps = new Array();
+
+  $slides.each(	function(i) {
+		debug ( 'collectSteps for ' + this.id + ':' );
+		steps[i] = collectStepsWorker( this );
+  });
+	
+	$( steps ).each( function(i) {
+	  debug( 'slide ' + (i+1) + ': found ' + this.length + ' steps' );	
+	});
+       
+  return steps;
+}
+
+
+function addClicker() {
+    // if you click on heading of slide -> go to next slide (or next step)
+   
+   $( settings.titleSelector, $slides ).click( function() { 
+      if( !settings.isProjection )  // suspend clicker in outline view (just slideshow view)
+	       return;
+     
+      var csteps = settings.steps[settings.snum-1]; // current slide steps array 
+			if ( !csteps || settings.incpos >= csteps.length ) 
+				 go(1);
+			else 
+				 subgo(1);
+   } ); 
+}
+
+function addSlideIds() {
+     $slides.each( function(i) {
+        this.id = 'slide'+(i+1);
+     });
+   }
+   
+   // init code here
+   
+    // store possible slidenumber from hash */
+	  // todo: use regex to extract number
+	  //    might be #slide1 or just #1
+	 
+	  var gotoSlideNum = parseInt( window.location.hash.substring(1) );
+	  debug( "gotoSlideNum=" + gotoSlideNum );
+  
+   var $slides = $( '.slide' );  
+   settings.smax = $slides.length;
+   
+   addSlideIds();
+   settings.steps = collectSteps();
+     
+   createControls();
+   
+   addClicker();
+         
+   /* opera is the only browser currently supporting css projection mode */ 
+   /* if( !$.browser.opera ) */
+   notOperaFix();
+
+   if( !isNaN( gotoSlideNum ))
+   {
+	    debug( "restoring slide on (re)load #: " + gotoSlideNum );
+	    goTo( gotoSlideNum );
+	 }
+	           
+   if( settings.mode == 'outline' ) 
+     toggle();
+   else if( settings.mode == 'autoplay' )
+     toggleAutoplay();
+     
+   if( settings.debug == true )
+   {
+      $( '#header' ).css( 'background', '#FCC' );
+      $( '#footer' ).css( 'background', '#CCF' );
+      $( '#controls' ).css( 'background', '#BBD' );
+      $( '#currentSlide' ).css( 'background', '#FFC' ); 
+   }
+                
+   document.onkeyup = keys;
+
+} // end Slideshow

data/templates/s6/print.css

@@ -1 +1 @@
-/* The following rule is necessary to have all slides appear in print! DO NOT REMOVE IT! */
+/*********************************
 * CSS @media print rules (not projection or screen)
 */
 * Make sure all slides are visible (to make them all appear in prin)
 */
         display: block !important;
       }
 * Extra styling for first slide (title slide)
 */
     border-bottom: 1px dotted silver;
   }
 * Turn on print-specific stuff/classes
 */
 * Turn off online (screen/projection)-specific stuff/classes
 */
 * The following rule keeps the layout stuff out of print.
 * Remove at your own risk!
 */

data/templates/s6/projection.css

@@ -0,0 +1,109 @@
+/*********************************
+ * CSS @media projection rules (not print or screen)
+ *
+ * 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
+ * 2) screen     -> outline mode (display all slides-at-once on screen) 
+ * 3) print      -> print (and print preview)
+ *
+ * toogle between slideshow/outline mode using t-key
+ */
+
+html,
+body,
+.presentation { margin: 0; padding: 0; }
+
+
+.slide { display: none; 
+         position: absolute;
+         top: 0; left: 0; 
+         margin: 0;
+         padding: 2% 4% 0% 4%;      /* css note: order is => top right bottom left  */
+         width: 92%; height: 95%;    /* css note: to get to 100% add padding/border/margin */
+         overflow-x: hidden; overflow-y: auto;
+         z-index: 2;
+       }
+
+#slide1 { display: block; }
+
+.notes  { display: none; } /* handout notes/note (use note? handout? notes? */
+
+
+/********* format layout block
+ *
+ *  .layout
+ *    > #header
+ *    > #footer
+ *    > #controls      (holding navigation controls)
+ *       > #navLinks
+ *          > #toggle
+ *          > #navList
+ *            > #jumplist
+ *    > #currentSlide  (e.g. 1/7)
+ *
+ */
+
+.layout { display: block; }
+
+#header {  position: fixed;
+           top: 0; left: 0;
+           width: 100%; height: 0.5em;
+           z-index: 1;
+        }
+   
+#footer {  position: fixed;
+           top: auto; bottom: 0;
+           padding: 1em 0;   /* css note: order is => 1st top,bottom; 2nd right,left */
+           width: 100%; height: 1em;
+           z-index: 5;
+    
+           /* todo: move font-size and font-style to blank.css */    
+           font-size: 100%; font-weight: bold; 
+        }
+  
+/* todo: move font-size and font-style to blank.css */
+
+  #footer h1 { display: block; margin: 0; padding: 0 1em; font-size: 0.5em; }
+  #footer h2 { display: block; margin: 0; padding: 0 1em; font-size: 0.5em; font-style: italic; }
+
+
+/*************************
+ * format for navigation controls 
+ */
+
+
+#controls { position: fixed;
+              left: 60%; bottom: 0;
+              width: 40%;
+              z-index: 100;
+              text-align: right;
+              font: bold 1.2em Verdana, Helvetica, sans-serif;
+            }
+  
+  #controls :focus { outline: 1px dotted white;}
+  
+  #controls #navLinks { text-align: right; margin: 0; visibility: hidden; } 
+   
+  #controls #navLinks a { padding: 0; margin: 0 0.5em; cursor: pointer; border: none; }
+  
+  #controls #navLinks :link,
+  #controls #navLinks :visited {text-decoration: none; }
+
+  #controls #navList #jumplist { background: white; color: black; }
+
+/*************************
+ * format for 
+ * currentSlide block ( e.g. 2/20 )
+ */
+
+#currentSlide { position: fixed;
+                left: 45%; bottom: 1em;
+                width: 10%;
+                z-index: 10;
+                text-align: center;
+                font-size: 0.8em;
+              }
+
+#currentSlide :link,
+#currentSlide :visited {  text-decoration: none; }
+
+

data/templates/s6/screen.css

@@ -0,0 +1,48 @@
+/*********************************
+ * CSS @media screen (not projection or print)
+ *
+ * 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
+ * 2) screen     -> outline mode (display all slides-at-once on screen) 
+ * 3) print      -> print (and print preview)
+ *
+ * toogle between slideshow/outline mode using t-key
+ */
+
+
+/****
+ * hide layout stuff (header, footer, navLinks, navList etc.)
+ */
+
+.layout * { display: none; }
+
+/*************
+ * make toggle button visible and reposition to upper right corner *
+ * note: toogle button is nested inside #controls > #navLinks > #toogle
+ */
+
+#controls,
+#navLinks,
+#toggle    { display: block;
+             visibility: visible;
+             margin: 0; padding: 0;
+           }
+
+#toggle { position: fixed;
+          top: 0; right: 0;
+          padding: 0.5em; 
+          border-left: 1px solid;
+          border-bottom: 1px solid;
+          background: white;
+        }
+
+
+/*************
+ * making the outline look pretty-ish
+ */
+
+#slide1, #slide1 h1, #slide1 h2, #slide1 h3, #slide1 h4 {border: none; margin: 0;}
+#slide1 h1 {padding-top: 1.5em;}
+
+.slide { margin: 1.5em 0 0; border-top: 1px solid #888; }
+.slide h1 { border-bottom: 1px solid #AAA; }
+

data/templates/slides.html.erb

@@ -7,55 +7,39 @@
 <meta name="generator" content="<%= @headers['generator'] %>">
 <meta name="author"    content="<%= @headers['author']%>" >
 
-<!-- S6 configuration parameters -->
-<meta name="defaultView" content="slideshow">
-
 <!-- S6 style sheet links -->
-<link rel="stylesheet" href="<%= "#{@name}.css" %>" type="text/css" media="projection" id="slideProj">
-<link rel="stylesheet" href="s6/outline.css" type="text/css" media="screen" id="outlineStyle">
-<link rel="stylesheet" href="s6/print.css" type="text/css" media="print" id="slidePrint">
+<link rel="stylesheet" href="<%= "#{@name}.css" %>" type="text/css" media="projection" id="styleProjection">
+<link rel="stylesheet" href="s6/screen.css"         type="text/css" media="screen"     id="styleScreen">
+<link rel="stylesheet" href="s6/print.css"          type="text/css" media="print">
 
 <!-- S6 JS -->
-<script src="s6/jquery.js" type="text/javascript"></script>
-<script src="s6/slides.js" type="text/javascript"></script>
-
+<script src="s6/jquery.js"></script>
+<script src="s6/jquery.slideshow.js"></script>
+<script>
+  $(document).ready( function() {
+    Slideshow.init();
+  } );
 
-<script type="text/javascript">
   <%= content_for :js %>
 </script>
 
+<!-- Better Browser Banner for Microsoft Internet Explorer (IE) -->
+<!--[if IE]>
+<script src="s6/jquery.microsoft.js"></script>
+<![endif]-->
+
 <%= content_for :head %>
 
 </head>
 <body>
 
 <div class="layout"> 
-  <div id="controls"><!-- DO NOT EDIT --></div>
-  <div id="currentSlide"><!-- DO NOT EDIT --></div>
   <div id="header"></div>
   <div id="footer">
     <h1><%= @headers['footer'] %></h1>
     <h2><%= @headers['subfooter'] %></h2>
   </div>
-
-   <div id='microsoft'>       
-        <p>
-          Microsoft's Internet Explorer browser
-            has no built-in vector graphics machinery
-             required for "loss-free" gradient background themes.
-        </p>        
-        <p>
-          Please upgrade to a better browser
-           such as <a href='http://getfirefox.com'>Firefox</a>, <a href='http://www.opera.com/download'>Opera</a>,
-            <a href='http://google.com/chrome'>Chrome</a>, <a href='http://apple.com/safari/download'>Safari</a> or others
-            with built-in vector graphics machinery and much more.
-          
-          (Learn more or post questions or comments
-              at the <a href='http://slideshow.rubyforge.org'>Slide Show (S9)</a>
-            project site. Thanks!)
-        </p>             
-   </div>
-</div><!-- layout -->
+</div>
 
 <div class="presentation">
    

data/templates/style.css.erb

@@ -1,4 +1,4 @@
-@import url(s6/slides.css); /* required to make the slide show run at all */
+@import url(s6/projection.css); /* required to make the slide show run at all */
      
 html, body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }
 

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: slideshow
 version: !ruby/object:Gem::Version 
-  hash: 49
+  hash: 55
   prerelease: false
   segments: 
   - 0
   - 9
-  - 5
-  version: 0.9.5
+  - 6
+  version: 0.9.6
 platform: ruby
 authors: 
 - Gerald Bauer
@@ -15,7 +15,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-07-14 00:00:00 +02:00
+date: 2010-07-18 00:00:00 +02:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -129,11 +129,11 @@ files:
 - templates/s6.txt
 - templates/s6.txt.gen
 - templates/s6/jquery.js
-- templates/s6/outline.css
+- templates/s6/jquery.microsoft.js
+- templates/s6/jquery.slideshow.js
 - templates/s6/print.css
-- templates/s6/slides.core.js
-- templates/s6/slides.css
-- templates/s6/slides.js
+- templates/s6/projection.css
+- templates/s6/screen.css
 - templates/slides.html.erb
 - templates/slides.pdf.html.erb
 - templates/style.css.erb

data/templates/s6/outline.css

@@ -1,27 +0,0 @@
-/* don't change this unless you want the layout stuff to show up in the outline view! */
-
-.layout > *, #controls *, #footer *, #navLinks * { display: none; }
-
-#controls, #navLinks, #toggle {
-  display: block; visibility: visible; margin: 0; padding: 0;}
-
-#toggle { position: fixed; top: 0; right: 0; padding: 0.5em; }
-#toggle {border: 1px solid; border-width: 0 0 1px 1px; background: #FFF;}
-
-
-/* making the outline look pretty-ish */
-
-#slide1, #slide1 h1, #slide1 h2, #slide1 h3, #slide1 h4 {border: none; margin: 0;}
-#slide1 h1 {padding-top: 1.5em;}
-
-.slide { margin: 1.5em 0 0; border-top: 1px solid #888; }
-.slide h1 { border-bottom: 1px solid #AAA; }
-
-#microsoft {
-        display: none;
-        border: red solid thick;
-        padding: 1em;
-        font-family: sans-serif;
-        font-weight: bold;
-        margin-bottom: 2em;
-}

data/templates/s6/slides.core.js

@@ -1,289 +0,0 @@
-   var snum = 1;      /* current slide # (non-zero based index e.g. starting with 1) */
-   var smax = 1;      /* max number of slides */
-   var incpos = 0;    /* current step in slide */ 
-   var s6mode = true; /* are we in slide mode (in contrast to outline mode)? */ 
-   var defaultView = 'slideshow'; /* slideshow | outline */
-   
-
- function debug( msg )	 
- {
-	 if( window.console )
-           console.log( '[debug] ' + msg ); 
- }	
-	 
- function showHide(action)
- {
-	switch( action ) {
-	  case 's': $( '#navLinks' ).css( 'visibility', 'visible' );  break;
-	  case 'h': $( '#navLinks' ).css( 'visibility', 'hidden' );   break;
-    case 'c':  /* toggle control panel */
-      if( $( '#navLinks' ).css( 'visibility' ) != 'visible' )
-         $( '#navLinks' ).css( 'visibility', 'visible' );
-      else
-         $( '#navLinks' ).css( 'visibility', 'hidden' );
-	    break; 
-  }
- }  
-   
-  function updateCurrentSlideCounter() {
-	 
-    $( '#currentSlide' ).html( '<a id="plink" href="">' + 
-		     '<span id="csHere">' + snum + '<\/span> ' + 
-		     '<span id="csSep">\/<\/span> ' + 
-		     '<span id="csTotal">' + smax + '<\/span>' +
-		     '<\/a>' );		
-  }    
-   
-
-  function updatePermaLink() {
-	   $('#plink').get(0).href = window.location.pathname + '#slide' + snum;
-           
-           /* todo: unify hash marks??; use #1 for div ids instead of #slide1? */
-           window.location.hash = '#'+snum;
-  }
-
- function goTo( target ) {
-	 if( target > smax || target == snum ) return;
-	 go( target - snum );
- }
- 
- function go( dir ) {
-
-	debug( 'go: ' + dir );
-  
-	if( dir == 0 ) return;  /* same slide; nothing to do */
-	
-	var cid = '#slide' + snum;   /* current slide (selector) id */
-  var csteps = steps[snum-1];  /* current slide steps array */
-															   
-  /* remove all step and stepcurrent classes from current slide */
-	if( csteps.length > 0) {
-		$( csteps ).each( function() {
-			$( this ).removeClass( 'step' ).removeClass( 'stepcurrent' );
-		} );
-	}
-
-  /* set snum to next slide */
-	snum += dir;
-	if( snum > smax ) snum = smax;
-	if (snum < 1) snum = 1;
-  
-	var nid = '#slide' + snum;  /* next slide (selector) id */
-  var nsteps = steps[snum-1]; /* next slide steps array */															  
-  
-	if( dir < 0 ) /* go backwards? */
-	{
-		incpos = nsteps.length;
-		/* mark last step as current step */
-		if( nsteps.length > 0 ) 
-			$( nsteps[incpos-1] ).addClass( 'stepcurrent' );		
-	}
-	else /* go forwards? */
-	{
-		incpos = 0;
-	  if( nsteps.length > 0 ) {
-		  $( nsteps ).each( function() {
-				$(this).addClass( 'step' ).removeClass( 'stepcurrent' );
-			} );
-		}
-	}	
-	
-  $( cid ).hide();
-  $( nid ).show();
-  
-  $('#jumplist').get(0).selectedIndex = (snum-1);
-  updateCurrentSlideCounter();
-  updatePermaLink(); 
-}
-
- function subgo( dir ) {
-	
-	debug( 'subgo: ' + dir + ', incpos before: ' + incpos + ', after: ' + (incpos+dir) );
-	
-	var csteps = steps[snum-1]; /* current slide steps array */
-	
-	if( dir > 0) {  /* go forward? */
-		if( incpos > 0 ) $( csteps[incpos-1] ).removeClass( 'stepcurrent' );
-		$( csteps[incpos] ).removeClass( 'step').addClass( 'stepcurrent' ); 
-		incpos++;
-	} else { /* go backwards? */
-		incpos--;
-		$( csteps[incpos] ).removeClass( 'stepcurrent' ).addClass( 'step' );
-		if( incpos > 0 ) $( csteps[incpos-1] ).addClass( 'stepcurrent' );
-	}
-}
-
-
-
-function toggle() {
- 
-  /* get stylesheets */
-	var slides  = $('#slideProj').get(0);
-	var outline = $('#outlineStyle').get(0);
-	
-  if( !slides.disabled ) {
-		slides.disabled = true;
-		outline.disabled = false;
-		s6mode = false;
-    $('.slide').each( function() { $(this).show(); } );
-	} else {
-		slides.disabled = false;
-		outline.disabled = true;
-		s6mode = true;
-    $('.slide').each( function(i) {
-      if( i == (snum-1) )
-        $(this).show();
-      else
-        $(this).hide();
-    });
-	}
-}
- 
- 
-   function populateJumpList() {
-    
-     var list = $('#jumplist').get(0);
-    
-     $( '.slide' ).each( function(i) {              
-       list.options[list.length] = new Option( (i+1)+' : '+ $(this).find('h1').text(), (i+1) );
-     });
-   } 
-   
-   function createControls() {	  
-  
-   	 $('#controls').html(  '<div id="navLinks">' +
-	'<a accesskey="t" id="toggle" href="#">&#216;<\/a>' +
-	'<a accesskey="z" id="prev" href="#">&laquo;<\/a>' +
-	'<a accesskey="x" id="next" href="#">&raquo;<\/a>' +
-	'<div id="navList"><select id="jumplist" /><\/div>' +
-	'<\/div>' ); 
-      
-      $('#controls').mouseover( function() { showHide('s'); } );
-      $('#controls').mouseout( function()  { showHide('h'); } );
-      $('#toggle').click( function() { toggle(); } );
-      $('#prev').click( function() { go(-1); } );
-      $('#next').click( function() { go(1); } );
-      
-      $('#jumplist').change( function() { goTo( parseInt( $( '#jumplist' ).val() )); } );
-  	
-      populateJumpList();     
-      updateCurrentSlideCounter();
-      updatePermaLink(); 
-   }
-   
-   function addSlideIds() {
-     $( '.slide' ).each( function(i) {
-       $(this).attr( 'id', 'slide'+(i+1) );
-     });
-       
-     smax = $( '.slide' ).length;
-   }
-   
-   function notOperaFix() {
-	     
-	     $('#slideProj').attr( 'media','screen' );
-              
-	     var outline = $('#outlineStyle').get(0);
-	     outline.disabled = true;
-    }    
-     
-  
-  function defaultCheck() {
-     $( 'meta' ).each( function() {
-        if( $(this).attr( 'name' ) == 'defaultView' )
-          defaultView = $(this).attr( 'content' );
-     } );
-  }
-  
-  function keys(key) {
-	if (!key) {
-		key = event;
-		key.which = key.keyCode;
-	}
-	if (key.which == 84) {
-		toggle();
-		return;
-	}
-	if (s6mode) {
-		switch (key.which) {
-			case 32: // spacebar
-			case 34: // page down
-			case 39: // rightkey
-			case 40: // downkey
-				
-				if (!steps[snum-1] || incpos >= steps[snum-1].length) {
-					go(1);
-				} else {
-					subgo(1);
-				}
-				break;
-			case 33: // page up
-			case 37: // leftkey
-			case 38: // upkey
-					
-					if( !steps[snum-1] || incpos <= 0 ) {
-					  go(-1);
-				  } else {
-					  subgo(-1);
-					}
-				  break;
-      case 36: // home
-				goTo(1);
-				break;
-			case 35: // end
-				goTo(smax);
-				break;   
-			case 67: // c
-				showHide('c');
-				break;
-		}
-	}
-	return false;
-}
-
-
-function collectStepsWorker(obj) {
-	
-	var steps = new Array();
-	if( !obj ) 
-		return steps;
-	
-	$(obj).children().each( function() {
-	  if( $(this).hasClass( 'step' ) ) {
-			
-			debug( 'step found for ' + this.tagName );
-			$(this).removeClass( 'step' );
-
-			/* don't add enclosing list; instead add step class to all list items/children */
-			if( $(this).is( 'ol,ul' ) ) {
-				debug( '  ol or ul found; adding auto steps' );
-				$(this).children().addClass( 'step' );
-			}
-			else
-			{
-				steps.push( this )
-			}
-		}
-	 	
-		steps = steps.concat( collectStepsWorker(this) );
-	});
-	
-  return steps;
-}
-
-function collectSteps() {
-	
-	var steps = new Array();
-
-  $( '.slide' ).each(	function(i) {
-		debug ( $(this).attr( 'id' ) + ':' );
-		steps[i] = collectStepsWorker( this );
-  });
-	
-	$( steps ).each( function(i) {
-	  debug( 'slide ' + (i+1) + ': found ' + this.length + ' steps' );	
-	});
-       
-  return steps;
-}
-

data/templates/s6/slides.css

@@ -1,73 +0,0 @@
- .slide { display: none; }
- #slide1 { display: block; }
- #microsoft { display: none; }
- 
- .slide { position: absolute; }
-  #header, #footer { position: fixed; }
-
- .layout { display: block; }
- .notes  { display: none; } /* handout notes/note (use note? handout? notes? */
-  
-  #header, #footer, .slide { width: 100%; top: 0; left: 0; }
-  #header { top: 0; height: 0.5em; z-index: 1;}
-  
-  #footer { top: auto; bottom: 0; height: 1em; z-index: 5;}
-  #footer { font-size: 100%; font-weight: bold; padding: 1em 0;}
-  #footer h1 { display: block; margin: 0; padding: 0 1em; font-size: 0.5em; }
-  #footer h2 { display: block; margin: 0; padding: 0 1em; font-size: 0.5em; font-style: italic; }
-
-
-
-  #controls { position: fixed; left: 60%; bottom: 0; width: 40%; z-index: 100;
-              text-align: right;
-              font: bold 1.2em Verdana, Helvetica, sans-serif; }
-  
-  #controls :focus { outline: 1px dotted white;}
-  
-  #controls #navLinks { text-align: right; margin: 0; visibility: hidden; } 
-   
-  #controls #navLinks a { padding: 0; margin: 0 0.5em; cursor: pointer; border: none; }
-  
-  #controls #navLinks :link,
-  #controls #navLinks :visited {text-decoration: none; }
-
-  #controls #navList #jumplist { background: white; color: black; }
-
-
-  #currentSlide { position: fixed; width: 10%; left: 45%; bottom: 1em; z-index: 10;}
-  #currentSlide { text-align: center; font-size: 0.8em; }
-  #currentSlide :link,
-  #currentSlide :visited {text-decoration: none; }
-
-.presentation { margin: 0; padding: 0; } 
-.slide { margin: 0 0 0 0; height: 96%; }
-.slide { overflow-x: hidden; overflow-y: auto; }
-.slide { top: 0; width: 92%; padding: 2% 4% 0 4%; z-index: 2;  list-style: none;}
-  
-  /* .step { visibility: hidden; } */
-
-
-html, body { margin: 0; padding: 0; }
-
-
-
-
-/*
-div#header {background: #FCC;}
-div#footer {background: #CCF;}
-div#controls {background: #BBD;}
-div#currentSlide {background: #FFC;}
-*/
-
-
-
-
-
-
-
-
-
-
-
-
-

data/templates/s6/slides.js

@@ -1,59 +0,0 @@
-/* Just an example for an all-in-one convenience include
-   
-   create your own slide.js to include your own extensions and
-    change the startup (document ready) code as needed
-    
-    Tell us about your extentions or changes on the forum. Thank!
-    Find the forum @ http://groups.google.com/group/webslideshow
- */
-
-
-$.ajaxSetup({async: false});
-$.getScript( 's6/slides.core.js' );
-$.ajaxSetup({async: true});
-
-$(document).ready(function(){
-        
-  if( $.browser.msie )
-        {
-          $( '.layout > *').hide();
-          $( '.presentation').hide();
-          
-          $( '#microsoft' ).show();          
-        }
-        else
-        {
-	  
-	  /* store possible slidenumber from hash */
-	  /* todo: use regex to extract number
-	       might be #slide1 or just #1
-	  */
-	  var gotoSlideNum = parseInt( window.location.hash.substring(1) );
-	  debug( "gotoSlideNum=" + gotoSlideNum );
-	  
-         defaultCheck();
-         addSlideIds();
-         createControls();
-         
-         /* opera is the only browser currently supporting css projection mode */ 
-         /* if( !$.browser.opera ) */
-           notOperaFix();
-					 
-	  steps = collectSteps();
-         
-	  if( !isNaN( gotoSlideNum ))
-          {
-	    debug( "restoring slide on (re)load #: " + gotoSlideNum );
-	    goTo( gotoSlideNum );
-	  }
-	  
-	 
-         if( defaultView == 'outline' ) 
-		       toggle();
-          
-	  
-	  
-	   
-         document.onkeyup = keys;
-        }
-     });