working build.js - no link check yet
This commit is contained in:
janis
@@ -1,14 +1,14 @@
|
||||
<!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">
|
||||
<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>
|
||||
@@ -18,8 +18,7 @@
|
||||
</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="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/gettingStarted.html">Getting Started</a>
|
||||
@@ -28,45 +27,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
function highlightPath () {
|
||||
|
||||
};
|
||||
|
||||
$(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 );
|
||||
}
|
||||
} );
|
||||
|
||||
$( '.nav-subitem' ).mouseenter( function () {
|
||||
$( this ).stop();
|
||||
$( this ).animate( { 'background-color': 'rgb(43, 43, 43)' }, 100 );
|
||||
} );
|
||||
|
||||
$( '.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 );
|
||||
}
|
||||
} );
|
||||
});
|
||||
|
||||
function toggleList ( id ) {
|
||||
$( `#${id}` ).slideToggle();
|
||||
};
|
||||
</script>
|
||||
<script src="/js/docs/nav.js"></script>
|
||||
</html>
|
||||
32
website/docs/navTemplate.html
Normal file
32
website/docs/navTemplate.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!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>
|
||||
43
website/docs/plugins/extras.html
Normal file
43
website/docs/plugins/extras.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!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>Extras Plugin</h1>
|
||||
<p>The Extras plugin will initialize the optional addon plugins from
|
||||
<a href="../../../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>
|
||||
44
website/docs/plugins/goto.html
Normal file
44
website/docs/plugins/goto.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!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>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>
|
||||
53
website/docs/plugins/help.html
Normal file
53
website/docs/plugins/help.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!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>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>
|
||||
51
website/docs/plugins/impressConsole.html
Normal file
51
website/docs/plugins/impressConsole.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!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>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>
|
||||
50
website/docs/plugins/mobile.html
Normal file
50
website/docs/plugins/mobile.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!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>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>
|
||||
43
website/docs/plugins/mouse-timeout.html
Normal file
43
website/docs/plugins/mouse-timeout.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!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>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>
|
||||
33
website/docs/plugins/navigation-ui.html
Normal file
33
website/docs/plugins/navigation-ui.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!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>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="../toolbar/README.md">see toolbar plugin README</a>.</p>
|
||||
<h2>Author</h2>
|
||||
<p>Henrik Ingo (@henrikingo), 2016</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
60
website/docs/plugins/progress.html
Normal file
60
website/docs/plugins/progress.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!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>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>
|
||||
128
website/docs/plugins/rel.html
Normal file
128
website/docs/plugins/rel.html
Normal file
@@ -0,0 +1,128 @@
|
||||
<!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>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="../../../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>
|
||||
38
website/docs/plugins/skip.html
Normal file
38
website/docs/plugins/skip.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<!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>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>
|
||||
39
website/docs/plugins/stop.html
Normal file
39
website/docs/plugins/stop.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<!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>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>
|
||||
60
website/docs/plugins/substep.html
Normal file
60
website/docs/plugins/substep.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!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>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>
|
||||
55
website/docs/plugins/toolbar.html
Normal file
55
website/docs/plugins/toolbar.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!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>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="../mouse-timeout/README.md">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="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>
|
||||
@@ -28,19 +28,21 @@ for ( let item in plugins ) {
|
||||
if ( error ) {
|
||||
parseJS( path.join( pluginsPath + '/' + plugins[item] ) );
|
||||
} else {
|
||||
console.log( md2html.render( '' + data ) );
|
||||
storeHTML( md2html.render( '' + data ), plugins[item] );
|
||||
};
|
||||
} );
|
||||
}
|
||||
|
||||
generateNav ();
|
||||
|
||||
|
||||
function parseJS ( filepath ) {
|
||||
console.log( 'no readme found' );
|
||||
console.log( 'no readme found for ' + filepath );
|
||||
let jsFiles = fs.readdirSync( filepath );
|
||||
}
|
||||
|
||||
function checkLinks ( html ) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
function storeHTML ( html, path ) {
|
||||
@@ -51,6 +53,9 @@ function storeHTML ( html, path ) {
|
||||
<!--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>
|
||||
@@ -59,12 +64,53 @@ function storeHTML ( html, path ) {
|
||||
<div id="nav"></div>
|
||||
<div id="top"></div>
|
||||
<div id="docPage">
|
||||
<div id="doc-container">` + html
|
||||
+ `</div>
|
||||
<div id="doc-container">
|
||||
` + html
|
||||
+ `</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>`;
|
||||
fs.writeFileSync( docRoot + '/plugins/' + path + '.html', fileOut );
|
||||
}
|
||||
|
||||
|
||||
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="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">
|
||||
`;
|
||||
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/gettingStarted.html">Getting Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="/js/docs/nav.js"></script>
|
||||
</html>`;
|
||||
fs.writeFileSync( docRoot + '/nav.html', fileStruct );
|
||||
}
|
||||
@@ -5,6 +5,9 @@
|
||||
<!--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/default.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>
|
||||
|
||||
Reference in New Issue
Block a user