@shower/core 3.0.0-2 → 3.3.0

package/dist/shower.js

@@ -1,51 +1,15 @@
 /**
  * Core for Shower HTML presentation engine
- * @shower/core v3.0.0-1, https://github.com/shower/core
- * @copyright 2010–2019 Vadim Makeev, https://pepelsbey.net
+ * @shower/core v3.2.0, https://github.com/shower/core
+ * @copyright 2010–2021 Vadim Makeev, https://pepelsbey.net
  * @license MIT
  */
 (function () {
     'use strict';
 
-    const EVENT_TARGET = Symbol('EventTarget');
+    const isInteractiveElement = (element) => element.tabIndex !== -1;
 
-    class EventTarget {
-        constructor() {
-            this[EVENT_TARGET] = document.createElement('div');
-        }
-
-        addEventListener(...args) {
-            this[EVENT_TARGET].addEventListener(...args);
-        }
-
-        removeEventListener(...args) {
-            this[EVENT_TARGET].removeEventListener(...args);
-        }
-
-        dispatchEvent(event) {
-            Object.defineProperties(event, {
-                target: { value: this },
-                currentTarget: { value: this },
-            });
-
-            return this[EVENT_TARGET].dispatchEvent(event);
-        }
-    }
-
-    const isInteractiveElement = element => element.tabIndex !== -1;
-    const freezeHistory = callback => {
-        history.pushState = () => {};
-        history.replaceState = () => {};
-
-        try {
-            callback();
-        } finally {
-            delete history.pushState;
-            delete history.replaceState;
-        }
-    };
-
-    const contentLoaded = callback => {
+    const contentLoaded = (callback) => {
         if (document.currentScript.async) {
             callback();
         } else {
@@ -53,12 +17,27 @@
         }
     };
 
+    const defineReadOnly = (target, props) => {
+        for (const [key, value] of Object.entries(props)) {
+            Object.defineProperty(target, key, {
+                value,
+                writable: false,
+                enumerable: true,
+                configurable: true,
+            });
+        }
+    };
+
+    class ShowerError extends Error {}
+
     var defaultOptions = {
         containerSelector: '.shower',
         progressSelector: '.progress',
         stepSelector: '.next',
         fullModeClass: 'full',
         listModeClass: 'list',
+        mouseHiddenClass: 'pointless',
+        mouseInactivityTimeout: 5000,
 
         slideSelector: '.slide',
         slideTitleSelector: 'h2',
@@ -66,22 +45,32 @@
         visitedSlideClass: 'visited',
     };
 
-    /**
-     * @param {HTMLElement} element
-     * @param {object} options
-     */
     class Slide extends EventTarget {
-        constructor(element, options) {
+        /**
+         * @param {Shower} shower
+         * @param {HTMLElement} element
+         */
+        constructor(shower, element) {
             super();
 
-            this.element = element;
-            this.options = options;
+            defineReadOnly(this, {
+                shower,
+                element,
+                state: {
+                    visitCount: 0,
+                    innerStepCount: 0,
+                },
+            });
 
             this._isActive = false;
-            this.state = {
-                visitsCount: 0,
-                innerStepsCount: 0,
-            };
+            this._options = this.shower.options;
+
+            this.element.addEventListener('click', (event) => {
+                if (event.defaultPrevented) return;
+
+                this.activate();
+                this.shower.enterFullMode();
+            });
         }
 
         get isActive() {
@@ -89,7 +78,7 @@
         }
 
         get isVisited() {
-            return this.state.visitsCount > 0;
+            return this.state.visitCount > 0;
         }
 
         get id() {
@@ -97,27 +86,57 @@
         }
 
         get title() {
-            const titleElement = this.element.querySelector(this.options.slideTitleSelector);
+            const titleElement = this.element.querySelector(this._options.slideTitleSelector);
             return titleElement ? titleElement.innerText : '';
         }
 
+        /**
+         * Deactivates currently active slide (if any) and activates itself.
+         * @emits Slide#deactivate
+         * @emits Slide#activate
+         * @emits Shower#slidechange
+         */
         activate() {
             if (this._isActive) return;
 
+            const prev = this.shower.activeSlide;
+            if (prev) {
+                prev._deactivate();
+            }
+
+            this.state.visitCount++;
+            this.element.classList.add(this._options.activeSlideClass);
+
             this._isActive = true;
-            this.state.visitsCount++;
-            this.element.classList.add(this.options.activeSlideClass);
             this.dispatchEvent(new Event('activate'));
+            this.shower.dispatchEvent(
+                new CustomEvent('slidechange', {
+                    detail: { prev },
+                }),
+            );
         }
 
+        /**
+         * @throws {ShowerError}
+         * @emits Slide#deactivate
+         */
         deactivate() {
-            if (!this._isActive) return;
+            if (this.shower.isFullMode) {
+                throw new ShowerError('In full mode, another slide should be activated instead.');
+            }
 
-            this._isActive = false;
+            if (this._isActive) {
+                this._deactivate();
+            }
+        }
+
+        _deactivate() {
             this.element.classList.replace(
-                this.options.activeSlideClass,
-                this.options.visitedSlideClass,
+                this._options.activeSlideClass,
+                this._options.visitedSlideClass,
             );
+
+            this._isActive = false;
             this.dispatchEvent(new Event('deactivate'));
         }
     }
@@ -132,7 +151,7 @@
         return liveRegion;
     };
 
-    var a11y = shower => {
+    var a11y = (shower) => {
         const { container } = shower;
         const liveRegion = createLiveRegion();
         container.appendChild(liveRegion);
@@ -152,12 +171,17 @@
             }
         };
 
+        shower.addEventListener('start', () => {
+            updateDocumentRole();
+            updateLiveRegion();
+        });
+
         shower.addEventListener('modechange', updateDocumentRole);
         shower.addEventListener('slidechange', updateLiveRegion);
     };
 
-    var keys = shower => {
-        const doSlideActions = event => {
+    var keys = (shower) => {
+        const doSlideActions = (event) => {
             const isShowerAction = !(event.ctrlKey || event.altKey || event.metaKey);
 
             switch (event.key.toUpperCase()) {
@@ -179,6 +203,7 @@
                     }
                     break;
 
+                case 'BACKSPACE':
                 case 'PAGEUP':
                 case 'ARROWUP':
                 case 'ARROWLEFT':
@@ -226,7 +251,7 @@
             }
         };
 
-        const doModeActions = event => {
+        const doModeActions = (event) => {
             switch (event.key.toUpperCase()) {
                 case 'ESCAPE':
                     if (shower.isFullMode) {
@@ -258,7 +283,7 @@
             }
         };
 
-        shower.container.addEventListener('keydown', event => {
+        shower.container.addEventListener('keydown', (event) => {
             if (event.defaultPrevented) return;
             if (isInteractiveElement(event.target)) return;
 
@@ -267,8 +292,8 @@
         });
     };
 
-    var location$1 = shower => {
-        const getURL = () => {
+    var location$1 = (shower) => {
+        const composeURL = () => {
             const search = shower.isFullMode ? '?full' : '';
             const slide = shower.activeSlide;
             const hash = slide ? `#${slide.id}` : '';
@@ -276,11 +301,20 @@
             return location.pathname + search + hash; // path is required to clear search params
         };
 
-        const changeSlide = () => {
+        const applyURLMode = () => {
+            const isFull = new URLSearchParams(location.search).has('full');
+            if (isFull) {
+                shower.enterFullMode();
+            } else {
+                shower.exitFullMode();
+            }
+        };
+
+        const applyURLSlide = () => {
             const id = location.hash.slice(1);
             if (!id) return;
 
-            const target = shower.slides.find(slide => slide.id === id);
+            const target = shower.slides.find((slide) => slide.id === id);
             if (target) {
                 target.activate();
             } else if (!shower.activeSlide) {
@@ -288,86 +322,86 @@
             }
         };
 
-        shower.addEventListener('modechange', () => {
-            history.replaceState(null, document.title, getURL());
-        });
+        const applyURL = () => {
+            applyURLMode();
+            applyURLSlide();
+        };
 
-        shower.addEventListener('slidechange', () => {
-            history.pushState(null, document.title, getURL());
-        });
+        applyURL();
+        window.addEventListener('popstate', applyURL);
 
         shower.addEventListener('start', () => {
-            const isFull = new URL(location).searchParams.has('full');
-            changeSlide();
-            if (isFull) {
-                shower.enterFullMode();
-            }
+            history.replaceState(null, document.title, composeURL());
         });
 
-        window.addEventListener('popstate', () => {
-            freezeHistory(() => {
-                changeSlide();
-                const isFull = new URL(location).searchParams.has('full');
-                if (isFull) {
-                    shower.enterFullMode();
-                } else {
-                    shower.exitFullMode();
-                }
-            });
+        shower.addEventListener('modechange', () => {
+            history.replaceState(null, document.title, composeURL());
+        });
+
+        shower.addEventListener('slidechange', () => {
+            const url = composeURL();
+            if (!location.href.endsWith(url)) {
+                history.pushState(null, document.title, url);
+            }
         });
     };
 
-    var next = shower => {
-        const { stepSelector, activeSlideClass } = shower.options;
+    var next = (shower) => {
+        const { stepSelector, activeSlideClass, visitedSlideClass } = shower.options;
 
         let innerSteps;
-        let innerAt;
+        let activeIndex;
 
-        const getInnerSteps = () => {
-            const { element } = shower.activeSlide;
-            return [...element.querySelectorAll(stepSelector)];
-        };
+        const isActive = (step) => step.classList.contains(activeSlideClass);
+        const isVisited = (step) => step.classList.contains(visitedSlideClass);
 
-        const getInnerAt = () => {
-            return innerSteps.filter(step => {
-                return step.classList.contains(activeSlideClass);
-            }).length;
-        };
+        const setInnerStepsState = () => {
+            if (shower.isListMode) return;
 
-        const toggleActive = () => {
-            innerSteps.forEach((step, index) => {
-                step.classList.toggle(activeSlideClass, index < innerAt);
-            });
+            const slide = shower.activeSlide;
+
+            innerSteps = [...slide.element.querySelectorAll(stepSelector)];
+            activeIndex =
+                innerSteps.length && innerSteps.every(isVisited)
+                    ? innerSteps.length
+                    : innerSteps.filter(isActive).length - 1;
+
+            slide.state.innerStepCount = innerSteps.length;
         };
 
-        shower.addEventListener('slidechange', () => {
-            innerSteps = getInnerSteps();
-            innerAt = getInnerAt();
+        shower.addEventListener('start', setInnerStepsState);
+        shower.addEventListener('modechange', setInnerStepsState);
+        shower.addEventListener('slidechange', setInnerStepsState);
 
-            const slide = shower.activeSlide;
-            slide.state.innerStepsCount = innerSteps.length;
-        });
+        shower.addEventListener('next', (event) => {
+            if (shower.isListMode || event.defaultPrevented || !event.cancelable) return;
 
-        shower.addEventListener('next', event => {
-            if (event.defaultPrevented || !event.cancelable) return;
-            if (shower.isListMode || innerAt === innerSteps.length) return;
+            activeIndex++;
+            innerSteps.forEach((step, index) => {
+                step.classList.toggle(visitedSlideClass, index < activeIndex);
+                step.classList.toggle(activeSlideClass, index === activeIndex);
+            });
 
-            event.preventDefault();
-            innerAt++;
-            toggleActive();
+            if (activeIndex < innerSteps.length) {
+                event.preventDefault();
+            }
         });
 
-        shower.addEventListener('prev', event => {
-            if (event.defaultPrevented || !event.cancelable) return;
-            if (shower.isListMode || innerAt === innerSteps.length || !innerAt) return;
+        shower.addEventListener('prev', (event) => {
+            if (shower.isListMode || event.defaultPrevented || !event.cancelable) return;
+            if (activeIndex === -1 || activeIndex === innerSteps.length) return;
+
+            activeIndex--;
+            innerSteps.forEach((step, index) => {
+                step.classList.toggle(visitedSlideClass, index < activeIndex + 1);
+                step.classList.toggle(activeSlideClass, index === activeIndex);
+            });
 
             event.preventDefault();
-            innerAt--;
-            toggleActive();
         });
     };
 
-    var progress = shower => {
+    var progress = (shower) => {
         const { progressSelector } = shower.options;
         const bar = shower.container.querySelector(progressSelector);
         if (!bar) return;
@@ -386,46 +420,27 @@
             bar.setAttribute('aria-valuetext', `Slideshow progress: ${progress}%`);
         };
 
+        shower.addEventListener('start', updateProgress);
         shower.addEventListener('slidechange', updateProgress);
     };
 
-    var scale = shower => {
-        const { container } = shower;
-        const getScale = () => {
-            const maxRatio = Math.max(
-                container.offsetWidth / window.innerWidth,
-                container.offsetHeight / window.innerHeight,
-            );
-
-            return `scale(${1 / maxRatio})`;
-        };
-
-        const updateStyle = () => {
-            container.style.transform = shower.isFullMode ? getScale() : '';
-        };
-
-        shower.addEventListener('modechange', updateStyle);
-        window.addEventListener('resize', updateStyle);
-        window.addEventListener('load', updateStyle);
-    };
-
     const units = ['s', 'm', 'h'];
-    const hasUnits = timing => {
-        return units.some(unit => timing.includes(unit));
+    const hasUnits = (timing) => {
+        return units.some((unit) => timing.includes(unit));
     };
 
-    const parseUnits = timing => {
-        return units.map(unit => timing.match(`(\\S+)${unit}`)).map(match => match && match[1]);
+    const parseUnits = (timing) => {
+        return units.map((unit) => timing.match(`(\\S+)${unit}`)).map((match) => match && match[1]);
     };
 
-    const parseColons = timing => {
+    const parseColons = (timing) => {
         return `::${timing}`.split(':').reverse();
     };
 
     const SEC_IN_MIN = 60;
     const SEC_IN_HOUR = SEC_IN_MIN * 60;
 
-    var parseTiming = timing => {
+    var parseTiming = (timing) => {
         if (!timing) return 0;
 
         const parsed = hasUnits(timing) ? parseUnits(timing) : parseColons(timing);
@@ -438,32 +453,33 @@
         return Math.max(sec * 1000, 0);
     };
 
-    var timer = shower => {
+    var timer = (shower) => {
         let id;
 
-        const setTimer = () => {
+        const resetTimer = () => {
             clearTimeout(id);
             if (shower.isListMode) return;
 
             const slide = shower.activeSlide;
-            const { visitsCount, innerStepsCount } = slide.state;
-            if (visitsCount > 1) return;
+            const { visitCount, innerStepCount } = slide.state;
+            if (visitCount > 1) return;
 
             const timing = parseTiming(slide.element.dataset.timing);
             if (!timing) return;
 
-            if (innerStepsCount) {
-                const stepTiming = timing / (innerStepsCount + 1);
+            if (innerStepCount) {
+                const stepTiming = timing / (innerStepCount + 1);
                 id = setInterval(() => shower.next(), stepTiming);
             } else {
                 id = setTimeout(() => shower.next(), timing);
             }
         };
 
-        shower.addEventListener('modechange', setTimer);
-        shower.addEventListener('slidechange', setTimer);
+        shower.addEventListener('start', resetTimer);
+        shower.addEventListener('modechange', resetTimer);
+        shower.addEventListener('slidechange', resetTimer);
 
-        shower.container.addEventListener('keydown', event => {
+        shower.container.addEventListener('keydown', (event) => {
             if (!event.defaultPrevented) {
                 clearTimeout(id);
             }
@@ -472,7 +488,7 @@
 
     const mdash = '\u2014';
 
-    var title = shower => {
+    var title = (shower) => {
         const { title } = document;
         const updateTitle = () => {
             if (shower.isFullMode) {
@@ -487,134 +503,242 @@
             document.title = title;
         };
 
+        shower.addEventListener('start', updateTitle);
         shower.addEventListener('modechange', updateTitle);
         shower.addEventListener('slidechange', updateTitle);
     };
 
-    var view = shower => {
+    var view = (shower) => {
         const { container } = shower;
         const { fullModeClass, listModeClass } = shower.options;
 
-        shower.addEventListener('modechange', () => {
+        if (container.classList.contains(fullModeClass)) {
+            shower.enterFullMode();
+        } else {
+            container.classList.add(listModeClass);
+        }
+
+        const updateScale = () => {
+            const firstSlide = shower.slides[0];
+            if (!firstSlide) return;
+
+            const { innerWidth, innerHeight } = window;
+            const { offsetWidth, offsetHeight } = firstSlide.element;
+
+            const listScale = 1 / (offsetWidth / innerWidth);
+            const fullScale = 1 / Math.max(offsetWidth / innerWidth, offsetHeight / innerHeight);
+
+            container.style.setProperty('--shower-list-scale', listScale);
+            container.style.setProperty('--shower-full-scale', fullScale);
+        };
+
+        const updateModeView = () => {
             if (shower.isFullMode) {
                 container.classList.remove(listModeClass);
                 container.classList.add(fullModeClass);
-                return;
+            } else {
+                container.classList.remove(fullModeClass);
+                container.classList.add(listModeClass);
             }
 
-            container.classList.remove(fullModeClass);
-            container.classList.add(listModeClass);
+            updateScale();
+
+            if (shower.isFullMode) return;
 
             const slide = shower.activeSlide;
             if (slide) {
                 slide.element.scrollIntoView({ block: 'center' });
             }
-        });
+        };
 
+        shower.addEventListener('start', updateModeView);
+        shower.addEventListener('modechange', updateModeView);
         shower.addEventListener('slidechange', () => {
+            if (shower.isFullMode) return;
+
             const slide = shower.activeSlide;
             slide.element.scrollIntoView({ block: 'nearest' });
         });
 
-        shower.addEventListener('start', () => {
-            if (container.classList.contains(fullModeClass)) {
-                shower.enterFullMode();
-            } else {
-                container.classList.add(listModeClass);
+        window.addEventListener('resize', updateScale);
+    };
+
+    var touch = (shower) => {
+        let exitFullScreen = false;
+        let clickable = false;
+
+        document.addEventListener('touchstart', (event) => {
+            if (event.touches.length === 1) {
+                const touch = event.touches[0];
+                const x = touch.clientX;
+                const { target } = touch;
+                clickable = target.tabIndex !== -1;
+                if (!clickable) {
+                    if (shower.isFullMode) {
+                        if (event.cancelable) event.preventDefault();
+                        if (window.innerWidth / 2 < x) {
+                            shower.next();
+                        } else {
+                            shower.prev();
+                        }
+                    }
+                }
+            } else if (event.touches.length === 3) {
+                exitFullScreen = true;
             }
         });
+
+        shower.container.addEventListener('touchend', (event) => {
+            if (exitFullScreen) {
+                event.preventDefault();
+                exitFullScreen = false;
+                shower.exitFullMode();
+            } else if (event.touches.length === 1 && !clickable && shower.isFullMode)
+                event.preventDefault();
+        });
+    };
+
+    var mouse = (shower) => {
+        const { mouseHiddenClass, mouseInactivityTimeout } = shower.options;
+
+        let hideMouseTimeoutId = null;
+
+        const cleanUp = () => {
+            shower.container.classList.remove(mouseHiddenClass);
+            clearTimeout(hideMouseTimeoutId);
+            hideMouseTimeoutId = null;
+        };
+
+        const hideMouseIfInactive = () => {
+            if (hideMouseTimeoutId !== null) {
+                cleanUp();
+            }
+
+            hideMouseTimeoutId = setTimeout(() => {
+                shower.container.classList.add(mouseHiddenClass);
+            }, mouseInactivityTimeout);
+        };
+
+        const initHideMouseIfInactiveModule = () => {
+            shower.container.addEventListener('mousemove', hideMouseIfInactive);
+        };
+
+        const destroyHideMouseIfInactiveModule = () => {
+            shower.container.removeEventListener('mousemove', hideMouseIfInactive);
+            cleanUp();
+        };
+
+        const handleModeChange = () => {
+            if (shower.isFullMode) {
+                initHideMouseIfInactiveModule();
+            } else {
+                destroyHideMouseIfInactiveModule();
+            }
+        };
+
+        shower.addEventListener('start', handleModeChange);
+        shower.addEventListener('modechange', handleModeChange);
     };
 
-    var installModules = shower => {
+    var installModules = (shower) => {
         a11y(shower);
-        keys(shower); // should come before `timer`
         progress(shower);
-        next(shower); // should come before `timer`
-        timer(shower);
-        title(shower); // should come before `location`
-        location$1(shower);
+        keys(shower);
+        next(shower);
+        timer(shower); // should come after `keys` and `next`
+        title(shower);
+        location$1(shower); // should come after `title`
         view(shower);
-        scale(shower);
-    };
+        touch(shower);
+        mouse(shower);
 
-    const ensureSlideId = (slideElement, index) => {
-        if (!slideElement.id) {
-            slideElement.id = index + 1;
+        // maintains invariant: active slide always exists in `full` mode
+        if (shower.isFullMode && !shower.activeSlide) {
+            shower.first();
         }
     };
 
     class Shower extends EventTarget {
+        /**
+         * @param {object=} options
+         */
         constructor(options) {
             super();
 
+            defineReadOnly(this, {
+                options: { ...defaultOptions, ...options },
+            });
+
             this._mode = 'list';
             this._isStarted = false;
-            this.options = Object.assign({}, defaultOptions, options);
+            this._container = null;
         }
 
         /**
-         * @param {object} options
+         * @param {object=} options
+         * @throws {ShowerError}
          */
         configure(options) {
+            if (this._isStarted) {
+                throw new ShowerError('Shower should be configured before it is started.');
+            }
+
             Object.assign(this.options, options);
         }
 
+        /**
+         * @throws {ShowerError}
+         * @emits Shower#start
+         */
         start() {
             if (this._isStarted) return;
 
             const { containerSelector } = this.options;
-            this.container = document.querySelector(containerSelector);
-            if (!this.container) {
-                throw new Error(`Shower container with selector '${containerSelector}' not found.`);
+            this._container = document.querySelector(containerSelector);
+            if (!this._container) {
+                throw new ShowerError(
+                    `Shower container with selector '${containerSelector}' was not found.`,
+                );
             }
 
-            this._isStarted = true;
             this._initSlides();
-
-            // maintains invariant: active slide always exists in `full` mode
-            this.addEventListener('modechange', () => {
-                if (this.isFullMode && !this.activeSlide) {
-                    this.first();
-                }
-            });
-
             installModules(this);
+
+            this._isStarted = true;
             this.dispatchEvent(new Event('start'));
         }
 
         _initSlides() {
-            const slideElements = [
-                ...this.container.querySelectorAll(this.options.slideSelector),
-            ].filter(slideElement => !slideElement.hidden);
-
-            slideElements.forEach(ensureSlideId);
-            this.slides = slideElements.map(slideElement => {
-                const slide = new Slide(slideElement, this.options);
-
-                slide.addEventListener('activate', () => {
-                    this._toggleActiveSlide(slide);
-                });
-
-                slide.element.addEventListener('click', () => {
-                    if (this.isListMode) {
-                        slide.activate();
-                        this.enterFullMode();
-                    }
-                });
+            const visibleSlideSelector = `${this.options.slideSelector}:not([hidden])`;
+            const visibleSlideElements = this._container.querySelectorAll(visibleSlideSelector);
 
-                return slide;
+            this.slides = Array.from(visibleSlideElements, (slideElement, index) => {
+                if (!slideElement.id) {
+                    slideElement.id = index + 1;
+                }
+
+                return new Slide(this, slideElement);
             });
         }
 
-        _toggleActiveSlide(target) {
-            // at this point, there can be two active slides
-            this.slides.forEach(slide => {
-                if (slide !== target) {
-                    slide.deactivate();
-                }
-            });
+        _setMode(mode) {
+            if (mode === this._mode) return;
 
-            this.dispatchEvent(new Event('slidechange'));
+            this._mode = mode;
+            this.dispatchEvent(new Event('modechange'));
+        }
+
+        /**
+         * @param {Event} event
+         */
+        dispatchEvent(event) {
+            if (!this._isStarted) return false;
+
+            return super.dispatchEvent(event);
+        }
+
+        get container() {
+            return this._container;
         }
 
         get isFullMode() {
@@ -626,31 +750,27 @@
         }
 
         get activeSlide() {
-            return this.slides.find(slide => slide.isActive);
+            return this.slides.find((slide) => slide.isActive);
         }
 
         get activeSlideIndex() {
-            return this.slides.findIndex(slide => slide.isActive);
+            return this.slides.findIndex((slide) => slide.isActive);
         }
 
         /**
          * Slide fills the maximum area.
+         * @emits Shower#modechange
          */
         enterFullMode() {
-            if (!this.isFullMode) {
-                this._mode = 'full';
-                this.dispatchEvent(new Event('modechange'));
-            }
+            this._setMode('full');
         }
 
         /**
          * Shower returns into list mode.
+         * @emits Shower#modechange
          */
         exitFullMode() {
-            if (!this.isListMode) {
-                this._mode = 'list';
-                this.dispatchEvent(new Event('modechange'));
-            }
+            this._setMode('list');
         }
 
         /**
@@ -666,27 +786,29 @@
         /**
          * @param {number} delta
          */
-        go(delta) {
+        goBy(delta) {
             this.goTo(this.activeSlideIndex + delta);
         }
 
         /**
-         * @param {boolean=} isForce
+         * @param {boolean} [isForce=false]
+         * @emits Shower#prev
          */
         prev(isForce) {
             const prev = new Event('prev', { cancelable: !isForce });
             if (this.dispatchEvent(prev)) {
-                this.go(-1);
+                this.goBy(-1);
             }
         }
 
         /**
-         * @param {boolean=} isForce
+         * @param {boolean} [isForce=false]
+         * @emits Shower#next
          */
         next(isForce) {
             const next = new Event('next', { cancelable: !isForce });
             if (this.dispatchEvent(next)) {
-                this.go(1);
+                this.goBy(1);
             }
         }
 
@@ -711,4 +833,4 @@
         shower.start();
     });
 
-}());
+})();