janishutz-legacy/impress.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: janishutz-legacy:new-impress-website
Branches Tags
janishutz-legacy:master janishutz-legacy:v3 janishutz-legacy:getting-started-update janishutz-legacy:new-impress-website
...
pull from: janishutz-legacy:getting-started-update
Branches Tags
janishutz-legacy:v3 janishutz-legacy:master janishutz-legacy:getting-started-update janishutz-legacy:new-impress-website

4 Commits
new-impres ... getting-st

Author SHA1 Message Date
Janis Hutz
67711f13cf Merge branch 'impress:master' into getting-started-update 2024-01-10 08:33:23 +01:00
Thomas Reitmayr
b3a7a632c7 Fix default substep order when no explicit order given (#855) (#856) 
This affects both going to the next and previous substep.
 2023-12-05 06:25:20 +02:00
Meng Weng Wong
d0ba7ff884 New "bookmark" plugin allows hotkey fast-travel to specific steps (#852) 
add plugin bookmark supporting direct access via hotkeys
similar to "click", we can now fast travel using hotkeys e.g. 1 2 3
 2023-11-01 01:13:40 +02:00
Janis Hutz
f80b6d1762 add introduction to usage of css in GettingStarted 2023-07-06 20:51:30 +02:00
8 changed files with 177 additions and 20 deletions
Expand all files Collapse all files

20
GettingStarted.md
View File

@@ -50,7 +50,7 @@ Now, create a new file called *index.html* and create the basic HTML structure:
</html> </html>
``` ```
Now, head into a file-manager, navigate to the file you just created (*index.html*) and open it. You should end up in a browser where you should see "My first Slide" displayed. As this is not really exciting, we are not gonna change anything about that and are gonna look at what you just typed. What do these lines mean? Now, head into a file-manager, navigate to the file you just created (*index.html*) and open it. You should end up in a browser where you should see "My first Slide" plus (in case you omitted the *impress-common.css* file) the fallback message displayed. As this is not really exciting, we are not gonna change anything about that and are gonna look at what you just typed. What do these lines mean?
Well, first things first, you should probably give your presentation a title. You may do this in normal HTML fashion by changing the *title* HTML tag. Well, first things first, you should probably give your presentation a title. You may do this in normal HTML fashion by changing the *title* HTML tag.
@@ -62,7 +62,23 @@ Finally, we load the ```impress.js``` script from your local copy (if you have o
``` ```
impress().init() impress().init()
``` ```
to initialize impress.js. Now, let's continue on to explore more and more features of this amazing tool! to initialize impress.js.
If you have omitted the *impress-common.css* file, you might want to hide the fallback message. This can be done by creating a CSS file called *style.css* in the same folder you've created the *index.html* file in. In the *index.html* add the following line inside of the *<head>* tag:
```
<link rel="stylesheet" href="style.css">
```
This will load the *style.css* file in the HTML.
Now open up the *style.css* file using any text editor. To hide the fallback message, you should add the following lines to the CSS file:
```
.impress-supported .fallback-message {
display: none;
}
```
Now, let's continue on to explore more and more features of this amazing tool!
## Creating slides ## Creating slides
Creating slides is fairly easy. You create a *div* that belongs to the class ```step``` and you are off to the races! Let me give you an example: Creating slides is fairly easy. You create a *div* that belongs to the class ```step``` and you are off to the races! Let me give you an example:

3
README.md
View File

@@ -22,9 +22,6 @@ You can include this link directly inside of your HTML file in its header. If yo
- V1.1.0: https://cdn.jsdelivr.net/gh/impress/impress.js@1.1.0/js/impress.js - V1.1.0: https://cdn.jsdelivr.net/gh/impress/impress.js@1.1.0/js/impress.js
- Source: https://cdn.jsdelivr.net/gh/impress/impress.js/js/impress.js - Source: https://cdn.jsdelivr.net/gh/impress/impress.js/js/impress.js
### Getting Started Guide
Check out our new [Getting Started](GettingStarted.md) guide if you want a quick introduction to the project!
### Checking out and initializing the git repository ### Checking out and initializing the git repository
git clone --recursive https://github.com/impress/impress.js.git git clone --recursive https://github.com/impress/impress.js.git

1
build.js
View File

@@ -13,6 +13,7 @@ files.push('src/plugins/autoplay/autoplay.js',
'src/plugins/form/form.js', 'src/plugins/form/form.js',
'src/plugins/fullscreen/fullscreen.js', 'src/plugins/fullscreen/fullscreen.js',
'src/plugins/goto/goto.js', 'src/plugins/goto/goto.js',
'src/plugins/bookmark/bookmark.js',
'src/plugins/help/help.js', 'src/plugins/help/help.js',
'src/plugins/impressConsole/impressConsole.js', 'src/plugins/impressConsole/impressConsole.js',
'src/plugins/media/media.js', 'src/plugins/media/media.js',

60
examples/2D-navigation/index.html
View File

@@ -28,21 +28,42 @@
<ul> <ul>
<li>Impress.js allows you to layout your presentation in a 3D space</li> <li>Impress.js allows you to layout your presentation in a 3D space</li>
<li>Now <a href="https://github.com/impress/impress.js/tree/master/src/plugins/goto">the <li><a href="https://github.com/impress/impress.js/tree/master/src/plugins/goto">The
goto plugin</a> also allows you to specify goto plugin</a> allows you to specify
non-linear navigation!</li> non-linear navigation!</li>
<li>This demo can be navigated by <li>This demo can be navigated by
<ul> <ul>
<li>continuously pressing Space</li>
<li>continuously pressing Right Arrow</li> <li>continuously pressing Right Arrow</li>
<li>continuously pressing Down Arrow</li> <li>continuously pressing Down Arrow</li>
<li>(or freely, pressing Up, Down, Right, Left as you choose)</li> <li>(or freely, pressing Up, Down, Right, Left as you choose)</li>
</ul> </ul>
<li>It's up to you to decide which is the better structure</li>
</li>
</div>
<div id="bm0" class="step" data-scale="1" data-rel-x="1500" data-rel-y="0"
data-bookmark-key-list="0">
<h1>Using bookmark hotkeys</h1>
<ul>
<li><a href="https://github.com/impress/impress.js/tree/master/src/plugins/bookmark">The
bookmark plugin</a> also allows you to specify
non-linear navigation, in a different way.</li>
<li>This demo can <em>also</em> be navigated by
<ul>
<li>pressing 1 2 3 4 5 6 7 8 9 to fast travel directly</li>
<li>pressing J J J, K K K, L L L to cycle vertically</li>
<li>pressing U U U, I I I, O O O to cycle horizontally</li>
<li>pressing Z or [ to zoom out to the full view</li>
<li>pressing 0 to come back to this text</li>
</ul>
</li> </li>
<li>It's up to you to decide which is the better structure</li> <li>It's up to you to decide which is the better structure</li>
</ul> </ul>
</div> </div>
<div id="contents" class="step" data-rel-x="1500" data-rel-y="1500" data-scale="1"> <div id="contents" class="step" data-rel-x="0" data-rel-y="1500" data-scale="1"
data-bookmark-key-list="w" >
<h1>Choosing a treat</h1> <h1>Choosing a treat</h1>
<ul> <ul>
@@ -60,7 +81,8 @@
<!-- Ice cream slides (3) --> <!-- Ice cream slides (3) -->
<div id="icecream" class="step" data-x="2000" data-y="2000" <div id="icecream" class="step" data-x="2000" data-y="2000"
data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight" data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
data-goto-next-list="contents icecream-pro contents crisps"> data-goto-next-list="contents icecream-pro contents crisps"
data-bookmark-key-list="7 u j" >
<h1>Ice cream</h1> <h1>Ice cream</h1>
<ul> <ul>
@@ -73,7 +95,8 @@
<div id="icecream-pro" class="step" data-rel-x="0" data-rel-y="1000" <div id="icecream-pro" class="step" data-rel-x="0" data-rel-y="1000"
data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight" data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
data-goto-next-list="icecream icecream-con applepie crisps-pro"> data-goto-next-list="icecream icecream-con applepie crisps-pro"
data-bookmark-key-list="4 i j" >
<h1>Ice cream: Pro's</h1> <h1>Ice cream: Pro's</h1>
<ul> <ul>
@@ -85,7 +108,8 @@
<div id="icecream-con" class="step" data-rel-x="0" data-rel-y="1000" <div id="icecream-con" class="step" data-rel-x="0" data-rel-y="1000"
data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight" data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
data-goto-next-list="icecream-pro crisps applepie-pro crisps-con"> data-goto-next-list="icecream-pro crisps applepie-pro crisps-con"
data-bookmark-key-list="1 o j" >
<h1>Ice cream: Con's</h1> <h1>Ice cream: Con's</h1>
<ul> <ul>
@@ -99,7 +123,8 @@
<!-- Crisps slides (3) --> <!-- Crisps slides (3) -->
<div id="crisps" class="step" data-x="3500" data-y="2000" <div id="crisps" class="step" data-x="3500" data-y="2000"
data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight" data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
data-goto-next-list="icecream-con crisps-pro icecream applepie"> data-goto-next-list="icecream-con crisps-pro icecream applepie"
data-bookmark-key-list="8 u k" >
<h1>Crisps</h1> <h1>Crisps</h1>
<ul> <ul>
@@ -112,7 +137,8 @@
<div id="crisps-pro" class="step" data-rel-x="0" data-rel-y="1000" <div id="crisps-pro" class="step" data-rel-x="0" data-rel-y="1000"
data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight" data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
data-goto-next-list="crisps crisps-con icecream-pro applepie-pro"> data-goto-next-list="crisps crisps-con icecream-pro applepie-pro"
data-bookmark-key-list="5 i k" >
<h1>Crisps: Pro's</h1> <h1>Crisps: Pro's</h1>
<ul> <ul>
@@ -127,7 +153,8 @@
<div id="crisps-con" class="step" data-rel-x="0" data-rel-y="1000" <div id="crisps-con" class="step" data-rel-x="0" data-rel-y="1000"
data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight" data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
data-goto-next-list="crisps-pro applepie icecream-con applepie-con"> data-goto-next-list="crisps-pro applepie icecream-con applepie-con"
data-bookmark-key-list="2 o k" >
<h1>Crisps: Con's</h1> <h1>Crisps: Con's</h1>
<ul> <ul>
@@ -140,7 +167,8 @@
<!-- Apple pie slides (3) --> <!-- Apple pie slides (3) -->
<div id="applepie" class="step" data-x="5000" data-y="2000" <div id="applepie" class="step" data-x="5000" data-y="2000"
data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight" data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
data-goto-next-list="crisps-con applepie-pro crisps icecream-pro"> data-goto-next-list="crisps-con applepie-pro crisps icecream-pro"
data-bookmark-key-list="9 u l" >
<h1>Apple pie</h1> <h1>Apple pie</h1>
<ul> <ul>
@@ -152,7 +180,8 @@
<div id="applepie-pro" class="step" data-rel-x="0" data-rel-y="1000" <div id="applepie-pro" class="step" data-rel-x="0" data-rel-y="1000"
data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight" data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
data-goto-next-list="applepie applepie-con crisps-pro icecream-con"> data-goto-next-list="applepie applepie-con crisps-pro icecream-con"
data-bookmark-key-list="6 i l" >
<h1>Apple pie: Pro's</h1> <h1>Apple pie: Pro's</h1>
<ul> <ul>
@@ -165,7 +194,8 @@
<div id="applepie-con" class="step" data-rel-x="0" data-rel-y="1000" <div id="applepie-con" class="step" data-rel-x="0" data-rel-y="1000"
data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight" data-goto-key-list="ArrowUp ArrowDown ArrowLeft ArrowRight"
data-goto-next-list="applepie-pro conclusion crisps-con conclusion"> data-goto-next-list="applepie-pro conclusion crisps-con conclusion"
data-bookmark-key-list="3 o l" >
<h1>Apple pie: Con's</h1> <h1>Apple pie: Con's</h1>
<ul> <ul>
@@ -175,7 +205,8 @@
</div> </div>
<div id="conclusion" class="step" data-rel-x="1000" data-rel-y="1000"> <div id="conclusion" class="step" data-rel-x="1000" data-rel-y="1000"
data-bookmark-key-list="q" >
<h1>Conclusion</h1> <h1>Conclusion</h1>
<p>Can I choose all three ;-)</p> <p>Can I choose all three ;-)</p>
@@ -186,7 +217,8 @@
<a href="https://www.flickr.com/photos/stevepj2009/6296334551">stevepj2009@Flickr</a> </p> <a href="https://www.flickr.com/photos/stevepj2009/6296334551">stevepj2009@Flickr</a> </p>
</div> </div>
<div id="overview" class="step" data-x="3000" data-y="2000" data-scale="9" style="pointer-events: none;"> <div id="overview" class="step" data-x="3000" data-y="2000" data-scale="9" style="pointer-events: none;"
data-bookmark-key-list="z [" >
</div> </div>
</div> </div>

6
js/impress.js
View File

@@ -4709,6 +4709,11 @@
currentSubstepOrder = el.dataset.substepOrder; currentSubstepOrder = el.dataset.substepOrder;
el.classList.add( "substep-visible" ); el.classList.add( "substep-visible" );
el.classList.add( "substep-active" ); el.classList.add( "substep-active" );
if ( currentSubstepOrder === undefined ) {
// Stop after one substep as default order
break;
}
} }
return el; return el;
@@ -4741,6 +4746,7 @@
// Continue if there is another substep with the same substepOrder // Continue if there is another substep with the same substepOrder
if ( current > 0 && if ( current > 0 &&
visible[ current ].dataset.substepOrder !== undefined &&
visible[ current - 1 ].dataset.substepOrder === visible[ current - 1 ].dataset.substepOrder ===
visible[ current ].dataset.substepOrder ) { visible[ current ].dataset.substepOrder ) {
visible.pop(); visible.pop();

27
src/plugins/bookmark/README.md Normal file
View File

@@ -0,0 +1,27 @@
# Bookmark
Nonlinear navigation similar to the Goto plugin.
Goto supports nonlinear navigation by *locally* defining *out-links*, accessible via the arrow keys.
Bookmark supports nonlinear navigation by *globally* defining *in-links*, accessible via normal keys like 1,2,3,A,B,C.
Example:
```html
<!-- data-bookmark-key-list allows an "inbound"-oriented style of non-linear navigation. -->
<div id="..." class="step" data-bookmark-key-list="Digit1 KeyA 1 2 3 a b c">
```
An `id` is required on the `div`.
If you assign the same key to multiple steps, that hotkey will cycle among them.
WARNING: It's up to you to avoid reserved hotkeys H, B, P, ?, etc.
Author
------
Copyright 2023 Wong Meng Weng (@mengwong)
Released under the MIT license.

72
src/plugins/bookmark/bookmark.js Normal file
View File

@@ -0,0 +1,72 @@
/**
* Bookmark Plugin
*
* The bookmark plugin consists of
* a pre-init plugin,
* a keyup listener, and
* a pre-stepleave plugin.
*
* The pre-init plugin surveys all step divs to set up bookmark keybindings.
* The pre-stepleave plugin alters the destination when a bookmark hotkey is pressed.
*
* Example:
*
* <!-- data-bookmark-key-list allows an "inbound" style of non-linear navigation. -->
* <div id="..." class="step" data-bookmark-key-list="Digit1 KeyA 1 2 3 a b c">
*
* See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values for a table
* of what strings to use for each key. Both .key and .code styles are recognized.
*
* It's up to the HTML author to avoid reserved hotkeys H, B, P, ? etc.
*
* Copyright 2016-2017 Henrik Ingo (@henrikingo)
* Released under the MIT license.
*/
/* global document, impress */
( function( document ) {
"use strict";
var hotkeys = {};
function hotkeyDest( event ) {
return ( hotkeys.hasOwnProperty( event.key ) ? hotkeys[ event.key ] :
hotkeys.hasOwnProperty( event.code ) ? hotkeys[ event.code ] : null ); }
// In pre-init phase, build a map of bookmark hotkey to div id, by reviewing all steps
impress.addPreInitPlugin( function( root, api ) {
root.querySelectorAll( ".step" ).forEach( function( div ) {
if ( div.dataset.bookmarkKeyList !== undefined && div.id !== undefined ) {
div.dataset.bookmarkKeyList.split( " " ).forEach( ( k ) => {
if ( hotkeys.hasOwnProperty( k ) ) {
hotkeys[ k ].push( div.id );
} else { hotkeys[ k ] = [ div.id ]; } } ); } } );
api.lib.gc.addEventListener( document, "keyup", function( event ) {
if ( hotkeyDest( event ) !== null ) {
event.stopImmediatePropagation();
api.next( event );
// Event.preventDefault();
}
} );
} );
// In pre-stepleave phase, match a hotkey and reset destination accordingly.
impress.addPreStepLeavePlugin( function( event ) {
// Window.console.log(`bookmark: running as PreStepLeavePlugin; event=`);
// window.console.log(event)
if ( ( !event || !event.origEvent ) ) { return; }
var dest = hotkeyDest( event.origEvent );
if ( dest ) {
// Window.console.log(`bookmark: recognizing hotkey ${event.code} goes to ${dest}`)
var newTarget = document.getElementById( dest[ 0 ] ); // jshint ignore:line
if ( newTarget ) {
event.detail.next = newTarget;
dest.push( dest.shift() ); // Repeated hotkey presses cycle through each dest.
}
}
} );
} )( document );

6
src/plugins/substep/substep.js
View File

@@ -104,6 +104,11 @@
currentSubstepOrder = el.dataset.substepOrder; currentSubstepOrder = el.dataset.substepOrder;
el.classList.add( "substep-visible" ); el.classList.add( "substep-visible" );
el.classList.add( "substep-active" ); el.classList.add( "substep-active" );
if ( currentSubstepOrder === undefined ) {
// Stop after one substep as default order
break;
}
} }
return el; return el;
@@ -136,6 +141,7 @@
// Continue if there is another substep with the same substepOrder // Continue if there is another substep with the same substepOrder
if ( current > 0 && if ( current > 0 &&
visible[ current ].dataset.substepOrder !== undefined &&
visible[ current - 1 ].dataset.substepOrder === visible[ current - 1 ].dataset.substepOrder ===
visible[ current ].dataset.substepOrder ) { visible[ current ].dataset.substepOrder ) {
visible.pop(); visible.pop();