@shower/core 3.2.0 → 3.3.1

package/lib/default-options.js

@@ -1,12 +1,14 @@
 export default {
-    containerSelector: '.shower',
-    progressSelector: '.progress',
-    stepSelector: '.next',
-    fullModeClass: 'full',
-    listModeClass: 'list',
+	containerSelector: '.shower',
+	progressSelector: '.progress',
+	stepSelector: '.next',
+	fullModeClass: 'full',
+	listModeClass: 'list',
+	mouseHiddenClass: 'pointless',
+	mouseInactivityTimeout: 5000,
 
-    slideSelector: '.slide',
-    slideTitleSelector: 'h2',
-    activeSlideClass: 'active',
-    visitedSlideClass: 'visited',
+	slideSelector: '.slide',
+	slideTitleSelector: 'h2',
+	activeSlideClass: 'active',
+	visitedSlideClass: 'visited',
 };

package/lib/{start.js → index.js}

@@ -1,14 +1,14 @@
-import { contentLoaded } from './utils';
-import Shower from './shower';
+import { contentLoaded } from './utils.js';
+import Shower from './shower.js';
 
 const options = document.currentScript.dataset;
 const shower = new Shower(options);
 
 Object.defineProperty(window, 'shower', {
-    value: shower,
-    configurable: true,
+	value: shower,
+	configurable: true,
 });
 
 contentLoaded(() => {
-    shower.start();
+	shower.start();
 });

package/lib/modules/a11y.js

@@ -1,38 +1,40 @@
 const createLiveRegion = () => {
-    const liveRegion = document.createElement('section');
-    liveRegion.className = 'region';
-    liveRegion.setAttribute('role', 'region');
-    liveRegion.setAttribute('aria-live', 'assertive');
-    liveRegion.setAttribute('aria-relevant', 'all');
-    liveRegion.setAttribute('aria-label', 'Slide Content: Auto-updating');
-    return liveRegion;
+	const liveRegion = document.createElement('section');
+	liveRegion.className = 'region';
+	liveRegion.setAttribute('role', 'region');
+	liveRegion.setAttribute('aria-live', 'assertive');
+	liveRegion.setAttribute('aria-relevant', 'all');
+	liveRegion.setAttribute('aria-label', 'Slide Content: Auto-updating');
+	return liveRegion;
 };
 
 export default (shower) => {
-    const { container } = shower;
-    const liveRegion = createLiveRegion();
-    container.appendChild(liveRegion);
+	const { container } = shower;
+	const liveRegion = createLiveRegion();
+	container.appendChild(liveRegion);
 
-    const updateDocumentRole = () => {
-        if (shower.isFullMode) {
-            container.setAttribute('role', 'application');
-        } else {
-            container.removeAttribute('role');
-        }
-    };
+	const updateDocumentRole = () => {
+		if (shower.isFullMode) {
+			container.setAttribute('role', 'application');
+		} else {
+			container.removeAttribute('role');
+		}
+	};
 
-    const updateLiveRegion = () => {
-        const slide = shower.activeSlide;
-        if (slide) {
-            liveRegion.innerHTML = slide.element.innerHTML;
-        }
-    };
+	const updateLiveRegion = () => {
+		const slide = shower.activeSlide;
+		if (slide) {
+			const clone = slide.element.cloneNode(true);
+			clone.querySelectorAll('style').forEach((style) => style.remove());
+			liveRegion.innerHTML = clone.innerHTML;
+		}
+	};
 
-    shower.addEventListener('start', () => {
-        updateDocumentRole();
-        updateLiveRegion();
-    });
+	shower.addEventListener('start', () => {
+		updateDocumentRole();
+		updateLiveRegion();
+	});
 
-    shower.addEventListener('modechange', updateDocumentRole);
-    shower.addEventListener('slidechange', updateLiveRegion);
+	shower.addEventListener('modechange', updateDocumentRole);
+	shower.addEventListener('slidechange', updateLiveRegion);
 };

package/lib/modules/install.js

