Add animation framework

js/animator.js

@@ -0,0 +1,42 @@
+export class Animator {
+    constructor() {
+        this._transitioning = false;
+        this._begin = null;
+        this._end = null;
+    }
+
+    get transitioning() {
+        return this._transitioning;
+    }
+
+    get animationReady() {
+        return !!this._end;
+    }
+
+    beginAnimation(animationName, host, callback) {
+        this._transitioning = true;
+        this._begin = `anim-${animationName}-begin`;
+        this._end = `anim-${animationName}-end`;
+        const animationEnd = () => {
+            host.removeEventListener("animationend", animationEnd);
+            host.classList.remove(this._begin);
+            this._transitioning = false;
+            callback();
+        }
+        host.addEventListener("animationend", animationEnd, false);
+        host.classList.add(this._begin);
+    }
+
+    endAnimation(host) {
+        this._transitioning = true;
+        const animationEnd = () => {
+            host.removeEventListener("animationend", animationEnd);
+            host.classList.remove(this._end);
+            this._transitioning = false;
+            this._begin = null;
+            this._end = null;
+        }
+        host.addEventListener("animationend", animationEnd, false);
+        host.classList.add(this._end);
+    }
+}

js/navigator.js

@@ -1,10 +1,12 @@
 import { loadSlides } from "./slideLoader.js"
 import { Router } from "./router.js"
+import { Animator } from "./animator.js"
 
 class Navigator extends HTMLElement {
 
     constructor() {
         super();
+        this._animator = new Animator();
         this._router = new Router();
         this._route = this._router.getRoute();
         this.slidesChangedEvent = new CustomEvent("slideschanged", {
@@ -61,6 +63,9 @@ class Navigator extends HTMLElement {
     }
 
     jumpTo(slideIdx) {
+        if (this._animator.transitioning) {
+            return;
+        }
         if (slideIdx >= 0 && slideIdx < this.totalSlides) {
             this._currentIndex = slideIdx;
             this.innerHTML = '';
@@ -68,12 +73,23 @@ class Navigator extends HTMLElement {
             this._router.setRoute(slideIdx+1);         
             this._route = this._router.getRoute();
             this.dispatchEvent(this.slidesChangedEvent);
+            if (this._animator.animationReady) {
+                this._animator.endAnimation(this.querySelector("div"));
+            }
         }
     }
 
     next() {
         if (this.hasNext) {
-            this.jumpTo(this.currentIndex + 1);
+            if (this.currentSlide.transition !== null) {
+                this._animator.beginAnimation(
+                    this.currentSlide.transition, 
+                    this.querySelector("div"),
+                    () => this.jumpTo(this.currentIndex+1));
+            }
+            else {
+                this.jumpTo(this.currentIndex + 1);
+            }
         }
     }
 

js/slide.js

@@ -5,6 +5,13 @@ export class Slide {
         this._html = document.createElement('div');
         this._html.innerHTML = text;
         this._title = this._html.querySelectorAll("title")[0].innerText;
+        const transition  = this._html.querySelectorAll("transition");
+        if (transition.length) {
+            this._transition = transition[0].innerText;
+        }
+        else {
+            this._transition = null;
+        }
         const hasNext = this._html.querySelectorAll("nextslide");
         if (hasNext.length > 0) {
             this._nextSlideName = hasNext[0].innerText;
@@ -14,6 +21,10 @@ export class Slide {
         }     
     }
 
+    get transition() {
+        return this._transition;
+    }
+
     get title() {
         return this._title;
     }