@shower/core 3.2.0 → 3.3.1

package/lib/modules/progress.js

@@ -1,22 +1,22 @@
 export default (shower) => {
-    const { progressSelector } = shower.options;
-    const bar = shower.container.querySelector(progressSelector);
-    if (!bar) return;
+	const { progressSelector } = shower.options;
+	const bar = shower.container.querySelector(progressSelector);
+	if (!bar) return;
 
-    bar.setAttribute('role', 'progressbar');
-    bar.setAttribute('aria-valuemin', 0);
-    bar.setAttribute('aria-valuemax', 100);
+	bar.setAttribute('role', 'progressbar');
+	bar.setAttribute('aria-valuemin', 0);
+	bar.setAttribute('aria-valuemax', 100);
 
-    const updateProgress = () => {
-        const index = shower.activeSlideIndex;
-        const { length } = shower.slides;
-        const progress = (index / (length - 1)) * 100;
+	const updateProgress = () => {
+		const index = shower.activeSlideIndex;
+		const { length } = shower.slides;
+		const progress = (index / (length - 1)) * 100;
 
-        bar.style.width = `${progress}%`;
-        bar.setAttribute('aria-valuenow', progress);
-        bar.setAttribute('aria-valuetext', `Slideshow progress: ${progress}%`);
-    };
+		bar.style.width = `${progress}%`;
+		bar.setAttribute('aria-valuenow', progress);
+		bar.setAttribute('aria-valuetext', `Slideshow progress: ${progress}%`);
+	};
 
-    shower.addEventListener('start', updateProgress);
-    shower.addEventListener('slidechange', updateProgress);
+	shower.addEventListener('start', updateProgress);
+	shower.addEventListener('slidechange', updateProgress);
 };

package/lib/modules/timer.js

@@ -1,34 +1,34 @@
-import parseTiming from './parse-timing';
+import parseTiming from './parse-timing.js';
 
 export default (shower) => {
-    let id;
+	let id;
 
-    const resetTimer = () => {
-        clearTimeout(id);
-        if (shower.isListMode) return;
+	const resetTimer = () => {
+		clearTimeout(id);
+		if (shower.isListMode) return;
 
-        const slide = shower.activeSlide;
-        const { visitCount, innerStepCount } = slide.state;
-        if (visitCount > 1) return;
+		const slide = shower.activeSlide;
+		const { visitCount, innerStepCount } = slide.state;
+		if (visitCount > 1) return;
 
-        const timing = parseTiming(slide.element.dataset.timing);
-        if (!timing) return;
+		const timing = parseTiming(slide.element.dataset.timing);
+		if (!timing) return;
 
-        if (innerStepCount) {
-            const stepTiming = timing / (innerStepCount + 1);
-            id = setInterval(() => shower.next(), stepTiming);
-        } else {
-            id = setTimeout(() => shower.next(), timing);
-        }
-    };
+		if (innerStepCount) {
+			const stepTiming = timing / (innerStepCount + 1);
+			id = setInterval(() => shower.next(), stepTiming);
+		} else {
+			id = setTimeout(() => shower.next(), timing);
+		}
+	};
 
-    shower.addEventListener('start', resetTimer);
-    shower.addEventListener('modechange', resetTimer);
-    shower.addEventListener('slidechange', resetTimer);
+	shower.addEventListener('start', resetTimer);
+	shower.addEventListener('modechange', resetTimer);
+	shower.addEventListener('slidechange', resetTimer);
 
-    shower.container.addEventListener('keydown', (event) => {
-        if (!event.defaultPrevented) {
-            clearTimeout(id);
-        }
-    });
+	shower.container.addEventListener('keydown', (event) => {
+		if (!event.defaultPrevented) {
+			clearTimeout(id);
+		}
+	});
 };

package/lib/modules/title.js

