reveal.js-appearance 1.2.0 → 1.3.0

package/plugin/appearance/appearance.js

@@ -1,436 +1,688 @@
 
 /*****************************************************************
- * @author: Martijn De Jongh (Martino), martijn.de.jongh@gmail.com
- * https://github.com/Martinomagnifico
  *
- * Appearance.js for Reveal.js 
- * Version 1.2.0
+ * Appearance for Reveal.js 
+ * Version 1.3.0
  * 
+ * @author: Martijn De Jongh (Martino), martijn.de.jongh@gmail.com
+ * https://github.com/martinomagnifico
+ *
  * @license 
  * MIT licensed
+ * 
+ * Copyright (C) 2023 Martijn De Jongh (Martino)
  *
- * Thanks to:
- *  - Hakim El Hattab, Reveal.js 
- *  - Daniel Eden, Animate.css
  ******************************************************************/
 
-
-
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 	typeof define === 'function' && define.amd ? define(factory) :
 	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Appearance = factory());
 })(this, (function () { 'use strict';
 
-	const Plugin = () => {
-	  // Scope support polyfill
+	/**
+	 * Check if a given string is valid JSON.
+	 * @param {string} str - The string to be checked.
+	 * @returns {boolean} `true` if the string is valid JSON, otherwise `false`.
+	 */
+	const isJSON = str => {
 	  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 JSON.parse(str) && !!str;
+	  } catch (e) {
+	    return false;
+	  }
+	};
 
-	          return t.apply(this, arguments);
-	        };
-	      }
-	    }(Element.prototype);
+	/**
+	 * Check if an element has child nodes that are `SECTION` elements.
+	 * @param {Object} param0 - Object with childNodes property.
+	 * @param {NodeListOf<ChildNode>} param0.childNodes - List of child nodes of the element.
+	 * @returns {boolean} `true` if the element contains `SECTION` child nodes, otherwise `false`.
+	 */
+	const isStack = _ref => {
+	  let {
+	    childNodes
+	  } = _ref;
+	  let isStack = false;
+	  for (let i = 0; i < childNodes.length; i++) {
+	    if (childNodes[i].tagName == "SECTION") {
+	      isStack = true;
+	      break;
+	    }
 	  }
+	  return isStack;
+	};
 
-	  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;
-	      }
-	    };
+	/**
+	 * Copy data attributes from a source element to a target element with an optional exception.
+	 * @param {Object} param0 - Object with attributes property.
+	 * @param {NamedNodeMap} param0.attributes - Map of attributes of the source element.
+	 * @param {Element} target - Target element to copy attributes to.
+	 * @param {string} [not] - Optional attribute name to exclude from copying.
+	 */
+	const copyDataAttributes = (_ref2, target, not) => {
+	  let {
+	    attributes
+	  } = _ref2;
+	  [...attributes].filter(_ref3 => {
+	    let {
+	      nodeName
+	    } = _ref3;
+	    return nodeName.includes('data');
+	  }).forEach(_ref4 => {
+	    let {
+	      nodeName,
+	      nodeValue
+	    } = _ref4;
+	    if (not && nodeName !== not || !not) {
+	      target.setAttribute(nodeName, nodeValue);
+	    }
+	  });
+	};
 
-	    style.onload = finish;
+	/**
+	 * Check if the given item is an object and not an array.
+	 * @param {*} item - The item to be checked.
+	 * @returns {boolean} `true` if the item is an object and not an array, otherwise `false`.
+	 */
+	const isObject = item => {
+	  return item && typeof item === 'object' && !Array.isArray(item);
+	};
 
-	    style.onreadystatechange = function () {
-	      if (this.readyState === 'loaded') {
-	        finish();
+	/**
+	 * Deep merge multiple objects into a target object.
+	 * @param {Object} target - Target object to merge values into.
+	 * @param {...Object} sources - Source objects to merge from.
+	 * @returns {Object} The merged object.
+	 */
+	const mergeDeep = function (target) {
+	  for (var _len = arguments.length, sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+	    sources[_key - 1] = arguments[_key];
+	  }
+	  if (!sources.length) return target;
+	  const source = sources.shift();
+	  if (isObject(target) && isObject(source)) {
+	    for (const key in source) {
+	      if (isObject(source[key])) {
+	        if (!target[key]) Object.assign(target, {
+	          [key]: {}
+	        });
+	        mergeDeep(target[key], source[key]);
+	      } else {
+	        Object.assign(target, {
+	          [key]: source[key]
+	        });
 	      }
-	    };
+	    }
+	  }
+	  return mergeDeep(target, ...sources);
+	};
 
-	    head.appendChild(style);
-	  };
+	/**
+	 * Resolves the given Promise immediately using setTimeout.
+	 * @param {Function} resolve - The resolve function of a Promise.
+	 * @returns {number} The ID value of the timer that is set.
+	 */
+	const doneLoading = resolve => {
+	  return setTimeout(resolve, 0);
+	};
 
