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.