@livenetworks/ashlar 1.6.1 → 2.0.0

package/{js → components}/ln-confirm/src/ln-confirm.js

@@ -1,171 +1,180 @@
-import { registerComponent, dispatch } from '../../ln-core';
-
-(function () {
-	const DOM_SELECTOR = 'data-ln-confirm';
-	const DOM_ATTRIBUTE = 'lnConfirm';
-	const TIMEOUT_ATTR = 'data-ln-confirm-timeout';
-	const DEFAULT_TIMEOUT = 3;
-
-	if (window[DOM_ATTRIBUTE] !== undefined) return;
-
-	function _log(...args) {
-		const isDebug = document.documentElement.hasAttribute('data-ln-debug') ||
-			(document.body && document.body.hasAttribute('data-ln-debug'));
-		if (isDebug) {
-			console.warn('[ln-confirm]', ...args);
-		}
-	}
-
-	// ─── Component ─────────────────────────────────────────────
-
-	function _component(dom) {
-		_log('constructor called on', dom);
-		this.dom = dom;
-		this.confirming = false;
-		this.revertTimer = null;
-		this._submitted = false;
-
-		// Detect two-element mode
-		this.idleEl = dom.querySelector('[data-ln-confirm-idle]');
-		this.activeEl = dom.querySelector('[data-ln-confirm-active]');
-		this.isTwoElementMode = !!(this.idleEl || this.activeEl);
-
-		if (this.isTwoElementMode) {
-			this.originalText = '';
-			this.confirmText = '';
-		} else {
-			this.originalText = dom.textContent.trim();
-			this.confirmText = dom.getAttribute(DOM_SELECTOR) || 'Confirm?';
-		}
-
-		const self = this;
-		this._onClick = function (e) {
-			_log('click handler, confirming:', self.confirming, 'submitted:', self._submitted, 'target:', e.target);
-			if (!self.confirming) {
-				e.preventDefault();
-				e.stopImmediatePropagation();
-				self._enterConfirm();
-			} else {
-				if (self._submitted) return;
-				self._submitted = true;
-				// Second click — the gate opens for THIS button's own default
-				// action (submit / href), but the click still must not reach
-				// an ancestor click surface. Same containment as the first
-				// click, without cancelling the action being confirmed.
-				e.stopPropagation();
-				self._reset();
-			}
-		};
-
-		dom.addEventListener('click', this._onClick);
-		return this;
-	}
-
-	_component.prototype._getTimeout = function () {
-		const val = parseFloat(this.dom.getAttribute(TIMEOUT_ATTR));
-		return (isNaN(val) || val <= 0) ? DEFAULT_TIMEOUT : val;
-	};
-
-	_component.prototype._enterConfirm = function () {
-		this.confirming = true;
-		this.dom.setAttribute('data-confirming', 'true');
-
-		this.originalAriaLabel = this.dom.getAttribute('aria-label');
-		this.originalAriaLive = this.dom.getAttribute('aria-live');
-
-		if (this.isTwoElementMode) {
-			if (this.idleEl) this.idleEl.setAttribute('hidden', 'true');
-			if (this.activeEl) this.activeEl.removeAttribute('hidden');
-
-			const promptText = this.activeEl ? this.activeEl.textContent.trim() : '';
-			if (promptText) {
-				this.dom.setAttribute('aria-label', promptText);
-				this.dom.setAttribute('aria-live', 'polite');
-			}
-		} else {
-			var iconUse = this.dom.querySelector('svg.ln-icon use');
-			if (iconUse && this.originalText === '') {
-				this.isIconButton = true;
-				this.originalIconHref = iconUse.getAttribute('href');
-				iconUse.setAttribute('href', '#ln-icon-check');
-				this.dom.classList.add('ln-confirm-tooltip');
-				this.dom.setAttribute('data-tooltip-text', this.confirmText);
-				this.dom.setAttribute('aria-label', this.confirmText);
-				this.dom.setAttribute('aria-live', 'polite');
-			} else {
-				this.dom.textContent = this.confirmText;
-			}
-		}
-
-		this._startTimer();
-
-		dispatch(this.dom, 'ln-confirm:waiting', { target: this.dom });
-	};
-
-	_component.prototype._startTimer = function () {
-		if (this.revertTimer) {
-			clearTimeout(this.revertTimer);
-		}
-		const self = this;
-		const ms = this._getTimeout() * 1000;
-		this.revertTimer = setTimeout(function () {
-			self._reset();
-		}, ms);
-	};
-
-	_component.prototype._reset = function () {
-		this._submitted = false;
-		this.confirming = false;
-		this.dom.removeAttribute('data-confirming');
-
-		if (this.isTwoElementMode) {
-			if (this.idleEl) this.idleEl.removeAttribute('hidden');
-			if (this.activeEl) this.activeEl.setAttribute('hidden', 'true');
-		} else {
-			if (this.isIconButton) {
-				var iconUse = this.dom.querySelector('svg.ln-icon use');
-				if (iconUse && this.originalIconHref) {
-					iconUse.setAttribute('href', this.originalIconHref);
-				}
-				this.dom.classList.remove('ln-confirm-tooltip');
-				this.dom.removeAttribute('data-tooltip-text');
-				this.isIconButton = false;
-				this.originalIconHref = null;
-			} else {
-				this.dom.textContent = this.originalText;
-			}
-		}
-
-		// Restore Accessibility Attributes directly on host button
-		if (this.originalAriaLabel !== null && this.originalAriaLabel !== undefined) {
-			this.dom.setAttribute('aria-label', this.originalAriaLabel);
-		} else {
-			this.dom.removeAttribute('aria-label');
-		}
-		this.originalAriaLabel = null;
-
-		if (this.originalAriaLive !== null && this.originalAriaLive !== undefined) {
-			this.dom.setAttribute('aria-live', this.originalAriaLive);
-		} else {
-			this.dom.removeAttribute('aria-live');
-		}
-		this.originalAriaLive = null;
-
-		if (this.revertTimer) {
-			clearTimeout(this.revertTimer);
-			this.revertTimer = null;
-		}
-	};
-
-	_component.prototype.destroy = function () {
-		_log('destroy called on', this.dom);
-		if (!this.dom[DOM_ATTRIBUTE]) return;
-		if (this.confirming) this._reset();
-		this.dom.removeEventListener('click', this._onClick);
-		delete this.dom[DOM_ATTRIBUTE];
-	};
-
-	// ─── Init ──────────────────────────────────────────────────
-
-	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-confirm');
-})();
+import { registerComponent, dispatch, shouldIgnoreClick, defineAttrs, attrSpec } from '../../ln-core';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-confirm';
+	const DOM_ATTRIBUTE = 'lnConfirm';
+	const STATE_ATTR = 'data-ln-confirm-state';
+	const ANNOUNCER_ATTR = 'data-ln-confirm-announcer';
+	const DEFAULT_TIMEOUT = 3;
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	// `attrStr` would keep an empty attribute as '' and blank the button.
+	function _readPrompt(el, name, fallback) {
+		return el.getAttribute(name) || fallback;
+	}
+
+	// Seconds, fractional allowed; non-positive or unparseable counts as unset.
+	// `attrInt` does neither.
+	function _readTimeout(el, name, fallback) {
+		const val = parseFloat(el.getAttribute(name));
+		return (isNaN(val) || val <= 0) ? fallback : val;
+	}
+
+	// The bubble is a CSS ::after — invisible to AT. `role="alert"` is its own
+	// assertive live region, so the button must NOT also be one: a live region
+	// nested in a live region gets announced twice.
+	function _makeAnnouncer(text) {
+		const el = document.createElement('span');
+		el.setAttribute(ANNOUNCER_ATTR, '');
+		el.setAttribute('role', 'alert');
+		el.textContent = text;
+		return el;
+	}
+
+	// ─── Attribute Contract (SSOT) ──────────────────────────
+	const ATTRIBUTES = {
+		'data-ln-confirm':         { prop: 'confirmText', type: 'string', read: _readPrompt, fallback: 'Confirm?', description: 'Prompt text or confirmation action trigger' },
+		'data-ln-confirm-timeout': { prop: 'timeout', type: 'float', read: _readTimeout, fallback: DEFAULT_TIMEOUT, min: 0.1, description: 'Confirmation timeout in seconds before reverting' },
+		'data-ln-confirm-state':   { prop: 'confirming', type: 'enum', values: ['confirming'], read: (el, name) => el.getAttribute(name) === 'confirming', description: 'Active confirmation state marker on button ("confirming")' }
+	};
+	const ATTR_SPEC = attrSpec(ATTRIBUTES);
+
+	// ─── Component ─────────────────────────────────────────────
+
+	function _component(dom) {
+		this.dom = dom;
+		defineAttrs(this, dom, ATTR_SPEC);
+		this.revertTimer = null;
+		this._submitted = false;
+
+		// Detect two-element mode
+		this.idleEl = dom.querySelector('[data-ln-confirm-idle]');
+		this.activeEl = dom.querySelector('[data-ln-confirm-active]');
+		this.isTwoElementMode = Boolean(this.idleEl || this.activeEl);
+
+		// Not an attribute — a snapshot of the authored label, restored on revert.
+		this.originalText = this.isTwoElementMode ? '' : dom.textContent.trim();
+
+		const self = this;
+		this._onClick = function (e) {
+			if (shouldIgnoreClick(e)) return;
+
+			if (!self.confirming) {
+				e.preventDefault();
+				e.stopImmediatePropagation();
+				self._enterConfirm();
+			} else {
+				if (self._submitted) return;
+				self._submitted = true;
+				// Second click — the gate opens for THIS button's own default
+				// action (submit / href), but the click still must not reach
+				// an ancestor click surface.
+				e.stopPropagation();
+				self._reset();
+			}
+		};
+
+		dom.addEventListener('click', this._onClick);
+		return this;
+	}
+
+	_component.prototype._enterConfirm = function () {
+		this.dom.setAttribute(STATE_ATTR, 'confirming');
+
+		this.originalAriaLabel = this.dom.getAttribute('aria-label');
+		this.originalAriaLive = this.dom.getAttribute('aria-live');
+
+		if (this.isTwoElementMode) {
+			if (this.idleEl) this.idleEl.setAttribute('hidden', 'true');
+			if (this.activeEl) this.activeEl.removeAttribute('hidden');
+
+			const promptText = this.activeEl ? this.activeEl.textContent.trim() : '';
+			if (promptText) {
+				this.dom.setAttribute('aria-label', promptText);
+				this.dom.setAttribute('aria-live', 'polite');
+			}
+		} else {
+			const iconUse = this.dom.querySelector('svg.ln-icon use');
+			if (iconUse && this.originalText === '') {
+				this.isIconButton = true;
+				this.originalIconHref = iconUse.getAttribute('href');
+				iconUse.setAttribute('href', '#ln-icon-check');
+				this.dom.setAttribute('aria-label', this.confirmText);
+				this.dom.appendChild(_makeAnnouncer(this.confirmText));
+			} else {
+				this.dom.textContent = this.confirmText;
+			}
+		}
+
+		this._startTimer();
+		dispatch(this.dom, 'ln-confirm:waiting', { target: this.dom });
+	};
+
+	_component.prototype._startTimer = function () {
+		if (this.revertTimer) {
+			clearTimeout(this.revertTimer);
+		}
+		const self = this;
+		const ms = this.timeout * 1000;
+		this.revertTimer = setTimeout(function () {
+			self._reset();
+		}, ms);
+	};
+
+	_component.prototype._reset = function () {
+		this._submitted = false;
+		this.dom.removeAttribute(STATE_ATTR);
+
+		if (this.isTwoElementMode) {
+			if (this.idleEl) this.idleEl.removeAttribute('hidden');
+			if (this.activeEl) this.activeEl.setAttribute('hidden', 'true');
+		} else {
+			if (this.isIconButton) {
+				const iconUse = this.dom.querySelector('svg.ln-icon use');
+				if (iconUse && this.originalIconHref) {
+					iconUse.setAttribute('href', this.originalIconHref);
+				}
+				const announcer = this.dom.querySelector('[' + ANNOUNCER_ATTR + ']');
+				if (announcer) announcer.remove();
+				this.isIconButton = false;
+				this.originalIconHref = null;
+			} else {
+				this.dom.textContent = this.originalText;
+			}
+		}
+
+		// Restore Accessibility Attributes directly on host button
+		if (this.originalAriaLabel !== null && this.originalAriaLabel !== undefined) {
+			this.dom.setAttribute('aria-label', this.originalAriaLabel);
+		} else {
+			this.dom.removeAttribute('aria-label');
+		}
+		this.originalAriaLabel = null;
+
+		if (this.originalAriaLive !== null && this.originalAriaLive !== undefined) {
+			this.dom.setAttribute('aria-live', this.originalAriaLive);
+		} else {
+			this.dom.removeAttribute('aria-live');
+		}
+		this.originalAriaLive = null;
+
+		if (this.revertTimer) {
+			clearTimeout(this.revertTimer);
+			this.revertTimer = null;
+		}
+	};
+
+	_component.prototype.destroy = function () {
+		if (!this.dom[DOM_ATTRIBUTE]) return;
+		if (this.confirming) this._reset();
+		this.dom.removeEventListener('click', this._onClick);
+		delete this.dom[DOM_ATTRIBUTE];
+	};
+
+	// ─── Init ──────────────────────────────────────────────────
+
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-confirm', {
+		attributes: ATTRIBUTES
+	});
+})();