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

now also builds from DOCs, but no link check there

Browse Source
This commit is contained in:
Janis Hutz
2023-02-02 07:07:54 +01:00
parent fa74800cc0
commit baab1a3036
23 changed files with 707 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
package-lock.json generated
View File

@@ -8,6 +8,9 @@
"name": "impress.js",
"version": "2.1.0",
"license": "MIT",
"dependencies": {
"prompt-sync": "^4.2.0"
},
"devDependencies": {
"eslint": "^6.8.0",
"jscs": "^2.1.1",
@@ -5143,6 +5146,14 @@
"node": ">= 0.6.6"
}
},
"node_modules/prompt-sync": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/prompt-sync/-/prompt-sync-4.2.0.tgz",
"integrity": "sha512-BuEzzc5zptP5LsgV5MZETjDaKSWfchl5U9Luiu8SKp7iZWD5tZalOxvNcZRwv+d2phNFr8xlbxmFNcRKfJOzJw==",
"dependencies": {
"strip-ansi": "^5.0.0"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -6800,7 +6811,6 @@
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
"dev": true,
"dependencies": {
"ansi-regex": "^4.1.0"
},
@@ -6812,7 +6822,6 @@
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
"integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
"dev": true,
"engines": {
"node": ">=6"
}
@@ -11819,6 +11828,14 @@
"winston": "0.8.x"
}
},
"prompt-sync": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/prompt-sync/-/prompt-sync-4.2.0.tgz",
"integrity": "sha512-BuEzzc5zptP5LsgV5MZETjDaKSWfchl5U9Luiu8SKp7iZWD5tZalOxvNcZRwv+d2phNFr8xlbxmFNcRKfJOzJw==",
"requires": {
"strip-ansi": "^5.0.0"
}
},
"proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -13172,7 +13189,6 @@
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
"dev": true,
"requires": {
"ansi-regex": "^4.1.0"
},
@@ -13180,8 +13196,7 @@
"ansi-regex": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
"integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
"dev": true
"integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g=="
}
}
},

7
package.json
View File

@@ -38,11 +38,14 @@
"karma-firefox-launcher": "^1.3.0",
"karma-qunit": "^4.0.0",
"ls": "^0.2.1",
"markdown-it": "^13.0.1",
"puppeteer": "^2.1.1",
"qunit": "^2.9.3",
"qunit-assert-close": "^2.1.2",
"syn": "^0.14.1",
"terser": "^4.6.7",
"markdown-it": "^13.0.1"
"terser": "^4.6.7"
},
"dependencies": {
"prompt-sync": "^4.2.0"
}
}

27
website/docs/contributing/gettingStarted.html
View File

@@ -0,0 +1,27 @@
<!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>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

4
website/docs/nav.html
View File

@@ -13,9 +13,7 @@
<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="nav-subitem" id="root" href="/docs/reference">Home</a><a class="nav-subitem" id="CSS.html" href="/docs/reference/CSS.html.html">CSS.html</a><a class="nav-subitem" id="HTML.html" href="/docs/reference/HTML.html.html">HTML.html</a><a class="nav-subitem" id="JavaScript.html" href="/docs/reference/JavaScript.html.html">JavaScript.html</a><a class="nav-subitem" id="Plugins.html" href="/docs/reference/Plugins.html.html">Plugins.html</a></div>
<a class="navitem" id="pluginsNav" onclick="toggleList( 'plugins' );">Plugins</a>
<div class="dropdown" id="plugins">
<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>

20
website/docs/plugins/extras.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Docs - impress.js</title>
<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>
@@ -10,14 +10,14 @@
<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>
</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/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>
@@ -36,7 +36,7 @@ there's nothing to do here.</p>
<h2>Author</h2>
<p>Henrik Ingo (@henrikingo), 2016</p>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>

20
website/docs/plugins/goto.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Docs - impress.js</title>
<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>
@@ -10,14 +10,14 @@
<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>
</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>
@@ -37,7 +37,7 @@ of what strings to use for each key.</p>
<p>Copyright 2016 Henrik Ingo (@henrikingo)
Released under the MIT license.</p>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>

