Skip to content

Commit

Permalink
Merge pull request #17 from ogobrecht/master
Browse files Browse the repository at this point in the history
Alternative slide indicator, notes, fragments and more...
  • Loading branch information
neuralyzer authored Feb 8, 2017
2 parents 62a6678 + e1b78a1 commit 0f61937
Show file tree
Hide file tree
Showing 81 changed files with 3,508 additions and 927 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
*~
.idea
.examples
4 changes: 2 additions & 2 deletions LICENSE Revealjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
Copyright (C) 2015 Hakim El Hattab, http://hakim.se
Copyright (C) 2016 Hakim El Hattab, http://hakim.se, and reveal.js contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand All @@ -16,4 +16,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
THE SOFTWARE.
191 changes: 150 additions & 41 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,35 +1,36 @@
dokuwiki-plugin-revealjs
========================
DokuWiki plugin Reveal.js
=========================

Reval.js plugin for dokuwiki
Reval.js plugin for DokuWiki

This started as a fork of Andreas Gohr's S5 plugin https://www.dokuwiki.org/plugin:s5.

It uses Reveal.js https://github.com/hakimel/reveal.js/.



Install
-------

Paste the address git config http://github.com/neuralyzer/dokuwiki-plugin-revealjs/zipball/master in the manual installation field or use Dokuwiki's extension manager.



Usage
-----

Add `~~REVEAL~~` to a page to insert a button for presentation start. In the past this was optional - now it is mandatory, because the plugin logic depends on the information, if reveal is used on the page or not. And the keyword `~~REVEAL~~` on the top of the page is used to indicate this.

Every new H1 or H2 section, that is 6 equal signs or 5 equal signs open a new slide horizontally.
Every new H1 or H2 section, that is 6 equal signs or 5 equal signs open per default a new slide horizontally.
New H3 sections (4 equal signs) are appended vertically if they follow after an H2 section.

**Caution**: Only H2 sections open the vertical axis. If an H3 section follows after an H1 section it is appended horizontally.

Add ``~~REVEAL~~`` to a page to insert a button for presentation start.

Check also the source code of the [example presentation](example_presentation.dokuwiki)

Include plugin compatibility
----------------------------


Include plugin compatibility
----------------------------

Edit in the file dokuwiki/lib/plugin/include/syntax/wrap.php in the function render the line

Expand Down Expand Up @@ -66,8 +67,8 @@ Configuration is done in DokuWiki's configuration manager.
![Reveal.js configuration](revealjs_configuration.png)


### Available themes

### Available themes

Available themes are the Reveal.js themes. Possible values:

Expand All @@ -83,6 +84,7 @@ Available themes are the Reveal.js themes. Possible values:
* simple
* sky
* solarized
* dokuwiki (solarized with DokuWiki default theme background color, switched on image borders are recommended :-)

The default is white.

Expand All @@ -97,7 +99,7 @@ Show the reveal.js controls. Two values
The default is false.


### Progres bar
### Progress bar

Show the reveal.js progress bar. Two values

Expand All @@ -114,14 +116,13 @@ Whether to build up all lists point by point. Two values
* false
* true

The default is false
The default is false.


### Transition

The slide transition. Possible settings:


* none
* fade
* slide
Expand All @@ -132,30 +133,63 @@ The slide transition. Possible settings:
The default is fade.


### Build all lists
### Horizontal slide level

Headers on this level or above starting a horizontal slide. Levels below starting a vertical (nested) slide - no effect on slides, which are indicated by alternative slide indicators (`---->` and `---->>`). Possible settings:

* 1
* 2

The default is 2.


### Enlarge vertical slide headers

Enlarge headers on slides below horizontal_slide_level - no effect on slides, which are indicated by alternative slide indicators (`---->` and `---->>`). Boolean:

Whether to build up all bullet point lists item by item by for every slide.
* false
* true

The default is false.


### Image borders

Show image borders (default in Reveal.js). Boolean:

* false
* true

The default is false.


### Size

Base size of the slides in pixels - slides will bee zoomed to fit in the available space

* `<width>x<height>`
* Default is `960x700`



Supported dokuwiki syntax
-------------------------

Apart of the ordinary things like headlines, tables, italic, bold etc. the following syntax elements are supported:

* alignment of images: either left or right or centered
* dokuwiki plugin wrap's ``<wrap lo></wrap>`` and ``<WRAP lo></WRAP>`` produce also in the presentation smaller text.
* ``<WRAP clear></WRAP>`` for clearing of floats
* dokuwiki plugin wrap's `<wrap lo></wrap>` and `<WRAP lo></WRAP>` produce also in the presentation smaller text.
* `<WRAP clear></WRAP>` for clearing of floats



Extra syntax
------------


### Theme selection and button for presentation start