@@ -1,21 +1,21 @@
 const mdash = '\u2014';
 
 export default (shower) => {
-    const { title } = document;
-    const updateTitle = () => {
-        if (shower.isFullMode) {
-            const slide = shower.activeSlide;
-            const slideTitle = slide.title;
-            if (slideTitle) {
-                document.title = `${slideTitle} ${mdash} ${title}`;
-                return;
-            }
-        }
+	const { title } = document;
+	const updateTitle = () => {
+		if (shower.isFullMode) {
+			const slide = shower.activeSlide;
+			const slideTitle = slide.title;
+			if (slideTitle) {
+				document.title = `${slideTitle} ${mdash} ${title}`;
+				return;
+			}
+		}
 
-        document.title = title;
-    };
+		document.title = title;
+	};
 
-    shower.addEventListener('start', updateTitle);
-    shower.addEventListener('modechange', updateTitle);
-    shower.addEventListener('slidechange', updateTitle);
+	shower.addEventListener('start', updateTitle);
+	shower.addEventListener('modechange', updateTitle);
+	shower.addEventListener('slidechange', updateTitle);
 };

package/lib/modules/touch.js

@@ -1,34 +1,34 @@
 export default (shower) => {
-    let exitFullScreen = false;
-    let clickable = false;
+	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;
-        }
-    });
+	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();
-    });
+	shower.container.addEventListener('touchend', (event) => {
+		if (exitFullScreen) {
+			event.preventDefault();
+			exitFullScreen = false;
+			shower.exitFullMode();
+		} else if (event.touches.length === 1 && !clickable && shower.isFullMode)
+			event.preventDefault();
+	});
 };

package/lib/modules/view.js

@@ -1,54 +1,54 @@
 export default (shower) => {
-    const { container } = shower;
-    const { fullModeClass, listModeClass } = shower.options;
-
-    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);
-        } else {
-            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' });
-    });
-
-    window.addEventListener('resize', updateScale);
+	const { container } = shower;
+	const { fullModeClass, listModeClass } = shower.options;
+
+	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);
+		} else {
+			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' });
+	});
+
+	window.addEventListener('resize', updateScale);
 };

package/lib/shower.js

