Author: | presenta-software |
---|---|
Views Total: | 100 views |
Official Page: | Go to website |
Last Update: | April 10, 2022 |
License: | MIT |
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
controllerrun
method return a Promise to fix some edge cases
v0.1.4 (11/25/2020)
svg
block to inject external svg filescache
controller used bysvg
block to preload external resourcesvideo
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.