Skip to content
Browse files

update s6 templates

  • Loading branch information...
1 parent 9391d73 commit f3699b5b491b8e5e2cf4ed311ec96b9e8acae74e @geraldb geraldb committed
Showing with 141 additions and 36 deletions.
  1. +63 −17 s6/jquery.slideshow.js
  2. +1 −1 s6/print.css
  3. +2 −0 s6/screen.css
  4. +6 −5 slides.html.erb
  5. +69 −13 style.css.erb
View
80 s6/jquery.slideshow.js
@@ -17,6 +17,16 @@ Slideshow.transition = function( $from, $to ) {
* inspired by Karl Swedberg's Scroll Up Headline Reader jQuery Tutorial[1]
* [1] http://docs.jquery.com/Tutorials:Scroll_Up_Headline_Reader
*/
+
+function transitionSlideUpSlideDown( $from, $to ) {
+ $from.slideUp( 500, function() { $to.slideDown( 1000 ); } );
+}
+
+function transitionFadeOutFadeIn( $from, $to ) {
+ $from.fadeOut( 500 );
+ $to.fadeIn( 500 );
+}
+
function transitionScrollUp( $from, $to ) {
var cheight = $from.outerHeight();
@@ -78,11 +88,7 @@ Slideshow.init = function( options ) {
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>' );
+ $( '#currentSlide' ).html( settings.snum + '/' + settings.smax );
}
function updateJumpList()
@@ -92,8 +98,6 @@ Slideshow.init = function( options ) {
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;
}
@@ -229,6 +233,13 @@ function toggle()
function createControls()
{
+ // todo: make layout into an id (not class?)
+ // do we need or allow more than one element?
+
+
+ // if no div.layout exists, create one
+ if( $( '.layout' ).length == 0 )
+ $( "<div class='layout'></div>").appendTo( 'body' );
$( '.layout' )
.append( "<div id='controls'>" )
@@ -254,7 +265,13 @@ function toggle()
updateCurrentSlideCounter();
updatePermaLink();
}
-
+
+ function toggleSlideNumber()
+ {
+ // toggle slide number/counter
+ $( '#currentSlide' ).toggle();
+ }
+
function toggleFooter()
{
$( '#footer').toggle();
@@ -268,7 +285,7 @@ function toggle()
key.which = key.keyCode;
}
if (key.which == 84) {
- toggle();
+ toggle(); // toggle between project and screen css media mode
return;
}
if( settings.isProjection ) {
@@ -303,7 +320,7 @@ function toggle()
goTo(settings.smax);
break;
case 67: // c
- showHide('c');
+ showHide('c'); // toggle controls (navlinks,navlist)
break;
case 65: //a
case 80: //p
@@ -313,6 +330,12 @@ function toggle()
case 70: //f
toggleFooter();
break;
+ case 78: // n
+ toggleSlideNumber();
+ break;
+ case 68: // d
+ toggleDebug();
+ break;
}
}
}
@@ -336,6 +359,33 @@ function autoplay()
}
}
+function toggleDebug()
+{
+ settings.debug = !settings.debug;
+ doDebug();
+}
+
+function doDebug()
+{
+ // fix/todo: save background into oldbackground
+ // so we can restore later
+
+ if( settings.debug == true )
+ {
+ $( '#header' ).css( 'background', '#FCC' );
+ $( '#footer' ).css( 'background', '#CCF' );
+ $( '#controls' ).css( 'background', '#BBD' );
+ $( '#currentSlide' ).css( 'background', '#FFC' );
+ }
+ else
+ {
+ $( '#header' ).css( 'background', 'transparent' );
+ $( '#footer' ).css( 'background', 'transparent' );
+ $( '#controls' ).css( 'background', 'transparent' );
+ $( '#currentSlide' ).css( 'background', 'transparent' );
+ }
+}
+
function toggleAutoplay()
{
@@ -452,14 +502,10 @@ function addSlideIds() {
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' );
- }
+ doDebug();
document.onkeyup = keys;
View
2 s6/print.css
@@ -1 +1 @@
-/*********************************
+/*********************************
View
2 s6/screen.css
@@ -15,6 +15,8 @@
.layout * { display: none; }
+.projection { display: none; }
+
/*************
* make toggle button visible and reposition to upper right corner *
* note: toogle button is nested inside #controls > #navLinks > #toogle
View
11 slides.html.erb
@@ -7,11 +7,14 @@
<meta name="generator" content="<%= @headers['generator'] %>">
<meta name="author" content="<%= @headers['author']%>" >
+<!-- SyntaxHighlighter (sh) style sheet; goes first so we can override styles if needed -->
+<!-- todo: add theme-ing support -->
+<link rel="stylesheet" href="highlighter/shCoreDefault.css">
<!-- S6 style sheet links -->
-<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">
+<link rel="stylesheet" href="<%= "#{@name}.css" %>" media="projection" id="styleProjection">
+<link rel="stylesheet" href="s6/screen.css" media="screen" id="styleScreen">
+<link rel="stylesheet" href="s6/print.css" media="print">
<!-- S6 JS -->
<script src="s6/jquery.js"></script>
@@ -47,8 +50,6 @@
<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">
View
82 style.css.erb
@@ -1,35 +1,91 @@
@import url(s6/projection.css); /* required to make the slide show run at all */
-html, body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }
+body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }
a:link, a:visited { color: black; }
-h1 { font-size: 30pt; }
-h2 { font-size: 28pt; }
+.slide h1 { font-size: 30pt; }
+
+.slide h1 { text-align: center; }
+
+.slide h1.fullscreen { position: absolute;
+ top: 40%;
+ width: 100%; }
+
+/* lets you create slides with no heading (because heading is hidden but gets included in toc) */
+.slide h1.hidden { display: none; }
+
+
+.slide h2 { font-size: 28pt; }
+
h3 { font-size: 25pt; }
+
+/* todo: add special formating for .cover slide
+ lets you use h1(cover). for title/cover slide (a la S5 slide0) but more generic (not bound to 1st slide)
+*/
+
+.cover h1 { /* tbd */ }
+.cover h2 { /* tbd */ }
+
+/* todo: add special formating for h1, h2 in footer */
+
+#footer h1 { /* tbd */ }
+#footer h2 { /* tbd */ }
+
+
p, li, dt, dd, td, th { font-size: 18pt; }
+ul { list-style-type: square; }
+
+/**********************************/
+/* general text-alignment classes */
+
+.left { text-align: left; }
+.center { text-align: center; }
+.right { text-align: right; }
+
+/**********************************/
+/* general font-size classes */
+
+.small { font-size: 97%; }
+
+.x-small,
+.smaller { font-size: 88%; }
+
+.xx-small,
+.smallest,
+.tiny { font-size: 82%; }
+
+
+
pre { font-size: 16pt; }
-pre.small { font-size: 12pt; }
-pre.code {
+.code {
background-color: azure;
padding: 5px;
}
+
+.footnote a:first-of-type { text-decoration: none; }
-div.code {
- background-color: azure;
- padding: 5px;
-}
-ul { list-style-type: square; }
+p.small { font-size: 97%; }
-.center { text-align: center; }
+p.x-small,
+p.smaller,
+p.footnote { font-size: 88%; }
-/*** style rules for steps ****/
+p.xx-small,
+p.smallest,
+p.tiny { font-size: 82%; }
-.stepcurrent { color: black; }
+
+.help p,
+.help td { font-size: 88%; }
+
+
.step { color: silver; }
/* or hide next steps e.g. .step { visibility: hidden; } */
+.stepcurrent { color: black; }
+
<%= content_for :css %>

0 comments on commit f3699b5

Please sign in to comment.
Something went wrong with that request. Please try again.