reveal.js-appearance 1.1.3 → 1.2.0

package/package.json

@@ -1,6 +1,8 @@
 {
     "name": "reveal.js-appearance",
-    "version": "1.1.3",
+    "version": "1.2.0",
+    "main": "plugin/appearance/appearance.js",
+    "module": "plugin/appearance/appearance.esm.js",
     "description": "An animation plugin for Reveal.js that animates elements sequentially like in Powerpoint. Perfect for online portfolios or other presentations with images.",
     "keywords": "reveal, reveal.js, reveal-plugin, plugin, text effects, powerpoint",
     "homepage": "https://github.com/Martinomagnifico/reveal.js-appearance",
@@ -9,7 +11,7 @@
         "url": "https://github.com/Martinomagnifico/reveal.js-appearance.git"
     },
     "author": "Martijn De Jongh",
-    "license": "MIT, Copyright (C) 2022 Martijn De Jongh",
+    "license": "MIT, Copyright (C) 2023 Martijn De Jongh",
     "peerDependencies": {
         "reveal.js": "^4.2"
     }

package/plugin/appearance/appearance.css

@@ -1,3 +1,19 @@
+/*
+ ****************************************************************
+ * @author: Martijn De Jongh (Martino), martijn.de.jongh@gmail.com
+ * https://github.com/Martinomagnifico
+ *
+ * Appearance.js for Reveal.js
+ * Version 1.2.0
+ * 
+ * @license 
+ * MIT licensed
+ *
+ * Thanks to:
+ *  - Hakim El Hattab, Reveal.js
+ *  - Daniel Eden, Animate.css
+ *****************************************************************
+*/
 /* Animate.css overrides */
 section:not(.stack):not([data-appearance-can-start]) .animate__animated, section:not(.stack):not([data-appearance-can-start]) .animated {
   opacity: 0;
@@ -11,7 +27,7 @@ section:not(.stack):not([data-appearance-can-start]) .animate__animated, section
   opacity: 1;
 }
 
