From 80ffff0e8f603a82d9abb6eb51647732c2c8563e Mon Sep 17 00:00:00 2001 From: Holger Teichert Date: Tue, 1 May 2018 20:57:40 +0200 Subject: [PATCH] rel: Add relative positioning relative to any previous step. (#686) --- js/impress.js | 34 ++++++++++++++++++++++++++++++++-- src/plugins/rel/README.md | 33 +++++++++++++++++++++++---------- src/plugins/rel/rel.js | 35 +++++++++++++++++++++++++++++++++-- 3 files changed, 88 insertions(+), 14 deletions(-) diff --git a/js/impress.js b/js/impress.js index db10001..7ccf620 100644 --- a/js/impress.js +++ b/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 ); diff --git a/src/plugins/rel/README.md b/src/plugins/rel/README.md index d457185..800fda7 100644 --- a/src/plugins/rel/README.md +++ b/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: - -
+ +
+ + +
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: -
+
+ +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: + + +
+
+
+
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: -
-
-
+
+
+
To get the same rendering now, you need to add an explicit `data-z="0"` to the second step: -
-
-
+
+
+
Note that the latter code will render correctly also in old versions of impress.js. diff --git a/src/plugins/rel/rel.js b/src/plugins/rel/rel.js index 105d232..cd9b3e8 100644 --- a/src/plugins/rel/rel.js +++ b/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 );