@@ -1,26 +1,28 @@
-import a11y from './a11y';
-import keys from './keys';
-import location from './location';
-import next from './next';
-import progress from './progress';
-import timer from './timer';
-import title from './title';
-import view from './view';
-import touch from './touch';
+import a11y from './a11y.js';
+import keys from './keys.js';
+import location from './location.js';
+import next from './next.js';
+import progress from './progress.js';
+import timer from './timer.js';
+import title from './title.js';
+import view from './view.js';
+import touch from './touch.js';
+import mouse from './mouse.js';
 
 export default (shower) => {
-    a11y(shower);
-    progress(shower);
-    keys(shower);
-    next(shower);
-    timer(shower); // should come after `keys` and `next`
-    title(shower);
-    location(shower); // should come after `title`
-    view(shower);
-    touch(shower);
+	a11y(shower);
+	progress(shower);
+	keys(shower);
+	next(shower);
+	timer(shower); // should come after `keys` and `next`
+	title(shower);
+	location(shower); // should come after `title`
+	view(shower);
+	touch(shower);
+	mouse(shower);
 
-    // maintains invariant: active slide always exists in `full` mode
-    if (shower.isFullMode && !shower.activeSlide) {
-        shower.first();
-    }
+	// maintains invariant: active slide always exists in `full` mode
+	if (shower.isFullMode && !shower.activeSlide) {
+		shower.first();
+	}
 };

package/lib/modules/keys.js

@@ -1,113 +1,113 @@
-import { isInteractiveElement } from '../utils';
+import { isInteractiveElement } from '../utils.js';
 
 export default (shower) => {
-    const doSlideActions = (event) => {
-        const isShowerAction = !(event.ctrlKey || event.altKey || event.metaKey);
+	const doSlideActions = (event) => {
+		const isShowerAction = !(event.ctrlKey || event.altKey || event.metaKey);
 
-        switch (event.key.toUpperCase()) {
-            case 'ENTER':
-                if (event.metaKey && shower.isListMode) {
-                    if (event.shiftKey) {
-                        event.preventDefault();
-                        shower.first();
-                    }
+		switch (event.key.toUpperCase()) {
+			case 'ENTER':
+				if (event.metaKey && shower.isListMode) {
+					if (event.shiftKey) {
+						event.preventDefault();
+						shower.first();
+					}
 
-                    break;
-                }
+					break;
+				}
 
-                event.preventDefault();
-                if (event.shiftKey) {
-                    shower.prev();
-                } else {
-                    shower.next();
-                }
-                break;
+				event.preventDefault();
+				if (event.shiftKey) {
+					shower.prev();
+				} else {
+					shower.next();
+				}
+				break;
 
-            case 'BACKSPACE':
-            case 'PAGEUP':
-            case 'ARROWUP':
-            case 'ARROWLEFT':
-            case 'H':
-            case 'K':
-            case 'P':
-                if (isShowerAction) {
-                    event.preventDefault();
-                    shower.prev(event.shiftKey);
-                }
-                break;
+			case 'BACKSPACE':
+			case 'PAGEUP':
+			case 'ARROWUP':
+			case 'ARROWLEFT':
+			case 'H':
+			case 'K':
+			case 'P':
+				if (isShowerAction) {
+					event.preventDefault();
+					shower.prev(event.shiftKey);
+				}
+				break;
 
-            case 'PAGEDOWN':
-            case 'ARROWDOWN':
-            case 'ARROWRIGHT':
-            case 'L':
-            case 'J':
-            case 'N':
-                if (isShowerAction) {
-                    event.preventDefault();
-                    shower.next(event.shiftKey);
-                }
-                break;
+			case 'PAGEDOWN':
+			case 'ARROWDOWN':
+			case 'ARROWRIGHT':
+			case 'L':
+			case 'J':
+			case 'N':
+				if (isShowerAction) {
+					event.preventDefault();
+					shower.next(event.shiftKey);
+				}
+				break;
 
-            case ' ':
-                if (isShowerAction && shower.isFullMode) {
-                    event.preventDefault();
-                    if (event.shiftKey) {
-                        shower.prev();
-                    } else {
-                        shower.next();
-                    }
-                }
-                break;
+			case ' ':
+				if (isShowerAction && shower.isFullMode) {
+					event.preventDefault();
+					if (event.shiftKey) {
+						shower.prev();
+					} else {
+						shower.next();
+					}
+				}
+				break;
 
-            case 'HOME':
-                event.preventDefault();
-                shower.first();
-                break;
+			case 'HOME':
+				event.preventDefault();
+				shower.first();
+				break;
 
-            case 'END':
-                event.preventDefault();
-                shower.last();
-                break;
-        }
-    };
+			case 'END':
+				event.preventDefault();
+				shower.last();
+				break;
+		}
+	};
 
-    const doModeActions = (event) => {
-        switch (event.key.toUpperCase()) {
-            case 'ESCAPE':
-                if (shower.isFullMode) {
-                    event.preventDefault();
-                    shower.exitFullMode();
-                }
-                break;
+	const doModeActions = (event) => {
+		switch (event.key.toUpperCase()) {
+			case 'ESCAPE':
+				if (shower.isFullMode) {
+					event.preventDefault();
+					shower.exitFullMode();
+				}
+				break;
 
-            case 'ENTER':
-                if (event.metaKey && shower.isListMode) {
-                    event.preventDefault();
-                    shower.enterFullMode();
-                }
-                break;
+			case 'ENTER':
+				if (event.metaKey && shower.isListMode) {
+					event.preventDefault();
+					shower.enterFullMode();
+				}
+				break;
 
-            case 'P':
-                if (event.metaKey && event.altKey && shower.isListMode) {
-                    event.preventDefault();
-                    shower.enterFullMode();
-                }
-                break;
+			case 'P':
+				if (event.metaKey && event.altKey && shower.isListMode) {
+					event.preventDefault();
+					shower.enterFullMode();
+				}
+				break;
 
-            case 'F5':
-                if (event.shiftKey && shower.isListMode) {
-                    event.preventDefault();
-                    shower.enterFullMode();
-                }
-                break;
-        }
-    };
+			case 'F5':
+				if (event.shiftKey && shower.isListMode) {
+					event.preventDefault();
+					shower.enterFullMode();
+				}
+				break;
+		}
+	};
 
-    shower.container.addEventListener('keydown', (event) => {
-        if (event.defaultPrevented) return;
-        if (isInteractiveElement(event.target)) return;
+	shower.container.addEventListener('keydown', (event) => {
+		if (event.defaultPrevented) return;
+		if (isInteractiveElement(event.target)) return;
 
-        doSlideActions(event);
-        doModeActions(event);
-    });
+		doSlideActions(event);
+		doModeActions(event);
+	});
 };

