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

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

Browse Source
This commit is contained in:
Holger Teichert
2018-05-01 20:57:40 +02:00
committed by Henrik Ingo
parent c09ce88749
commit 80ffff0e8f
3 changed files with 88 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/plugins/rel/README.md
View File

@@ -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. -->
<div class="step" data-rel-x="1000" data-rel-y="500">
<!-- 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">
<!-- 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"></div>
<div class="step" data-x="100" data-y="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>
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="0"></div>
<div class="step" data-x="100" data-y="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"></div>
Note that the latter code will render correctly also in old versions of impress.js.

35
src/plugins/rel/rel.js
View File

@@ -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 );