@shower/core 3.3.0 → 3.4.0

package/lib/shower.js

@@ -1,169 +1,169 @@
-import defaultOptions from './default-options';
-import Slide from './slide';
-import { defineReadOnly, ShowerError } from './utils';
-import installModules from './modules/install';
+import defaultOptions from './default-options.js';
+import Slide from './slide.js';
+import { defineReadOnly, ShowerError } from './utils.js';
+import installModules from './modules/install.js';
 
 class Shower extends EventTarget {
-    /**
-     * @param {object=} options
-     */
-    constructor(options) {
-        super();
-
-        defineReadOnly(this, {
-            options: { ...defaultOptions, ...options },
-        });
-
-        this._mode = 'list';
-        this._isStarted = false;
-        this._container = null;
-    }
-
-    /**
-     * @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 ShowerError(
-                `Shower container with selector '${containerSelector}' was not found.`,
-            );
-        }
-
-        this._initSlides();
-        installModules(this);
-
-        this._isStarted = true;
-        this.dispatchEvent(new Event('start'));
-    }
-
-    _initSlides() {
-        const visibleSlideSelector = `${this.options.slideSelector}:not([hidden])`;
-        const visibleSlideElements = this._container.querySelectorAll(visibleSlideSelector);
-
-        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._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() {
-        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.
-     * @emits Shower#modechange
-     */
-    enterFullMode() {
-        this._setMode('full');
-    }
-
-    /**
-     * Shower returns into list mode.
-     * @emits Shower#modechange
-     */
-    exitFullMode() {
-        this._setMode('list');
-    }
-
-    /**
-     * @param {number} index
-     */
-    goTo(index) {
-        const slide = this.slides[index];
-        if (slide) {
-            slide.activate();
-        }
-    }
-
-    /**
-     * @param {number} delta
-     */
-    goBy(delta) {
-        this.goTo(this.activeSlideIndex + delta);
-    }
-
-    /**
-     * @param {boolean} [isForce=false]
-     * @emits Shower#prev
-     */
-    prev(isForce) {
-        const prev = new Event('prev', { cancelable: !isForce });
-        if (this.dispatchEvent(prev)) {
-            this.goBy(-1);
-        }
-    }
-
-    /**
-     * @param {boolean} [isForce=false]
-     * @emits Shower#next
-     */
-    next(isForce) {
-        const next = new Event('next', { cancelable: !isForce });
-        if (this.dispatchEvent(next)) {
-            this.goBy(1);
-        }
-    }
-
-    first() {
-        this.goTo(0);
-    }
-
-    last() {
-        this.goTo(this.slides.length - 1);
-    }
+	/**
+	 * @param {object=} options
+	 */
+	constructor(options) {
+		super();
+
+		defineReadOnly(this, {
+			options: { ...defaultOptions, ...options },
+		});
+
+		this._mode = 'list';
+		this._isStarted = false;
+		this._container = null;
+	}
+
+	/**
+	 * @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 ShowerError(
+				`Shower container with selector '${containerSelector}' was not found.`,
+			);
+		}
+
+		this._initSlides();
+		installModules(this);
+
+		this._isStarted = true;
+		this.dispatchEvent(new Event('start'));
+	}
+
+	_initSlides() {
+		const visibleSlideSelector = `${this.options.slideSelector}:not([hidden])`;
+		const visibleSlideElements = this._container.querySelectorAll(visibleSlideSelector);
+
+		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._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() {
+		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.
+	 * @emits Shower#modechange
+	 */
+	enterFullMode() {
+		this._setMode('full');
+	}
+
+	/**
+	 * Shower returns into list mode.
+	 * @emits Shower#modechange
+	 */
+	exitFullMode() {
+		this._setMode('list');
+	}
+
+	/**
+	 * @param {number} index
+	 */
+	goTo(index) {
+		const slide = this.slides[index];
+		if (slide) {
+			slide.activate();
+		}
+	}
+
+	/**
+	 * @param {number} delta
+	 */
+	goBy(delta) {
+		this.goTo(this.activeSlideIndex + delta);
+	}
+
+	/**
+	 * @param {boolean} [isForce=false]
+	 * @emits Shower#prev
+	 */
+	prev(isForce) {
+		const prev = new Event('prev', { cancelable: !isForce });
+		if (this.dispatchEvent(prev)) {
+			this.goBy(-1);
+		}
+	}
+
+	/**
+	 * @param {boolean} [isForce=false]
+	 * @emits Shower#next
+	 */
+	next(isForce) {
+		const next = new Event('next', { cancelable: !isForce });
+		if (this.dispatchEvent(next)) {
+			this.goBy(1);
+		}
+	}
+
+	first() {
+		this.goTo(0);
+	}
+
+	last() {
+		this.goTo(this.slides.length - 1);
+	}
 }
 
 export default Shower;

