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

finished build script

Browse Source
This commit is contained in:
Janis Hutz
2023-02-23 19:17:08 +01:00
parent 784541d9ab
commit e0dca1e82f
7 changed files with 124 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
DOCUMENTATION.md
View File

@@ -319,7 +319,7 @@ impress().tear();
#### .next() #### .next()
Navigates to the next step of the presentation using the [`goto()` function](#impressgotostepindexstepelementidstepelement-duration). Navigates to the next step of the presentation using the [`goto()` function](#-goto-stepindex--stepelementid--stepelement---duration--).
**Example:** **Example:**
@@ -331,7 +331,7 @@ api.next();
#### .prev() #### .prev()
Navigates to the previous step of the presentation using the [`goto()` function](#impressgotostepindexstepelementidstepelement-duration). Navigates to the previous step of the presentation using the [`goto()` function](#-goto-stepindex--stepelementid--stepelement---duration--).
**Example:** **Example:**

18
website/docs/reference/CSS.html
View File

@@ -17,29 +17,29 @@
<div id="top"></div> <div id="top"></div>
<div id="docPage"> <div id="docPage">
<div id="doc-container"> <div id="doc-container">
<h2>CSS</h2> <h2 id="css">CSS</h2>
<h3>4D States (.past, .present and .future classes)</h3> <h3 id="4d-states--past---present-and--future-classes">4D States (.past, .present and .future classes)</h3>
<p>The <code>.future</code> class is added to all <a href="#step-element">Step Elements</a> that haven't been visited yet.</p> <p>The <code>.future</code> class is added to all <a href="/docs/reference/HTML.html#step-element">Step Elements</a> that haven't been visited yet.</p>
<p><strong>Example:</strong></p> <p><strong>Example:</strong></p>
<pre><code class="language-CSS">.future { <pre><code class="language-CSS">.future {
display: none; display: none;
} }
</code></pre> </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>The <code>.present</code> class is added to the <a href="/docs/reference/HTML.html#step-element">Step Element</a> that is currently at the center of the camera. This is useful to create animations inside the step once the camera navigates to it.</p>
<p><strong>Example:</strong></p> <p><strong>Example:</strong></p>
<pre><code class="language-CSS">.present .rotating { <pre><code class="language-CSS">.present .rotating {
transform: rotate(-10deg); transform: rotate(-10deg);
transition-delay: 0.25s; transition-delay: 0.25s;
} }
</code></pre> </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>The <code>.past</code> class is added to all <a href="/docs/reference/HTML.html#step-element">Step Elements</a> that have been visited at least once.</p>
<p><strong>Example:</strong></p> <p><strong>Example:</strong></p>
<pre><code class="language-CSS">.past { <pre><code class="language-CSS">.past {
display: none; display: none;
} }
</code></pre> </code></pre>
<h3>Current Active Step (.active class)</h3> <h3 id="current-active-step--active-class">Current Active Step (.active class)</h3>
<p>The <code>.active</code> class is added to the <a href="#step-element">Step Element</a> that is currently visible at the center of the camera.</p> <p>The <code>.active</code> class is added to the <a href="/docs/reference/HTML.html#step-element">Step Element</a> that is currently visible at the center of the camera.</p>
<p><strong>Example:</strong></p> <p><strong>Example:</strong></p>
<pre><code class="language-CSS">.step { <pre><code class="language-CSS">.step {
opacity: 0.3; opacity: 0.3;
@@ -49,7 +49,7 @@
opacity: 1 opacity: 1
} }
</code></pre> </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>At the same time, the <code>impress-on-*</code> class is added to the body element, the class name represents the active <a href="/docs/reference/HTML.html#step-element">Step Element</a> id. This allows for custom global styling, since you can't match a CSS class backwards from the active <a href="/docs/reference/HTML.html#step-element">Step Element</a> to the <code>body</code>.</p>
<p><strong>Example:</strong></p> <p><strong>Example:</strong></p>
<pre><code class="language-CSS">.impress-on-overview .step { <pre><code class="language-CSS">.impress-on-overview .step {
opacity: 1; opacity: 1;
@@ -61,7 +61,7 @@
background: LightBlue; background: LightBlue;
} }
</code></pre> </code></pre>
<h3>Progressive Enhancement (.impress-not-supported class)</h3> <h3 id="progressive-enhancement--impress-not-supported-class">Progressive Enhancement (.impress-not-supported class)</h3>
<p>The <code>.impress-not-supported</code> class is added to the <code>body</code> element if the browser doesn't support the features required by impress.js to work, it is useful to apply some fallback styles in the CSS.</p> <p>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'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>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>

32
website/docs/reference/HTML.html
View File

@@ -17,8 +17,8 @@
<div id="top"></div> <div id="top"></div>
<div id="docPage"> <div id="docPage">
<div id="doc-container"> <div id="doc-container">
<h2>HTML</h2> <h2 id="html">HTML</h2>
<h3>Root Element</h3> <h3 id="root-element">Root Element</h3>
<p>impress.js requires a Root Element. All the content of the presentation will be created inside that element. It is not recommended to manipulate any of the styles, attributes or classes that are created by impress.js inside the Root Element after initialization.</p> <p>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 <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> a number of ms. It defaults to 1000 (1s).</p>
@@ -41,7 +41,7 @@ to be affected. In order to get back the old target resolution, use:</p>
It defaults to 1000. You can set it to 0 if you don't want any 3D effects. 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: If you are willing to change this value make sure you understand how CSS perspective works:
https://developer.mozilla.org/en/CSS/perspective</p> 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>See also <a href="/docs/plugins/">the plugin README</a> for documentation on <code>data-autoplay</code>.</p>
<p><strong>Attributes</strong></p> <p><strong>Attributes</strong></p>
<table> <table>
<thead> <thead>
@@ -96,7 +96,7 @@ https://developer.mozilla.org/en/CSS/perspective</p>
data-autoplay=&quot;7&quot;&gt; data-autoplay=&quot;7&quot;&gt;
</code></pre> </code></pre>
<h3>Step Element</h3> <h3 id="step-element">Step Element</h3>
<p>A Step Element is an element that contains metadata that defines how it is going to be presented in the screen. <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. 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. The content represents an html fragment that will be positioned at the center of the camera.
@@ -106,8 +106,8 @@ In the Step Element, you can define a specific set of default attributes and pos
&lt;q&gt;Aren’t you just &lt;b&gt;bored&lt;/b&gt; with all those slides-based presentations?&lt;/q&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; &lt;/div&gt;
</code></pre> </code></pre>
<h4>2D Coordinates Positioning (data-x, data-y)</h4> <h4 id="2d-coordinates-positioning-data-x--data-y">2D Coordinates Positioning (data-x, data-y)</h4>
<p>Define the pixel based position in which the <strong>center</strong> of the <a href="#step-element">Step Element</a> will be positioned inside the infinite canvas.</p> <p>Define the pixel based position in which the <strong>center</strong> of the <a href="/docs/reference/HTML.html#step-element">Step Element</a> will be positioned inside the infinite canvas.</p>
<p><strong>Attributes</strong></p> <p><strong>Attributes</strong></p>
<table> <table>
<thead> <thead>
@@ -135,8 +135,8 @@ In the Step Element, you can define a specific set of default attributes and pos
&lt;q&gt;Aren’t you just &lt;b&gt;bored&lt;/b&gt; with all those slides-based presentations?&lt;/q&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; &lt;/div&gt;
</code></pre> </code></pre>
<h4>2D Scaling (data-scale)</h4> <h4 id="2d-scaling-data-scale">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>Defines the scaling multiplier of the <a href="/docs/reference/HTML.html#step-element">Step Element</a> relative to other Step Elements. For example, <code>data-scale=&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> <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; <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;span class=&quot;try&quot;&gt;then you should try&lt;/span&gt;
@@ -144,7 +144,7 @@ In the Step Element, you can define a specific set of default attributes and pos
&lt;span class=&quot;footnote&quot;&gt;&lt;sup&gt;*&lt;/sup&gt; no rhyme intended&lt;/span&gt; &lt;span class=&quot;footnote&quot;&gt;&lt;sup&gt;*&lt;/sup&gt; no rhyme intended&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<h4>2D Rotation (data-rotate)</h4> <h4 id="2d-rotation-data-rotate">2D Rotation (data-rotate)</h4>
<p>Represents the amount of clockwise rotation of the element relative to 360 degrees.</p> <p>Represents the amount of clockwise rotation of the element relative to 360 degrees.</p>
<p><strong>Example:</strong></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; <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;
@@ -155,18 +155,18 @@ In the Step Element, you can define a specific set of default attributes and pos
&lt;/p&gt; &lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<h4>3D Coordinates Positioning (data-z)</h4> <h4 id="3d-coordinates-positioning-data-z">3D Coordinates Positioning (data-z)</h4>
<p>Define the pixel based position in which the <strong>center</strong> of the <a href="#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>Define the pixel based position in which the <strong>center</strong> of the <a href="/docs/reference/HTML.html#step-element">Step Element</a> will be positioned inside the infinite canvas on the third dimension (Z) axis. For example, if we use <code>data-z=&quot;-3000&quot;</code>, it means that the <a href="/docs/reference/HTML.html#step-element">Step Element</a> will be positioned far away from the camera (by 3000px).</p>
<p><strong>Example:</strong></p> <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; <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;p&gt;and &lt;b&gt;tiny&lt;/b&gt; ideas&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </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. <p><strong>Note:</strong> The introduction of the <a href="/docs/plugins/rel/">rel</a> plugin includes a slight backward incompatible change.
Previously the default value for <code>data-x</code>, <code>data-y</code> and <code>data-z</code> was zero. The <code>rel</code> plugin changes the default to inherit 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> 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> <h4 id="3d-rotation-data-rotate-x--data-rotate-y--data-rotate-z">3D Rotation (data-rotate-x, data-rotate-y, data-rotate-z)</h4>
<p>You can not only position a <a href="#step-element">Step Element</a> in 3D, but also rotate it around any axis.</p> <p>You can not only position a <a href="/docs/reference/HTML.html#step-element">Step Element</a> in 3D, but also rotate it around any axis.</p>
<p><strong>Example:</strong></p> <p><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>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> <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>
@@ -182,9 +182,9 @@ the value of the previous slide. This means, you need to explicitly set these va
&lt;span class=&quot;footnote&quot;&gt;* beat that, prezi ;)&lt;/span&gt; &lt;span class=&quot;footnote&quot;&gt;* beat that, prezi ;)&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<h4>3D Rotation Order (data-rotate-order)</h4> <h4 id="3d-rotation-order-data-rotate-order">3D Rotation Order (data-rotate-order)</h4>
<p>The order in which the CSS <code>rotateX(), rotateY(), rotateZ()</code> transforms are applied matters. This is because each rotation is relative to the then current position of the element.</p> <p>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="/demo/examples/3D-rotations/index.html3D rotations</a> sets this attribute to rotate some steps into positions that are impossible to reach with the default order.</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> </div>
<div id="footer"></div> <div id="footer"></div>

