Skip to content

Commit 80ffff0

Browse files
complanarhenrikingo
complanar
authored and
henrikingo
committed
rel: Add relative positioning relative to any previous step. (impress#686)
1 parent c09ce88 commit 80ffff0

File tree

3 files changed

+88
-14
lines changed

3 files changed

+88
-14
lines changed

‎js/impress.js

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3566,7 +3566,7 @@
35663566
}
35673567
};
35683568

3569-
var computeRelativePositions = function( el, prev ) {
3569+
var computeRelativePositions = function( el, prev, root ) {
35703570
var data = el.dataset;
35713571

35723572
if ( !prev ) {
@@ -3575,6 +3575,36 @@
35753575
prev = { x:0, y:0, z:0, relative: { x:0, y:0, z:0 } };
35763576
}
35773577

3578+
if ( data.relTo ) {
3579+
3580+
var ref = root.getElementById( data.relTo );
3581+
if ( ref ) {
3582+
3583+
// Test, if it is a previous step that already has some assigned position data
3584+
if ( el.compareDocumentPosition( ref ) & Node.DOCUMENT_POSITION_PRECEDING ) {
3585+
prev.x = ref.getAttribute( "data-x" );
3586+
prev.y = ref.getAttribute( "data-y" );
3587+
prev.z = ref.getAttribute( "data-z" );
3588+
} else {
3589+
window.console.error(
3590+
"impress.js rel plugin: Step \"" + data.relTo + "\" is not defined " +
3591+
"*before* the current step. Referencing is limited to previously defined " +
3592+
"steps. Please check your markup. Ignoring data-rel-to attribute of " +
3593+
"this step. Have a look at the documentation for how to create relative " +
3594+
"positioning to later shown steps with the help of the goto plugin."
3595+
);
3596+
}
3597+
} else {
3598+
3599+
// Step not found
3600+
window.console.warn(
3601+
"impress.js rel plugin: \"" + data.relTo + "\" is not a valid step in this " +
3602+
"impress.js presentation. Please check your markup. Ignoring data-rel-to " +
3603+
"attribute of this step."
3604+
);
3605+
}
3606+
}
3607+
35783608
var step = {
35793609
x: toNumber( data.x, prev.x ),
35803610
y: toNumber( data.y, prev.y ),
@@ -3619,7 +3649,7 @@
36193649
y: el.getAttribute( "data-y" ),
36203650
z: el.getAttribute( "data-z" )
36213651
} );
3622-
var step = computeRelativePositions( el, prev );
3652+
var step = computeRelativePositions( el, prev, root );
36233653

36243654
// Apply relative position (if non-zero)
36253655
el.setAttribute( "data-x", step.x );

‎src/plugins/rel/README.md

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,25 @@ Relative Positioning Plugin
22
===========================
33

44
This plugin provides support for defining the coordinates of a step relative
5-
to the previous step. This is often more convenient when creating presentations,
5+
to previous steps. This is often more convenient when creating presentations,
66
since as you add, remove or move steps, you may not need to edit the positions
77
as much as is the case with the absolute coordinates supported by impress.js
88
core.
99

1010
Example:
1111

12-
<!-- Position step 1000 px to the right and 500 px up from the previous step. -->
13-
<div class="step" data-rel-x="1000" data-rel-y="500">
12+
<!-- Position step 1000 px to the right and 500 px up from the previous step. -->
13+
<div class="step" data-rel-x="1000" data-rel-y="500">
14+
15+
<!-- Position step 1000 px to the left and 750 px up from the step with id "title". -->
16+
<div class="step" data-rel-x="-1000" data-rel-y="750" data-rel-to="title">
1417

1518
Following html attributes are supported for step elements:
1619

1720
data-rel-x
1821
data-rel-y
1922
data-rel-z
23+
data-rel-to
2024

2125
Non-zero values are also inherited from the previous step. This makes it easy to
2226
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.
3236

3337
Example:
3438

35-
<div class="step" data-rel-x="1.5w" data-rel-y="1.5h">
39+
<div class="step" data-rel-x="1.5w" data-rel-y="1.5h">
40+
41+
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.
42+
If you need a reference to a step that is shown later make use of the goto plugin:
43+
44+
45+
<div id="shown-first" class="step" data-goto-next="shown-earlier">
46+
<div id="shown-later" class="step" data-goto-prev="shown-earlier" data-goto-next="shown-last">
47+
<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">
48+
<div id="shown-last" class="step" data-goto-prev="shown-later">
3649

3750

3851
IMPORTANT: Incompatible change
@@ -47,15 +60,15 @@ will inherit the value from the previous step. (The first step will inherit the
4760
For example, if you have an old presentation with the following 3 steps, they would be positioned
4861
differently when using a version of impress.js that includes this plugin:
4962

50-
<div class="step" data-x="100" data-y="100" data-z="100"></div>
51-
<div class="step" data-x="100" data-y="100"></div>
52-
<div class="step" data-x="100" data-y="100"></div>
63+
<div class="step" data-x="100" data-y="100" data-z="100"></div>
64+
<div class="step" data-x="100" data-y="100"></div>
65+
<div class="step" data-x="100" data-y="100"></div>
5366

5467
To get the same rendering now, you need to add an explicit `data-z="0"` to the second step:
5568

56-
<div class="step" data-x="100" data-y="100" data-z="100"></div>
57-
<div class="step" data-x="100" data-y="100" data-z="0"></div>
58-
<div class="step" data-x="100" data-y="100"></div>
69+
<div class="step" data-x="100" data-y="100" data-z="100"></div>
70+
<div class="step" data-x="100" data-y="100" data-z="0"></div>
71+
<div class="step" data-x="100" data-y="100"></div>
5972

6073
Note that the latter code will render correctly also in old versions of impress.js.
6174

‎src/plugins/rel/rel.js

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
}
7878
};
7979

