Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

update s6 templates

  • Loading branch information...
commit 9391d73e64aa879e34b02610d2dee8541603b001 1 parent cbf5210
@geraldb geraldb authored
View
31 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' );
+ }
+);
+
View
466 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
View
27 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;
-}
View
2  s6/print.css
@@ -1 +1 @@
-/* The following rule is necessary to have all slides appear in print! DO NOT REMOVE IT! */
+/*********************************
View
109 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; }
+
+
View
48 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; }
+
View
289 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;
-}
-
View
73 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;}
-*/
-
-
-
-
-
-
-
-
-
-
-
-
-
View
59 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;
- }
- });
View
8 s6syntax.txt
@@ -5,15 +5,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
# SintaxHighlighter machinery
View
103 slides.html.erb
@@ -7,91 +7,76 @@
<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>
<!-- SyntaxHighlighter (sh) machinery -->
-<script type="text/javascript" src="highlighter/shCore.js"></script>
+<script src="highlighter/shCore.js"></script>
<!-- SyntaxHighlighter brushes, remove those for languages you don't need -->
-<script type="text/javascript" src="highlighter/shBrushAppleScript.js"></script>
-<script type="text/javascript" src="highlighter/shBrushAS3.js"></script>
-<script type="text/javascript" src="highlighter/shBrushBash.js"></script>
-<script type="text/javascript" src="highlighter/shBrushColdFusion.js"></script>
-<script type="text/javascript" src="highlighter/shBrushCpp.js"></script>
-<script type="text/javascript" src="highlighter/shBrushCSharp.js"></script>
-<script type="text/javascript" src="highlighter/shBrushCss.js"></script>
-<script type="text/javascript" src="highlighter/shBrushDelphi.js"></script>
-<script type="text/javascript" src="highlighter/shBrushDiff.js"></script>
-<script type="text/javascript" src="highlighter/shBrushErlang.js"></script>
-<script type="text/javascript" src="highlighter/shBrushGroovy.js"></script>
-<script type="text/javascript" src="highlighter/shBrushJavaFX.js"></script>
-<script type="text/javascript" src="highlighter/shBrushJava.js"></script>
-<script type="text/javascript" src="highlighter/shBrushJScript.js"></script>
-<script type="text/javascript" src="highlighter/shBrushPerl.js"></script>
-<script type="text/javascript" src="highlighter/shBrushPhp.js"></script>
-<script type="text/javascript" src="highlighter/shBrushPlain.js"></script>
-<script type="text/javascript" src="highlighter/shBrushPowerShell.js"></script>
-<script type="text/javascript" src="highlighter/shBrushPython.js"></script>
-<script type="text/javascript" src="highlighter/shBrushRuby.js"></script>
-<script type="text/javascript" src="highlighter/shBrushSass.js"></script>
-<script type="text/javascript" src="highlighter/shBrushScala.js"></script>
-<script type="text/javascript" src="highlighter/shBrushSql.js"></script>
-<script type="text/javascript" src="highlighter/shBrushVb.js"></script>
-<script type="text/javascript" src="highlighter/shBrushXml.js"></script>
-
+<script src="highlighter/shBrushAppleScript.js"></script>
+<script src="highlighter/shBrushAS3.js"></script>
+<script src="highlighter/shBrushBash.js"></script>
+<script src="highlighter/shBrushColdFusion.js"></script>
+<script src="highlighter/shBrushCpp.js"></script>
+<script src="highlighter/shBrushCSharp.js"></script>
+<script src="highlighter/shBrushCss.js"></script>
+<script src="highlighter/shBrushDelphi.js"></script>
+<script src="highlighter/shBrushDiff.js"></script>
+<script src="highlighter/shBrushErlang.js"></script>
+<script src="highlighter/shBrushGroovy.js"></script>
+<script src="highlighter/shBrushJavaFX.js"></script>
+<script src="highlighter/shBrushJava.js"></script>
+<script src="highlighter/shBrushJScript.js"></script>
+<script src="highlighter/shBrushPerl.js"></script>
+<script src="highlighter/shBrushPhp.js"></script>
+<script src="highlighter/shBrushPlain.js"></script>
+<script src="highlighter/shBrushPowerShell.js"></script>
+<script src="highlighter/shBrushPython.js"></script>
+<script src="highlighter/shBrushRuby.js"></script>
+<script src="highlighter/shBrushSass.js"></script>
+<script src="highlighter/shBrushScala.js"></script>
+<script src="highlighter/shBrushSql.js"></script>
+<script src="highlighter/shBrushVb.js"></script>
+<script src="highlighter/shBrushXml.js"></script>
<!-- todo: add theme-ing support -->
<link type="text/css" rel="stylesheet" href="highlighter/shCoreDefault.css"/>
+
<script type="text/javascript">
- SyntaxHighlighter.all();
-</script>
+$(document).ready( function() {
+ Slideshow.init();
+ SyntaxHighlighter.all();
+} );
-<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 class="presentation">
@@ -100,6 +85,4 @@
</div><!-- presentation -->
</body>
-</html>
-
-
+</html>
View
2  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; }
Please sign in to comment.
Something went wrong with that request. Please try again.