Updates

index.html

@@ -203,7 +203,7 @@
 
     <div class="progress"></div>
 
-    <script src="shower/shower.min.js"></script>
+    <script src="shower/shower.js"></script>
     <!-- Copyright © 3000 Yours Truly, Famous Inc. -->
 
 </body>

shower/shower.js

+/**
+ * Core for Shower HTML presentation engine
+ * @shower/core v3.0.0-2, https://github.com/shower/core
+ * @copyright 2010–2020 Vadim Makeev, https://pepelsbey.net
+ * @license MIT
+ */
+(function () {
+    'use strict';
+
+    const EVENT_TARGET = Symbol('EventTarget');
+
+    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) => {
+        if (document.currentScript.async) {
+            callback();
+        } else {
+            document.addEventListener('DOMContentLoaded', callback);
+        }
+    };
+
+    var defaultOptions = {
+        containerSelector: '.shower',
+        progressSelector: '.progress',
+        stepSelector: '.next',
+        fullModeClass: 'full',
+        listModeClass: 'list',
+
+        slideSelector: '.slide',
+        slideTitleSelector: 'h2',
+        activeSlideClass: 'active',
+        visitedSlideClass: 'visited',
+    };
+
+    /**
+     * @param {HTMLElement} element
+     * @param {object} options
+     */
+    class Slide extends EventTarget {
+        constructor(element, options) {
+            super();
+
+            this.element = element;
+            this.options = options;
+
+            this._isActive = false;
+            this.state = {
+                visitsCount: 0,
+                innerStepsCount: 0,
+            };
+        }
+
+        get isActive() {
+            return this._isActive;
+        }
+
+        get isVisited() {
+            return this.state.visitsCount > 0;
+        }
+
+        get id() {
+            return this.element.id;
+        }
+
+        get title() {
+            const titleElement = this.element.querySelector(this.options.slideTitleSelector);
+            return titleElement ? titleElement.innerText : '';
+        }
+
+        activate() {
+            if (this._isActive) return;
+
+            this._isActive = true;
+            this.state.visitsCount++;
+            this.element.classList.add(this.options.activeSlideClass);
+            this.dispatchEvent(new Event('activate'));
+        }
+
+        deactivate() {
+            if (!this._isActive) return;
+
+            this._isActive = false;
+            this.element.classList.replace(
+                this.options.activeSlideClass,
+                this.options.visitedSlideClass,
+            );
+            this.dispatchEvent(new Event('deactivate'));
+        }
+    }
+
+    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;
+    };
+
+    var a11y = (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('modechange', updateDocumentRole);
+        shower.addEventListener('slidechange', updateLiveRegion);
+    };
+
+    var keys = (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 '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);
+        });
+    };
+
+    var location$1 = (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 URL(location).searchParams.has('full');
+
+            freezeHistory(() => {
+                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) {
+                freezeHistory(() => {
+                    target.activate();
+                });
+            } else if (!shower.activeSlide) {
+                shower.first(); // invalid hash
+            }
+        };
+
+        const applyURL = () => {
+            applyURLMode();
+            applyURLSlide();
+        };
+
+        shower.addEventListener('modechange', () => {
+            history.replaceState(null, document.title, composeURL());
+        });
+
+        shower.addEventListener('slidechange', () => {
+            history.pushState(null, document.title, composeURL());
+        });
+
+        shower.addEventListener('start', applyURL);
+        window.addEventListener('popstate', applyURL);
+    };
+
+    var next = (shower) => {
+        const { stepSelector, activeSlideClass } = shower.options;
+
+        let innerSteps;
+        let innerAt;
+
+        const getInnerSteps = () => {
+            const { element } = shower.activeSlide;
+            return [...element.querySelectorAll(stepSelector)];
+        };
+
+        const getInnerAt = () => {
+            return innerSteps.filter((step) => {
+                return step.classList.contains(activeSlideClass);
+            }).length;
+        };
+
+        const toggleActive = () => {
+            innerSteps.forEach((step, index) => {
+                step.classList.toggle(activeSlideClass, index < innerAt);
+            });
+        };
+
+        shower.addEventListener('slidechange', () => {
+            innerSteps = getInnerSteps();
+            innerAt = getInnerAt();
+
+            const slide = shower.activeSlide;
+            slide.state.innerStepsCount = innerSteps.length;
+        });
+
+        shower.addEventListener('next', (event) => {
+            if (event.defaultPrevented || !event.cancelable) return;
+            if (shower.isListMode || innerAt === innerSteps.length) return;
+
+            event.preventDefault();
+            innerAt++;
+            toggleActive();
+        });
+
+        shower.addEventListener('prev', (event) => {
+            if (event.defaultPrevented || !event.cancelable) return;
+            if (shower.isListMode || innerAt === innerSteps.length || !innerAt) return;
+
+            event.preventDefault();
+            innerAt--;
+            toggleActive();
+        });
+    };
+
+    var progress = (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('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 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;
+
+    var parseTiming = (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);
+    };
+
+    var timer = (shower) => {
+        let id;
+
+        const setTimer = () => {
+            clearTimeout(id);
+            if (shower.isListMode) return;
+
+            const slide = shower.activeSlide;
+            const { visitsCount, innerStepsCount } = slide.state;
+            if (visitsCount > 1) return;
+
+            const timing = parseTiming(slide.element.dataset.timing);
+            if (!timing) return;
+
+            if (innerStepsCount) {
+                const stepTiming = timing / (innerStepsCount + 1);
+                id = setInterval(() => shower.next(), stepTiming);
+            } else {
+                id = setTimeout(() => shower.next(), timing);
+            }
+        };
+
+        shower.addEventListener('modechange', setTimer);
+        shower.addEventListener('slidechange', setTimer);
+
+        shower.container.addEventListener('keydown', (event) => {
+            if (!event.defaultPrevented) {
+                clearTimeout(id);
+            }
+        });
+    };
+
+    const mdash = '\u2014';
+
+    var title = (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('modechange', updateTitle);
+        shower.addEventListener('slidechange', updateTitle);
+    };
+
+    var view = (shower) => {
+        const { container } = shower;
+        const { fullModeClass, listModeClass } = shower.options;
+
+        shower.addEventListener('modechange', () => {
+            if (shower.isFullMode) {
+                container.classList.remove(listModeClass);
+                container.classList.add(fullModeClass);
+                return;
+            }
+
+            container.classList.remove(fullModeClass);
+            container.classList.add(listModeClass);
+
+            const slide = shower.activeSlide;
+            if (slide) {
+                slide.element.scrollIntoView({ block: 'center' });
+            }
+        });
+
+        shower.addEventListener('slidechange', () => {
+            const slide = shower.activeSlide;
+            slide.element.scrollIntoView({ block: 'nearest' });
+        });
+
+        shower.addEventListener('start', () => {
+            if (container.classList.contains(fullModeClass)) {
+                shower.enterFullMode();
+            } else {
+                container.classList.add(listModeClass);
+            }
+        });
+    };
+
+    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);
+        view(shower);
+        scale(shower);
+    };
+
+    const ensureSlideId = (slideElement, index) => {
+        if (!slideElement.id) {
+            slideElement.id = index + 1;
+        }
+    };
+
+    class Shower extends EventTarget {
+        constructor(options) {
+            super();
+
+            this._mode = 'list';
+            this._isStarted = false;
+            this.options = { ...defaultOptions, ...options };
+        }
+
+        /**
+         * @param {object} options
+         */
+        configure(options) {
+            Object.assign(this.options, options);
+        }
+
+        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._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.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._changeActiveSlide(slide);
+                });
+
+                slide.element.addEventListener('click', () => {
+                    if (this.isListMode) {
+                        this.enterFullMode();
+                        slide.activate();
+                    }
+                });
+
+                return slide;
+            });
+        }
+
+        _changeActiveSlide(next) {
+            const prev = this.slides.find((slide) => {
+                return slide.isActive && slide !== next;
+            });
+
+            if (prev) {
+                prev.deactivate();
+            }
+
+            const event = new CustomEvent('slidechange', {
+                detail: { prev },
+            });
+
+            this.dispatchEvent(event);
+        }
+
+        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.
+         */
+        enterFullMode() {
+            if (!this.isFullMode) {
+                this._mode = 'full';
+                this.dispatchEvent(new Event('modechange'));
+            }
+        }
+
+        /**
+         * Shower returns into list mode.
+         */
+        exitFullMode() {
+            if (!this.isListMode) {
+                this._mode = 'list';
+                this.dispatchEvent(new Event('modechange'));
+            }
+        }
+
+        /**
+         * @param {number} index
+         */
+        goTo(index) {
+            const slide = this.slides[index];
+            if (slide) {
+                slide.activate();
+            }
+        }
+
+        /**
+         * @param {number} delta
+         */
+        go(delta) {
+            this.goTo(this.activeSlideIndex + delta);
+        }
+
+        /**
+         * @param {boolean=} isForce
+         */
+        prev(isForce) {
+            const prev = new Event('prev', { cancelable: !isForce });
+            if (this.dispatchEvent(prev)) {
+                this.go(-1);
+            }
+        }
+
+        /**
+         * @param {boolean=} isForce
+         */
+        next(isForce) {
+            const next = new Event('next', { cancelable: !isForce });
+            if (this.dispatchEvent(next)) {
+                this.go(1);
+            }
+        }
+
+        first() {
+            this.goTo(0);
+        }
+
+        last() {
+            this.goTo(this.slides.length - 1);
+        }
+    }
+
+    const options = document.currentScript.dataset;
+    const shower = new Shower(options);
+
+    Object.defineProperty(window, 'shower', {
+        value: shower,
+        configurable: true,
+    });
+
+    contentLoaded(() => {
+        shower.start();
+    });
+
+}());

shower/shower.min.js

