reveal.js-appearance 1.1.2 → 1.2.0

package/plugin/appearance/plugin-src.js

@@ -28,19 +28,62 @@ const Plugin = () => {
 		head.appendChild(style);
 	}
 
+	const isJSON = str => {
+		try {
+			return (JSON.parse(str) && !!str);
+		} catch (e) {
+			return false;
+		}
+	};
+
+	const isObj = (test) => {
+		while ( Object.prototype.toString.call(test) === '[object Object]')
+		if ((test = Object.getPrototypeOf(test)) === null)
+		return true
+		return false
+	  }
+
 	const selectionArray = function (container, selectors) {
 		let selections = container.querySelectorAll(selectors);
 		let selectionarray = Array.prototype.slice.call(selections);
 		return selectionarray;
 	};
 
+	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;
+			}
+		}
+		return isStack;
+	};
+
+	function copyDataAttributes(source, target, not) {
+		[...source.attributes].filter( attr => attr.nodeName.indexOf('data') > -1).forEach( attr => {
+			if ((not && attr.nodeName !== not) || !not) {
+				target.setAttribute(attr.nodeName, attr.nodeValue) 
+			}
+		})
+	}
+
+
 	const appear = function (deck, options) {
 
 		let baseclass = 'animate__animated';
+		let viewport = (deck.getRevealElement()).tagName == "BODY" ? document : deck.getRevealElement();
 		let appearanceSelector = options.compatibility ? `.${options.compatibilitybaseclass}` : `.${baseclass}`;
-		let fragmentSelector = ".fragment"
+		let fragmentSelector = ".fragment";
+
+		let speedClasses = ['slower', 'slow', 'fast', 'faster'];
+		speedClasses.push(...speedClasses.map(speed => `animate__${speed}`));
+
+		const generator = document.querySelector('[name=generator]');
+
+		const sections = selectionArray(viewport, "section");
+		const regularSections = sections.filter( section => !isStack(section) && section.dataset.visibility != "hidden");
 
-		const sections = deck.getRevealElement().querySelectorAll(`.slides section`);
 		const fragments = deck.getRevealElement().querySelectorAll(fragmentSelector);
 		let animatecss = '[class^="animate__"],[class*=" animate__"]'
 
@@ -48,17 +91,157 @@ const Plugin = () => {
 			if (options.debug) console.log(text);
 		}
 
+		const assignAutoClass = (section, str, kind) => {
+
+			let index = [...section.parentElement.children].filter(s => s.tagName=="SECTION").indexOf(section) + 1;
+
+			let warning = kind == 'global' ? `JSON Parse error, please try to correct the global "autoelements" option.` : `JSON Parse error, please try to correct the "data-autoappear" attribute on section ${index}`;
+
+			if (typeof str === "string") str = str.replace(/[“”]/g,'"').replace(/[‘’]/g,"'");
+	
+			let strJSON = isJSON(str) ? str : typeof str === "object" ? JSON.stringify(str, null, 2) : str.trim().replace(/'/g, '"').charAt(0) === "{" ? str.trim().replace(/'/g, '"') : `{${str.trim().replace(/'/g, '"')}}`;
+
+
+			if (!isJSON(strJSON)) {
+				console.log(warning);
+			} else {
+				let elementsToAnimate = JSON.parse(strJSON);
+	
+				for (const [element, assignables] of Object.entries(elementsToAnimate)) {
+	
+					let elementsInSection = section.querySelectorAll(element);
+
+					elementsInSection.forEach(elementInSection => {
+
+						if (!elementInSection.classList.contains(baseclass) || elementInSection.dataset["autoappear"]) {
+
+							elementInSection.dataset["autoappear"] = true;
+
+							let newClasses = [], newDelay = null, speedClass = false;
+	
+							if (Array.isArray(assignables)) {
+								newClasses = assignables[0].split(/[ ,]+/);
+								newDelay = assignables[1];
+							} else if (typeof assignables == "string"){
+								newClasses = assignables.split(/[ ,]+/);
+							}
+	
+							speedClasses.forEach(speed => {
+								if (elementInSection.classList.contains(speed)) {
+									speedClass = speed;
+								}
+							})
+	
+							let classesToRemove = [];
+							elementInSection.classList.forEach(currentClass => {
+								if (String(currentClass).includes("animate__")) {
+									classesToRemove.push(currentClass);
+								}
+							})
+							classesToRemove.forEach(currentClass => {elementInSection.classList.remove(currentClass)});
+	
+							newClasses.forEach(newClass => {
+								if (speedClasses.includes(newClass)) {
+									// There is a speed class from JSON to be assigned
+									if (speedClass) { speedClass = newClass }
+								}
+							});
+	
+							newClasses.forEach(newClass => {
+								elementInSection.classList.add(newClass);
+							});
+
+							if (speedClass) {
+								elementInSection.classList.add(speedClass);
+							}
+	
+
+
+							
+							if (newDelay) {
+								elementInSection.dataset.delay = newDelay;
+							}
+	
+							elementInSection.classList.add(baseclass);
+
+						}
+
+
+					});
+				}
+			}
+		};
+
 		const findAppearancesIn = function (container, includeClass, excludeClass) {
 			if (!isStack(container)) {
 				let appearances = selectionArray(container, `:scope ${includeClass}`);
+
+				appearances.forEach(appearance => {
+
+					let convertListItem = (appearance) => {
+						let from = appearance, to = appearance.parentNode;
+						if (!to) return
+						for (let sibling of to.children) {
+							if (sibling !== appearance) { if (sibling.dataset.appearParent) return }
+						}
+						to.classList = from.classList;
+						copyDataAttributes(from, to, "data-appear-parent");
+						to.innerHTML = from.innerHTML;
+					}
+
+					// Conversion of list items with Appearance classes to the parent, needs manual attribute
+					// Relates to Quarto wrapping list content in a span.
+					if (appearance.hasAttribute("data-appear-parent")) {
+						convertListItem(appearance);
+					}
+
+					// Automatic conversion of list items which directly contain spans.
+					// Relates to Quarto wrapping list content in a span.
+					if (options.appearparents) {
+						if (appearance.parentNode && appearance.parentNode.tagName) {
+							if (appearance.tagName == "SPAN" && appearance.parentNode.tagName == "LI") {
+								let spanLength = String(appearance.outerHTML).length;
+								let liContentLength = String(appearance.parentNode.innerHTML).length;
+								if (spanLength == liContentLength) {
+								  convertListItem(appearance);
+								}
+							}
+						}
+					}
+
+
+				});
+
+				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 ( !(excludes.indexOf(appearance) > -1 )  ) {
 						if ((index == 0 && appearance.dataset.delay) || index !=0) {
-							let elementDelay = appearance.dataset.delay ? (parseInt(appearance.dataset.delay)) : options.delay; 
+
+							let elementDelay = options.delay; 
+							if (appearance.dataset && appearance.dataset.delay) {
+								elementDelay = parseInt(appearance.dataset.delay);
+							}
+
 							delay = delay + elementDelay;
+
+							// Allow fragments to be Appearance items
+							if (appearance.classList.contains("fragment")) {
+								delay = 0;
+								if (appearance.querySelectorAll(`.${baseclass}`)) {
+									let firstNestedAppearance = appearance.querySelectorAll(`.${baseclass}`)[0];
+
+									if (firstNestedAppearance) {
+										let elementDelay = options.delay; 
+										if (firstNestedAppearance.dataset && firstNestedAppearance.dataset.delay) {
+											elementDelay = parseInt(firstNestedAppearance.dataset.delay);
+										}
+										firstNestedAppearance.dataset.delay = elementDelay
+									}
+								}
+							}
 							appearance.style.setProperty('animation-delay', delay + "ms");
 						}
 					}
@@ -68,46 +251,46 @@ const Plugin = () => {
 
 		const autoAdd = function () {
 
-			if (options.autoelements) {
+			regularSections.forEach(section => {
 
-				for (const [autoelement, autoanimation] of Object.entries(options.autoelements)) {
+				if (section.hasAttribute("data-autoappear")) {
 
-					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);
+					let sectDataAppear = section.dataset.autoappear;
+
+					if (sectDataAppear == "auto" || sectDataAppear == "" || sectDataAppear.length < 1 || sectDataAppear == "true") {
+						// This section should get the global autoappear classes on its objects
+						if (options.autoelements) {
+							if (!options.autoelements) {
+								return console.log(`Please add some elements in the option "autoelements"`);
 							}
-						});
+							assignAutoClass(section, options.autoelements, 'global')
+						}
+					} else if (sectDataAppear.length > 0) {
+						// This section should get the local data-autoappear classes on its objects
+						assignAutoClass(section, sectDataAppear, 'local');
+						//section.removeAttribute("data-autoappear");
 					}
-				}
-			} else if (options.autoappear) {
-				console.log(`Please set an "autoelements" object.`);
-			}
-		}
+				} else {
 
-		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;
+					if (options.autoappear) {
+						if (!options.autoelements) {
+							return console.log(`Please add some elements in the option "autoelements"`);
+						}
+						// This section should get the global autoappear classes on its objects
+						assignAutoClass(section, options.autoelements, 'global')
+					}
 				}
-			}
-			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 => {
@@ -156,11 +339,17 @@ const Plugin = () => {
 
 				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 (slides.from) {
+							if (slides.from.dataset.appearanceCanStart) {
+								delete slides.from.dataset.appearanceCanStart;
+							}
+							let fromFragments = slides.from.querySelectorAll(`.fragment.visible`);
+							if (fromFragments) {
+								fromFragments.forEach(fragment => {
+									fragment.classList.remove('visible');
+								})
+							}
+						}
 					}
 				}
 				
@@ -204,10 +393,11 @@ const Plugin = () => {
 			appearevent: 'slidetransitionend',
 			autoappear: false,
 			autoelements: false,
+			appearparents: 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',
+				compat : 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.css',
 			},
 			compatibility: false,
 			compatibilitybaseclass: 'animated'