GithubHelp home page GithubHelp logo

gerhobbelt / bespoke-simple-overview Goto Github PK

View Code? Open in Web Editor NEW

This project forked from fegemo/bespoke-simple-overview

0.0 2.0 0.0 364 KB

Provides an overview mode of a bespoke.js presentation

License: MIT License

CSS 5.46% JavaScript 38.24% HTML 56.29%

bespoke-simple-overview's Introduction

Build Status Coverage Status

bespoke-simple-overview

Displays an overview version of a bespoke presentation when Esc (configurable) is pressed.

Presentation with the overview mode off, showing one slide - the current one Presentation with the overview mode on, showing about 5 slides

Download

Download the production version or the development version, or use a package manager.

Usage

This plugin is shipped in a UMD format, meaning that it is available as a CommonJS/AMD module or browser global.

For example, when using CommonJS modules:

var bespoke = require('bespoke'),
  overview = require('bespoke-simple-overview');

bespoke.from('#presentation', [
  overview()
]);

When using browser globals:

bespoke.from('#presentation', [
  bespoke.plugins.overview()
]);

There are a few options that can be used to configure the plugin:

bespoke.from('#presentation', [
  overview({
    activationKey: 'c',   // Defaults to ESC (which: 27)
    insertStyles: false   // Defaults to true
  })
]);

By default, bespoke-simple-overview uses the Esc key to activate/deactivate the overview mode, but it can be changed using the option activationKey.

The plugin works by simply toggling a .bespoke-simple-overview class on the deck.parent element. The option insertStyles (default: true) is used to ask the plugin to inject some CSS rules that use .bespoke-simple-overview to style the deck when the presentation enters overview mode (see lib/bespoke-simple-overview.css). When set to false, you are free to provide the styling the way you want for the presentation.

Peer Dependencies

This plugin needs to have bespoke-classes so the deck slides get all the state classes (e.g., .bespoke-before, bespoke-after etc.).

Load Order of Plugins

If your presentation uses the bespoke-bullets plugin, the bespoke-simple-overview plugin needs to be loaded before it, like this:

window.deck = bespoke.from('article', [
  bespoke.themes.fancy(),
  bespoke.plugins.keys(),
  bespoke.plugins.classes(),
  bespoke.plugins.simpleOverview(),
  bespoke.plugins.bullets()
]);

The reason for this is that when in overview mode, this plugin needs to suppress the "sub steps" imposed by bespoke-bullets so that navigating to the next/previous slides effectively changes the active slide, even when more bullets would still be revealed.

Default Styling

The plugin simply adds/removes a .bespoke-simple-overview class on the deck.parent element when the activationKey is pressed.

By default, it adds some CSS rules based on that class. To see which CSS rules are added by default, see the file lib/bespoke-simple-overview.css.

They basically add a rule to the .bespoke-slide class with:

.bespoke-simple-overview .bespoke-slide {
  transform: translated3d(x, 0, -2000px)  
}

...so that the slides go further from the "camera" and become smaller. The "x" varies for each slide so that the ones with class .bespoke-before appear to the left and the ones with .bespoke-after to the right, accordingly.

Tipically, about 5 .bespoke-slides are shown:

  • The current one: .bespoke-slide.bespoke-active
  • Two before: .bespoke-slide.bespoke-before
  • Two after: .bespoke-slide.bespoke-after

Events

There are 3 events exposed by this plugin:

  • simple-overview.enable: Goes into overview mode
  • simple-overview.disable: Leaves to regular mode
  • simple-overview.toggle: Toggles between regular/overview mode

To trigger such event:

deck.fire('simple-overview.disable');

Package managers

npm

$ npm install bespoke-simple-overview

Bower

$ bower install bespoke-simple-overview

Credits

This plugin was built with generator-bespokeplugin.

License

MIT License

bespoke-simple-overview's People

Contributors

fegemo avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.