@oksigenia/access-panel 0.7.2 → 0.8.0

package/dist/web-component.d.ts

@@ -1,6 +1,11 @@
+import { b as PanelChangeDetail } from './behavior-CEe_YuMU.js';
+
 declare class OksigeniaAccessPanelElement extends HTMLElement {
     static get observedAttributes(): readonly string[];
     private _controller;
+    /** `initial-state` is read on the first render only: later re-renders
+     *  (another attribute changing) must not undo what the visitor did since. */
+    private _initialStateRead;
     private readonly _fxId;
     private readonly _scopeId;
     constructor();
@@ -33,6 +38,9 @@ declare global {
     interface HTMLElementTagNameMap {
         'oksigenia-access-panel': OksigeniaAccessPanelElement;
     }
+    interface HTMLElementEventMap {
+        'oksiac:change': CustomEvent<PanelChangeDetail>;
+    }
 }
 
 export { OksigeniaAccessPanelElement };

package/dist/web-component.js

@@ -283,14 +283,42 @@ var DEFAULT_STATE = Object.freeze({
   readingMask: false,
   bigTargets: false
 });
+var LEVEL_MAX = Object.freeze({
+  zoom: 4,
+  lh: 3,
+  align: 3,
+  ls: 3,
+  colorblind: 3
+});
+function sanitizeState(input) {
+  if (!input || typeof input !== "object" || Array.isArray(input)) return null;
+  const src = input;
+  const out = { ...DEFAULT_STATE };
+  for (const key of Object.keys(DEFAULT_STATE)) {
+    const v = src[key];
+    if (v === void 0) continue;
+    if (key in LEVEL_MAX) {
+      if (typeof v === "number" && Number.isInteger(v) && v >= 0 && v <= LEVEL_MAX[key]) {
+        out[key] = v;
+      }
+    } else if (v === true || v === 1) {
+      out[key] = true;
+    }
+  }
+  return out;
+}
+function parseState(json) {
+  if (json == null || json.trim() === "") return null;
+  try {
+    return sanitizeState(JSON.parse(json));
+  } catch {
+    return null;
+  }
+}
 function loadState(key) {
   try {
     if (typeof localStorage === "undefined") return { ...DEFAULT_STATE };
-    const raw = localStorage.getItem(key);
-    if (!raw) return { ...DEFAULT_STATE };
-    const parsed = JSON.parse(raw);
-    if (!parsed || typeof parsed !== "object") return { ...DEFAULT_STATE };
-    return { ...DEFAULT_STATE, ...parsed };
+    return parseState(localStorage.getItem(key)) ?? { ...DEFAULT_STATE };
   } catch {
     return { ...DEFAULT_STATE };
   }
@@ -385,7 +413,19 @@ function bindPanelBehavior(root, opts = {}) {
   if (!panel || !closeBtn || !resetBtn) {
     return noopController();
   }
-  let state = loadState(storageKey);
+  let state;
+  if (opts.initialState) {
+    state = { ...opts.initialState };
+    saveState(storageKey, state);
+  } else {
+    state = loadState(storageKey);
+  }
+  const emitChange = () => {
+    const host = root.host;
+    if (!host) return;
+    const detail = { state: { ...state } };
+    host.dispatchEvent(new CustomEvent("oksiac:change", { bubbles: true, composed: true, detail }));
+  };
   const scoped = opts.scopeEl !== void 0;
   const GLOBAL_KEY = "oksiac::global";
   const GLOBAL_MAP = [
@@ -561,11 +601,13 @@ function bindPanelBehavior(root, opts = {}) {
     }
     applyState();
     saveState(storageKey, state);
+    emitChange();
   };
   const onReset = () => {
     state = { ...DEFAULT_STATE };
     applyState();
     saveState(storageKey, state);
+    emitChange();
     if (scoped) {
       const cleared = { bigCursor: false, readingGuide: false, readingMask: false };
       saveGlobal(cleared);
@@ -1079,6 +1121,7 @@ var PANEL_CSS = `
   .oks-access-reset { padding: 14px; font-size: 14px; }
 }
 `;
+var NOT_ICON_FONT = ':not(.fa, [class*="fa-"], .icon, [class^="icon-"], [class*=" icon-"], .dashicons, [class*="dashicons-"], .material-icons, [class^="material-symbols"], .glyphicon, [class^="bi-"], [class*=" bi-"])';
 var EFFECT_CSS = `
 html.oks-colorblind-1 { filter: url('#oks-filter-protanopia'); }
 html.oks-colorblind-2 { filter: url('#oks-filter-deuteranopia'); }
@@ -1106,7 +1149,7 @@ body.oks-lh-3 * { line-height: 2.2 !important; }
 
 body.oks-a11y-font { font-family: Arial, sans-serif !important; }
 
-body.oks-dyslexia * {
+body.oks-dyslexia *${NOT_ICON_FONT} {
   font-family: 'Comic Sans MS', 'Verdana', sans-serif !important;
   letter-spacing: 0.05em !important;
   word-spacing: 0.1em !important;
@@ -1253,9 +1296,9 @@ ${s}.oks-lh-1 * { line-height: 1.6 !important; }
 ${s}.oks-lh-2 * { line-height: 1.9 !important; }
 ${s}.oks-lh-3 * { line-height: 2.2 !important; }
 
-${s}.oks-a11y-font, ${s}.oks-a11y-font * { font-family: Arial, sans-serif !important; }
+${s}.oks-a11y-font, ${s}.oks-a11y-font *${NOT_ICON_FONT} { font-family: Arial, sans-serif !important; }
 
-${s}.oks-dyslexia * {
+${s}.oks-dyslexia *${NOT_ICON_FONT} {
   font-family: 'Comic Sans MS', 'Verdana', sans-serif !important;
   letter-spacing: 0.05em !important;
   word-spacing: 0.1em !important;
@@ -1382,6 +1425,9 @@ var OksigeniaAccessPanelElement = class extends HTMLElement {
     return OBSERVED;
   }
   _controller = null;
+  /** `initial-state` is read on the first render only: later re-renders
+   *  (another attribute changing) must not undo what the visitor did since. */
+  _initialStateRead = false;
   _fxId = `oks-access-fx-${++fxSeq}`;
   _scopeId = `oks-access-scope-${this._fxId.split("-").pop()}`;
   constructor() {
@@ -1497,12 +1543,15 @@ var OksigeniaAccessPanelElement = class extends HTMLElement {
     });
     shadow.innerHTML = `<style>${PANEL_CSS}${positionCss(position, positionMobile)}</style>${html}`;
     const scopeEl = scope ? document.querySelector(scope) : void 0;
+    const initialState = this._initialStateRead ? null : parseState(this.getAttribute("initial-state"));
+    this._initialStateRead = true;
     this._controller = bindPanelBehavior(shadow, {
       storageKey: this.getAttribute("storage-key") ?? void 0,
       locale: this.getLocale(),
       enabled,
       nudgeMax: this.getNudgeMax(),
-      scopeEl
+      scopeEl,
+      initialState
     });
     this.updateScopeStyle(scope);
     this.updateEffectsExclude(scope ?? "body");