package/lib/modules/location.js

@@ -1,53 +1,53 @@
 export default (shower) => {
-    const composeURL = () => {
-        const search = shower.isFullMode ? '?full' : '';
-        const slide = shower.activeSlide;
-        const hash = slide ? `#${slide.id}` : '';
-
-        return location.pathname + search + hash; // path is required to clear search params
-    };
-
-    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);
-        if (target) {
-            target.activate();
-        } else if (!shower.activeSlide) {
-            shower.first(); // invalid hash
-        }
-    };
-
-    const applyURL = () => {
-        applyURLMode();
-        applyURLSlide();
-    };
-
-    applyURL();
-    window.addEventListener('popstate', applyURL);
-
-    shower.addEventListener('start', () => {
-        history.replaceState(null, document.title, composeURL());
-    });
-
-    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);
-        }
-    });
+	const composeURL = () => {
+		const search = shower.isFullMode ? '?full' : '';
+		const slide = shower.activeSlide;
+		const hash = slide ? `#${slide.id}` : '';
+
+		return location.pathname + search + hash; // path is required to clear search params
+	};
+
+	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);
+		if (target) {
+			target.activate();
+		} else if (!shower.activeSlide) {
+			shower.first(); // invalid hash
+		}
+	};
+
+	const applyURL = () => {
+		applyURLMode();
+		applyURLSlide();
+	};
+
+	applyURL();
+	window.addEventListener('popstate', applyURL);
+
+	shower.addEventListener('start', () => {
+		history.replaceState(null, document.title, composeURL());
+	});
+
+	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);
+		}
+	});
 };

package/lib/modules/mouse.js

@@ -0,0 +1,41 @@
+export default (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);
+};

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