20
website/docs/plugins/help.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Docs - impress.js</title>
<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>
@@ -10,14 +10,14 @@
<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>
</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>&lt;div id=&quot;impress-help&quot;&gt;&lt;/div&gt;
@@ -46,7 +46,7 @@
<p>Copyright Henrik Ingo (@henrikingo), 2016
MIT License</p>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>

20
website/docs/plugins/impressConsole.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Docs - impress.js</title>
<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>
@@ -10,14 +10,14 @@
<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>
</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>
@@ -44,7 +44,7 @@
</ul>
<p>MIT License</p>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>

20
website/docs/plugins/mobile.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Docs - impress.js</title>
<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>
@@ -10,14 +10,14 @@
<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>
</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>
@@ -43,7 +43,7 @@ steps will probably not look correct.</p>
<h2>Author</h2>
<p>Kurt Zenisek (@KZeni)</p>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>

20
website/docs/plugins/mouse-timeout.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Docs - impress.js</title>
<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>
@@ -10,14 +10,14 @@
<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>
</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>
@@ -36,7 +36,7 @@ body.impress-mouse-timeout div#impress-toolbar {
<p>Copyright 2016 Henrik Ingo (@henrikingo)
Released under the MIT license.</p>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>

20
website/docs/plugins/navigation-ui.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Docs - impress.js</title>
<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>
@@ -10,14 +10,14 @@
<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>
</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 &quot;back&quot;, &quot;forward&quot; 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>
@@ -26,7 +26,7 @@ presentations, <a href="/docs/plugins/toolbar">see toolbar plugin README</a>.</p
<h2>Author</h2>
<p>Henrik Ingo (@henrikingo), 2016</p>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>

20
website/docs/plugins/progress.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Docs - impress.js</title>
<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>
@@ -10,14 +10,14 @@
<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>
</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>
@@ -53,7 +53,7 @@
<h2>Author</h2>
<p>Copyright 2014: Matthias Bilger (@m42e)</p>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>

20
website/docs/plugins/rel.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Docs - impress.js</title>
<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>
@@ -10,14 +10,14 @@
<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>
</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
@@ -121,7 +121,7 @@ the pre-init stage.)</p>
<h2>Author</h2>
<p>Henrik Ingo (@henrikingo), 2016</p>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>

20
website/docs/plugins/skip.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Docs - impress.js</title>
<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>
@@ -10,14 +10,14 @@
<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>
</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> &lt;!-- This slide is disabled in presentations, when moving with next()
and prev() commands, but you can still move directly to it, for
@@ -31,7 +31,7 @@ set, it will set the next step to the one after that.</p>
<p>Copyright 2016 Henrik Ingo (@henrikingo)
Released under the MIT license.</p>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>

