Skip to content

Commit

Permalink
Plugins documentation / getting started guide (#835)
Browse files Browse the repository at this point in the history
  • Loading branch information
simplePCBuilding committed Feb 2, 2023
1 parent 4edb9e0 commit 9475720
Show file tree
Hide file tree
Showing 8 changed files with 90 additions and 0 deletions.
24 changes: 24 additions & 0 deletions src/plugins/autoplay/README.md
@@ -0,0 +1,24 @@
# Autoplay

The [autoplay](/src/plugins/autoplay/autoplay.js) plugin automatically advances the presentation after a certain timeout expired.

## USAGE

You first have to enable the plugin by setting a global ```data-autoplay``` value on the impress-div. Then you can change individual ```data-autoplay``` values on each *step* by adding ```data-autoplay``` to it. If this value is set to ```0```, there will be no more auto-advancing on this *step*. The value you enter is time in seconds to switch to the next slide.

## EXAMPLE

Note: This only shows part of the HTML. If you want to know how to set up a presentation, I highly recommend you read our [Getting Started Guide](/GettingStarted.md)
```
<div id=impress data-autoplay="5">
<div class="step" data-autoplay="0">
This slide will not auto-advance
</div>
<div class="step">
This slide will auto-advance at the globally defined rate.
</div>
<div class="step" data-autoplay="10">
This slide will auto-advance after 10 seconds
</div>
</div>
```
3 changes: 3 additions & 0 deletions src/plugins/blackout/README.md
@@ -0,0 +1,3 @@
# Blackout

This plugin is automatically enabled and runs whenever you start your presentation. You can press *B* or *.* on your keyboard to blank / unblank the screen.
17 changes: 17 additions & 0 deletions src/plugins/form/README.md
@@ -0,0 +1,17 @@
# Form

Form support! Functionality to better support use of input, textarea, button... elements in a presentation.

This plugin does two things:

Set stopPropagation on any element that might take text input. This allows users to type, for example, the letter 'P' into a form field, without causing the presenter console to spring up.

On impress:stepleave, de-focus any potentially active element. This is to prevent the focus from being left in a form element that is no longer visible in the window, and user therefore typing garbage into the form.

***THIS PLUGIN REQUIRES FURTHER DEVELOPMENT***

TODO: Currently it is not possible to use TAB to navigate between form elements. Impress.js, and
in particular the navigation plugin, unfortunately must fully take control of the tab key,
otherwise a user could cause the browser to scroll to a link or button that's not on the current
step. However, it could be possible to allow tab navigation between form elements, as long as
they are on the active step. This is a topic for further study.
5 changes: 5 additions & 0 deletions src/plugins/fullscreen/README.md
@@ -0,0 +1,5 @@
# Fullscreen

This plugin puts your presentation into fullscreen by pressing *F5*. You can leave fullscreen again by pressing *Esc*.

*Note:* impress.js works just fine with the normal fullscreen offered by your browser where you would (usually) press *F11* to enter it. There are certain circumstances where you might want to use this plugin instead, as it should work with the impressConsole plugin as well.
19 changes: 19 additions & 0 deletions src/plugins/media/README.md
@@ -0,0 +1,19 @@
# Media
This plugin will do the following things:
- Add a special class when playing (body.impress-media-video-playing and body.impress-media-video-playing) and pausing media (body.impress-media-video-paused and body.impress-media-audio-paused) (removing them when ending). This can be useful for example for darkening the background or fading out other elements while a video is playing. Only media at the current step are taken into account. All classes are removed when leaving a step.
- Introduce the following new data attributes:
- data-media-autoplay="true": Autostart media when entering its step.
- data-media-autostop="true": Stop media (= pause and reset to start), when leaving its step.
- data-media-autopause="true": Pause media but keep current time when leaving its step.

When these attributes are added to a step they are inherited by all media on this step. Of course this setting can be overwritten by adding different attributes to inidvidual media.

The same rule applies when this attributes is added to the root element. Settings can be overwritten for individual steps and media.
Examples:
- data-media-autoplay="true" data-media-autostop="true": start media on enter, stop on leave, restart from beginning when re-entering the step.
- data-media-autoplay="true" data-media-autopause="true": start media on enter, pause on leave, resume on re-enter
- data-media-autoplay="true" data-media-autostop="true" data-media-autopause="true": start media on enter, stop on leave (stop overwrites pause).
- data-media-autoplay="true" data-media-autopause="false": let media start automatically when entering a step and let it play when leaving the step.
- ```<div id="impress" data-media-autoplay="true"> ... <div class="step" data-media-autoplay="false">```
All media is startet automatically on all steps except the one that has the data-media-autoplay="false" attribute.
- Pro tip: Use ```<audio onended="impress().next()"> or <video onended="impress().next()">``` to proceed to the next step automatically, when the end of the media is reached.
16 changes: 16 additions & 0 deletions src/plugins/navigation/README.md
@@ -0,0 +1,16 @@
# Navigation
As you can see this part is separate from the impress.js core code.
It's because these navigation actions only need what impress.js provides with
its simple API.
This plugin is what we call an _init plugin_. It's a simple kind of
impress.js plugin. When loaded, it starts listening to the `impress:init`
event. That event listener initializes the plugin functionality - in this
case we listen to some keypress and mouse events. The only dependencies on
core impress.js functionality is the `impress:init` method, as well as using
the public api `next(), prev(),` etc when keys are pressed.
Copyright 2011-2012 Bartek Szopka (@bartaz)
Released under the MIT license.

***Author:***

Bartek Szopka
3 changes: 3 additions & 0 deletions src/plugins/resize/README.md
@@ -0,0 +1,3 @@
# Resize

This plugin resizes the presentation after a window resize. It does not offer any programmatic way of interaction, as this is not needed. It runs automatically in the background.
3 changes: 3 additions & 0 deletions src/plugins/touch/README.md
@@ -0,0 +1,3 @@
# Touch

This plugin handles touch input. You can use swipe gestures to interact with your presentation, just note that the transitions might look slightly different from what you are used to on the PC.

0 comments on commit 9475720

Please sign in to comment.