36
website/docs/reference/JavaScript.html
View File

@@ -17,21 +17,21 @@
<div id="top"></div> <div id="top"></div>
<div id="docPage"> <div id="docPage">
<div id="doc-container"> <div id="doc-container">
<h2>JavaScript</h2> <h2 id="javascript">JavaScript</h2>
<h3>impress( [ id ] )</h3> <h3 id="impress--id--">impress( [ id ] )</h3>
<p>A factory function that creates the <a href="#impressapi">ImpressAPI</a>.</p> <p>A factory function that creates the <a href="/docs/reference/JavaScript.html#impressapi">ImpressAPI</a>.</p>
<p>Accepts a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a> that represents the id of the root element in the page. If omitted, impress.js will lookup for the element with the id &quot;impress&quot; by default.</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> <p><strong>Example:</strong></p>
<pre><code class="language-JavaScript">var impressAPI = impress( &quot;root&quot; ); <pre><code class="language-JavaScript">var impressAPI = impress( &quot;root&quot; );
</code></pre> </code></pre>
<h3>ImpressAPI</h3> <h3 id="impressapi">ImpressAPI</h3>
<p>The main impress.js API that handles common operations of impress.js, listed below.</p> <p>The main impress.js API that handles common operations of impress.js, listed below.</p>
<h4>.init()</h4> <h4 id="-init">.init()</h4>
<p>Initializes impress.js globally in the page. Only one instance of impress.js is supported per document.</p> <p>Initializes impress.js globally in the page. Only one instance of impress.js is supported per document.</p>
<p><strong>Example:</strong></p> <p><strong>Example:</strong></p>
<pre><code class="language-JavaScript">impress().init(); <pre><code class="language-JavaScript">impress().init();
</code></pre> </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>Triggers the <code>impress:init</code> event in the <a href="/docs/reference/HTML.html#root-element">Root Element</a> after the presentation is initialized.</p>
<p><strong>Example:</strong></p> <p><strong>Example:</strong></p>
<pre><code class="language-JavaScript">var rootElement = document.getElementById( &quot;impress&quot; ); <pre><code class="language-JavaScript">var rootElement = document.getElementById( &quot;impress&quot; );
rootElement.addEventListener( &quot;impress:init&quot;, function() { rootElement.addEventListener( &quot;impress:init&quot;, function() {
@@ -39,7 +39,7 @@ rootElement.addEventListener( &quot;impress:init&quot;, function() {
}); });
impress().init(); impress().init();
</code></pre> </code></pre>
<h4>.tear()</h4> <h4 id="-tear">.tear()</h4>
<p>Resets the DOM to its original state, as it was before <code>init()</code> was called.</p> <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 <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> dynamic changes to the presentation, you can do a teardown, apply changes, then call <code>init()</code>
@@ -48,21 +48,21 @@ beyond the intended dynamic changes.)</p>
<p><strong>Example:</strong></p> <p><strong>Example:</strong></p>
<pre><code class="language-JavaScript">impress().tear(); <pre><code class="language-JavaScript">impress().tear();
</code></pre> </code></pre>
<h4>.next()</h4> <h4 id="-next">.next()</h4>
<p>Navigates to the next step of the presentation using the <a href="#impressgotostepindexstepelementidstepelement-duration"><code>goto()</code> function</a>.</p> <p>Navigates to the next step of the presentation using the <a href="/docs/reference/JavaScript.html#-goto-stepindex--stepelementid--stepelement---duration--"><code>goto()</code> function</a>.</p>
<p><strong>Example:</strong></p> <p><strong>Example:</strong></p>
<pre><code class="language-JavaScript">var api = impress(); <pre><code class="language-JavaScript">var api = impress();
api.init(); api.init();
api.next(); api.next();
</code></pre> </code></pre>
<h4>.prev()</h4> <h4 id="-prev">.prev()</h4>
<p>Navigates to the previous step of the presentation using the <a href="#impressgotostepindexstepelementidstepelement-duration"><code>goto()</code> function</a>.</p> <p>Navigates to the previous step of the presentation using the <a href="/docs/reference/JavaScript.html#-goto-stepindex--stepelementid--stepelement---duration--"><code>goto()</code> function</a>.</p>
<p><strong>Example:</strong></p> <p><strong>Example:</strong></p>
<pre><code class="language-JavaScript">var api = impress(); <pre><code class="language-JavaScript">var api = impress();
api.init(); api.init();
api.prev(); api.prev();
</code></pre> </code></pre>
<h4>.goto( stepIndex | stepElementId | stepElement, [ duration ] )</h4> <h4 id="-goto-stepindex--stepelementid--stepelement---duration--">.goto( stepIndex | stepElementId | stepElement, [ duration ] )</h4>
<p>Accepts a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a> that represents the step index.</p> <p>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>Navigates to the step given the provided step index.</p>
<p><strong>Example:</strong></p> <p><strong>Example:</strong></p>
@@ -70,15 +70,15 @@ api.prev();
api.init(); api.init();
api.goto(7); api.goto(7);
</code></pre> </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>Accepts a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a> that represents the <a href="/docs/reference/HTML.html#step-element">Step Element</a> id.</p>
<p>Navigates to the step given the provided <a href="#step-element">Step Element</a> id.</p> <p>Navigates to the step given the provided <a href="/docs/reference/HTML.html#step-element">Step Element</a> id.</p>
<p><strong>Example:</strong></p> <p><strong>Example:</strong></p>
<pre><code class="language-JavaScript">var api = impress(); <pre><code class="language-JavaScript">var api = impress();
api.init(); api.init();
api.goto( &quot;overview&quot; ); api.goto( &quot;overview&quot; );
</code></pre> </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>Accepts an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> that represents the <a href="/docs/reference/HTML.html#step-element">Step Element</a>.</p>
<p>Navigates to the step given the provided <a href="#step-element">Step Element</a>.</p> <p>Navigates to the step given the provided <a href="/docs/reference/HTML.html#step-element">Step Element</a>.</p>
<p><strong>Example:</strong></p> <p><strong>Example:</strong></p>
<pre><code class="language-JavaScript">var overview = document.getElementById( &quot;overview&quot; ); <pre><code class="language-JavaScript">var overview = document.getElementById( &quot;overview&quot; );
var api = impress(); var api = impress();
@@ -86,7 +86,7 @@ api.init();
api.goto( overview ); api.goto( overview );
</code></pre> </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>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>Triggers the <code>impress:stepenter</code> event in the <a href="/docs/reference/HTML.html#root-element">Root Element</a> when the presentation navigates to the target <a href="/docs/reference/HTML.html#step-element">Step Element</a>.</p>
<p><strong>Example:</strong></p> <p><strong>Example:</strong></p>
<pre><code class="language-JavaScript">var rootElement = document.getElementById( &quot;impress&quot; ); <pre><code class="language-JavaScript">var rootElement = document.getElementById( &quot;impress&quot; );
rootElement.addEventListener( &quot;impress:stepenter&quot;, function(event) { rootElement.addEventListener( &quot;impress:stepenter&quot;, function(event) {
@@ -94,7 +94,7 @@ rootElement.addEventListener( &quot;impress:stepenter&quot;, function(event) {
console.log( &quot;Entered the Step Element '&quot; + currentStep.id + &quot;'&quot; ); console.log( &quot;Entered the Step Element '&quot; + currentStep.id + &quot;'&quot; );
}); });
</code></pre> </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>Triggers the <code>impress:stepleave</code> event in the <a href="/docs/reference/HTML.html#root-element">Root Element</a> when the presentation navigates away from the current <a href="/docs/reference/HTML.html#step-element">Step Element</a>.</p>
<p><strong>Example:</strong></p> <p><strong>Example:</strong></p>
<pre><code class="language-JavaScript">var rootElement = document.getElementById( &quot;impress&quot; ); <pre><code class="language-JavaScript">var rootElement = document.getElementById( &quot;impress&quot; );
rootElement.addEventListener( &quot;impress:stepleave&quot;, function(event) { rootElement.addEventListener( &quot;impress:stepleave&quot;, function(event) {

4
website/docs/reference/Plugins.html
View File

@@ -17,8 +17,8 @@
<div id="top"></div> <div id="top"></div>
<div id="docPage"> <div id="docPage">
<div id="doc-container"> <div id="doc-container">
<h2>Plugins</h2> <h2 id="plugins">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="https://github.com/impress/impress.js/src/plugins/each plugin</a>.</p> <p>Many new features are implemented as plugins. The <a href="/docs/plugins/">Plugins documentation</a> is the starting place to learn about those, as well as the README.md of <a href="https://github.com/impress/impress.js/src/plugins/">each plugin</a>.</p>
</div> </div>
</div> </div>
<div id="footer"></div> <div id="footer"></div>

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

@@ -43,17 +43,20 @@ if ( prompt( 'Do you want to regenerate the API reference? (y/n) ' ).toLowerCase
parseDocumentationMD(); parseDocumentationMD();
} }
if ( prompt( 'Do you want to regenerate the Getting Started Guide? (y/n) ' ).toLowerCase() == 'y' ) { if ( prompt( 'Do you want to regenerate the getting started guide? (y/n) ' ).toLowerCase() == 'y' ) {
console.log( 'Regenerating Getting Started Guide' ); console.log( 'Regenerating Getting Started Guide' );
storeHTML( generateGettingStarted( md2html.render( '' + fs.readFileSync( path.join( __dirname + '/../../../GettingStarted.md' ) ) ) ), 'gettingStarted', '' ); storeHTML( generateGettingStarted( md2html.render( '' + fs.readFileSync( path.join( __dirname + '/../../../GettingStarted.md' ) ) ) ), 'gettingStarted', '' );
} }
console.log( 'regenerating plugins documentation' );
let docPages = fs.readdirSync( __dirname + '/../../../website/docs/reference' ); let docPages = fs.readdirSync( __dirname + '/../../../website/docs/reference' );
for ( let obj in docPages ) {
if ( docPages[obj] == 'index.html' ) { if ( prompt( 'Do you want to regenerate the plugins documentation? (y/n) ' ).toLowerCase() == 'y' ) {
delete docPages[obj]; console.log( 'regenerating plugins documentation' );
}; for ( let obj in docPages ) {
if ( docPages[obj] == 'index.html' ) {
delete docPages[obj];
};
}
} }
console.log( 'regenerating Nav' ); console.log( 'regenerating Nav' );
@@ -221,6 +224,9 @@ function parseDocumentationMD () {
lastHashtagPos = parseInt( letter ); lastHashtagPos = parseInt( letter );
}; };
}; };
let titles = {};
for ( let item in posArray ) { for ( let item in posArray ) {
let titleArea = doc.slice( parseInt( posArray[item] ), parseInt( posArray[item] + 20 ) ); let titleArea = doc.slice( parseInt( posArray[item] ), parseInt( posArray[item] + 20 ) );
let title = ''; let title = '';
@@ -232,9 +238,45 @@ function parseDocumentationMD () {
}; };
let page = md2html.render( doc.slice( parseInt( posArray[parseInt( item )] ), parseInt( posArray[parseInt( item ) + 1] ) || parseInt( doc.length ) ) ); let page = md2html.render( doc.slice( parseInt( posArray[parseInt( item )] ), parseInt( posArray[parseInt( item ) + 1] ) || parseInt( doc.length ) ) );
let updatedPage = page;
for ( let letter in page ) { for ( let letter in page ) {
let titleTag = page.slice( parseInt( letter ), parseInt( letter ) + 4 );
if ( titleTag === '<h1>' || titleTag === '<h2>' || titleTag === '<h3>' || titleTag === '<h4>' ) {
let i = 4;
while ( page.slice( parseInt( letter ) + i, parseInt( letter ) + i + 1 ) !== '<' ) {
i += 1;
};
let heading = '' + page.slice( parseInt( letter ) + 4, parseInt( letter ) + i );
let output = '';
for ( let pos in heading ) {
let letter = heading[ pos ];
if ( letter === ' ' || letter === '.' || letter === ',' ) {
output += '-';
} else if ( letter === '(' || letter === ')' || letter === '[' || letter === ']' || letter === '|' ) {
} else {
output += letter;
};
};
titles[ output.toLowerCase() ] = title;
};
};
}
for ( let item in posArray ) {
let titleArea = doc.slice( parseInt( posArray[item] ), parseInt( posArray[item] + 20 ) );
let title = '';
for ( let pos in titleArea ) {
if ( titleArea[pos] === '\n' ) {
title = titleArea.slice( 3, pos );
break;
};
};
let page = md2html.render( doc.slice( parseInt( posArray[parseInt( item )] ), parseInt( posArray[parseInt( item ) + 1] ) || parseInt( doc.length ) ) );
for ( let letter in page ) {
let titleTag = page.slice( parseInt( letter ), parseInt( letter ) + 4 );
if ( page[letter] === '<' ) { if ( page[letter] === '<' ) {
if ( page.slice( parseInt( letter ), parseInt( letter ) + 9 ) === '<a href="' ) { if ( page.slice( parseInt( letter ), parseInt( letter ) + 9 ) === '<a href="' ) {
let i = 9; let i = 9;
@@ -244,30 +286,50 @@ function parseDocumentationMD () {
let link = '' + page.slice( parseInt( letter ) + 9, parseInt( letter ) + i ); let link = '' + page.slice( parseInt( letter ) + 9, parseInt( letter ) + i );
let updatedLink = ''; let updatedLink = '';
if ( link.slice( 0, 8 ) === 'https://' || link.slice( 0, 7 ) === 'http://' || link.slice( 0, 1 ) === '#' ) { if ( link.slice( 0, 8 ) === 'https://' || link.slice( 0, 7 ) === 'http://' || link.slice( 0, 1 ) === '#' ) {
updatedLink = link; if ( link.slice( 0, 1 ) === '#' ) {
if ( titles[ link.slice( 1, parseInt( link.length ) ) ] !== undefined ) {
updatedLink = '/docs/reference/' + titles[ link.slice( 1, parseInt( link.length ) ) ] + '.html' + link;
} else {
console.log( 'unable to map link ' + link );
}
} else {
updatedLink = link;
}
} else { } else {
if ( link.slice( 0, 12 ) === 'src/plugins/' ) { if ( link.slice( 0, 12 ) === 'src/plugins/' ) {
if ( link.slice( link.length - 9, link.length ) === 'README.md' ) { if ( link.slice( link.length - 9, link.length ) === 'README.md' ) {
updatedLink = '/docs/' + link.slice( 4, link.length - 9 ); updatedLink = '/docs/' + link.slice( 4, link.length - 9 );
} else { } else {
updatedLink = 'https://github.com/impress/impress.js/' + link; updatedLink = 'https://github.com/impress/impress.js/' + link;
} };
} else if ( link.slice( 0, 9 ) === 'examples/' ) { } else if ( link.slice( 0, 9 ) === 'examples/' ) {
updatedLink = '/demo/' + link; updatedLink = '/demo/' + link;
} else { } else {
updatedLink = 'https://github.com/impress/impress.js/' + link; updatedLink = 'https://github.com/impress/impress.js/' + link;
}; };
updatedPage = page.slice( 0, parseInt( letter ) + 9 ) + updatedLink + page.slice( parseInt( letter ) + i + 2, parseInt( page.length ) );
} }
} else if ( page.slice( parseInt( letter ), parseInt( letter ) + 4 ) === '<h1>' ) { page = page.slice( 0, parseInt( letter ) + 9 ) + updatedLink + page.slice( parseInt( letter ) + i, parseInt( page.length ) );
let i = 9; } else if ( titleTag === '<h1>' || titleTag === '<h2>' || titleTag === '<h3>' || titleTag === '<h4>' ) {
let i = 4;
while ( page.slice( parseInt( letter ) + i, parseInt( letter ) + i + 1 ) !== '<' ) { while ( page.slice( parseInt( letter ) + i, parseInt( letter ) + i + 1 ) !== '<' ) {
i += 1; i += 1;
}; };
let heading = '' + page.slice( parseInt( letter ) + 9, parseInt( letter ) + i ); let heading = '' + page.slice( parseInt( letter ) + 4, parseInt( letter ) + i );
} let output = '';
for ( let pos in heading ) {
let letter = heading[ pos ];
if ( letter === ' ' || letter === '.' || letter === ',' ) {
output += '-';
} else if ( letter === '(' || letter === ')' || letter === '[' || letter === ']' || letter === '|' ) {
} else {
output += letter;
};
};
page = page.slice( 0, parseInt( letter ) + 3 ) + ' id="' + output.toLowerCase() + '">' + page.slice( parseInt( letter ) + 4, parseInt( page.length ) );
};
}; };
storeHTML( updatedPage, title, 'reference' ); storeHTML( page, title, 'reference' );
}; };
}; };
} }

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

@@ -1,7 +1,6 @@
let bannedIDs = []; let bannedIDs = [];
function highlightPath () { function highlightPath () {
console.log( 'highlighting' );
if ( $( location ).attr( 'pathname' ).slice( 6, location.pathname.length ) === '' ) { if ( $( location ).attr( 'pathname' ).slice( 6, location.pathname.length ) === '' ) {
$( '#home' ).animate( { 'background-color': 'black' }, 200 ); $( '#home' ).animate( { 'background-color': 'black' }, 200 );
bannedIDs.push( 'home' ); bannedIDs.push( 'home' );
@@ -22,7 +21,6 @@ function highlightPath () {
}; };
function highlightSubPath ( sliceStart ) { 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 ) === '' ) { if ( $( location ).attr( 'pathname' ).slice( sliceStart, parseInt( location.pathname.length ) - 5 ) === '' ) {
$( '#root' ).animate( { 'background-color': 'black' }, 200 ); $( '#root' ).animate( { 'background-color': 'black' }, 200 );
bannedIDs.push( 'root' ); bannedIDs.push( 'root' );