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', //required
        content: '', // required
        autoscale: false, // Scale down if not enough space. The scale param allows fine tuning of the scaling feature
        scale: 1, // It allows to control the size of the text box within the available block space
        font: '', // The URL of the font TTF file you want to load and apply
        clamp: 0, // The number of lines of text to show
        marked: false,
        uppercase: false,
        underline: false
      }]
    },{
      blocks:[{
        type: 'image', // required
        url: 'https://cdn.presenta.cc/image.jpg', // required
        scale: 1,
        filter: 'none', // CSS filters
        position: 'center',
        size: 'cover'
      }]
    },{
      blocks:[{
        type: 'video', // required
        url: 'https://cdn.presenta.cc/sample.m4v', // required
        loop: false,
        autoplay: false,
        poster: '' // cover image URL  
      }] 
    },{
      blocks:[{
        type: 'embed', // required
        url: 'https://preview.p5js.org/FabioFranchino/present/Gfscmi8Hk', // URL of the page to embed
        code: '', // full iframe code, instead of url
        poster: '' // cover image URL 
      }]
  },{
      blocks:[{
        type: 'shape',
        shape: 'rect', // rect, circle, triangle, rhombus, star
        color: 'black',
        path: 'polygon(20% 0%, 0% 70%, 100% 100%)' // pass your custom path, override the shape property
      }]
  },{
      blocks:[{
        type: 'line',
        direction: 'horizontal', // horizontal, vertical
        color: 'black',
        tickness: '1px'
      }]
  },{
      blocks:[{
        type: 'svg', // required
        code: '<svg viewBox="0 0 100 80"><circle cx="50" cy="40" r="20"></circle></svg>', // required
        aspect: '' // SVG preserveAspectRatio attribute valid value
      }]
  }]
})

5. Global options

var myPresentation = new Presenta('#example', {
    // required
    scenes: [], 
    // the ratio between width and height
    aspect: 1.6, 
    // override aspect inferring it from the container size
    adapt: true,  
    // present or preview
    mode: 'present' 
})

6. Customize the appearance of the presentations.

var myPresentation = new Presenta('#example', {
    scenes:[{
      blocks:[{
        type: 'text', //required
        content: '', // required
        autoscale: false, // Scale down if not enough space. The scale param allows fine tuning of the scaling feature
        scale: 1, // It allows to control the size of the text box within the available block space
        font: '', // The URL of the font TTF file you want to load and apply
        clamp: 0, // The number of lines of text to show
        marked: false,
        uppercase: false,
        underline: false
      }],
      modules:{
        autoplay: true,
        coords:{
          top: 20,
          left: 20,
          width: 60,
          height: 60,
          angle: 0,
          skew: 0
        },
        enters:{
          transition: 'fadeIn', // fadeIn,zoomOut,zoomIn,slideUp,slideDown
          delay: 1000, // the transition start delay in milliseconds
          stagger: false // calculate the delay based on the number of blocks in the scene
        },
        styles:{
          opacity: '',
          blend: '',
          radius: '',
          border: '',
          padding: '',
          background: '',
          color: '',
          clip: '',
          shadow: ''
        }
      }
    }]
})

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,
      // fadeIn,hSlide,vSlide,slideOver
      transitions: 'fadeIn',
      // Hide the cursor over the document wrapper.
      hidecursor: true,
    }
    scenes:[...]
})

8. API methods.

new Presenta('#example', config).then(preso => {
  var router = preso.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();
// get the total number of steps
router.totalSteps();
// 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:

v1.0.25 (04/10/2022)

• exposed addFontDep util

v1.0.24 (02/28/2022)

• Several little fixes and cleanups.

v1.0.23 (02/24/2022)

• fix issue on script module

v1.0.22 (02/21/2022)

• update

v1.0.21 (02/20/2022)

• fixes in text block about font handling

v1.0.20 (02/10/2022)

• format now change the viewport width size

v1.0.19 (02/03/2022)

• update dependencies

v1.0.16 (01/28/2022)

• fixed blend mode in css module

v1.0.15 (01/28/2022)

• Some little fixes and improvements

v1.0.13 (01/09/2022)

• Added runtime plugin installer
• Bug fixes

v1.0.12 (01/06/2022)

• removed shape and line blocks

v1.0.11 (01/05/2022)

• fixed embed bug with missing posterframe

v1.0.10 (12/29/2021)

• minor fixes and dependencies update

v1.0.8 (12/22/2021)

• Added ShowIf Module

v1.0.7 (12/06/2021)

• Added query modifier in svg block to allows attribute changes at run time

v1.0.6 (12/05/2021)

• Small style fixes in Text Block

v1.0.5 (12/02/2021)

• Text Block scale prop fix issue in some edge cases

v1.0.4 (12/02/2021)

• Text Block Scale property handles values with units (rem and px)

v1.0.3 (11/14/2021)

• Changed the way prev/next scene are instantiated. This allows to pre-load upcoming scenes while presenting the main one.
• Bugfix.

v1.0.2 (11/14/2021)

• Bug fix: text block autoscale issue with some text

v1.0.0 (11/09/2021)

• New bold release.

v0.1.18 (03/14/2021)

• Added Jump Controller to allow quick jump across scenes using internal links

v0.1.17 (03/13/2021)

• Plugin wrappers name changed, it might require plugin update

v0.1.16 (03/11/2021)

• Steps module fixes init unwanted transition

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.