Putting on the page somewhere a
Putting on the top of the page a
```
~~REVEAL~~
```
Expand All @@ -165,40 +199,29 @@ Alternatively, to select a theme put a
```
~~REVEAL theme_name~~
```
somehere with ``theme_name`` replaced by one of the reveal.js themes as listed under "Available themes".
with `theme_name` replaced by one of the reveal.js themes as listed under "Available themes".

All other options are also overwritable in a wiki page by using the URL query parameter syntax:
```
~~REVEAL theme=sky&transition=convex&controls=1&show_progress_bar=1&build_all_lists=0&open_in_new_window=1~~
~~REVEAL theme=sky&transition=convex&controls=1&show_progress_bar=1&build_all_lists=1&show_image_borders=0&horizontal_slide_level=2&enlarge_vertical_slide_headers=0&show_slide_details=1&open_in_new_window=1~~
```
Please note that boolean values must be numeric (1 or 0). If you want to be able to change the options directly in the URL after the presentation has started, then you have to disable DokuWiki's caching by putting `~~NOCACHE~~` at the top of the page.


### Slide background

The plugin introduces the syntax

```
{{background>value}}
```

Where `value` can be either a Dokuwiki image identifier, e.g.

```
value = :images:my_images:image1.png
```

or a color in hex code preceded by `"#"`, e.g.

```
value = #ff0022
{{background>parameters}}
```

The so defined background will be applied to the next slide. I.e. the background tag has to preceed the heading opening
the next slide and will only apply to that slide. For example
For all possible parameters see alternative slide indicator below.

The so defined background will be applied to the next slide. I.e. the background tag has to preceed the heading opening the next slide and will only apply to that slide. For example

```
{{background>:images:image1.png}}
{{background>:wiki:dokuwiki-128.png}}
===== my heading=====
slide with background
Expand All @@ -211,9 +234,41 @@ slide without background
produces one slide with background and a second slide without background.


### Alternative slide indicators

```
---- salmon wiki:dokuwiki-128.png 10% repeat bg-slide no-footer ---->
<notes>
This slide has no content, but therefore a fancy background...
</notes>
<----
```

- `---->` opens a new slide with the default transition in the default speed (open previous slides will be closed implicitly)
- Full example - parameters are parsed dynamically like in CSS, the parameter order is not important and whitespaces are not allowed because we split all keywords on whitespaces: `---- orange wiki:dokuwiki-128.png 10% repeat bg-slide zoom-in fade-out slow no-footer ---->`
- All possible HTML color names and codes are supported: `red`, `#f00`, `#ff0000`, `rgb(255,0,0)`, `rgba(255,0,0,0.5)`, `hsl(0,100%,50%)`, `hsla(0,100%,50%,0.5)`
- Background images are recognized case insensitive by the endings gif, png, jpg, jpeg, svg and can be a DokuWiki image identifier (`:wiki:dokuwiki-128.png`) or a normal image link ('http://host.tld/path/to/image.png')
- Background image size is recognized by postfix `%` and `px` or by keywords `auto`, `contain` and `cover` (cover is the default in Reveal.js) - example: `10%` or `250px` (it is generally recommended to use only percent values - they are scaling nice with the rest of the slide and the slide background preview on the wiki page shows you a "real" preview)
- Background image position is recognized by keywords `top`, `bottom`, `left`, `right`, `center` (center is the default in Reveal.js) or alternative by x,y values in px or % - examples: `top left`, `bottom center`, `3%,5%`, `20px,5%` (the comma is needed to distinguish between image size and position - it is generally recommended to use only percent values - they are scaling nice with the rest of the slide and the slide background preview on the wiki page shows you a "real" preview)
- Background image repeat is recognized by the keyword `repeat` (no-repeat is the default in Reveal.js)
- Background transition: prefix `bg-` followed by `none`, `fade`, `slide`, `convex`, `concave` or `zoom`
- Slide transition: `none`, `fade`, `slide`, `convex`, `concave` or `zoom` followed by optional postfix `-in` or `-out` for different transitions on one slide
- Transition speed: `default`, `fast`, `slow`
- `---->>` opens a new slide container for vertical (nested) slides and a new slide with the given options - example: `---- red zoom ---->>`
- The next `---->>` will close the previous container (and slide) implicitly
- Technical details:
- In the rendering the slide mode changes from "headers driven" to "special horizontal rule driven" - headers are no longer interesting in this mode for slide changes
- You can create of course a whole presentation with this alternative slide indicator
- if you want to leave this slide mode you need a way to explicit close a slide or container:
- `<<----` closes a slide container (and possibly open slide inside)
- `<----` closes a slide


### Footers

