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

fixed broken nav menu & link replacement errors

Browse Source
This commit is contained in:
Janis Hutz
2023-02-02 18:18:04 +01:00
parent 17c961fd2c
commit 8b173ff6cd
13 changed files with 490 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
website/docs/plugins/autoplay.html Normal file
View File

@@ -0,0 +1,43 @@
<!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="/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="https://github.com/impress/impress.js/GettingStarted.md">Getting Started Guide</a></p>
<pre><code>&lt;div id=impress data-autoplay=&quot;5&quot;&gt;
&lt;div class=&quot;step&quot; data-autoplay=&quot;0&quot;&gt;
This slide will not auto-advance
&lt;/div&gt;
&lt;div class=&quot;step&quot;&gt;
This slide will auto-advance at the globally defined rate.
&lt;/div&gt;
&lt;div class=&quot;step&quot; data-autoplay=&quot;10&quot;&gt;
This slide will auto-advance after 10 seconds
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

27
website/docs/plugins/blackout.html Normal file
View File

@@ -0,0 +1,27 @@
<!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>

36
website/docs/plugins/form.html Normal file
View File

@@ -0,0 +1,36 @@
<!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>

28
website/docs/plugins/fullscreen.html Normal file
View File

@@ -0,0 +1,28 @@
<!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>

49
website/docs/plugins/media.html Normal file
View File

@@ -0,0 +1,49 @@
<!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=&quot;true&quot;: Autostart media when entering its step.</li>
<li>data-media-autostop=&quot;true&quot;: Stop media (= pause and reset to start), when leaving its step.</li>
<li>data-media-autopause=&quot;true&quot;: 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=&quot;true&quot; data-media-autostop=&quot;true&quot;: start media on enter, stop on leave, restart from beginning when re-entering the step.</li>
<li>data-media-autoplay=&quot;true&quot; data-media-autopause=&quot;true&quot;: start media on enter, pause on leave, resume on re-enter</li>
<li>data-media-autoplay=&quot;true&quot; data-media-autostop=&quot;true&quot; data-media-autopause=&quot;true&quot;: start media on enter, stop on leave (stop overwrites pause).</li>
<li>data-media-autoplay=&quot;true&quot; data-media-autopause=&quot;false&quot;: let media start automatically when entering a step and let it play when leaving the step.</li>
<li><code>&lt;div id=&quot;impress&quot; data-media-autoplay=&quot;true&quot;&gt; ... &lt;div class=&quot;step&quot; data-media-autoplay=&quot;false&quot;&gt;</code>
All media is startet automatically on all steps except the one that has the data-media-autoplay=&quot;false&quot; attribute.</li>
<li>Pro tip: Use <code>&lt;audio onended=&quot;impress().next()&quot;&gt; or &lt;video onended=&quot;impress().next()&quot;&gt;</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>

39
website/docs/plugins/navigation.html Normal file
View File

@@ -0,0 +1,39 @@
<!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>

27
website/docs/plugins/resize.html Normal file
View File

@@ -0,0 +1,27 @@
<!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>

27
website/docs/plugins/touch.html Normal file
View File

@@ -0,0 +1,27 @@
<!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>