forked from impress/impress.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Plugins documentation / getting started guide (impress#835)
- Loading branch information
Showing
8 changed files
with
90 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |