Skip to content

Modules

Jump to bottom
Ondřej Žára edited this page Nov 27, 2015 · 21 revisions

Available modules in V3

To register new module, add Slides.modules.YOURMODULE = YOURCONFIG; to your HTML document. To deactivate a default module, add delete Slides.module.MODULENAME;.

Keyboard control

  • Implements keyboard-based navigation (arrows, PageUp/Down, Space, Backspace, Home/End)
  • Default configuration:
Slides.modules.keyboard = true;

URL

  • Persists current slide number to the URL; implements browser history and permalinks
  • Default configuration:
Slides.modules.url = true;

Title

  • Creates and updates browser window title
  • Default configuration:
Slides.modules.title = "(%n) %t";
  • Available template replacements:
    • %t = Presentation title
    • %s = Current slide's title
    • %n = Current slide's number
    • %c = Total slide count
    • Additional expressions are allowed using curly braces, i.e. %{n+3}

Progress

  • Maintains an element (div#progress) with progress information and adjust its width (100% at the last slide)
  • Progress node will be appended to a parent node specified by a CSS selector
  • Default configuration:
Slides.modules.progress = {
  template: "%n/%c",
  parent: "footer"
};

Time

  • Maintains an empty element (div#time) and adjust its width based on an expected presentation duration
  • Time node will be appended to a parent node specified by a CSS selector
  • Default configuration:
Slides.modules.time = {
  remaining: 10*60*1000,
  parent: "footer"
};

Skin

  • Applies a stylesheet, located at slides/skin/SKINNAME/skin.css
  • Default configuration:
Slides.modules.skin = "default";

Language

  • Toggles content with respect to a currently selected language (use the "L" key)
  • Shows/hides elements with lang=xx attribute
  • The first language specified in module configuration is the default one
  • Default configuration:
Slides.modules.language = ["en"];

Transition

  • Uses animated transition effect when switching slides
  • Default configuration:
Slides.modules.transition = "horizontal";
  • Available transitions: none vertical horizontal blend corner

Overview

  • Adds support for an overview mode (use the "O" key)
  • Default configuration:
Slides.modules.overview = true;

Help

  • Adds support for a help popup (use the "?" key)
  • Default configuration:
Slides.modules.help = true;

Fontsize

  • Adds support for switching font size (hit "B"igger, "S"maller, "N"ormal)
  • Default configuration:
Slides.modules.fontsize = {
  sizes: ["100%" ,"120%", "150%", "200%", "250%", "350%"],
  normal: "150%"
};

Syntax

  • Implements syntax highlighting
  • Put code in code[data-syntax=xx] HTML
  • Supported languages: js, xml (use for HTML), css, shell
  • Default configuration:
Slides.modules.syntax = true;

Markdown

  • Allows writing slide sections with Markdown
  • Put your markdown code in any element with data-format="markdown"
  • Load the module by adding Slides.modules.markdown = true to your configuration
  • Default configuration:
/* this module is disabled by default */

Window

  • Offers a Presenter's window on a second monitor
  • Displays metadata (current slide index, remaining time, comments (if available), next slide title)
  • Default configuration:
Slides.modules.window = true;

Touch

  • Implements support for touch-based control
  • Tap left/right part of screen; swipe horizontally/vertically; pinch to adjust font size
  • Default configuration:
Slides.modules.touch = {
  tap: true,
  swipe: true,
  pinch: true
};

Auto

  • Automatically switches to next slide after a given time limit expires
  • Useful for "Ignite" talks
  • Time limit is specified in milliseconds
  • Default configuration:
Slides.modules.auto = {
  limit: 0
};

Sound

  • Plays sound when a slide/section becomes active
  • Describe sounds via
<section class="slide" data-sound="/path/to/sound.file">
<whatever class="section" data-sound="/path/to/sound.file">
  • Default configuration:
Slides.modules.sound = true;

Firebase

  • Acts as a Firebase client
  • Used to synchronize navigation across multiple browsers; tested in Firefox and Chrome (both desktop and mobile)
  • Please read the Synchronization document to learn about how this works
  • Default configuration:
/* this module is disabled by default */

Remote

  • Hides all slides; shows control buttons
  • To be used on a cell phone as a remote control app; has little sense without the Firebase module
  • Append ?remote to URL to enable this module
  • Default configuration:
Slides.modules.remote = true;

Mouse

  • Enables navigation by mouse clicks
  • Default configuration:
Slides.modules.mouse = "";
  • Available values:
    • x to navigate by clicking in left/right parts of the screen
    • y to navigate by clicking in top/bottom parts of the screen
    • button to navigate by clicking left/right mouse buttons

Numbering

  • Implements automatic numbering via CSS counters
  • Pick your numbering scheme with <body data-numbering="slide"> or <body data-numbering="chapter">
  • For chapter-based numbering, use <section class="slide chapter">
  • To skip a slide, use <section class="slide" data-numbering="skip">
  • Default configuration:
Slides.modules.numbering = true;

Clone this wiki locally