Advanced Presentation JavaScript Library – Presenta

Preview:

Description:

Presenta is a powerful and full-featured presentation library to create responsive, touch-friendly, fully customizable presentations on the web app.

More Features:

• Supports any content: text, images, videos, PDFs, etc.
• Keyboard accessibility.
• Slide and Fade transition effects.
• Auto play and infinite loop.
• Image & Video preloader.
• Fullscreen Mode (Press f).
• Beautiful predefined color schemes.

Basic Usage:

1. Install the package with NPM and import the Presenta as a module:

# NPM
$ npm i @presenta/lib --save

import * as Presenta from '@presenta/lib'

2. Or directly load the compiled JavaScript in the document.

<script src="dist/presenta.min.js"></script>

3. Create a container in which you want to render the presentations.

<div id="example"></div>

4. Initialize the Presenta on the container and add your own presentation slides as follows:

var myPresentation = new Presenta('#example', {
    scenes:[{
      blocks:[{
        type:'text',
        textVar: 'title',
        steps: 'p,.step',
        text:`<h3><mark>Use Arrows to move forward</mark></h3>
              <h1><span class="step">This</span>
              <span class="step">Title</span>
              <span class="step">Steps</span></h1>
              <p>Also</p>
              <p>These</p>
              <p>Paragraphs</p>`
      }]
    },{
      blocks:[{
        type:'text',
        text:'<h1>DONE!</h1>'
      }]
    },{
      blocks:[{
        type:'image',
        url:'/path/to/image.jpg'
      }] 
    },{
      blocks:[{
        type:'video',
        url:'/path/to/video.mp4',
        loop:true,
        autoplay:true,
        poster:'/path/to/poster.jpg'
    }]
  },{
      blocks:[{
        type:'embed',
        url:'/path/to/any content',
        code:'', // The complete iframe code, (required) if url is not set
        poster:'/path/to/poster.jpg'
    }]
  },{
      blocks:[{
        type:'svg',
        url:'/path/to/svg',
        code:'', // or SVG code here
    }]
  },{
      blocks:[{
        type:'solid',
        // allows to set any CSS background property to the whole block area.
    }]
  }{
      blocks:[{
        type:'group',
        // allows to stack two or more regular blocks together
    }]
  }]
})

5. Determine the transition effect:

• hSlide
• vSlide
• slideOver
• fadeIn

var myPresentation = new Presenta('#example', {
    transition: 'hSlide'
    scenes:[...]
})

6. Customize the appearance of the presentations.

• colors: adele, belle, cati, dania, elance, flo, gina, hedy, irma
• fonts: cardina, corvid, creeper, duck, finch, flow, goose, heron
• colorVar: main, sec, alt
• sceneVar: ‘a’, ‘b’, ‘c’, ‘d’, ‘e’
• aspect: radio aspect
• adapt: adapt to the container size

var myPresentation = new Presenta('#example', {
    colors:'',
    fonts:'',
    colorVar:'',
    sceneVar:'',
    aspect: 2,
    adapt: false,
    scenes:[...]
})

7. Enable/disable controllers as per your needs.

var myPresentation = new Presenta('#example', {
    controllers:{

      // enable keyboard navigation
      keyboard: true,

      // enable navigation arrows
      arrows: true,

      // show/hide a black screen by pressing 'b'
      black: true,

      // run the presentation in fullscreen by pressing 'f'
      fullscreen: true,

      // hide specific scene or block if it has the hidden option set to true
      hidden: true,

      // display a visual feedback when the user tries to navigate over the presentation begin or end
      limitswitch: true,

      // enable autoplay
      // Boolean or Number (Delay)
      autoplay: false,

      // infinite loop
      loop: false,

      // auto set focus on the presentation
      focus: false,

      // enable progress bar
      progressbar: false,

      // set the start scene
      current: false,

      // show the current page number and total pages
      pagenum: false,

      // preload images and videos
      preload: false

    }
    scenes:[...]
})

8. API methods.

var myPresentation = new Presenta('#example', {...})
var router = myPresentation.router

// go to the next presentation slide
router.next();

// go to the prev presentation slide
router.prev();

// goto a specific presentation slide
router.goto(index);

// get the current slide index
router.currentIndex();

// get the total number of slides
router.totalScenes();

// bind/unbind events
router.on(evt);
router.off(evt)

9. Event handlers.

router.on('indexChanged', function(evt){
  // do something
});

router.on('nextIndex', function(evt){
  // do something
});


router.on('prevIndex', function(evt){
  // do something
});


router.on('begin', function(evt){
  // do something
});


router.on('end', function(evt){
  // do something
});


router.on('init', function(evt){
  // do something
});

router.on('stepChanged', function(evt){
  // do something
});

10. Properties:

• currentIndex: Current index
• currentStep: Current step
• totalScenes: Total number of slides
• totalSteps: Total number of steps
• isFirst: Check if is the first one
• isLast: Check if is the last one

Changelog:

v0.1.6 (11/26/2020)

• steps now can drive multiple items at the same time
• Bugfix

v0.1.5 (11/26/2020)

• Now the instance of Presenta Lib is a Promise
• cache controller run method return a Promise to fix some edge cases

v0.1.4 (11/25/2020)

• svg block to inject external svg files
• cache controller used by svg block to preload external resources
• video block volume and rewind controls
• Fixed arrow controller and router minor issues

v0.1.3 (11/21/2020)

• This release resolve some bugs.
• There is also a little API change, the steps feature requires a steps option instead step one.