@@ -25,3 +25,7 @@ div#header, div#footer { color: silver; }
#currentSlide { color: silver;}
#controls #navLinks a { color: silver; }
+
+.step { color: gray; }
+/* or hide next steps e.g. .step { visibility: hidden; } */
+.stepcurrent { color: yellow; }
blank.css
@@ -65,6 +65,23 @@
</div>
<div class='slide'>
+ <h1>Steps Demos</h1>
+
+ <!-- mark list with class step to mark all items at once -->
+ <ul class='step'>
+ <li>Item 1.1 Here</li>
+ <li>Item 1.2 Here</li>
+ </ul>
+
+ <!-- or mark individual list items -->
+ <ul>
+ <li class='step'>Item 2.1 Here</li>
+ <li class='step'>Item 2.2 Here</li>
+ </ol>
+ </div>
+
+
+ <div class='slide'>
<h1>Another Slide Title Here</h1>
<p>yada yada yada</p>
blank.html
@@ -1,8 +1,16 @@
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 )
+ {
+ /* uncomment to enable debug messages in console such as Firebug */
+ /* console.log( '[debug] ' + msg ); */
+ }
+
function showHide(action)
{
switch( action ) {
@@ -17,7 +25,7 @@
}
}
- function currentSlide() {
+ function updateCurrentSlideCounter() {
$( '#currentSlide' ).html( '<a id="plink" href="">' +
'<span id="csHere">' + snum + '<\/span> ' +
@@ -27,7 +35,7 @@
}
- function permaLink() {
+ function updatePermaLink() {
$('#plink').get(0).href = window.location.pathname + '#slide' + snum;
}
@@ -36,28 +44,74 @@
go( target - snum );
}
- function go( step ) {
+ function go( dir ) {
+
+ debug( 'go: ' + dir );
- var cid = '#slide' + snum;
+ 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' );
+ } );
+ }
- if (step != 'j') {
- snum += step;
- if( snum > smax ) snum = smax;
- if (snum < 1) snum = 1;
- } else
- snum = parseInt( $( '#jumplist' ).val() );
+ /* set snum to next slide */
+ snum += dir;
+ if( snum > smax ) snum = smax;
+ if (snum < 1) snum = 1;
- var nid = '#slide' + snum;
+ 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);
- currentSlide();
- permaLink();
+ 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 */
@@ -107,10 +161,10 @@ function toggle() {
$('#prev').click( function() { go(-1); } );
$('#next').click( function() { go(1); } );
- $('#jumplist').change( function() { go('j'); } );
+ $('#jumplist').change( function() { goTo( parseInt( $( '#jumplist' ).val() )); } );
populateJumpList();
- currentSlide();
+ updateCurrentSlideCounter();
}
function addSlideIds() {
@@ -152,12 +206,22 @@ function toggle() {
case 34: // page down
case 39: // rightkey
case 40: // downkey
+
+ if (!steps[snum-1] || incpos >= steps[snum-1].length) {
go(1);
- break;
+ } else {
+ subgo(1);
+ }
+ break;
case 33: // page up
case 37: // leftkey
case 38: // upkey
- go(-1);
+
+ if( !steps[snum-1] || incpos <= 0 ) {
+ go(-1);
+ } else {
+ subgo(-1);
+ }
break;
case 36: // home
goTo(1);
@@ -172,3 +236,50 @@ function toggle() {
}
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;
+}
+
shared/slides.core.js
@@ -30,6 +30,8 @@ $(document).ready(function(){
/* opera is the only browser currently supporting css projection mode */
/* if( !$.browser.opera ) */
notOperaFix();
+
+ steps = collectSteps();
if( defaultView == 'outline' )
toggle();
shared/slides.js
947af5847a37f924fdbd87d28d95617b4578af8c
Gerald Bauer
gerald.bauer@gmail.com
http://github.com/geraldb/s6/commit/8291d72c6f003612b4005f016787106e26c6666d
8291d72c6f003612b4005f016787106e26c6666d
2009-02-19T02:32:17-08:00
2009-02-19T02:32:17-08:00
add support for steps/incrementals
7abb3419b29fee9376e7669b9aeee34db224c546
Gerald Bauer
gerald.bauer@gmail.com