reveal.js-appearance 1.0.9 → 1.1.2

package/plugin/appearance/plugin-src.js

@@ -4,56 +4,127 @@ const Plugin = () => {
 	// Scope support polyfill
 	try{document.querySelector(":scope *")}catch(t){!function(t){let e=/:scope(?![\w-])/gi,r=u(t.querySelector);t.querySelector=function(t){return r.apply(this,arguments)};let c=u(t.querySelectorAll);if(t.querySelectorAll=function(t){return c.apply(this,arguments)},t.matches){let n=u(t.matches);t.matches=function(t){return n.apply(this,arguments)}}if(t.closest){let o=u(t.closest);t.closest=function(t){return o.apply(this,arguments)}}function u(t){return function(r){if(r&&e.test(r)){let c="q"+Math.floor(9e6*Math.random())+1e6;arguments[0]=r.replace(e,"["+c+"]"),this.setAttribute(c,"");let n=t.apply(this,arguments);return this.removeAttribute(c),n}return t.apply(this,arguments)}}}(Element.prototype)}
 
+	const loadStyle = function(url, type, callback) {
+		let head = document.querySelector('head');
+		let style;
+		style = document.createElement('link');
+		style.rel = 'stylesheet';
+		style.href = url;
+
+		let finish = function () {
+			if (typeof callback === 'function') {
+				callback.call();
+				callback = null;
+			}
+		};
+	
+		style.onload = finish;
+	
+		style.onreadystatechange = function () {
+			if (this.readyState === 'loaded') {
+				finish();
+			}
+		};
+		head.appendChild(style);
+	}
+
+	const selectionArray = function (container, selectors) {
+		let selections = container.querySelectorAll(selectors);
+		let selectionarray = Array.prototype.slice.call(selections);
+		return selectionarray;
+	};
+
 	const appear = function (deck, options) {
 
+		let baseclass = 'animate__animated';
+		let appearanceSelector = options.compatibility ? `.${options.compatibilitybaseclass}` : `.${baseclass}`;
+		let fragmentSelector = ".fragment"
+
+		const sections = deck.getRevealElement().querySelectorAll(`.slides section`);
+		const fragments = deck.getRevealElement().querySelectorAll(fragmentSelector);
+		let animatecss = '[class^="animate__"],[class*=" animate__"]'
+
 		const debugLog = function(text) {
 			if (options.debug) console.log(text);
 		}
 
-		let timeouts = [];
+		const findAppearancesIn = function (container, includeClass, excludeClass) {
+			if (!isStack(container)) {
+				let appearances = selectionArray(container, `:scope ${includeClass}`);
+				let excludes = selectionArray(container, `:scope ${excludeClass} ${includeClass}`);
+				let delay = 0;
+		
+				appearances.filter(function (appearance, index) {
+					if (  !(excludes.indexOf(appearance) > -1 )  ) {
+						if ((index == 0 && appearance.dataset.delay) || index !=0) {
+							let elementDelay = appearance.dataset.delay ? (parseInt(appearance.dataset.delay)) : options.delay; 
+							delay = delay + elementDelay;
+							appearance.style.setProperty('animation-delay', delay + "ms");
+						}
+					}
+				})
+			}
+		}
+
+		const autoAdd = function () {
+
+			if (options.autoelements) {
 
-		const clearTimeOuts = function (timeouts) {
-			for (let i=0; i<timeouts.length; i++) {
-				clearTimeout(timeouts[i]);
+				for (const [autoelement, autoanimation] of Object.entries(options.autoelements)) {
+
+					if (options.autoappear) {
+						debugLog(`All "${autoelement}"" elements will animate with ${autoanimation}`);
+					}
+					let autosection = options.autoappear ? "" : "[data-autoappear] ";
+					let autoAppearances = deck.getRevealElement().querySelectorAll(`.slides ${autosection}${autoelement}`);
+
+					if (autoAppearances.length > 0) {
+						autoAppearances.forEach(autoAppearance => {
+							if (!autoAppearance.classList.contains(baseclass)) {
+								autoAppearance.classList.add(baseclass);
+								autoAppearance.classList.add(autoanimation);
+							}
+						});
+					}
+				}
+			} else if (options.autoappear) {
+				console.log(`Please set an "autoelements" object.`);
 			}
-			timeouts = [];
-		};
+		}
 
-		const loopAppearances = function (appearances, appearancesInFragment) {
-			let delay = 0;
-
-			appearances.filter(function (element, i) {
-				if (!(appearancesInFragment.indexOf(element) > -1)) {
-					let delayincrement = parseInt(element.dataset.delay ? element.dataset.delay : i > 0 ? options.delay : 0);
-					delay += delayincrement;
-					timeouts.push(
-						setTimeout(function () {
-							element.classList.add(options.visibleclass);
-						}, delay)
-					);
+		const isStack = function (section) {
+			let isStack = false;
+			for (let i = 0; i < section.childNodes.length; i++) {
+				if (section.childNodes[i].tagName == "SECTION") {
+					isStack = true
+					break;
 				}
-			});
-		};
-	
-		const selectionArray = function (container, selectors) {
-			let selections = container.querySelectorAll(selectors);
-			let selectionarray = Array.prototype.slice.call(selections);
-			return selectionarray;
-		};
-	
-		const showAppearances = function (container) {
-			clearTimeOuts(timeouts);
-			let appearances = selectionArray(container, ":scope ." + options.baseclass);
-			let appearancesInFragment = selectionArray(container, ":scope .fragment .".concat(options.baseclass));
-			loopAppearances(appearances, appearancesInFragment);
+			}
+			return isStack;
 		};
+
+		if (options.compatibility) {
+			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';
+			baseclass = options.compatibilitybaseclass
+		}
+
+		let allappearances = deck.getRevealElement().querySelectorAll(animatecss);
+
+		allappearances.forEach(appearance => {
+			if (!appearance.classList.contains(baseclass)) {
+				appearance.classList.add(baseclass);
+			}
+		});
+
+		autoAdd();
+
+		sections.forEach(section => {
+			findAppearancesIn(section, appearanceSelector, fragmentSelector);
+		})
 	
-		const hideAppearances = function (container) {
-			let disappearances = selectionArray(container, ":scope .".concat(options.baseclass, ", :scope .fragment.visible"));
-			disappearances.filter(function (element) {
-				element.classList.remove(element.classList.contains("fragment") ? "visible" : options.visibleclass);
-			});
-		};
+		fragments.forEach(fragment => {
+			findAppearancesIn(fragment, appearanceSelector, fragmentSelector);
+		})
 
 		const fromTo = function (event) {
 			let slides = {}
@@ -62,39 +133,42 @@ const Plugin = () => {
 			return slides
 		}
 
-		const showHideSlide = function (event) {
+		const showHideSlide = function(event) {
 
+			let etype = event.type;
 			let slides = fromTo(event);
+			debugLog(etype);
 
-			if (slides.to.dataset.appearevent == "auto") {slides.to.dataset.appearevent = "autoanimate"}
+			if (slides.to?.dataset.appearevent == "auto") {slides.to.dataset.appearevent = "autoanimate"}
 			if (options.appearevent == "auto") {options.appearevent = "autoanimate"}
 
-			if ( !slides.to.dataset.eventdone ) {
-
-				debugLog(`Event: '${event.type}'`);
-
-				if (event.type == "ready") {
-					showAppearances(slides.to);
+			if (etype == "ready") {
+				slides.to.dataset.appearanceCanStart = true;
+			}
 
-				} else if (event.type == slides.to.dataset.appearevent) {
-					slides.to.dataset.eventdone = true;
-					showAppearances(slides.to);
+			if (slides.to) {
 
-				} else if (event.type == options.appearevent) {
-					
-					slides.to.dataset.eventdone = true;
-					showAppearances(slides.to);
+				let appearevent = slides.to.dataset.appearevent ? slides.to.dataset.appearevent : options.appearevent;
 
-				} else if (event.type == "slidetransitionend" && options.appearevent == "autoanimate" ) {
-					slides.to.dataset.eventdone = true;
-					showAppearances(slides.to);
+				if (etype == appearevent || (etype == "slidetransitionend" && appearevent == "autoanimate")) {
+					slides.to.dataset.appearanceCanStart = true;
+				}
 
-				} else if (event.type == 'slidechanged' && document.body.dataset.exitoverview) {
-					if (slides.from && options.hideagain) {
-						hideAppearances(slides.to);
+				if (etype == "slidetransitionend") {
+					if (options.hideagain) {
+						delete slides.from?.dataset.appearanceCanStart;
+						let fromFragments = slides.from.querySelectorAll(`.fragment.visible`);
+						fromFragments.forEach(fragment => {
+							fragment.classList.remove('visible');
+						})
+					}
+				}
+				
+				if (event.type == 'slidechanged' && document.body.dataset.exitoverview) {
+					if (options.hideagain) {
+						delete slides.from?.dataset.appearanceCanStart;
 					}
-					showAppearances(slides.to);
-					slides.to.dataset.eventdone = true;
+					slides.to.dataset.appearanceCanStart = true;
 
 				} else if (event.type == 'overviewhidden' ) {
 
@@ -105,53 +179,38 @@ const Plugin = () => {
 					}, 500)
 		
 					if (event.currentSlide ) {
-
-						if (slides.from && options.hideagain) {
-							hideAppearances(event.previousSlide);
+						if (options.hideagain) {
+							delete slides.from?.dataset.appearanceCanStart;
 						}
-						showAppearances(slides.to);
-						event.currentSlide.dataset.eventdone = true;
+						slides.to.dataset.appearanceCanStart = true;
 					}
 				}
 			}
-			if (event.type == "slidechanged" && slides.from) {
-				slides.from.removeAttribute('data-eventdone');
-			} 
-
-			if (slides.from ) {
-				if (event.type == 'slidetransitionend' && options.hideagain) {
-					hideAppearances(slides.from);
-				}
-			}
-		};
-	
-	
-		const showHideFragment = function (event) {
-			if (event.type == "fragmentshowncomplete" || event.type == "fragmentshown") {
-				showAppearances(event.fragment);
-			} else {
-				hideAppearances(event.fragment);
-			}
-		};
+		}
 
-		deck.on( 'ready', event => { showHideSlide(event) } );
-		deck.on( 'slidechanged', event => { showHideSlide(event) } );
-		deck.on( 'slidetransitionend', event => { showHideSlide(event) } );
-		deck.on( 'autoanimate', event => { showHideSlide(event) } );
-		deck.on( 'overviewhidden', event => { showHideSlide(event) } );
-		deck.on( 'fragmentshown', event => { showHideFragment(event) });
-		deck.on( 'fragmenthidden', event => { showHideFragment(event) });
+		const eventnames = ['ready', 'slidechanged', 'slidetransitionend', 'autoanimate', 'overviewhidden'];
+		eventnames.forEach( (eventname) => deck.on( eventname, event => { showHideSlide(event) } ) )
 	};
 
 	const init = function (deck) {
 
+		let es5Filename = "appearance.js"
+
 		let defaultOptions = {
-			baseclass: 'animated',
-			visibleclass: 'in',
+			baseclass: 'animate__animated',
 			hideagain: true,
 			delay: 300,
 			debug: false,
 			appearevent: 'slidetransitionend',
+			autoappear: false,
+			autoelements: false,
+			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.0.0/animate.compat.css',
+			},
+			compatibility: false,
+			compatibilitybaseclass: 'animated'
 		};
 
 		const defaults = function (options, defaultOptions) {
@@ -165,8 +224,32 @@ const Plugin = () => {
 		let options = deck.getConfig().appearance || {};
 		defaults(options, defaultOptions);
 
-		appear(deck, options);
+		function pluginPath() {
+			let path;
+			let pluginScript = document.querySelector(`script[src$="${es5Filename}"]`);
+			if (pluginScript) {
+				path = pluginScript.getAttribute("src").slice(0, -1 * (es5Filename.length));
+			} else {
+				path = import.meta.url.slice(0, import.meta.url.lastIndexOf('/') + 1);
+			}
+			return path;
+		}
+
+		let AppearanceStylePath = options.csspath.appearance ? options.csspath.appearance : null || `${pluginPath()}appearance.css` || 'plugin/appearance/appearance.css'
+		let AnimateCSSPath = !options.compatibility ? options.animatecsspath.link : options.animatecsspath.compat;
 
+		if (options.debug) {
+			console.log(`Plugin path = ${pluginPath()}`);
+			console.log(`Compatibility mode: ${options.compatibility}`)
+			console.log(`Appearance CSS path = ${AppearanceStylePath}`);
+			console.log(`AnimateCSS CSS path = ${AnimateCSSPath}`);
+		}
+
+		loadStyle(AnimateCSSPath, 'stylesheet', function () {
+			loadStyle(AppearanceStylePath, 'stylesheet');
+		});
+
+		appear(deck, options);
 	};
 
 	return {