113 lines
6.5 KiB
HTML
113 lines
6.5 KiB
HTML
<!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 "impress" by default.</p>
|
|
<p><strong>Example:</strong></p>
|
|
<pre><code class="language-JavaScript">var impressAPI = impress( "root" );
|
|
</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( "impress" );
|
|
rootElement.addEventListener( "impress:init", function() {
|
|
console.log( "Impress init" );
|
|
});
|
|
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 "unload" impress.js. A particular use case for this is, if you want to do
|
|
dynamic changes to the presentation, you can do a teardown, apply changes, then call <code>init()</code>
|
|
again. (In most cases, this will not cause flickering or other visible effects to the user,
|
|
beyond the intended dynamic changes.)</p>
|
|
<p><strong>Example:</strong></p>
|
|
<pre><code class="language-JavaScript">impress().tear();
|
|
</code></pre>
|
|
<h4>.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( "overview" );
|
|
</code></pre>
|
|
<p>Accepts an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> that represents the <a href="#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( "overview" );
|
|
var api = impress();
|
|
api.init();
|
|
api.goto( overview );
|
|
</code></pre>
|
|
<p>Accepts an optional <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a> in the last argument that represents the duration of the transition in milliseconds. If not provided, the default transition duration for the presentation will be used.</p>
|
|
<p>Triggers the <code>impress:stepenter</code> event in the <a href="#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( "impress" );
|
|
rootElement.addEventListener( "impress:stepenter", function(event) {
|
|
var currentStep = event.target;
|
|
console.log( "Entered the Step Element '" + currentStep.id + "'" );
|
|
});
|
|
</code></pre>
|
|
<p>Triggers the <code>impress:stepleave</code> event in the <a href="#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( "impress" );
|
|
rootElement.addEventListener( "impress:stepleave", function(event) {
|
|
var currentStep = event.target;
|
|
var nextStep = event.detail.next;
|
|
console.log( "Left the Step Element '" + currentStep.id + "' and about to enter '" + nextStep.id );
|
|
});
|
|
</code></pre>
|
|
<h1>Improve The Docs</h1>
|
|
<p>Did you find something that can be improved? Then <a href="https://github.com/impress/impress.js/issues/newcreate an issue</a> so that we can discuss it!</p>
|
|
</div>
|
|
</div>
|
|
<div id="footer"></div>
|
|
</div>
|
|
</body>
|
|
</html> |