20
website/docs/plugins/stop.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Docs - impress.js</title>
<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>
@@ -10,14 +10,14 @@
<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>
</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> &lt;!-- Stop at this slide.
(For example, when used on the last slide, this prevents the
@@ -32,7 +32,7 @@ slide.</p>
<p>Copyright 2016 Henrik Ingo (@henrikingo)
Released under the MIT license.</p>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>

20
website/docs/plugins/substep.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Docs - impress.js</title>
<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>
@@ -10,14 +10,14 @@
<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>
</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=&quot;substep&quot;</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
@@ -53,7 +53,7 @@ use the appropriate CSS to make the substeps hidden and visible.</p>
<p>Copyright 2017 Henrik Ingo (@henrikingo)
Released under the MIT license.</p>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>

20
website/docs/plugins/toolbar.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Docs - impress.js</title>
<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>
@@ -10,14 +10,14 @@
<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>
</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
@@ -48,7 +48,7 @@ the toolbar from sight, and only make it visible when mouse is moved.</p>
<h2>Author</h2>
<p>Henrik Ingo (@henrikingo), 2016</p>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>

78
website/docs/reference/CSS.html Normal file
View File

@@ -0,0 +1,78 @@
<!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>CSS</h2>
<h3>4D States (.past, .present and .future classes)</h3>
<p>The <code>.future</code> class is added to all <a href="#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="#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="#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>Current Active Step (.active class)</h3>
<p>The <code>.active</code> class is added to the <a href="#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="#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="#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>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>

193
website/docs/reference/HTML.html Normal file
View File

@@ -0,0 +1,193 @@
<!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>HTML</h2>
<h3>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=&quot;2000&quot;</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>&lt;div id=&quot;impress&quot; data-width=&quot;1024&quot; data-height=&quot;768&quot; data-max-scale=&quot;1&quot; data-min-scale=&quot;0&quot;
</code></pre>
<p>You can also control the perspective with <code>data-perspective=&quot;500&quot;</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="src/plugins/README.md">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">&lt;div id=&quot;impress&quot;
data-transition-duration=&quot;1000&quot;
data-width=&quot;1024&quot;
data-height=&quot;768&quot;
data-max-scale=&quot;3&quot;
data-min-scale=&quot;0&quot;
data-perspective=&quot;1000&quot;
data-autoplay=&quot;7&quot;&gt;
</code></pre>
<h3>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">&lt;div id=&quot;bored&quot; class=&quot;step&quot; data-x=&quot;-1000&quot;&gt;
&lt;q&gt;Aren’t you just &lt;b&gt;bored&lt;/b&gt; with all those slides-based presentations?&lt;/q&gt;
&lt;/div&gt;
</code></pre>
<h4>2D Coordinates Positioning (data-x, data-y)</h4>
<p>Define the pixel based position in which the <strong>center</strong> of the <a href="#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">&lt;div id=&quot;bored&quot; class=&quot;step&quot; data-x=&quot;-1000&quot; data-y=&quot;-1500&quot;&gt;
&lt;q&gt;Aren’t you just &lt;b&gt;bored&lt;/b&gt; with all those slides-based presentations?&lt;/q&gt;
&lt;/div&gt;
</code></pre>
<h4>2D Scaling (data-scale)</h4>
<p>Defines the scaling multiplier of the <a href="#step-element">Step Element</a> relative to other Step Elements. For example, <code>data-scale=&quot;4&quot;</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">&lt;div id=&quot;title&quot; class=&quot;step&quot; data-x=&quot;0&quot; data-y=&quot;0&quot; data-scale=&quot;4&quot;&gt;
&lt;span class=&quot;try&quot;&gt;then you should try&lt;/span&gt;
&lt;h1&gt;impress.js&lt;sup&gt;*&lt;/sup&gt;&lt;/h1&gt;
&lt;span class=&quot;footnote&quot;&gt;&lt;sup&gt;*&lt;/sup&gt; no rhyme intended&lt;/span&gt;
&lt;/div&gt;
</code></pre>
<h4>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">&lt;div id=&quot;its&quot; class=&quot;step&quot; data-x=&quot;850&quot; data-y=&quot;3000&quot; data-rotate=&quot;90&quot; data-scale=&quot;5&quot;&gt;
&lt;p&gt;
It’s a &lt;strong&gt;presentation tool&lt;/strong&gt; &lt;br&gt;
inspired by the idea behind &lt;a href=&quot;http://prezi.com&quot;&gt;prezi.com&lt;/a&gt; &lt;br&gt;
and based on the &lt;strong&gt;power of CSS3 transforms and transitions&lt;/strong&gt; in modern browsers.
&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<h4>3D Coordinates Positioning (data-z)</h4>
<p>Define the pixel based position in which the <strong>center</strong> of the <a href="#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=&quot;-3000&quot;</code>, it means that the <a href="#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">&lt;div id=&quot;tiny&quot; class=&quot;step&quot; data-x=&quot;2825&quot; data-y=&quot;2325&quot; data-z=&quot;-3000&quot; data-rotate=&quot;300&quot; data-scale=&quot;1&quot;&gt;
&lt;p&gt;and &lt;b&gt;tiny&lt;/b&gt; ideas&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<p><strong>Note:</strong> The introduction of the <a href="src/plugins/rel/README.md">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>3D Rotation (data-rotate-x, data-rotate-y, data-rotate-z)</h4>
<p>You can not only position a <a href="#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">&lt;div id=&quot;its-in-3d&quot; class=&quot;step&quot; data-x=&quot;6200&quot; data-y=&quot;4300&quot; data-z=&quot;-100&quot; data-rotate-x=&quot;-40&quot; data-rotate-y=&quot;10&quot; data-scale=&quot;2&quot;&gt;
&lt;p&gt;
&lt;span class=&quot;have&quot;&gt;have&lt;/span&gt;
&lt;span class=&quot;you&quot;&gt;you&lt;/span&gt;
&lt;span class=&quot;noticed&quot;&gt;noticed&lt;/span&gt;
&lt;span class=&quot;its&quot;&gt;it’s&lt;/span&gt;
&lt;span class=&quot;in&quot;&gt;in&lt;/span&gt;
&lt;b&gt;3D&lt;sup&gt;*&lt;/sup&gt;&lt;/b&gt;?
&lt;/p&gt;
&lt;span class=&quot;footnote&quot;&gt;* beat that, prezi ;)&lt;/span&gt;
&lt;/div&gt;
</code></pre>
<h4>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=&quot;xyz&quot;</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>

