reveal.js-appearance 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +55 -0
- package/README.md +41 -5
- package/demo.html +27 -13
- package/package.json +2 -2
- package/plugin/appearance/appearance.css +10 -0
- package/plugin/appearance/appearance.esm.js +93 -2
- package/plugin/appearance/appearance.js +322 -231
- package/plugin/appearance/plugin-src.js +31 -2
- package/screenshot.png +0 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
## [1.1.1] - 2021-11-27
|
|
5
|
+
### Added
|
|
6
|
+
- Added a new `autoappear` mode, for use in cases where adding animation classes is too much of a hassle, like inside Markdown.
|
|
7
|
+
- Started keeping the changelog.
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
## [1.1.0] - 2021-09-03
|
|
12
|
+
### Added
|
|
13
|
+
- Added Github corner badge
|
|
14
|
+
|
|
15
|
+
### Changed
|
|
16
|
+
- Changed readme
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
## [1.0.9] - 2021-06-30
|
|
21
|
+
### Changed
|
|
22
|
+
- Fixed a bug where '=' was '=='.
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
## [1.0.8] - 2021-06-27
|
|
27
|
+
### Added
|
|
28
|
+
- Choose an event at which Appearance launches its animations
|
|
29
|
+
|
|
30
|
+
### Changed
|
|
31
|
+
- Appearance now shows the complete slides from the overview
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
## [1.0.7] - 2020-06-28
|
|
36
|
+
### Changed
|
|
37
|
+
- Clearing timeouts that are in past slides. This solves 'hanging' Appearance items if you slide back and forth.
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
## [1.0.6] - 2020-06-28
|
|
42
|
+
### Changed
|
|
43
|
+
- Fix bug that hid Appearance items in PDF exports.
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
## [1.0.5] - 2020-05-20
|
|
48
|
+
### Added
|
|
49
|
+
- Added compatibility with the new Reveal.js 4 that changes the way plugins work.
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
## [1.0.4] - 2020-05-20
|
|
54
|
+
### Added
|
|
55
|
+
- The 1.0.4 release is compatible with Reveal.js 3. Reveal versions lower than 4 have no "slidetransitionend" event, so this release also has the Transit.js plugin included (see https://github.com/Martinomagnifico/reveal.js-transit for more information).
|
package/README.md
CHANGED
|
@@ -12,13 +12,11 @@ In Powerpoint you can make slides with items that appear automatically with effe
|
|
|
12
12
|
|
|
13
13
|
We do not want the animations to start during the slide transition, so we wait for the slide transition to end. Then the animations will start automatically if the HTML is set up to use Appearance.
|
|
14
14
|
|
|
15
|
+
Version 1.1.1 adds an `autoappear` mode for use in cases where adding animation classes is too much of a hassle, like inside Markdown.
|
|
15
16
|
|
|
16
17
|
|
|
17
|
-
## Installation
|
|
18
|
-
|
|
19
|
-
The Appearance plugin has been rewritten for Reveal.js version 4.
|
|
20
18
|
|
|
21
|
-
|
|
19
|
+
## Installation
|
|
22
20
|
|
|
23
21
|
### Regular installation
|
|
24
22
|
|
|
@@ -94,6 +92,23 @@ It is easy to set up your HTML structure for Appearance:
|
|
|
94
92
|
<li class="animated bounceInLeft">It adds some attention.</li>
|
|
95
93
|
</ul>
|
|
96
94
|
```
|
|
95
|
+
When you are working with Markdown, this can be a chore so if you do not want to add all these classes, you can set the option `autoappear` to `true` (see Configuration below) and let Appearance do the heavy work. You do not need to add any markup and it will stay like this:
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<ul>
|
|
99
|
+
<li>Add it to any text element</li>
|
|
100
|
+
<li>Like list items, or headers.</li>
|
|
101
|
+
<li>It adds some attention.</li>
|
|
102
|
+
</ul>
|
|
103
|
+
```
|
|
104
|
+
or this:
|
|
105
|
+
|
|
106
|
+
```markdown
|
|
107
|
+
* Add it to any text element
|
|
108
|
+
* Like list items, or headers.
|
|
109
|
+
* It adds some attention.
|
|
110
|
+
|
|
111
|
+
```
|
|
97
112
|
|
|
98
113
|
|
|
99
114
|
## Configuration
|
|
@@ -108,7 +123,9 @@ Reveal.initialize({
|
|
|
108
123
|
visibleclass: 'in',
|
|
109
124
|
hideagain: true,
|
|
110
125
|
delay: 300,
|
|
111
|
-
appearevent: 'slidetransitionend'
|
|
126
|
+
appearevent: 'slidetransitionend',
|
|
127
|
+
autoappear: false,
|
|
128
|
+
autoelements: false
|
|
112
129
|
},
|
|
113
130
|
plugins: [ Appearance ]
|
|
114
131
|
});
|
|
@@ -119,6 +136,9 @@ Reveal.initialize({
|
|
|
119
136
|
* **`hideagain`**: Change this (true/false) if you want to see the shown elements if you go back.
|
|
120
137
|
* **`delay`**: Base time in ms between appearances.
|
|
121
138
|
* **`appearevent`**: Use a specific event at which Appearance starts.
|
|
139
|
+
* **`autoappear`**: Use this when you do not want to add classes to each item that you want to appear, and just let Appearance add animation classes to (all of) the provided elements in the presentation. See "Using 'autoappear'" mode below.
|
|
140
|
+
* **`autoelements`**: These are the elements that `autoappear` will target. Each element has a selector and an animation class. If `autoappear` is off, the elements will still get animation if the section contains a `data-autoappear` attribute.
|
|
141
|
+
|
|
122
142
|
|
|
123
143
|
### Changing the 'appearevent'
|
|
124
144
|
When you navigate from slide to slide, you can set transition effects in Reveal. These effects take some time. That's why, by default, Appearance only starts when the slide transition has ended.
|
|
@@ -134,6 +154,22 @@ These same event triggers can be set through the data-attribute `data-appeareven
|
|
|
134
154
|
When using Appearance inside an autoanimate slide, and changing the appearevent to `slidechanged` or `auto`, keep in mind that Reveal transforms opacity for all non-autoanimate items, while Appearance does the same on most of the effects. To avoid strange behaviour, wrap these Appearance items in a parent. For example, a list of animated bullet points works well, because the animated class is on the children, not the parent. Separate headings or other elements do not have that, so should be wrapped.
|
|
135
155
|
|
|
136
156
|
|
|
157
|
+
### Using 'autoappear' mode
|
|
158
|
+
Sometimes (for example with Markdown), adding classes to elements is a chore. Appearance can automatically add animation classes to specific elements in the presentation.
|
|
159
|
+
|
|
160
|
+
With the option `autoappear` set to `true`, ALL elements in the presentation that have a certain selector will get an animation. These selectors and the animations can be set in the configuration options like this:
|
|
161
|
+
|
|
162
|
+
```javascript
|
|
163
|
+
autoelements: {
|
|
164
|
+
'ul li': 'fadeInLeft',
|
|
165
|
+
'ol li': 'fadeInRight'
|
|
166
|
+
}
|
|
167
|
+
```
|
|
168
|
+
You can add any selector and animation class to this object.
|
|
169
|
+
|
|
170
|
+
With the option `autoappear` set to `false`, the above still works, but only on a data-attribute basis. ONLY elements in the presentation that are inside sections or fragments with a data-attribute of `data-autoappear` will be animated automatically.
|
|
171
|
+
|
|
172
|
+
|
|
137
173
|
|
|
138
174
|
## Now change it
|
|
139
175
|
|
package/demo.html
CHANGED
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
<meta name="author" content="Martinomagnifico">
|
|
9
9
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
10
10
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
11
|
-
<link rel="stylesheet" href="
|
|
12
|
-
<link rel="stylesheet" href="
|
|
13
|
-
<link rel="stylesheet" href="
|
|
11
|
+
<link rel="stylesheet" href="../dist/reset.css">
|
|
12
|
+
<link rel="stylesheet" href="../dist/reveal.css">
|
|
13
|
+
<link rel="stylesheet" href="../dist/theme/black.css">
|
|
14
14
|
<link rel="stylesheet" href="css/demo.css">
|
|
15
15
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
|
|
16
16
|
<link rel="stylesheet" href="plugin/appearance/appearance.css">
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
<h1 class="animated flipInX slow">Appearance</h1>
|
|
27
27
|
<h3 class="animated flipInX slow" data-delay="700">for Reveal.js</h3>
|
|
28
28
|
</section>
|
|
29
|
-
<section class="center"><small>In Powerpoint you can make slides with items that appear automatically with effects. Appearance is a plugin for Reveal.js that does the same. </small><
|
|
29
|
+
<section class="center"><small>In Powerpoint you can make slides with items that appear automatically with effects. Appearance is a plugin for Reveal.js that does the same. </small><small>Appearance is easy to set up. It uses Animate.css by Daniel Eden for the animations, with some changes in a separate CSS file to allow for a non-animated state. </small>
|
|
30
30
|
<p>Let's check out what Appearance does:</p>
|
|
31
31
|
</section>
|
|
32
32
|
<section class="center">
|
|
@@ -82,15 +82,23 @@
|
|
|
82
82
|
<p class="animated fadeInUp">You can use any of the following events:</p>
|
|
83
83
|
</div>
|
|
84
84
|
<ul>
|
|
85
|
-
<li class="animated
|
|
86
|
-
<li class="animated
|
|
87
|
-
<li class="animated
|
|
85
|
+
<li class="animated fadeInLeft"><em>slidetransitionend</em> (default, after the transition)</li>
|
|
86
|
+
<li class="animated fadeInLeft"><em>slidechanged</em> (with the transition)</li>
|
|
87
|
+
<li class="animated fadeInLeft"><em>auto</em> (with transition, on autoanimate slides)</li>
|
|
88
88
|
</ul>
|
|
89
89
|
<div><br><small class="animated fadeInUp">This can also be set per-slide with data-attributes.</small></div>
|
|
90
90
|
</section>
|
|
91
91
|
</section>
|
|
92
|
+
<section class="center" data-transition="convex-in fade-out" data-autoappear>
|
|
93
|
+
<h3>Autoappear mode</h3><small>Sometimes (for example with Markdown), adding classes to elements is a chore. Appearance can automatically add animation classes to specific elements in the presentation (with the option <code>autoappear</code>) or per slide (with <code>data-autoappear</code>).</small>
|
|
94
|
+
<ul>
|
|
95
|
+
<li>This is list item 1</li>
|
|
96
|
+
<li>This is list item 2</li>
|
|
97
|
+
<li>This is list item 3</li>
|
|
98
|
+
</ul>
|
|
99
|
+
</section>
|
|
92
100
|
<section class="center" data-transition="convex-in fade-out">
|
|
93
|
-
<h3>Additional animations
|
|
101
|
+
<h3>Additional animations</h3>
|
|
94
102
|
<ul>
|
|
95
103
|
<li class="animated skidLeft" data-delay="300">Appear with .skidLeft</li>
|
|
96
104
|
<li class="animated skidLeftBig" data-delay="1000">Appear with .skidLeftBig</li>
|
|
@@ -103,14 +111,14 @@
|
|
|
103
111
|
<section class="center" data-transition="fade-in">
|
|
104
112
|
<h3>Thanks</h3>
|
|
105
113
|
<ul>
|
|
106
|
-
<li class="animated
|
|
107
|
-
<li class="animated
|
|
108
|
-
<li class="animated
|
|
114
|
+
<li class="animated fadeInLeft">Hakim El Hattab for <a href="https://revealjs.com" target="_blank">Reveal.js</a></li>
|
|
115
|
+
<li class="animated fadeInLeft">Daniel Eden for <a href="https://daneden.github.io/animate.css/" target="_blank">Animate.css</a></li>
|
|
116
|
+
<li class="animated fadeInLeft">David Marby & Nijiko Yonskai for <a href="https://picsum.photos" target="_blank">picsum.photos</a></li>
|
|
109
117
|
</ul>
|
|
110
118
|
</section>
|
|
111
119
|
</div>
|
|
112
120
|
</div>
|
|
113
|
-
<script src="
|
|
121
|
+
<script src="../dist/reveal.js"></script>
|
|
114
122
|
<script src="plugin/appearance/appearance.js"></script>
|
|
115
123
|
<script>
|
|
116
124
|
Reveal.initialize({
|
|
@@ -121,7 +129,13 @@
|
|
|
121
129
|
visibleclass: "in",
|
|
122
130
|
hideagain: true,
|
|
123
131
|
delay: 300,
|
|
124
|
-
appearevent: "slidetransitionend"
|
|
132
|
+
appearevent: "slidetransitionend",
|
|
133
|
+
debug: true,
|
|
134
|
+
autoappear: false,
|
|
135
|
+
autoelements: {
|
|
136
|
+
"ul li": "fadeInLeft",
|
|
137
|
+
"ol li": "fadeInLeftRight"
|
|
138
|
+
}
|
|
125
139
|
},
|
|
126
140
|
plugins: [
|
|
127
141
|
Appearance
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reveal.js-appearance",
|
|
3
|
-
"version": "1.1.
|
|
4
|
-
"description": "A plugin for Reveal.js
|
|
3
|
+
"version": "1.1.1",
|
|
4
|
+
"description": "A plugin for Reveal.js that adds appearance effects to elements",
|
|
5
5
|
"keywords": "reveal, reveal.js, reveal-plugin, plugin, text effects",
|
|
6
6
|
"homepage": "https://github.com/Martinomagnifico/reveal.js-appearance",
|
|
7
7
|
"repository": {
|
|
@@ -20,6 +20,16 @@
|
|
|
20
20
|
-webkit-perspective: 1000px;
|
|
21
21
|
perspective: 1000px; }
|
|
22
22
|
|
|
23
|
+
small {
|
|
24
|
+
margin: 1.5rem 0 2rem 0; }
|
|
25
|
+
|
|
26
|
+
small code {
|
|
27
|
+
font-size: 75%;
|
|
28
|
+
background: #222D2F;
|
|
29
|
+
color: #ddd;
|
|
30
|
+
padding: 0.25rem 0.5rem;
|
|
31
|
+
border-radius: 0.5rem; }
|
|
32
|
+
|
|
23
33
|
/* Custom animation */
|
|
24
34
|
@-webkit-keyframes skidLeft {
|
|
25
35
|
from {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* https://github.com/Martinomagnifico
|
|
5
5
|
*
|
|
6
6
|
* Appearance.js for Reveal.js
|
|
7
|
-
* Version 1.1.
|
|
7
|
+
* Version 1.1.1
|
|
8
8
|
*
|
|
9
9
|
* @license
|
|
10
10
|
* MIT licensed
|
|
@@ -15,6 +15,62 @@
|
|
|
15
15
|
******************************************************************/
|
|
16
16
|
|
|
17
17
|
|
|
18
|
+
function _slicedToArray(arr, i) {
|
|
19
|
+
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
function _arrayWithHoles(arr) {
|
|
23
|
+
if (Array.isArray(arr)) return arr;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function _iterableToArrayLimit(arr, i) {
|
|
27
|
+
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
|
|
28
|
+
var _arr = [];
|
|
29
|
+
var _n = true;
|
|
30
|
+
var _d = false;
|
|
31
|
+
var _e = undefined;
|
|
32
|
+
|
|
33
|
+
try {
|
|
34
|
+
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
|
35
|
+
_arr.push(_s.value);
|
|
36
|
+
|
|
37
|
+
if (i && _arr.length === i) break;
|
|
38
|
+
}
|
|
39
|
+
} catch (err) {
|
|
40
|
+
_d = true;
|
|
41
|
+
_e = err;
|
|
42
|
+
} finally {
|
|
43
|
+
try {
|
|
44
|
+
if (!_n && _i["return"] != null) _i["return"]();
|
|
45
|
+
} finally {
|
|
46
|
+
if (_d) throw _e;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
return _arr;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
function _unsupportedIterableToArray(o, minLen) {
|
|
54
|
+
if (!o) return;
|
|
55
|
+
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
56
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
57
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
58
|
+
if (n === "Map" || n === "Set") return Array.from(o);
|
|
59
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
function _arrayLikeToArray(arr, len) {
|
|
63
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
64
|
+
|
|
65
|
+
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
66
|
+
|
|
67
|
+
return arr2;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
function _nonIterableRest() {
|
|
71
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
72
|
+
}
|
|
73
|
+
|
|
18
74
|
var Plugin = function Plugin() {
|
|
19
75
|
// Scope support polyfill
|
|
20
76
|
try {
|
|
@@ -100,6 +156,38 @@ var Plugin = function Plugin() {
|
|
|
100
156
|
return selectionarray;
|
|
101
157
|
};
|
|
102
158
|
|
|
159
|
+
var autoAdd = function autoAdd() {
|
|
160
|
+
if (options.autoelements) {
|
|
161
|
+
var _loop = function _loop() {
|
|
162
|
+
var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
|
|
163
|
+
autoelement = _Object$entries$_i[0],
|
|
164
|
+
autoanimation = _Object$entries$_i[1];
|
|
165
|
+
|
|
166
|
+
if (options.autoappear) {
|
|
167
|
+
debugLog("All \"".concat(autoelement, "\"\" elements will animate with ").concat(autoanimation));
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
var autosection = options.autoappear ? "" : "[data-autoappear] ";
|
|
171
|
+
var autoAppearances = deck.getRevealElement().querySelectorAll(".slides ".concat(autosection).concat(autoelement));
|
|
172
|
+
|
|
173
|
+
if (autoAppearances.length > 0) {
|
|
174
|
+
autoAppearances.forEach(function (autoAppearance) {
|
|
175
|
+
if (!autoAppearance.classList.contains(options.baseclass)) {
|
|
176
|
+
autoAppearance.classList.add(options.baseclass);
|
|
177
|
+
autoAppearance.classList.add(autoanimation);
|
|
178
|
+
}
|
|
179
|
+
});
|
|
180
|
+
}
|
|
181
|
+
};
|
|
182
|
+
|
|
183
|
+
for (var _i = 0, _Object$entries = Object.entries(options.autoelements); _i < _Object$entries.length; _i++) {
|
|
184
|
+
_loop();
|
|
185
|
+
}
|
|
186
|
+
} else if (options.autoappear) {
|
|
187
|
+
console.log("Please set an \"autoelements\" object.");
|
|
188
|
+
}
|
|
189
|
+
};
|
|
190
|
+
|
|
103
191
|
var showAppearances = function showAppearances(container) {
|
|
104
192
|
clearTimeOuts(timeouts);
|
|
105
193
|
var appearances = selectionArray(container, ":scope ." + options.baseclass);
|
|
@@ -190,6 +278,7 @@ var Plugin = function Plugin() {
|
|
|
190
278
|
};
|
|
191
279
|
|
|
192
280
|
deck.on('ready', function (event) {
|
|
281
|
+
autoAdd();
|
|
193
282
|
showHideSlide(event);
|
|
194
283
|
});
|
|
195
284
|
deck.on('slidechanged', function (event) {
|
|
@@ -219,7 +308,9 @@ var Plugin = function Plugin() {
|
|
|
219
308
|
hideagain: true,
|
|
220
309
|
delay: 300,
|
|
221
310
|
debug: false,
|
|
222
|
-
appearevent: 'slidetransitionend'
|
|
311
|
+
appearevent: 'slidetransitionend',
|
|
312
|
+
autoappear: false,
|
|
313
|
+
autoelements: null
|
|
223
314
|
};
|
|
224
315
|
|
|
225
316
|
var defaults = function defaults(options, defaultOptions) {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* https://github.com/Martinomagnifico
|
|
5
5
|
*
|
|
6
6
|
* Appearance.js for Reveal.js
|
|
7
|
-
* Version 1.1.
|
|
7
|
+
* Version 1.1.1
|
|
8
8
|
*
|
|
9
9
|
* @license
|
|
10
10
|
* MIT licensed
|
|
@@ -16,237 +16,328 @@
|
|
|
16
16
|
|
|
17
17
|
|
|
18
18
|
(function (global, factory) {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
|
20
|
+
typeof define === 'function' && define.amd ? define(factory) :
|
|
21
|
+
(global = global || self, global.Appearance = factory());
|
|
22
22
|
}(this, (function () { 'use strict';
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
24
|
+
function _slicedToArray(arr, i) {
|
|
25
|
+
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
function _arrayWithHoles(arr) {
|
|
29
|
+
if (Array.isArray(arr)) return arr;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
function _iterableToArrayLimit(arr, i) {
|
|
33
|
+
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
|
|
34
|
+
var _arr = [];
|
|
35
|
+
var _n = true;
|
|
36
|
+
var _d = false;
|
|
37
|
+
var _e = undefined;
|
|
38
|
+
|
|
39
|
+
try {
|
|
40
|
+
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
|
41
|
+
_arr.push(_s.value);
|
|
42
|
+
|
|
43
|
+
if (i && _arr.length === i) break;
|
|
44
|
+
}
|
|
45
|
+
} catch (err) {
|
|
46
|
+
_d = true;
|
|
47
|
+
_e = err;
|
|
48
|
+
} finally {
|
|
49
|
+
try {
|
|
50
|
+
if (!_n && _i["return"] != null) _i["return"]();
|
|
51
|
+
} finally {
|
|
52
|
+
if (_d) throw _e;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
return _arr;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
function _unsupportedIterableToArray(o, minLen) {
|
|
60
|
+
if (!o) return;
|
|
61
|
+
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
62
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
63
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
64
|
+
if (n === "Map" || n === "Set") return Array.from(o);
|
|
65
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
function _arrayLikeToArray(arr, len) {
|
|
69
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
70
|
+
|
|
71
|
+
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
72
|
+
|
|
73
|
+
return arr2;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
function _nonIterableRest() {
|
|
77
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
var Plugin = function Plugin() {
|
|
81
|
+
// Scope support polyfill
|
|
82
|
+
try {
|
|
83
|
+
document.querySelector(":scope *");
|
|
84
|
+
} catch (t) {
|
|
85
|
+
!function (t) {
|
|
86
|
+
var e = /:scope(?![\w-])/gi,
|
|
87
|
+
r = u(t.querySelector);
|
|
88
|
+
|
|
89
|
+
t.querySelector = function (t) {
|
|
90
|
+
return r.apply(this, arguments);
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
var c = u(t.querySelectorAll);
|
|
94
|
+
|
|
95
|
+
if (t.querySelectorAll = function (t) {
|
|
96
|
+
return c.apply(this, arguments);
|
|
97
|
+
}, t.matches) {
|
|
98
|
+
var n = u(t.matches);
|
|
99
|
+
|
|
100
|
+
t.matches = function (t) {
|
|
101
|
+
return n.apply(this, arguments);
|
|
102
|
+
};
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
if (t.closest) {
|
|
106
|
+
var o = u(t.closest);
|
|
107
|
+
|
|
108
|
+
t.closest = function (t) {
|
|
109
|
+
return o.apply(this, arguments);
|
|
110
|
+
};
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
function u(t) {
|
|
114
|
+
return function (r) {
|
|
115
|
+
if (r && e.test(r)) {
|
|
116
|
+
var _c = "q" + Math.floor(9e6 * Math.random()) + 1e6;
|
|
117
|
+
|
|
118
|
+
arguments[0] = r.replace(e, "[" + _c + "]"), this.setAttribute(_c, "");
|
|
119
|
+
|
|
120
|
+
var _n = t.apply(this, arguments);
|
|
121
|
+
|
|
122
|
+
return this.removeAttribute(_c), _n;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
return t.apply(this, arguments);
|
|
126
|
+
};
|
|
127
|
+
}
|
|
128
|
+
}(Element.prototype);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
var appear = function appear(deck, options) {
|
|
132
|
+
var debugLog = function debugLog(text) {
|
|
133
|
+
if (options.debug) console.log(text);
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
var timeouts = [];
|
|
137
|
+
|
|
138
|
+
var clearTimeOuts = function clearTimeOuts(timeouts) {
|
|
139
|
+
for (var i = 0; i < timeouts.length; i++) {
|
|
140
|
+
clearTimeout(timeouts[i]);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
timeouts = [];
|
|
144
|
+
};
|
|
145
|
+
|
|
146
|
+
var loopAppearances = function loopAppearances(appearances, appearancesInFragment) {
|
|
147
|
+
var delay = 0;
|
|
148
|
+
appearances.filter(function (element, i) {
|
|
149
|
+
if (!(appearancesInFragment.indexOf(element) > -1)) {
|
|
150
|
+
var delayincrement = parseInt(element.dataset.delay ? element.dataset.delay : i > 0 ? options.delay : 0);
|
|
151
|
+
delay += delayincrement;
|
|
152
|
+
timeouts.push(setTimeout(function () {
|
|
153
|
+
element.classList.add(options.visibleclass);
|
|
154
|
+
}, delay));
|
|
155
|
+
}
|
|
156
|
+
});
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
var selectionArray = function selectionArray(container, selectors) {
|
|
160
|
+
var selections = container.querySelectorAll(selectors);
|
|
161
|
+
var selectionarray = Array.prototype.slice.call(selections);
|
|
162
|
+
return selectionarray;
|
|
163
|
+
};
|
|
164
|
+
|
|
165
|
+
var autoAdd = function autoAdd() {
|
|
166
|
+
if (options.autoelements) {
|
|
167
|
+
var _loop = function _loop() {
|
|
168
|
+
var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
|
|
169
|
+
autoelement = _Object$entries$_i[0],
|
|
170
|
+
autoanimation = _Object$entries$_i[1];
|
|
171
|
+
|
|
172
|
+
if (options.autoappear) {
|
|
173
|
+
debugLog("All \"".concat(autoelement, "\"\" elements will animate with ").concat(autoanimation));
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
var autosection = options.autoappear ? "" : "[data-autoappear] ";
|
|
177
|
+
var autoAppearances = deck.getRevealElement().querySelectorAll(".slides ".concat(autosection).concat(autoelement));
|
|
178
|
+
|
|
179
|
+
if (autoAppearances.length > 0) {
|
|
180
|
+
autoAppearances.forEach(function (autoAppearance) {
|
|
181
|
+
if (!autoAppearance.classList.contains(options.baseclass)) {
|
|
182
|
+
autoAppearance.classList.add(options.baseclass);
|
|
183
|
+
autoAppearance.classList.add(autoanimation);
|
|
184
|
+
}
|
|
185
|
+
});
|
|
186
|
+
}
|
|
187
|
+
};
|
|
188
|
+
|
|
189
|
+
for (var _i = 0, _Object$entries = Object.entries(options.autoelements); _i < _Object$entries.length; _i++) {
|
|
190
|
+
_loop();
|
|
191
|
+
}
|
|
192
|
+
} else if (options.autoappear) {
|
|
193
|
+
console.log("Please set an \"autoelements\" object.");
|
|
194
|
+
}
|
|
195
|
+
};
|
|
196
|
+
|
|
197
|
+
var showAppearances = function showAppearances(container) {
|
|
198
|
+
clearTimeOuts(timeouts);
|
|
199
|
+
var appearances = selectionArray(container, ":scope ." + options.baseclass);
|
|
200
|
+
var appearancesInFragment = selectionArray(container, ":scope .fragment .".concat(options.baseclass));
|
|
201
|
+
loopAppearances(appearances, appearancesInFragment);
|
|
202
|
+
};
|
|
203
|
+
|
|
204
|
+
var hideAppearances = function hideAppearances(container) {
|
|
205
|
+
var disappearances = selectionArray(container, ":scope .".concat(options.baseclass, ", :scope .fragment.visible"));
|
|
206
|
+
disappearances.filter(function (element) {
|
|
207
|
+
element.classList.remove(element.classList.contains("fragment") ? "visible" : options.visibleclass);
|
|
208
|
+
});
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
var fromTo = function fromTo(event) {
|
|
212
|
+
var slides = {};
|
|
213
|
+
slides.from = event.fromSlide ? event.fromSlide : event.previousSlide ? event.previousSlide : null;
|
|
214
|
+
slides.to = event.toSlide ? event.toSlide : event.currentSlide ? event.currentSlide : null;
|
|
215
|
+
return slides;
|
|
216
|
+
};
|
|
217
|
+
|
|
218
|
+
var showHideSlide = function showHideSlide(event) {
|
|
219
|
+
var slides = fromTo(event);
|
|
220
|
+
|
|
221
|
+
if (slides.to.dataset.appearevent == "auto") {
|
|
222
|
+
slides.to.dataset.appearevent = "autoanimate";
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
if (options.appearevent == "auto") {
|
|
226
|
+
options.appearevent = "autoanimate";
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
if (!slides.to.dataset.eventdone) {
|
|
230
|
+
debugLog("Event: '".concat(event.type, "'"));
|
|
231
|
+
|
|
232
|
+
if (event.type == "ready") {
|
|
233
|
+
showAppearances(slides.to);
|
|
234
|
+
} else if (event.type == slides.to.dataset.appearevent) {
|
|
235
|
+
slides.to.dataset.eventdone = true;
|
|
236
|
+
showAppearances(slides.to);
|
|
237
|
+
} else if (event.type == options.appearevent) {
|
|
238
|
+
slides.to.dataset.eventdone = true;
|
|
239
|
+
showAppearances(slides.to);
|
|
240
|
+
} else if (event.type == "slidetransitionend" && options.appearevent == "autoanimate") {
|
|
241
|
+
slides.to.dataset.eventdone = true;
|
|
242
|
+
showAppearances(slides.to);
|
|
243
|
+
} else if (event.type == 'slidechanged' && document.body.dataset.exitoverview) {
|
|
244
|
+
if (slides.from && options.hideagain) {
|
|
245
|
+
hideAppearances(slides.to);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
showAppearances(slides.to);
|
|
249
|
+
slides.to.dataset.eventdone = true;
|
|
250
|
+
} else if (event.type == 'overviewhidden') {
|
|
251
|
+
document.body.dataset.exitoverview = true;
|
|
252
|
+
setTimeout(function () {
|
|
253
|
+
document.body.removeAttribute('data-exitoverview');
|
|
254
|
+
}, 500);
|
|
255
|
+
|
|
256
|
+
if (event.currentSlide) {
|
|
257
|
+
if (slides.from && options.hideagain) {
|
|
258
|
+
hideAppearances(event.previousSlide);
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
showAppearances(slides.to);
|
|
262
|
+
event.currentSlide.dataset.eventdone = true;
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
if (event.type == "slidechanged" && slides.from) {
|
|
268
|
+
slides.from.removeAttribute('data-eventdone');
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
if (slides.from) {
|
|
272
|
+
if (event.type == 'slidetransitionend' && options.hideagain) {
|
|
273
|
+
hideAppearances(slides.from);
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
};
|
|
277
|
+
|
|
278
|
+
var showHideFragment = function showHideFragment(event) {
|
|
279
|
+
if (event.type == "fragmentshowncomplete" || event.type == "fragmentshown") {
|
|
280
|
+
showAppearances(event.fragment);
|
|
281
|
+
} else {
|
|
282
|
+
hideAppearances(event.fragment);
|
|
283
|
+
}
|
|
284
|
+
};
|
|
285
|
+
|
|
286
|
+
deck.on('ready', function (event) {
|
|
287
|
+
autoAdd();
|
|
288
|
+
showHideSlide(event);
|
|
289
|
+
});
|
|
290
|
+
deck.on('slidechanged', function (event) {
|
|
291
|
+
showHideSlide(event);
|
|
292
|
+
});
|
|
293
|
+
deck.on('slidetransitionend', function (event) {
|
|
294
|
+
showHideSlide(event);
|
|
295
|
+
});
|
|
296
|
+
deck.on('autoanimate', function (event) {
|
|
297
|
+
showHideSlide(event);
|
|
298
|
+
});
|
|
299
|
+
deck.on('overviewhidden', function (event) {
|
|
300
|
+
showHideSlide(event);
|
|
301
|
+
});
|
|
302
|
+
deck.on('fragmentshown', function (event) {
|
|
303
|
+
showHideFragment(event);
|
|
304
|
+
});
|
|
305
|
+
deck.on('fragmenthidden', function (event) {
|
|
306
|
+
showHideFragment(event);
|
|
307
|
+
});
|
|
308
|
+
};
|
|
309
|
+
|
|
310
|
+
var init = function init(deck) {
|
|
311
|
+
var defaultOptions = {
|
|
312
|
+
baseclass: 'animated',
|
|
313
|
+
visibleclass: 'in',
|
|
314
|
+
hideagain: true,
|
|
315
|
+
delay: 300,
|
|
316
|
+
debug: false,
|
|
317
|
+
appearevent: 'slidetransitionend',
|
|
318
|
+
autoappear: false,
|
|
319
|
+
autoelements: null
|
|
320
|
+
};
|
|
321
|
+
|
|
322
|
+
var defaults = function defaults(options, defaultOptions) {
|
|
323
|
+
for (var i in defaultOptions) {
|
|
324
|
+
if (!options.hasOwnProperty(i)) {
|
|
325
|
+
options[i] = defaultOptions[i];
|
|
326
|
+
}
|
|
327
|
+
}
|
|
328
|
+
};
|
|
329
|
+
|
|
330
|
+
var options = deck.getConfig().appearance || {};
|
|
331
|
+
defaults(options, defaultOptions);
|
|
332
|
+
appear(deck, options);
|
|
333
|
+
};
|
|
334
|
+
|
|
335
|
+
return {
|
|
336
|
+
id: 'appearance',
|
|
337
|
+
init: init
|
|
338
|
+
};
|
|
339
|
+
};
|
|
340
|
+
|
|
341
|
+
return Plugin;
|
|
251
342
|
|
|
252
343
|
})));
|
|
@@ -40,11 +40,39 @@ const Plugin = () => {
|
|
|
40
40
|
let selectionarray = Array.prototype.slice.call(selections);
|
|
41
41
|
return selectionarray;
|
|
42
42
|
};
|
|
43
|
+
|
|
44
|
+
const autoAdd = function () {
|
|
45
|
+
|
|
46
|
+
if (options.autoelements) {
|
|
47
|
+
|
|
48
|
+
for (const [autoelement, autoanimation] of Object.entries(options.autoelements)) {
|
|
49
|
+
|
|
50
|
+
if (options.autoappear) {
|
|
51
|
+
debugLog(`All "${autoelement}"" elements will animate with ${autoanimation}`);
|
|
52
|
+
}
|
|
53
|
+
let autosection = options.autoappear ? "" : "[data-autoappear] ";
|
|
54
|
+
let autoAppearances = deck.getRevealElement().querySelectorAll(`.slides ${autosection}${autoelement}`);
|
|
55
|
+
|
|
56
|
+
if (autoAppearances.length > 0) {
|
|
57
|
+
autoAppearances.forEach(autoAppearance => {
|
|
58
|
+
if (!autoAppearance.classList.contains(options.baseclass)) {
|
|
59
|
+
autoAppearance.classList.add(options.baseclass);
|
|
60
|
+
autoAppearance.classList.add(autoanimation);
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
}
|
|
66
|
+
} else if (options.autoappear) {
|
|
67
|
+
console.log(`Please set an "autoelements" object.`);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
43
70
|
|
|
44
71
|
const showAppearances = function (container) {
|
|
45
72
|
clearTimeOuts(timeouts);
|
|
46
73
|
let appearances = selectionArray(container, ":scope ." + options.baseclass);
|
|
47
74
|
let appearancesInFragment = selectionArray(container, ":scope .fragment .".concat(options.baseclass));
|
|
75
|
+
|
|
48
76
|
loopAppearances(appearances, appearancesInFragment);
|
|
49
77
|
};
|
|
50
78
|
|
|
@@ -125,7 +153,6 @@ const Plugin = () => {
|
|
|
125
153
|
}
|
|
126
154
|
};
|
|
127
155
|
|
|
128
|
-
|
|
129
156
|
const showHideFragment = function (event) {
|
|
130
157
|
if (event.type == "fragmentshowncomplete" || event.type == "fragmentshown") {
|
|
131
158
|
showAppearances(event.fragment);
|
|
@@ -134,7 +161,7 @@ const Plugin = () => {
|
|
|
134
161
|
}
|
|
135
162
|
};
|
|
136
163
|
|
|
137
|
-
deck.on( 'ready', event => { showHideSlide(event) } );
|
|
164
|
+
deck.on( 'ready', event => { autoAdd(); showHideSlide(event) } );
|
|
138
165
|
deck.on( 'slidechanged', event => { showHideSlide(event) } );
|
|
139
166
|
deck.on( 'slidetransitionend', event => { showHideSlide(event) } );
|
|
140
167
|
deck.on( 'autoanimate', event => { showHideSlide(event) } );
|
|
@@ -152,6 +179,8 @@ const Plugin = () => {
|
|
|
152
179
|
delay: 300,
|
|
153
180
|
debug: false,
|
|
154
181
|
appearevent: 'slidetransitionend',
|
|
182
|
+
autoappear: false,
|
|
183
|
+
autoelements: null
|
|
155
184
|
};
|
|
156
185
|
|
|
157
186
|
const defaults = function (options, defaultOptions) {
|
package/screenshot.png
CHANGED
|
Binary file
|