Use autoplay and toolbar plugins in the main impress demo

henrikingo · henrikingo · commit 7505838891f8 · 2017-11-05T18:42:27.000+02:00
For all the other features, see demos under extras/
diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
@@ -82,6 +82,11 @@ Define the pixel based position in which the **center** of the [Step Element](#s
 </div>
 ```
 
+**Note:** The introduction of the [rel](src/plugins/rel/README.md) plugin includes a slight backward incompatible change.
+Previously the default value for `data-x`, `data-y` and `data-z` was zero. The `rel` 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.
+
+
 #### 3D Rotation (data-rotate-x, data-rotate-y, data-rotate-z)
 
 You can not only position a [Step Element](#step-element) in 3D, but also rotate it around any axis.
diff --git a/css/impress-demo.css b/css/impress-demo.css
@@ -268,7 +268,7 @@ a:focus {
 }
 
 #title h1 {
-    font-size: 190px;
+    font-size: 180px;
 
     -webkit-transform: translateZ(50px);
     -moz-transform:    translateZ(50px);
@@ -294,6 +294,7 @@ a:focus {
     line-height: 1;
 }
 
+#big strong,
 #big b {
     display: block;
     font-size: 250px;
@@ -527,6 +528,35 @@ a:focus {
     cursor: pointer;
 }
 
+/*
+    This version of impress.js supports plugins, and in particular, a UI toolbar
+    plugin that allows easy navigation between steps and autoplay.
+*/
+.impress-enabled div#impress-toolbar {
+    position: fixed;
+    right: 1px;
+    bottom: 1px;
+    opacity: 0.6;
+}
+.impress-enabled div#impress-toolbar > span {
+    margin-right: 10px;
+}
+
+/*
+    With help from the mouse-timeout plugin, we can hide the toolbar and
+    have it show only when you move/click/touch the mouse.
+*/
+body.impress-mouse-timeout div#impress-toolbar {
+    display: none;
+}
+
+/*
+    In fact, we can hide the mouse cursor itself too, when mouse isn't used.
+*/
+body.impress-mouse-timeout {
+    cursor: none;
+}
+
 
 /*
     Now, when we have all the steps styled let's give users a hint how to navigate
@@ -682,9 +712,9 @@ a:focus {
 
     So use it wisely ... or don't use at all.
 */
-.impress-enabled          { pointer-events: none }
-.impress-enabled #impress { pointer-events: auto }
-
+.impress-enabled                          { pointer-events: none }
+.impress-enabled #impress                 { pointer-events: auto }
+.impress-enabled #impress-toolbar         { pointer-events: auto }
 /*
     There is one funny thing I just realized.
 
diff --git a/index.html b/index.html
@@ -143,8 +143,12 @@
     But as I said, you won't need it for now, so don't worry - there are some simple but interesting things
     right around the corner of this tag ;)
     
+    ----------
+    Plugins: We set the default time for autoplay plugin to 6 seconds. Autoplay will automatically advance
+    to next slide after a timeout expires.
+    
 -->
-<div id="impress">
+<div id="impress" data-autoplay="7">
 
     <!--
         
@@ -162,8 +166,11 @@
         
         It will not be rotated or scaled.
         
+        --------
+        Plugins: For first slide, set the autoplay time to a custom 10 seconds.
+        
     -->
-    <div id="bored" class="step slide" data-x="-1000" data-y="-1500">
+    <div id="bored" class="step slide" data-x="-1000" data-y="-1500" data-autoplay="10">
         <q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
     </div>
 
@@ -256,8 +263,12 @@ <h1>impress.js<sup>*</sup></h1>
         So basically every step element has one of three classes: `future`, `present` and `past`.
         Only one current step has the `present` class.
         
+        Note: data-x/y/z attributes, if not defined, by default will inherit the value of the 
+        previous step. So to get back to 0 on the z-axis, we must set it to 0.
+        See src/plugins/rel/README.md for more information.
+        
     -->
-    <div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
+    <div id="ing" class="step" data-x="3500" data-y="-850" data-z="0" data-rotate="270" data-scale="6">
         <p>by <b class="positioning">positioning</b>, <b class="rotating">rotating</b> and <b class="scaling">scaling</b> them on an infinite canvas</p>
     </div>
 
@@ -267,7 +278,7 @@ <h1>impress.js<sup>*</sup></h1>
 
     <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
         <p>want to know more?</p>
-        <q><a href="http://github.com/bartaz/impress.js">use the source</a>, Luke!</q>
+        <q><a href="http://github.com/henrikingo/impress.js">use the source</a>, Luke!</q>
     </div>
 
     <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
@@ -306,11 +317,18 @@ <h1>impress.js<sup>*</sup></h1>
         CSS transfrom docs: https://developer.mozilla.org/en/CSS/transform
         
     -->
-    <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
+    <div id="overview" class="step" data-x="3000" data-y="1500" data-z="0" data-scale="10">
     </div>
 
 </div>
 
+<!--
+    This is a UI plugin. You can read more about plugins in src/plugins/README.md.
+    For now, I'll just tell you that this adds some graphical controls to navigate the
+    presentation. In the CSS file you can style them as you want. We've put them bottom right.
+-->
+<div id="impress-toolbar"></div>
+
 <!--
     
     Hint is not related to impress.js in any way.
@@ -336,7 +354,8 @@ <h1>impress.js<sup>*</sup></h1>
     
 -->
 <div class="hint">
-    <p>Use a spacebar or arrow keys to navigate</p>
+    <p>Use a spacebar or arrow keys to navigate. <br/>
+       Press 'P' to launch speaker console.</p>
 </div>
 <script>
 if ("ontouchstart" in document.documentElement) { 