113
website/docs/reference/JavaScript.html Normal file
View File

@@ -0,0 +1,113 @@
<!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>JavaScript</h2>
<h3>impress( [ id ] )</h3>
<p>A factory function that creates the <a href="#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 &quot;impress&quot; by default.</p>
<p><strong>Example:</strong></p>
<pre><code class="language-JavaScript">var impressAPI = impress( &quot;root&quot; );
</code></pre>
<h3>ImpressAPI</h3>
<p>The main impress.js API that handles common operations of impress.js, listed below.</p>
<h4>.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="#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( &quot;impress&quot; );
rootElement.addEventListener( &quot;impress:init&quot;, function() {
console.log( &quot;Impress init&quot; );
});
impress().init();
</code></pre>
<h4>.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 &quot;unload&quot; 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>.next()</h4>
<p>Navigates to the next step of the presentation using the <a href="#impressgotostepindexstepelementidstepelement-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>.prev()</h4>
<p>Navigates to the previous step of the presentation using the <a href="#impressgotostepindexstepelementidstepelement-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>.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="#step-element">Step Element</a> id.</p>
<p>Navigates to the step given the provided <a href="#step-element">Step Element</a> id.</p>
<p><strong>Example:</strong></p>
<pre><code class="language-JavaScript">var api = impress();
api.init();
api.goto( &quot;overview&quot; );
</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="#step-element">Step Element</a>.</p>
<p>Navigates to the step given the provided <a href="#step-element">Step Element</a>.</p>
<p><strong>Example:</strong></p>
<pre><code class="language-JavaScript">var overview = document.getElementById( &quot;overview&quot; );
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="#root-element">Root Element</a> when the presentation navigates to the target <a href="#step-element">Step Element</a>.</p>
<p><strong>Example:</strong></p>
<pre><code class="language-JavaScript">var rootElement = document.getElementById( &quot;impress&quot; );
rootElement.addEventListener( &quot;impress:stepenter&quot;, function(event) {
var currentStep = event.target;
console.log( &quot;Entered the Step Element '&quot; + currentStep.id + &quot;'&quot; );
});
</code></pre>
<p>Triggers the <code>impress:stepleave</code> event in the <a href="#root-element">Root Element</a> when the presentation navigates away from the current <a href="#step-element">Step Element</a>.</p>
<p><strong>Example:</strong></p>
<pre><code class="language-JavaScript">var rootElement = document.getElementById( &quot;impress&quot; );
rootElement.addEventListener( &quot;impress:stepleave&quot;, function(event) {
var currentStep = event.target;
var nextStep = event.detail.next;
console.log( &quot;Left the Step Element '&quot; + currentStep.id + &quot;' and about to enter '&quot; + 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>

27
website/docs/reference/Plugins.html Normal file
View File

@@ -0,0 +1,27 @@
<!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>Plugins</h2>
<p>Many new features are implemented as plugins. The <a href="src/plugins/README.md">Plugins documentation</a> is the starting place to learn about those, as well as the README.md of <a href="src/plugins/">each plugin</a>.</p>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

87
website/docs/src/build.js
View File

@@ -17,6 +17,9 @@ const path = require( 'path' );
const mdhtml = require( 'markdown-it' );
const md2html = new mdhtml();
const docRoot = path.join( __dirname + '/../' );
const prompt = require( 'prompt-sync' )( {
sigint: true
} );
const pluginsPath = path.join( __dirname + '/../../../src/plugins' );
@@ -29,16 +32,33 @@ for ( let item in plugins ) {
console.log( 'NO README found for ' + path.join( pluginsPath + '/' + plugins[item] ) + ' PLEASE MAKE SURE YOU HAVE CREATED A README!' );
} else {
let html = md2html.render( '' + data );
storeHTML( findLinks( html, path.join( pluginsPath + '/' + plugins[item] ) ), plugins[item] );
storeHTML( findLinks( html, path.join( pluginsPath + '/' + plugins[item] ) ), plugins[item], 'plugins' );
};
} );
}
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( md2html.render( '' + fs.readFileSync( path.join( __dirname + '/../../../GettingStarted.md' ) ) ), '/gettingStarted.html', '' );
}
let docPages = fs.readdirSync( __dirname + '/../../../website/docs/reference' );
for ( let obj in docPages ) {
if ( docPages[obj] == 'index.html' ) {
delete docPages[obj];
};
}
generateNav ();
parseDocumentationMD();
storeHTML( md2html.render( '' + fs.readFileSync( path.join( __dirname + '/../../../GettingStarted.md' ) ) ), path.join( __dirname + '/../gettingStarted.html' ) );
/*
This function finds links. The reason for this is possible incompatibilities with links on the website
*/
function findLinks ( html, path ) {
let returnHTML = html;
for ( let letter in html ) {
@@ -55,8 +75,11 @@ function findLinks ( html, path ) {
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.
*/
function checkLinks ( link, fpath ) {
console.log( link );
let filepath = fpath;
let pos = 0;
if ( link.slice( parseInt( link.length ) - 9, parseInt( link.length ) ) === 'README.md' ) {
@@ -93,18 +116,17 @@ function checkLinks ( link, fpath ) {
let fpSlice = filepath.slice( parseInt( filepath.length ) - fsPos, parseInt( filepath.length ) );
return '<a href="https://github.com/impress/impress.js' + link + '">';
} else if ( link.slice( 0, 7 ) === 'http://' || link.slice( 0, 8 ) === 'https://' ) {
console.log( 'hi' );
return '<a href="' + link + '">';
} else {
throw Error( 'Invalid link found! Link is: "' + link + '" in file: ' + filepath + '/README.md' );
};
};
function storeHTML ( html, path ) {
function storeHTML ( html, path, type ) {
let fileOut = `<!DOCTYPE html>
<html>
<head>
<title>Docs - impress.js</title>
<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>
@@ -113,21 +135,21 @@ function storeHTML ( html, path ) {
<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>
</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 + '/plugins/' + path + '.html', fileOut );
fs.writeFileSync( docRoot + '/' + type + '/' + path + '.html', fileOut );
};
@@ -147,9 +169,11 @@ function generateNav () {
<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="nav-subitem" id="root" href="/docs/reference">Home</a>`
for ( let item in docPages ) {
fileStruct += `<a class="nav-subitem" id="${ docPages[item] }" href="/docs/reference/${ docPages[item] }.html">${ docPages[item] }</a>`;
};
fileStruct += `</div>
<a class="navitem" id="pluginsNav" onclick="toggleList( 'plugins' );">Plugins</a>
<div class="dropdown" id="plugins">
`;
@@ -173,11 +197,26 @@ function generateNav () {
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 ) + 2 ) === '##' ) {
console.log( '## found at ' + 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 );
};
};
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;
};
};
storeHTML( md2html.render( doc.slice( parseInt( posArray[parseInt( item )] ), parseInt( posArray[parseInt( item ) + 1] ) || parseInt( doc.length ) ) ), title, 'reference' );
}
}

