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
• noResize: disable the built-in resize feature

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

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,

      // fetch external resources in order to inject the content in their relative config object
      cache: 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,

      // randomize the order of the scenes on each instance session
      shuffle: false,

      // set the start scene
      current: false,

      // show the current page number and total pages
      // the default template '%s / %S' can be configured passing that String instead Bollean.
      // %s is the current scene, %S is the total scenes.
      pagenum: false,

      // preload images and videos
      preload: false,

      // It keeps in sync multiple instance of the same presentation that are in the same origin. 
      // It works in all the modern browsers except on Safari which doesn't support the native BroadcastChannel.
      // It basically syncs interactive events (keyboard, mouse, touch, still experimental).
      sync: false,

      // It keeps the router events sync on multiple instance of the same presentation. 
      // Same limitations as the sync controller.
      rsync: false,

      // infers the asset relative paths prepending a base-URL passed as value
      baseurl: false,

      // It loads at runtime external font resources setting the CSS variables used in the library. 
      // It requires an object with one or both the field heading and text. Both fields contain an object with url and name of the font-family you want to use.
      fonts: false,

      // Allow to add a logo or heading passing an HTML fragment
      brand: '',

      // add a list of buttons in a mini toolbar
      minitools: {}

    }
    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.15 (01/15/2021)

• Moved custom styles in external plugin
• Fixes a bug in nested list item size

v0.1.14 (01/10/2021)

• new arrows icon
• better config validation messages
• icon in splash component
• added fonts controller
• better multi scene handling
• fix in color schemes
• better checks when loading plugin at run time

v0.1.12 (12/27/2020)

• more props in pagenum ctrl
• added generic padding container props
• added minitools ctrl
• added brand ctrl
• added noResize root option
• added version check in config validate
• added out option in steps module
• cleanups
• several minor refactoring in ctrl

v0.1.11 (12/20/2020)

• Splash custom message
• Config validation
• Bug fixes

v0.1.10 (12/14/2020)

• added rsync controller
• small fixes and cleanup

v0.1.9 (12/10/2020)

• added splash view
• added plugins key to install them from config
• sync controller rewritten from the ground up
• Bug fixes

v0.1.8 (12/06/2020)

• Added baseurl controller to infer relative asset paths
• Bug fixes & cleanups

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.