@shower/core 3.3.0 → 3.4.0

package/lib/modules/next.js

@@ -1,54 +1,54 @@
 export default (shower) => {
-    const { stepSelector, activeSlideClass, visitedSlideClass } = shower.options;
+	const { stepSelector, activeSlideClass, visitedSlideClass } = shower.options;
 
-    let innerSteps;
-    let activeIndex;
+	let innerSteps;
+	let activeIndex;
 
-    const isActive = (step) => step.classList.contains(activeSlideClass);
-    const isVisited = (step) => step.classList.contains(visitedSlideClass);
+	const isActive = (step) => step.classList.contains(activeSlideClass);
+	const isVisited = (step) => step.classList.contains(visitedSlideClass);
 
-    const setInnerStepsState = () => {
-        if (shower.isListMode) return;
+	const setInnerStepsState = () => {
+		if (shower.isListMode) return;
 
-        const slide = shower.activeSlide;
+		const slide = shower.activeSlide;
 
-        innerSteps = [...slide.element.querySelectorAll(stepSelector)];
-        activeIndex =
-            innerSteps.length && innerSteps.every(isVisited)
-                ? innerSteps.length
-                : innerSteps.filter(isActive).length - 1;
+		innerSteps = [...slide.element.querySelectorAll(stepSelector)];
+		activeIndex =
+			innerSteps.length && innerSteps.every(isVisited)
+				? innerSteps.length
+				: innerSteps.filter(isActive).length - 1;
 
-        slide.state.innerStepCount = innerSteps.length;
-    };
+		slide.state.innerStepCount = innerSteps.length;
+	};
 
-    shower.addEventListener('start', setInnerStepsState);
-    shower.addEventListener('modechange', setInnerStepsState);
-    shower.addEventListener('slidechange', setInnerStepsState);
+	shower.addEventListener('start', setInnerStepsState);
+	shower.addEventListener('modechange', setInnerStepsState);
+	shower.addEventListener('slidechange', setInnerStepsState);
 
-    shower.addEventListener('next', (event) => {
-        if (shower.isListMode || event.defaultPrevented || !event.cancelable) return;
+	shower.addEventListener('next', (event) => {
+		if (shower.isListMode || event.defaultPrevented || !event.cancelable) return;
 
-        activeIndex++;
-        innerSteps.forEach((step, index) => {
-            step.classList.toggle(visitedSlideClass, index < activeIndex);
-            step.classList.toggle(activeSlideClass, index === activeIndex);
-        });
+		activeIndex++;
+		innerSteps.forEach((step, index) => {
+			step.classList.toggle(visitedSlideClass, index < activeIndex);
+			step.classList.toggle(activeSlideClass, index === activeIndex);
+		});
 
-        if (activeIndex < innerSteps.length) {
-            event.preventDefault();
-        }
-    });
+		if (activeIndex < innerSteps.length) {
+			event.preventDefault();
+		}
+	});
 
-    shower.addEventListener('prev', (event) => {
-        if (shower.isListMode || event.defaultPrevented || !event.cancelable) return;
-        if (activeIndex === -1 || activeIndex === innerSteps.length) 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);
-        });
+		activeIndex--;
+		innerSteps.forEach((step, index) => {
+			step.classList.toggle(visitedSlideClass, index < activeIndex + 1);
+			step.classList.toggle(activeSlideClass, index === activeIndex);
+		});
 
-        event.preventDefault();
-    });
+		event.preventDefault();
+	});
 };

package/lib/modules/parse-timing.js

@@ -0,0 +1,28 @@
+const units = ['s', 'm', 'h'];
+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 parseColons = (timing) => {
+	return `::${timing}`.split(':').reverse();
+};
+
+const SEC_IN_MIN = 60;
+const SEC_IN_HOUR = SEC_IN_MIN * 60;
+
+export default (timing) => {
+	if (!timing) return 0;
+
+	const parsed = hasUnits(timing) ? parseUnits(timing) : parseColons(timing);
+
+	let [sec, min, hour] = parsed.map(Number);
+
+	sec += min * SEC_IN_MIN;
+	sec += hour * SEC_IN_HOUR;
+
+	return Math.max(sec * 1000, 0);
+};

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);
 };