66
website/js/docs/nav.js
View File

@@ -1,20 +1,51 @@
let bannedIDs = [];
function highlightPath () {
if ( $( location ).attr( 'pathname' ).slice( 6, location.pathname.length ) === '' ) {
$( '#home' ).css( 'background-color', 'black' );
bannedIDs.push( 'home' );
} else if ( $( location ).attr( 'pathname' ).slice( 6, location.pathname.length ) === 'gettingStarted.html' ) {
$( '#gettingStarted' ).css( 'background-color', 'black' );
bannedIDs.push( 'gettingStarted' );
} else if ( $( location ).attr( 'pathname' ).slice( 6, 16 ) === 'reference/' ) {
$( '#referenceNav' ).css( 'background-color', 'black' );
$( '#reference' ).slideDown();
bannedIDs.push( 'referenceNav' );
setTimeout( highlightSubPath( 16 ), 300 );
} else if ( $( location ).attr( 'pathname' ).slice( 6, 14 ) === 'plugins/' ) {
$( '#pluginsNav' ).css( 'background-color', 'black' );
$( '#plugins' ).slideDown();
bannedIDs.push( 'pluginsNav' );
setTimeout( highlightSubPath( 14 ), 300 );
}
};
$(document).ready(function () {
$( '.navitem' ).mouseenter( function () {
function highlightSubPath ( sliceStart ) {
console.log( $( location ).attr( 'pathname' ).slice( sliceStart, parseInt( location.pathname.length ) - 5 ) );
if ( $( location ).attr( 'pathname' ).slice( sliceStart, parseInt( location.pathname.length ) - 5 ) === '' ) {
$( '#root' ).css( 'background-color', 'black' );
bannedIDs.push( 'root' );
} else {
$( `#${location.pathname.slice( sliceStart, parseInt( location.pathname.length ) - 5 )}` ).css( 'background-color', 'rgb(43, 43, 43)' );
bannedIDs.push( `${location.pathname.slice( sliceStart, parseInt( location.pathname.length ) - 5 )}` );
};
}
$( document ).ready( function () {
$( '.navitem' ).mouseenter( function () {
$( this ).stop();
$( this ).animate( { 'background-color': 'black' }, 100 );
} );
$( '.navitem' ).mouseleave( function () {
if ( sessionStorage.getItem( 'theme' ) == 'dark' ) {
$( this ).stop();
$( this ).animate( { 'background-color': 'rgb(12, 12, 60)' }, 100 );
} else {
$( this ).stop();
$( this ).animate( { 'background-color': 'rgb(22, 22, 117)' }, 100 );
$( '.navitem' ).mouseleave( function () {
if ( !bannedIDs.includes( this.id ) ) {
if ( sessionStorage.getItem( 'theme' ) == 'dark' ) {
$( this ).stop();
$( this ).animate( { 'background-color': 'rgb(12, 12, 60)' }, 100 );
} else {
$( this ).stop();
$( this ).animate( { 'background-color': 'rgb(22, 22, 117)' }, 100 );
}
}
} );
@@ -24,14 +55,17 @@ $(document).ready(function () {
} );
$( '.nav-subitem' ).mouseleave( function () {
if ( sessionStorage.getItem( 'theme' ) == 'dark' ) {
$( this ).stop();
$( this ).animate( { 'background-color': 'rgb(18, 18, 99)' }, 100 );
} else {
$( this ).stop();
$( this ).animate( { 'background-color': 'rgb(27, 27, 165)' }, 100 );
if ( !bannedIDs.includes( this.id ) ) {
if ( sessionStorage.getItem( 'theme' ) == 'dark' ) {
$( this ).stop();
$( this ).animate( { 'background-color': 'rgb(18, 18, 99)' }, 100 );
} else {
$( this ).stop();
$( this ).animate( { 'background-color': 'rgb(27, 27, 165)' }, 100 );
}
}
} );
setTimeout( highlightPath, 300 );
});
function toggleList ( id ) {