-.fragment:not(.visible) .animate__animated, .fragment:not(.visible) .animated {
+.fragment:not(.visible) .animate__animated, .fragment:not(.visible) .animated, .fragment:not(.visible).animate__animated, .fragment:not(.visible).animated {
   opacity: 0;
   -webkit-animation: none;
           animation: none;

package/plugin/appearance/appearance.esm.js

@@ -4,7 +4,7 @@
  * https://github.com/Martinomagnifico
  *
  * Appearance.js for Reveal.js 
- * Version 1.1.3
+ * Version 1.2.0
  * 
  * @license 
  * MIT licensed
@@ -15,84 +15,26 @@
  ******************************************************************/
 
 
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-var Plugin = function Plugin() {
+const Plugin = () => {
   // Scope support polyfill
   try {
     document.querySelector(":scope *");
   } catch (t) {
     !function (t) {
-      var e = /:scope(?![\w-])/gi,
+      let e = /:scope(?![\w-])/gi,
           r = u(t.querySelector);
 
       t.querySelector = function (t) {
         return r.apply(this, arguments);
       };
 
-      var c = u(t.querySelectorAll);
+      let c = u(t.querySelectorAll);
 
       if (t.querySelectorAll = function (t) {
         return c.apply(this, arguments);
       }, t.matches) {
-        var n = u(t.matches);
+        let n = u(t.matches);
 
         t.matches = function (t) {
           return n.apply(this, arguments);
@@ -100,7 +42,7 @@ var Plugin = function Plugin() {
       }
 
       if (t.closest) {
-        var o = u(t.closest);
+        let o = u(t.closest);
 
         t.closest = function (t) {
           return o.apply(this, arguments);
@@ -110,13 +52,10 @@ var Plugin = function Plugin() {
       function u(t) {
         return function (r) {
           if (r && e.test(r)) {
-            var _c = "q" + Math.floor(9e6 * Math.random()) + 1e6;
-
-            arguments[0] = r.replace(e, "[" + _c + "]"), this.setAttribute(_c, "");
-
-            var _n = t.apply(this, arguments);
-
-            return this.removeAttribute(_c), _n;
+            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);
@@ -125,14 +64,14 @@ var Plugin = function Plugin() {
     }(Element.prototype);
   }
 
-  var loadStyle = function loadStyle(url, type, callback) {
-    var head = document.querySelector('head');
-    var style;
+  const loadStyle = function (url, type, callback) {
+    let head = document.querySelector('head');
+    let style;
     style = document.createElement('link');
     style.rel = 'stylesheet';
     style.href = url;
 
-    var finish = function finish() {
+    let finish = function () {
       if (typeof callback === 'function') {
         callback.call();
         callback = null;
@@ -150,34 +89,199 @@ var Plugin = function Plugin() {
     head.appendChild(style);
   };
 
-  var selectionArray = function selectionArray(container, selectors) {
-    var selections = container.querySelectorAll(selectors);
-    var selectionarray = Array.prototype.slice.call(selections);
+  const isJSON = str => {
+    try {
+      return JSON.parse(str) && !!str;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  const selectionArray = function (container, selectors) {
+    let selections = container.querySelectorAll(selectors);
+    let selectionarray = Array.prototype.slice.call(selections);
     return selectionarray;
   };
 
-  var appear = function appear(deck, options) {
-    var baseclass = 'animate__animated';
-    var appearanceSelector = options.compatibility ? ".".concat(options.compatibilitybaseclass) : ".".concat(baseclass);
-    var fragmentSelector = ".fragment";
-    var sections = deck.getRevealElement().querySelectorAll(".slides section");
-    var fragments = deck.getRevealElement().querySelectorAll(fragmentSelector);
-    var animatecss = '[class^="animate__"],[class*=" animate__"]';
+  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);
+      }
+    });
+  }
 
-    var debugLog = function debugLog(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);
     };
 
-    var findAppearancesIn = function findAppearancesIn(container, includeClass, excludeClass) {
+    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)) {
-        var appearances = selectionArray(container, ":scope ".concat(includeClass));
-        var excludes = selectionArray(container, ":scope ".concat(excludeClass, " ").concat(includeClass));
-        var delay = 0;
+        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 (index == 0 && appearance.dataset.delay || index != 0) {
-              var elementDelay = appearance.dataset.delay ? parseInt(appearance.dataset.delay) : options.delay;
-              delay = delay + elementDelay;
+              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");
             }
           }
@@ -185,49 +289,35 @@ var Plugin = function Plugin() {
       }
     };
 
-    var autoAdd = function autoAdd() {
-      if (options.autoelements) {
-        var _loop = function _loop() {
-          var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
-              autoelement = _Object$entries$_i[0],
-              autoanimation = _Object$entries$_i[1];
-
-          if (options.autoappear) {
-            debugLog("All \"".concat(autoelement, "\"\" elements will animate with ").concat(autoanimation));
-          }
+    const autoAdd = function () {
+      regularSections.forEach(section => {
+        if (section.hasAttribute("data-autoappear")) {
+          let sectDataAppear = section.dataset.autoappear;
 
-          var autosection = options.autoappear ? "" : "[data-autoappear] ";
-          var autoAppearances = deck.getRevealElement().querySelectorAll(".slides ".concat(autosection).concat(autoelement));
-
-          if (autoAppearances.length > 0) {
-            autoAppearances.forEach(function (autoAppearance) {
-              if (!autoAppearance.classList.contains(baseclass)) {
-                autoAppearance.classList.add(baseclass);
-                autoAppearance.classList.add(autoanimation);
+          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"`);
               }
-            });
-          }
-        };
 
-        for (var _i = 0, _Object$entries = Object.entries(options.autoelements); _i < _Object$entries.length; _i++) {
-          _loop();
-        }
-      } else if (options.autoappear) {
-        console.log("Please set an \"autoelements\" object.");
-      }
-    };
+              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
 
-    var isStack = function isStack(section) {
-      var isStack = false;
 
-      for (var i = 0; i < section.childNodes.length; i++) {
-        if (section.childNodes[i].tagName == "SECTION") {
-          isStack = true;
-          break;
+            assignAutoClass(section, options.autoelements, 'global');
+          }
         }
-      }
-
-      return isStack;
+      });
     };
 
     if (options.compatibility) {
@@ -235,32 +325,32 @@ var Plugin = function Plugin() {
       baseclass = options.compatibilitybaseclass;
     }
 
-    var allappearances = deck.getRevealElement().querySelectorAll(animatecss);
-    allappearances.forEach(function (appearance) {
+    let allappearances = deck.getRevealElement().querySelectorAll(animatecss);
+    allappearances.forEach(appearance => {
       if (!appearance.classList.contains(baseclass)) {
         appearance.classList.add(baseclass);
       }
     });
     autoAdd();
-    sections.forEach(function (section) {
+    sections.forEach(section => {
       findAppearancesIn(section, appearanceSelector, fragmentSelector);
     });
-    fragments.forEach(function (fragment) {
+    fragments.forEach(fragment => {
       findAppearancesIn(fragment, appearanceSelector, fragmentSelector);
     });
 
-    var fromTo = function fromTo(event) {
-      var slides = {};
+    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;
     };
 
-    var showHideSlide = function showHideSlide(event) {
+    const showHideSlide = function (event) {
       var _slides$to;
 
-      var etype = event.type;
-      var slides = fromTo(event);
+      let etype = event.type;
+      let slides = fromTo(event);
       debugLog(etype);
 
       if (((_slides$to = slides.to) === null || _slides$to === void 0 ? void 0 : _slides$to.dataset.appearevent) == "auto") {
@@ -276,7 +366,7 @@ var Plugin = function Plugin() {
       }
 
       if (slides.to) {
-        var appearevent = slides.to.dataset.appearevent ? slides.to.dataset.appearevent : options.appearevent;
+        let appearevent = slides.to.dataset.appearevent ? slides.to.dataset.appearevent : options.appearevent;
 
         if (etype == appearevent || etype == "slidetransitionend" && appearevent == "autoanimate") {
           slides.to.dataset.appearanceCanStart = true;
@@ -289,10 +379,10 @@ var Plugin = function Plugin() {
                 delete slides.from.dataset.appearanceCanStart;
               }
 
-              var fromFragments = slides.from.querySelectorAll(".fragment.visible");
+              let fromFragments = slides.from.querySelectorAll(`.fragment.visible`);
 
               if (fromFragments) {
-                fromFragments.forEach(function (fragment) {
+                fromFragments.forEach(fragment => {
                   fragment.classList.remove('visible');
                 });
               }
@@ -327,17 +417,15 @@ var Plugin = function Plugin() {
       }
     };
 
-    var eventnames = ['ready', 'slidechanged', 'slidetransitionend', 'autoanimate', 'overviewhidden'];
-    eventnames.forEach(function (eventname) {
-      return deck.on(eventname, function (event) {
-        showHideSlide(event);
-      });
-    });
+    const eventnames = ['ready', 'slidechanged', 'slidetransitionend', 'autoanimate', 'overviewhidden'];
+    eventnames.forEach(eventname => deck.on(eventname, event => {
+      showHideSlide(event);
+    }));
   };
 
-  var init = function init(deck) {
-    var es5Filename = "appearance.js";
-    var defaultOptions = {
+  const init = function (deck) {
+    let es5Filename = "appearance.js";
+    let defaultOptions = {
       baseclass: 'animate__animated',
       hideagain: true,
       delay: 300,
@@ -345,29 +433,30 @@ var Plugin = function 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'
     };
 
-    var defaults = function defaults(options, defaultOptions) {
-      for (var i in defaultOptions) {
+    const defaults = function (options, defaultOptions) {
+      for (let i in defaultOptions) {
         if (!options.hasOwnProperty(i)) {
           options[i] = defaultOptions[i];
         }
       }
     };
 
-    var options = deck.getConfig().appearance || {};
+    let options = deck.getConfig().appearance || {};
     defaults(options, defaultOptions);
 
     function pluginPath() {
-      var path;
-      var pluginScript = document.querySelector("script[src$=\"".concat(es5Filename, "\"]"));
+      let path;
+      let pluginScript = document.querySelector(`script[src$="${es5Filename}"]`);
 
       if (pluginScript) {
         path = pluginScript.getAttribute("src").slice(0, -1 * es5Filename.length);
@@ -378,14 +467,14 @@ var Plugin = function Plugin() {
       return path;
     }
 
-    var AppearanceStylePath = options.csspath.appearance ? options.csspath.appearance : "".concat(pluginPath(), "appearance.css") || 'plugin/appearance/appearance.css';
-    var AnimateCSSPath = !options.compatibility ? options.animatecsspath.link : options.animatecsspath.compat;
+    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 = ".concat(pluginPath()));
-      console.log("Compatibility mode: ".concat(options.compatibility));
-      console.log("Appearance CSS path = ".concat(AppearanceStylePath));
-      console.log("AnimateCSS CSS path = ".concat(AnimateCSSPath));
+      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 () {