Compare commits
4 Commits
new-impres
...
getting-st
| Author | SHA1 | Date | |
|---|---|---|---|
|
67711f13cf | ||
|
|
b3a7a632c7 | ||
|
|
d0ba7ff884 | ||
| f80b6d1762 |
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,5 +1,5 @@
|
||||
/js/impress.min.js.map
|
||||
# /js/impress.min.js
|
||||
/js/impress.min.js
|
||||
/node_modules
|
||||
/npm-debug.log
|
||||
/*.tgz
|
||||
|
||||
@@ -319,7 +319,7 @@ impress().tear();
|
||||
|
||||
#### .next()
|
||||
|
||||
Navigates to the next step of the presentation using the [`goto()` function](#-goto-stepindex--stepelementid--stepelement---duration--).
|
||||
Navigates to the next step of the presentation using the [`goto()` function](#impressgotostepindexstepelementidstepelement-duration).
|
||||
|
||||
**Example:**
|
||||
|
||||
@@ -331,7 +331,7 @@ api.next();
|
||||
|
||||
#### .prev()
|
||||
|
||||
Navigates to the previous step of the presentation using the [`goto()` function](#-goto-stepindex--stepelementid--stepelement---duration--).
|
||||
Navigates to the previous step of the presentation using the [`goto()` function](#impressgotostepindexstepelementidstepelement-duration).
|
||||
|
||||
**Example:**
|
||||
|
||||
|
||||
@@ -12,9 +12,9 @@ First of all, you need to know, if you are going to have WiFi connection when yo
|
||||
Loading the script from the cdn is quite straight forward. If you copy the below example code, you need to do nothing else, impress will be loaded automatically.
|
||||
|
||||
**Direct links to different versions of the impress.js file**
|
||||
- [V2.0.0](https://cdn.jsdelivr.net/gh/impress/impress.js@2.0.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)
|
||||
- V2.0.0: https://cdn.jsdelivr.net/gh/impress/impress.js@2.0.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
|
||||
|
||||
### Download the file to your PC
|
||||
Head to the releases tab and download the source code as zip or as a tarball. Go ahead and unzip / untar it. You need to copy the folder */js/* into the folder you are working in. Optionally, if you want to make your life a bit easier, you can copy also copy the folder */css/* in there.
|
||||
@@ -50,7 +50,7 @@ Now, create a new file called *index.html* and create the basic HTML structure:
|
||||
</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.
|
||||
|
||||
@@ -62,7 +62,23 @@ Finally, we load the ```impress.js``` script from your local copy (if you have o
|
||||
```
|
||||
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 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:
|
||||
|
||||
@@ -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
|
||||
- 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
|
||||
|
||||
git clone --recursive https://github.com/impress/impress.js.git
|
||||
|
||||
51
build.js
51
build.js
@@ -1,16 +1,19 @@
|
||||
const fs = require( 'fs' );
|
||||
const fs = require('fs');
|
||||
var ls = require('ls');
|
||||
var path = require('path');
|
||||
var Terser = require("terser");
|
||||
|
||||
var files = [ 'src/impress.js' ];
|
||||
var files = ['src/impress.js'];
|
||||
// Libraries from src/lib
|
||||
files.push( 'src/lib/gc.js', 'src/lib/util.js', 'src/lib/rotation.js' );
|
||||
files.push('src/lib/gc.js', 'src/lib/util.js', 'src/lib/rotation.js')
|
||||
// Plugins from src/plugins
|
||||
files.push( 'src/plugins/autoplay/autoplay.js',
|
||||
files.push('src/plugins/autoplay/autoplay.js',
|
||||
'src/plugins/blackout/blackout.js',
|
||||
'src/plugins/extras/extras.js',
|
||||
'src/plugins/form/form.js',
|
||||
'src/plugins/fullscreen/fullscreen.js',
|
||||
'src/plugins/goto/goto.js',
|
||||
'src/plugins/bookmark/bookmark.js',
|
||||
'src/plugins/help/help.js',
|
||||
'src/plugins/impressConsole/impressConsole.js',
|
||||
'src/plugins/media/media.js',
|
||||
@@ -25,17 +28,17 @@ files.push( 'src/plugins/autoplay/autoplay.js',
|
||||
'src/plugins/stop/stop.js',
|
||||
'src/plugins/substep/substep.js',
|
||||
'src/plugins/touch/touch.js',
|
||||
'src/plugins/toolbar/toolbar.js' );
|
||||
var output = files.map( ( f )=>{
|
||||
return fs.readFileSync( f ).toString();
|
||||
}).join( '\n' );
|
||||
'src/plugins/toolbar/toolbar.js')
|
||||
var output = files.map((f)=>{
|
||||
return fs.readFileSync(f).toString();
|
||||
}).join('\n')
|
||||
|
||||
var filename = 'js/impress.js';
|
||||
fs.writeFileSync( filename, '// This file was automatically generated from files in src/ directory.\n\n' + output );
|
||||
console.log( filename );
|
||||
fs.writeFileSync(filename, '// This file was automatically generated from files in src/ directory.\n\n' + output)
|
||||
console.log(filename);
|
||||
|
||||
// terser --compress --mangle --comments '/^!/' --source-map --output js/impress.min.js js/impress.js
|
||||
var code = fs.readFileSync( 'js/impress.js' ).toString();
|
||||
var code = fs.readFileSync('js/impress.js').toString();
|
||||
var options = {
|
||||
sourceMap: {
|
||||
filename: 'js/impress.js',
|
||||
@@ -45,12 +48,28 @@ var options = {
|
||||
comments: /^!/
|
||||
}
|
||||
};
|
||||
var result = Terser.minify( {'js/impress.js': code}, options );
|
||||
var result = Terser.minify({'js/impress.js': code}, options);
|
||||
|
||||
filename = 'js/impress.min.js';
|
||||
fs.writeFileSync( filename, result.code );
|
||||
console.log( filename );
|
||||
fs.writeFileSync(filename, result.code);
|
||||
console.log(filename);
|
||||
filename = 'js/impress.min.js.map';
|
||||
fs.writeFileSync( filename, result.map );
|
||||
console.log( filename );
|
||||
fs.writeFileSync(filename, result.map);
|
||||
console.log(filename);
|
||||
|
||||
/* Auto generate an index.html that lists all the directories under examples/
|
||||
* This is useful for gh-pages, so you can link to http://impress.github.io/impress.js/examples
|
||||
*/
|
||||
var html_list = '<ul><br />\n'
|
||||
ls( 'examples/*', { type: 'dir' }).forEach(function(dir) {
|
||||
html_list += ' <li><a href="' + dir['file'] + '/">' + dir['name'] + '</a></li>\n';
|
||||
});
|
||||
html_list += '</ul>\n'
|
||||
|
||||
var html = '<html>\n<head>\n<title>Example presentations</title>\n</head>\n<body>'
|
||||
html += '<h1>Example presentations</h1>\n' + html_list
|
||||
html += '</body>\n</html>'
|
||||
|
||||
filename = path.resolve(__dirname, 'examples', 'index.html');
|
||||
fs.writeFileSync(filename, html);
|
||||
console.log(filename);
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 646 KiB After Width: | Height: | Size: 646 KiB |
@@ -28,21 +28,42 @@
|
||||
|
||||
<ul>
|
||||
<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
|
||||
goto plugin</a> also allows you to specify
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/src/plugins/goto">The
|
||||
goto plugin</a> allows you to specify
|
||||
non-linear navigation!</li>
|
||||
<li>This demo can be navigated by
|
||||
<ul>
|
||||
<li>continuously pressing Space</li>
|
||||
<li>continuously pressing Right Arrow</li>
|
||||
<li>continuously pressing Down Arrow</li>
|
||||
<li>(or freely, pressing Up, Down, Right, Left as you choose)</li>
|
||||
</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>It's up to you to decide which is the better structure</li>
|
||||
</ul>
|
||||
</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>
|
||||
|
||||
<ul>
|
||||
@@ -60,7 +81,8 @@
|
||||
<!-- Ice cream slides (3) -->
|
||||
<div id="icecream" class="step" data-x="2000" data-y="2000"
|
||||
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>
|
||||
|
||||
<ul>
|
||||
@@ -73,7 +95,8 @@
|
||||
|
||||
<div id="icecream-pro" class="step" data-rel-x="0" data-rel-y="1000"
|
||||
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>
|
||||
|
||||
<ul>
|
||||
@@ -85,7 +108,8 @@
|
||||
|
||||
<div id="icecream-con" class="step" data-rel-x="0" data-rel-y="1000"
|
||||
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>
|
||||
|
||||
<ul>
|
||||
@@ -99,7 +123,8 @@
|
||||
<!-- Crisps slides (3) -->
|
||||
<div id="crisps" class="step" data-x="3500" data-y="2000"
|
||||
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>
|
||||
|
||||
<ul>
|
||||
@@ -112,7 +137,8 @@
|
||||
|
||||
<div id="crisps-pro" class="step" data-rel-x="0" data-rel-y="1000"
|
||||
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>
|
||||
|
||||
<ul>
|
||||
@@ -127,7 +153,8 @@
|
||||
|
||||
<div id="crisps-con" class="step" data-rel-x="0" data-rel-y="1000"
|
||||
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>
|
||||
|
||||
<ul>
|
||||
@@ -140,7 +167,8 @@
|
||||
<!-- Apple pie slides (3) -->
|
||||
<div id="applepie" class="step" data-x="5000" data-y="2000"
|
||||
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>
|
||||
|
||||
<ul>
|
||||
@@ -152,7 +180,8 @@
|
||||
|
||||
<div id="applepie-pro" class="step" data-rel-x="0" data-rel-y="1000"
|
||||
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>
|
||||
|
||||
<ul>
|
||||
@@ -165,7 +194,8 @@
|
||||
|
||||
<div id="applepie-con" class="step" data-rel-x="0" data-rel-y="1000"
|
||||
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>
|
||||
|
||||
<ul>
|
||||
@@ -175,7 +205,8 @@
|
||||
</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>
|
||||
|
||||
<p>Can I choose all three ;-)</p>
|
||||
@@ -186,7 +217,8 @@
|
||||
<a href="https://www.flickr.com/photos/stevepj2009/6296334551">stevepj2009@Flickr</a> </p>
|
||||
</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>
|
||||
|
||||
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 55 KiB |
15
examples/index.html
Normal file
15
examples/index.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Example presentations</title>
|
||||
</head>
|
||||
<body><h1>Example presentations</h1>
|
||||
<ul><br />
|
||||
<li><a href="2D-navigation/">2D-navigation</a></li>
|
||||
<li><a href="3D-positions/">3D-positions</a></li>
|
||||
<li><a href="3D-rotations/">3D-rotations</a></li>
|
||||
<li><a href="classic-slides/">classic-slides</a></li>
|
||||
<li><a href="cube/">cube</a></li>
|
||||
<li><a href="markdown/">markdown</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
@@ -4709,6 +4709,11 @@
|
||||
currentSubstepOrder = el.dataset.substepOrder;
|
||||
el.classList.add( "substep-visible" );
|
||||
el.classList.add( "substep-active" );
|
||||
if ( currentSubstepOrder === undefined ) {
|
||||
|
||||
// Stop after one substep as default order
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return el;
|
||||
@@ -4741,6 +4746,7 @@
|
||||
|
||||
// Continue if there is another substep with the same substepOrder
|
||||
if ( current > 0 &&
|
||||
visible[ current ].dataset.substepOrder !== undefined &&
|
||||
visible[ current - 1 ].dataset.substepOrder ===
|
||||
visible[ current ].dataset.substepOrder ) {
|
||||
visible.pop();
|
||||
|
||||
3
js/impress.min.js
vendored
3
js/impress.min.js
vendored
File diff suppressed because one or more lines are too long
5399
package-lock.json
generated
5399
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
16
package.json
16
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "impress.js",
|
||||
"version": "2.1.0",
|
||||
"version": "1.1.0",
|
||||
"description": "It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.",
|
||||
"main": "js/impress.js",
|
||||
"repository": {
|
||||
@@ -22,27 +22,25 @@
|
||||
"url": "https://github.com/impress/impress.js/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"all": "npm run build && npm run test && npm run lint && npm run build-website",
|
||||
"all": "npm run build && npm run test && npm run lint",
|
||||
"build": "node build.js",
|
||||
"lint": "npm exec -- jshint src test/*.js && npm exec -- jscs src test/*.js",
|
||||
"new-lint": "npm exec -- eslint src test",
|
||||
"test": "npm exec -- karma start --log-level debug --single-run=true",
|
||||
"build-website": "node website/docs/src/build.js"
|
||||
"test": "npm exec -- karma start --log-level debug --single-run=true"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^6.8.0",
|
||||
"jscs": "^2.1.1",
|
||||
"jscs": "^3.0.7",
|
||||
"jshint": "^2.11.0",
|
||||
"karma": "^6.4.1",
|
||||
"karma": "^4.4.1",
|
||||
"karma-chrome-launcher": "^3.1.0",
|
||||
"karma-firefox-launcher": "^1.3.0",
|
||||
"karma-qunit": "^4.0.0",
|
||||
"markdown-it": "^13.0.1",
|
||||
"ls": "^0.2.1",
|
||||
"puppeteer": "^2.1.1",
|
||||
"qunit": "^2.9.3",
|
||||
"qunit-assert-close": "^2.1.2",
|
||||
"syn": "^0.14.1",
|
||||
"terser": "^4.6.7",
|
||||
"prompt-sync": "^4.2.0"
|
||||
"terser": "^4.6.7"
|
||||
}
|
||||
}
|
||||
|
||||
27
src/plugins/bookmark/README.md
Normal file
27
src/plugins/bookmark/README.md
Normal 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
72
src/plugins/bookmark/bookmark.js
Normal 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 );
|
||||
|
||||
@@ -104,6 +104,11 @@
|
||||
currentSubstepOrder = el.dataset.substepOrder;
|
||||
el.classList.add( "substep-visible" );
|
||||
el.classList.add( "substep-active" );
|
||||
if ( currentSubstepOrder === undefined ) {
|
||||
|
||||
// Stop after one substep as default order
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return el;
|
||||
@@ -136,6 +141,7 @@
|
||||
|
||||
// Continue if there is another substep with the same substepOrder
|
||||
if ( current > 0 &&
|
||||
visible[ current ].dataset.substepOrder !== undefined &&
|
||||
visible[ current - 1 ].dataset.substepOrder ===
|
||||
visible[ current ].dataset.substepOrder ) {
|
||||
visible.pop();
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
# impress.js.org website
|
||||
This folder contains all the code for the [impress.js.org](https://impress.js.org) website. You can find the source code for the demo presentation and the other examples in the folder *demo*.
|
||||
|
||||
## Structure
|
||||
The also contains a folder for the docs (Documentation) for the project.
|
||||
|
||||
## Roadmap
|
||||
What needs to be done:
|
||||
- Add code samples to main page
|
||||
|
||||
# DOCS
|
||||
## Contributing Documentation
|
||||
You may find more documentation for contributing documentation in ./docs/Contributing.md
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 364 KiB |
@@ -1,49 +0,0 @@
|
||||
.nav-container {
|
||||
background-color: var( --accent-background );
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
display: none;
|
||||
font-size: 0.8rem;
|
||||
height: 100%;
|
||||
background-color: var( --dropdown-color );
|
||||
}
|
||||
|
||||
.navitem {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
padding: 5%;
|
||||
width: 90%;
|
||||
background-color: var( --nav-buttons );
|
||||
font-size: 1rem;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.nav-subitem {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 0.8rem;
|
||||
width: 70%;
|
||||
padding: 5%;
|
||||
padding-left: 25%;
|
||||
background-color: var( --dropdown-color );
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.nav-subitem:hover {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.navitem:hover, .active {
|
||||
background-color: black;
|
||||
}
|
||||
@@ -1,114 +0,0 @@
|
||||
/*
|
||||
*
|
||||
* impress.js - documentation stylesheet
|
||||
*
|
||||
* Created 2023 by Janis Hutz
|
||||
*
|
||||
*/
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: calc(16pt + 0.4vw);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
:root, :root.light {
|
||||
--primary-color: black;
|
||||
--accent-background: rgb(25, 25, 148);
|
||||
--accent-color: white;
|
||||
--background-color: white;
|
||||
--accent-background-hover: rgb(124, 140, 236);
|
||||
--top-background: rgb(211, 211, 211);
|
||||
--nav-buttons: rgb(1, 1, 109);
|
||||
--dropdown-color: rgb(0, 0, 156);
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--primary-color: white;
|
||||
--accent-background: rgb(0, 0, 88);
|
||||
--accent-color: white;
|
||||
--background-color: rgb(32, 32, 32);
|
||||
--accent-background-hover: #4380a8;
|
||||
--top-background: rgb(77, 77, 77);
|
||||
--nav-buttons: rgb(0, 0, 36);
|
||||
--dropdown-color: rgb(0, 0, 116);
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
:root {
|
||||
--primary-color: white;
|
||||
--accent-background: rgb(56, 56, 112);
|
||||
--accent-color: white;
|
||||
--background-color: rgb(46, 46, 46);
|
||||
--accent-background-hover: #4380a8;
|
||||
--top-background: rgb(77, 77, 77);
|
||||
--nav-buttons: rgb(0, 0, 41);
|
||||
--dropdown-color: rgb(0, 0, 116);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
transition: all 0.5s;
|
||||
background-color: var( --background-color );
|
||||
color: var( --primary-color );
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'menu header header header header'
|
||||
'menu main main main main'
|
||||
'menu main main main main'
|
||||
'menu main main main main'
|
||||
'menu main main main main'
|
||||
'menu main main main main'
|
||||
'menu main main main main'
|
||||
'menu main main main main'
|
||||
'menu main main main main'
|
||||
'menu footer footer footer footer';
|
||||
}
|
||||
|
||||
#doc-container a {
|
||||
color: var( --primary-color );
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 60%;
|
||||
height: auto;
|
||||
margin-left: 20%;
|
||||
margin-top: 5%;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
#nav {
|
||||
grid-area: menu;
|
||||
min-width: 20vw;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
#docPage {
|
||||
max-width: 75vw;
|
||||
margin: 0;
|
||||
grid-area: main;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
#doc-container {
|
||||
width: 90%;
|
||||
margin: 5%;
|
||||
max-height: 70vh;
|
||||
}
|
||||
|
||||
#footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
#top {
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 85%;
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
.top-container {
|
||||
background-color: var( --top-background );
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.top-wrapper {
|
||||
display: flex;
|
||||
width: 80%;
|
||||
margin-right: 5%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
#darkToggle {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border-style: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: var( --primary-color );
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
/*
|
||||
*
|
||||
* footerstyle.css - impress.js Website
|
||||
*
|
||||
* Created 2023 by Janis Hutz
|
||||
*
|
||||
*/
|
||||
|
||||
/* Style the footer box */
|
||||
|
||||
.footer-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: blue;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-logo-container {
|
||||
margin: 0.5%;
|
||||
height: 45%;
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.footer-wrapper {
|
||||
width: 70%;
|
||||
height: 45%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.footer-big {
|
||||
font-size: 1.6rem;
|
||||
margin: 1%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.footer-small {
|
||||
margin: 1%;
|
||||
font-size: 1.2rem
|
||||
}
|
||||
|
||||
.credits {
|
||||
margin-top: 2%;
|
||||
color: gray;
|
||||
text-decoration: none;
|
||||
font-style: italic;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 999px) {
|
||||
.footer-container {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.footer-wrapper {
|
||||
height: 80%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.footer-logo-container {
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
@@ -1,138 +0,0 @@
|
||||
/*
|
||||
*
|
||||
* menustyle.css - impress.js Website
|
||||
*
|
||||
* Created 2023 by Janis Hutz
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
Default rules that are set for mobile interfaces
|
||||
*/
|
||||
.nav-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.toggle-wrapper {
|
||||
display: inline-flex;
|
||||
height: 100%;
|
||||
width: 80%;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
|
||||
/* Logo image and logo link (aka logo-container)*/
|
||||
.logo-container {
|
||||
margin: 0.5%;
|
||||
height: 80%;
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.mobile-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.listtoggle {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
font-size: 5vh;
|
||||
margin-right: 7%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: rgba(184, 214, 240, 1);
|
||||
}
|
||||
|
||||
/* Nav menu holder (contains the flex nav menu and has to exist because of jQuery */
|
||||
.nav-menu {
|
||||
background-color: rgba(245, 245, 245, 0.9);
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* This is the list actually containing the menu items */
|
||||
.nav-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navitem {
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-size: 1.3rem;
|
||||
padding-top: 2%;
|
||||
padding-bottom: 2%;
|
||||
width: 100%;
|
||||
}
|
||||
/*
|
||||
.navitem:hover {
|
||||
background-color: rgba(184, 214, 240, 1);
|
||||
}*/
|
||||
|
||||
|
||||
/*
|
||||
Media queries to optimise for desktop
|
||||
*/
|
||||
@media only screen and (min-width: 999px) {
|
||||
/* Top navigation bar container */
|
||||
.nav-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* div containing the nav-menu unordered list */
|
||||
.nav-wrapper {
|
||||
height: 100%;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.listtoggle, .toggle-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.mobile-wrapper {
|
||||
width: fit-content;
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
.navitem {
|
||||
font-size: 0.9rem;
|
||||
width: fit-content;
|
||||
padding: 1%;
|
||||
padding-left: 2%;
|
||||
padding-right: 2%
|
||||
}
|
||||
}
|
||||
@@ -1,211 +0,0 @@
|
||||
/*
|
||||
*
|
||||
* impress.js Website style.css
|
||||
*
|
||||
* copyright 2022 Janis Hutz
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: calc(14pt + 0.4vw);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #dcdcdc;
|
||||
/*TODO: Choose better font*/
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #0000ff;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
TITLE
|
||||
*/
|
||||
|
||||
/* This is the tile element with the background image and the title */
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 120vh;
|
||||
margin-top: -0.5vh;
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
background-image: url("/assets/main_bg_cut.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.title-content {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.title-buttons {
|
||||
margin-top: 10%;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
color: white !important;
|
||||
font-size: 1.7rem !important;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
height: 15vh;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#footer {
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
* GENERAL ITEMS
|
||||
*
|
||||
*/
|
||||
|
||||
/* Buttons */
|
||||
.button {
|
||||
display: inline-block;
|
||||
background-color: rgb(0, 128, 0);
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
margin: 5px;
|
||||
font-weight: bold;
|
||||
padding: 30px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
border-radius: 50px;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: rgb(2, 88, 2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* CONTENT BOX
|
||||
*
|
||||
*/
|
||||
|
||||
.content {
|
||||
width: 75vw;
|
||||
margin-left: 12.5vw;
|
||||
}
|
||||
|
||||
.create {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.unstyled-html, .create {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* This div will have crazy cool style, as this should represent that you can use (almost) all the CSS you want.*/
|
||||
.create .special-style {
|
||||
background-color: aqua;
|
||||
border-radius: 50px;
|
||||
font-family: cursive;
|
||||
padding: 5%;
|
||||
animation-name: background;
|
||||
animation-duration: 5s;
|
||||
animation-iteration-count: 500;
|
||||
}
|
||||
|
||||
@keyframes background {
|
||||
0% {
|
||||
background-color: aqua;
|
||||
border-radius: 50px;
|
||||
}
|
||||
50% {
|
||||
background-color: rgba(0, 255, 255, 0.2);
|
||||
border-radius: 200px;
|
||||
}
|
||||
100% {
|
||||
background-color: aqua;
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.centered {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebyside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebyside-element {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* GETTING STARTED BOX AND CHILDREN */
|
||||
|
||||
.getting-started {
|
||||
margin-top: 5%;
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.big-text {
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 999px) {
|
||||
#footer {
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.sidebyside {
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebyside-element {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
code {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
code, pre {
|
||||
max-width: 80vw;
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<title>Example presentations</title>
|
||||
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script defer src="/js/index.js"></script>
|
||||
<style>
|
||||
.list {
|
||||
margin-top: 10%;
|
||||
font-size: 1.5rem;
|
||||
list-style: none;
|
||||
}
|
||||
.list-element {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="navbar"></div>
|
||||
<div class="title">
|
||||
<div class="title-content">
|
||||
<h1 class="heading">Exam­ples</h1>
|
||||
</div>
|
||||
<ul class="list"><br>
|
||||
<li class="button"><a class="list-element" href="2D-navigation/">2D-navigation</a></li>
|
||||
<li class="button"><a class="list-element" href="3D-positions/">3D-positions</a></li>
|
||||
<li class="button"><a class="list-element" href="3D-rotations/">3D-rotations</a></li>
|
||||
<li class="button"><a class="list-element" href="classic-slides/">classic-slides</a></li>
|
||||
<li class="button"><a class="list-element" href="cube/">cube</a></li>
|
||||
<li class="button"><a class="list-element" href="markdown/">markdown</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,16 +0,0 @@
|
||||
# DOCS
|
||||
## Introduction
|
||||
The impress.js docs include all the documentation that is relevant to the user. The docs get converted from MD into HTML automatically when running ```npm run build-website```.
|
||||
|
||||
## Using the script
|
||||
Whenever you update Documentation in this repository, please run the following commands to update the website:
|
||||
```
|
||||
npm install
|
||||
npm run build-website
|
||||
```
|
||||
|
||||
## Adding new pages
|
||||
If you want to add new pages (either generated ones or normal HTML files), you need to adjust some things inside of the build.js file which you can find in [here](src/build.js). Add a new entry that should be added to the nav menu. You should always use the *template.html* file if you create a new page.
|
||||
|
||||
## Adding documentation for a new plugin
|
||||
If you add a new Plugin to impress.js, you do only need to run the build-website script as described above.
|
||||
@@ -1,56 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Contributing :: Docs - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Getting Started - Contributing</h1>
|
||||
<h3>So, you'd like to contribute to this project?</h3>
|
||||
<p>We're excited to have you in the team! We'll give you a quick introduction on contributing to this project.</p>
|
||||
<p>Development happens on <a href="https://github.com/impress/impress.js">Github</a>. Fork the project and start editing! You may want to clone the repo locally. To do this, run the following commands (omit the --recursive for a minimal checkout): </p>
|
||||
<pre>
|
||||
<code>
|
||||
git clone --recursive https://github.com/impress/impress.js
|
||||
cd impress.js
|
||||
</code>
|
||||
</pre>
|
||||
<p>Once you have made your changes, we expect you to run the following commands for testing:</p>
|
||||
<pre>
|
||||
<code>
|
||||
npm i
|
||||
npm run all
|
||||
</code>
|
||||
</pre>
|
||||
<p>This will build the <b>impress.js</b> file, as well as the <b>impress.min.js</b> file which currently is not included in the repository. It will also build the website and run some tests to make sure your code follows our code guidelines.</p>
|
||||
<h3>Repository structure</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/website">/website</a>: This folder contains all the source code for the impress.js website.</li>
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/website/demo/index.html">website/demo/index.html</a> This is the official impress.js demo, showcasing all of the features of the original impress.js, as well as some new plugins as we add them. As already mentioned, this file is well commented and acts as the official tutorial.
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/website/demo/examples/">website/demo/examples/</a> Contains several demos showcasing additional features available. <a href="website/demo/examples/classic-slides/index.html">Classic Slides</a> is a simple demo that you can use as template if you want to create very simple, rectangular, PowerPoint-like presentations.</li>
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/src/">src/</a> The main file is <a href="https://github.com/impress/impress.js/blob/master/src/impress.js">src/impress.js</a>. Additional functionality is implemented as plugins in <a href="https://github.com/impress/impress.js/tree/master/src/plugins/">src/plugins/</a>. See <a href="https://github.com/impress/impress.js/blob/master/src/plugins/README.md">src/plugins/README.md</a> for information about the plugin API and how to write plugins.</li>
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/test/">test/</a> Contains QUnit and Syn libraries that we use for writing tests, as well as some test coverage for core functionality. (Yes, more tests are much welcome.) Tests for plugins are in the directory of each plugin.</li>
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/js">js/</a> Contains <a href="https://github.com/impress/impress.js/blob/master/js/impress.js">js/impress.js</a>, which contains a concatenation of the core `src/impress.js` and all the plugins. Traditionally this is the file that you'll link to in a browser. In fact both the demo and test files do exactly that.</li>
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/website/demo/css/">css</a>: Contains a CSS file used by the demo. This file is <b>not required for using impress.js</b> in your own presentations. Impress.js creates the CSS it needs dynamically.</li>
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/extras/">extras/</a> contains plugins that for various reasons aren't enabled by default. You have to explicitly add them with their own `script` element to use them.</li>
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/build.js">build.js</a> Simple build file that creates `js/impress.js`. It also creates a minified version `impress.min.js`, but that one is not included in the github repository.</li>
|
||||
<li><a href="https://github.com/impress/impress.js/tree/master/package.json">package.js</a> An NPM package specification. This was mainly added so you can easily install <a href="https://www.npmjs.com/package/buildify">buildify</a> and run `node build.js`. Other than the build process, which is really just doing roughly `cat src/impress.js src/plugins/*/*.js > js/impress.js`, and testing, `impress.js` itself doesn't depend on Node or any NPM modules.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,44 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Docs - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Contributing - Website</h1>
|
||||
<h3>So, you'd like to contribute to the impress.js website?</h3>
|
||||
<p>Do you want to contribute to the impress.js website by writing more documentation, improving existing documentation or by adding more pages, fixing some or by doing some better styling? Then let's show you how!</p>
|
||||
<p>You should start by cloning the impress.js repository. How to do that is explained <a href="/docs/contributing">here</a>. The impress.js website is located in the <a href="https://github.com/impress/impress.js/tree/master/website">website/</a> directory. You may find the website build script in the <a href="https://github.com/impress/impress.js/tree/master/website/docs/src">website/docs/src</a> directory together with the template which you should always use when creating new pages.</p>
|
||||
<p>Whenever you add a new page to the impress.js docs, you need first add a new navigation entry in the build-script and then run it to regenerate the navigation menu:</p>
|
||||
<pre>
|
||||
<code>
|
||||
npm i
|
||||
npm run build-website
|
||||
</code>
|
||||
</pre>
|
||||
<h4>Adding a new plugin to impress.js</h4>
|
||||
<p>Whenever you add a plugin to impress.js, please also provide a README.md file. Then run the build script as described above. The script will go through the plugins directory and automatically generate the HTML files from the README's</p>
|
||||
<h3>Ideas for what to do</h3>
|
||||
<ul>
|
||||
<li>Translate into other languages</li>
|
||||
<li>Guess plugin title from title of READMEs instead of filename</li>
|
||||
<li>Optimize dark mode recognition</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,214 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>gettingStarted :: | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Introduction</h1>
|
||||
<p>Welcome to impress.js! This presentation framework allows you to create stunning presentations with the power of CSS3 transformations.
|
||||
<strong>NOTE:</strong> This Guide is not made for you, if you have never written HTML and/or CSS before. Knowing your way around in JavaScript certainly helps, but is not a necessity. You may still continue this tutorial and try to understand what we do as you go.</p>
|
||||
<p>For more advanced and complete documentation, you might prefer the <a href="/docs/reference">DOCUMENTATION</a>.</p>
|
||||
<h1>Getting started with impress.js</h1>
|
||||
<h2>Installation / acquiring the framework</h2>
|
||||
<p>First of all, you need to know, if you are going to have WiFi connection when you hold your presentation. If you are not sure, please use the method where you download the file instead of the cdn.</p>
|
||||
<h3>Including from cdn</h3>
|
||||
<p>Loading the script from the cdn is quite straight forward. If you copy the below example code, you need to do nothing else, impress will be loaded automatically.</p>
|
||||
<p><strong>Direct links to different versions of the impress.js file</strong></p>
|
||||
<ul>
|
||||
<li><a href="https://cdn.jsdelivr.net/gh/impress/impress.js@2.0.0/js/impress.js">V2.0.0</a></li>
|
||||
<li><a href="https://cdn.jsdelivr.net/gh/impress/impress.js@1.1.0/js/impress.js">V1.1.0</a></li>
|
||||
<li><a href="https://cdn.jsdelivr.net/gh/impress/impress.js/js/impress.js">Source</a></li>
|
||||
</ul>
|
||||
<h3>Download the file to your PC</h3>
|
||||
<p>Head to the releases tab and download the source code as zip or as a tarball. Go ahead and unzip / untar it. You need to copy the folder <em>/js/</em> into the folder you are working in. Optionally, if you want to make your life a bit easier, you can copy also copy the folder <em>/css/</em> in there.</p>
|
||||
<h2>Setting up the project</h2>
|
||||
<p>Open up your favorite text-editor / IDE, for example Visual Studio Code, Atom, Notepad ++, ...
|
||||
Now, create a new file called <em>index.html</em> and create the basic HTML structure:</p>
|
||||
<pre><code><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>My first presentation</title>
|
||||
<link rel="stylesheet" href="./css/impress-common.css"><!--Leave out, if you don't use impress-common.css-->
|
||||
</head>
|
||||
<body class="impress-not-supported">
|
||||
<div class="fallback-message">
|
||||
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
|
||||
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
|
||||
</div>
|
||||
|
||||
<div id="impress">
|
||||
<div id="myFirstSlide" class="step">
|
||||
<h1>My first Slide</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/impress.js"></script>
|
||||
<script>window.impress || document.write('<script src="https://cdn.jsdelivr.net/gh/impress/impress.js@2.0.0/js/impress.js">\x3C/script>');</script>
|
||||
<script>impress().init()</script>
|
||||
</body>
|
||||
</html>
|
||||
</code></pre>
|
||||
<p>Now, head into a file-manager, navigate to the file you just created (<em>index.html</em>) 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?</p>
|
||||
<p>Well, first things first, you should probably give your presentation a title. You may do this in normal HTML fashion by changing the <em>title</em> HTML tag.</p>
|
||||
<p>So now, we reached the HTML body. You can see that it already belongs to a class. This class just tells impress.js that this is the body where the "fallback-message" should be displayed when it detects, that your browser does not support CSS3 and therefore impress.js won't work. You can easily omit that class though, including the "fallback-message" div with its content, if you only intend to use the presentation for yourself and you know about the fact that some browsers might not work.</p>
|
||||
<p>Now, probably the most important part of all is the <em>div</em> that belongs to the <code>impress</code> class. This <em>div</em> should contain all the HTML code you write, as everything outside that class will not be animated by impress.js.</p>
|
||||
<p>Finally, we load the <code>impress.js</code> script from your local copy (if you have one) or from the cdn, if you do not have a local copy and execute</p>
|
||||
<pre><code>impress().init()
|
||||
</code></pre>
|
||||
<p>to initialize impress.js. Now, let's continue on to explore more and more features of this amazing tool!</p>
|
||||
<h2>Creating slides</h2>
|
||||
<p>Creating slides is fairly easy. You create a <em>div</em> that belongs to the class <code>step</code> and you are off to the races! Let me give you an example:</p>
|
||||
<pre><code><div class="step">
|
||||
Hello World
|
||||
</div>
|
||||
</code></pre>
|
||||
<p>Now, if you reload the presentation, you start to see a *slight* problem. All your text is stacked... How do we work around that?</p>
|
||||
<p>Obviously, impress.js has an answer to it. You can add the following additional attributes to your div, to make it work:</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Attribute</th>
|
||||
<th>Explanation</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>data-x</td>
|
||||
<td>Position the element along the x-axis (from left to right)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-y</td>
|
||||
<td>Position the element along the y-axis (from top to bottom)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-z</td>
|
||||
<td>Position the element along the z-axis (3D-Effect, move the element behind another one)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-rotate</td>
|
||||
<td>Rotate the element (if not using data-z!)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-rotate-x</td>
|
||||
<td>Rotate the element along the x-axis</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-rotate-y</td>
|
||||
<td>Rotate the element along the y-axis</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-rotate-z</td>
|
||||
<td>Rotate the element along the z-axis</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-scale</td>
|
||||
<td>Scale the element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>These are the basic positioning options in impress.js. All of the attributes take Strings as arguments, so be aware of the fact, that you need to put quotation marks around the numbers! The <em>data-rotate</em> attributes take an angle in form of a String as argument.</p>
|
||||
<p>Now, that you have created the slides, you might want to style them. This is where CSS comes into play. Add another file to your project called, e.g., <code>style.css</code>.</p>
|
||||
<p><strong>NOTE:</strong> Whatever you do, do not mess with positioning and rotation of the div that belongs to the class <em>step</em>, but add a div inside of it, if you really have to mess with these properties. See the example below. Always position <em>steps</em> with the <em>data-</em> attribute!</p>
|
||||
<pre><code><div class="step yourClassNameHere" data-x="1000" data-y="1000" data-z="-1000" data-scale="2" data-rotate-z="90">
|
||||
<div class="yourSubClassNameHere">
|
||||
<h1>Powerful, yet still simple</h1>
|
||||
</div>
|
||||
</div>
|
||||
</code></pre>
|
||||
<p><strong>NOTE:</strong> You may also use negative numbers for all these properties!</p>
|
||||
<h2>More advanced features</h2>
|
||||
<p>You might want to change some default settings, like the transition speed, the width & height of the target screen, etc. This table is from the <a href="/docs/reference">DOCUMENTATION</a> and was slightly adapted.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Attribute</th>
|
||||
<th>Default</th>
|
||||
<th>Explanation</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>data-transition-duration</td>
|
||||
<td>1000 (ms)</td>
|
||||
<td>Speed of transition between steps.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-width</td>
|
||||
<td>1920 (px)</td>
|
||||
<td>Width of target screen size. When presentation is viewed on a larger or smaller screen, impress.js will scale all content automatically.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-height</td>
|
||||
<td>1080 (px)</td>
|
||||
<td>Height of target screen size.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-max-scale</td>
|
||||
<td>3</td>
|
||||
<td>Maximum scale factor. (Note that the default 1 will not increase content size on larger screens!)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-min-scale</td>
|
||||
<td>0</td>
|
||||
<td>Minimum scale factor.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-perspective</td>
|
||||
<td>1000</td>
|
||||
<td>Perspective for 3D rendering. See https://developer.mozilla.org/en/CSS/perspective</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3><strong>Renaming Steps</strong></h3>
|
||||
<p>You can give each step an ID. The name of the ID will be displayed in the browsers navigation bar instead of the default <em>step-x</em> whereas x is replaced by the current step number. This can be especially helpful, when trying to jump between steps and go back to a previous one. If you want to know how to move to a specific slide, you should take a look at the <a href="/docs/plugins/goto.html">README</a> of the "Goto" plugin.</p>
|
||||
<h1>Using PLUGINS</h1>
|
||||
<p>Impress.js is limited to everything that we have discussed so far and some other details, we won't go over here. Check the <a href="/docs/reference">DOCUMENTATION</a> for that.</p>
|
||||
<p>impress.js has accumulated a lot of very useful plugins. You may find all of them <a href="/docs/plugins/.html">here</a>!</p>
|
||||
<p>Each Plugin has a README.md file which you may read to get an idea on how to use them. Some of the plugins run unnoticed in the background, like the <em>resize</em> plugin, which automatically resizes the presentation whenever the browser window changed in size. Here, I will give you an overview of some of the plugins that impress.js includes by default.</p>
|
||||
<p><strong>NOTE:</strong> As previously mentioned, if you'd like to get more info about how it works, take a look at the <a href="/docs/reference">DOCUMENTATION</a> or the README.md files of the plugins.</p>
|
||||
<h2><a href="/docs/plugins/impressConsole.html">impressConsole</a></h2>
|
||||
<p>This plugin opens up and additional browser tab which contains a speaker console. There you can see the current slide, the past slide and your notes. You add notes to your presentation by adding a <em>div</em> that belongs to the class "notes" to your <em>div</em> that belongs to the class "step".</p>
|
||||
<h3><strong>adding notes to your presentation</strong></h3>
|
||||
<p>You may add notes to your presentation by adding a div of class <em>notes</em> into the div of class <em>step</em>, like so:</p>
|
||||
<pre><code> <div class="step">
|
||||
Some text that is being displayed on your slides
|
||||
<div class="notes">
|
||||
this won't be displayed in your presentation
|
||||
</div>
|
||||
</div>
|
||||
</code></pre>
|
||||
<p>Now that you have added the notes to your HTML, it is time to hide them. You need to add the following code to your CSS file (or in the style tag in the header):</p>
|
||||
<pre><code> .notes {
|
||||
display: none;
|
||||
}
|
||||
</code></pre>
|
||||
<p>To enter it, press P.</p>
|
||||
<h2><a href="/docs/plugins/goto.html">Goto</a></h2>
|
||||
<p>This plugin allows you to directly go to a certain step, by either passing in a number or the id of the step you'd like to go to.</p>
|
||||
<h2><a href="/docs/plugins/progress.html">Progress</a></h2>
|
||||
<p>This plugin, as its name implies, displays the progress in your presentation.</p>
|
||||
<h2><a href="/docs/plugins/blackout/blackout.js.html">Blackout</a></h2>
|
||||
<p>This plugin hides the screen, if you press B, which is handy in a lot of situations.</p>
|
||||
<h2>Other plugins</h2>
|
||||
<p>You may find the other plugins <a href="/docs/plugins/.html">here</a>. It certainly helps if you familiarise yourself with the plugins.</p>
|
||||
<h1>Thank you for reading this</h1>
|
||||
<p>If you want to know more, you can always ready the <a href="/docs/reference">DOCUMENTATION</a> or, even better, read the Source Code and try to understand how it works!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,25 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Docs - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script defer src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Welcome to the impress.js docs!</h1>
|
||||
<p>impress.js is a JavaScript framework to create stunning presentations. Note: impress may not help you, if you have nothing interesting to say!</p>
|
||||
<p>If you are new to impress and you want to learn to use it, we suggest you <a href="./gettingStarted.html" class="docs-link">start here</a>!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,31 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="stylesheet" href="/css/docs/navstyle.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav-container">
|
||||
<a class="logo-container" href="/"><img class="logo" src="/assets/apple-touch-icon.png" alt="impress-logo"></a>
|
||||
<div class="nav-wrapper">
|
||||
<div class="nav-list">
|
||||
<a class="navitem" id="home" href="/docs">Home</a>
|
||||
<a class="navitem" id="gettingStarted" href="/docs/gettingStarted.html">Getting Started</a>
|
||||
<a class="navitem" id="referenceNav" onclick="toggleList( 'reference' );">API reference</a>
|
||||
<div class="dropdown" id="reference">
|
||||
<a class="nav-subitem" id="reference-home" href="/docs/reference">Home</a><a class="nav-subitem" id="CSS" href="/docs/reference/CSS.html">CSS</a><a class="nav-subitem" id="HTML" href="/docs/reference/HTML.html">HTML</a><a class="nav-subitem" id="JavaScript" href="/docs/reference/JavaScript.html">JavaScript</a><a class="nav-subitem" id="Plugins" href="/docs/reference/Plugins.html">Plugins</a><a class="nav-subitem" id="index" href="/docs/reference/index.html">index</a></div>
|
||||
<a class="navitem" id="pluginsNav" onclick="toggleList( 'plugins' );">Plugins</a>
|
||||
<div class="dropdown" id="plugins">
|
||||
<a class="nav-subitem" id="plugins-home" href="/docs/plugins">Home</a>
|
||||
<a class="nav-subitem" id="autoplay" href="/docs/plugins/autoplay.html">autoplay</a><a class="nav-subitem" id="blackout" href="/docs/plugins/blackout.html">blackout</a><a class="nav-subitem" id="extras" href="/docs/plugins/extras.html">extras</a><a class="nav-subitem" id="form" href="/docs/plugins/form.html">form</a><a class="nav-subitem" id="fullscreen" href="/docs/plugins/fullscreen.html">fullscreen</a><a class="nav-subitem" id="goto" href="/docs/plugins/goto.html">goto</a><a class="nav-subitem" id="help" href="/docs/plugins/help.html">help</a><a class="nav-subitem" id="impressConsole" href="/docs/plugins/impressConsole.html">impressConsole</a><a class="nav-subitem" id="media" href="/docs/plugins/media.html">media</a><a class="nav-subitem" id="mobile" href="/docs/plugins/mobile.html">mobile</a><a class="nav-subitem" id="mouse-timeout" href="/docs/plugins/mouse-timeout.html">mouse-timeout</a><a class="nav-subitem" id="navigation" href="/docs/plugins/navigation.html">navigation</a><a class="nav-subitem" id="navigation-ui" href="/docs/plugins/navigation-ui.html">navigation-ui</a><a class="nav-subitem" id="progress" href="/docs/plugins/progress.html">progress</a><a class="nav-subitem" id="rel" href="/docs/plugins/rel.html">rel</a><a class="nav-subitem" id="resize" href="/docs/plugins/resize.html">resize</a><a class="nav-subitem" id="skip" href="/docs/plugins/skip.html">skip</a><a class="nav-subitem" id="stop" href="/docs/plugins/stop.html">stop</a><a class="nav-subitem" id="substep" href="/docs/plugins/substep.html">substep</a><a class="nav-subitem" id="toolbar" href="/docs/plugins/toolbar.html">toolbar</a><a class="nav-subitem" id="touch" href="/docs/plugins/touch.html">touch</a></div>
|
||||
<a class="navitem" id="contributingNav" onclick="toggleList( 'contributing' );">Contributing</a>
|
||||
<div class="dropdown" id="contributing">
|
||||
<a class="nav-subitem" id="contributing-gettingStarted" href="/docs/contributing">Getting Started</a>
|
||||
<a class="nav-subitem" id="website" href="/docs/contributing/website.html">Website</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="/js/docs/nav.js"></script>
|
||||
</html>
|
||||
@@ -1,32 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="stylesheet" href="/css/docs/navstyle.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav-container">
|
||||
<a class="logo-container" href="/"><img class="logo" src="/assets/apple-touch-icon.png" alt="impress-logo"></a>
|
||||
<div class="nav-wrapper">
|
||||
<div class="nav-list">
|
||||
<a class="navitem" id="home" href="/docs">Home</a>
|
||||
<a class="navitem" id="gettingStarted" href="/docs/gettingStarted.html">Getting Started</a>
|
||||
<a class="navitem" id="referenceNav" onclick="toggleList( 'reference' );">API reference</a>
|
||||
<div class="dropdown" id="reference">
|
||||
<a class="nav-subitem" id="root" href="/docs/reference">Home</a>
|
||||
<a class="nav-subitem" id="root" href="/docs/reference/root">Root element</a>
|
||||
</div>
|
||||
<a class="navitem" id="pluginsNav" onclick="toggleList( 'plugins' );">Plugins</a>
|
||||
<div class="dropdown" id="plugins">
|
||||
<a class="nav-subitem" id="impressConsole" href="/docs/plugins/impressConsole.html">Impress Console</a>
|
||||
</div>
|
||||
<a class="navitem" id="contributingNav" onclick="toggleList( 'contributing' );">Contributing</a>
|
||||
<div class="dropdown" id="contributing">
|
||||
<a class="nav-subitem" id="contributing-gettingStarted" href="/docs/contributing/gettingStarted.html">Getting Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="/js/docs/nav.js"></script>
|
||||
</html>
|
||||
@@ -1,43 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>autoplay :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Autoplay</h1>
|
||||
<p>The <a href="https://github.com/impress/impress.js/blob/master/src/plugins/autoplay/autoplay.js">autoplay</a> plugin automatically advances the presentation after a certain timeout expired.</p>
|
||||
<h2>USAGE</h2>
|
||||
<p>You first have to enable the plugin by setting a global <code>data-autoplay</code> value on the impress-div. Then you can change individual <code>data-autoplay</code> values on each <em>step</em> by adding <code>data-autoplay</code> to it. If this value is set to <code>0</code>, there will be no more auto-advancing on this <em>step</em>. The value you enter is time in seconds to switch to the next slide.</p>
|
||||
<h2>EXAMPLE</h2>
|
||||
<p>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 <a href="/docs/gettingStarted.html">Getting Started Guide</a></p>
|
||||
<pre><code><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>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,27 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>blackout :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Blackout</h1>
|
||||
<p>This plugin is automatically enabled and runs whenever you start your presentation. You can press <em>B</em> or <em>.</em> on your keyboard to blank / unblank the screen.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,43 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>extras :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Extras Plugin</h1>
|
||||
<p>The Extras plugin will initialize the optional addon plugins from
|
||||
<a href="https://github.com/impress/impress.js/tree/master/src/plugins/extras/">extras/</a> directory, if they were loaded.</p>
|
||||
<p>Generally, for an extras plugin to have been loaded, 2 things must have happened:</p>
|
||||
<ol>
|
||||
<li>The extras plugins must be present in extras/ directory, for example after
|
||||
running <code>git submodule update</code></li>
|
||||
<li>One or more extras plugins are added to the impress.js presentation (the HTML
|
||||
file) by the author using a regular <code><script></code> tag.</li>
|
||||
</ol>
|
||||
<p>If one or more extras plugins were so added, this plugin will automatically
|
||||
discover them and perform initialization (such as calling
|
||||
<code>mermaid.initialize()</code>).</p>
|
||||
<p>If no extras plugins are added to a presentation, this plugin does nothing.</p>
|
||||
<p>Note that some extra plugins (like mathjax) initialize themselves immediately, and
|
||||
there's nothing to do here.</p>
|
||||
<h2>Author</h2>
|
||||
<p>Henrik Ingo (@henrikingo), 2016</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,36 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>form :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Form</h1>
|
||||
<p>Form support! Functionality to better support use of input, textarea, button... elements in a presentation.</p>
|
||||
<p>This plugin does two things:</p>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
<p><em><strong>THIS PLUGIN REQUIRES FURTHER DEVELOPMENT</strong></em></p>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,28 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>fullscreen :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Fullscreen</h1>
|
||||
<p>This plugin puts your presentation into fullscreen by pressing <em>F5</em>. You can leave fullscreen again by pressing <em>Esc</em>.</p>
|
||||
<p><em>Note:</em> impress.js works just fine with the normal fullscreen offered by your browser where you would (usually) press <em>F11</em> 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.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,44 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>goto :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Goto Plugin</h1>
|
||||
<p>The goto plugin is a pre-stepleave plugin. It is executed before
|
||||
<code>impress:stepleave</code> event, and will alter the destination where to transition next.</p>
|
||||
<p>Example:</p>
|
||||
<pre><code> <!-- When leaving this step, go directly to "step-5" -->
|
||||
<div class="step" data-goto="step-5">
|
||||
|
||||
<!-- When leaving this step with next(), go directly to "step-5", instead of the next step.
|
||||
If moving backwards to previous step - e.g. prev() instead of next() - then go to "step-1". -->
|
||||
<div class="step" data-goto-next="step-5" data-goto-prev="step-1">
|
||||
|
||||
<!-- data-goto-key-list and data-goto-next-list allow you to build advanced non-linear navigation. -->
|
||||
<div class="step" data-goto-key-list="ArrowUp ArrowDown ArrowRight ArrowLeft" data-goto-next-list="step-4 step-3 step-2 step-5">
|
||||
</code></pre>
|
||||
<p>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.</p>
|
||||
<h2>Author</h2>
|
||||
<p>Copyright 2016 Henrik Ingo (@henrikingo)
|
||||
Released under the MIT license.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,53 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>help :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Help screen plugin</h1>
|
||||
<p>Shows a help popup when a presentation is loaded, as well as when 'H' is pressed.</p>
|
||||
<p>To enable the help popup, add following div to your presentation:</p>
|
||||
<pre><code><div id="impress-help"></div>
|
||||
</code></pre>
|
||||
<p>Example CSS:</p>
|
||||
<pre><code> .impress-enabled #impress-help {
|
||||
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
|
||||
color: #EEEEEE;
|
||||
font-size: 80%;
|
||||
position: fixed;
|
||||
left: 2em;
|
||||
bottom: 2em;
|
||||
width: 24em;
|
||||
border-radius: 1em;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
z-index: 100;
|
||||
font-family: Verdana, Arial, Sans;
|
||||
}
|
||||
.impress-enabled #impress-help td {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
</code></pre>
|
||||
<h2>Author</h2>
|
||||
<p>Copyright Henrik Ingo (@henrikingo), 2016
|
||||
MIT License</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>impressConsole :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Impress Console Plugin</h1>
|
||||
<p>Press 'P' to show a speaker console window.</p>
|
||||
<ul>
|
||||
<li>View of current slide</li>
|
||||
<li>Preview of next slide</li>
|
||||
<li>Speaker notes (contents of a <div class="notes"> element on current slide)</li>
|
||||
<li>Navigation</li>
|
||||
</ul>
|
||||
<p>For speaker notes, add the following anywhere inside a step</p>
|
||||
<pre><code><div class="notes">Speaker notes text...</div>
|
||||
</code></pre>
|
||||
<p>Example CSS:</p>
|
||||
<pre><code>/* Hide notes from the actual presentation. This will not affect the visibility of notes in the impress console window. */
|
||||
|
||||
.notes {
|
||||
display: none;
|
||||
}
|
||||
</code></pre>
|
||||
<h2>Credits</h2>
|
||||
<ul>
|
||||
<li>Henrik Ingo, henrik.ingo@avoinelama.fi, impress.js (plugin) integration</li>
|
||||
<li>Heiko Richler, Aico.Richler@gmx.net, major changes in rev. 1.3</li>
|
||||
<li>Lennart Regebro, regebro@gmail.com, main author of impressConsole</li>
|
||||
<li>David Souther, davidsouther@gmail.com, author of the original notes.js</li>
|
||||
</ul>
|
||||
<p>MIT License</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,316 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>index :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Impress.js Plugins documentation</h1>
|
||||
<h2>The default set of plugins</h2>
|
||||
<p>A lot of impress.js features are and will be implemented as plugins. Each plugin
|
||||
has user documentation in a README.md file in <a href="https://github.com/impress/impress.js/tree/master/src/plugins/./">its own directory</a>.</p>
|
||||
<p>The plugins in this directory are called default plugins, and - unsurprisingly -
|
||||
are enabled by default. However, most of them won't do anything by default,
|
||||
rather require the user to invoke them somehow. For example:</p>
|
||||
<ul>
|
||||
<li>The <em>navigation</em> plugin waits for the user to press some keys, arrows, page
|
||||
down, page up, space or tab.</li>
|
||||
<li>The <em>autoplay</em> plugin looks for the HTML attribute <code>data-autoplay</code> to see
|
||||
whether it should do its thing. It can also be triggered with a URL GET parameter
|
||||
<code>?impress-autoplay=5</code> <em>5 is the waiting duration</em>.</li>
|
||||
<li>The <em>toolbar</em> plugin looks for a <code><div></code> element to become visible.</li>
|
||||
</ul>
|
||||
<h2>Extra addons</h2>
|
||||
<p>Yet more features are available in presentations that enable
|
||||
<a href="https://github.com/impress/impress-extras">extra addons</a>. Extra addons are 3rd party plugins
|
||||
that are not part of impress.js, but that we have nevertheless collected together into the
|
||||
impress-extras repo to provide convenient and standardized access to them. To include
|
||||
the extra addons when checking out impress.js, use git clone --recursive. Even then, they
|
||||
are not activated by default in a presentation, rather each must be included with their own <code><script></code> tag.</p>
|
||||
<p>Note: The enabled extra addons are automatically initialized by the <em>extras</em>
|
||||
plugin.</p>
|
||||
<h2>Example HTML and CSS</h2>
|
||||
<p>Generally plugins will do something sane, or nothing, by default. Hence, no
|
||||
particular HTML or CSS is required. The README file of each plugin documents the
|
||||
HTML and CSS that you can use with that plugin.</p>
|
||||
<p>For your convenience, below is some sample HTML and CSS code covering all the
|
||||
plugins that you may want to use or adapt.</p>
|
||||
<h2>Additional parameters for addons</h2>
|
||||
<p>Some addons can handle additional HTML data attributes to help us in further customization:</p>
|
||||
<ul>
|
||||
<li>Markdown-JS: You can pass a specific Markdown dialect to the plugin using <code>data-markdown-dialect="Another Dialect"</code>.</li>
|
||||
</ul>
|
||||
<h3>Sample HTML to enable plugins and extra addons</h3>
|
||||
<pre><code><head>
|
||||
<!-- CSS files if using Highlight.js or Mermaid.js extras. -->
|
||||
<link rel="stylesheet" href="../../extras/highlight/styles/github.css">
|
||||
<link rel="stylesheet" href="../../extras/mermaid/mermaid.forest.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="impress" data-autoplay="10">
|
||||
<div class="step"
|
||||
data-autoplay="15"
|
||||
data-rel-x="1000"
|
||||
data-rel-y="1000">
|
||||
|
||||
<h1>Slide content</h1>
|
||||
|
||||
<ul>
|
||||
<li class="substep">Point 1</li>
|
||||
<li class="substep">Point 2</li>
|
||||
</ul>
|
||||
|
||||
<div class="notes">
|
||||
Speaker notes are shown in the impressConsole.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="impress-toolbar"></div>
|
||||
<div class="impress-progressbar"><div></div></div>
|
||||
<div class="impress-progress"></div>
|
||||
<div id="impress-help"></div>
|
||||
|
||||
<script type="text/javascript" src="../../extras/highlight/highlight.pack.js"></script>
|
||||
<script type="text/javascript" src="../../extras/mermaid/mermaid.min.js"></script>
|
||||
<script type="text/javascript" src="../../extras/markdown/markdown.js"></script>
|
||||
<script type="text/javascript" src="../../extras/mathjax/MathJax.js?config=TeX-AMS_CHTML"></script>
|
||||
</body>
|
||||
</code></pre>
|
||||
<h3>Sample CSS related to plugins and extra addons</h3>
|
||||
<p>The sample css related to plugins and extra addons is located in <a href="https://github.com/impress/impress.js/tree/master/./css/impress-common.css">css/impress-common.css</a>.</p>
|
||||
<h1>For developers</h1>
|
||||
<p>The vision for impress.js is to provide a compact core library doing the
|
||||
actual presentations, with a collection of plugins that provide additional
|
||||
functionality. A default set of plugins are distributed together with the core
|
||||
impress.js, and are located in this directory. They are called <em>default plugins</em>
|
||||
because they are distributed and active when users use the <a href="https://github.com/impress/impress.js/tree/master/./js/impress.js">js/impress.js</a>
|
||||
in their presentations.</p>
|
||||
<h2>Building js/impress.js</h2>
|
||||
<p>The common way to use impress.js is to link to the file
|
||||
<a href="https://github.com/impress/impress.js/tree/master/./js/impress.js">js/impress.js</a>. This is a simple concatenation of the
|
||||
core impress.js and all plugins in this directory. If you edit or add code
|
||||
under <a href="https://github.com/impress/impress.js/tree/master/">src/</a>, you can run <code>node build.js</code> to recreate the distributable
|
||||
<code>js/impress.js</code> file. The build script also creates a minified file, but this
|
||||
is not included in the git repository.</p>
|
||||
<h3>Tip: Build errors</h3>
|
||||
<p>If your code has parse errors, the <code>build.js</code> will print a rather unhelpful
|
||||
exception like</p>
|
||||
<pre><code>/home/hingo/hacking/impress.js/js/impress.js
|
||||
|
||||
/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:271
|
||||
throw new JS_Parse_Error(message, line, col, pos);
|
||||
^
|
||||
Error
|
||||
at new JS_Parse_Error (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:263:18)
|
||||
at js_error (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:271:11)
|
||||
at croak (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:733:9)
|
||||
at token_error (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:740:9)
|
||||
at unexpected (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:746:9)
|
||||
at Object.semicolon [as 1] (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:766:43)
|
||||
at prog1 (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:1314:21)
|
||||
at simple_statement (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:906:27)
|
||||
at /home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:814:19
|
||||
at block_ (/home/hingo/hacking/impress.js/node_modules/uglify-js/lib/parse-js.js:1003:20)
|
||||
</code></pre>
|
||||
<p>You will be pleased to know, that the concatenation of the unminified file
|
||||
<a href="https://github.com/impress/impress.js/tree/master/./js/impress.js">js/impress.js</a> has already succeeded at this point. Just
|
||||
open a test in your browser, and the browser will show you the line and error.</p>
|
||||
<h3>Structure, naming and policy</h3>
|
||||
<p>Each plugin is contained within its own directory. The name of the directory
|
||||
is the name of the plugin. For example, imagine a plugin called <em>pluginA</em>:</p>
|
||||
<pre><code>src/plugins/plugina/
|
||||
</code></pre>
|
||||
<p>The main javascript file should use the directory name as its root name:</p>
|
||||
<pre><code>src/plugins/plugina/plugina.js
|
||||
</code></pre>
|
||||
<p>For most plugins, a single <code>.js</code> file is enough.</p>
|
||||
<p>Note that the plugin name is also used as a namespace for various things. For
|
||||
example, the <em>autoplay</em> plugin can be configured by setting the <code>data-autoplay="5"</code>
|
||||
attribute on a <code>div</code>.</p>
|
||||
<p>As a general rule ids, classes and attributes within the <code>div#impress</code> root
|
||||
element, may use the plugin name directly (e.g. <code>data-autoplay="5"</code>). However,
|
||||
outside of the root element, you should use <code>impress-pluginname</code> (e.g.
|
||||
<code><div id="impress-toolbar"></code>. The latter (longer) form also applies to all
|
||||
events, they should be prefixed with <code>impress:pluginname</code>.</p>
|
||||
<p>You should use crisp and descriptive names for your plugins. But
|
||||
sometimes you might optimize for a short namespace. Hence, the
|
||||
<a href="https://github.com/impress/impress.js/tree/master/src/plugins/rel/rel.js">Relative Positioning Plugin</a> is called <code>rel</code> to keep html attributes
|
||||
short. You should not overuse this idea!</p>
|
||||
<p>Note that for default plugins, which is all plugins in this directory,
|
||||
<strong>NO css, html or image files</strong> are allowed.</p>
|
||||
<p>Default plugins must not add any global variables.</p>
|
||||
<h3>Testing</h3>
|
||||
<p>The plugin directory should also include tests, which should use the <em>QUnit</em> and
|
||||
<em>Syn</em> libraries under <a href="https://github.com/impress/impress.js/tree/master/./test">test/</a>. You can have as many tests as you like,
|
||||
but it is suggested your first and main test file is called <code>plugina_tests.html</code>
|
||||
and <code>plugina_tests.js</code> respectively. You need to add your test <code>.js</code> file into
|
||||
<a href="https://github.com/impress/impress.js/tree/master/./qunit_test_runner.html">/qunit_test_runner.html</a>, and the <code>.js</code> file
|
||||
should start by loading the test <code>.html</code> file into the
|
||||
<code>iframe#presentation-iframe</code>. See <a href="https://github.com/impress/impress.js/tree/master/src/plugins/navigation-ui">navigation-ui</a> plugin for an
|
||||
example.</p>
|
||||
<p>You are allowed to test your plugin whatever way you like, but the general
|
||||
approach is for the test to load the <a href="https://github.com/impress/impress.js/tree/master/./js/impress.js">js/impress.js</a> file
|
||||
produced by build.js. This way you are testing what users will actually be
|
||||
using, rather than the uncompiled source code.</p>
|
||||
<h2>HowTo write a plugin</h2>
|
||||
<h3>Encapsulation</h3>
|
||||
<p>To avoid polluting the global namespace, plugins must encapsulate them in the
|
||||
standard javascript anonymous function:</p>
|
||||
<pre><code>/**
|
||||
* Plugin A - An example plugin
|
||||
*
|
||||
* Description...
|
||||
*
|
||||
* Copyright 2016 Firstname Lastname, email or github handle
|
||||
* Released under the MIT license.
|
||||
*/
|
||||
(function ( document, window ) {
|
||||
|
||||
// Plugin implementation...
|
||||
|
||||
})(document, window);
|
||||
</code></pre>
|
||||
<h3>Init plugins</h3>
|
||||
<p>We categorize plugins into various categories, based on how and when they are
|
||||
called, and what they do.</p>
|
||||
<p>An init plugin is the simplest kind of plugin. It simply listens for the
|
||||
<code>impress().init()</code> method to send the <code>impress:init</code> event, at which point
|
||||
the plugin can initialize itself and start doing whatever it does, for example
|
||||
by calling methods in the public api returned by <code>impress()</code>.</p>
|
||||
<p>The <code>impress:init</code> event has the <code>div#impress</code> element as its <code>target</code> attribute,
|
||||
whereas <code>event.detail.api</code> contains the same object that is returned by calling
|
||||
<code>impress()</code>. It is customary to store the api object sent by the event rather than
|
||||
calling <code>impress()</code> from the global namespace.</p>
|
||||
<p>Example:</p>
|
||||
<pre><code>/**
|
||||
* Plugin A - An example plugin
|
||||
*
|
||||
* Description...
|
||||
*
|
||||
* Copyright 2016 Firstname Lastname, email or github handle
|
||||
* Released under the MIT license.
|
||||
*/
|
||||
(function ( document, window ) {
|
||||
var root;
|
||||
var api;
|
||||
var lib;
|
||||
|
||||
document.addEventListener( "impress:init", function( event ) {
|
||||
root = event.target;
|
||||
api = event.detail.api;
|
||||
lib = api.lib;
|
||||
|
||||
// Element attributes starting with "data-", become available under
|
||||
// element.dataset. In addition hyphenized words become camelCased.
|
||||
var data = root.dataset;
|
||||
// Get value of `<div id="impress" data-plugina-foo="...">`
|
||||
var foo = data.pluginaFoo;
|
||||
// ...
|
||||
}
|
||||
})(document, window);
|
||||
</code></pre>
|
||||
<p>Both <a href="https://github.com/impress/impress.js/tree/master/src/plugins/navigation/navigation.js">Navigation</a> and <a href="https://github.com/impress/impress.js/tree/master/src/plugins/autoplay/autoplay.js">Autoplay</a>
|
||||
are init plugins.</p>
|
||||
<p>To provide end user configurability in your plugin, a good idea might be to
|
||||
read html attributes from the impress presentation. The
|
||||
<a href="https://github.com/impress/impress.js/tree/master/src/plugins/autoplay/autoplay.js">Autoplay</a> plugin does exactly this, you can provide
|
||||
a default value in the <code>div#impress</code> element, or in each <code>div.step</code>.</p>
|
||||
<p>A plugin must only use html attributes in its designated namespace, which is</p>
|
||||
<pre><code>data-pluginName-*="value"
|
||||
</code></pre>
|
||||
<p>For example, if <em>pluginA</em> offers config options <code>foo</code> and <code>bar</code>, it would look
|
||||
like this:</p>
|
||||
<pre><code><div id="impress" data-plugina-foo="5" data-plugina-bar="auto" >
|
||||
</code></pre>
|
||||
<h3>Pre-init plugins</h3>
|
||||
<p>Some plugins need to run before even impress().init() does anything. These
|
||||
are typically <em>filters</em>: they want to modify the html via DOM calls, before
|
||||
impress.js core parses the presentation. We call these <em>pre-init plugins</em>.</p>
|
||||
<p>A pre-init plugin must be called synchronously, before <code>impress().init()</code> is
|
||||
executed. Plugins can register themselves to be called in the pre-init phase
|
||||
by calling:</p>
|
||||
<pre><code>impress.addPreInitPlugin( plugin [, weight] );
|
||||
</code></pre>
|
||||
<p>The argument <code>plugin</code> must be a function. <code>weight</code> is optional and defaults to
|
||||
<code>10</code>. Plugins are ordered by weight when they are executed, with lower weight
|
||||
first.</p>
|
||||
<p>The <a href="https://github.com/impress/impress.js/tree/master/src/plugins/rel/rel.js">Relative Positioning Plugin</a> is an example of a pre-init plugin.</p>
|
||||
<h3>Pre-StepLeave plugins</h3>
|
||||
<p>A <em>pre-stepleave plugin</em> is called synchronously from impress.js core at the
|
||||
beginning of <code>impress().goto()</code>.</p>
|
||||
<p>To register a plugin, call</p>
|
||||
<pre><code>impress.addPreStepLeavePlugin( plugin [, weight] );
|
||||
</code></pre>
|
||||
<p>When the plugin function is executed, it will be passed an argument
|
||||
that resembles the <code>event</code> object from DOM event handlers:</p>
|
||||
<p><code>event.target</code> contains the current step, which we are about to leave.</p>
|
||||
<p><code>event.detail.next</code> contains the element we are about to transition to.</p>
|
||||
<p><code>event.detail.reason</code> contains a string, one of "next", "prev" or "goto",
|
||||
which tells you which API function was called to initiate the transition.</p>
|
||||
<p><code>event.detail.transitionDuration</code> contains the transitionDuration for the
|
||||
upcoming transition.</p>
|
||||
<p>A pre-stepleave plugin may alter the values in <code>event.detail</code> (except for
|
||||
<code>reason</code>), and this can change the behavior of the upcoming transition.
|
||||
For example, the <code>goto</code> plugin will set the <code>event.detail.next</code> to point to
|
||||
some other element, causing the presentation to jump to that step instead.</p>
|
||||
<h3>GUI plugins</h3>
|
||||
<p>A <em>GUI plugin</em> is actually just an init plugin, but is a special category that
|
||||
exposes visible widgets or effects in the presentation. For example, it might
|
||||
provide clickable buttons to go to the next and previous slide.</p>
|
||||
<p>Note that all plugins shipped in the default set <strong>must not</strong> produce any visible
|
||||
html elements unless the user asks for it. A recommended best practice is to let
|
||||
the user add a div element, with an id equaling the plugin's namespace, in the
|
||||
place where he wants to see whatever visual UI elements the plugin is providing:</p>
|
||||
<pre><code><div id="impress-plugina"></div>
|
||||
</code></pre>
|
||||
<p>Another way to show the elements of a UI plugin might be by allowing the user
|
||||
to explicitly press a key, like "H" for a help dialog.</p>
|
||||
<p><a href="/docs/plugins/toolbar">Toolbar plugin</a> is an example of a GUI plugin. It presents
|
||||
a toolbar where other plugins can add their buttons in a centralized fashion.</p>
|
||||
<p>Remember that for default plugins, even GUI plugins, no html files, css files
|
||||
or images are allowed. Everything must be generated from javascript. The idea
|
||||
is that users can theme widgets with their own CSS. (A plugin is of course welcome
|
||||
to provide example CSS that can be copypasted :-)</p>
|
||||
<h2>Dependencies</h2>
|
||||
<p>If <em>pluginB</em> depends on the existence of <em>pluginA</em>, and also <em>pluginA</em> must run
|
||||
before <em>pluginB</em>, then <em>pluginB</em> should not listen to the <code>impress:init</code> event,
|
||||
rather <em>pluginA</em> should send its own init event, which <em>pluginB</em> listens to.</p>
|
||||
<p>Example:</p>
|
||||
<pre><code>// pluginA
|
||||
document.addEventListener("impress:init", function (event) {
|
||||
// plugin A does it's own initialization first...
|
||||
|
||||
// Signal other plugins that plugin A is now initialized
|
||||
var root = document.querySelector( "div#impress" );
|
||||
var event = document.createEvent("CustomEvent");
|
||||
event.initCustomEvent("impress:plugina:init', true, true, { "plugina" : "data..." });
|
||||
root.dispatchEvent(event);
|
||||
}, false);
|
||||
|
||||
// pluginB
|
||||
document.addEventListener("impress:plugina:init", function (event) {
|
||||
// plugin B implementation
|
||||
}, false);
|
||||
</code></pre>
|
||||
<p>A plugin should use the namespace <code>impress:pluginname:*</code> for any events it sends.</p>
|
||||
<p>In theory all plugins could always send an <code>init</code> and other events, but in
|
||||
practice we're adding them on an as needed basis.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,49 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>media :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Media</h1>
|
||||
<p>This plugin will do the following things:</p>
|
||||
<ul>
|
||||
<li>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.</li>
|
||||
<li>Introduce the following new data attributes:
|
||||
<ul>
|
||||
<li>data-media-autoplay="true": Autostart media when entering its step.</li>
|
||||
<li>data-media-autostop="true": Stop media (= pause and reset to start), when leaving its step.</li>
|
||||
<li>data-media-autopause="true": Pause media but keep current time when leaving its step.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>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.</p>
|
||||
<p>The same rule applies when this attributes is added to the root element. Settings can be overwritten for individual steps and media.
|
||||
Examples:</p>
|
||||
<ul>
|
||||
<li>data-media-autoplay="true" data-media-autostop="true": start media on enter, stop on leave, restart from beginning when re-entering the step.</li>
|
||||
<li>data-media-autoplay="true" data-media-autopause="true": start media on enter, pause on leave, resume on re-enter</li>
|
||||
<li>data-media-autoplay="true" data-media-autostop="true" data-media-autopause="true": start media on enter, stop on leave (stop overwrites pause).</li>
|
||||
<li>data-media-autoplay="true" data-media-autopause="false": let media start automatically when entering a step and let it play when leaving the step.</li>
|
||||
<li><code><div id="impress" data-media-autoplay="true"> ... <div class="step" data-media-autoplay="false"></code>
|
||||
All media is startet automatically on all steps except the one that has the data-media-autoplay="false" attribute.</li>
|
||||
<li>Pro tip: Use <code><audio onended="impress().next()"> or <video onended="impress().next()"></code> to proceed to the next step automatically, when the end of the media is reached.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,50 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>mobile :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Mobile devices support</h1>
|
||||
<p>Presentations with a lot of 3D effects and graphics can consume a lot of resources, especially on mobile devices.
|
||||
This plugin provides some CSS classes that can be used to hide most of the slides, only showing the current, previous
|
||||
and next slide.</p>
|
||||
<p>In particular, this plugin adds:</p>
|
||||
<p><code>body.impress-mobile</code> class, if it detects running on a mobile OS.</p>
|
||||
<p><code>div.prev</code> and <code>div.prev</code> to the adjacent steps to the current one. Note that the current slide is already identified
|
||||
by <code>present</code> and <code>active</code> CSS classes.</p>
|
||||
<h2>Example CSS</h2>
|
||||
<pre><code> body.impress-mobile .step {
|
||||
display:none;
|
||||
}
|
||||
body.impress-mobile .step.active,
|
||||
body.impress-mobile .step.present,
|
||||
body.impress-mobile .step.next,
|
||||
body.impress-mobile .step.prev {
|
||||
display:block;
|
||||
}
|
||||
</code></pre>
|
||||
<h2>Note</h2>
|
||||
<p>This plugin does not take into account redirects that could happen with skip, goto and other plugins. The active
|
||||
step will of course always be correct, but "non-linear" transitions to anything else than the actual previous and next
|
||||
steps will probably not look correct.</p>
|
||||
<h2>Author</h2>
|
||||
<p>Kurt Zenisek (@KZeni)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,43 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>mouse-timeout :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Mouse timeout plugin</h1>
|
||||
<p>After 3 seconds of mouse inactivity, add the css class
|
||||
<code>body.impress-mouse-timeout</code>. On <code>mousemove</code>, <code>click</code> or <code>touch</code>, remove the
|
||||
class.</p>
|
||||
<p>The use case for this plugin is to use CSS to hide elements from the screen
|
||||
and only make them visible when the mouse is moved. Examples where this
|
||||
might be used are: the toolbar from the toolbar plugin, and the mouse cursor
|
||||
itself.</p>
|
||||
<h2>Example CSS</h2>
|
||||
<pre><code>body.impress-mouse-timeout {
|
||||
cursor: none;
|
||||
}
|
||||
body.impress-mouse-timeout div#impress-toolbar {
|
||||
display: none;
|
||||
}
|
||||
</code></pre>
|
||||
<p>Copyright 2016 Henrik Ingo (@henrikingo)
|
||||
Released under the MIT license.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,33 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>navigation-ui :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Navigation UI plugin</h1>
|
||||
<p>This plugin provides UI elements "back", "forward" and a list to select
|
||||
a specific slide number.</p>
|
||||
<p>Element attribut title is used for select option content if available, it uses element id if no title is provided.</p>
|
||||
<p>The navigation controls are visible if the toolbar plugin is enabled. To add the toolbar to your
|
||||
presentations, <a href="/docs/plugins/toolbar">see toolbar plugin README</a>.</p>
|
||||
<h2>Author</h2>
|
||||
<p>Henrik Ingo (@henrikingo), 2016</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,39 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>navigation :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Navigation</h1>
|
||||
<p>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 <em>init plugin</em>. It's a simple kind of
|
||||
impress.js plugin. When loaded, it starts listening to the <code>impress:init</code>
|
||||
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 <code>impress:init</code> method, as well as using
|
||||
the public api <code>next(), prev(),</code> etc when keys are pressed.
|
||||
Copyright 2011-2012 Bartek Szopka (@bartaz)
|
||||
Released under the MIT license.</p>
|
||||
<p><em><strong>Author:</strong></em></p>
|
||||
<p>Bartek Szopka</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,60 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>progress :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Progress plugin</h1>
|
||||
<p>Progressbar and pagexounter for impress.js presentations</p>
|
||||
<h2>Usage</h2>
|
||||
<p>Add a div for progressbar and/or progress as you can see it here:</p>
|
||||
<h3>HTML</h3>
|
||||
<pre><code> <div class="impress-progressbar"><div></div></div>
|
||||
<div class="impress-progress"></div>
|
||||
</code></pre>
|
||||
<h3>Sample CSS</h3>
|
||||
<pre><code>.impress-progressbar {
|
||||
position: absolute;
|
||||
right: 318px;
|
||||
bottom: 1px;
|
||||
left: 118px;
|
||||
border-radius: 7px;
|
||||
border: 2px solid rgba(100, 100, 100, 0.2);
|
||||
}
|
||||
.impress-progressbar DIV {
|
||||
width: 0;
|
||||
height: 2px;
|
||||
border-radius: 5px;
|
||||
background: rgba(75, 75, 75, 0.4);
|
||||
transition: width 1s linear;
|
||||
}
|
||||
.impress-progress {
|
||||
position: absolute;
|
||||
left: 59px;
|
||||
bottom: 1px;
|
||||
text-align: left;
|
||||
opacity: 0.6;
|
||||
}
|
||||
</code></pre>
|
||||
<p>Feel free to change the style of your progressbar as you like by editing the CSS file.</p>
|
||||
<h2>Author</h2>
|
||||
<p>Copyright 2014: Matthias Bilger (@m42e)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,128 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>rel :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Relative Positioning Plugin</h1>
|
||||
<p>This plugin provides support for defining the coordinates of a step relative
|
||||
to previous steps. This is often more convenient when creating presentations,
|
||||
since as you add, remove or move steps, you may not need to edit the positions
|
||||
as much as is the case with the absolute coordinates supported by impress.js
|
||||
core.</p>
|
||||
<p>Example:</p>
|
||||
<pre><code><!-- Position step 1000 px to the right and 500 px up from the previous step. -->
|
||||
<div class="step" data-rel-x="1000" data-rel-y="500">
|
||||
|
||||
<!-- Position step 1000 px to the left and 750 px up from the step with id "title". -->
|
||||
<div class="step" data-rel-x="-1000" data-rel-y="750" data-rel-to="title">
|
||||
</code></pre>
|
||||
<p>Following html attributes are supported for step elements:</p>
|
||||
<pre><code>data-rel-x
|
||||
data-rel-y
|
||||
data-rel-z
|
||||
data-rel-to
|
||||
|
||||
data-rel-rotate-x
|
||||
data-rel-rotate-y
|
||||
data-rel-rotate-z
|
||||
|
||||
data-rel-position
|
||||
data-rel-reset
|
||||
</code></pre>
|
||||
<p>Non-zero values are also inherited from the previous step. This makes it easy to
|
||||
create a boring presentation where each slide shifts for example 1000px down
|
||||
from the previous.</p>
|
||||
<p>The above relative values are ignored, or set to zero, if the corresponding
|
||||
absolute value (<code>data-x</code> etc...) is set. Note that this also has the effect of
|
||||
resetting the inheritance functionality.</p>
|
||||
<p>In addition to plain numbers, which are pixel values, it is also possible to
|
||||
define relative positions as a multiple of screen height and width, using
|
||||
a unit of "h" and "w", respectively, appended to the number.</p>
|
||||
<p>Example:</p>
|
||||
<pre><code><div class="step" data-rel-x="1.5w" data-rel-y="1.5h">
|
||||
</code></pre>
|
||||
<p>Note that referencing a special step with the <code>data-rel-to</code> attribute is <em>limited to previous steps</em> to avoid the possibility of circular or offending positioning.
|
||||
If you need a reference to a step that is shown later make use of the goto plugin:</p>
|
||||
<pre><code><div id="shown-first" class="step" data-goto-next="shown-earlier">
|
||||
<div id="shown-later" class="step" data-goto-prev="shown-earlier" data-goto-next="shown-last">
|
||||
<div id="shown-earlier" class="step" data-rel-to="shown-later" data-rel-x="1000" data-rel-y="500" data-goto-prev="shown-first" data-goto-next="shown-later">
|
||||
<div id="shown-last" class="step" data-goto-prev="shown-later">
|
||||
</code></pre>
|
||||
<h2>Relative positioning</h2>
|
||||
<p>All <code>data-rel-x</code>/<code>y</code>/<code>z</code> is used world coordinate by default. So the value should be alternated according to the rotation state of previous slides.</p>
|
||||
<p>To easy relative positioning, the <code>data-rel-position</code> attribute is introduced.</p>
|
||||
<p><code>data-rel-position</code> has a default value of "absolute", which works like this attribute is not introduced.</p>
|
||||
<p>When <code>data-rel-position="relative"</code>, everything changed. The rotation of previous is no need to be considered, you can set all the <code>data-rel-</code> attributes as if the previous has no rotation. This plugin will calculate the acual position according to the position and rotation of the previous slide and the relative settings. This make it possible to split a presentation into parts, construct each parts standalone without consider the final position, and then assemble them together.</p>
|
||||
<p>For example, if you want the slide slided in from the right hand side, all you need is <code>data-rel-x="1000"</code>, no matter the rotation of the previous slide. If the previous slide has <code>data-rotate-z="90"</code>, the actual attribute of this slide will work like <code>data-rel-y="1000"</code>.</p>
|
||||
<p>Not only relative positions, the relative rotations can be used while <code>data-rel-position="relative"</code>.</p>
|
||||
<p>For example, <code>data-rel-rotate-y="45"</code> will make the slide has an angle of 45 degree to the previous slide. It make it easy to build a circle and do other complicated positioning.</p>
|
||||
<p>If not set, the <code>data-rel-position</code> attribute will be inherited from previous slide. So we only need to set it at the first slide, then all done.</p>
|
||||
<p>To avoid the boring need to set most <code>data-rel-*</code> to zero, but set only one or two ones, <code>data-rel-reset</code> attribute can be used:</p>
|
||||
<ul>
|
||||
<li><code>data-rel-reset</code> equals to: <code>data-rel-x="0" data-rel-y="0" data-rel-z="0" data-rel-rotate-x="0" data-rel-rotate-y="0" data-rel-rotate-z="0"</code></li>
|
||||
<li><code>data-rel-reset="all"</code> works like <code>data-rel-reset</code>, in additions <code>data-rotate-x="0" data-rotate-y="0" data-rotate-z="0"</code></li>
|
||||
</ul>
|
||||
<p>When <code>data-rel-position="relative"</code> and <code>data-rel-to</code> is specified, <code>data-rotate-*</code> and <code>data-rel-*</code> will be inherited from specified slide too.</p>
|
||||
<h2>IMPORTANT: Incompatible change</h2>
|
||||
<p>Enabling / adding this plugin has a small incompatible side effect on default values.</p>
|
||||
<p>Prior to this plugin, a missing data-x/y/z attribute would be assigned the default value of 0.
|
||||
But when using a version of impress.js with this plugin enabled, a missing data-x/y/z attribute
|
||||
will inherit the value from the previous step. (The first step will inherit the default value of 0.)</p>
|
||||
<p>For example, if you have an old presentation with the following 3 steps, they would be positioned
|
||||
differently when using a version of impress.js that includes this plugin:</p>
|
||||
<pre><code><div class="step" data-x="100" data-y="100" data-z="100"></div>
|
||||
<div class="step" data-x="100" data-y="100"></div>
|
||||
<div class="step" data-x="100" data-y="100"></div>
|
||||
</code></pre>
|
||||
<p>To get the same rendering now, you need to add an explicit <code>data-z="0"</code> to the second step:</p>
|
||||
<pre><code><div class="step" data-x="100" data-y="100" data-z="100"></div>
|
||||
<div class="step" data-x="100" data-y="100" data-z="0"></div>
|
||||
<div class="step" data-x="100" data-y="100"></div>
|
||||
</code></pre>
|
||||
<p>Note that the latter code will render correctly also in old versions of impress.js.</p>
|
||||
<p>If you have an old presentation that doesn't use relative positioning, and for some reason you
|
||||
cannot or don't want to add the explicit 0 values where needed, your last resort is to simply
|
||||
remove the <code>rel.js</code> plugin completely. You can either:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Remove <code>rel.js</code> from <a href="https://github.com/impress/impress.js/blob/master/src/plugins/build.js">/build.js</a> and recompile <code>impress.js</code> with: <code>npm build</code></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Just open [/js/impress.js] in an editor and delete the <code>rel.js</code> code.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Or, just uncomment the following single line, which is the last line of the plugin:</p>
|
||||
<pre><code> impress.addPreInitPlugin( rel );
|
||||
</code></pre>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>About Pre-Init Plugins</h2>
|
||||
<p>This plugin is a <em>pre-init plugin</em>. It is called synchronously from impress.js
|
||||
core at the beginning of <code>impress().init()</code>. This allows it to process its own
|
||||
data attributes first, and possibly alter the data-x, data-y and data-z attributes
|
||||
that will then be processed by <code>impress().init()</code>.</p>
|
||||
<p>(Another name for this kind of plugin might be called a <em>filter plugin</em>, but
|
||||
<em>pre-init plugin</em> is more generic, as a plugin might do whatever it wants in
|
||||
the pre-init stage.)</p>
|
||||
<h2>Author</h2>
|
||||
<p>Henrik Ingo (@henrikingo), 2016</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,27 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>resize :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Resize</h1>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>skip :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Skip Plugin</h1>
|
||||
<p>Example:</p>
|
||||
<pre><code> <!-- This slide is disabled in presentations, when moving with next()
|
||||
and prev() commands, but you can still move directly to it, for
|
||||
example with a url (anything using goto()). -->
|
||||
<div class="step skip">
|
||||
</code></pre>
|
||||
<p>The skip plugin is a pre-stepleave plugin. It is executed before
|
||||
<code>impress:stepleave</code> event. If the next step also has <code>class="skip"</code>
|
||||
set, it will set the next step to the one after that.</p>
|
||||
<h2>Author</h2>
|
||||
<p>Copyright 2016 Henrik Ingo (@henrikingo)
|
||||
Released under the MIT license.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,39 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>stop :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Stop Plugin</h1>
|
||||
<p>Example:</p>
|
||||
<pre><code> <!-- Stop at this slide.
|
||||
(For example, when used on the last slide, this prevents the
|
||||
presentation from wrapping back to the beginning.) -->
|
||||
<div class="step stop">
|
||||
</code></pre>
|
||||
<p>The stop plugin is a pre-stepleave plugin. It is executed before
|
||||
<code>impress:stepleave</code> event. If the current slide has <code>class="stop"</code>
|
||||
set, it will disable the next() command by setting the next slide to the current
|
||||
slide.</p>
|
||||
<h2>Author</h2>
|
||||
<p>Copyright 2016 Henrik Ingo (@henrikingo)
|
||||
Released under the MIT license.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,60 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>substep :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Substep Plugin</h1>
|
||||
<p>Reveal each substep (such as a bullet point) of the step separately. Just like in PowerPoint!</p>
|
||||
<p>If the current step contains html elements with <code>class="substep"</code> then this plugin will prevent a
|
||||
<code>prev()</code> / <code>next()</code> call to leave the slide, and instead reveal the next substep (for <code>next()</code>) or
|
||||
alternatively hide one (for <code>prev()</code>). Only once all substeps are shown, will a call to <code>next()</code>
|
||||
actually move to the next step, and only when all are hidden will a call to <code>prev()</code> move to the
|
||||
previous one.</p>
|
||||
<p>By default, this plugin reveals substeps in the order in which they appear in the HTML. If you
|
||||
would like to reveal them in a different order, you can supply an integer to <code>data-substep-order</code>.
|
||||
If you do so, this plugin will reveal the substeps in ascending order; any substeps without a
|
||||
specified <code>data-substep-order</code> will be revealed after all substeps with a specified order have
|
||||
been revealed.</p>
|
||||
<p>Calls to <code>goto()</code> will be ignored by this plugin, i.e. <code>goto()</code> will transition to whichever step is
|
||||
the target.</p>
|
||||
<p>In practice what happens is that when each substep is stepped through via <code>next()</code> calls, a
|
||||
<code>class="substep-visible"</code> class is added to the element. It is up to the presentation author to
|
||||
use the appropriate CSS to make the substeps hidden and visible.</p>
|
||||
<p>Example:</p>
|
||||
<pre><code> <style type="text/css">
|
||||
.substep { opacity: 0; }
|
||||
.substep.substep-visible { opacity: 1; transition: opacity 1s; }
|
||||
</style>
|
||||
|
||||
<div class="step">
|
||||
<h1>Fruits</h1>
|
||||
<p class="substep">Orange</p>
|
||||
<p class="substep">Apple</p>
|
||||
</div>
|
||||
</code></pre>
|
||||
<p>Classes:</p>
|
||||
<p><code>substep-active</code> - The most recent substep in the current step</p>
|
||||
<p><code>substep-visible</code> - The most recent and all previous substeps in the current step</p>
|
||||
<h2>Author</h2>
|
||||
<p>Copyright 2017 Henrik Ingo (@henrikingo)
|
||||
Released under the MIT license.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,55 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>toolbar :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Toolbar plugin</h1>
|
||||
<p>This plugin provides a generic graphical toolbar. Other plugins that
|
||||
want to expose a button or other widget, can add those to this toolbar.</p>
|
||||
<p>Using a single consolidated toolbar for all GUI widgets makes it easier
|
||||
to position and style the toolbar rather than having to do that for lots
|
||||
of different divs.</p>
|
||||
<p>To add/activate the toolbar in your presentation, add this div:</p>
|
||||
<pre><code><div id="impress-toolbar"></div>
|
||||
</code></pre>
|
||||
<p>Styling the toolbar is left to presentation author. Here's an example CSS:</p>
|
||||
<pre><code>.impress-enabled div#impress-toolbar {
|
||||
position: fixed;
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.impress-enabled div#impress-toolbar > span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</code></pre>
|
||||
<p>The <a href="/docs/plugins/mouse-timeout">mouse-timeout</a> plugin can be leveraged to hide
|
||||
the toolbar from sight, and only make it visible when mouse is moved.</p>
|
||||
<pre><code>body.impress-mouse-timeout div#impress-toolbar {
|
||||
display: none;
|
||||
}
|
||||
</code></pre>
|
||||
<p>If you're writing a plugin and would like to add a widget to the toolbar, see
|
||||
<a href="https://github.com/impress/impress.js/blob/master/src/plugins/toolbar/toolbar.js">the top of the source file for further instructions</a>.</p>
|
||||
<h2>Author</h2>
|
||||
<p>Henrik Ingo (@henrikingo), 2016</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,27 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>touch :: plugins | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>Touch</h1>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,78 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS :: reference | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h2 id="css">CSS</h2>
|
||||
<h3 id="4d-states--past---present-and--future-classes">4D States (.past, .present and .future classes)</h3>
|
||||
<p>The <code>.future</code> class is added to all <a href="/docs/reference/HTML.html#step-element">Step Elements</a> that haven't been visited yet.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-CSS">.future {
|
||||
display: none;
|
||||
}
|
||||
</code></pre>
|
||||
<p>The <code>.present</code> class is added to the <a href="/docs/reference/HTML.html#step-element">Step Element</a> that is currently at the center of the camera. This is useful to create animations inside the step once the camera navigates to it.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-CSS">.present .rotating {
|
||||
transform: rotate(-10deg);
|
||||
transition-delay: 0.25s;
|
||||
}
|
||||
</code></pre>
|
||||
<p>The <code>.past</code> class is added to all <a href="/docs/reference/HTML.html#step-element">Step Elements</a> that have been visited at least once.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-CSS">.past {
|
||||
display: none;
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="current-active-step--active-class">Current Active Step (.active class)</h3>
|
||||
<p>The <code>.active</code> class is added to the <a href="/docs/reference/HTML.html#step-element">Step Element</a> that is currently visible at the center of the camera.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-CSS">.step {
|
||||
opacity: 0.3;
|
||||
transition: opacity 1s;
|
||||
}
|
||||
.step.active {
|
||||
opacity: 1
|
||||
}
|
||||
</code></pre>
|
||||
<p>At the same time, the <code>impress-on-*</code> class is added to the body element, the class name represents the active <a href="/docs/reference/HTML.html#step-element">Step Element</a> id. This allows for custom global styling, since you can't match a CSS class backwards from the active <a href="/docs/reference/HTML.html#step-element">Step Element</a> to the <code>body</code>.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-CSS">.impress-on-overview .step {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.impress-on-step-1,
|
||||
.impress-on-step-2,
|
||||
.impress-on-step-3 {
|
||||
background: LightBlue;
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="progressive-enhancement--impress-not-supported-class">Progressive Enhancement (.impress-not-supported class)</h3>
|
||||
<p>The <code>.impress-not-supported</code> class is added to the <code>body</code> element if the browser doesn't support the features required by impress.js to work, it is useful to apply some fallback styles in the CSS.</p>
|
||||
<p>It's not necessary to add it manually on the <code>body</code> element. If the script detects that the browser lacks important features it will add this class.</p>
|
||||
<p>It is recommended to add the class manually to the <code>body</code> element though, because that means that users without JavaScript will also get fallback styles. When impress.js script detects that the browser supports all required features, the <code>.impress-not-support</code> class will be removed from the <code>body</code> element.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-CSS">.impress-not-supported .step {
|
||||
display: inline-block;
|
||||
}
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,193 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML :: reference | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h2 id="html">HTML</h2>
|
||||
<h3 id="root-element">Root Element</h3>
|
||||
<p>impress.js requires a Root Element. All the content of the presentation will be created inside that element. It is not recommended to manipulate any of the styles, attributes or classes that are created by impress.js inside the Root Element after initialization.</p>
|
||||
<p>To change the duration of the transition between slides use <code>data-transition-duration="2000"</code> giving it
|
||||
a number of ms. It defaults to 1000 (1s).</p>
|
||||
<p>When authoring impress.js presentations, you should target some screen size, which you can define here.
|
||||
The default is 1024 x 768. You should write your CSS as if this is the screen size used for the
|
||||
presentation. When you present your presentation on a screen (or browser window) of different size,
|
||||
impress.js will automatically scale the presentation to fit the screen. The minimum and maximum limits
|
||||
to this scaling can also be defined here.</p>
|
||||
<p>All impress.js steps are wrapped inside a div element of 0 size! This means that in your CSS you
|
||||
can't use relative values for width and height (example: <code>width: 100%</code>) to define the size of step elements.
|
||||
You need to use pixel values. The pixel values used here correspond to the <code>data-width</code> and <code>data-height</code>
|
||||
given to the <code>#impress</code> root element. When the presentation is viewed on a larger or smaller screen, impress.js
|
||||
will automatically scale the steps to fit the screen.</p>
|
||||
<p><strong>NOTE:</strong> The default width and height have been changed to target HD screens in v1.2.0. If you
|
||||
don't set target width and height explicitly, layout and dimensions of your presentations are likely
|
||||
to be affected. In order to get back the old target resolution, use:</p>
|
||||
<pre><code><div id="impress" data-width="1024" data-height="768" data-max-scale="1" data-min-scale="0"
|
||||
</code></pre>
|
||||
<p>You can also control the perspective with <code>data-perspective="500"</code> giving it a number of pixels.
|
||||
It defaults to 1000. You can set it to 0 if you don't want any 3D effects.
|
||||
If you are willing to change this value make sure you understand how CSS perspective works:
|
||||
https://developer.mozilla.org/en/CSS/perspective</p>
|
||||
<p>See also <a href="/docs/plugins/">the plugin README</a> for documentation on <code>data-autoplay</code>.</p>
|
||||
<p><strong>Attributes</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Attribute</th>
|
||||
<th>Default</th>
|
||||
<th>Explanation</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>data-transition-duration</td>
|
||||
<td>1000 (ms)</td>
|
||||
<td>Speed of transition between steps.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-width</td>
|
||||
<td>1920 (px)</td>
|
||||
<td>Width of target screen size. When presentation is viewed on a larger or smaller screen, impress.js will scale all content automatically.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-height</td>
|
||||
<td>1080 (px)</td>
|
||||
<td>Height of target screen size.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-max-scale</td>
|
||||
<td>3</td>
|
||||
<td>Maximum scale factor. (Note that the default 1 will not increase content size on larger screens!)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-min-scale</td>
|
||||
<td>0</td>
|
||||
<td>Minimum scale factor.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-perspective</td>
|
||||
<td>1000</td>
|
||||
<td>Perspective for 3D rendering. See https://developer.mozilla.org/en/CSS/perspective</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-html"><div id="impress"
|
||||
data-transition-duration="1000"
|
||||
|
||||
data-width="1024"
|
||||
data-height="768"
|
||||
data-max-scale="3"
|
||||
data-min-scale="0"
|
||||
data-perspective="1000"
|
||||
|
||||
data-autoplay="7">
|
||||
</code></pre>
|
||||
<h3 id="step-element">Step Element</h3>
|
||||
<p>A Step Element is an element that contains metadata that defines how it is going to be presented in the screen.
|
||||
A Step Element should contain a <code>.step</code> class and an optional <code>id</code> attribute.
|
||||
The content represents an html fragment that will be positioned at the center of the camera.
|
||||
In the Step Element, you can define a specific set of default attributes and positioning, that are documented below.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-html"><div id="bored" class="step" data-x="-1000">
|
||||
<q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
|
||||
</div>
|
||||
</code></pre>
|
||||
<h4 id="2d-coordinates-positioning-data-x--data-y">2D Coordinates Positioning (data-x, data-y)</h4>
|
||||
<p>Define the pixel based position in which the <strong>center</strong> of the <a href="/docs/reference/HTML.html#step-element">Step Element</a> will be positioned inside the infinite canvas.</p>
|
||||
<p><strong>Attributes</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Attribute</th>
|
||||
<th>Default</th>
|
||||
<th>Explanation</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>data-x</td>
|
||||
<td>0</td>
|
||||
<td>X coordinate for step position</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-y</td>
|
||||
<td>0</td>
|
||||
<td>Y coordinate for step position</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-html"><div id="bored" class="step" data-x="-1000" data-y="-1500">
|
||||
<q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
|
||||
</div>
|
||||
</code></pre>
|
||||
<h4 id="2d-scaling-data-scale">2D Scaling (data-scale)</h4>
|
||||
<p>Defines the scaling multiplier of the <a href="/docs/reference/HTML.html#step-element">Step Element</a> relative to other Step Elements. For example, <code>data-scale="4"</code> means that the element will appear to be 4 times larger than the others. From the presentation and transitions point of view, it means that it will have to be scaled down (4 times) to make it back to its correct size.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-html"><div id="title" class="step" data-x="0" data-y="0" data-scale="4">
|
||||
<span class="try">then you should try</span>
|
||||
<h1>impress.js<sup>*</sup></h1>
|
||||
<span class="footnote"><sup>*</sup> no rhyme intended</span>
|
||||
</div>
|
||||
</code></pre>
|
||||
<h4 id="2d-rotation-data-rotate">2D Rotation (data-rotate)</h4>
|
||||
<p>Represents the amount of clockwise rotation of the element relative to 360 degrees.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-html"><div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
|
||||
<p>
|
||||
It’s a <strong>presentation tool</strong> <br>
|
||||
inspired by the idea behind <a href="http://prezi.com">prezi.com</a> <br>
|
||||
and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.
|
||||
</p>
|
||||
</div>
|
||||
</code></pre>
|
||||
<h4 id="3d-coordinates-positioning-data-z">3D Coordinates Positioning (data-z)</h4>
|
||||
<p>Define the pixel based position in which the <strong>center</strong> of the <a href="/docs/reference/HTML.html#step-element">Step Element</a> will be positioned inside the infinite canvas on the third dimension (Z) axis. For example, if we use <code>data-z="-3000"</code>, it means that the <a href="/docs/reference/HTML.html#step-element">Step Element</a> will be positioned far away from the camera (by 3000px).</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-html"><div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
|
||||
<p>and <b>tiny</b> ideas</p>
|
||||
</div>
|
||||
</code></pre>
|
||||
<p><strong>Note:</strong> The introduction of the <a href="/docs/plugins/rel/">rel</a> plugin includes a slight backward incompatible change.
|
||||
Previously the default value for <code>data-x</code>, <code>data-y</code> and <code>data-z</code> was zero. The <code>rel</code> plugin changes the default to inherit
|
||||
the value of the previous slide. This means, you need to explicitly set these values to zero, if they ever were non-zero.</p>
|
||||
<h4 id="3d-rotation-data-rotate-x--data-rotate-y--data-rotate-z">3D Rotation (data-rotate-x, data-rotate-y, data-rotate-z)</h4>
|
||||
<p>You can not only position a <a href="/docs/reference/HTML.html#step-element">Step Element</a> in 3D, but also rotate it around any axis.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<p>The example below will get rotated by -40 degrees (40 degrees anticlockwise) around X axis and 10 degrees (clockwise) around Y axis.</p>
|
||||
<p>You can of course rotate it around Z axis with <code>data-rotate-z</code> - it has exactly the same effect as <code>data-rotate</code> (these two are basically aliases).</p>
|
||||
<pre><code class="language-HTML"><div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
|
||||
<p>
|
||||
<span class="have">have</span>
|
||||
<span class="you">you</span>
|
||||
<span class="noticed">noticed</span>
|
||||
<span class="its">it’s</span>
|
||||
<span class="in">in</span>
|
||||
<b>3D<sup>*</sup></b>?
|
||||
</p>
|
||||
<span class="footnote">* beat that, prezi ;)</span>
|
||||
</div>
|
||||
</code></pre>
|
||||
<h4 id="3d-rotation-order-data-rotate-order">3D Rotation Order (data-rotate-order)</h4>
|
||||
<p>The order in which the CSS <code>rotateX(), rotateY(), rotateZ()</code> transforms are applied matters. This is because each rotation is relative to the then current position of the element.</p>
|
||||
<p>By default the rotation order is <code>data-rotate-order="xyz"</code>. For some advanced uses you may need to change it. The demo presentation <a href="examples/3D-rotations/index.html">3D rotations</a> sets this attribute to rotate some steps into positions that are impossible to reach with the default order.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,113 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JavaScript :: reference | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h2 id="javascript">JavaScript</h2>
|
||||
<h3 id="impress--id--">impress( [ id ] )</h3>
|
||||
<p>A factory function that creates the <a href="/docs/reference/JavaScript.html#impressapi">ImpressAPI</a>.</p>
|
||||
<p>Accepts a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a> that represents the id of the root element in the page. If omitted, impress.js will lookup for the element with the id "impress" by default.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-JavaScript">var impressAPI = impress( "root" );
|
||||
</code></pre>
|
||||
<h3 id="impressapi">ImpressAPI</h3>
|
||||
<p>The main impress.js API that handles common operations of impress.js, listed below.</p>
|
||||
<h4 id="-init">.init()</h4>
|
||||
<p>Initializes impress.js globally in the page. Only one instance of impress.js is supported per document.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-JavaScript">impress().init();
|
||||
</code></pre>
|
||||
<p>Triggers the <code>impress:init</code> event in the <a href="/docs/reference/HTML.html#root-element">Root Element</a> after the presentation is initialized.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-JavaScript">var rootElement = document.getElementById( "impress" );
|
||||
rootElement.addEventListener( "impress:init", function() {
|
||||
console.log( "Impress init" );
|
||||
});
|
||||
impress().init();
|
||||
</code></pre>
|
||||
<h4 id="-tear">.tear()</h4>
|
||||
<p>Resets the DOM to its original state, as it was before <code>init()</code> was called.</p>
|
||||
<p>This can be used to "unload" impress.js. A particular use case for this is, if you want to do
|
||||
dynamic changes to the presentation, you can do a teardown, apply changes, then call <code>init()</code>
|
||||
again. (In most cases, this will not cause flickering or other visible effects to the user,
|
||||
beyond the intended dynamic changes.)</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-JavaScript">impress().tear();
|
||||
</code></pre>
|
||||
<h4 id="-next">.next()</h4>
|
||||
<p>Navigates to the next step of the presentation using the <a href="/docs/reference/JavaScript.html#-goto-stepindex--stepelementid--stepelement---duration--"><code>goto()</code> function</a>.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-JavaScript">var api = impress();
|
||||
api.init();
|
||||
api.next();
|
||||
</code></pre>
|
||||
<h4 id="-prev">.prev()</h4>
|
||||
<p>Navigates to the previous step of the presentation using the <a href="/docs/reference/JavaScript.html#-goto-stepindex--stepelementid--stepelement---duration--"><code>goto()</code> function</a>.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-JavaScript">var api = impress();
|
||||
api.init();
|
||||
api.prev();
|
||||
</code></pre>
|
||||
<h4 id="-goto-stepindex--stepelementid--stepelement---duration--">.goto( stepIndex | stepElementId | stepElement, [ duration ] )</h4>
|
||||
<p>Accepts a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a> that represents the step index.</p>
|
||||
<p>Navigates to the step given the provided step index.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-JavaScript">var api = impress();
|
||||
api.init();
|
||||
api.goto(7);
|
||||
</code></pre>
|
||||
<p>Accepts a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a> that represents the <a href="/docs/reference/HTML.html#step-element">Step Element</a> id.</p>
|
||||
<p>Navigates to the step given the provided <a href="/docs/reference/HTML.html#step-element">Step Element</a> id.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-JavaScript">var api = impress();
|
||||
api.init();
|
||||
api.goto( "overview" );
|
||||
</code></pre>
|
||||
<p>Accepts an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> that represents the <a href="/docs/reference/HTML.html#step-element">Step Element</a>.</p>
|
||||
<p>Navigates to the step given the provided <a href="/docs/reference/HTML.html#step-element">Step Element</a>.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-JavaScript">var overview = document.getElementById( "overview" );
|
||||
var api = impress();
|
||||
api.init();
|
||||
api.goto( overview );
|
||||
</code></pre>
|
||||
<p>Accepts an optional <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a> in the last argument that represents the duration of the transition in milliseconds. If not provided, the default transition duration for the presentation will be used.</p>
|
||||
<p>Triggers the <code>impress:stepenter</code> event in the <a href="/docs/reference/HTML.html#root-element">Root Element</a> when the presentation navigates to the target <a href="/docs/reference/HTML.html#step-element">Step Element</a>.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-JavaScript">var rootElement = document.getElementById( "impress" );
|
||||
rootElement.addEventListener( "impress:stepenter", function(event) {
|
||||
var currentStep = event.target;
|
||||
console.log( "Entered the Step Element '" + currentStep.id + "'" );
|
||||
});
|
||||
</code></pre>
|
||||
<p>Triggers the <code>impress:stepleave</code> event in the <a href="/docs/reference/HTML.html#root-element">Root Element</a> when the presentation navigates away from the current <a href="/docs/reference/HTML.html#step-element">Step Element</a>.</p>
|
||||
<p><strong>Example:</strong></p>
|
||||
<pre><code class="language-JavaScript">var rootElement = document.getElementById( "impress" );
|
||||
rootElement.addEventListener( "impress:stepleave", function(event) {
|
||||
var currentStep = event.target;
|
||||
var nextStep = event.detail.next;
|
||||
console.log( "Left the Step Element '" + currentStep.id + "' and about to enter '" + nextStep.id );
|
||||
});
|
||||
</code></pre>
|
||||
<h1>Improve The Docs</h1>
|
||||
<p>Did you find something that can be improved? Then <a href="https://github.com/impress/impress.js/issues/new">create an issue</a> so that we can discuss it!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,27 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Plugins :: reference | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h2 id="plugins">Plugins</h2>
|
||||
<p>Many new features are implemented as plugins. The <a href="/docs/plugins/">Plugins documentation</a> is the starting place to learn about those, as well as the README.md of <a href="https://github.com/impress/impress.js/src/plugins/">each plugin</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,25 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Docs - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script defer src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
<h1>API reference</h1>
|
||||
<p>Are you looking for more detailed documentation? Here you can see all the API reference</p>
|
||||
<p>If you are new to impress and you want to learn to use it, we suggest you <a href="/docs/gettingStarted.html" class="docs-link">start here</a>!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,493 +0,0 @@
|
||||
/*
|
||||
*
|
||||
* impress.js website - build.js
|
||||
*
|
||||
* Developed 2023 by Janis Hutz
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
We will convert certain MD files to html and include them in the documentation. This mostly includes the plugin documentation.
|
||||
If there is no MD file in the directory, there will be no documentation. The script will also automatically build the nav menu
|
||||
and copy all the necessary files to the correct places.
|
||||
*/
|
||||
|
||||
const fs = require( 'fs' );
|
||||
const path = require( 'path' );
|
||||
const mdhtml = require( 'markdown-it' );
|
||||
const md2html = new mdhtml();
|
||||
const docRoot = path.join( __dirname + '/../' );
|
||||
const ls = require( 'ls' );
|
||||
const prompt = require( 'prompt-sync' )( {
|
||||
sigint: true
|
||||
} );
|
||||
|
||||
const pluginsPath = path.join( __dirname + '/../../../src/plugins' );
|
||||
|
||||
let plugins = fs.readdirSync( pluginsPath );
|
||||
delete plugins[0];
|
||||
|
||||
if ( prompt( 'Do you want to regenerate the API reference? (y/N) ' ).toLowerCase() == 'y' ) {
|
||||
console.log( 'Regenerating API reference' );
|
||||
parseDocumentationMD();
|
||||
}
|
||||
|
||||
if ( prompt( 'Do you want to regenerate the getting started guide? (y/N) ' ).toLowerCase() == 'y' ) {
|
||||
console.log( 'Regenerating Getting Started Guide' );
|
||||
storeHTML( generateGettingStarted( md2html.render( '' + fs.readFileSync( path.join( __dirname + '/../../../GettingStarted.md' ) ) ) ), 'gettingStarted', '' );
|
||||
}
|
||||
|
||||
let docPages = fs.readdirSync( __dirname + '/../../../website/docs/reference' );
|
||||
|
||||
if ( prompt( 'Do you want to regenerate the plugins documentation? (y/N) ' ).toLowerCase() == 'y' ) {
|
||||
console.log( 'regenerating plugins documentation' );
|
||||
let pluginsHome = md2html.render( fs.readFileSync( path.join( pluginsPath + '/README.md' ) ).toString() );
|
||||
|
||||
/*
|
||||
Generate the plugins index.html from README.md
|
||||
*/
|
||||
for ( let letter in pluginsHome ) {
|
||||
if ( pluginsHome[ letter ] === '<' ) {
|
||||
if ( pluginsHome.slice( parseInt( letter ), parseInt( letter ) + 9 ) === '<a href="' ) {
|
||||
let newLink = '';
|
||||
let i = 9;
|
||||
while ( pluginsHome.slice( parseInt( letter ) + i, parseInt( letter ) + i + 1 ) !== '"' ) {
|
||||
i += 1;
|
||||
};
|
||||
let link = pluginsHome.slice( parseInt( letter ) + 9, parseInt( letter ) + i );
|
||||
// console.log( link );
|
||||
let pos = 0;
|
||||
if ( link.slice( 0, 1 ) === '/' && link.slice( 1, 3 ) !== '..' ) {
|
||||
console.log( 'root' );
|
||||
newLink = '<a href="https://github.com/impress/impress.js">';
|
||||
} else if ( link.slice( 0, 3 ) === '../' || link.slice( 0, 4 ) === '/../' ) {
|
||||
if ( link.slice( 4, 6 ) === '../' ) {
|
||||
newLink = '<a href="https://github.com/impress/impress.js/tree/master/' + link.slice( 7, parseInt( link.length ) ) + '">';
|
||||
} else if ( link.slice( 5, 7 ) === '../' ) {
|
||||
newLink = '<a href="https://github.com/impress/impress.js/tree/master/' + link.slice( 8, parseInt( link.length ) ) + '">';
|
||||
} else if ( link.slice( 0, 3 ) === '../' ) {
|
||||
newLink = '<a href="https://github.com/impress/impress.js/tree/master/' + link.slice( 4, parseInt( link.length ) ) + '">';
|
||||
} else {
|
||||
newLink = '<a href="https://github.com/impress/impress.js/tree/master/' + link.slice( 5, parseInt( link.length ) ) + '">';
|
||||
}
|
||||
} else if ( link.slice( 0, 8 ) === 'https://' || link.slice( 0, 7 ) === 'http://' ) {
|
||||
newLink = '<a href="' + link + '">';
|
||||
} else if ( link.slice( 0, 2 ) === './' || link.slice( 0, 1 ) !== '/' || link.slice( 0, 1 ) !== '.' ) {
|
||||
if ( link.slice( parseInt( link.length ) - 9, parseInt( link.length ) ) === 'README.md' ) {
|
||||
newLink = '<a href="/docs/plugins/' + link.slice( 0, parseInt( link.length ) - 10 ) + '">';
|
||||
} else {
|
||||
newLink = '<a href="https://github.com/impress/impress.js/tree/master/src/plugins/' + link + '">';
|
||||
};
|
||||
} else {
|
||||
throw 'INVALID LINK FOUND IN PLUGINS README! Please fix and rerun the script';
|
||||
}
|
||||
pluginsHome = pluginsHome.slice( 0, parseInt( letter ) ) + newLink + pluginsHome.slice( parseInt( letter) + i + 2, parseInt( pluginsHome.length ) );
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
storeHTML( pluginsHome, 'index', 'plugins' );
|
||||
|
||||
/*
|
||||
Generate the rest of the plugins documentation from their READMEs and warn if no README was found
|
||||
*/
|
||||
for ( let item in plugins ) {
|
||||
fs.readFile( path.join( pluginsPath + '/' + plugins[item] + '/README.md' ), ( error, data ) => {
|
||||
if ( error ) {
|
||||
console.log( 'NO README found for ' + path.join( pluginsPath + '/' + plugins[item] ) + ' PLEASE MAKE SURE YOU HAVE CREATED A README!' );
|
||||
} else {
|
||||
( async () => {
|
||||
let html = md2html.render( '' + data );
|
||||
storeHTML( await findLinks( html, path.join( pluginsPath + '/' + plugins[item] ) ), plugins[item], 'plugins' );
|
||||
} ) ();
|
||||
};
|
||||
} );
|
||||
};
|
||||
for ( let obj in docPages ) {
|
||||
if ( docPages[obj] == 'index.html' ) {
|
||||
delete docPages[obj];
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
console.log( 'regenerating Nav' );
|
||||
generateNav ();
|
||||
|
||||
buildExamplesPage();
|
||||
|
||||
/*
|
||||
This function finds links. The reason for this is possible incompatibilities with links on the website
|
||||
*/
|
||||
async function findLinks ( html, path ) {
|
||||
let returnHTML = html;
|
||||
for ( let letter in returnHTML ) {
|
||||
if ( returnHTML[letter] === '<' ) {
|
||||
if ( returnHTML.slice( parseInt( letter ), parseInt( letter ) + 9 ) === '<a href="' ) {
|
||||
let i = 9;
|
||||
while ( returnHTML.slice( parseInt( letter ) + i, parseInt( letter ) + i + 1 ) !== '"' ) {
|
||||
i += 1;
|
||||
};
|
||||
returnHTML = returnHTML.slice( 0, parseInt( letter ) ) + await checkLinks( returnHTML.slice( parseInt( letter ) + 9, parseInt( letter ) + i ), path ) + returnHTML.slice( parseInt( letter ) + i + 2, parseInt( returnHTML.length ) );
|
||||
};
|
||||
};
|
||||
};
|
||||
return returnHTML;
|
||||
};
|
||||
|
||||
/*
|
||||
This function takes care of checking links. This is necessary, as documentation may contain links that will
|
||||
not work on the website, as it has relative paths.
|
||||
*/
|
||||
async function checkLinks ( link, fpath ) {
|
||||
let filepath = fpath;
|
||||
let pos = 0;
|
||||
if ( link.slice( parseInt( link.length ) - 9, parseInt( link.length ) ) === 'README.md' ) {
|
||||
while ( link.slice( parseInt( link.length ) - pos - 11, parseInt( link.length ) - pos - 10 ) !== '/' ) {
|
||||
pos += 1;
|
||||
};
|
||||
return '<a href="/docs/plugins/' + link.slice( parseInt( link.length ) - pos - 10, parseInt( link.length ) - 10 ) + '">';
|
||||
} else if ( link.slice( 0, 2 ) === '..' ) {
|
||||
// here we map the relative path to an absolute path that can be used with the GitHub repo.
|
||||
while ( link.slice( pos, pos + 3 ) === '../' ) {
|
||||
pos += 3;
|
||||
let pathPos = 1;
|
||||
while ( filepath.slice( parseInt( filepath.length ) - pathPos, parseInt( filepath.length ) - pathPos + 1 ) !== '/' ) {
|
||||
pathPos += 1;
|
||||
};
|
||||
filepath = filepath.slice( 0, parseInt( filepath.length ) - pathPos + 1 );
|
||||
};
|
||||
|
||||
// Here we find the impress.js root in the filepath to remove it and finish the link generation
|
||||
let fsPos = 0;
|
||||
while ( filepath.slice( parseInt( filepath.length ) - fsPos - 10, parseInt( filepath.length ) - fsPos ) !== 'impress.js' ) {
|
||||
fsPos += 1;
|
||||
};
|
||||
let fpSlice = filepath.slice( parseInt( filepath.length ) - fsPos + 1, parseInt( filepath.length ) );
|
||||
let linkSlice = link.slice( pos, link.length );
|
||||
|
||||
// now let's assemble a link and add it back into the html
|
||||
if ( link.slice( link.length - 3, link.length ).includes( '.' ) ) {
|
||||
return '<a href="https://github.com/impress/impress.js/blob/master/' + fpSlice + linkSlice + '">';
|
||||
} else {
|
||||
return '<a href="https://github.com/impress/impress.js/tree/master/' + fpSlice + linkSlice + '">';
|
||||
};
|
||||
} else if ( link.slice( 0, 1 ) !== '.' && link.slice( 0, 1 ) !== '/' ) {
|
||||
let fsPos = 0;
|
||||
while ( filepath.slice( parseInt( filepath.length ) - fsPos - 10, parseInt( filepath.length ) - fsPos ) !== 'impress.js' ) {
|
||||
fsPos += 1;
|
||||
};
|
||||
let fpSlice = filepath.slice( parseInt( filepath.length ) - fsPos + 1, parseInt( filepath.length ) ) + '/';
|
||||
if ( link.slice( link.length - 3, link.length ).includes( '.' ) ) {
|
||||
return '<a href="https://github.com/impress/impress.js/blob/master/' + fpSlice + link + '">';
|
||||
} else {
|
||||
return '<a href="https://github.com/impress/impress.js/tree/master/' + fpSlice + link + '">';
|
||||
};
|
||||
} else if ( link.slice( 0, 7 ) === 'http://' || link.slice( 0, 8 ) === 'https://' ) {
|
||||
return '<a href="' + link + '">';
|
||||
} else if ( link.slice( 0, 1 ) === '/' && link.slice( 1, 2 ) !== '.' ) {
|
||||
if ( link.slice( link.length - 3, link.length ).includes( '.' ) ) {
|
||||
if ( link === '/GettingStarted.md' ) {
|
||||
return '<a href="/docs/gettingStarted.html">';
|
||||
} else if ( link === '/DOCUMENTATION.md' ) {
|
||||
return '<a href="/docs/reference">';
|
||||
} else {
|
||||
return '<a href="https://github.com/impress/impress.js/blob/master' + link + '">';
|
||||
}
|
||||
} else {
|
||||
return '<a href="https://github.com/impress/impress.js/tree/master' + link + '">';
|
||||
};
|
||||
} else {
|
||||
throw Error( 'Invalid link found! Link is: "' + link + '" in file: ' + filepath + '/README.md' );
|
||||
};
|
||||
};
|
||||
|
||||
/*
|
||||
This function generates & stores the HTML in the correct directory
|
||||
*/
|
||||
|
||||
function storeHTML ( html, path, type ) {
|
||||
let fileOut = `<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>${path} :: ${type} | DOCS - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">
|
||||
` + html
|
||||
+ `</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>`;
|
||||
fs.writeFileSync( docRoot + '/' + type + '/' + path + '.html', fileOut );
|
||||
};
|
||||
|
||||
/*
|
||||
This function, as the name implies, generates the navbar on the side in the docs.
|
||||
*/
|
||||
function generateNav () {
|
||||
let fileStruct = `<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="stylesheet" href="/css/docs/navstyle.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav-container">
|
||||
<a class="logo-container" href="/"><img class="logo" src="/assets/apple-touch-icon.png" alt="impress-logo"></a>
|
||||
<div class="nav-wrapper">
|
||||
<div class="nav-list">
|
||||
<a class="navitem" id="home" href="/docs">Home</a>
|
||||
<a class="navitem" id="gettingStarted" href="/docs/gettingStarted.html">Getting Started</a>
|
||||
<a class="navitem" id="referenceNav" onclick="toggleList( 'reference' );">API reference</a>
|
||||
<div class="dropdown" id="reference">
|
||||
<a class="nav-subitem" id="reference-home" href="/docs/reference">Home</a>`
|
||||
for ( let item in docPages ) {
|
||||
if ( docPages[ item ] === 'index' ) {} else {
|
||||
fileStruct += `<a class="nav-subitem" id="${ docPages[ item ].slice( 0, docPages[ item ].length - 5 ) }" href="/docs/reference/${ docPages[ item ] }">${ docPages[ item ].slice( 0, docPages[ item ].length - 5 ) }</a>`;
|
||||
};
|
||||
};
|
||||
fileStruct += `</div>
|
||||
<a class="navitem" id="pluginsNav" onclick="toggleList( 'plugins' );">Plugins</a>
|
||||
<div class="dropdown" id="plugins">
|
||||
<a class="nav-subitem" id="plugins-home" href="/docs/plugins">Home</a>
|
||||
`;
|
||||
for ( let item in plugins ) {
|
||||
fileStruct += `<a class="nav-subitem" id="${ plugins[ item ] }" href="/docs/plugins/${ plugins[ item ] }.html">${ plugins[ item ] }</a>`;
|
||||
};
|
||||
fileStruct += `</div>
|
||||
<a class="navitem" id="contributingNav" onclick="toggleList( 'contributing' );">Contributing</a>
|
||||
<div class="dropdown" id="contributing">
|
||||
<a class="nav-subitem" id="contributing-gettingStarted" href="/docs/contributing">Getting Started</a>
|
||||
<a class="nav-subitem" id="website" href="/docs/contributing/website.html">Website</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="/js/docs/nav.js"></script>
|
||||
</html>`;
|
||||
fs.writeFileSync( docRoot + '/nav.html', fileStruct );
|
||||
};
|
||||
|
||||
|
||||
function parseDocumentationMD () {
|
||||
let doc = '' + fs.readFileSync( path.join( __dirname + '/../../../DOCUMENTATION.md' ) );
|
||||
let lastHashtagPos = 0;
|
||||
let posArray = [];
|
||||
for ( let letter in doc ) {
|
||||
if ( doc[letter] == '#' ) {
|
||||
if ( doc.slice( parseInt( letter ), parseInt( letter ) + 3 ) === '###' || doc.slice( parseInt( letter ), parseInt( letter ) + 4 ) === '####' ) {
|
||||
} else if ( doc.slice( parseInt( letter ), parseInt( letter ) + 2 ) === '##' && lastHashtagPos + 1 < parseInt( letter ) ) {
|
||||
posArray.push(letter);
|
||||
};
|
||||
lastHashtagPos = parseInt( letter );
|
||||
};
|
||||
};
|
||||
|
||||
let titles = {};
|
||||
|
||||
for ( let item in posArray ) {
|
||||
let titleArea = doc.slice( parseInt( posArray[item] ), parseInt( posArray[item] + 20 ) );
|
||||
let title = '';
|
||||
for ( let pos in titleArea ) {
|
||||
if ( titleArea[pos] === '\n' ) {
|
||||
title = titleArea.slice( 3, pos );
|
||||
break;
|
||||
};
|
||||
};
|
||||
|
||||
let page = md2html.render( doc.slice( parseInt( posArray[parseInt( item )] ), parseInt( posArray[parseInt( item ) + 1] ) || parseInt( doc.length ) ) );
|
||||
|
||||
for ( let letter in page ) {
|
||||
let titleTag = page.slice( parseInt( letter ), parseInt( letter ) + 4 );
|
||||
if ( titleTag === '<h1>' || titleTag === '<h2>' || titleTag === '<h3>' || titleTag === '<h4>' ) {
|
||||
let i = 4;
|
||||
while ( page.slice( parseInt( letter ) + i, parseInt( letter ) + i + 1 ) !== '<' ) {
|
||||
i += 1;
|
||||
};
|
||||
let heading = '' + page.slice( parseInt( letter ) + 4, parseInt( letter ) + i );
|
||||
let output = '';
|
||||
for ( let pos in heading ) {
|
||||
let letter = heading[ pos ];
|
||||
if ( letter === ' ' || letter === '.' || letter === ',' ) {
|
||||
output += '-';
|
||||
} else if ( letter === '(' || letter === ')' || letter === '[' || letter === ']' || letter === '|' ) {
|
||||
|
||||
} else {
|
||||
output += letter;
|
||||
};
|
||||
};
|
||||
titles[ output.toLowerCase() ] = title;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
for ( let item in posArray ) {
|
||||
let titleArea = doc.slice( parseInt( posArray[item] ), parseInt( posArray[item] + 20 ) );
|
||||
let title = '';
|
||||
for ( let pos in titleArea ) {
|
||||
if ( titleArea[pos] === '\n' ) {
|
||||
title = titleArea.slice( 3, pos );
|
||||
break;
|
||||
};
|
||||
};
|
||||
|
||||
let page = md2html.render( doc.slice( parseInt( posArray[parseInt( item )] ), parseInt( posArray[parseInt( item ) + 1] ) || parseInt( doc.length ) ) );
|
||||
|
||||
for ( let letter in page ) {
|
||||
let titleTag = page.slice( parseInt( letter ), parseInt( letter ) + 4 );
|
||||
if ( page[letter] === '<' ) {
|
||||
if ( page.slice( parseInt( letter ), parseInt( letter ) + 9 ) === '<a href="' ) {
|
||||
let i = 9;
|
||||
while ( page.slice( parseInt( letter ) + i, parseInt( letter ) + i + 1 ) !== '"' ) {
|
||||
i += 1;
|
||||
};
|
||||
let link = '' + page.slice( parseInt( letter ) + 9, parseInt( letter ) + i );
|
||||
let updatedLink = '';
|
||||
if ( link.slice( 0, 8 ) === 'https://' || link.slice( 0, 7 ) === 'http://' || link.slice( 0, 1 ) === '#' ) {
|
||||
if ( link.slice( 0, 1 ) === '#' ) {
|
||||
if ( titles[ link.slice( 1, parseInt( link.length ) ) ] !== undefined ) {
|
||||
updatedLink = '/docs/reference/' + titles[ link.slice( 1, parseInt( link.length ) ) ] + '.html' + link;
|
||||
} else {
|
||||
console.log( 'unable to map link ' + link );
|
||||
}
|
||||
} else {
|
||||
updatedLink = link;
|
||||
}
|
||||
} else {
|
||||
if ( link.slice( 0, 12 ) === 'src/plugins/' ) {
|
||||
if ( link.slice( link.length - 9, link.length ) === 'README.md' ) {
|
||||
updatedLink = '/docs/' + link.slice( 4, link.length - 9 );
|
||||
} else {
|
||||
updatedLink = 'https://github.com/impress/impress.js/' + link;
|
||||
};
|
||||
} else if ( link.slice( 0, 9 ) === 'examples/' ) {
|
||||
updatedLink = '/demo/' + link;
|
||||
} else {
|
||||
updatedLink = 'https://github.com/impress/impress.js/' + link;
|
||||
};
|
||||
}
|
||||
page = page.slice( 0, parseInt( letter ) + 9 ) + updatedLink + page.slice( parseInt( letter ) + i, parseInt( page.length ) );
|
||||
} else if ( titleTag === '<h1>' || titleTag === '<h2>' || titleTag === '<h3>' || titleTag === '<h4>' ) {
|
||||
let i = 4;
|
||||
while ( page.slice( parseInt( letter ) + i, parseInt( letter ) + i + 1 ) !== '<' ) {
|
||||
i += 1;
|
||||
};
|
||||
let heading = '' + page.slice( parseInt( letter ) + 4, parseInt( letter ) + i );
|
||||
let output = '';
|
||||
for ( let pos in heading ) {
|
||||
let letter = heading[ pos ];
|
||||
if ( letter === ' ' || letter === '.' || letter === ',' ) {
|
||||
output += '-';
|
||||
} else if ( letter === '(' || letter === ')' || letter === '[' || letter === ']' || letter === '|' ) {
|
||||
|
||||
} else {
|
||||
output += letter;
|
||||
};
|
||||
};
|
||||
page = page.slice( 0, parseInt( letter ) + 3 ) + ' id="' + output.toLowerCase() + '">' + page.slice( parseInt( letter ) + 4, parseInt( page.length ) );
|
||||
};
|
||||
};
|
||||
storeHTML( page, title, 'reference' );
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
function generateGettingStarted ( inputHTML ) {
|
||||
let html = inputHTML;
|
||||
for ( let letter in html ) {
|
||||
if ( html[letter] === '<' ) {
|
||||
if ( html.slice( parseInt( letter ), parseInt( letter ) + 9 ) === '<a href="' ) {
|
||||
let i = 9;
|
||||
while ( html.slice( parseInt( letter ) + i, parseInt( letter ) + i + 1 ) !== '"' ) {
|
||||
i += 1;
|
||||
};
|
||||
let link = html.slice( parseInt( letter ) + 9, parseInt( letter ) + i )
|
||||
let checkedLink = '';
|
||||
if ( link === 'DOCUMENTATION.md' ) {
|
||||
checkedLink = '/docs/reference';
|
||||
} else if ( link.slice( 0, 13 ) === './src/plugins' ) {
|
||||
if ( link.slice( link.length - 9, link.length ) === 'README.md' ) {
|
||||
checkedLink = '/docs/plugins' + link.slice( 13, link.length - 10 ) + '.html';
|
||||
} else {
|
||||
checkedLink = '/docs/plugins' + link.slice( 13, link.length ) + '.html';
|
||||
};
|
||||
} else if ( link.slice( 0, 12 ) === '/src/plugins' ) {
|
||||
if ( link.slice( link.length - 9, link.length ) === 'README.md' ) {
|
||||
checkedLink = '/docs/plugins' + link.slice( 12, link.length - 10 ) + '.html';
|
||||
} else {
|
||||
checkedLink = '/docs/plugins' + link.slice( 12, link.length ) + '.html';
|
||||
};
|
||||
} else if ( link.slice( 0, 7 ) === 'http://' || link.slice( 0, 8 ) === 'https://' ) {
|
||||
checkedLink = link;
|
||||
}
|
||||
html = html.slice( 0, parseInt( letter ) + 9 ) + checkedLink + html.slice( parseInt( letter ) + i, parseInt( html.length ) );
|
||||
};
|
||||
};
|
||||
};
|
||||
return html;
|
||||
}
|
||||
|
||||
function buildExamplesPage () {
|
||||
/* Auto generate an index.html that lists all the directories under examples/
|
||||
* This is useful for gh-pages, so you can link to http://impress.github.io/impress.js/examples
|
||||
*/
|
||||
console.log( 'building examples page' );
|
||||
let html_list = '<ul class="list"><br>\n';
|
||||
let dirList = fs.readdirSync( path.join( __dirname + '/../../demo/examples' ) );
|
||||
dirList.forEach( function( dir ) {
|
||||
if ( dir === 'index.html' ) {} else {
|
||||
html_list += ' <li class="button"><a class="list-element" href="' + dir + '/">' + dir + '</a></li>\n';
|
||||
};
|
||||
});
|
||||
let html = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<title>Example presentations</title>
|
||||
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script defer src="/js/index.js"></script>
|
||||
<style>
|
||||
.list {
|
||||
margin-top: 10%;
|
||||
font-size: 1.5rem;
|
||||
list-style: none;
|
||||
}
|
||||
.list-element {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="navbar"></div>
|
||||
<div class="title">
|
||||
<div class="title-content">
|
||||
<h1 class="heading">Exam­ples</h1>
|
||||
</div>
|
||||
${ html_list }
|
||||
</ul>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
fs.writeFileSync( path.join( __dirname + '/../../demo/examples/index.html' ), html );
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Docs - impress.js</title>
|
||||
<!--I am using jquery for button animations.-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<script src="/js/docs/loader.js"></script>
|
||||
<link rel="stylesheet" href="/css/docs/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container"></div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,14 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="stylesheet" href="/css/docs/topstyle.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-container">
|
||||
<div class="top-wrapper">
|
||||
<button onclick="setTheme();" id="darkToggle">☽</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,40 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Download impress.js</title>
|
||||
<meta name="description" content="Download impress.js, a javascript presentation framework that uses the power of CSS 3 to create stunning presentations in your browser! It is inspired by the idea behind prezi.com">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<!--I am using jquery for button animations (plus loading of the navbar and footer)-->
|
||||
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer" ></script>
|
||||
<script defer src="/js/index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="navbar"></div>
|
||||
<div class="title">
|
||||
<div class="title-content">
|
||||
<h1 class="heading">Down­load imp­ress.js</h1>
|
||||
<h2 class="subheading">Ready to bring your presentations to the next level?</h2>
|
||||
</div>
|
||||
<div class="title-buttons">
|
||||
<a class="button" id="demobutton" href="/demo/">Watch the demo</a>
|
||||
<a class="button go-impress" href="/docs/gettingStarted.html">Get started!</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="centered">
|
||||
<h3>Choose your download option!</h3>
|
||||
<!--TODO: Add a direct download link for the file-->
|
||||
<div class="sidebyside">
|
||||
<a class="button download-base" href="https://cdn.jsdelivr.net/gh/impress/impress.js@2.0.0/js/impress.js">From cdn (jsdelivr.net)</a>
|
||||
<a class="button download-base" href="https://github.com/impress/impress.js/blob/v2.0.0/js/impress.js">Full JavaScript File</a>
|
||||
<a class="button download-base" href="https://github.com/impress/impress.js/">Full source code</a>
|
||||
<a class="button download-base" href="https://www.npmjs.com/package/impress.js">npmjs</a>
|
||||
</div>
|
||||
<p>Note: The cdn link can be included directly in the HTML file of your presentation. See <a href="/docs/gettingStarted.html">here</a> for more info!</p>
|
||||
</div>
|
||||
<br><br><br>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,17 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="stylesheet" href="/css/footerstyle.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="footer-container">
|
||||
<div class="footer-logo-container"><img src="/assets/apple-touch-icon.png" alt="impress.js logo" class="footer-logo"></div>
|
||||
<div class="footer-wrapper">
|
||||
<p class="footer-big">impress.js</p>
|
||||
<p class="footer-small">The stunning javascript presentation framework</p>
|
||||
<a href="https://janishutz.com" class="credits">Created with ♥ by Janis Hutz</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,114 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>impress.js - the stunning javascript presentation framework</title>
|
||||
<meta name="description" content="impress.js, a javascript presentation framework that uses the power of CSS 3 to create stunning presentations in your browser! It is inspired by the idea behind prezi.com">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<!--I am using jquery for button animations (plus loading of the navbar and footer)-->
|
||||
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script defer src="/js/index.js"></script>
|
||||
<!--I will be using highlight.js to highlight the syntax, but I still need to figure out how to use it.-->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/dark.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
</head>
|
||||
<body>
|
||||
<!--Here, the navbar is inserted by jquery-->
|
||||
<div id="navbar"></div>
|
||||
<div class="title">
|
||||
<div class="title-content">
|
||||
<h1 class="heading">imp­ress.js</h1>
|
||||
</div>
|
||||
<div class="title-buttons">
|
||||
<a class="button" id="demobutton" href="/demo/">Watch the demo</a>
|
||||
<br>
|
||||
<a class="button go-impress" href="/docs/gettingStarted.html">Get started!</a>
|
||||
<a class="button download-base" href="/download.html">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
|
||||
<!--FEATURE OVERVIEW-->
|
||||
|
||||
<div class="centered">
|
||||
|
||||
<div class="create">
|
||||
<div class="unstyled-html">
|
||||
<h3>Use HTML</h3>
|
||||
<!--TODO: Add html demo code-->
|
||||
<pre>
|
||||
<code>
|
||||
<div id="impress">
|
||||
<div class="step">
|
||||
<h1>impress.js - The JavaScript presentation framework</h1>
|
||||
</div>
|
||||
</div>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="special-style">
|
||||
<h3 style="font-size: 200%;">And CSS</h3>
|
||||
<pre>
|
||||
<code>
|
||||
.impress-supported .fallback-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.step {
|
||||
width: 80vw;
|
||||
height: 80vh;
|
||||
background-color: white;
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
<p>To create stunning presentations</p>
|
||||
</div>
|
||||
|
||||
<div class="sidebyside">
|
||||
<div class="sidebyside-element">
|
||||
<h3>FULL power of CSS.</h3>
|
||||
<p>Use the powerful styling tools CSS offers with only minimal restrictions. Because a tool should not restrict your options, such that the only limit is your imagination. (And your skills in CSS)</p>
|
||||
</div>
|
||||
<div class="sidebyside-element">
|
||||
<h3>Familiar.</h3>
|
||||
<p>impress.js presentations can be written in HTML with only a few simple to understand element attributes. Highly detailed Documentation helps you getting started!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebyside">
|
||||
<div class="sidebyside-element">
|
||||
<h3>Minimalist.</h3>
|
||||
<p>The framework only delivers what is essential, without compromising on functionality. You can expand on its functionality by writing some more javascript code or by using more CSS transitions and transforms.</p>
|
||||
</div>
|
||||
<div class="sidebyside-element">
|
||||
<h3>Plugins.</h3>
|
||||
<p>It features extensive plugin-support to expand on its core functionality. Want a speaker console? Blank the screen? There's a plugin for it. If not, you may add your own!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--GETTING STARTED with link to docs (that have been translated to html)-->
|
||||
|
||||
<div class="getting-started">
|
||||
<h2 class="big-text">Impressed?</h2>
|
||||
<h3>Then you should try impress.js</h3>
|
||||
<p>*no rhyme intended</p>
|
||||
<a class="button go-impress" href="/docs/gettingStarted.html">Get started!</a>
|
||||
<!--TODO: Add a direct download link for the file-->
|
||||
<a class="button download-base" href="/download.html">Download</a>
|
||||
</div>
|
||||
|
||||
<div class="more-info">
|
||||
<h2>Want to get more documentation or examples?</h2>
|
||||
<p>Then check out our <a href="/docs">documentation</a> and <a href="/demo/examples/">examples</a></p>
|
||||
</div>
|
||||
|
||||
<div class="contributing">
|
||||
<h2>Want to help develop this project?</h2>
|
||||
<p>Then you should head over to our GitHub and take a look at our contributing Documentation and guidelines which you can find <a href=/docs/contributing>here</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,32 +0,0 @@
|
||||
$( document ).ready( function () {
|
||||
$( '#nav' ).load( '/docs/nav.html' );
|
||||
$( '#top' ).load( '/docs/top.html' );
|
||||
} );
|
||||
|
||||
// set theme on page load
|
||||
let theme = localStorage.getItem( 'theme' ) ?? '';
|
||||
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || theme === 'dark' ) {
|
||||
document.documentElement.classList.add( 'dark' );
|
||||
setTimeout( () => {
|
||||
document.getElementById( 'darkToggle' ).innerHTML = '☼';
|
||||
}, 300 );
|
||||
localStorage.setItem( 'theme', 'dark' );
|
||||
} else {
|
||||
document.documentElement.classList.add( 'light' );
|
||||
localStorage.setItem( 'theme', 'light' );
|
||||
}
|
||||
|
||||
function setTheme () {
|
||||
theme = localStorage.getItem( 'theme' ) ?? '';
|
||||
if ( theme === 'dark' ) {
|
||||
document.getElementById( 'darkToggle' ).innerHTML = '☽';
|
||||
document.documentElement.classList.remove( 'dark' );
|
||||
document.documentElement.classList.add( 'light' );
|
||||
localStorage.setItem( 'theme', 'light' );
|
||||
} else if ( theme === 'light' ) {
|
||||
document.getElementById( 'darkToggle' ).innerHTML = '☼';
|
||||
document.documentElement.classList.remove( 'light' );
|
||||
document.documentElement.classList.add( 'dark' );
|
||||
localStorage.setItem( 'theme', 'dark' );
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
function toggleList ( id ) {
|
||||
$( `#${id}` ).slideToggle();
|
||||
};
|
||||
|
||||
$( () => {
|
||||
setTimeout( () => {
|
||||
if ( location.pathname.substring( 6 ) === '' ) {
|
||||
document.getElementById( 'home' ).classList.add( 'active' );
|
||||
} else {
|
||||
if ( location.pathname.substring( location.pathname.length - 1 ) === '/' ) {
|
||||
document.getElementById( location.pathname.substring( 6, location.pathname.substring( 6 ).indexOf( '/' ) + 6 ) + 'Nav' ).classList.add( 'active' );
|
||||
document.getElementById( location.pathname.substring( 6, location.pathname.substring( 6 ).indexOf( '/' ) + 6 ) + '-home' ).classList.add( 'active' );
|
||||
$( '#' + location.pathname.substring( 6, location.pathname.substring( 6 ).indexOf( '/' ) + 6 ) ).slideDown( 300 );
|
||||
} else if( location.pathname.substring( 6 ).includes( '/' ) ) {
|
||||
document.getElementById( location.pathname.substring( 6, location.pathname.substring( 6 ).indexOf( '/' ) + 6 ) + 'Nav' ).classList.add( 'active' );
|
||||
document.getElementById( location.pathname.substring( location.pathname.substring( 6 ).indexOf( '/' ) + 7, location.pathname.length - 5 ) ).classList.add( 'active' );
|
||||
$( '#' + location.pathname.substring( 6, location.pathname.substring( 6 ).indexOf( '/' ) + 6 ) ).slideDown( 300 );
|
||||
} else {
|
||||
document.getElementById( location.pathname.substring( 6, location.pathname.length - 5 ) ).classList.add( 'active' );
|
||||
}
|
||||
}
|
||||
}, 300 );
|
||||
} );
|
||||
@@ -1,4 +0,0 @@
|
||||
$( document ).ready( function () {
|
||||
$( '#navbar' ).load( '/nav.html' );
|
||||
$( '#footer' ).load( '/footer.html' );
|
||||
});
|
||||
@@ -1,61 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="stylesheet" href="/css/menustyle.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav-container">
|
||||
<div class="mobile-wrapper">
|
||||
<a class="logo-container" href="/"><img class="logo" src="/assets/apple-touch-icon.png" alt="impress-logo"></a>
|
||||
<div class="toggle-wrapper">
|
||||
<a class="listtoggle" onclick="togglelist()">☰</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-wrapper">
|
||||
<div class="nav-menu">
|
||||
<div class="nav-list">
|
||||
<a class="navitem" id="docs" href="/docs">Documentation</a>
|
||||
<a class="navitem" id="download" href="/download.html">Download</a>
|
||||
<a class="navitem" id="demo" href="/demo">Demo</a>
|
||||
<a class="navitem" id="examples" href="/demo/examples">Examples</a>
|
||||
<a class="navitem" id="gh" href="https://github.com/impress/impress.js">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('.navitem').mouseenter( function () {
|
||||
if ( window.location.pathname.slice( 1, window.location.pathname.length ) == this.id ) {} else {
|
||||
$(this).stop();
|
||||
$(this).animate( { "color":"rgba(184, 214, 240, 1)", "background-color":"rgba(0, 0, 175, 1)" }, 200);
|
||||
};
|
||||
});
|
||||
$('.navitem').mouseleave( function () {
|
||||
if ( window.location.pathname.slice( 1, window.location.pathname.length ) == this.id ) {} else {
|
||||
$(this).stop();
|
||||
$(this).animate( { "color":"black", "background-color":"rgba(0, 0, 0, 0)" }, 200 );
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
let previous = 1;
|
||||
function togglelist() {
|
||||
$( '.nav-menu' ).slideToggle(300);
|
||||
$( '.listtoggle' ).toggleClass( 'active' );
|
||||
}
|
||||
|
||||
window.addEventListener( 'resize', function( event ) {
|
||||
if ( $(window).width() > 999 ) {
|
||||
$( '.nav-menu' ).slideDown();
|
||||
previous = 1;
|
||||
} else if ( $(window).width() < 999 && previous == 1 ) {
|
||||
$( '.nav-menu' ).slideUp();
|
||||
$( '.listtoggle' ).removeClass( 'active' );
|
||||
previous = 0;
|
||||
};
|
||||
}, true);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user