Author: | presenta-software |
---|---|
Views Total: | 13 views |
Official Page: | Go to website |
Last Update: | January 15, 2021 |
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', 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
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.