@simonwep/presentr

Minimalistic and extensible javascript presentation-library.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@simonwep/presentr
1.2.03 years ago5 years agoMinified + gzip package size for @simonwep/presentr in KB

Popular Searches

Readme

<img src="logo.png" alt="Logo">

Minimalistic, Hackable, Fast Presentation Library.

gzip size brotli size alt="Build Status" 

src="https://img.shields.io/travis/Simonwep/presentr.svg?style=popout-square"></a>
alt="Download count" 
src="https://img.shields.io/npm/dm/@simonwep/presentr.svg?style=popout-square"></a>
No dependencies alt="JSDelivr download count" 
src="https://data.jsdelivr.com/v1/package/npm/@simonwep/presentr/badge"></a>
Current versionsrc="https://img.shields.io/github/tag/Simonwep/presentr.svg?color=3498DB&label=version&style=flat-square"> alt="Support me" 
src="https://img.shields.io/badge/patreon-support-3498DB.svg?style=popout-square"></a>


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: ```shell $ npm install @simonwep/presentr --save ``` Include code and style: ```js import presentr from '@simonwep/presentr'; ``` ---

Browser

jsdelivr: ```html ``` Directly: ```html ```

Usage

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

Optional options

```javascript 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:
```js 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.