@shower/core 3.0.0-2 → 3.3.0

package/lib/default-options.js

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

package/lib/modules/a11y.js

@@ -0,0 +1,38 @@
+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;
+};
+
+export default (shower) => {
+    const { container } = shower;
+    const liveRegion = createLiveRegion();
+    container.appendChild(liveRegion);
+
+    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;
+        }
+    };
+
+    shower.addEventListener('start', () => {
+        updateDocumentRole();
+        updateLiveRegion();
+    });
+
+    shower.addEventListener('modechange', updateDocumentRole);
+    shower.addEventListener('slidechange', updateLiveRegion);
+};

package/lib/modules/install.js

@@ -0,0 +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 mouse from './mouse';
+
+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);
+    mouse(shower);
+
+    // maintains invariant: active slide always exists in `full` mode
+    if (shower.isFullMode && !shower.activeSlide) {
+        shower.first();
+    }
+};

package/lib/modules/keys.js

@@ -0,0 +1,113 @@
+import { isInteractiveElement } from '../utils';
+
+export default (shower) => {
+    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();
+                    }
+
+                    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 '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 'HOME':
+                event.preventDefault();
+                shower.first();
+                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;
+
+            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 '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;
+
+        doSlideActions(event);
+        doModeActions(event);
+    });
+};

package/lib/modules/location.js

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

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

@@ -0,0 +1,54 @@
+export default (shower) => {
+    const { stepSelector, activeSlideClass, visitedSlideClass } = shower.options;
+
+    let innerSteps;
+    let activeIndex;
+
+    const isActive = (step) => step.classList.contains(activeSlideClass);
+    const isVisited = (step) => step.classList.contains(visitedSlideClass);
+
+    const setInnerStepsState = () => {
+        if (shower.isListMode) return;
+
+        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('start', setInnerStepsState);
+    shower.addEventListener('modechange', setInnerStepsState);
+    shower.addEventListener('slidechange', setInnerStepsState);
+
+    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);
+        });
+
+        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;
+
+        activeIndex--;
+        innerSteps.forEach((step, index) => {
+            step.classList.toggle(visitedSlideClass, index < activeIndex + 1);
+            step.classList.toggle(activeSlideClass, index === activeIndex);
+        });
+
+        event.preventDefault();
+    });
+};

package/lib/modules/parse-timing.mjs

@@ -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

@@ -0,0 +1,22 @@
+export default (shower) => {
+    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);
+
+    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}%`);
+    };
+
+    shower.addEventListener('start', updateProgress);
+    shower.addEventListener('slidechange', updateProgress);
+};

package/lib/modules/timer.js

@@ -0,0 +1,34 @@
+import parseTiming from './parse-timing';
+
+export default (shower) => {
+    let id;
+
+    const resetTimer = () => {
+        clearTimeout(id);
+        if (shower.isListMode) return;
+
+        const slide = shower.activeSlide;
+        const { visitCount, innerStepCount } = slide.state;
+        if (visitCount > 1) 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);
+        }
+    };
+
+    shower.addEventListener('start', resetTimer);
+    shower.addEventListener('modechange', resetTimer);
+    shower.addEventListener('slidechange', resetTimer);
+
+    shower.container.addEventListener('keydown', (event) => {
+        if (!event.defaultPrevented) {
+            clearTimeout(id);
+        }
+    });
+};

package/lib/modules/title.js

@@ -0,0 +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;
+            }
+        }
+
+        document.title = title;
+    };
+
+    shower.addEventListener('start', updateTitle);
+    shower.addEventListener('modechange', updateTitle);
+    shower.addEventListener('slidechange', updateTitle);
+};

package/lib/modules/touch.js

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

package/lib/modules/view.js

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