80-
var computeRelativePositions = function( el, prev ) {
80+
var computeRelativePositions = function( el, prev, root ) {
8181
var data = el.dataset;
8282

8383
if ( !prev ) {
@@ -86,6 +86,37 @@
8686
prev = { x:0, y:0, z:0, relative: { x:0, y:0, z:0 } };
8787
}
8888

89+
if ( data.relTo ) {
90+
91+
var ref = root.getElementById( data.relTo );
92+
if ( ref ) {
93+
94+
// Test, if it is a previous step that already has some assigned position data
95+
if ( el.compareDocumentPosition( ref ) & Node.DOCUMENT_POSITION_PRECEDING ) {
96+
prev.x = ref.getAttribute( "data-x" );
97+
prev.y = ref.getAttribute( "data-y" );
98+
prev.z = ref.getAttribute( "data-z" );
99+
prev.relative = {};
100+
} else {
101+
window.console.error(
102+
"impress.js rel plugin: Step \"" + data.relTo + "\" is not defined " +
103+
"*before* the current step. Referencing is limited to previously defined " +
104+
"steps. Please check your markup. Ignoring data-rel-to attribute of " +
105+
"this step. Have a look at the documentation for how to create relative " +
106+
"positioning to later shown steps with the help of the goto plugin."
107+
);
108+
}
109+
} else {
110+
111+
// Step not found
112+
window.console.warn(
113+
"impress.js rel plugin: \"" + data.relTo + "\" is not a valid step in this " +
114+
"impress.js presentation. Please check your markup. Ignoring data-rel-to " +
115+
"attribute of this step."
116+
);
117+
}
118+
}
119+
89120
var step = {
90121
x: toNumber( data.x, prev.x ),
91122
y: toNumber( data.y, prev.y ),
@@ -130,7 +161,7 @@
130161
y: el.getAttribute( "data-y" ),
131162
z: el.getAttribute( "data-z" )
132163
} );
133-
var step = computeRelativePositions( el, prev );
164+
var step = computeRelativePositions( el, prev, root );
134165

135166
// Apply relative position (if non-zero)
136167
el.setAttribute( "data-x", step.x );

0 commit comments

Comments
 (0)