====== S5 Presentations ======

---- plugin ----
description: Create slideshow presentations from a DokuWiki page
author     : Andreas Gohr
email      : andi@splitbrain.org
type       : render
lastupdate : 2009-01-07
compatible : 2009-12-25+
depends    : 
conflicts  : 
similar    : 
tags       : media, slideshow, javascript

downloadurl: http://github.com/splitbrain/dokuwiki-plugin-s5/zipball/master
sourcerepo : http://github.com/splitbrain/dokuwiki-plugin-s5/
bugtracker : http://github.com/splitbrain/dokuwiki-plugin-s5/issues
donationurl: http://donate.dokuwiki.org/S5
----

//S5 is a slide show format based entirely on XHTML, CSS, and JavaScript. With one file, you can run a complete slide show and have a printer-friendly version as well.//

This plugin can create [[http://meyerweb.com/eric/tools/s5/|S5 slide show]] presentations from any DokuWiki page.


===== Download and Install =====

Use the download link given above to download or install the plugin through the plugin manager.

==== Changes ====

{{rss>http://github.com/feeds/splitbrain/commits/dokuwiki-plugin-s5/master date}}

===== Configuration =====

  * You may choose from 7 different themes using the config manager or setting ''%%$conf['plugin']['s5']['template']%%''.
  * New S5 themes can be installed in ''lib/plugins/s5/ui/''
  * If you're using the [[folded]] plugin, you may have to make sure the ''getSort()'' level for it is higher than the s5 plugin.

===== Usage =====

Usage is simple. Just add ''%%~~SLIDESHOW~~%%'' somewhere in the page (at the very top is recommended), and start your page with a H1 headline. Following content will go on the first (welcome) slide. Additional slides are created by H2 headlines. Adding a horizontal rule finishes the current slide and additional content goes to the "Handout" area (only visible when the slide is printed). Footnotes and abbreviation will be ignored on the slide. Plugin output won't be visible unless a plugin handles the mode ''s5'' explicitly.

Have a look at this [[plugin:s5:example|Example Presentation]] (follow the link and press the slideshow icon in the upper right corner).

Opera users need to press ''F11'' to enter the presentation mode. Navigating between the slides is then possible using ''PAGE_UP'' and ''PAGE_DOWN''.

Another option is to insert a link to the s5 view of any page in your template. For example edit: <wiki_dir>/lib/tpl/<your-template>/main.php to add
<code>
<a href="<?php echo exportlink($ID, 's5')?>" title="online slideshow"><img src="<?php echo DOKU_BASE?>lib/plugins/s5/screen.gif" height="16px" alt="online slideshow"></a>
</code>
in the topright div.

===== Specifying theme: ==
ahmetsacan: In order to specify theme using e.g., ''%%~~SLIDESHOW flower~~%%'', apply the following changes 
<code>
diff -b -u .s5/renderer.php s5/renderer.php
--- .s5/renderer.php	2010-02-12 05:54:20.000000000 -0500
+++ s5/renderer.php	2010-02-15 16:46:50.561469800 -0500
@@ -45,7 +45,7 @@
         );
         p_set_metadata($ID,array('format' => array('s5' => $headers) ));
         $this->base = DOKU_BASE.'lib/plugins/s5/ui/';
-        $this->tpl  = $this->getConf('template');
+        $this->tpl  = isset($_GET['s5theme'])?$_GET['s5theme']:$this->getConf('template');
     }
 
     /**
</code>
<code>
diff -b -u .s5/syntax.php s5/syntax.php
--- .s5/syntax.php	2010-02-12 05:54:20.000000000 -0500
+++ s5/syntax.php	2010-02-15 16:44:57.731469800 -0500
@@ -43,7 +43,7 @@
      * Connect pattern to lexer
      */
     function connectTo($mode) {
-        $this->Lexer->addSpecialPattern('~~SLIDESHOW~~',$mode,'plugin_s5');
+        $this->Lexer->addSpecialPattern('~~SLIDESHOW[^~]*~~',$mode,'plugin_s5');
     }
 
 
@@ -51,6 +51,7 @@
      * Handle the match
      */
     function handle($match, $state, $pos, &$handler){
+    	if($match!='~~SLIDESHOW~~') return array(trim(substr($match,11,-2)));
         return array();
     }
 
@@ -61,7 +62,7 @@
         global $ID;
         if($format != 'xhtml') return false;
 
-        $renderer->doc .= '<a href="'.exportlink($ID, 's5').'" title="'.$this->getLang('view').'">';
+        $renderer->doc .= '<a href="'.exportlink($ID, 's5',sizeof($data)?array('s5theme'=>$data[0]):null).'" title="'.$this->getLang('view').'">';
         $renderer->doc .= '<img src="'.DOKU_BASE.'lib/plugins/s5/screen.gif" align="right" alt="'.$this->getLang('view').'" width="48" height="48" />';
         $renderer->doc .= '</a>';
         return true;
</code>
===== Using with jsMath =====

Hacking ''renderer.php'' like this made it work for me:

<code php>
<!-- S5 JS -->                                                                                                                                                                                                       
// add those two lines:
<script type="text/javascript" charset="utf-8" src="'.$this->base.'../../../exe/js.php"></script>                                                                                                                    
<script src="'.$this->base.'../../jsmath/script.js" type="text/javascript"></script>   
                                                                                                                              
<script src="'.$this->base.'default/slides.js" type="text/javascript"></script>                            
</code>
===== Incremental ULs =====
just in case you want to show List-Elements one by one put this at the bottom of the page

<code>
<html>
<script> var uls = document.getElementsByTagName('ul');
for(var i=0,j=uls.length;i<j;++i){uls[i].setAttribute('class','incremental')}
</script>
</html>

</code>

===== Discussion =====
Is there a way to manually create a new page (with a new H2 headline) or automatically split content in multiple slides (for instance two pages : "H2 Headline (1/2)" and "H2 Headline (2/2)") ?
Another solution would be an option to use H3 headline for new slides.