@@ -1,169 +1,169 @@
-import defaultOptions from './default-options';
-import Slide from './slide';
-import { defineReadOnly, ShowerError } from './utils';
-import installModules from './modules/install';
+import defaultOptions from './default-options.js';
+import Slide from './slide.js';
+import { defineReadOnly, ShowerError } from './utils.js';
+import installModules from './modules/install.js';
 
 class Shower extends EventTarget {
-    /**
-     * @param {object=} options
-     */
-    constructor(options) {
-        super();
-
-        defineReadOnly(this, {
-            options: { ...defaultOptions, ...options },
-        });
-
-        this._mode = 'list';
-        this._isStarted = false;
-        this._container = null;
-    }
-
-    /**
-     * @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 ShowerError(
-                `Shower container with selector '${containerSelector}' was not found.`,
-            );
-        }
-
-        this._initSlides();
-        installModules(this);
-
-        this._isStarted = true;
-        this.dispatchEvent(new Event('start'));
-    }
-
-    _initSlides() {
-        const visibleSlideSelector = `${this.options.slideSelector}:not([hidden])`;
-        const visibleSlideElements = this._container.querySelectorAll(visibleSlideSelector);
-
-        this.slides = Array.from(visibleSlideElements, (slideElement, index) => {
-            if (!slideElement.id) {
-                slideElement.id = index + 1;
-            }
-
-            return new Slide(this, slideElement);
-        });
-    }
-
-    _setMode(mode) {
-        if (mode === this._mode) return;
-
-        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() {
-        return this._mode === 'full';
-    }
-
-    get isListMode() {
-        return this._mode === 'list';
-    }
-
-    get activeSlide() {
-        return this.slides.find((slide) => slide.isActive);
-    }
-
-    get activeSlideIndex() {
-        return this.slides.findIndex((slide) => slide.isActive);
-    }
-
-    /**
-     * Slide fills the maximum area.
-     * @emits Shower#modechange
-     */
-    enterFullMode() {
-        this._setMode('full');
-    }
-
-    /**
-     * Shower returns into list mode.
-     * @emits Shower#modechange
-     */
-    exitFullMode() {
-        this._setMode('list');
-    }
-
-    /**
-     * @param {number} index
-     */
-    goTo(index) {
-        const slide = this.slides[index];
-        if (slide) {
-            slide.activate();
-        }
-    }
-
-    /**
-     * @param {number} delta
-     */
-    goBy(delta) {
-        this.goTo(this.activeSlideIndex + delta);
-    }
-
-    /**
-     * @param {boolean} [isForce=false]
-     * @emits Shower#prev
-     */
-    prev(isForce) {
-        const prev = new Event('prev', { cancelable: !isForce });
-        if (this.dispatchEvent(prev)) {
-            this.goBy(-1);
-        }
-    }
-
-    /**
-     * @param {boolean} [isForce=false]
-     * @emits Shower#next
-     */
-    next(isForce) {
-        const next = new Event('next', { cancelable: !isForce });
-        if (this.dispatchEvent(next)) {
-            this.goBy(1);
-        }
-    }
-
-    first() {
-        this.goTo(0);
-    }
-
-    last() {
-        this.goTo(this.slides.length - 1);
-    }
+	/**
+	 * @param {object=} options
+	 */
+	constructor(options) {
+		super();
+
+		defineReadOnly(this, {
+			options: { ...defaultOptions, ...options },
+		});
+
+		this._mode = 'list';
+		this._isStarted = false;
+		this._container = null;
+	}
+
+	/**
+	 * @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 ShowerError(
+				`Shower container with selector '${containerSelector}' was not found.`,
+			);
+		}
+
+		this._initSlides();
+		installModules(this);
+
+		this._isStarted = true;
+		this.dispatchEvent(new Event('start'));
+	}
+
+	_initSlides() {
+		const visibleSlideSelector = `${this.options.slideSelector}:not([hidden])`;
+		const visibleSlideElements = this._container.querySelectorAll(visibleSlideSelector);
+
+		this.slides = Array.from(visibleSlideElements, (slideElement, index) => {
+			if (!slideElement.id) {
+				slideElement.id = index + 1;
+			}
+
+			return new Slide(this, slideElement);
+		});
+	}
+
+	_setMode(mode) {
+		if (mode === this._mode) return;
+
+		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() {
+		return this._mode === 'full';
+	}
+
+	get isListMode() {
+		return this._mode === 'list';
+	}
+
+	get activeSlide() {
+		return this.slides.find((slide) => slide.isActive);
+	}
+
+	get activeSlideIndex() {
+		return this.slides.findIndex((slide) => slide.isActive);
+	}
+
+	/**
+	 * Slide fills the maximum area.
+	 * @emits Shower#modechange
+	 */
+	enterFullMode() {
+		this._setMode('full');
+	}
+
+	/**
+	 * Shower returns into list mode.
+	 * @emits Shower#modechange
+	 */
+	exitFullMode() {
+		this._setMode('list');
+	}
+
+	/**
+	 * @param {number} index
+	 */
+	goTo(index) {
+		const slide = this.slides[index];
+		if (slide) {
+			slide.activate();
+		}
+	}
+
+	/**
+	 * @param {number} delta
+	 */
+	goBy(delta) {
+		this.goTo(this.activeSlideIndex + delta);
+	}
+
+	/**
+	 * @param {boolean} [isForce=false]
+	 * @emits Shower#prev
+	 */
+	prev(isForce) {
+		const prev = new Event('prev', { cancelable: !isForce });
+		if (this.dispatchEvent(prev)) {
+			this.goBy(-1);
+		}
+	}
+
+	/**
+	 * @param {boolean} [isForce=false]
+	 * @emits Shower#next
+	 */
+	next(isForce) {
+		const next = new Event('next', { cancelable: !isForce });
+		if (this.dispatchEvent(next)) {
+			this.goBy(1);
+		}
+	}
+
+	first() {
+		this.goTo(0);
+	}
+
+	last() {
+		this.goTo(this.slides.length - 1);
+	}
 }
 
 export default Shower;