@shower/core 3.0.0-2 → 3.3.0

package/lib/shower.js

@@ -1,86 +1,89 @@
 import defaultOptions from './default-options';
 import Slide from './slide';
-import { EventTarget } from './utils';
-import installModules from './modules';
-
-const ensureSlideId = (slideElement, index) => {
-    if (!slideElement.id) {
-        slideElement.id = index + 1;
-    }
-};
+import { defineReadOnly, ShowerError } from './utils';
+import installModules from './modules/install';
 
 class Shower extends EventTarget {
+    /**
+     * @param {object=} options
+     */
     constructor(options) {
         super();
 
+        defineReadOnly(this, {
+            options: { ...defaultOptions, ...options },
+        });
+
         this._mode = 'list';
         this._isStarted = false;
-        this.options = Object.assign({}, defaultOptions, options);
+        this._container = null;
     }
 
     /**
-     * @param {object} options
+     * @param {object=} options
+     * @throws {ShowerError}
      */
     configure(options) {
+        if (this._isStarted) {
+            throw new ShowerError('Shower should be configured before it is started.');
+        }
+
         Object.assign(this.options, options);
     }
 
+    /**
+     * @throws {ShowerError}
+     * @emits Shower#start
+     */
     start() {
         if (this._isStarted) return;
 
         const { containerSelector } = this.options;
-        this.container = document.querySelector(containerSelector);
-        if (!this.container) {
-            throw new Error(`Shower container with selector '${containerSelector}' not found.`);
+        this._container = document.querySelector(containerSelector);
+        if (!this._container) {
+            throw new ShowerError(
+                `Shower container with selector '${containerSelector}' was 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._isStarted = true;
         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._toggleActiveSlide(slide);
-            });
-
-            slide.element.addEventListener('click', () => {
-                if (this.isListMode) {
-                    slide.activate();
-                    this.enterFullMode();
-                }
-            });
-
-            return slide;
-        });
-    }
+        const visibleSlideSelector = `${this.options.slideSelector}:not([hidden])`;
+        const visibleSlideElements = this._container.querySelectorAll(visibleSlideSelector);
 
-    _toggleActiveSlide(target) {
-        // at this point, there can be two active slides
-        this.slides.forEach(slide => {
-            if (slide !== target) {
-                slide.deactivate();
+        this.slides = Array.from(visibleSlideElements, (slideElement, index) => {
+            if (!slideElement.id) {
+                slideElement.id = index + 1;
             }
+
+            return new Slide(this, slideElement);
         });
+    }
+
+    _setMode(mode) {
+        if (mode === this._mode) return;
 
-        this.dispatchEvent(new Event('slidechange'));
+        this._mode = mode;
+        this.dispatchEvent(new Event('modechange'));
+    }
+
+    /**
+     * @param {Event} event
+     */
+    dispatchEvent(event) {
+        if (!this._isStarted) return false;
+
+        return super.dispatchEvent(event);
+    }
+
+    get container() {
+        return this._container;
     }
 
     get isFullMode() {
@@ -92,31 +95,27 @@ class Shower extends EventTarget {
     }
 
     get activeSlide() {
-        return this.slides.find(slide => slide.isActive);
+        return this.slides.find((slide) => slide.isActive);
     }
 
     get activeSlideIndex() {
-        return this.slides.findIndex(slide => slide.isActive);
+        return this.slides.findIndex((slide) => slide.isActive);
     }
 
     /**
      * Slide fills the maximum area.
+     * @emits Shower#modechange
      */
     enterFullMode() {
-        if (!this.isFullMode) {
-            this._mode = 'full';
-            this.dispatchEvent(new Event('modechange'));
-        }
+        this._setMode('full');
     }
 
     /**
      * Shower returns into list mode.
+     * @emits Shower#modechange
      */
     exitFullMode() {
-        if (!this.isListMode) {
-            this._mode = 'list';
-            this.dispatchEvent(new Event('modechange'));
-        }
+        this._setMode('list');
     }
 
     /**
@@ -132,27 +131,29 @@ class Shower extends EventTarget {
     /**
      * @param {number} delta
      */
-    go(delta) {
+    goBy(delta) {
         this.goTo(this.activeSlideIndex + delta);
     }
 
     /**
-     * @param {boolean=} isForce
+     * @param {boolean} [isForce=false]
+     * @emits Shower#prev
      */
     prev(isForce) {
         const prev = new Event('prev', { cancelable: !isForce });
         if (this.dispatchEvent(prev)) {
-            this.go(-1);
+            this.goBy(-1);
         }
     }
 
     /**
-     * @param {boolean=} isForce
+     * @param {boolean} [isForce=false]
+     * @emits Shower#next
      */
     next(isForce) {
         const next = new Event('next', { cancelable: !isForce });
         if (this.dispatchEvent(next)) {
-            this.go(1);
+            this.goBy(1);
         }
     }
 

package/lib/slide.js

@@ -0,0 +1,99 @@
+import { defineReadOnly, ShowerError } from './utils';
+
+class Slide extends EventTarget {
+    /**
+     * @param {Shower} shower
+     * @param {HTMLElement} element
+     */
+    constructor(shower, element) {
+        super();
+
+        defineReadOnly(this, {
+            shower,
+            element,
+            state: {
+                visitCount: 0,
+                innerStepCount: 0,
+            },
+        });
+
+        this._isActive = false;
+        this._options = this.shower.options;
+
+        this.element.addEventListener('click', (event) => {
+            if (event.defaultPrevented) return;
+
+            this.activate();
+            this.shower.enterFullMode();
+        });
+    }
+
+    get isActive() {
+        return this._isActive;
+    }
+
+    get isVisited() {
+        return this.state.visitCount > 0;
+    }
+
+    get id() {
+        return this.element.id;
+    }
+
+    get title() {
+        const titleElement = this.element.querySelector(this._options.slideTitleSelector);
+        return titleElement ? titleElement.innerText : '';
+    }
+
+    /**
+     * Deactivates currently active slide (if any) and activates itself.
+     * @emits Slide#deactivate
+     * @emits Slide#activate
+     * @emits Shower#slidechange
+     */
+    activate() {
+        if (this._isActive) return;
+
+        const prev = this.shower.activeSlide;
+        if (prev) {
+            prev._deactivate();
+        }
+
+        this.state.visitCount++;
+        this.element.classList.add(this._options.activeSlideClass);
+
+        this._isActive = true;
+        this.dispatchEvent(new Event('activate'));
+        this.shower.dispatchEvent(
+            new CustomEvent('slidechange', {
+                detail: { prev },
+            }),
+        );
+    }
+
+    /**
+     * @throws {ShowerError}
+     * @emits Slide#deactivate
+     */
+    deactivate() {
+        if (this.shower.isFullMode) {
+            throw new ShowerError('In full mode, another slide should be activated instead.');
+        }
+
+        if (this._isActive) {
+            this._deactivate();
+        }
+    }
+
+    _deactivate() {
+        this.element.classList.replace(
+            this._options.activeSlideClass,
+            this._options.visitedSlideClass,
+        );
+
+        this._isActive = false;
+        this.dispatchEvent(new Event('deactivate'));
+    }
+}
+
+export default Slide;

package/lib/start.js

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

package/lib/utils.js

@@ -0,0 +1,22 @@
+export const isInteractiveElement = (element) => element.tabIndex !== -1;
+
+export const contentLoaded = (callback) => {
+    if (document.currentScript.async) {
+        callback();
+    } else {
+        document.addEventListener('DOMContentLoaded', callback);
+    }
+};
+
+export const defineReadOnly = (target, props) => {
+    for (const [key, value] of Object.entries(props)) {
+        Object.defineProperty(target, key, {
+            value,
+            writable: false,
+            enumerable: true,
+            configurable: true,
+        });
+    }
+};
+
+export class ShowerError extends Error {}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shower/core",
   "description": "Core for Shower HTML presentation engine",
-  "version": "3.0.0-2",
+  "version": "3.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -21,43 +21,43 @@
   ],
   "main": "lib/shower.js",
   "files": [
+    "lib",
     "dist/shower.js"
   ],
   "devDependencies": {
-    "chai": "^4.2.0",
-    "chai-dom": "^1.8.1",
-    "chromedriver": "^2.46.0",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-config-prettier": "^4.2.0",
-    "eslint-plugin-import": "^2.17.2",
-    "eslint-plugin-prettier": "^3.1.0",
-    "esm": "^3.2.22",
-    "husky": "^2.2.0",
-    "lint-staged": "^8.1.6",
-    "mocha": "^6.1.4",
-    "nightwatch": "^1.0.19",
-    "prettier": "^1.17.1",
-    "puppeteer": "^1.15.0",
-    "rollup": "^1.11.3",
-    "rollup-plugin-commonjs": "^9.3.4",
-    "rollup-plugin-node-resolve": "^4.2.4",
-    "sauce-connect-launcher": "^1.2.6",
-    "serve": "^11.0.0",
-    "serve-handler": "^6.0.0",
-    "yn": "^3.1.0"
+    "chai": "^4.3.4",
+    "chromedriver": "^83.0.1",
+    "eslint": "^7.29.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-prettier": "^3.4.1",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "mocha": "^7.2.0",
+    "nightwatch": "^1.7.6",
+    "prettier": "^2.3.1",
+    "puppeteer": "^3.3.0",
+    "rollup": "^2.58.0",
+    "sauce-connect-launcher": "^1.3.2",
+    "serve": "^11.3.2",
+    "serve-handler": "^6.1.3"
   },
   "scripts": {
     "build": "rollup --config",
+    "build:watch": "rollup --config --watch",
     "serve": "serve dist",
-    "lint": "eslint '**/*.js'",
-    "lint:fix": "eslint '**/*.js' --fix",
+    "lint": "eslint '**/*.{js,mjs}'",
+    "lint:fix": "eslint '**/*.{js,mjs}' --fix",
     "format": "npm run format:js && npm run format:etc",
-    "format:js": "prettier '**/*.js' --write",
+    "format:js": "prettier '**/*.{js,mjs}' --write",
     "format:etc": "prettier '**/*.{json,md,yml}' --write",
-    "test": "npm run lint && npm run test:unit && npm run test:sauce",
-    "test:unit": "mocha test/unit --require esm --require chai/register-should",
-    "test:local": "nightwatch --env chrome-local",
-    "test:sauce": "nightwatch --env chrome,firefox,safari,edge"
+    "test": "npm run lint && npm run test:unit && npm run test:local",
+    "test:unit": "mocha test/unit --require chai/register-should",
+    "test:local": "nightwatch --env chrome-local --timeout 500",
+    "test:sauce": "nightwatch --env chrome,firefox,safari"
+  },
+  "config": {
+    "test_port": 8031
   }
 }