reveal.js-appearance 1.3.1 → 1.3.4
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
CHANGED
|
@@ -1,5 +1,37 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
|
|
4
|
+
## [1.3.4] - 2023-07-31
|
|
5
|
+
### Changed
|
|
6
|
+
- Fixed a typo (was srcipt but should be script)
|
|
7
|
+
- Fixed visible appearance items in print view (#13)
|
|
8
|
+
- Dependency fixes
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
- Added `cssautoload` option to automatically load the CSS file. Can be switched off if you want to load the CSS file yourself with `import` when using bundlers like Webpack or Parcel.
|
|
12
|
+
- Added `baseline` effect for use with words and letters, to make them appear from the baseline of the text.
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [1.3.3] - 2023-11-18
|
|
18
|
+
### Added
|
|
19
|
+
- Added embedded example to the demo’s
|
|
20
|
+
|
|
21
|
+
### Changed
|
|
22
|
+
- Fixed a bug where the plugin would not work if in an embedded presentation
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## [1.3.1] - 2023-11-05
|
|
26
|
+
### Added
|
|
27
|
+
- Added Terser to minimize files
|
|
28
|
+
|
|
29
|
+
### Changed
|
|
30
|
+
- Fixed invisible elements in auto-animate slides
|
|
31
|
+
- Changed demo to align normal and MarkDown slides
|
|
32
|
+
- Changed loadStyle function
|
|
33
|
+
- Updated gulp file and dev dependencies
|
|
34
|
+
|
|
3
35
|
## [1.3.0] - 2023-10-25
|
|
4
36
|
### Added
|
|
5
37
|
- Added word and character appearances
|
package/README.md
CHANGED
|
@@ -77,10 +77,17 @@ If you're using ES modules, you can add it like this:
|
|
|
77
77
|
```
|
|
78
78
|
|
|
79
79
|
### Styling
|
|
80
|
-
The styling of Appearance is automatically inserted
|
|
80
|
+
The styling of Appearance is automatically inserted **when the appearance folder is manually (or automatically) copied** to the Reveal.js plugin folder.
|
|
81
81
|
|
|
82
|
-
If you
|
|
82
|
+
**BUT**: If you are using a bundler like Webpack or Parcel, that uses **import**, you will also need to **import** the CSS file yourself. Depending on your setup this can be something like this:
|
|
83
83
|
|
|
84
|
+
```
|
|
85
|
+
import 'reveal.js-appearance/plugin/appearance/appearance.css';
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
In that case, the `cssautoload` option (in the Reveal appearance options) should be set to `false`, to avoid style loading errors.
|
|
89
|
+
|
|
90
|
+
> However, if you actually know the correct full path to the CSS file, then you can still use the `csspath` option and keep `cssautoload` set to `true`.
|
|
84
91
|
|
|
85
92
|
|
|
86
93
|
### HTML
|
|
@@ -137,10 +144,12 @@ You can change the speed of each animation, using the tempo classes from Animate
|
|
|
137
144
|
|
|
138
145
|
For words and letters, the same techniques can be used.
|
|
139
146
|
|
|
140
|
-
Note that the data-delay also gets copied to the smaller elements in it, which means that there is no more 'whole sentence' or 'whole word' to delay. By default, the whole element then gets the delay (depending on if it is following other animations) as defined in the `delay` option in the Configuration, but it can be overriden by an optional `data-container-delay`.
|
|
147
|
+
Note that the data-delay also gets copied to the smaller elements in it, which means that there is no more 'whole sentence' or 'whole word' to delay. By default, the whole element then gets the delay (depending on if it is following other animations) as defined in the `delay` option in the Configuration, but it can be overriden by an optional `data-container-delay`.
|
|
148
|
+
|
|
149
|
+
Also note the (optional) `baseline` class here, which makes the words appear from the baseline of the text.
|
|
141
150
|
|
|
142
151
|
```html
|
|
143
|
-
<h3 class="
|
|
152
|
+
<h3 class="animate__fadeInUp animate__faster baseline"
|
|
144
153
|
data-split="words"
|
|
145
154
|
data-delay="80"
|
|
146
155
|
data-container-delay="600">Let words apear and appear</h3>
|
|
@@ -150,7 +159,7 @@ Note that the data-delay also gets copied to the smaller elements in it, which m
|
|
|
150
159
|
### Changing the 'appearevent'
|
|
151
160
|
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.
|
|
152
161
|
|
|
153
|
-
There are cases however, where
|
|
162
|
+
There are cases however, where there is hardly any transition, for example, when going from an autoanimate slide to another. Reveal then suppresses the user-set transition to a short opacity change. Starting *together with* the transition might then be nicer. You can use any of the following events:
|
|
154
163
|
|
|
155
164
|
* *slidetransitionend* (default, Appearance will always start animating elements after the transition)
|
|
156
165
|
* *slidechanged* (Appearance will always start together with the transition)
|
|
@@ -285,6 +294,7 @@ Reveal.initialize({
|
|
|
285
294
|
appearevent: 'slidetransitionend',
|
|
286
295
|
autoappear: false,
|
|
287
296
|
autoelements: false,
|
|
297
|
+
cssautoload: true,
|
|
288
298
|
csspath: '',
|
|
289
299
|
animatecsspath: {
|
|
290
300
|
link : 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css',
|
|
@@ -302,6 +312,7 @@ Reveal.initialize({
|
|
|
302
312
|
* **`appearevent`**: Use a specific event at which Appearance starts.
|
|
303
313
|
* **`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 "Autoappear" mode above.
|
|
304
314
|
* **`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.
|
|
315
|
+
* **`cssautoload`**: Appearance will load the CSS if this is set to `true`. If you import reveal.js-appearance from npm, you will need to import the CSS file yourself. If you use 'import', then csspath should be set to `false`. If you know the path to the CSS file, you can use the `csspath` option and keep cssautoload set to `true`.
|
|
305
316
|
* **`csspath`**: Appearance will automatically load the styling of the plugin. If you want to customise the styling, you can link to your own CSS file here.
|
|
306
317
|
* **`animatecsspath`**: Appearance will also automatically load the styling of Animate.css via a CDN. Note that Animate.css has two links, the first (CDN) one is for version 4, the second (old) one is the version 3 compatibility CDN link.
|
|
307
318
|
* **`compatibility`**: This setting can let you use your current markup. However, because this also uses the Animate.css compatibility CSS, and it is likely that they will not support this in the future, please update your markup as shown above.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reveal.js-appearance",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.4",
|
|
4
4
|
"description": "An animation plugin for Reveal.js that animates elements sequentially like in Powerpoint. Perfect for online portfolios or other presentations with images.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"reveal",
|
|
@@ -32,8 +32,7 @@
|
|
|
32
32
|
"build": "NODE_ENV=prod gulp build"
|
|
33
33
|
},
|
|
34
34
|
"overrides": {
|
|
35
|
-
"
|
|
36
|
-
"glob-parent": "6.0.2"
|
|
35
|
+
"ws": "8.17.1"
|
|
37
36
|
},
|
|
38
37
|
"browserslist": "> 2%, not dead",
|
|
39
38
|
"devDependencies": {
|
|
@@ -42,22 +41,21 @@
|
|
|
42
41
|
"@rollup/plugin-commonjs": "^25.0.7",
|
|
43
42
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
44
43
|
"@rollup/plugin-terser": "^0.4.4",
|
|
45
|
-
"browser-sync": "^
|
|
44
|
+
"browser-sync": "^3.0.2",
|
|
46
45
|
"del": "^5.1.0",
|
|
47
|
-
"gulp": "^
|
|
46
|
+
"gulp": "^5.0.0",
|
|
48
47
|
"gulp-autoprefixer": "^8.0.0",
|
|
49
|
-
"gulp-header": "^2.0.9",
|
|
50
48
|
"gulp-plumber": "^1.2.1",
|
|
51
49
|
"gulp-pug": "^5.0.0",
|
|
52
50
|
"gulp-rename": "^2.0.0",
|
|
53
51
|
"gulp-sass": "^5.1.0",
|
|
52
|
+
"gulp-tap": "^2.0.0",
|
|
54
53
|
"merge-stream": "^2.0.0",
|
|
55
54
|
"rollup": "^4.2.0",
|
|
56
55
|
"sass": "^1.63.6"
|
|
57
56
|
},
|
|
58
57
|
"dependencies": {
|
|
59
|
-
"
|
|
60
|
-
"reveal.js": "^4.6.0"
|
|
58
|
+
"reveal.js": "^5.0.4"
|
|
61
59
|
},
|
|
62
60
|
"copydependencies": [
|
|
63
61
|
"reveal.js"
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/*****************************************************************
|
|
3
3
|
*
|
|
4
4
|
* Appearance for Reveal.js
|
|
5
|
-
* Version 1.3.
|
|
5
|
+
* Version 1.3.4
|
|
6
6
|
*
|
|
7
7
|
* @author: Martijn De Jongh (Martino), martijn.de.jongh@gmail.com
|
|
8
8
|
* https://github.com/martinomagnifico
|
|
@@ -14,6 +14,8 @@
|
|
|
14
14
|
*
|
|
15
15
|
******************************************************************/
|
|
16
16
|
|
|
17
|
+
|
|
18
|
+
|
|
17
19
|
/* Custom Appearance animation keyframes */
|
|
18
20
|
@keyframes skidLeft {
|
|
19
21
|
from {
|
|
@@ -111,6 +113,10 @@
|
|
|
111
113
|
transform: scale3d(1, 1, 1);
|
|
112
114
|
}
|
|
113
115
|
}
|
|
116
|
+
.wordchargroup.baseline {
|
|
117
|
+
overflow: hidden;
|
|
118
|
+
}
|
|
119
|
+
|
|
114
120
|
/* Custom Appearance animation classes */
|
|
115
121
|
.skidRight, .animate__skidRight {
|
|
116
122
|
animation-name: skidRight;
|
|
@@ -218,15 +224,23 @@ i.animate__animated, i.animated, span.animate__animated, span.animated {
|
|
|
218
224
|
animation-duration: calc(var(--animate-duration) * 3);
|
|
219
225
|
}
|
|
220
226
|
|
|
221
|
-
.print-pdf .animated
|
|
222
|
-
.print-pdf
|
|
223
|
-
.print-pdf
|
|
227
|
+
.print-pdf .animated .animated:not(.fragment),
|
|
228
|
+
.print-pdf .animated .animate__animated:not(.fragment),
|
|
229
|
+
.print-pdf .animated .animated.fragment.visible,
|
|
230
|
+
.print-pdf .animated .animate__animated.fragment.visible, .print-pdf .animate__animated .animated:not(.fragment),
|
|
231
|
+
.print-pdf .animate__animated .animate__animated:not(.fragment),
|
|
232
|
+
.print-pdf .animate__animated .animated.fragment.visible,
|
|
233
|
+
.print-pdf .animate__animated .animate__animated.fragment.visible,
|
|
234
|
+
.print-pdf section:not(.stack):not([data-appearance-can-start]) .animated:not(.fragment),
|
|
235
|
+
.print-pdf section:not(.stack):not([data-appearance-can-start]) .animate__animated:not(.fragment),
|
|
236
|
+
.print-pdf section:not(.stack):not([data-appearance-can-start]) .animated.fragment.visible,
|
|
237
|
+
.print-pdf section:not(.stack):not([data-appearance-can-start]) .animate__animated.fragment.visible {
|
|
224
238
|
opacity: 1;
|
|
225
239
|
visibility: visible;
|
|
226
240
|
animation: none;
|
|
227
241
|
}
|
|
228
|
-
.print-pdf .
|
|
229
|
-
|
|
242
|
+
.print-pdf .animated, .print-pdf .animate__animated {
|
|
243
|
+
animation: none;
|
|
230
244
|
}
|
|
231
245
|
|
|
232
246
|
.reveal.sv .animated, .reveal.sv .animate__animated,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*****************************************************************
|
|
2
2
|
*
|
|
3
3
|
* Appearance for Reveal.js
|
|
4
|
-
* Version 1.3.
|
|
4
|
+
* Version 1.3.4
|
|
5
5
|
*
|
|
6
6
|
* @author: Martijn De Jongh (Martino), martijn.de.jongh@gmail.com
|
|
7
7
|
* https://github.com/martinomagnifico
|
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Copyright (C) 2023 Martijn De Jongh (Martino)
|
|
13
13
|
*
|
|
14
14
|
******************************************************************/
|
|
15
|
-
const e=e=>e&&"object"==typeof e&&!Array.isArray(e),t=(a,...
|
|
15
|
+
const e=e=>e&&"object"==typeof e&&!Array.isArray(e),t=(a,...s)=>{if(!s.length)return a;const n=s.shift();if(e(a)&&e(n))for(const s in n)e(n[s])?(a[s]||Object.assign(a,{[s]:{}}),t(a[s],n[s])):Object.assign(a,{[s]:n[s]});return t(a,...s)},a=e=>{let t="";return"string"==typeof e&&(e=e.replace(/[“”]/g,'"').replace(/[‘’]/g,"'")),t=(e=>{try{return JSON.parse(e)&&!!e}catch(e){return!1}})(e)?e:"object"==typeof e?JSON.stringify(e,null,2):"{"===e.trim().replace(/'/g,'"').charAt(0)?e.trim().replace(/'/g,'"'):`{${e.trim().replace(/'/g,'"')}}`,t},s=(e,t,a)=>{let s,n=document.querySelector("head"),r=!1;if("script"===t?document.querySelector(`script[src="${e}"]`)?r=!0:(s=document.createElement("script"),s.type="text/javascript",s.src=e):"stylesheet"===t&&(document.querySelector(`link[href="${e}"]`)?r=!0:(s=document.createElement("link"),s.rel="stylesheet",s.href=e)),!r){const e=()=>{"function"==typeof a&&(a.call(),a=null)};s.onload=e,s.onreadystatechange=function(){"loaded"===this.readyState&&e()},n.appendChild(s)}},n=(e,t)=>{e.debug&&console.log(t)},r=(e,t)=>{let a=(e=>{let t,a=document.querySelector(`script[src$="${e}"]`);return t=a?a.getAttribute("src").slice(0,-1*e.length):import.meta.url.slice(0,import.meta.url.lastIndexOf("/")+1),t})(t),n=t.replace(/\.[^/.]+$/,"");if(e.cssautoload){let t=e.csspath.appearance?e.csspath.appearance:`${a}${n}.css`||`plugin/${n}/${n}.css`,r=e.compatibility?e.animatecsspath.compat:e.animatecsspath.link;e.debug&&(console.log("Paths:"),console.log(` - Plugin path = ${a}`),console.log(` - Appearance CSS path = ${t}`),console.log(` - AnimateCSS CSS path = ${r}`)),s(r,"stylesheet",(function(){s(t,"stylesheet")}))}},i=(e,t)=>{let a=e.parentNode;if(a){for(const t of a.children)if(t!==e&&t.dataset.appearParent)return;a.classList=e.classList,(({attributes:e},t,a)=>{[...e].filter((({nodeName:e})=>e.includes("data"))).forEach((({nodeName:e,nodeValue:s})=>{(a&&e!==a||!a)&&t.setAttribute(e,s)}))})(e,a,"data-appear-parent"),a.innerHTML=e.innerHTML,a.classList.add(t)}},l=(e,t,a)=>Array.from(a.querySelectorAll(`.${e}`)).filter((e=>!e.closest(`.${t}`))),o=(e,t,a)=>{const s=[l(t,a,e),...Array.from(e.querySelectorAll(`.${a}`)).map((e=>((e,t,a)=>Array.from(a.querySelectorAll(`.${e}`)).filter((e=>e.closest(`.${t}`)===a)))(t,a,e)))];return!!s.some((e=>e.length>0))&&s},c=(e,t)=>{t.hideagain&&e.from&&e.from.dataset.appearanceCanStart&&e.from.removeAttribute("data-appearance-can-start")},d=(e,t,a)=>{if(t.hideagain&&e&&e.from){let t=e.from.querySelectorAll(a.animatecss);t&&t.forEach((e=>{e.classList.remove("animationended")}));let s=e.from.querySelectorAll(".fragment.visible");s&&s.forEach((e=>{e.classList.remove("visible")}))}},p=()=>{const e={names:{}};let s={};const l=(e,t,s)=>{n(e,"------------- Preloading -------------");let l=t.names;r(e,l.es5Filename),e.compatibility&&(l.animatecss=".backInDown, .backInLeft, .backInRight, .backInUp, .bounceIn, .bounceInDown, .bounceInLeft, .bounceInRight, .bounceInUp, .fadeIn, .fadeInDown, .fadeInDownBig, .fadeInLeft, .fadeInLeftBig, .fadeInRight, .fadeInRightBig, .fadeInUp, .fadeInUpBig, .fadeInTopLeft, .fadeInTopRight, .fadeInBottomLeft, .fadeInBottomRight, .flipInX, .flipInY, .lightSpeedInRight, .lightSpeedInLeft, .rotateIn, .rotateInDownLeft, .rotateInDownRight, .rotateInUpLeft, .rotateInUpRight, .jackInTheBox, .rollIn, .zoomIn, .zoomInDown, .zoomInLeft, .zoomInRight, .zoomInUp, .slideInDown, .slideInLeft, .slideInRight, .slideInUp, .skidLeft, .skidLeftBig, .skidRight, .skidRightBig, .shrinkIn, .shrinkInBlur",l.baseclass=e.compatibilitybaseclass),t.appearances=Array.from(t.slides.querySelectorAll(l.animatecss)),t.regularSections.forEach((s=>((e,t,s)=>{let n=null;if(e.hasAttribute("data-autoappear")){let a=e.dataset.autoappear;n="auto"==a||""==a||a.length<1||"true"==a?t.autoelements?t.autoelements:null:a}else t.autoappear&&t.autoelements&&(n=t.autoelements);if(n){let t=JSON.parse(a(n));Object.entries(t).forEach((([t,a])=>{let n=Array.from(e.querySelectorAll(t)).filter((e=>!s.appearances.includes(e)));n.length&&n.forEach((e=>{s.appearances.push(e);let t=[],n=null,r=!1,i=null,l=null;Array.isArray(a)?(t=a[0].split(/[ ,]+/),n=a[1]):"string"==typeof a?t=a.split(/[ ,]+/):a.constructor===Object&&((a.class||a.animation)&&(t=(a.animation?a.animation:a.class).split(/[ ,]+/)),a.speed&&(r=String(a.speed),r.includes("animate__")||(r=`animate__${r}`)),a.delay&&(n=String(a.delay)),a.split&&(i=String(a.split)),a["container-delay"]&&(l=String(a["container-delay"]))),e.classList.add(...t),r&&e.classList.add(r),n&&(e.dataset.delay||(e.dataset.delay=n)),i&&(e.dataset.split=i),l&&(e.dataset.containerDelay=l)}))}))}})(s,e,t))),t.appearances.forEach(((t,a)=>{((e,t,a)=>{let s=a.baseclass;e.hasAttribute("data-appear-parent")&&i(e,s),t.appearparents&&e.parentNode&&e.parentNode.tagName&&"SPAN"==e.tagName&&"LI"==e.parentNode.tagName&&String(e.outerHTML).length==String(e.parentNode.innerHTML).length&&i(e)})(t,e,l),((e,t)=>{e.classList.contains(t.baseclass)||e.classList.add(t.baseclass),e.classList.contains(t.fragmentClass)&&e.classList.add("custom")})(t,l),t.hasAttribute("data-split")&&((e,t)=>{let a=!1,s=" ";if("words"==t?a=e.textContent.trim().split(/\s+/):"letters"==t&&(a=e.textContent.trim().split(""),s=""),a){const t=Array.from(e.classList).filter((e=>e.startsWith("animate__"))),n=a.map(((t,a)=>{const s=document.createElement("span");return s.textContent=t," "==t&&(s.textContent=" "),e.dataset.delay&&0!==a&&(s.dataset.delay=e.dataset.delay),e.dataset.containerDelay&&0===a&&(s.dataset.delay=e.dataset.containerDelay),e.classList.add("wordchargroup"),e.classList.forEach((e=>e.startsWith("animate__")&&s.classList.add(e))),s.outerHTML})).join(s);t.forEach((t=>e.classList.remove(t))),e.removeAttribute("data-delay"),e.removeAttribute("data-split"),e.removeAttribute("data-container-delay"),e.innerHTML=n}})(t,t.dataset.split)})),t.regularSections.forEach(((t,a)=>{let s=o(t,l.baseclass,l.fragmentClass);s&&s.forEach((t=>{((e,t,a)=>{let s=0;e.forEach(((e,a)=>{if(0==a&&e.dataset.delay||0!=a){let a=t.delay;e.dataset&&e.dataset.delay&&(a=parseInt(e.dataset.delay)),s+=a,e.style.setProperty("animation-delay",s+"ms"),e.removeAttribute("data-delay")}}))})(t,e)}))})),(e=>{setTimeout(e,0)})(s)},p=(t,a,s)=>{let r=e.names;return r.baseclass=a.baseclass,r.compatibilitybaseclass=a.compatibilitybaseclass,r.fragmentSelector=".fragment",r.fragmentClass="fragment",r.speedClasses=["slower","slow","fast","faster"],r.speedClasses.push(...r.speedClasses.map((e=>`animate__${e}`))),r.animatecss='[class^="animate__"],[class*=" animate__"]',r.es5Filename=s,r.eventnames=["ready","slidechanged","slidetransitionend","autoanimate","overviewhidden"],e.deck=t,e.dom=t.getRevealElement(),e.viewport=t.getViewportElement(),e.slides=t.getSlidesElement(),e.sections=e.slides.querySelectorAll("section"),e.fragments=e.slides.querySelectorAll(r.fragmentSelector),e.regularSections=Array.from(e.sections).filter((e=>!(({childNodes:e})=>{let t=!1;for(let a=0;a<e.length;a++)if("SECTION"==e[a].tagName){t=!0;break}return t})(e))),/receiver/i.test(window.location.search)&&e.viewport.classList.add("sv"),r.eventnames.forEach((s=>t.on(s,(t=>{((e,t,a,s)=>{s.deck.getConfig().view;let n=s.viewport.classList.contains("reveal-scroll"),r=e.type,i=(e=>{let t={};return t.from=e.fromSlide||e.previousSlide||null,t.to=e.toSlide||e.currentSlide||null,t})(e);if(i.to){"ready"==r&&(i.to.dataset.appearanceCanStart=!0);let s=((e,t)=>(e.dataset.appearevent&&"auto"===e.dataset.appearevent&&(e.dataset.appearevent="autoanimate"),"auto"==t.appearevent&&(t.appearevent="autoanimate"),e.dataset.appearevent?e.dataset.appearevent:t.appearevent))(i.to,t);(r==s||"slidetransitionend"==r&&"autoanimate"==s)&&(i.to.dataset.appearanceCanStart=!0),n&&"slidechanged"==r&&(c(i,t),d(i,t,a),setTimeout((()=>{i.to.dataset.appearanceCanStart=!0}),t.delay)),"slidetransitionend"==r&&(c(i,t),d(i,t,a)),"slidechanged"==r&&document.body.dataset.exitoverview?(c(i,t),i.to.dataset.appearanceCanStart=!0):"overviewhidden"==r&&(document.body.dataset.exitoverview=!0,setTimeout((()=>{document.body.removeAttribute("data-exitoverview")}),500),e.currentSlide&&(c(i,t),i.to.dataset.appearanceCanStart=!0))}})(t,a,r,e)})))),e.viewport.addEventListener("animationend",(e=>{e.target.classList.add("animationended")})),e.viewport.addEventListener("fragmenthidden",(e=>{e.fragment.classList.remove("animationended"),e.fragment.querySelectorAll(".animationended").forEach((e=>{e.classList.remove("animationended")}))})),new Promise((t=>{l(a,e,t),n(a,"---------- Done preloading ----------")}))};return{id:"appearance",init:e=>(s=t({baseclass:"animate__animated",hideagain:!0,delay:300,debug:!1,appearevent:"slidetransitionend",autoappear:!1,autoelements:!1,appearparents:!1,cssautoload:!0,csspath:"",animatecsspath:{link:"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",compat:"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.css"},compatibility:!1,compatibilitybaseclass:"animated"},e.getConfig().appearance||{}),p(e,s,"appearance.js"))}};export{p as default};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*****************************************************************
|
|
2
2
|
*
|
|
3
3
|
* Appearance for Reveal.js
|
|
4
|
-
* Version 1.3.
|
|
4
|
+
* Version 1.3.4
|
|
5
5
|
*
|
|
6
6
|
* @author: Martijn De Jongh (Martino), martijn.de.jongh@gmail.com
|
|
7
7
|
* https://github.com/martinomagnifico
|
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Copyright (C) 2023 Martijn De Jongh (Martino)
|
|
13
13
|
*
|
|
14
14
|
******************************************************************/
|
|
15
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Appearance=t()}(this,(function(){"use strict";var e="undefined"!=typeof document?document.currentScript:null;const t=e=>e&&"object"==typeof e&&!Array.isArray(e),a=(e,...n)=>{if(!n.length)return e;const s=n.shift();if(t(e)&&t(s))for(const n in s)t(s[n])?(e[n]||Object.assign(e,{[n]:{}}),a(e[n],s[n])):Object.assign(e,{[n]:s[n]});return a(e,...n)},n=e=>{let t="";return"string"==typeof e&&(e=e.replace(/[“”]/g,'"').replace(/[‘’]/g,"'")),t=(e=>{try{return JSON.parse(e)&&!!e}catch(e){return!1}})(e)?e:"object"==typeof e?JSON.stringify(e,null,2):"{"===e.trim().replace(/'/g,'"').charAt(0)?e.trim().replace(/'/g,'"'):`{${e.trim().replace(/'/g,'"')}}`,t},s=(e,t,a)=>{let n,s=document.querySelector("head");"script"===t?(n=document.createElement("script"),n.type="text/javascript",n.src=e):"stylesheet"===t&&(n=document.createElement("link"),n.rel="stylesheet",n.href=e)
|
|
15
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Appearance=t()}(this,(function(){"use strict";var e="undefined"!=typeof document?document.currentScript:null;const t=e=>e&&"object"==typeof e&&!Array.isArray(e),a=(e,...n)=>{if(!n.length)return e;const s=n.shift();if(t(e)&&t(s))for(const n in s)t(s[n])?(e[n]||Object.assign(e,{[n]:{}}),a(e[n],s[n])):Object.assign(e,{[n]:s[n]});return a(e,...n)},n=e=>{let t="";return"string"==typeof e&&(e=e.replace(/[“”]/g,'"').replace(/[‘’]/g,"'")),t=(e=>{try{return JSON.parse(e)&&!!e}catch(e){return!1}})(e)?e:"object"==typeof e?JSON.stringify(e,null,2):"{"===e.trim().replace(/'/g,'"').charAt(0)?e.trim().replace(/'/g,'"'):`{${e.trim().replace(/'/g,'"')}}`,t},s=(e,t,a)=>{let n,s=document.querySelector("head"),r=!1;if("script"===t?document.querySelector(`script[src="${e}"]`)?r=!0:(n=document.createElement("script"),n.type="text/javascript",n.src=e):"stylesheet"===t&&(document.querySelector(`link[href="${e}"]`)?r=!0:(n=document.createElement("link"),n.rel="stylesheet",n.href=e)),!r){const e=()=>{"function"==typeof a&&(a.call(),a=null)};n.onload=e,n.onreadystatechange=function(){"loaded"===this.readyState&&e()},s.appendChild(n)}},r=(e,t)=>{e.debug&&console.log(t)},i=(t,a)=>{let n=(t=>{let a,n=document.querySelector(`script[src$="${t}"]`);return a=n?n.getAttribute("src").slice(0,-1*t.length):("undefined"==typeof document&&"undefined"==typeof location?require("url").pathToFileURL(__filename).href:"undefined"==typeof document?location.href:e&&e.src||new URL("appearance.js",document.baseURI).href).slice(0,("undefined"==typeof document&&"undefined"==typeof location?require("url").pathToFileURL(__filename).href:"undefined"==typeof document?location.href:e&&e.src||new URL("appearance.js",document.baseURI).href).lastIndexOf("/")+1),a})(a),r=a.replace(/\.[^/.]+$/,"");if(t.cssautoload){let e=t.csspath.appearance?t.csspath.appearance:`${n}${r}.css`||`plugin/${r}/${r}.css`,a=t.compatibility?t.animatecsspath.compat:t.animatecsspath.link;t.debug&&(console.log("Paths:"),console.log(` - Plugin path = ${n}`),console.log(` - Appearance CSS path = ${e}`),console.log(` - AnimateCSS CSS path = ${a}`)),s(a,"stylesheet",(function(){s(e,"stylesheet")}))}},o=(e,t)=>{let a=e.parentNode;if(a){for(const t of a.children)if(t!==e&&t.dataset.appearParent)return;a.classList=e.classList,(({attributes:e},t,a)=>{[...e].filter((({nodeName:e})=>e.includes("data"))).forEach((({nodeName:e,nodeValue:n})=>{(a&&e!==a||!a)&&t.setAttribute(e,n)}))})(e,a,"data-appear-parent"),a.innerHTML=e.innerHTML,a.classList.add(t)}},l=(e,t,a)=>Array.from(a.querySelectorAll(`.${e}`)).filter((e=>!e.closest(`.${t}`))),c=(e,t,a)=>{const n=[l(t,a,e),...Array.from(e.querySelectorAll(`.${a}`)).map((e=>((e,t,a)=>Array.from(a.querySelectorAll(`.${e}`)).filter((e=>e.closest(`.${t}`)===a)))(t,a,e)))];return!!n.some((e=>e.length>0))&&n},d=(e,t)=>{t.hideagain&&e.from&&e.from.dataset.appearanceCanStart&&e.from.removeAttribute("data-appearance-can-start")},p=(e,t,a)=>{if(t.hideagain&&e&&e.from){let t=e.from.querySelectorAll(a.animatecss);t&&t.forEach((e=>{e.classList.remove("animationended")}));let n=e.from.querySelectorAll(".fragment.visible");n&&n.forEach((e=>{e.classList.remove("visible")}))}};return()=>{const e={names:{}};let t={};const s=(e,t,a)=>{r(e,"------------- Preloading -------------");let s=t.names;i(e,s.es5Filename),e.compatibility&&(s.animatecss=".backInDown, .backInLeft, .backInRight, .backInUp, .bounceIn, .bounceInDown, .bounceInLeft, .bounceInRight, .bounceInUp, .fadeIn, .fadeInDown, .fadeInDownBig, .fadeInLeft, .fadeInLeftBig, .fadeInRight, .fadeInRightBig, .fadeInUp, .fadeInUpBig, .fadeInTopLeft, .fadeInTopRight, .fadeInBottomLeft, .fadeInBottomRight, .flipInX, .flipInY, .lightSpeedInRight, .lightSpeedInLeft, .rotateIn, .rotateInDownLeft, .rotateInDownRight, .rotateInUpLeft, .rotateInUpRight, .jackInTheBox, .rollIn, .zoomIn, .zoomInDown, .zoomInLeft, .zoomInRight, .zoomInUp, .slideInDown, .slideInLeft, .slideInRight, .slideInUp, .skidLeft, .skidLeftBig, .skidRight, .skidRightBig, .shrinkIn, .shrinkInBlur",s.baseclass=e.compatibilitybaseclass),t.appearances=Array.from(t.slides.querySelectorAll(s.animatecss)),t.regularSections.forEach((a=>((e,t,a)=>{let s=null;if(e.hasAttribute("data-autoappear")){let a=e.dataset.autoappear;s="auto"==a||""==a||a.length<1||"true"==a?t.autoelements?t.autoelements:null:a}else t.autoappear&&t.autoelements&&(s=t.autoelements);if(s){let t=JSON.parse(n(s));Object.entries(t).forEach((([t,n])=>{let s=Array.from(e.querySelectorAll(t)).filter((e=>!a.appearances.includes(e)));s.length&&s.forEach((e=>{a.appearances.push(e);let t=[],s=null,r=!1,i=null,o=null;Array.isArray(n)?(t=n[0].split(/[ ,]+/),s=n[1]):"string"==typeof n?t=n.split(/[ ,]+/):n.constructor===Object&&((n.class||n.animation)&&(t=(n.animation?n.animation:n.class).split(/[ ,]+/)),n.speed&&(r=String(n.speed),r.includes("animate__")||(r=`animate__${r}`)),n.delay&&(s=String(n.delay)),n.split&&(i=String(n.split)),n["container-delay"]&&(o=String(n["container-delay"]))),e.classList.add(...t),r&&e.classList.add(r),s&&(e.dataset.delay||(e.dataset.delay=s)),i&&(e.dataset.split=i),o&&(e.dataset.containerDelay=o)}))}))}})(a,e,t))),t.appearances.forEach(((t,a)=>{((e,t,a)=>{let n=a.baseclass;e.hasAttribute("data-appear-parent")&&o(e,n),t.appearparents&&e.parentNode&&e.parentNode.tagName&&"SPAN"==e.tagName&&"LI"==e.parentNode.tagName&&String(e.outerHTML).length==String(e.parentNode.innerHTML).length&&o(e)})(t,e,s),((e,t)=>{e.classList.contains(t.baseclass)||e.classList.add(t.baseclass),e.classList.contains(t.fragmentClass)&&e.classList.add("custom")})(t,s),t.hasAttribute("data-split")&&((e,t)=>{let a=!1,n=" ";if("words"==t?a=e.textContent.trim().split(/\s+/):"letters"==t&&(a=e.textContent.trim().split(""),n=""),a){const t=Array.from(e.classList).filter((e=>e.startsWith("animate__"))),s=a.map(((t,a)=>{const n=document.createElement("span");return n.textContent=t," "==t&&(n.textContent=" "),e.dataset.delay&&0!==a&&(n.dataset.delay=e.dataset.delay),e.dataset.containerDelay&&0===a&&(n.dataset.delay=e.dataset.containerDelay),e.classList.add("wordchargroup"),e.classList.forEach((e=>e.startsWith("animate__")&&n.classList.add(e))),n.outerHTML})).join(n);t.forEach((t=>e.classList.remove(t))),e.removeAttribute("data-delay"),e.removeAttribute("data-split"),e.removeAttribute("data-container-delay"),e.innerHTML=s}})(t,t.dataset.split)})),t.regularSections.forEach(((t,a)=>{let n=c(t,s.baseclass,s.fragmentClass);n&&n.forEach((t=>{((e,t,a)=>{let n=0;e.forEach(((e,a)=>{if(0==a&&e.dataset.delay||0!=a){let a=t.delay;e.dataset&&e.dataset.delay&&(a=parseInt(e.dataset.delay)),n+=a,e.style.setProperty("animation-delay",n+"ms"),e.removeAttribute("data-delay")}}))})(t,e)}))})),(e=>{setTimeout(e,0)})(a)},l=(t,a,n)=>{let i=e.names;return i.baseclass=a.baseclass,i.compatibilitybaseclass=a.compatibilitybaseclass,i.fragmentSelector=".fragment",i.fragmentClass="fragment",i.speedClasses=["slower","slow","fast","faster"],i.speedClasses.push(...i.speedClasses.map((e=>`animate__${e}`))),i.animatecss='[class^="animate__"],[class*=" animate__"]',i.es5Filename=n,i.eventnames=["ready","slidechanged","slidetransitionend","autoanimate","overviewhidden"],e.deck=t,e.dom=t.getRevealElement(),e.viewport=t.getViewportElement(),e.slides=t.getSlidesElement(),e.sections=e.slides.querySelectorAll("section"),e.fragments=e.slides.querySelectorAll(i.fragmentSelector),e.regularSections=Array.from(e.sections).filter((e=>!(({childNodes:e})=>{let t=!1;for(let a=0;a<e.length;a++)if("SECTION"==e[a].tagName){t=!0;break}return t})(e))),/receiver/i.test(window.location.search)&&e.viewport.classList.add("sv"),i.eventnames.forEach((n=>t.on(n,(t=>{((e,t,a,n)=>{n.deck.getConfig().view;let s=n.viewport.classList.contains("reveal-scroll"),r=e.type,i=(e=>{let t={};return t.from=e.fromSlide||e.previousSlide||null,t.to=e.toSlide||e.currentSlide||null,t})(e);if(i.to){"ready"==r&&(i.to.dataset.appearanceCanStart=!0);let n=((e,t)=>(e.dataset.appearevent&&"auto"===e.dataset.appearevent&&(e.dataset.appearevent="autoanimate"),"auto"==t.appearevent&&(t.appearevent="autoanimate"),e.dataset.appearevent?e.dataset.appearevent:t.appearevent))(i.to,t);(r==n||"slidetransitionend"==r&&"autoanimate"==n)&&(i.to.dataset.appearanceCanStart=!0),s&&"slidechanged"==r&&(d(i,t),p(i,t,a),setTimeout((()=>{i.to.dataset.appearanceCanStart=!0}),t.delay)),"slidetransitionend"==r&&(d(i,t),p(i,t,a)),"slidechanged"==r&&document.body.dataset.exitoverview?(d(i,t),i.to.dataset.appearanceCanStart=!0):"overviewhidden"==r&&(document.body.dataset.exitoverview=!0,setTimeout((()=>{document.body.removeAttribute("data-exitoverview")}),500),e.currentSlide&&(d(i,t),i.to.dataset.appearanceCanStart=!0))}})(t,a,i,e)})))),e.viewport.addEventListener("animationend",(e=>{e.target.classList.add("animationended")})),e.viewport.addEventListener("fragmenthidden",(e=>{e.fragment.classList.remove("animationended"),e.fragment.querySelectorAll(".animationended").forEach((e=>{e.classList.remove("animationended")}))})),new Promise((t=>{s(a,e,t),r(a,"---------- Done preloading ----------")}))};return{id:"appearance",init:e=>(t=a({baseclass:"animate__animated",hideagain:!0,delay:300,debug:!1,appearevent:"slidetransitionend",autoappear:!1,autoelements:!1,appearparents:!1,cssautoload:!0,csspath:"",animatecsspath:{link:"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",compat:"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.css"},compatibility:!1,compatibilitybaseclass:"animated"},e.getConfig().appearance||{}),l(e,t,"appearance.js"))}}}));
|