-/**
- * Core for Shower HTML presentation engine
- * shower-core v2.1.0, https://github.com/shower/core
- * @copyright 2010-2017 Vadim Makeev, http://pepelsbey.net/
- * @license MIT
- */
-!function(global){var undef,DECL_STATES={NOT_RESOLVED:"NOT_RESOLVED",IN_RESOLVING:"IN_RESOLVING",RESOLVED:"RESOLVED"},create=function(){var curOptions={trackCircularDependencies:!0,allowMultipleDeclarations:!0},modulesStorage={},waitForNextTick=!1,pendingRequires=[],define=function(name,deps,declFn){declFn||(declFn=deps,deps=[]);var module=modulesStorage[name];module||(module=modulesStorage[name]={name:name,decl:undef}),module.decl={name:name,prev:module.decl,fn:declFn,state:DECL_STATES.NOT_RESOLVED,deps:deps,dependents:[],exports:undef}},require=function(modules,cb,errorCb){"string"==typeof modules&&(modules=[modules]),waitForNextTick||(waitForNextTick=!0,nextTick(onNextTick)),pendingRequires.push({deps:modules,cb:function(exports,error){error?(errorCb||onError)(error):cb.apply(global,exports)}})},getState=function(name){var module=modulesStorage[name];return module?DECL_STATES[module.decl.state]:"NOT_DEFINED"},isDefined=function(name){return!!modulesStorage[name]},setOptions=function(options){for(var name in options)options.hasOwnProperty(name)&&(curOptions[name]=options[name])},getStat=function(){var module,res={};for(var name in modulesStorage)modulesStorage.hasOwnProperty(name)&&(module=modulesStorage[name],(res[module.decl.state]||(res[module.decl.state]=[])).push(name));return res},onNextTick=function(){waitForNextTick=!1,applyRequires()},applyRequires=function(){var require,requiresToProcess=pendingRequires,i=0;for(pendingRequires=[];require=requiresToProcess[i++];)requireDeps(null,require.deps,[],require.cb)},requireDeps=function(fromDecl,deps,path,cb){var unresolvedDepsCnt=deps.length;unresolvedDepsCnt||cb([]);for(var dep,decl,decls=[],onDeclResolved=function(_,error){if(error)return void cb(null,error);if(!--unresolvedDepsCnt){for(var decl,exports=[],i=0;decl=decls[i++];)exports.push(decl.exports);cb(exports)}},i=0,len=unresolvedDepsCnt;i<len;){if(dep=deps[i++],"string"==typeof dep){if(!modulesStorage[dep])return void cb(null,buildModuleNotFoundError(dep,fromDecl));decl=modulesStorage[dep].decl}else decl=dep;decls.push(decl),startDeclResolving(decl,path,onDeclResolved)}},startDeclResolving=function(decl,path,cb){if(decl.state===DECL_STATES.RESOLVED)return void cb(decl.exports);if(decl.state===DECL_STATES.IN_RESOLVING)return void(curOptions.trackCircularDependencies&&isDependenceCircular(decl,path)?cb(null,buildCircularDependenceError(decl,path)):decl.dependents.push(cb));if(decl.dependents.push(cb),decl.prev&&!curOptions.allowMultipleDeclarations)return void provideError(decl,buildMultipleDeclarationError(decl));curOptions.trackCircularDependencies&&(path=path.slice()).push(decl);var isProvided=!1,deps=decl.prev?decl.deps.concat([decl.prev]):decl.deps;decl.state=DECL_STATES.IN_RESOLVING,requireDeps(decl,deps,path,function(depDeclsExports,error){return error?void provideError(decl,error):(depDeclsExports.unshift(function(exports,error){return isProvided?void cb(null,buildDeclAreadyProvidedError(decl)):(isProvided=!0,void(error?provideError(decl,error):provideDecl(decl,exports)))}),void decl.fn.apply({name:decl.name,deps:decl.deps,global:global},depDeclsExports))})},provideDecl=function(decl,exports){decl.exports=exports,decl.state=DECL_STATES.RESOLVED;for(var dependent,i=0;dependent=decl.dependents[i++];)dependent(exports);decl.dependents=undef},provideError=function(decl,error){decl.state=DECL_STATES.NOT_RESOLVED;for(var dependent,i=0;dependent=decl.dependents[i++];)dependent(null,error);decl.dependents=[]};return{create:create,define:define,require:require,getState:getState,isDefined:isDefined,setOptions:setOptions,getStat:getStat}},onError=function(e){nextTick(function(){throw e})},buildModuleNotFoundError=function(name,decl){return Error(decl?'Module "'+decl.name+'": can\'t resolve dependence "'+name+'"':'Required module "'+name+"\" can't be resolved")},buildCircularDependenceError=function(decl,path){for(var pathDecl,strPath=[],i=0;pathDecl=path[i++];)strPath.push(pathDecl.name);return strPath.push(decl.name),Error('Circular dependence has been detected: "'+strPath.join(" -> ")+'"')},buildDeclAreadyProvidedError=function(decl){return Error('Declaration of module "'+decl.name+'" has already been provided')},buildMultipleDeclarationError=function(decl){return Error('Multiple declarations of module "'+decl.name+'" have been detected')},isDependenceCircular=function(decl,path){for(var pathDecl,i=0;pathDecl=path[i++];)if(decl===pathDecl)return!0;return!1},nextTick=function(){var fns=[],enqueueFn=function(fn){return 1===fns.push(fn)},callFns=function(){var fnsToCall=fns,i=0,len=fns.length;for(fns=[];i<len;)fnsToCall[i++]()};if("object"==typeof process&&process.nextTick)return function(fn){enqueueFn(fn)&&process.nextTick(callFns)};if(global.setImmediate)return function(fn){enqueueFn(fn)&&global.setImmediate(callFns)};if(global.postMessage&&!global.opera){var isPostMessageAsync=!0;if(global.attachEvent){var checkAsync=function(){isPostMessageAsync=!1};global.attachEvent("onmessage",checkAsync),global.postMessage("__checkAsync","*"),global.detachEvent("onmessage",checkAsync)}if(isPostMessageAsync){var msg="__modules"+ +new Date,onMessage=function(e){e.data===msg&&(e.stopPropagation&&e.stopPropagation(),callFns())};return global.addEventListener?global.addEventListener("message",onMessage,!0):global.attachEvent("onmessage",onMessage),function(fn){enqueueFn(fn)&&global.postMessage(msg,"*")}}}var doc=global.document;if("onreadystatechange"in doc.createElement("script")){var head=doc.getElementsByTagName("head")[0],createScript=function(){var script=doc.createElement("script");script.onreadystatechange=function(){script.parentNode.removeChild(script),script=script.onreadystatechange=null,callFns()},head.appendChild(script)};return function(fn){enqueueFn(fn)&&createScript()}}return function(fn){enqueueFn(fn)&&setTimeout(callFns,0)}}();"object"==typeof exports?module.exports=create():global.modules=create()}("undefined"!=typeof window?window:global),function(global){function initialize(){global.shower.modules.require("shower.defaultOptions",function(defaultOptions){var hasOptions=global.hasOwnProperty("showerOptions"),options=global.shower.options,containerSelector=options.shower_selector||defaultOptions.container_selector,element=document.querySelector(containerSelector),getDataAttr=getData.bind(this,element),autoInit="undefined"==typeof options.auto_init||options.auto_init;if(!element)throw new Error("Shower element with selector "+containerSelector+" not found.");("false"!==getDataAttr("auto-init")||hasOptions&&autoInit)&&(hasOptions||dataAttrsOptions.forEach(function(name){var value=getDataAttr(name);null!==value&&"undefined"!=typeof value&&(options[name.replace(/-/g,"_")]=value)}),global.shower.modules.require(["shower"],function(sh){sh.init({container:element,options:options})}))})}function getData(element,name){return element.dataset?element.dataset[name]:element.getAttribute("data-"+name)}var dataAttrsOptions=["debug-mode","slides-selector","hotkeys"];global.shower={modules:modules.create(),options:global.showerOptions||{}},/interactive|complete|loaded/.test(document.readyState)?initialize():document.addEventListener("DOMContentLoaded",initialize)}(window),shower.modules.define("shower",["shower.global"],function(provide,showerGlobal){provide(showerGlobal)}),shower.modules.define("Emitter",["emitter.Event","emitter.EventGroup","util.extend"],function(provide,EmitterEvent,EventGroup,extend){function EventEmitter(parameters){parameters=parameters||{},this._context=parameters.context,this._parent=parameters.parent,this._listeners={}}function sortByPriority(aListener,bListener){return aListener.priority-bListener.priority}extend(EventEmitter.prototype,{on:function(types,callback,context,priority){if("undefined"==typeof callback)throw new Error("Callback is not defined.");if(priority=priority||0,"string"==typeof types)this._addListener(types,callback,context,priority);else for(var i=0,l=types.length;i<l;i++)this._addListener(types[i],callback,context,priority);return this},off:function(types,callback,context,priority){if(priority=priority||0,"string"==typeof types)this._removeListener(types,callback,context,priority);else for(var i=0,l=types.length;i<l;i++)this._removeListener(types[i],callback,context,priority);return this},once:function(eventType,callback,context,priority){var handler=function(event){this.off(eventType,handler,this,priority),context?callback.call(context,event):callback(event)};return this.on(eventType,handler,this,priority),this},emit:function(eventType,eventObject){var event=eventObject,listeners=this._listeners;event&&"function"==typeof event.get||(event=this.createEventObject(eventType,eventObject,this._context)),event.isPropagationStopped()||(listeners.hasOwnProperty(eventType)&&this._callListeners(listeners[eventType],event),this._parent&&!event.isPropagationStopped()&&this._parent.emit(eventType,event))},createEventObject:function(type,eventData,target){var data={target:target,type:type};return new EmitterEvent(eventData?extend(data,eventData):data)},setParent:function(parent){this._parent!=parent&&(this._parent=parent)},getParent:function(){return this._parent},group:function(){return new EventGroup(this)},_addListener:function(eventType,callback,context,priority){var listener={callback:callback,context:context,priority:priority};this._listeners[eventType]?this._listeners[eventType].push(listener):this._listeners[eventType]=[listener]},_removeListener:function(eventType,callback,context,priority){var listener,listeners=this._listeners[eventType];if(listeners){for(var foundIndex=-1,i=0,l=listeners.length;i<l;i++)listener=listeners[i],listener.callback==callback&&listener.context==context&&listener.priority==priority&&(foundIndex=i);foundIndex!=-1&&(1==listeners.length?this._clearType(eventType):listeners.splice(foundIndex,1))}},_clearType:function(eventType){this._listeners.hasOwnProperty(eventType)&&delete this._listeners[eventType]},_callListeners:function(listeners,event){var i=listeners.length-1;for(listeners.sort(sortByPriority);i>=0&&!event.defaultPrevented();){var listener=listeners[i];listener&&(listener.context?listener.callback.call(listener.context,event):listener.callback(event)),i--}}}),provide(EventEmitter)}),shower.modules.define("emitter.Event",["util.extend"],function(provide,extend){function Event(data){this._data=data,this._preventDefault=!1,this._stopPropagation=!1}extend(Event.prototype,{get:function(key){return this._data[key]},preventDefault:function(){return this._preventDefault=!0,this._preventDefault},defaultPrevented:function(){return this._preventDefault},stopPropagation:function(){return this._stopPropagation=!0,this._stopPropagation},isPropagationStopped:function(){return this._stopPropagation}}),provide(Event)}),shower.modules.define("emitter.EventGroup",["util.extend"],function(provide,extend){function EventGroup(eventManager){this.events=eventManager,this._listeners=[]}extend(EventGroup.prototype,{on:function(types,callback,context){if(Array.isArray(types))for(var i=0,k=types.length;i<k;i++)this._listeners.push(types[i],callback,context);else this._listeners.push(types,callback,context);return this.events.on(types,callback,context),this},off:function(types,callback,context){if(Array.isArray(types))for(var i=0,k=types.length;i<k;i++)this._removeListener(types[i],callback,context);else this._removeListener(types,callback,context);return this},offAll:function(){for(var i=0,k=this._listeners.length;i<k;i+=3)this.events.off(this._listeners[i],this._listeners[i+1],this._listeners[i+2]);return this._listeners.length=0,this},_removeListener:function(type,callback,context){for(var index=this._listeners.indexOf(type,0);index!=-1;)this._listeners[index+1]==callback&&this._listeners[index+2]==context&&(this._listeners.splice(index,3),this.events.off(type,callback,context)),index=this._listeners.indexOf(type,index)}}),provide(EventGroup)}),shower.modules.define("Plugins",["Emitter","util.extend"],function(provide,EventEmitter,extend){function Plugins(showerGlobal){this.events=new EventEmitter({context:this}),this._showerGlobal=showerGlobal,this._showerInstances=showerGlobal.getInited(),this._plugins={},this._instances=[],showerGlobal.events.on("init",this._onShowerInit,this)}extend(Plugins.prototype,{destroy:function(){this._showerGlobal.events.off("init",this._onShowerInit,this),this._plugins=null},add:function(name,options){if(this._plugins.hasOwnProperty(name))throw new Error("Plugin "+name+" already exist.");return this._requireAndAdd({name:name,options:options}),this},remove:function(name){if(!this._plugins.hasOwnProperty(name))throw new Error("Plugin "+name+" not found.");return delete this._plugins[name],this.events.emit("remove",{name:name}),this},get:function(name,shower){var pluginInstance,plugin=this._plugins[name];if(plugin&&shower)for(var i=0,l=this._instances.length;i<l;i++){var instanceInfo=this._instances[i];instanceInfo.plugin.name===name&&instanceInfo.shower===shower&&(pluginInstance=instanceInfo.instance)}return pluginInstance},_requireAndAdd:function(plugin){shower.modules.require(plugin.name,function(pluginClass){plugin.class=pluginClass,this._plugins[plugin.name]=plugin,this._instancePlugin(plugin)}.bind(this))},_instancePlugin:function(plugin){this._showerInstances.forEach(function(shower){this._instance(plugin,shower)},this),this.events.emit("add",{name:plugin.name})},_instanceFor:function(shower){for(var name in this._plugins)this._plugins.hasOwnProperty(name)&&this._instance(this._plugins[name],shower)},_instance:function(plugin,shower){var options=plugin.options||shower.options.get("plugin_"+plugin.name);this._instances.push({shower:shower,plugin:plugin,instance:new plugin.class(shower,options)})},_onShowerInit:function(event){var shower=event.get("shower");this._instanceFor(shower)}}),provide(Plugins)}),shower.modules.define("shower.global",["Emitter","Plugins"],function(provide,EventEmitter,Plugins){var inited=[],sh={ready:function(callback){return callback&&(inited.length?inited.forEach(callback):this.events.once("init",function(e){callback(e.get("shower"))})),Boolean(inited.length)},init:function(initOptions){initOptions=initOptions||{},shower.modules.require(["Shower"],function(Shower){new Shower(initOptions.container,initOptions.options)})},getInited:function(){return inited.slice()}};sh.events=new EventEmitter({context:sh}),sh.plugins=new Plugins(sh),sh.events.on("notify",function(e){var showerInstance=e.get("shower");inited.push(showerInstance),sh.events.emit("init",e)}),provide(sh)}),shower.modules.define("Options",["Emitter","options.Monitor","util.Store","util.extend","util.inherit"],function(provide,EventEmitter,Monitor,Store,extend,inherit){function Options(initOptions){Options.super.constructor.apply(this,arguments),this.events=new EventEmitter}inherit(Options,Store,{set:function(name,value){var changed=[];if("string"==typeof name)Options.super.set.call(this,name,value),changed.push({name:name,value:value});else{var options=name||{};Object.keys(options).forEach(function(optionName){var optionValue=options[optionName];Options.super.set.call(this,optionName,optionValue),changed.push({name:optionName,value:optionValue})})}return changed.length&&this.events.emit("set",{items:changed}),this},unset:function(name){return Options.super.unset(this,name),this.events.emit("unset",{name:name}),this},getMonitor:function(){return new Monitor(this)}}),provide(Options)}),shower.modules.define("options.Monitor",["util.extend"],function(provide,extend){function Monitor(options){this._options=options,this._optionsEvents=options.events.group().on(["set","unset"],this._onOptionsChange,this),this._fieldsHanders={}}extend(Monitor.prototype,{destroy:function(){this._options=null,this._optionsEvents.offAll(),this._fieldsHanders=null},add:function(field,callback,context){if(Array.prototype.isArray.call(null,field)){var fields=field;for(var fieldName in fields)fields.hasOwnProperty(fieldName)&&this._addHandler(fieldName,callback,context)}else this._addHandler(field,callback,context);return this},remove:function(field,callback,context){if(Array.prototype.isArray.call(null,field)){var fields=field;for(var fieldName in fields)fields.hasOwnProperty(fieldName)&&this._remodeHandler(fieldName,callback,context)}else this._remodeHandler(field,callback,context);return this},getOptions:function(){return this._options},_onOptionsChange:function(event){var fieldsUpdated="unset"===event.get("type")?[event.get("name")]:event.get("items");fieldsUpdated.forEach(function(field){this._fieldsHanders.hasOwnProperty(field)&&this._fieldsHanders[field].forEach(function(handler){handler.callback.call(handler.context,this._options.get(field))})},this)},_addHandler:function(field,callback,context){var handler={callback:callback,context:context};this._fieldsHanders.hasOwnProperty(fieldName)?this._fieldsHanders[fieldName].push(handler):this._fieldsHanders[fieldName]=[handler]},_remodeHandler:function(field,callback,context){if(!this._fieldsHanders.hasOwnProperty(field))throw new Error("Remove undefined handler for "+field+" field");var fieldsHanders=this._fieldsHanders[field],handler=fieldsHanders.filter(function(hander){return hander.callback===callback&&hander.context===context})[0];if(!hander)throw new Error("Hanlder for "+field+" not found.");fieldsHanders.splice(fieldsHanders.indexOf(handler,1))}}),provide(Monitor)}),shower.modules.define("Shower",["Emitter","Options","shower.global","shower.defaultOptions","shower.Container","shower.Player","shower.Location","shower.slidesParser","util.extend"],function(provide,EventEmitter,Options,showerGlobal,defaultShowerOptions,Container,Player,Location,defaultSlidesParser,extend){function Shower(container,options){options=options||{},this.events=new EventEmitter({context:this}),this.options=new Options({},defaultShowerOptions,options);var containerElement=container||this.options.get("container_selector");"string"==typeof containerElement&&(containerElement=document.querySelector(containerElement)),this.player=new Player(this),this.container=new Container(this,containerElement),this._slides=[],this._isHotkeysOn=!0,this._liveRegion=null,this._initSlides(),this._initLiveRegion(),this.options.get("debug_mode")&&(document.body.classList.add(this.options.get("debug_mode_classname")),console.info("Debug mode on")),this.options.get("hotkeys")||this.disableHotkeys(),this.location=new Location(this),showerGlobal.events.emit("notify",{shower:this}),this._playerListeners=this.player.events.group().on("activate",this._onPlayerSlideActivate,this)}extend(Shower.prototype,{destroy:function(){this.events.emit("destroy"),this.location.destroy(),this.container.destroy(),this.player.destroy(),this._slides=[]},add:function(slide){if(Array.isArray.call(null,slide))for(var i=0,k=slide.length;i<k;i++)this._addSlide(slide[i]);else this._addSlide(slide);return this},remove:function(slide){var slidePosition;if("number"==typeof slide)slidePosition=slide;else{if(this._slides.indexOf(slide)==-1)throw new Error("Slide not found");slidePosition=this._slides.indexOf(slide)}return slide=this._slides.splice(slidePosition,1)[0],this.events.emit("slideremove",{slide:slide}),slide.destroy(),this},get:function(index){return this._slides[index]},getSlides:function(){return this._slides.slice()},getSlidesCount:function(){return this._slides.length},getSlideIndex:function(slide){return this._slides.indexOf(slide)},disableHotkeys:function(){return this._isHotkeysOn=!1,this},enableHotkeys:function(){return this._isHotkeysOn=!0,this},isHotkeysEnabled:function(){return this._isHotkeysOn},getLiveRegion:function(){return this._liveRegion},updateLiveRegion:function(content){return this._liveRegion.innerHTML=content,this},_onPlayerSlideActivate:function(event){var currentSlide=event.get("slide");this.updateLiveRegion(currentSlide.getContent())},_initSlides:function(){var slidesParser=this.options.get("slides_parser")||defaultSlidesParser,slides=slidesParser(this.container.getElement(),this.options.get("slides_selector"));this.add(slides)},_addSlide:function(slide){slide.state.set("index",this._slides.length),this._slides.push(slide),this.events.emit("slideadd",{slide:slide})},_initLiveRegion:function(){var liveRegion=document.createElement("section");liveRegion.setAttribute("role","region"),liveRegion.setAttribute("aria-live","assertive"),liveRegion.setAttribute("aria-relevant","additions"),liveRegion.setAttribute("aria-label","Slide Content: Auto-updating"),liveRegion.className="region",document.body.appendChild(liveRegion),this._liveRegion=liveRegion}}),provide(Shower)}),shower.modules.define("shower.Container",["Emitter","util.bound","util.extend"],function(provide,EventEmitter,bound,extend){function Container(shower,containerElement){this.events=new EventEmitter({context:this,parent:shower.events}),this._shower=shower,this._element=containerElement,this._isSlideMode=!1,this.init()}extend(Container.prototype,{init:function(){var bodyClassList=document.body.classList,showerOptions=this._shower.options,fullModeClass=showerOptions.get("mode_full_classname"),listModeClass=showerOptions.get("mode_list_classname");bodyClassList.contains(listModeClass)||bodyClassList.contains(fullModeClass)||bodyClassList.add(listModeClass),this._setupListeners()},destroy:function(){this._clearListeners(),this._element=null,this._shower=null,this._isSlideMode=null},getElement:function(){return this._element},enterSlideMode:function(){var bodyClassList=document.body.classList,showerOptions=this._shower.options;return bodyClassList.remove(showerOptions.get("mode_list_classname")),bodyClassList.add(showerOptions.get("mode_full_classname")),document.body.setAttribute("role","application"),this._applyTransform(this._getTransformScale()),this._isSlideMode=!0,this.events.emit("slidemodeenter"),this},exitSlideMode:function(){var elementClassList=document.body.classList,showerOptions=this._shower.options;return elementClassList.remove(showerOptions.get("mode_full_classname")),elementClassList.add(showerOptions.get("mode_list_classname")),document.body.removeAttribute("role","application"),this._applyTransform("none"),this._isSlideMode=!1,this.scrollToCurrentSlide(),this.events.emit("slidemodeexit"),this},isSlideMode:function(){return this._isSlideMode},scrollToCurrentSlide:function(){var activeSlideClassName=this._shower.options.get("slide_active_classname"),slideElement=this._element.querySelector("."+activeSlideClassName);return slideElement&&window.scrollTo(0,slideElement.offsetTop),this},_setupListeners:function(){this._showerListeners=this._shower.events.group().on("slideadd",this._onSlideAdd,this).on("slideremove",this._onSlideRemove,this),window.addEventListener("resize",bound(this,"_onResize")),document.addEventListener("keydown",bound(this,"_onKeyDown"))},_clearListeners:function(){this._showerListeners.offAll(),window.removeEventListener("resize",bound(this,"_onResize")),document.removeEventListener("keydown",bound(this,"_onKeyDown"))},_getTransformScale:function(){var denominator=Math.max(document.body.clientWidth/window.innerWidth,document.body.clientHeight/window.innerHeight);return"scale("+1/denominator+")"},_applyTransform:function(transformValue){["WebkitTransform","MozTransform","msTransform","OTransform","transform"].forEach(function(property){document.body.style[property]=transformValue})},_onResize:function(){this.isSlideMode()&&this._applyTransform(this._getTransformScale())},_onSlideAdd:function(e){var slide=e.get("slide");slide.events.on("click",this._onSlideClick,this)},_onSlideRemove:function(e){var slide=e.get("slide");slide.events.off("click",this._onSlideClick,this)},_onSlideClick:function(){this._isSlideMode||this.enterSlideMode()},_onKeyDown:function(e){if(this._shower.isHotkeysEnabled())switch(e.which){case 13:if(e.preventDefault(),!this.isSlideMode()&&e.metaKey){var slideNumber=e.shiftKey?0:this._shower.player.getCurrentSlideIndex();this._shower.player.go(slideNumber),this.enterSlideMode()}else e.shiftKey?this._shower.player.prev():this._shower.player.next();break;case 27:e.preventDefault(),this.exitSlideMode();break;case 116:if(!this.isSlideMode()&&e.shiftKey){e.preventDefault();var slideNumber=this._shower.player.getCurrentSlideIndex();this._shower.player.go(slideNumber),this.enterSlideMode()}break;case 80:!this.isSlideMode()&&e.altKey&&e.metaKey&&(e.preventDefault(),this.enterSlideMode())}}}),provide(Container)}),shower.modules.define("shower.Location",["util.SessionStore","util.bound","util.extend"],function(provide,SessionStore,bound,extend){function Location(shower){this._shower=shower;var sessionStoreKey=shower.options.get("sessionstore_key")+"-shower.Location";this.state=new SessionStore(sessionStoreKey,{isSlideMode:!1}),this._showerListeners=null,this._playerListeners=null,this._documentTitle=document.title,this._popStateProcess=null,this._setupListeners(),this._init()}extend(Location.prototype,{destroy:function(){this._clearListeners()},save:function(){this.state.set("isSlideMode",this._isSlideMode())},_init:function(){var slideInfo,shower=this._shower,currentSlideId=window.location.hash.substr(1),slideModeClass=shower.options.get("mode_full_classname");window.location.hash="",(this.state.get("isSlideMode")||document.body.classList.contains(slideModeClass))&&shower.container.enterSlideMode(),""!==currentSlideId&&(slideInfo=this._getSlideById(currentSlideId),shower.player.go("undefined"!=typeof slideInfo.index?slideInfo.index:0))},_setupListeners:function(){var shower=this._shower;this._playerListeners=shower.player.events.group().on("activate",this._onSlideActivate,this),this._containerListener=shower.container.events.group().on(["slidemodeenter","slidemodeexit"],this._onContainerSlideModeChange,this),window.addEventListener("popstate",bound(this,"_onPopstate"))},_clearListeners:function(){window.removeEventListener("popstate",bound(this,"_onPopstate")),this._playerListeners.offAll(),this._containerListener.offAll()},_getSlideById:function(slideId){for(var slide,index,slides=this._shower.getSlides(),i=slides.length-1;i>=0;i--)if(slides[i].getId()===slideId){slide=slides[i],index=i;break}return{slide:slide,index:index}},_onSlideActivate:function(e){window.location.hash=e.get("slide").getId(),this._setTitle()},_onContainerSlideModeChange:function(){this._setTitle(),this.save()},_isSlideMode:function(){return this._shower.container.isSlideMode()},_onPopstate:function(){var slideInfo,shower=this._shower,slideId=window.location.hash.substr(1),currentSlide=shower.player.getCurrentSlide(),currentSlideNumber=shower.player.getCurrentSlideIndex();this._isSlideMode()&&currentSlideNumber===-1?shower.player.go(0):currentSlideNumber===-1&&""!==window.location.hash&&shower.player.go(0),currentSlide&&slideId!==currentSlide.getId()&&(slideInfo=this._getSlideById(slideId),shower.player.go(slideInfo.index))},_setTitle:function(){var title=document.title,isSlideMode=this._isSlideMode(),currentSlide=this._shower.player.getCurrentSlide();if(isSlideMode&&currentSlide){var slideTitle=currentSlide.getTitle();document.title=slideTitle?slideTitle+" — "+this._documentTitle:this._documentTitle}else this._documentTitle!==title&&(document.title=this._documentTitle)}}),provide(Location)}),shower.modules.define("shower.Player",["Emitter","util.bound","util.extend"],function(provide,EventEmitter,bound,extend){function Player(shower){this.events=new EventEmitter({context:this,parent:shower.events}),this._shower=shower,this._showerListeners=null,this._playerListeners=null,this._currentSlideNumber=-1,this._currentSlide=null,this.init()}extend(Player.prototype,{init:function(){this._showerListeners=this._shower.events.group().on("slideadd",this._onSlideAdd,this).on("slideremove",this._onSlideRemove,this).on("slidemodeenter",this._onSlideModeEnter,this),this._playerListeners=this.events.group().on("prev",this._onPrev,this).on("next",this._onNext,this).on("prevslide",this._onPrev,this).on("nextslide",this._onNext,this),document.addEventListener("keydown",bound(this,"_onKeyDown"))},destroy:function(){this._showerListeners.offAll(),this._playerListeners.offAll(),document.removeEventListener("keydown",bound(this,"_onKeyDown")),this._currentSlide=null,this._currentSlideNumber=null,this._shower=null},next:function(){return this.events.emit("next"),this},prev:function(){return this.events.emit("prev"),this},nextSlide:function(){return this.events.emit("nextslide"),this},prevSlide:function(){return this.events.emit("prevslide"),this},first:function(){return this.go(0),this},last:function(){return this.go(this._shower.getSlidesCount()-1),this},go:function(index){"number"!=typeof index&&(index=this._shower.getSlideIndex(index));var slidesCount=this._shower.getSlidesCount(),currentSlide=this._currentSlide;return index!=this._currentSlideNumber&&index<slidesCount&&index>=0&&(currentSlide&&currentSlide.isActive()&&currentSlide.deactivate(),currentSlide=this._shower.get(index),this._currentSlide=currentSlide,this._currentSlideNumber=index,currentSlide.isActive()||currentSlide.activate(),this.events.emit("activate",{index:index,slide:currentSlide})),this},getCurrentSlide:function(){return this._currentSlide},getCurrentSlideIndex:function(){return this._currentSlideNumber},_onPrev:function(){this._changeSlide(this._currentSlideNumber-1)},_onNext:function(){this._changeSlide(this._currentSlideNumber+1)},_changeSlide:function(index){this.go(index)},_onSlideAdd:function(e){var slide=e.get("slide");slide.events.on("activate",this._onSlideActivate,this)},_onSlideRemove:function(e){var slide=e.get("slide");slide.events.off("activate",this._onSlideActivate,this)},_onSlideActivate:function(e){var slide=e.get("slide"),slideNumber=this._shower.getSlideIndex(slide);this.go(slideNumber)},_onKeyDown:function(e){if(this._shower.isHotkeysEnabled()&&!/^(?:button|input|select|textarea)$/i.test(e.target.tagName)){this.events.emit("keydown",{event:e});var action,allowModifiers=!1;switch(e.which){case 33:case 38:case 37:case 72:case 75:case 80:action=e.shiftKey?"prevSlide":"prev";break;case 34:case 40:case 39:case 76:case 74:case 78:action=e.shiftKey?"nextSlide":"next";break;case 36:allowModifiers=!0,action="first";break;case 35:allowModifiers=!0,action="last";break;case 32:this._shower.container.isSlideMode()&&(action=e.shiftKey?"prev":"next")}!action||!allowModifiers&&(e.altKey||e.ctrlKey||e.metaKey)||(e.preventDefault(),this[action]())}},_onSlideModeEnter:function(){this._currentSlide||this.go(0)}}),provide(Player)}),shower.modules.define("shower.defaultOptions",function(provide,slidesParser){provide({container_selector:".shower",debug_mode:!1,debug_mode_classname:"debug",hotkeys:!0,sessionstore_key:"shower",slides_selector:".shower .slide",mode_full_classname:"full",mode_list_classname:"list",slide_title_element_selector:"H2",slide_active_classname:"active",slide_visited_classname:"visited"})}),shower.modules.define("shower.slidesParser",["Slide"],function(provide,Slide){function parse(containerElement,cssSelector){var slidesElements=containerElement.querySelectorAll(cssSelector);return slidesElements=Array.prototype.slice.call(slidesElements),slidesElements.map(function(slideElement,index){var slide=new Slide(slideElement);return slideElement.id||(slideElement.id=index+1),slide})}provide(parse)}),shower.modules.define("Slide",["shower.defaultOptions","Emitter","Options","slide.Layout","slide.layoutFactory","util.Store","util.extend"],function(provide,defaultOptions,EventEmitter,OptionsManager,Layout,slideLayoutFactory,DataStore,extend){function Slide(content,options,state){this.events=new EventEmitter,this.options=new OptionsManager(options),this.layout=null,this.state=new DataStore({visited:0,index:null},state),this._content=content,this._isVisited=this.state.get("visited")>0,this._isActive=!1,this.init()}extend(Slide.prototype,{init:function(){this.layout="string"==typeof this._content?new slideLayoutFactory.createLayout({content:this._content}):new Layout(this._content,this.options),this.layout.setParent(this),
-this._setupListeners()},destroy:function(){this._clearListeners(),this._isActive=null,this.options=null,this.layout.destroy()},activate:function(){this._isActive=!0;var visited=this.state.get("visited");return this.state.set("visited",++visited),this.events.emit("activate",{slide:this}),this},deactivate:function(){return this._isActive=!1,this.events.emit("deactivate",{slide:this}),this},isActive:function(){return this._isActive},isVisited:function(){return this.state.get("visited")>0},getTitle:function(){return this.layout.getTitle()},setTitle:function(title){return this.layout.setTitle(title),this},getId:function(){return this.layout.getElement().id},getContent:function(){return this.layout.getContent()},_setupListeners:function(){this.layoutListeners=this.layout.events.group().on("click",this._onSlideClick,this)},_clearListeners:function(){this.layoutListeners.offAll()},_onSlideClick:function(){this.activate(),this.events.emit("click",{slide:this})}}),provide(Slide)}),shower.modules.define("slide.Layout",["Options","shower.defaultOptions","Emitter","util.bound","util.extend"],function(provide,OptionsManager,defaultOptions,EventEmitter,bound,extend){function Layout(element,options){this.options=new OptionsManager({title_element_selector:defaultOptions.slide_title_element_selector,active_classname:defaultOptions.slide_active_classname,visited_classname:defaultOptions.slide_visited_classname},options),this.events=new EventEmitter,this._element=element,this._parent=null,this._parentElement=null,this.init()}extend(Layout.prototype,{init:function(){var parentNode=this._element.parentNode;parentNode?this._parentElement=parentNode:this.setParentElement(parentNode)},destroy:function(){this.setParent(null)},setParent:function(parent){this._parent!=parent&&(this._clearListeners(),this._parent=parent,this._parent&&this._setupListeners(),this.events.emit("parentchange",{parent:parent}))},getParent:function(){return this._parent},setParentElement:function(parentElement){parentElement!=this._parentElement&&(this._parentElement=parentElement,parentElement.appendChild(this._element),this.events.emit("parentelementchange",{parentElement:parentElement}))},getParentElement:function(){return this._parentElement},getElement:function(){return this._element},setTitle:function(title){var titleElementSelector=this.options.get("title_element_selector"),titleElement=this._element.querySelector(titleElementSelector);titleElement?titleElement.innerHTML=title:(titleElement=document.createElement(titleElementSelector),titleElement.innerHTML=title,this._element.insertBefore(titleElement,this._element.firstChild))},getTitle:function(){var titleElementSelector=this.options.get("title_element_selector"),titleElement=this._element.querySelector(titleElementSelector);return titleElement?titleElement.textContent:null},getData:function(name){var element=this._element;return element.dataset?element.dataset[name]:element.getAttribute("data-"+name)},getContent:function(){return this._element.innerHTML},_setupListeners:function(){this._slideListeners=this._parent.events.group().on("activate",this._onSlideActivate,this).on("deactivate",this._onSlideDeactivate,this),this._element.addEventListener("click",bound(this,"_onSlideClick"),!1)},_clearListeners:function(){this._slideListeners&&this._slideListeners.offAll(),this._element.removeEventListener("click",bound(this,"_onSlideClick"))},_onSlideActivate:function(){this._element.classList.add(this.options.get("active_classname"))},_onSlideDeactivate:function(){var elementClassList=this._element.classList;elementClassList.remove(this.options.get("active_classname")),elementClassList.add(this.options.get("visited_classname"))},_onSlideClick:function(){this.events.emit("click")}}),provide(Layout)}),shower.modules.define("slide.layoutFactory",["slide.Layout","util.extend"],function(provide,SlideLayout,extend){var layoutFactory={};extend(layoutFactory,{createLayout:function(parameters){parameters=parameters||{};var element=layoutFactory._createElement(extend({content:"",contentType:"slide"},parameters));return new SlideLayout(element)},_createElement:function(options){var element=document.createElement("section");return element.innerHTML=options.content,element.classList.add(options.contentType),element}}),provide(layoutFactory)}),shower.modules.define("util.SessionStore",["util.Store","util.inherit"],function(provide,Store,inherit){function SessionStore(storeKey,initData){this._storageKey=storeKey;var data=this._loadFromStorage()||initData;SessionStore.super.constructor.call(this,data)}inherit(SessionStore,Store,{set:function(key,value){SessionStore.super.set.call(this,key,value),this._saveToStorage()},unset:function(key){SessionStore.super.unset.call(this,key),this._saveToStorage()},_saveToStorage:function(){window.sessionStorage.setItem(this._storageKey,JSON.stringify(this.getAll()))},_loadFromStorage:function(){var store=window.sessionStorage.getItem(this._storageKey);return store&&JSON.parse(store)}}),provide(SessionStore)}),shower.modules.define("util.Store",["util.extend"],function(provide,extend){function Store(initData){this._data=initData||{};for(var i=1,k=arguments.length;i<k;i++)extend(this._data,arguments[i]||{})}extend(Store.prototype,{get:function(key,defaultValue){return this._data.hasOwnProperty(key)?this._data[key]:defaultValue},getAll:function(){return extend({},this._data)},set:function(key,value){return this._data[key]=value,this},unset:function(key){if(!this._data.hasOwnProperty(key))throw new Error(key+" not found.");return delete this._data[key],this},destroy:function(){this._data={}}}),provide(Store)}),shower.modules.define("util.bound",function(provide){function bound(ctx,fn){return ctx["__bound_"+fn]||(ctx["__bound_"+fn]=ctx[fn].bind(ctx))}provide(bound)}),shower.modules.define("util.extend",function(provide){function extend(target){if(!target)throw new Error("util.extend: Target not found");return"undefined"==typeof Object.assign?polyfill.apply(null,arguments):Object.assign.apply(null,arguments)}function polyfill(target){for(var i=1,l=arguments.length;i<l;i++){var obj=arguments[i];for(var property in obj)obj.hasOwnProperty(property)&&(target[property]=obj[property])}return target}provide(extend)}),shower.modules.define("util.inherit",["util.extend"],function(provide,extend){var inherit=function(childClass,parentClass,override){return childClass.prototype=Object.create(parentClass.prototype),childClass.prototype.constructor=childClass,childClass.super=parentClass.prototype,childClass.super.constructor=parentClass,override&&extend(childClass.prototype,override),childClass.prototype};provide(inherit)}),shower.modules.define("shower-next",["shower","Emitter","util.extend"],function(provide,globalShower,EventEmitter,extend){function Next(shower,options){options=options||{},this.events=new EventEmitter({context:this}),this._shower=shower,this._elementsSelector=options.selector||DEFAULT_SELECTOR,this._elements=[],this._innerComplete=0,this._setupListeners(),this._shower.player.getCurrentSlideIndex()!=-1&&this._onSlideActivate()}var TIMER_PLUGIN_NAME="shower-timer",DEFAULT_SELECTOR=".next";extend(Next.prototype,{destroy:function(){this._clearListeners(),this._elements=null,this._elementsSelector=null,this._innerComplete=null,this._shower=null},next:function(){if(!this._elements.length)throw new Error("Inner nav elements not found.");return this._innerComplete++,this._go(),this.events.emit("next"),this},prev:function(){if(!this._elements.length)throw new Error("Inner nav elements not found.");return this._innerComplete--,this._go(),this.events.emit("prev"),this},getLength:function(){return this._elements=this._getElements(),this._elements.length},getComplete:function(){return this._innerComplete},_setupListeners:function(){var shower=this._shower;this._showerListeners=shower.events.group().on("destroy",this.destroy,this),this._playerListeners=shower.player.events.group().on("activate",this._onSlideActivate,this).on("next",this._onNext,this).on("prev",this._onPrev,this);var timerPlugin=globalShower.plugins.get(TIMER_PLUGIN_NAME,shower);timerPlugin?this._setupTimerPluginListener(timerPlugin):this._pluginsListeners=globalShower.plugins.events.group().on("add",function(e){e.get("name")===TIMER_PLUGIN_NAME&&(this._setupTimerPluginListener(),this._pluginsListeners.offAll())},this)},_setupTimerPluginListener:function(plugin){if(!plugin){globalShower.plugins.get(TIMER_PLUGIN_NAME,this._shower)}plugin.events.on("next",this._onNext,this,100)},_clearListeners:function(){this._showerListeners.offAll(),this._playerListeners.offAll(),this._pluginsListeners&&this._pluginsListeners.offAll()},_getElements:function(){var slideLayout=this._shower.player.getCurrentSlide().layout,slideElement=slideLayout.getElement();return Array.prototype.slice.call(slideElement.querySelectorAll(this._elementsSelector))},_onNext:function(e){var elementsLength=this._elements.length,isSlideMode=this._shower.container.isSlideMode();isSlideMode&&elementsLength&&this._innerComplete<elementsLength&&(e.preventDefault(),this.next())},_onPrev:function(e){var elementsLength=this._elements.length,completed=(this._shower.container.isSlideMode(),this._innerComplete);elementsLength&&completed<elementsLength&&completed>0&&(e.preventDefault(),this.prev())},_go:function(){for(var i=0,k=this._elements.length;i<k;i++){var element=this._elements[i];i<this._innerComplete?element.classList.add("active"):element.classList.remove("active")}},_onSlideActivate:function(){this._elements=this._getElements(),this._innerComplete=this._getInnerComplete()},_getInnerComplete:function(){return this._elements.filter(function(element){return element.classList.contains("active")}).length}}),provide(Next)}),shower.modules.require(["shower"],function(sh){sh.plugins.add("shower-next")}),shower.modules.define("shower-progress",["util.extend"],function(provide,extend){function Progress(shower,options){options=options||{},this._shower=shower,this._playerListeners=null,this._element=null,this._elementSelector=options.selector||".progress";var showerContainerElement=this._shower.container.getElement();this._element=showerContainerElement.querySelector(this._elementSelector),this._element&&(this._setupListeners(),this._element.setAttribute("role","progressbar"),this._element.setAttribute("aria-valuemin","0"),this._element.setAttribute("aria-valuemax","100"),this.updateProgress())}extend(Progress.prototype,{destroy:function(){this._clearListeners(),this._shower=null},updateProgress:function(){var slidesCount=this._shower.getSlidesCount(),currentSlideNumber=this._shower.player.getCurrentSlideIndex(),currentProgressValue=100/(slidesCount-1)*currentSlideNumber;this._element&&(this._element.style.width=currentProgressValue.toFixed(2)+"%",this._element.setAttribute("aria-valuenow",currentProgressValue.toFixed()),this._element.setAttribute("aria-valuetext","Slideshow Progress: "+currentProgressValue.toFixed()+"%"))},_setupListeners:function(){var shower=this._shower;this._showerListeners=shower.events.group().on("destroy",this.destroy,this),this._playerListeners=shower.player.events.group().on("activate",this._onSlideChange,this)},_clearListeners:function(){this._showerListeners&&this._showerListeners.offAll(),this._playerListeners&&this._playerListeners.offAll()},_onSlideChange:function(){this.updateProgress()}}),provide(Progress)}),shower.modules.require(["shower"],function(sh){sh.plugins.add("shower-progress")}),shower.modules.define("shower-timer",["shower","Emitter","util.extend"],function(provide,showerGlobal,EventEmitter,extend){function Timer(shower){this.events=new EventEmitter,this._shower=shower,this._timer=null,this._showerListeners=null,this._playerListeners=null,this._pluginsListeners=null,this._setupListeners()}var PLUGIN_NAME_NEXT="shower-next";extend(Timer.prototype,{destroy:function(){this._clearTimer(),this._clearListeners(),this._shower=null},run:function(timing){this._initTimer(timing)},stop:function(){this._clearTimer()},_setupListeners:function(){var shower=this._shower;this.events.on("next",this._onNext,this),this._showerListeners=shower.events.group().on("destroy",this.destroy,this),this._playerListeners=shower.player.events.group().on("keydown",this._clearTimer,this).on("activate",this._onSlideActivate,this),this._nextPlugin=showerGlobal.plugins.get(PLUGIN_NAME_NEXT,shower),this._nextPlugin||(this._pluginsListeners=shower.plugins.events.group().on("pluginadd",function(e){e.get("name")===PLUGIN_NAME_NEXT&&(this._nextPlugin=shower.plugins.get(PLUGIN_NAME_NEXT),this._pluginsListeners.offAll())},this)),shower.player.getCurrentSlideIndex()!=-1&&this._onSlideActivate()},_clearListeners:function(){this._showerListeners.offAll(),this._playerListeners.offAll()},_onSlideActivate:function(){this._clearTimer();var currentSlide=this._shower.player.getCurrentSlide();if(this._shower.container.isSlideMode()&&currentSlide.state.get("visited")<2){var timing=currentSlide.layout.getData("timing");timing&&/^(\d{1,2}:)?\d{1,3}$/.test(timing)&&(timing.indexOf(":")!==-1?(timing=timing.split(":"),timing=1e3*(60*parseInt(timing[0],10)+parseInt(timing[1],10))):timing=1e3*parseInt(timing,10),0!==timing&&this._initTimer(timing))}},_initTimer:function(timing){var events=this.events,nextPlugin=(this._shower,this._nextPlugin);nextPlugin&&nextPlugin.getLength()&&nextPlugin.getLength()!=nextPlugin.getComplete()&&(timing/=nextPlugin.getLength()+1),this._timer=setInterval(function(){events.emit("next")},timing)},_clearTimer:function(){this._timer&&(clearInterval(this._timer),this._timer=null)},_onNext:function(){this._clearTimer(),this._shower.player.next()}}),provide(Timer)}),shower.modules.require(["shower"],function(sh){sh.plugins.add("shower-timer")}),shower.modules.define("shower-touch",["util.extend"],function(provide,extend){function Touch(shower,options){options=options||{},this._shower=shower,this._setupListeners()}var INTERACTIVE_ELEMENTS=["VIDEO","AUDIO","A","BUTTON","INPUT"];extend(Touch.prototype,{destroy:function(){this._clearListeners(),this._shower=null},_setupListeners:function(){var shower=this._shower;this._showerListeners=shower.events.group().on("add",this._onSlideAdd,this),this._bindedTouchStart=this._onTouchStart.bind(this),this._bindedTouchMove=this._onTouchMove.bind(this),this._shower.getSlides().forEach(this._addTouchStartListener,this),document.addEventListener("touchmove",this._bindedTouchMove,!0)},_clearListeners:function(){this._showerListeners.offAll(),this._shower.getSlides().forEach(this._removeTouchStartListener,this),document.removeEventListener("touchmove",this._bindedTouchMove,!1)},_onSlideAdd:function(event){var slide=event.get("slide");this._addTouchStartListener(slide)},_addTouchStartListener:function(slide){var element=slide.layout.getElement();element.addEventListener("touchstart",this._bindedTouchStart,!1)},_removeTouchStartListener:function(slide){var element=slide.layout.getElement();element.removeEventListener("touchstart",this._bindedTouchStart,!1)},_onTouchStart:function(e){var x,shower=this._shower,isSlideMode=shower.container.isSlideMode(),element=e.target,slide=this._getSlideByElement(e.currentTarget);slide&&(isSlideMode&&!this._isInteractiveElement(element)&&(e.preventDefault(),x=e.touches[0].pageX,x>window.innerWidth/2?shower.player.next():shower.player.prev()),isSlideMode||slide.activate())},_onTouchMove:function(e){this._shower.container.isSlideMode()&&e.preventDefault()},_getSlideByElement:function(element){for(var slides=this._shower.getSlides(),result=null,i=0,k=slides.length;i<k;i++)if(element.id===slides[i].getId()){result=this._shower.get(i);break}return result},_isInteractiveElement:function(element){return INTERACTIVE_ELEMENTS.some(function(elName){return elName===element.tagName})}}),provide(Touch)}),shower.modules.require(["shower"],function(sh){sh.plugins.add("shower-touch")});
\ No newline at end of file

