Skip to content

Minimalistic javascript presentation-library. Zero dependencies. Can be used in combination with frameworks like Bootstrap, Materialize, Vue etc.

License

Notifications You must be signed in to change notification settings

simonwep/presentr

Repository files navigation

Logo

Minimalistic, Hackable, Fast Presentation Library.

gzip size brotli size Build Status Download count No dependencies JSDelivr download count Current version Support me


Features

  • No jQuery
  • No dependencies
  • Hackable / Extensible
  • Ultra small
  • Native mobile-support

Why another library to provide the ability to create a presentation in your browser? Isn't there already Revealjs which is good and reliable? Yeah, thought the same. But I was looking for a library which I can use in combination with React, Vue, Bootstrap, Materialize or whatever library I want. Something which only provides the very essential functionalities to control slides and fragments.

Setup

Node

Install package:

$ npm install @simonwep/presentr --save

Include code and style:

import presentr from '@simonwep/presentr';

Browser

jsdelivr:

<script src="https://cdn.jsdelivr.net/npm/@simonwep/presentr/dist/presentr.min.js"></script>

Directly:

<script src="node_modules/@simonwep/presentr/dist/presentr.min.js"></script>

Usage

// Simple example, see optional options for more configuration.
const presentr = new Presentr({
    slides: '.slide',
    fragments: '.frag'
});

Optional options

const presentr = new Presentr({

     // Query selector to your slides.
    slides: '.slide',

    // Query selector for each fragment of the presentaion.
    fragments: '.frag',

    /**
     *  Can be used to group fragments.
     *  Apply to multiple elements 'g-a' and they will 
     *  all get active until the first element wich this group 
     *  has been reached.
     */
    fragmentGroupPrefix: 'g-',

    // Start index. Does not change the slide sequence.
    slideIndex: 0,

    // CSS Classes to get control the appereance of slides and fragments.
    // It's possible to use arrays
    classes: {
        previousSlide: 'previous-slide', // Class for slides behind the current one
        nextSlide: 'next-slide',         // Class for slides after the current one
        currentSlide: 'current-slide',   // Class which will be added only to the current slide.

        // Same functionality, just for fragments.
        activeFragment: 'active-frag',
        currentFragment: 'current-frag'
    },

    // Keyboard shortcuts.
    shortcuts: {

        // Jump to next / previous slide
        nextSlide: ['d', 'D'],
        previousSlide: ['a', 'A'],

        // Jump to first / last slide
        firstSlide: ['y', 'Y'],
        lastSlide: ['x', 'X'],

        // Jumpt to next / previous fragement. If the first or last fragment is reached,
        // the next action would jump to the next / previous slide.
        nextFragment: ['ArrowRight', 'ArrowDown'],
        previousFragment: ['ArrowLeft', 'ArrowUp']
    }
});

Events

Since version 1.1.x Presentr is event-driven. Use the on(event, cb) and off(event, cb) functions to bind / unbind eventlistener.

Event Description Arguments
action Fires both on slide and fragment {presentr: PickrInstance}
beforeSlide Before slide changes {presentr: PickrInstance, from: slideIndex, to: slideIndex}
slide Slide changed {presentr: PickrInstance}
beforeFragment Before fragment changes {presentr: PickrInstance, from: fragmentIndex, to: fragmentIndex}
fragment Fragment changed PickrInstance

Example:

presentr.on('action', () => {
    console.log('action');
}).on('beforeSlide', obj => {
    console.log('beforeSlide', obj);
    // Return false explicitly to block slide
}).on('beforeFragment', obj => {
    console.log('beforeFragment', obj);
    // Return false explicitly to block fragment
}).on('slide', () => {
    console.log('slide');
}).on('fragment', () => {
    console.log('fragment');
});

Methods

  • presentr.nextSlide() - Jump to next slide.
  • presentr.previousSlide() - Jump to previous slide.
  • presentr.firstSlide() - Jump to first slide.
  • presentr.lastSlide() - Jump to last slide.
  • presentr.jumpSlide(index:Number) - Jump to a specific slide.
  • presentr.nextFragment() - Jump to next fragment, if end reached the next slide will be shown.
  • presentr.previousFragment() - Jump to previous fragment, if start reached the previous slide will be shown.
  • presentr.jumpFragment(index:Number) - Jump to a specific fragment on the current slide.
  • presentr.destroy() - Destroys the presentr instance and unbinds all event-listeners.

Getters

  • presentr.totalSlides - Total amount of slides.
  • presentr.totalFragments - Total amount of fragments in current slide.
  • presentr.slideIndex - Current slide index.
  • presentr.fragmentIndex - Current fragment index in slide.
  • presentr.globalFragmentCount - Total amount of fragments on all slides combined.

Contributing

If you want to open a issue, create a Pull Request or simply want to know how you can run it on your local machine, please read the Contributing guide.

About

Minimalistic javascript presentation-library. Zero dependencies. Can be used in combination with frameworks like Bootstrap, Materialize, Vue etc.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published