package/lib/slide.js

@@ -1,99 +1,99 @@
-import { defineReadOnly, ShowerError } from './utils';
+import { defineReadOnly, ShowerError } from './utils.js';
 
 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'));
-    }
+	/**
+	 * @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/utils.js

@@ -1,22 +1,22 @@
-export const isInteractiveElement = (element) => element.tabIndex !== -1;
+export const isInteractiveElement = (element) => element.tabIndex !== -1 || element.isContentEditable;
 
 export const contentLoaded = (callback) => {
-    if (document.currentScript.async) {
-        callback();
-    } else {
-        document.addEventListener('DOMContentLoaded', 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,
-        });
-    }
+	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,63 +1,40 @@
 {
-  "name": "@shower/core",
-  "description": "Core for Shower HTML presentation engine",
-  "version": "3.3.0",
-  "publishConfig": {
-    "access": "public"
-  },
-  "author": {
-    "name": "Vadim Makeev",
-    "email": "pepelsbey@gmail.com",
-    "url": "https://pepelsbey.net"
-  },
-  "homepage": "https://github.com/shower/core",
-  "repository": "shower/core",
-  "bugs": "https://github.com/shower/shower/issues",
-  "license": "MIT",
-  "keywords": [
-    "shower",
-    "presentation",
-    "core"
-  ],
-  "main": "lib/shower.js",
-  "files": [
-    "lib",
-    "dist/shower.js"
-  ],
-  "devDependencies": {
-    "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,mjs}'",
-    "lint:fix": "eslint '**/*.{js,mjs}' --fix",
-    "format": "npm run format:js && npm run format:etc",
-    "format:js": "prettier '**/*.{js,mjs}' --write",
-    "format:etc": "prettier '**/*.{json,md,yml}' --write",
-    "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
-  }
+	"type": "module",
+	"name": "@shower/core",
+	"description": "Core for Shower HTML presentation engine",
+	"version": "3.4.0",
+	"publishConfig": {
+		"access": "public"
+	},
+	"author": {
+		"name": "Vadim Makeev",
+		"email": "hi@pepelsbey.dev",
+		"url": "https://pepelsbey.dev"
+	},
+	"homepage": "https://github.com/shower/shower/tree/main/packages/core",
+	"repository": {
+		"type": "git",
+		"url": "git://github.com/shower/shower.git",
+		"directory": "packages/core"
+	},
+	"bugs": "https://github.com/shower/shower/issues",
+	"license": "MIT",
+	"keywords": [
+		"shower",
+		"presentation",
+		"core"
+	],
+	"main": "lib/index.js",
+	"files": [
+		"lib",
+		"dist/index.js",
+		"LICENSE.md",
+		"README.md"
+	],
+	"scripts": {
+		"build": "rollup --config",
+		"build:watch": "rollup --config --watch",
+		"test": "npm run test:e2e",
+		"test:e2e": "playwright test"
+	}
 }