rel: Add relative positioning relative to any previous step. (#686)

js/impress.js

@@ -3566,7 +3566,7 @@
         }
     };
 
-    var computeRelativePositions = function( el, prev ) {
+    var computeRelativePositions = function( el, prev, root ) {
         var data = el.dataset;
 
         if ( !prev ) {
@@ -3575,6 +3575,36 @@
             prev = { x:0, y:0, z:0, relative: { x:0, y:0, z:0 } };
         }
 
+        if ( data.relTo ) {
+
+            var ref = root.getElementById( data.relTo );
+            if ( ref ) {
+
+                // Test, if it is a previous step that already has some assigned position data
+                if ( el.compareDocumentPosition( ref ) & Node.DOCUMENT_POSITION_PRECEDING ) {
+                    prev.x = ref.getAttribute( "data-x" );
+                    prev.y = ref.getAttribute( "data-y" );
+                    prev.z = ref.getAttribute( "data-z" );
+                } else {
+                    window.console.error(
+                        "impress.js rel plugin: Step \"" + data.relTo + "\" is not defined " +
+                        "*before* the current step. Referencing is limited to previously defined " +
+                        "steps. Please check your markup. Ignoring data-rel-to attribute of " +
+                        "this step. Have a look at the documentation for how to create relative " +
+                        "positioning to later shown steps with the help of the goto plugin."
+                    );
+                }
+            } else {
+
+                // Step not found
+                window.console.warn(
+                    "impress.js rel plugin: \"" + data.relTo + "\" is not a valid step in this " +
+                    "impress.js presentation. Please check your markup. Ignoring data-rel-to " +
+                    "attribute of this step."
+                );
+            }
+        }
+
         var step = {
                 x: toNumber( data.x, prev.x ),
                 y: toNumber( data.y, prev.y ),
@@ -3619,7 +3649,7 @@
                 y: el.getAttribute( "data-y" ),
                 z: el.getAttribute( "data-z" )
             } );
-            var step = computeRelativePositions( el, prev );
+            var step = computeRelativePositions( el, prev, root );
 
             // Apply relative position (if non-zero)
             el.setAttribute( "data-x", step.x );

src/plugins/rel/README.md

@@ -2,21 +2,25 @@ Relative Positioning Plugin
 ===========================
 
 This plugin provides support for defining the coordinates of a step relative
-to the previous step. This is often more convenient when creating presentations,
+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.
 
 Example:
 
-        <!-- Position step 1000 px to the right and 500 px up from the previous step. -->
+    <!-- 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">
+    <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">
 
 Following html attributes are supported for step elements:
 
     data-rel-x
     data-rel-y
     data-rel-z
+    data-rel-to
 
 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 
@@ -32,7 +36,16 @@ a unit of "h" and "w", respectively, appended to the number.
 
 Example:
 
-        <div class="step" data-rel-x="1.5w" data-rel-y="1.5h">
+    <div class="step" data-rel-x="1.5w" data-rel-y="1.5h">
+
+Note that referencing a special step with the `data-rel-to` attribute is *limited to previous steps* 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:
+
+
+    <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">
 
 
 IMPORTANT: Incompatible change
@@ -47,15 +60,15 @@ will inherit the value from the previous step. (The first step will inherit the
 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:
 
-        <div class="step" data-x="100" data-y="100" data-z="100"></div>
+    <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>
-        <div class="step" data-x="100" data-y="100"></div>
+    <div class="step" data-x="100" data-y="100"></div>
 
 To get the same rendering now, you need to add an explicit `data-z="0"` to the second step:
 
-        <div class="step" data-x="100" data-y="100" data-z="100"></div>
+    <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" data-z="0"></div>
-        <div class="step" data-x="100" data-y="100"></div>
+    <div class="step" data-x="100" data-y="100"></div>
 
 Note that the latter code will render correctly also in old versions of impress.js.
 

src/plugins/rel/rel.js

@@ -77,7 +77,7 @@
         }
     };
 
-    var computeRelativePositions = function( el, prev ) {
+    var computeRelativePositions = function( el, prev, root ) {
         var data = el.dataset;
 
         if ( !prev ) {
@@ -86,6 +86,37 @@
             prev = { x:0, y:0, z:0, relative: { x:0, y:0, z:0 } };
         }
 
+        if ( data.relTo ) {
+
+            var ref = root.getElementById( data.relTo );
+            if ( ref ) {
+
+                // Test, if it is a previous step that already has some assigned position data
+                if ( el.compareDocumentPosition( ref ) & Node.DOCUMENT_POSITION_PRECEDING ) {
+                    prev.x = ref.getAttribute( "data-x" );
+                    prev.y = ref.getAttribute( "data-y" );
+                    prev.z = ref.getAttribute( "data-z" );
+                    prev.relative = {};
+                } else {
+                    window.console.error(
+                        "impress.js rel plugin: Step \"" + data.relTo + "\" is not defined " +
+                        "*before* the current step. Referencing is limited to previously defined " +
+                        "steps. Please check your markup. Ignoring data-rel-to attribute of " +
+                        "this step. Have a look at the documentation for how to create relative " +
+                        "positioning to later shown steps with the help of the goto plugin."
+                    );
+                }
+            } else {
+
+                // Step not found
+                window.console.warn(
+                    "impress.js rel plugin: \"" + data.relTo + "\" is not a valid step in this " +
+                    "impress.js presentation. Please check your markup. Ignoring data-rel-to " +
+                    "attribute of this step."
+                );
+            }
+        }
+
         var step = {
                 x: toNumber( data.x, prev.x ),
                 y: toNumber( data.y, prev.y ),
@@ -130,7 +161,7 @@
                 y: el.getAttribute( "data-y" ),
                 z: el.getAttribute( "data-z" )
             } );
-            var step = computeRelativePositions( el, prev );
+            var step = computeRelativePositions( el, prev, root );
 
             // Apply relative position (if non-zero)
             el.setAttribute( "data-x", step.x );