shower/themes/material/README.md

@@ -12,7 +12,7 @@ Get the Shower template where Material is already included. Download the [templa
 
 If you want to install Material separately you can install the package:
 
-	npm install shower-material
+	npm install @shower/material
 
 ## Features
 
@@ -36,7 +36,7 @@ If you want to adjust theme for your needs:
 
 1. Fork this repository and clone it to your local machine.
 2. Install dependencies: `npm install`.
-3. Start a local server with watcher: `npm run dev` or just `gulp` if you have it installed globally.
+3. Start a local server with watcher: `npm start`.
 4. Edit your files and see changes in the opened browser.
 
 To take part in Material development please read [contributing guidelines](CONTRIBUTING.md) first and [file an issue](https://github.com/shower/shower/issues/new) before sending any pull request.

shower/themes/material/index.html

@@ -12,7 +12,7 @@
         }
     </style>
 </head>
-<body class="shower list">
+<body class="shower list grid">
 
     <header class="caption">
         <h1>Presentation Title</h1>
@@ -27,9 +27,9 @@
     </section>
 
     <section class="slide">
-        <h2>First Slide Header</h2>
+        <h2>First Header</h2>
         <p>Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic.</p>
-        <h2>Second Slide Header</h2>
+        <h2>Second Header</h2>
         <p>Whatever authentic disrupt, you probably haven’t heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid four loko quinoa.</p>
     </section>
 
@@ -55,7 +55,7 @@
     </section>
 
     <section class="slide">
-        <h2>Quotes</h2>
+        <h2>Block Quotes</h2>
         <blockquote>
             <p>Flannel bicycle rights locavore selfies skateboard. Authentic fanny pack paleo four loko bespoke. Artisan tattooed chia XOXO ennui, lomo disrupt 8-bit art party Tumblr scenester.</p>
         </blockquote>
@@ -68,7 +68,7 @@
     </section>
 
     <section class="slide">
-        <h2>Ordered Lists</h2>
+        <h2>Ordered List</h2>
         <ol>
             <li>Literally viral vegan, ugh drinking vinegar photo booth</li>
             <li>Wes Anderson chillwave Marfa pour-over Etsy banh mi</li>
@@ -81,7 +81,7 @@
     </section>
 
     <section class="slide">
-        <h2>Unordered Lists</h2>
+        <h2>Unordered List</h2>
         <ul>
             <li>Literally viral vegan, ugh drinking vinegar photo booth</li>
             <li>Wes Anderson chillwave Marfa pour-over Etsy banh mi</li>
@@ -94,7 +94,7 @@
     </section>
 
     <section class="slide">
-        <h2>Block Lists</h2>
+        <h2>Multiline List Items</h2>
         <ul>
             <li>Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack.</li>
             <li>Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Hella sustainable messenger bag.</li>
@@ -147,7 +147,7 @@
     </section>
 
     <section class="slide">
-        <h2>Two Columns</h2>
+        <h2>Two Text Columns</h2>
         <div class="columns two">
             <p>Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic. Farm-to-table bespoke fingerstache, kale chips umami brunch.</p>
             <p>American Apparel letterpress. Whatever authentic disrupt, you probably haven’t heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid American Apparel four loko quinoa.</p>
@@ -155,7 +155,7 @@
     </section>
 
     <section class="slide">
-        <h2>Two Lists</h2>
+        <h2>Two List Columns</h2>
         <div class="columns two">
             <ul>
                 <li>Occupy locavore, mustache you probably haven’t heard of them</li>
@@ -171,7 +171,7 @@
     </section>
 
     <section class="slide">
-        <h2>Three Lists</h2>
+        <h2>Three List Columns</h2>
         <div class="columns three">
             <ul>
                 <li>Skateboard pork belly aesthetic hoodie selfies brunch.</li>
@@ -189,7 +189,7 @@
     </section>
 
     <section class="slide">
-        <h2>Four Lists</h2>
+        <h2>Four List Columns</h2>
         <div class="columns four">
             <ul>
                 <li>Gentrify</li>
@@ -229,11 +229,11 @@
     <section class="slide">
         <div class="columns two">
             <div>
-                <h2>Column One</h2>
+                <h2>Column Header 1</h2>
                 <p>Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack bespoke Helvetica roof party. Messenger bag retro cred Portland next level.</p>
             </div>
             <div>
-                <h2>Column Two</h2>
+                <h2>Column Header 2</h2>
                 <p>Yr stumptown Schlitz Carles deep v small batch. Echo Park 8-bit sustainable umami deep v Kickstarter. Hella sustainable messenger bag, leggings skateboard literally bicycle rights H₂0 mumblecore banh.</p>
             </div>
         </div>
@@ -432,7 +432,7 @@
     </section>
 
     <section class="slide">
-        <h2>Plain Code Listing</h2>
+        <h2>Plain Code Block</h2>
         <pre><code>&lt;html lang="en"&gt;
 <mark>&lt;head&gt;</mark> <span class="comment">&lt;!--Comment--&gt;</span>
     &lt;title&gt;Shower&lt;/title&gt;
@@ -442,7 +442,7 @@
 <mark>&lt;/head&gt;</mark></code></pre>
     </section>
     <section class="slide">
-        <h2>Numbered Code Listing</h2>
+        <h2>Numbered Code Lines</h2>
         <pre>
             <code>&lt;html lang="en"&gt;</code>
             <code><mark>&lt;head&gt;</mark> <span class="comment">&lt;!--Comment--&gt;</span></code>
@@ -455,20 +455,20 @@
     </section>
 
     <section class="slide">
-        <h2>Highlighted Code Lines</h2>
+        <h2>Marked Code Lines</h2>
         <pre>
             <code>&lt;html lang="en"&gt;</code>
-            <code class="mark">&lt;head&gt; <span class="comment">&lt;!--Comment--&gt;</span></code>
-            <code>    &lt;title&gt;Shower&lt;/title&gt;</code>
+            <code>&lt;head&gt; <span class="comment">&lt;!--Comment--&gt;</span></code>
+            <code class="mark">    &lt;title&gt;Shower&lt;/title&gt;</code>
             <code>    &lt;meta charset="<mark class="important">UTF-8</mark>"&gt;</code>
-            <code>    &lt;link rel="stylesheet" href="screen.css"&gt;</code>
+            <code class="mark">    &lt;link rel="stylesheet" href="screen.css"&gt;</code>
             <code>    &lt;script src="script.js"&gt;&lt;/script&gt;</code>
-            <code class="mark">&lt;/head&gt;</code>
+            <code>&lt;/head&gt;</code>
         </pre>
     </section>
 
     <section class="slide">
-        <h2>Hidden Code Steps</h2>
+        <h2>Stepped Code Lines</h2>
         <pre>
             <code class="next">&lt;html lang="en"&gt;</code>
             <code class="next"><mark>&lt;head&gt;</mark> <span class="comment">&lt;!--Comment--&gt;</span></code>
@@ -481,15 +481,15 @@
     </section>
 
     <section class="slide">
-        <h2>Highlighted Code Steps</h2>
+        <h2>Stepped Marked Code Lines</h2>
         <pre>
-            <code class="mark next">&lt;html lang="en"&gt;</code>
+            <code>&lt;html lang="en"&gt;</code>
             <code>&lt;head&gt; <span class="comment">&lt;!--Comment--&gt;</span></code>
             <code class="mark next">    &lt;title&gt;Shower&lt;/title&gt;</code>
             <code>    &lt;meta charset="<mark class="important">UTF-8</mark>"&gt;</code>
             <code class="mark next">    &lt;link rel="stylesheet" href="screen.css"&gt;</code>
             <code>    &lt;script src="script.js"&gt;&lt;/script&gt;</code>
-            <code class="mark next">&lt;/head&gt;</code>
+            <code>&lt;/head&gt;</code>
         </pre>
     </section>
 
@@ -511,7 +511,8 @@
 
     <section class="slide">
         <h2 class="shout">
-            Multiline<br>
+            Long
+            Multiline
             Shout
         </h2>
     </section>
@@ -525,7 +526,8 @@
     <section class="slide">
         <h2 class="shout">
             <a href="">
-                Multiline<br>
+                Long
+                Multiline
                 Linked
             </a>
         </h2>
@@ -552,7 +554,7 @@
     </section>
 
     <section class="slide clear">
-        <h2>Place</h2>
+        <h2>Placed Elements</h2>
         <img class="place top left" src="pictures/square.svg" alt="Square picture placeholder.">
         <img class="place top" src="pictures/square.svg" alt="Square picture placeholder.">
         <img class="place top right" src="pictures/square.svg" alt="Square picture placeholder.">
@@ -565,7 +567,7 @@
     </section>
 
     <section class="slide">
-        <h2>List Navigation</h2>
+        <h2>Stepped List</h2>
         <ol>
             <li>Ennui keffiyeh thundercats</li>
             <li class="next">Jean shorts biodiesel</li>
@@ -577,14 +579,38 @@
     </section>
 
     <section class="slide clear">
-        <h2>Place + Next</h2>
+        <h2>Stepped Placed</h2>
         <img class="place next left" height="100%" src="pictures/picture-1.svg" alt="Picture placeholder.">
         <img class="place next" height="100%" src="pictures/picture-2.svg" alt="Picture placeholder.">
         <img class="place next right" height="100%" src="pictures/picture-3.svg" alt="Picture placeholder.">
     </section>
 
+    <section class="slide">
+        <h2>Spotlight</h2>
+        <p>Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack bespoke Helvetica roof party. Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Echo Park 8-bit sustainable umami deep v Kickstarter. Hella sustainable messenger bag, leggings skateboard literally bicycle rights H₂0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical.</p>
+        <div class="spotlight" style="
+            --spotlight-radius: 50%;
+            --spotlight-opacity: 0.2;
+            --spotlight-size: 256px;
+            --spotlight-top: 70px;
+            --spotlight-left: 280px;
+        "></div>
+    </section>
+
+    <section class="slide">
+        <h2>Spotlight</h2>
+        <p>Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack bespoke Helvetica roof party. Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Echo Park 8-bit sustainable umami deep v Kickstarter. Hella sustainable messenger bag, leggings skateboard literally bicycle rights H₂0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical.</p>
+        <div class="spotlight" style="
+            --spotlight-radius: 0;
+            --spotlight-opacity: 0.2;
+            --spotlight-width: 1024px;
+            --spotlight-height: 48px;
+            --spotlight-top: 37px;
+        "></div>
+    </section>
+
     <section class="slide" data-timing="00:03">
-        <h2 class="shout">Timer</h2>
+        <h2 class="shout">Timed Slide</h2>
     </section>
 
     <section class="slide">
@@ -602,7 +628,7 @@
 		</a>
 	</footer>
 
-	<script src="node_modules/shower-core/shower.min.js"></script>
+	<script src="node_modules/@shower/core/dist/shower.js"></script>
 
 	<!-- Copyright © 3000 Yours Truly, Famous Inc. -->
 </body>

shower/themes/material/styles/shower/shower.css

@@ -12,6 +12,8 @@
     --slide-height: calc(
         var(--slide-width) / var(--slide-ratio)
     );
+    --slide-left-side: 96px;
+    --slide-right-side: 112px;
 
     --color-key: #4caf50;
     --color-black: #212121;
@@ -20,7 +22,6 @@
     --color-light: #bdbdbd;
     --color-back: #eeeeee;
     --color-yellow: #fff59d;
-    --color-yellow-light: #ffffcf;
 
     --progress-size: 8px;
 

shower/themes/material/styles/slide/content/code.css

@@ -11,12 +11,19 @@
 
 .slide pre code {
     display: block;
-    margin-left: -96px;
-    padding: 0 0 0 96px;
-    width: calc(100% + 96px + 112px);
+    margin-left: calc(
+        var(--slide-left-side) * -1
+    );
+    padding: 0 0 0 var(--slide-left-side);
+    width: calc(
+        100% +
+        var(--slide-left-side) +
+        var(--slide-right-side)
+    );
     background-color: transparent;
     line-height: 2;
     white-space: pre;
+    -moz-tab-size: 4;
     tab-size: 4;
 }
 
@@ -53,19 +60,20 @@
 
 /* Marked Line */
 
-.slide pre code.mark:not(:only-child) {
-    background-color: var(--color-back);
+.slide pre code:not(:only-child).mark {
+    background-color: var(--color-yellow);
 }
 
 /* Next Line */
 
-.slide pre code.mark.next:not(:only-child) {
+.slide pre code:not(:only-child).mark.next {
     visibility: visible;
     background-color: transparent;
 }
 
-.slide pre code.mark.next.active:not(:only-child) {
-    background-color: var(--color-back);
+.slide pre code:not(:only-child).mark.next.active,
+.slide pre code:not(:only-child).mark.next.visited {
+    background-color: var(--color-yellow);
 }
 
 /* Full */
@@ -75,6 +83,7 @@
     background-color: transparent;
 }
 
-.shower.full .slide pre code:not(:only-child).mark.next.active {
-    background-color: var(--color-back);
+.shower.full .slide pre code:not(:only-child).mark.next.active,
+.shower.full .slide pre code:not(:only-child).mark.next.visited {
+    background-color: var(--color-yellow);
 }

shower/themes/material/styles/slide/content/footer.css

@@ -6,8 +6,10 @@
     bottom: 0;
     left: 0;
     z-index: 1;
-    padding: 48px 112px 24px 96px;
-    background-color: var(--color-yellow-light);
+    padding:
+        48px var(--slide-right-side)
+        24px var(--slide-left-side);
+    background-color: var(--color-yellow);
     transition: transform 0.3s;
 }
 

shower/themes/material/styles/slide/content/table.css

 /* Table */
 
 .slide table {
-    margin-left: -96px;
+    margin-left: calc(
+        var(--slide-left-side) * -1
+    );
     margin-bottom: 1em;
-    width: calc(96px + 100% + 112px);
+    width: calc(
+        100% +
+        var(--slide-left-side) +
+        var(--slide-right-side)
+    );
     border-collapse: collapse;
     border-spacing: 0;
 }
@@ -23,12 +29,12 @@
 
 .slide th:first-child,
 .slide td:first-child {
-    padding-left: 96px;
+    padding-left: var(--slide-left-side);
 }
 
 .slide th:last-child,
 .slide td:last-child {
-    padding-right: 96px;
+    padding-right: var(--slide-left-side);
 }
 
 /* Lines */
@@ -66,6 +72,7 @@
     background-color: transparent;
 }
 
-.slide tr.mark.next.active {
+.slide tr.mark.next.active,
+.slide tr.mark.next.visited {
     background-color: var(--color-yellow);
 }

shower/themes/material/styles/slide/elements/next.css

@@ -4,6 +4,7 @@
     visibility: hidden;
 }
 
-.shower.full .next.active {
+.shower.full .next.active,
+.shower.full .next.visited {
     visibility: visible;
 }

shower/themes/material/styles/slide/elements/shout.css

@@ -5,7 +5,8 @@
     top: 50%;
     left: 0;
     width: 100%;
-    padding-left: 96px;
+    padding-left: var(--slide-left-side);
+    box-sizing: border-box;
     color: white;
     line-height: 1.1;
     font-size: 112px;

shower/themes/material/styles/slide/elements/spotlight.css

+/* Spotlight */
+
+.spotlight {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    margin-top: var(--spotlight-top, 0);
+    margin-left: var(--spotlight-left, 0);
+    width: var(--spotlight-size, var(--spotlight-width, 256px));
+    height: var(--spotlight-size, var(--spotlight-height, 256px));
+    border-radius: var(--spotlight-radius, 50%);
+    box-shadow:
+        0 0 0 var(--slide-width)
+        rgba(
+            0, 0, 0,
+            var(--spotlight-opacity, 0.2)
+        );
+    pointer-events: none;
+}

shower/themes/material/styles/slide/slide.css

@@ -21,6 +21,7 @@
 @import 'elements/next.css';
 @import 'elements/place.css';
 @import 'elements/shout.css';
+@import 'elements/spotlight.css';
 
 /* Modifiers */
 
@@ -35,7 +36,9 @@
     z-index: 0;
     overflow: hidden;
     box-sizing: border-box;
-    padding: 79px 112px 0 96px;
+    padding:
+        79px var(--slide-right-side)
+        0 var(--slide-left-side);
     width: var(--slide-width);
     height: var(--slide-height);
     background-color: white;

shower/themes/ribbon/LICENSE.md

 # The MIT License
 
-Copyright © 2010–2019 Vadim Makeev, http://pepelsbey.net/
+Copyright © 2010–2019 Vadim Makeev, https://pepelsbey.net/
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
@@ -12,7 +12,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
 # Лицензия MIT
 
-Copyright © 2010–2019 Вадим Макеев, http://pepelsbey.net/
+Copyright © 2010–2019 Вадим Макеев, https://pepelsbey.net/
 
 Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:
 

shower/themes/ribbon/README.md

@@ -2,17 +2,17 @@
 
 ![Ribbon screen shot](pictures/canvas.png)
 
-Default theme for the [Shower](https://github.com/shower/shower/) presentation engine. Doesn’t include engine itself. [See it in action](http://shwr.me/shower/themes/ribbon/). Follow [@shower_me](https://twitter.com/shower_me) for support and updates, [file an issue](https://github.com/shower/shower/issues/new) if you have any.
+Default theme for the [Shower](https://github.com/shower/shower/) presentation engine. Doesn’t include engine itself. [See it in action](https://shwr.me/shower/themes/ribbon/). Follow [@shower_me](https://twitter.com/shower_me) for support and updates, [file an issue](https://github.com/shower/shower/issues/new) if you have any.
 
 ## Usage
 
-Get the Shower template where Ribbon is already included. Download the [template archive](http://shwr.me/shower.zip) or install the package:
+Get the Shower template where Ribbon is already included. Download the [template archive](https://shwr.me/shower.zip) or install the package:
 
 	npm install shower
 
 If you want to install Ribbon separately you can install the package:
 
-	npm install shower-ribbon
+	npm install @shower/ribbon
 
 ## Features
 

shower/themes/ribbon/fonts/LICENSE.txt

-Copyright (c) 2009, ParaType Ltd. All Rights Reserved.
-
-LICENSING AGREEMENT 
-for the fonts with Original Name: PT Sans, PT Serif, PT Mono.
-Version 1.3 - January 20, 2012
-
-GRANT OF LICENSE
-ParaType Ltd grants you the right to use, copy, modify the fonts and distribute 
-modified and unmodified copies of the fonts by any means, including placing 
-on Web servers for free downloading, embedding in documents and Web pages, 
-bundling with commercial and non commercial products, if it does not conflict 
-with the conditions listed below:
-
-- You may bundle the font with commercial software, but you may not sell the 
-fonts by themselves. They are free. 
-
-- You may distribute the fonts in modified or unmodified version only together 
-with this Licensing Agreement and with above copyright notice. You have no 
-right to modify the text of Licensing Agreement. It can be placed in a separate 
-text file or inserted into the font file, but it must be easily viewed by users.
-
-- You may not distribute modified version of the font under the Original name 
-or � combination of Original name with any other words without explicit written 
-permission from ParaType.
-
-TERMINATION & TERRITORY
-This license has no limits on time and territory, but it becomes null and void 
-if any of the above conditions are not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF 
-ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY  
-WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR 
-PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, 
-OR OTHER RIGHT. IN NO EVENT SHALL PARATYPE BE LIABLE FOR ANY 
-CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, 
-INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN 
-AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT 
-OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER 
-DEALINGS IN THE FONT SOFTWARE.
-
-ParaType Ltd
-http://www.paratype.ru
-
+Copyright (c) 2009, ParaType Ltd. All Rights Reserved.
+
+LICENSING AGREEMENT
+for the fonts with Original Name: PT Sans, PT Serif, PT Mono.
+Version 1.3 - January 20, 2012
+
+GRANT OF LICENSE
+ParaType Ltd grants you the right to use, copy, modify the fonts and distribute
+modified and unmodified copies of the fonts by any means, including placing
+on Web servers for free downloading, embedding in documents and Web pages,
+bundling with commercial and non commercial products, if it does not conflict
+with the conditions listed below:
+
+- You may bundle the font with commercial software, but you may not sell the
+fonts by themselves. They are free.
+
+- You may distribute the fonts in modified or unmodified version only together
+with this Licensing Agreement and with above copyright notice. You have no
+right to modify the text of Licensing Agreement. It can be placed in a separate
+text file or inserted into the font file, but it must be easily viewed by users.
+
+- You may not distribute modified version of the font under the Original name
+or � combination of Original name with any other words without explicit written
+permission from ParaType.
+
+TERMINATION & TERRITORY
+This license has no limits on time and territory, but it becomes null and void
+if any of the above conditions are not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK,
+OR OTHER RIGHT. IN NO EVENT SHALL PARATYPE BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL,
+INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN
+AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT
+OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
+DEALINGS IN THE FONT SOFTWARE.
+
+ParaType Ltd
+https://www.paratype.ru/

shower/themes/ribbon/index.html

@@ -11,7 +11,7 @@
         }
     </style>
 </head>
-<body class="shower list">
+<body class="shower list grid">
 
     <header class="caption">
         <h1>Presentation Title</h1>
@@ -26,9 +26,9 @@
     </section>
 
     <section class="slide">
-        <h2>First Slide Header</h2>
+        <h2>First Header</h2>
         <p>Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic.</p>
-        <h2>Second Slide Header</h2>
+        <h2>Second Header</h2>
         <p>Whatever authentic disrupt, you probably haven’t heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid four loko quinoa.</p>
     </section>
 
@@ -54,7 +54,7 @@
     </section>
 
     <section class="slide">
-        <h2>Quotes</h2>
+        <h2>Block Quotes</h2>
         <blockquote>
             <p>Flannel bicycle rights locavore selfies skateboard. Authentic fanny pack paleo four loko bespoke. Artisan tattooed chia XOXO ennui, lomo disrupt 8-bit art party Tumblr scenester.</p>
         </blockquote>
@@ -67,7 +67,7 @@
     </section>
 
     <section class="slide">
-        <h2>Ordered Lists</h2>
+        <h2>Ordered List</h2>
         <ol>
             <li>Literally viral vegan, ugh drinking vinegar photo booth</li>
             <li>Wes Anderson chillwave Marfa pour-over Etsy banh mi</li>
@@ -80,7 +80,7 @@
     </section>
 
     <section class="slide">
-        <h2>Unordered Lists</h2>
+        <h2>Unordered List</h2>
         <ul>
             <li>Literally viral vegan, ugh drinking vinegar photo booth</li>
             <li>Wes Anderson chillwave Marfa pour-over Etsy banh mi</li>
@@ -93,7 +93,7 @@
     </section>
 
     <section class="slide">
-        <h2>Block Lists</h2>
+        <h2>Multiline List Items</h2>
         <ul>
             <li>Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack.</li>
             <li>Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Hella sustainable messenger bag.</li>
@@ -146,7 +146,7 @@
     </section>
 
     <section class="slide">
-        <h2>Two Columns</h2>
+        <h2>Two Text Columns</h2>
         <div class="columns two">
             <p>Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic. Farm-to-table bespoke fingerstache, kale chips umami brunch.</p>
             <p>American Apparel letterpress. Whatever authentic disrupt, you probably haven’t heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid American Apparel four loko quinoa.</p>
@@ -154,7 +154,7 @@
     </section>
 
     <section class="slide">
-        <h2>Two Lists</h2>
+        <h2>Two List Columns</h2>
         <div class="columns two">
             <ul>
                 <li>Occupy locavore, mustache you probably haven’t heard of them</li>
@@ -170,7 +170,7 @@
     </section>
 
     <section class="slide">
-        <h2>Three Lists</h2>
+        <h2>Three List Columns</h2>
         <div class="columns three">
             <ul>
                 <li>Skateboard pork belly aesthetic hoodie selfies brunch.</li>
@@ -188,7 +188,7 @@
     </section>
 
     <section class="slide">
-        <h2>Four Lists</h2>
+        <h2>Four List Columns</h2>
         <div class="columns four">
             <ul>
                 <li>Gentrify</li>
@@ -228,11 +228,11 @@
     <section class="slide">
         <div class="columns two">
             <div>
-                <h2>Column One</h2>
+                <h2>Column Header One</h2>
                 <p>Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack bespoke Helvetica roof party. Messenger bag retro cred Portland next level.</p>
             </div>
             <div>
-                <h2>Column Two</h2>
+                <h2>Column Header Two</h2>
                 <p>Yr stumptown Schlitz Carles deep v small batch. Echo Park 8-bit sustainable umami deep v Kickstarter. Hella sustainable messenger bag, leggings skateboard literally bicycle rights H₂0 mumblecore banh.</p>
             </div>
         </div>
@@ -287,7 +287,7 @@
     </section>
 
     <section class="slide">
-        <h2>Marked Table</h2>
+        <h2>Marked Simple Table</h2>
         <table>
         <tr>
             <th scope="col">Gentrify</th>
@@ -335,7 +335,7 @@
     </section>
 
     <section class="slide">
-        <h2>Marked Striped Table</h2>
+        <h2>Striped Table</h2>
         <table class="striped">
         <tr>
             <th scope="col">Gentrify</th>
@@ -431,7 +431,7 @@
     </section>
 
     <section class="slide">
-        <h2>Plain Code Listing</h2>
+        <h2>Plain Code Block</h2>
         <pre><code>&lt;html lang="en"&gt;
 <mark>&lt;head&gt;</mark> <span class="comment">&lt;!--Comment--&gt;</span>
     &lt;title&gt;Shower&lt;/title&gt;
@@ -441,7 +441,7 @@
 <mark>&lt;/head&gt;</mark></code></pre>
     </section>
     <section class="slide">
-        <h2>Numbered Code Listing</h2>
+        <h2>Numbered Code Lines</h2>
         <pre>
             <code>&lt;html lang="en"&gt;</code>
             <code><mark>&lt;head&gt;</mark> <span class="comment">&lt;!--Comment--&gt;</span></code>
@@ -454,20 +454,20 @@
     </section>
 
     <section class="slide">
-        <h2>Highlighted Code Lines</h2>
+        <h2>Marked Code Lines</h2>
         <pre>
             <code>&lt;html lang="en"&gt;</code>
-            <code class="mark">&lt;head&gt; <span class="comment">&lt;!--Comment--&gt;</span></code>
-            <code>    &lt;title&gt;Shower&lt;/title&gt;</code>
+            <code>&lt;head&gt; <span class="comment">&lt;!--Comment--&gt;</span></code>
+            <code class="mark">    &lt;title&gt;Shower&lt;/title&gt;</code>
             <code>    &lt;meta charset="<mark class="important">UTF-8</mark>"&gt;</code>
-            <code>    &lt;link rel="stylesheet" href="screen.css"&gt;</code>
+            <code class="mark">    &lt;link rel="stylesheet" href="screen.css"&gt;</code>
             <code>    &lt;script src="script.js"&gt;&lt;/script&gt;</code>
-            <code class="mark">&lt;/head&gt;</code>
+            <code>&lt;/head&gt;</code>
         </pre>
     </section>
 
     <section class="slide">
-        <h2>Hidden Code Steps</h2>
+        <h2>Stepped Code Lines</h2>
         <pre>
             <code class="next">&lt;html lang="en"&gt;</code>
             <code class="next"><mark>&lt;head&gt;</mark> <span class="comment">&lt;!--Comment--&gt;</span></code>
@@ -480,15 +480,15 @@
     </section>
 
     <section class="slide">
-        <h2>Highlighted Code Steps</h2>
+        <h2>Stepped Marked Code Lines</h2>
         <pre>
-            <code class="mark next">&lt;html lang="en"&gt;</code>
+            <code>&lt;html lang="en"&gt;</code>
             <code>&lt;head&gt; <span class="comment">&lt;!--Comment--&gt;</span></code>
             <code class="mark next">    &lt;title&gt;Shower&lt;/title&gt;</code>
             <code>    &lt;meta charset="<mark class="important">UTF-8</mark>"&gt;</code>
             <code class="mark next">    &lt;link rel="stylesheet" href="screen.css"&gt;</code>
             <code>    &lt;script src="script.js"&gt;&lt;/script&gt;</code>
-            <code class="mark next">&lt;/head&gt;</code>
+            <code>&lt;/head&gt;</code>
         </pre>
     </section>
 
@@ -510,7 +510,8 @@
 
     <section class="slide">
         <h2 class="shout">
-            Multiline<br>
+            Long
+            Multiline
             Shout
         </h2>
     </section>
@@ -524,7 +525,8 @@
     <section class="slide">
         <h2 class="shout">
             <a href="">
-                Multiline<br>
+                Long
+                Multiline
                 Linked
             </a>
         </h2>
@@ -559,7 +561,7 @@
     </section>
 
     <section class="slide clear">
-        <h2>Place</h2>
+        <h2>Placed Elements</h2>
         <img class="place top left" src="pictures/square.svg" alt="Square picture placeholder.">
         <img class="place top" src="pictures/square.svg" alt="Square picture placeholder.">
         <img class="place top right" src="pictures/square.svg" alt="Square picture placeholder.">
@@ -572,7 +574,7 @@
     </section>
 
     <section class="slide">
-        <h2>List Navigation</h2>
+        <h2>Stepped List</h2>
         <ol>
             <li>Ennui keffiyeh thundercats</li>
             <li class="next">Jean shorts biodiesel</li>
@@ -584,14 +586,38 @@
     </section>
 
     <section class="slide clear">
-        <h2>Place + Next</h2>
+        <h2>Stepped Placed</h2>
         <img class="place next left" height="100%" src="pictures/picture-1.svg" alt="Picture placeholder.">
         <img class="place next" height="100%" src="pictures/picture-2.svg" alt="Picture placeholder.">
         <img class="place next right" height="100%" src="pictures/picture-3.svg" alt="Picture placeholder.">
     </section>
 
+    <section class="slide">
+        <h2>Spotlight</h2>
+        <p>Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack bespoke Helvetica roof party. Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Echo Park 8-bit sustainable umami deep v Kickstarter. Hella sustainable messenger bag, leggings skateboard literally bicycle rights H₂0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical.</p>
+        <div class="spotlight" style="
+            --spotlight-radius: 50%;
+            --spotlight-opacity: 0.2;
+            --spotlight-size: 256px;
+            --spotlight-top: 90px;
+            --spotlight-left: 290px;
+        "></div>
+    </section>
+
+    <section class="slide">
+        <h2>Spotlight</h2>
+        <p>Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack bespoke Helvetica roof party. Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Echo Park 8-bit sustainable umami deep v Kickstarter. Hella sustainable messenger bag, leggings skateboard literally bicycle rights H₂0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical.</p>
+        <div class="spotlight" style="
+            --spotlight-radius: 0;
+            --spotlight-opacity: 0.2;
+            --spotlight-width: 1024px;
+            --spotlight-height: 50px;
+            --spotlight-top: 50px;
+        "></div>
+    </section>
+
     <section class="slide" data-timing="00:03">
-        <h2 class="shout">Timer</h2>
+        <h2 class="shout">Timed Slide</h2>
     </section>
 
     <section class="slide">
@@ -604,7 +630,7 @@
         <a href="https://github.com/shower/shower">Fork me on GitHub</a>
     </footer>
 
-    <script src="node_modules/shower-core/shower.min.js"></script>
+    <script src="node_modules/@shower/core/dist/shower.js"></script>
 
     <!-- Copyright © 3000 Yours Truly, Famous Inc. -->
 </body>

shower/themes/ribbon/styles/blocks/badge.css

@@ -22,7 +22,7 @@
     bottom: 50%;
     left: -50%;
     visibility: visible;
-    background: var(--color-blue);
+    background-color: var(--color-blue);
     color: white;
     text-decoration: none;
     text-align: center;

shower/themes/ribbon/styles/blocks/progress.css

@@ -14,7 +14,7 @@
     display: block;
     width: 100%;
     height: var(--progress-size);
-    background: var(--color-blue);
+    background-color: var(--color-blue);
     content: '';
     transform-origin: 0 100%;
     transform: skewX(45deg);

shower/themes/ribbon/styles/shower/shower-full.css

@@ -13,5 +13,5 @@
     );
     width: var(--slide-width);
     height: var(--slide-height);
-    background: black;
+    background-color: black;
 }

shower/themes/ribbon/styles/shower/shower-list.css

@@ -18,7 +18,7 @@
         auto-fill,
         calc(var(--slide-width) * var(--slide-scale))
     );
-    background: var(--color-grey);
+    background-color: var(--color-grey);
 }
 
 /* IE & Edge Fix */

shower/themes/ribbon/styles/shower/shower.css

@@ -12,6 +12,7 @@
     --slide-height: calc(
         var(--slide-width) / var(--slide-ratio)
     );
+    --slide-side: 100px;
 
     --color-blue: #4b86c2;
     --color-blue-lighter: #6799cb;

shower/themes/ribbon/styles/slide/content/code.css

@@ -11,13 +11,18 @@
 
 .slide pre code {
     display: block;
-    margin-left: -100px;
-    padding: 0 0 0 100px;
-    width: calc(100% + 100px + 100px);
+    margin-left: calc(
+        var(--slide-side) * -1
+    );
+    padding: 0 0 0 var(--slide-side);
+    width: calc(
+        100% + var(--slide-side) * 2
+    );
     border-radius: 0;
-    background: none;
+    background-color: transparent;
     line-height: 2;
     white-space: pre;
+    -moz-tab-size: 4;
     tab-size: 4;
 }
 
@@ -43,8 +48,8 @@
 /* Important */
 
 .slide pre mark.important {
-    background: var(--color-red);
-    color: #ffffff;
+    background-color: var(--color-red);
+    color: white;
 }
 
 /* Comment */
@@ -55,28 +60,30 @@
 
 /* Marked Line */
 
-.slide pre code.mark:not(:only-child) {
-    background: var(--color-fill);
+.slide pre code:not(:only-child).mark {
+    background-color: var(--color-yellow);
 }
 
 /* Next Line */
 
-.slide pre code.mark.next:not(:only-child) {
+.slide pre code:not(:only-child).mark.next {
     visibility: visible;
-    background: none;
+    background-color: transparent;
 }
 
-.slide pre code.mark.next.active:not(:only-child) {
-    background: var(--color-fill);
+.slide pre code:not(:only-child).mark.next.active,
+.slide pre code:not(:only-child).mark.next.visited {
+    background-color: var(--color-yellow);
 }
 
 /* Full */
 
 .shower.full .slide pre code:not(:only-child).mark.next {
     visibility: visible;
-    background: none;
+    background-color: transparent;
 }
 
-.shower.full .slide pre code:not(:only-child).mark.next.active {
-    background: var(--color-fill);
+.shower.full .slide pre code:not(:only-child).mark.next.active,
+.shower.full .slide pre code:not(:only-child).mark.next.visited {
+    background-color: var(--color-yellow);
 }

shower/themes/ribbon/styles/slide/content/footer.css

@@ -6,8 +6,8 @@
     bottom: 0;
     left: 0;
     z-index: 1;
-    padding: 50px 100px 25px;
-    background: var(--color-yellow);
+    padding: 50px var(--slide-side) 25px;
+    background-color: var(--color-yellow);
     transition: transform 0.3s linear;
 }
 

shower/themes/ribbon/styles/slide/content/inline.css

@@ -22,13 +22,13 @@
 .slide code,
 .slide kbd,
 .slide samp {
-    background: var(--color-fill);
+    background-color: var(--color-fill);
     line-height: 1;
     font-family: 'PT Mono', monospace;
 }
 
 .slide mark {
-    background: var(--color-yellow);
+    background-color: var(--color-yellow);
 }
 
 .slide sub,

shower/themes/ribbon/styles/slide/content/table.css

 /* Table */
 
 .slide table {
-    margin-left: -100px;
+    margin-left: calc(var(--slide-side) * -1);
     margin-bottom: 1em;
     width: calc(
-        100% + 100px + 100px
+        100% + var(--slide-side) * 2
     );
     border-collapse: collapse;
     border-spacing: 0;
@@ -67,6 +67,7 @@
     background-color: transparent;
 }
 
-.slide tr.mark.next.active {
+.slide tr.mark.next.active,
+.slide tr.mark.next.visited {
     background-color: var(--color-yellow);
 }

shower/themes/ribbon/styles/slide/elements/next.css

@@ -4,6 +4,7 @@
     visibility: hidden;
 }
 
-.shower.full .next.active {
+.shower.full .next.active,
+.shower.full .next.visited {
     visibility: visible;
 }

shower/themes/ribbon/styles/slide/elements/spotlight.css

+/* Spotlight */
+
+.spotlight {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    margin-top: var(--spotlight-top, 0);
+    margin-left: var(--spotlight-left, 0);
+    width: var(--spotlight-size, var(--spotlight-width, 256px));
+    height: var(--spotlight-size, var(--spotlight-height, 256px));
+    border-radius: var(--spotlight-radius, 50%);
+    box-shadow:
+        0 0 0 var(--slide-width)
+        rgba(
+            0, 0, 0,
+            var(--spotlight-opacity, 0.2)
+        );
+    pointer-events: none;
+}

shower/themes/ribbon/styles/slide/slide.css

@@ -21,6 +21,7 @@
 @import 'elements/next.css';
 @import 'elements/place.css';
 @import 'elements/shout.css';
+@import 'elements/spotlight.css';
 
 /* Modifiers */
 
@@ -35,10 +36,10 @@
     z-index: 0;
     overflow: hidden;
     box-sizing: border-box;
-    padding: 75px 100px 0;
+    padding: 75px var(--slide-side) 0;
     width: var(--slide-width);
     height: var(--slide-height);
-    background: #ffffff;
+    background-color: white;
 }
 
 /* Number */
@@ -53,7 +54,7 @@
     height: calc(var(--ribbon-size) * 2);
     background-image: url('ribbon.svg');
     background-size: cover;
-    color: #ffffff;
+    color: white;
     counter-increment: slide;
     content: counter(slide);
     text-align: center;