Sometimes you might want to have a footer for all the pages. This footer might contain your company's logo or similar things. Footers are most conveniently added using in addition the dokuwiki plugin "wrap". To get a footer on each page put at the very beginning of your document, i.e. before the first heading but possibly after a ``~~NOCACHE`` or ``~~REVEAL~~`` the following block
Sometimes you might want to have a footer for all the pages. This footer might contain your company's logo or similar things. Footers are most conveniently added using in addition the dokuwiki plugin "wrap". To get a footer on each page put at the very beginning of your document, i.e. before the first heading but possibly after a ``~~NOCACHE~~`` or ``~~REVEAL~~`` the following block
```
<wrap footer>Footer content here.</wrap>
```
Expand All @@ -229,21 +284,75 @@ slide without footer
{{background>:images:image1.png}}
===== my heading=====
slide without footer and with background
Slide without footer and with background
{{background>:images:image1.png no-footer}}
===== my heading=====
no-footer as option in background definition
---- no-footer ---->
Slide with alternative slide indicator
---->
Next slide with footer and stop alternative
slide indicator mode
<----
```


### Speaker notes

- https://github.com/hakimel/reveal.js#speaker-notes
- keyword: `<notes>` (no parameters)
- No changes on wiki pages
- On a slideshow the content is wrapped into `<aside class="notes">` and invisible (only shown on speaker notes - shortkey s)
- Lists in notes are always NOT incremental, because the list is unvisible and you would have to press the next key for each entry without any obvious effect

Example:
```
<notes>
- your content
- here
</notes>
```


### Fragments

- https://github.com/hakimel/reveal.js#fragments
- `<fragment>` for inline usage (only formatting and substitutions supported)
- `<fragment-block>` for any wiki content
- `<fragment-list>` to overwrite the global option build_all_lists (if false)
- `<no-fragment-list>` to overwrite the global option build_all_lists (if true)
- support for style and index where possible - see also example_presentation.dokuwiki and http://lab.hakim.se/reveal-js/#/7/1

Example:
```
<fragment>Hit the next arrow...</fragment>
<fragment>... to step through ...</fragment>
<fragment>... a</fragment> <fragment>fragmented</fragment> <fragment>slide.</fragment>
```


PDF export
----------

Presentations can be exported as PDF.
To do so append a ``&print-pdf`` to the URL.
Presentations can be exported as PDF. To do so append a `&print-pdf` to the URL. When you are able to edit the page, there is a export PDF link rendered under the start slideshow button.

For example if the URL of your DokuWiki reveal.js presentation is usually
```
http://example-dokuwiki.com/doku.php?do=export_revealjs&id=example:page
```
you would have to change this manually in the address bar of you browser to
you would have to change this manually in the address bar of your browser to

```
http://example-dokuwiki.com/doku.php?do=export_revealjs&id=example:page&print-pdf
Expand Down
52 changes: 52 additions & 0 deletions action.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<?php

if (!defined('DOKU_INC')) {die();}
if (!defined('DOKU_PLUGIN')) {define('DOKU_PLUGIN', DOKU_INC . 'lib/plugins/');}
require_once DOKU_PLUGIN . 'action.php';

class action_plugin_revealjs extends DokuWiki_Action_Plugin {

function register(Doku_Event_Handler $controller) {
$controller->register_hook('RENDERER_CONTENT_POSTPROCESS', 'BEFORE', $this, '_renderer_content_postprocess');
}

function _renderer_content_postprocess(&$event, $param) {
if ($_GET['do'] !== 'export_revealjs' && $this->getConf('revealjs_active')) {
/* close last edit section correctly (missing </div>), because we close sections
only when a new one is opened - and this logic fails for the last section in the
document */
$search = '<!-- EDIT';
$replace = '</div><!-- EDIT';
$pos = strrpos($event->data[1],$search);
if ($pos !== false) {
$event->data[1] = substr_replace($event->data[1], $replace, $pos, strlen($search));
//dbglog('Plugin revealjs - hook RENDERER_CONTENT_POSTPROCESS - closing last edit section (missing </div>).', __FILE__.' line '.__LINE__);
}

// correct link for PDF export and fixing unknown slide directions in wiki page with jQuery
$event->data[1] .='
<script>
jQuery(document).ready(function(){
jQuery(".slide-export-link a:last").each(function(){
var elem = jQuery(this);
var count = (elem.attr("href").match(/\?/g) || []).length;
if (count == 0) {
elem.attr("href", elem.attr("href").replace("&print-pdf","?print-pdf"));
}
});'.($this->getConf('slides_with_unknown_direction')?'
jQuery(".fix-my-direction").each(function(){
var elem = jQuery(this);
elem.removeClass("fix-my-direction");
if (elem.next().find("h1'.($this->getConf('horizontal_slide_level')==2?',h2':'').'").length > 0) {
elem.text("→" + elem.text());
}
else {
elem.text("↓" + elem.text());
}
});':'').'
});
</script>';
}
}

}
Loading

0 comments on commit 0f61937

Please sign in to comment.