reveal.js-appearance 1.1.1 → 1.1.2

package/plugin/appearance/appearance.esm.js

@@ -4,7 +4,7 @@
  * https://github.com/Martinomagnifico
  *
  * Appearance.js for Reveal.js 
- * Version 1.1.1
+ * Version 1.1.2
  * 
  * @license 
  * MIT licensed
@@ -24,14 +24,17 @@ function _arrayWithHoles(arr) {
 }
 
 function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  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 _e = undefined;
+
+  var _s, _e;
 
   try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
       _arr.push(_s.value);
 
       if (i && _arr.length === i) break;
@@ -122,38 +125,64 @@ var Plugin = function Plugin() {
     }(Element.prototype);
   }
 
-  var appear = function appear(deck, options) {
-    var debugLog = function debugLog(text) {
-      if (options.debug) console.log(text);
+  var loadStyle = function loadStyle(url, type, callback) {
+    var head = document.querySelector('head');
+    var style;
+    style = document.createElement('link');
+    style.rel = 'stylesheet';
+    style.href = url;
+
+    var finish = function finish() {
+      if (typeof callback === 'function') {
+        callback.call();
+        callback = null;
+      }
     };
 
-    var timeouts = [];
+    style.onload = finish;
 
-    var clearTimeOuts = function clearTimeOuts(timeouts) {
-      for (var i = 0; i < timeouts.length; i++) {
-        clearTimeout(timeouts[i]);
+    style.onreadystatechange = function () {
+      if (this.readyState === 'loaded') {
+        finish();
       }
-
-      timeouts = [];
     };
 
-    var loopAppearances = function loopAppearances(appearances, appearancesInFragment) {
-      var delay = 0;
-      appearances.filter(function (element, i) {
-        if (!(appearancesInFragment.indexOf(element) > -1)) {
-          var 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));
-        }
-      });
+    head.appendChild(style);
+  };
+
+  var selectionArray = function selectionArray(container, selectors) {
+    var selections = container.querySelectorAll(selectors);
+    var 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__"]';
+
+    var debugLog = function debugLog(text) {
+      if (options.debug) console.log(text);
     };
 
-    var selectionArray = function selectionArray(container, selectors) {
-      var selections = container.querySelectorAll(selectors);
-      var selectionarray = Array.prototype.slice.call(selections);
-      return selectionarray;
+    var findAppearancesIn = function findAppearancesIn(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;
+        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;
+              appearance.style.setProperty('animation-delay', delay + "ms");
+            }
+          }
+        });
+      }
     };
 
     var autoAdd = function autoAdd() {
@@ -172,8 +201,8 @@ var Plugin = function Plugin() {
 
           if (autoAppearances.length > 0) {
             autoAppearances.forEach(function (autoAppearance) {
-              if (!autoAppearance.classList.contains(options.baseclass)) {
-                autoAppearance.classList.add(options.baseclass);
+              if (!autoAppearance.classList.contains(baseclass)) {
+                autoAppearance.classList.add(baseclass);
                 autoAppearance.classList.add(autoanimation);
               }
             });
@@ -188,20 +217,38 @@ var Plugin = function Plugin() {
       }
     };
 
-    var showAppearances = function showAppearances(container) {
-      clearTimeOuts(timeouts);
-      var appearances = selectionArray(container, ":scope ." + options.baseclass);
-      var appearancesInFragment = selectionArray(container, ":scope .fragment .".concat(options.baseclass));
-      loopAppearances(appearances, appearancesInFragment);
-    };
+    var isStack = function isStack(section) {
+      var isStack = false;
 
-    var hideAppearances = function hideAppearances(container) {
-      var disappearances = selectionArray(container, ":scope .".concat(options.baseclass, ", :scope .fragment.visible"));
-      disappearances.filter(function (element) {
-        element.classList.remove(element.classList.contains("fragment") ? "visible" : options.visibleclass);
-      });
+      for (var i = 0; i < section.childNodes.length; i++) {
+        if (section.childNodes[i].tagName == "SECTION") {
+          isStack = true;
+          break;
+        }
+      }
+
+      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;
+    }
+
+    var allappearances = deck.getRevealElement().querySelectorAll(animatecss);
+    allappearances.forEach(function (appearance) {
+      if (!appearance.classList.contains(baseclass)) {
+        appearance.classList.add(baseclass);
+      }
+    });
+    autoAdd();
+    sections.forEach(function (section) {
+      findAppearancesIn(section, appearanceSelector, fragmentSelector);
+    });
+    fragments.forEach(function (fragment) {
+      findAppearancesIn(fragment, appearanceSelector, fragmentSelector);
+    });
+
     var fromTo = function fromTo(event) {
       var slides = {};
       slides.from = event.fromSlide ? event.fromSlide : event.previousSlide ? event.previousSlide : null;
@@ -210,9 +257,13 @@ var Plugin = function Plugin() {
     };
 
     var showHideSlide = function showHideSlide(event) {
+      var _slides$to;
+
+      var etype = event.type;
       var slides = fromTo(event);
+      debugLog(etype);
 
-      if (slides.to.dataset.appearevent == "auto") {
+      if (((_slides$to = slides.to) === null || _slides$to === void 0 ? void 0 : _slides$to.dataset.appearevent) == "auto") {
         slides.to.dataset.appearevent = "autoanimate";
       }
 
@@ -220,27 +271,37 @@ var Plugin = function Plugin() {
         options.appearevent = "autoanimate";
       }
 
-      if (!slides.to.dataset.eventdone) {
-        debugLog("Event: '".concat(event.type, "'"));
-
-        if (event.type == "ready") {
-          showAppearances(slides.to);
-        } else if (event.type == slides.to.dataset.appearevent) {
-          slides.to.dataset.eventdone = true;
-          showAppearances(slides.to);
-        } else if (event.type == options.appearevent) {
-          slides.to.dataset.eventdone = true;
-          showAppearances(slides.to);
-        } else if (event.type == "slidetransitionend" && options.appearevent == "autoanimate") {
-          slides.to.dataset.eventdone = true;
-          showAppearances(slides.to);
-        } else if (event.type == 'slidechanged' && document.body.dataset.exitoverview) {
-          if (slides.from && options.hideagain) {
-            hideAppearances(slides.to);
+      if (etype == "ready") {
+        slides.to.dataset.appearanceCanStart = true;
+      }
+
+      if (slides.to) {
+        var 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) {
+            var _slides$from;
+
+            (_slides$from = slides.from) === null || _slides$from === void 0 ? true : delete _slides$from.dataset.appearanceCanStart;
+            var fromFragments = slides.from.querySelectorAll(".fragment.visible");
+            fromFragments.forEach(function (fragment) {
+              fragment.classList.remove('visible');
+            });
           }
+        }
 
-          showAppearances(slides.to);
-          slides.to.dataset.eventdone = true;
+        if (event.type == 'slidechanged' && document.body.dataset.exitoverview) {
+          if (options.hideagain) {
+            var _slides$from2;
+
+            (_slides$from2 = slides.from) === null || _slides$from2 === void 0 ? true : delete _slides$from2.dataset.appearanceCanStart;
+          }
+
+          slides.to.dataset.appearanceCanStart = true;
         } else if (event.type == 'overviewhidden') {
           document.body.dataset.exitoverview = true;
           setTimeout(function () {
@@ -248,69 +309,43 @@ var Plugin = function Plugin() {
           }, 500);
 
           if (event.currentSlide) {
-            if (slides.from && options.hideagain) {
-              hideAppearances(event.previousSlide);
+            if (options.hideagain) {
+              var _slides$from3;
+
+              (_slides$from3 = slides.from) === null || _slides$from3 === void 0 ? true : delete _slides$from3.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);
-        }
-      }
-    };
-
-    var showHideFragment = function showHideFragment(event) {
-      if (event.type == "fragmentshowncomplete" || event.type == "fragmentshown") {
-        showAppearances(event.fragment);
-      } else {
-        hideAppearances(event.fragment);
-      }
     };
 
-    deck.on('ready', function (event) {
-      autoAdd();
-      showHideSlide(event);
-    });
-    deck.on('slidechanged', function (event) {
-      showHideSlide(event);
-    });
-    deck.on('slidetransitionend', function (event) {
-      showHideSlide(event);
-    });
-    deck.on('autoanimate', function (event) {
-      showHideSlide(event);
-    });
-    deck.on('overviewhidden', function (event) {
-      showHideSlide(event);
-    });
-    deck.on('fragmentshown', function (event) {
-      showHideFragment(event);
-    });
-    deck.on('fragmenthidden', function (event) {
-      showHideFragment(event);
+    var eventnames = ['ready', 'slidechanged', 'slidetransitionend', 'autoanimate', 'overviewhidden'];
+    eventnames.forEach(function (eventname) {
+      return deck.on(eventname, function (event) {
+        showHideSlide(event);
+      });
     });
   };
 
   var init = function init(deck) {
+    var es5Filename = "appearance.js";
     var defaultOptions = {
-      baseclass: 'animated',
-      visibleclass: 'in',
+      baseclass: 'animate__animated',
       hideagain: true,
       delay: 300,
       debug: false,
       appearevent: 'slidetransitionend',
       autoappear: false,
-      autoelements: null
+      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'
     };
 
     var defaults = function defaults(options, defaultOptions) {
@@ -323,6 +358,33 @@ var Plugin = function Plugin() {
 
     var options = deck.getConfig().appearance || {};
     defaults(options, defaultOptions);
+
+    function pluginPath() {
+      var path;
+      var pluginScript = document.querySelector("script[src$=\"".concat(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;
+    }
+
+    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;
+
+    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));
+    }
+
+    loadStyle(AnimateCSSPath, 'stylesheet', function () {
+      loadStyle(AppearanceStylePath, 'stylesheet');
+    });
     appear(deck, options);
   };
 
@@ -332,4 +394,4 @@ var Plugin = function Plugin() {
   };
 };
 
-export default Plugin;
+export { Plugin as default };