-	  const isJSON = str => {
-	    try {
-	      return JSON.parse(str) && !!str;
-	    } catch (e) {
-	      return false;
+	/**
+	 * Converts a JavaScript object or a JSON-formatted string to a JSON string.
+	 *
+	 * @param {Object|string} str - The input string or object to be converted to a JSON string.
+	 * @returns {string} The JSON string.
+	 */
+	const toJSONString = str => {
+	  let JSONString = '';
+	  if (typeof str === "string") str = str.replace(/[“”]/g, '"').replace(/[‘’]/g, "'");
+	  if (isJSON(str)) {
+	    JSONString = str;
+	  } else {
+	    if (typeof str === "object") {
+	      JSONString = JSON.stringify(str, null, 2);
+	    } else {
+	      JSONString = str.trim().replace(/'/g, '"').charAt(0) === "{" ? str.trim().replace(/'/g, '"') : `{${str.trim().replace(/'/g, '"')}}`;
 	    }
-	  };
+	  }
+	  return JSONString;
+	};
 
-	  const selectionArray = function (container, selectors) {
-	    let selections = container.querySelectorAll(selectors);
-	    let selectionarray = Array.prototype.slice.call(selections);
-	    return selectionarray;
+	/**
+	 * Dynamically loads a stylesheet from the specified URL and calls a callback function when it's loaded.
+	 *
+	 * @param {string} url - The URL of the stylesheet to load.
+	 * @param {Function} callback - A callback function to be called when the stylesheet is loaded.
+	 */
+	const loadStyle = (url, callback) => {
+	  const head = document.querySelector('head');
+	  const style = document.createElement('link');
+	  style.rel = 'stylesheet';
+	  style.href = url;
+	  style.onload = () => {
+	    if (typeof callback === 'function') {
+	      callback.call();
+	      callback = null;
+	    }
 	  };
-
-	  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;
-	      }
+	  style.onreadystatechange = () => {
+	    if (style.readyState === 'loaded') {
+	      style.onload();
 	    }
-
-	    return isStack;
 	  };
+	  head.appendChild(style);
+	};
 
-	  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);
-	      }
-	    });
+	/**
+	 * Retrieves the path of a JavaScript file based on its filename.
+	 *
+	 * @param {string} fileName - The filename of the script.
+	 * @returns {string} The path to the plugin's location.
+	 */
+	const pluginPath = fileName => {
+	  let path;
+	  let pluginScript = document.querySelector(`script[src$="${fileName}"]`);
+	  if (pluginScript) {
+	    path = pluginScript.getAttribute("src").slice(0, -1 * fileName.length);
+	  } else {
+	    path = (typeof document === 'undefined' && typeof location === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : typeof document === 'undefined' ? location.href : (document.currentScript && document.currentScript.src || new URL('appearance.js', document.baseURI).href)).slice(0, (typeof document === 'undefined' && typeof location === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : typeof document === 'undefined' ? location.href : (document.currentScript && document.currentScript.src || new URL('appearance.js', document.baseURI).href)).lastIndexOf('/') + 1);
 	  }
+	  return path;
+	};
+	const debugLog = (options, text) => {
+	  if (options.debug) console.log(text);
+	};
 
-	  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 speedClasses = ['slower', 'slow', 'fast', 'faster'];
-	    speedClasses.push(...speedClasses.map(speed => `animate__${speed}`));
-	    document.querySelector('[name=generator]');
-	    const sections = selectionArray(viewport, "section");
-	    const regularSections = sections.filter(section => !isStack(section) && section.dataset.visibility != "hidden");
-	    const fragments = deck.getRevealElement().querySelectorAll(fragmentSelector);
-	    let animatecss = '[class^="animate__"],[class*=" animate__"]';
-
-	    const debugLog = function (text) {
-	      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;
-	              }
+	/**
+	 * Retrieves and loads CSS stylesheets based on the provided options and ES5 filename.
+	 *
+	 * @param {Object} options - Configuration options for loading CSS.
+	 * @param {string} fileName - The filename of the script.
+	 */
+
+	const getAndLoadCSS = (options, fileName) => {
+	  let thePath = pluginPath(fileName);
+	  let pluginBaseName = fileName.replace(/\.[^/.]+$/, "");
+	  let AppearanceStylePath = options.csspath.appearance ? options.csspath.appearance : `${thePath}${pluginBaseName}.css` || `plugin/${pluginBaseName}/${pluginBaseName}.css`;
+	  let AnimateCSSPath = !options.compatibility ? options.animatecsspath.link : options.animatecsspath.compat;
+	  if (options.debug) {
+	    console.log(`Paths:`);
+	    console.log(`  - Plugin path = ${thePath}`);
+	    console.log(`  - Appearance CSS path = ${AppearanceStylePath}`);
+	    console.log(`  - AnimateCSS CSS path = ${AnimateCSSPath}`);
+	  }
+	  loadStyle(AnimateCSSPath, function () {
+	    loadStyle(AppearanceStylePath);
+	  });
+	};
 
-	              elementInSection.classList.add(baseclass);
+	/**
+	 * Adds automatic animations to elements within a section based on specified criteria.
+	 *
+	 * This function examines the provided section for attributes and options to determine
+	 * which classes should be added to its elements to enable automatic animations.
+	 *
+	 * @param {HTMLElement} section - The section element to which automatic animations will be applied.
+	 * @param {Object} options - The existing user options object
+	 * @param {Object} vars - The existing vars object
+	 * @returns {undefined}
+	 */
+	const addAutoAnimation = (section, options, vars) => {
+	  let sectionAutoSelectors = null;
+	  if (section.hasAttribute("data-autoappear")) {
+	    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
+	      sectionAutoSelectors = options.autoelements ? options.autoelements : null;
+	    } else {
+	      // This section should get the local autoappear classes on its objects
+	      sectionAutoSelectors = sectDataAppear;
+	    }
+	  } else if (options.autoappear && options.autoelements) {
+	    // This section should get the global autoappear classes on its objects
+	    sectionAutoSelectors = options.autoelements;
+	  }
+	  if (sectionAutoSelectors) {
+	    let elementsToAnimate = JSON.parse(toJSONString(sectionAutoSelectors));
+	    Object.entries(elementsToAnimate).forEach(_ref => {
+	      let [selector, assignables] = _ref;
+	      // Exclude the elements from vars.appearances
+	      let elements = Array.from(section.querySelectorAll(selector)).filter(element => !vars.appearances.includes(element));
+	      if (elements.length) {
+	        elements.forEach(element => {
+	          vars.appearances.push(element);
+	          let newClasses = [],
+	            newDelay = null,
+	            speedClass = false,
+	            elementSplit = null,
+	            containerDelay = null;
+	          if (Array.isArray(assignables)) {
+	            newClasses = assignables[0].split(/[ ,]+/);
+	            newDelay = assignables[1];
+	          } else if (typeof assignables == "string") {
+	            newClasses = assignables.split(/[ ,]+/);
+	          } else if (assignables.constructor === Object) {
+	            if (assignables.class || assignables.animation) {
+	              let animationClass = assignables.animation ? assignables.animation : assignables.class;
+	              newClasses = animationClass.split(/[ ,]+/);
 	            }
-	          });
-	        }
-	      }
-	    };
-
-	    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;
+	            if (assignables.speed) {
+	              speedClass = String(assignables.speed);
+	              if (!speedClass.includes("animate__")) {
+	                speedClass = `animate__${speedClass}`;
 	              }
 	            }
-
-	            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);
-	                }
-	              }
+	            if (assignables.delay) {
+	              newDelay = String(assignables.delay);
 	            }
-	          }
-	        });
-	        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 = 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");
+	            if (assignables.split) {
+	              elementSplit = String(assignables.split);
 	            }
+	            if (assignables["container-delay"]) {
+	              containerDelay = String(assignables["container-delay"]);
+	            }
+	          }
+	          element.classList.add(...newClasses);
+	          if (speedClass) {
+	            element.classList.add(speedClass);
+	          }
+	          if (newDelay) {
+	            element.dataset.delay = newDelay;
+	          }
+	          if (elementSplit) {
+	            element.dataset.split = elementSplit;
+	          }
+	          if (containerDelay) {
+	            element.dataset.containerDelay = containerDelay;
 	          }
 	        });
 	      }
-	    };
-
-	    const autoAdd = function () {
-	      regularSections.forEach(section => {
-	        if (section.hasAttribute("data-autoappear")) {
-	          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) {
-	            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
+	    });
+	  }
+	};
 
+	/**
+	 * Hoist a list item's appearance to its parent element's appearance.
+	 *
+	 * @param {HTMLElement} from - The list item element.
+	 * @returns {undefined}
+	 */
+	const hoistAppearance = (from, baseclass) => {
+	  let to = from.parentNode;
+	  if (!to) return;
+	  for (const sibling of to.children) {
+	    if (sibling !== from && sibling.dataset.appearParent) return;
+	  }
+	  to.classList = from.classList;
+	  copyDataAttributes(from, to, "data-appear-parent");
+	  to.innerHTML = from.innerHTML;
+	  to.classList.add(baseclass);
+	};
 
-	            assignAutoClass(section, options.autoelements, 'global');
-	          }
+	/**
+	 * Fix list items that were changed by Quarto.
+	 *
+	 * This function is designed for use with Quarto and handles the conversion of list items
+	 * with Appearance classes to their parent elements when a manual attribute is present.
+	 * It also provides automatic conversion for list items that directly contain spans, which
+	 * is related to Quarto's wrapping of list content in a span.
+	 *
+	 * @param {HTMLElement} appearance - The list item element whose appearance will be converted.
+	 * @param {Object} options - An options object that controls the conversion behavior.
+	 * @param {boolean} options.appearparents - If `true`, automatic conversion of list items with spans is enabled.
+	 * @returns {undefined}
+	 */
+	const fixListItem = (appearance, options, names) => {
+	  let baseclass = names.baseclass;
+	  if (appearance.hasAttribute("data-appear-parent")) {
+	    hoistAppearance(appearance, baseclass);
+	  }
+	  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) {
+	          hoistAppearance(appearance);
 	        }
-	      });
-	    };
-
-	    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);
-	    });
-	    fragments.forEach(fragment => {
-	      findAppearancesIn(fragment, appearanceSelector, fragmentSelector);
-	    });
+	    }
+	  }
+	};
 
-	    const fromTo = function (event) {
-	      let slides = {};
-	      slides.from = event.fromSlide ? event.fromSlide : event.previousSlide ? event.previousSlide : null;
-	      slides.to = event.toSlide ? event.toSlide : event.currentSlide ? event.currentSlide : null;
-	      return slides;
-	    };
+	/**
+	 * Adds a base class to an HTML element if it doesn't already have it.
+	 *
+	 * This function checks if the specified HTML element has the specified base class,
+	 * and if not, it adds the base class to the element's class list.
+	 *
+	 * @param {HTMLElement} appearance - The HTML element to which the base class should be added.
+	 * @param {Object} names - The existing 'names' object
+	 * @returns {undefined}
+	 */
+
+	const addBaseClass = (appearance, names) => {
+	  if (!appearance.classList.contains(names.baseclass)) {
+	    appearance.classList.add(names.baseclass);
+	  }
+	  if (appearance.classList.contains(names.fragmentClass)) {
+	    appearance.classList.add('custom');
+	  }
+	};
 
-	    const showHideSlide = function (event) {
-	      var _slides$to;
+	const addDelay = (appearanceArray, options, names) => {
+	  let delay = 0;
+	  appearanceArray.forEach((appearance, index) => {
+	    if (index == 0 && appearance.dataset.delay || index != 0) {
+	      let elementDelay = options.delay;
+	      if (appearance.dataset && appearance.dataset.delay) {
+	        elementDelay = parseInt(appearance.dataset.delay);
+	      }
+	      delay = delay + elementDelay;
+	      appearance.style.setProperty('animation-delay', delay + "ms");
+	      appearance.removeAttribute('data-delay');
+	    }
+	  });
+	};
 
-	      let etype = event.type;
-	      let slides = fromTo(event);
-	      debugLog(etype);
+	/**
+	 * Selects elements with a specified class that are not nested inside an element with another specified class.
+	 * @param {string} targetClass - The class name to select elements.
+	 * @param {string} excludeClass - The class name to exclude elements nested inside it.
+	 * @param {Element} el - The element to find the target elements in.
+	 * @returns {Element[]} - Array of selected elements.
+	 */
+	const elemsNotInClass = (targetClass, excludeClass, el) => Array.from(el.querySelectorAll(`.${targetClass}`)).filter(s => !s.closest(`.${excludeClass}`));
+
+	/**
+	 * Selects elements with a specified class that are nested inside an element with another specified class.
+	 * @param {string} targetClass - The class name to select elements.
+	 * @param {string} parentClass - The class name of the parent to find elements in.
+	 * @param {Element} el - The element to find the target elements in.
+	 * @returns {Element[]} - Array of selected elements.
+	 */
+	const elemsInClass = (targetClass, parentClass, el) => Array.from(el.querySelectorAll(`.${targetClass}`)).filter(s => s.closest(`.${parentClass}`) === el);
+
+	/**
+	 * Extracts groups of elements with a specified class from the provided section element.
+	 * Groups are formed based on nesting inside elements with another specified class.
+	 * @param {Element} section - The section to extract data from.
+	 * @returns {Element[][]} - Nested arrays of selected elements.
+	 */
+
+	/**
+	 * Extracts groups of elements with a specified class from the provided section element.
+	 * Groups are formed based on nesting inside elements with another specified class.
+	 * @param {Element} section - The section to extract data from.
+	 * @param {string} targetClass - The class name to select elements.
+	 * @param {string} groupClass - The class name of the parent to find elements in.
+	 * @returns {Element[][]} - Nested arrays of selected elements.
+	 */
+	const getAppearanceArrays = (section, targetClass, groupClass) => {
+	  const result = [elemsNotInClass(targetClass, groupClass, section), ...Array.from(section.querySelectorAll(`.${groupClass}`)).map(frag => elemsInClass(targetClass, groupClass, frag))];
+	  if (result.some(group => group.length > 0)) {
+	    return result;
+	  } else {
+	    return false;
+	  }
+	};
 
-	      if (((_slides$to = slides.to) === null || _slides$to === void 0 ? void 0 : _slides$to.dataset.appearevent) == "auto") {
-	        slides.to.dataset.appearevent = "autoanimate";
+	const convertToSpans = (parent, kind) => {
+	  let splitElements = false;
+	  let joinChar = ' ';
+	  if (kind == "words") {
+	    splitElements = parent.textContent.trim().split(/\s+/);
+	  } else if (kind == "letters") {
+	    splitElements = parent.textContent.trim().split('');
+	    joinChar = '';
+	  }
+	  if (splitElements) {
+	    const parentAnimateClasses = Array.from(parent.classList).filter(className => className.startsWith('animate__'));
+	    const newHtml = splitElements.map((element, index) => {
+	      const span = document.createElement('span');
+	      span.textContent = element;
+	      if (element == " ") {
+	        span.textContent = "\u00A0";
 	      }
-
-	      if (options.appearevent == "auto") {
-	        options.appearevent = "autoanimate";
+	      if (parent.dataset.delay && index !== 0) {
+	        span.dataset.delay = parent.dataset.delay;
 	      }
-
-	      if (etype == "ready") {
-	        slides.to.dataset.appearanceCanStart = true;
+	      if (parent.dataset.containerDelay && index === 0) {
+	        span.dataset.delay = parent.dataset.containerDelay;
 	      }
+	      parent.classList.forEach(className => className.startsWith('animate__') && span.classList.add(className));
+	      return span.outerHTML;
+	    }).join(joinChar);
+	    parentAnimateClasses.forEach(className => parent.classList.remove(className));
+	    parent.removeAttribute('data-delay');
+	    parent.removeAttribute('data-split');
+	    parent.removeAttribute('data-container-delay');
+	    parent.innerHTML = newHtml;
+	  }
+	};
 
-	      if (slides.to) {
-	        let appearevent = slides.to.dataset.appearevent ? slides.to.dataset.appearevent : options.appearevent;
-
-	        if (etype == appearevent || etype == "slidetransitionend" && appearevent == "autoanimate") {
-	          slides.to.dataset.appearanceCanStart = true;
-	        }
-
-	        if (etype == "slidetransitionend") {
-	          if (options.hideagain) {
-	            if (slides.from) {
-	              if (slides.from.dataset.appearanceCanStart) {
-	                delete slides.from.dataset.appearanceCanStart;
-	              }
-
-	              let fromFragments = slides.from.querySelectorAll(`.fragment.visible`);
+	/**
+	 * Derives slide from and to from the event object.
+	 *
+	 * @param {Object} event - The event object containing slide transition details.
+	 * @returns {Object} - An object containing references to the "from" and "to" slides.
+	 */
+	const fromTo = event => {
+	  let slides = {};
+	  slides.from = event.fromSlide || event.previousSlide || null;
+	  slides.to = event.toSlide || event.currentSlide || null;
+	  return slides;
+	};
 
-	              if (fromFragments) {
-	                fromFragments.forEach(fragment => {
-	                  fragment.classList.remove('visible');
-	                });
-	              }
-	            }
-	          }
-	        }
+	/**
+	 * A function that determines the appearance event for a given slide.
+	 *
+	 * This function checks the `data-appearevent` attribute of the slide and the `options.appearevent` parameter.
+	 * If `data-appearevent` is set to "auto", it is converted to "autoanimate". If `options.appearevent` is "auto", it is also converted to "autoanimate".
+	 * The function returns the appearance event, prioritizing `data-appearevent` over `options.appearevent`.
+	 *
+	 * @param {HTMLElement} toSlide - The slide for which the appearance event is determined.
+	 * @param {Object} options - An object containing options for the appearance event.
+	 * @param {string} options.appearevent - The appearance event option provided in the `options` object.
+	 *
+	 * @returns {string} - The determined appearance event for the slide, either from `data-appearevent` or `options.appearevent`.
+	 */
+	const slideAppearevent = (toSlide, options) => {
+	  if (toSlide.dataset.appearevent && toSlide.dataset.appearevent === "auto") {
+	    toSlide.dataset.appearevent = "autoanimate";
+	  }
+	  if (options.appearevent == "auto") {
+	    options.appearevent = "autoanimate";
+	  }
+	  return toSlide.dataset.appearevent ? toSlide.dataset.appearevent : options.appearevent;
+	};
 
-	        if (event.type == 'slidechanged' && document.body.dataset.exitoverview) {
-	          if (options.hideagain) {
-	            var _slides$from;
+	/**
+	 * Remove the 'data-appearance-can-start' attribute from the 'from' slide if the 'hideagain' option is enabled.
+	 *
+	 * @param {HTMLElement} slides - The container element for the slides.
+	 * @param {Object} options - An object containing configuration options.
+	 * @param {boolean} options.hideagain - A flag indicating whether to remove the attribute when 'hideagain' is true.
+	 */
+	const removeStartAttribute = (slides, options) => {
+	  if (options.hideagain) {
+	    if (slides.from && slides.from.dataset.appearanceCanStart) {
+	      slides.from.removeAttribute('data-appearance-can-start');
+	    }
+	  }
+	};
 
-	            (_slides$from = slides.from) === null || _slides$from === void 0 ? true : delete _slides$from.dataset.appearanceCanStart;
-	          }
+	/**
+	 * Turn off slide appearances when transitioning from one slide to another if the 'hideagain' option is enabled.
+	 *
+	 * @param {HTMLElement} slides - The container element for the slides.
+	 * @param {Object} options - An object containing configuration options.
+	 * @param {string} names.animatecss - The CSS selector for animated elements.
+	 */
+	const turnOffSlideAppearances = (slides, options, names) => {
+	  if (options.hideagain) {
+	    let fromAppearances = slides.from.querySelectorAll(names.animatecss);
+	    fromAppearances.forEach(appearance => {
+	      appearance.classList.remove('animationended');
+	    });
+	    // Remove visible class from fragments when moving away from that slide
+	    let fromFragments = slides.from.querySelectorAll(`.fragment.visible`);
+	    if (fromFragments) {
+	      fromFragments.forEach(fragment => {
+	        fragment.classList.remove('visible');
+	      });
+	    }
+	  }
+	};
 
-	          slides.to.dataset.appearanceCanStart = true;
-	        } else if (event.type == 'overviewhidden') {
-	          document.body.dataset.exitoverview = true;
-	          setTimeout(function () {
-	            document.body.removeAttribute('data-exitoverview');
-	          }, 500);
+	/**
+	 * Handles the showing and hiding of slides based on the provided event and options.
+	 *
+	 * @param {Object} event - The event object containing slide transition details.
+	 * @param {Object} options - An object containing configurations for slide appearance management.
+	 */
+	const showHideSlide = (event, options, names, vars) => {
+	  let view = vars.deck.getConfig().view;
+	  let etype = event.type;
+	  let slides = fromTo(event);
+	  if (slides.to) {
+	    if (etype == "ready") {
+	      slides.to.dataset.appearanceCanStart = true;
+	    }
+	    let appearevent = slideAppearevent(slides.to, options);
+	    if (etype == appearevent || etype == "slidetransitionend" && appearevent == "autoanimate") {
+	      slides.to.dataset.appearanceCanStart = true;
+	    }
 
-	          if (event.currentSlide) {
-	            if (options.hideagain) {
-	              var _slides$from2;
+	    // Add experimental Reader mode compatibility, does not have a slidetransitionend event yet
+	    if (view == "scroll" && etype == 'slidechanged') {
+	      removeStartAttribute(slides, options);
+	      turnOffSlideAppearances(slides, options, names);
 
-	              (_slides$from2 = slides.from) === null || _slides$from2 === void 0 ? true : delete _slides$from2.dataset.appearanceCanStart;
-	            }
+	      // Add delay to allow for scroll animation to finish
+	      setTimeout(() => {
+	        slides.to.dataset.appearanceCanStart = true;
+	      }, options.delay);
+	    }
+	    if (etype == "slidetransitionend") {
+	      removeStartAttribute(slides, options);
+	      turnOffSlideAppearances(slides, options, names);
+	    }
+	    if (etype == 'slidechanged' && document.body.dataset.exitoverview) {
+	      removeStartAttribute(slides, options);
+	      slides.to.dataset.appearanceCanStart = true;
+	    } else if (etype == 'overviewhidden') {
+	      document.body.dataset.exitoverview = true;
+	      setTimeout(() => {
+	        document.body.removeAttribute('data-exitoverview');
+	      }, 500);
+	      if (event.currentSlide) {
+	        removeStartAttribute(slides, options);
+	        slides.to.dataset.appearanceCanStart = true;
+	      }
+	    }
+	  }
+	};
 
-	            slides.to.dataset.appearanceCanStart = true;
-	          }
-	        }
+	const Plugin = () => {
+	  const vars = {};
+	  vars.names = {};
+	  let options = {};
+
+	  /**
+	  * Prepare the plugin to find Appearance elements
+	  * @param {Object} vars - The variables to be prepared.
+	  * @param {Object} names - The names to be prepared.
+	  * @param {Function} resolve - The callback function to be called when preparation is complete.
+	  * @throws {Error} Throws an error if the 'options' object is not defined.
+	  */
+	  const prepare = (options, vars, resolve) => {
+	    debugLog(options, "-------------   Preloading   -------------");
+	    let names = vars.names;
+	    getAndLoadCSS(options, names.es5Filename);
+	    if (options.compatibility) {
+	      names.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';
+	      names.baseclass = options.compatibilitybaseclass;
+	    }
+	    vars.appearances = Array.from(vars.slides.querySelectorAll(names.animatecss));
+
+	    // Go through each section to see if there are any (auto) selectors that need animation classes
+	    vars.regularSections.forEach(theSection => addAutoAnimation(theSection, options, vars));
+	    vars.appearances.forEach((theAppearance, index) => {
+	      // Fix any list item where the Appearance classes were moved to the span (Quarto does this)
+	      fixListItem(theAppearance, options, names);
+
+	      // Go through each appearance element and add the baseclass if it doesn't have it
+	      addBaseClass(theAppearance, names);
+	      if (theAppearance.hasAttribute('data-split')) {
+	        convertToSpans(theAppearance, theAppearance.dataset.split);
 	      }
-	    };
+	    });
+	    vars.regularSections.forEach((theSection, index) => {
+	      // Get all the Appearances in the section as separate arrays per delay loop
+	      let appearanceArrays = getAppearanceArrays(theSection, names.baseclass, names.fragmentClass);
+	      if (appearanceArrays) {
+	        appearanceArrays.forEach(appearanceArray => {
+	          // Add the delays to each appearance in the array
+	          addDelay(appearanceArray, options);
+	        });
+	      }
+	    });
+	    doneLoading(resolve);
+	  };
 
-	    const eventnames = ['ready', 'slidechanged', 'slidetransitionend', 'autoanimate', 'overviewhidden'];
-	    eventnames.forEach(eventname => deck.on(eventname, event => {
-	      showHideSlide(event);
+	  /**
+	  * The main function of the plugin
+	  * @param {object} deck - The deck object
+	  * @param {object} options - The options object
+	  * @param {string} es5Filename - The name of the file that will be used
+	  */
+	  const Appear = function (deck, options, es5Filename) {
+	    let names = vars.names;
+
+	    // Set up names
+	    names.baseclass = options.baseclass;
+	    names.compatibilitybaseclass = options.compatibilitybaseclass;
+	    names.fragmentSelector = ".fragment";
+	    names.fragmentClass = "fragment";
+	    names.speedClasses = ['slower', 'slow', 'fast', 'faster'];
+	    names.speedClasses.push(...names.speedClasses.map(speed => `animate__${speed}`));
+	    names.animatecss = '[class^="animate__"],[class*=" animate__"]';
+	    names.es5Filename = es5Filename;
+	    names.eventnames = ['ready', 'slidechanged', 'slidetransitionend', 'autoanimate', 'overviewhidden', 'scrolle'];
+
+	    // Set up variables
+	    vars.deck = deck;
+	    vars.dom = deck.getRevealElement();
+	    vars.viewport = deck.getViewportElement();
+	    vars.slides = deck.getSlidesElement();
+	    vars.sections = vars.slides.querySelectorAll('section');
+	    vars.fragments = vars.slides.querySelectorAll(names.fragmentSelector);
+	    vars.regularSections = Array.from(vars.sections).filter(section => !isStack(section));
+	    if (/receiver/i.test(window.location.search)) vars.viewport.classList.add('sv');
+	    names.eventnames.forEach(eventname => deck.on(eventname, event => {
+	      showHideSlide(event, options, names, vars);
 	    }));
+	    vars.viewport.addEventListener("animationend", event => {
+	      event.target.classList.add('animationended');
+	    });
+	    vars.viewport.addEventListener("fragmenthidden", event => {
+	      event.fragment.classList.remove('animationended');
+	      event.fragment.querySelectorAll('.animationended').forEach(el => {
+	        el.classList.remove('animationended');
+	      });
+	    });
+	    return new Promise(resolve => {
+	      prepare(options, vars, resolve);
+	      debugLog(options, "----------   Done preloading   ----------");
+	    });
 	  };
 
+	  /**
+	  * Initialize the plugin
+	  * @param {object} deck - The deck object
+	  */
 	  const init = function (deck) {
-	    let es5Filename = "appearance.js";
 	    let defaultOptions = {
 	      baseclass: 'animate__animated',
 	      hideagain: true,
@@ -448,47 +700,9 @@
 	      compatibility: false,
 	      compatibilitybaseclass: 'animated'
 	    };
-
-	    const defaults = function (options, defaultOptions) {
-	      for (let i in defaultOptions) {
-	        if (!options.hasOwnProperty(i)) {
-	          options[i] = defaultOptions[i];
-	        }
-	      }
-	    };
-
-	    let options = deck.getConfig().appearance || {};
-	    defaults(options, defaultOptions);
-
-	    function pluginPath() {
-	      let path;
-	      let pluginScript = document.querySelector(`script[src$="${es5Filename}"]`);
-
-	      if (pluginScript) {
-	        path = pluginScript.getAttribute("src").slice(0, -1 * es5Filename.length);
-	      } else {
-	        path = (typeof document === 'undefined' && typeof location === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : typeof document === 'undefined' ? location.href : (document.currentScript && document.currentScript.src || new URL('appearance.js', document.baseURI).href)).slice(0, (typeof document === 'undefined' && typeof location === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : typeof document === 'undefined' ? location.href : (document.currentScript && document.currentScript.src || new URL('appearance.js', document.baseURI).href)).lastIndexOf('/') + 1);
-	      }
-
-	      return path;
-	    }
-
-	    let AppearanceStylePath = options.csspath.appearance ? options.csspath.appearance : `${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);
+	    options = mergeDeep(defaultOptions, deck.getConfig().appearance || {});
+	    return Appear(deck, options, "appearance.js");
 	  };
-
 	  return {
 	    id: 'appearance',
 	    init: init