✨ feat(api): ajouts d'évènements dans l'api [DS-2052] (#1012)

Ajout des événements : Sur le éléments root (documentElement) : - dsfr.ready : lorsque le js est chargé - dsfr.start : au démarrage du moteur js du dsfr - dsfr.stop : à l'arrêt du moteur js du dsfr - dsfr.render : lors du rendu d'une instance - dsfr.resize : lors du changement de taille du viewport - dsfr.scroll-lock : au blocage du scroll - dsfr.scroll-unlock : au déblocage du scroll - dsfr.scheme : au chargement et changement du scheme (dark, light, auto) - dsfr.theme : au chargement et changement du theme (light, dark) Au niveau des instances, et remontées aux parents jusqu'au documentElement : - dsfr.click : au click sur un bouton - dsfr.disclose : à l'ouverture d'un disclosure - dsfr.conceal : à la fermeture d'un disclosure - dsfr.current : retourne l'élément ouvert d'un groupe de disclosure (accordions, tabs, etc.) - dsfr.dismiss : a la fermeture d'un tag supprimable - dsfr.toggle : au cochage d'un tag sélectionnable - dsfr.show : à l'affichage d'un tooltip - dsfr.hide : lorsque le tooltip est masqué
GouvernementFR · Oct 28, 2024 · aedf709 · aedf709
1 parent 0b33bd9
commit aedf709
Show file tree

Hide file tree

Showing 17 changed files with 71 additions and 12 deletions.
diff --git a/src/component/range/script/range/range-input.js b/src/component/range/script/range/range-input.js
@@ -39,7 +39,7 @@ class RangeInput extends api.core.Instance {
   setValue (value) {
     if (parseFloat(this.node.value) > value) {
       this.node.value = value;
-      this.dispatch('change', undefined, true);
+      this.dispatch('change');
       this.change();
     }
   }

diff --git a/src/component/range/script/range/range-input2.js b/src/component/range/script/range/range-input2.js
@@ -15,7 +15,7 @@ class RangeInput2 extends RangeInput {
   setValue (value) {
     if (parseFloat(this.node.value) < value) {
       this.node.value = value;
-      this.dispatch('change', undefined, true);
+      this.dispatch('change');
       this.change();
     }
   }

diff --git a/src/core/script/action/toggle/toggle.js b/src/core/script/action/toggle/toggle.js
@@ -26,7 +26,6 @@ class Toggle extends Instance {
 
   set pressed (value) {
     this.setAttribute('aria-pressed', value ? 'true' : 'false');
-    this.dispatch(ToggleEvent.TOGGLE, value);
   }
 
   get proxy () {

diff --git a/src/core/script/api/engine.js b/src/core/script/api/engine.js
@@ -7,6 +7,8 @@ import { Load } from './modules/load/load.js';
 import { FontSwap } from './modules/font-swap/font-swap';
 import { MouseMove } from './modules/mouse-move/mouse-move';
 import { Hash } from './modules/hash/hash';
+import { rootDispatch } from './utilities/dom/dispatch.js';
+import { RootEvent } from './modules/stage/root-event.js';
 import inspector from './inspect/inspector.js';
 import state from './state.js';
 
@@ -33,11 +35,13 @@ class Engine {
   start () {
     inspector.debug('START');
     state.isActive = true;
+    rootDispatch(RootEvent.START);
   }
 
   stop () {
     inspector.debug('STOP');
     state.isActive = false;
+    rootDispatch(RootEvent.STOP);
   }
 }
 

diff --git a/src/core/script/api/modules/register/Instance-event.js b/src/core/script/api/modules/register/Instance-event.js
@@ -0,0 +1,7 @@
+import ns from '../../utilities/namespace.js';
+
+const InstanceEvent = {
+  CLICK: ns.event('click')
+};
+
+export { InstanceEvent };
diff --git a/src/core/script/api/modules/register/instance.js b/src/core/script/api/modules/register/instance.js
@@ -3,10 +3,12 @@ import state from '../../state.js';
 import inspector from '../../inspect/inspector.js';
 import { Breakpoints } from './breakpoints.js';
 import { addClass, removeClass, hasClass, getClassNames } from '../../utilities/dom/classes.js';
+import { dispatch } from '../../utilities/dom/dispatch.js';
 import { uniqueId } from '../../utilities/dom/id';
 import { completeAssign } from '../../utilities/property/complete-assign.js';
 import { queryParentSelector, querySelectorAllArray } from '../../utilities/dom/query-selector.js';
 import { queryActions } from '../../utilities/dom/actions.js';
+import { InstanceEvent } from './Instance-event.js';
 
 class Instance {
   constructor (jsAttribute = true) {
@@ -19,7 +21,7 @@ class Instance {
     this._isEnabled = true;
     this._isDisposed = false;
     this._listeners = {};
-    this._handlingClick = this.handleClick.bind(this);
+    this._handlingClick = this._handleClick.bind(this);
     this._hashes = [];
     this._hash = '';
     this._keyListenerTypes = [];
@@ -104,9 +106,8 @@ class Instance {
     return [];
   }
 
-  dispatch (type, detail, bubbles, cancelable) {
-    const event = new CustomEvent(type, { detail: detail, bubble: bubbles === true, cancelable: cancelable === true });
-    this.node.dispatchEvent(event);
+  dispatch (type, detail = null, bubbles = true, cancelable = false) {
+    dispatch(this.node, type, detail, bubbles, cancelable);
   }
 
   // TODO v2 => listener au niveau des éléments qui redistribuent aux instances.
@@ -147,6 +148,11 @@ class Instance {
     this.unlisten('click', this._handlingClick, options);
   }
 
+  _handleClick (e) {
+    this.handleClick(e);
+    this.dispatch(InstanceEvent.CLICK, this);
+  }
+
   handleClick (e) {}
 
   set hash (value) {

diff --git a/src/core/script/api/modules/render/renderer.js b/src/core/script/api/modules/render/renderer.js
@@ -1,6 +1,8 @@
 import state from '../../state.js';
 import { Module } from '../module.js';
 import { Collection } from '../../utilities/collection.js';
+import { rootDispatch } from '../../utilities/dom/dispatch.js';
+import { RootEvent } from '../stage/root-event.js';
 
 class Renderer extends Module {
   constructor () {
@@ -25,6 +27,7 @@ class Renderer extends Module {
     const nexts = this.nexts.clone();
     this.nexts.clear();
     nexts.forEach((instance) => instance.next());
+    rootDispatch(RootEvent.RENDER);
   }
 }
 

diff --git a/src/core/script/api/modules/resize/resizer.js b/src/core/script/api/modules/resize/resizer.js
@@ -1,4 +1,6 @@
 import { Module } from '../module.js';
+import { rootDispatch } from '../../utilities/dom/dispatch.js';
+import { RootEvent } from '../stage/root-event.js';
 
 class Resizer extends Module {
   constructor () {
@@ -27,6 +29,7 @@ class Resizer extends Module {
     if (!this.requireResize) return;
     this.forEach((instance) => instance.resize());
     this.requireResize = false;
+    rootDispatch(RootEvent.RESIZE);
   }
 }
 

diff --git a/src/core/script/api/modules/scroll/scroll-locker.js b/src/core/script/api/modules/scroll/scroll-locker.js
@@ -1,5 +1,7 @@
 import ns from '../../utilities/namespace.js';
 import { Module } from '../module.js';
+import { rootDispatch } from '../../utilities/dom/dispatch.js';
+import { RootEvent } from '../stage/root-event.js';
 
 class ScrollLocker extends Module {
   constructor () {
@@ -26,6 +28,7 @@ class ScrollLocker extends Module {
       if (scrollBarGap > 0) {
         document.documentElement.style.setProperty('--scrollbar-width', `${scrollBarGap}px`);
       }
+      rootDispatch(RootEvent.SCROLL_LOCK);
     }
   }
 
@@ -37,6 +40,7 @@ class ScrollLocker extends Module {
       window.scrollTo(0, this._scrollY);
       if (this.behavior === 'smooth') document.documentElement.style.removeProperty('scroll-behavior');
       document.documentElement.style.removeProperty('--scrollbar-width');
+      rootDispatch(RootEvent.SCROLL_UNLOCK);
     }
   }
 

diff --git a/src/core/script/api/modules/stage/root-event.js b/src/core/script/api/modules/stage/root-event.js
@@ -0,0 +1,14 @@
+import ns from '../../utilities/namespace.js';
+
+const RootEvent = {
+  READY: ns.event('ready'),
+  START: ns.event('start'),
+  STOP: ns.event('stop'),
+  RENDER: ns.event('render'),
+  RESIZE: ns.event('resize'),
+  BREAKPOINT: ns.event('breakpoint'),
+  SCROLL_LOCK: ns.event('scroll-lock'),
+  SCROLL_UNLOCK: ns.event('scroll-unlock')
+};
+
+export { RootEvent };
diff --git a/src/core/script/api/options/options.js b/src/core/script/api/options/options.js
@@ -2,6 +2,8 @@ import inspector from '../inspect/inspector.js';
 import { startAtDomContentLoaded, startAuto } from './starters.js';
 import config from '../../../config';
 import { Modes } from './modes';
+import { rootDispatch } from '../utilities/dom/dispatch.js';
+import { RootEvent } from '../modules/stage/root-event.js';
 
 class Options {
   constructor () {
@@ -32,6 +34,7 @@ class Options {
         break;
     }
     inspector.info(`version ${config.version}`);
+    rootDispatch(RootEvent.READY);
     this.mode = settings.mode || Modes.AUTO;
   }
 

diff --git a/src/core/script/api/utilities/dom/dispatch.js b/src/core/script/api/utilities/dom/dispatch.js
@@ -0,0 +1,11 @@
+const dispatch = (node, type, detail = null, bubbles = true, cancelable = false) => {
+  const options = { bubbles: bubbles === true, cancelable: cancelable === true };
+  if (detail) options.detail = detail;
+  const event = new CustomEvent(type, options);
+  node.dispatchEvent(event);
+  console.log(`Dispatched event: ${type}`);
+};
+
+const rootDispatch = (type, detail = null, bubbles = false, cancelable = false) => dispatch(document.documentElement, type, detail, bubbles, cancelable);
+
+export { dispatch, rootDispatch };
diff --git a/src/core/script/api/utilities/dom/index.js b/src/core/script/api/utilities/dom/index.js
@@ -2,6 +2,7 @@ import { addClass, hasClass, removeClass } from './classes.js';
 import { queryParentSelector, querySelectorAllArray } from './query-selector.js';
 import { queryActions } from './actions';
 import { uniqueId } from './id';
+import { dispatch } from './dispatch.js';
 
 const dom = {
   addClass: addClass,
@@ -10,7 +11,8 @@ const dom = {
   queryParentSelector: queryParentSelector,
   querySelectorAllArray: querySelectorAllArray,
   queryActions: queryActions,
-  uniqueId: uniqueId
+  uniqueId: uniqueId,
+  dispatch: dispatch
 };
 
 export default dom;
diff --git a/src/core/script/disclosure/disclosure-event.js b/src/core/script/disclosure/disclosure-event.js
@@ -2,7 +2,8 @@ import ns from '../api/utilities/namespace.js';
 
 const DisclosureEvent = {
   DISCLOSE: ns.event('disclose'),
-  CONCEAL: ns.event('conceal')
+  CONCEAL: ns.event('conceal'),
+  CURRENT: ns.event('current')
 };
 
 export { DisclosureEvent };
diff --git a/src/core/script/disclosure/disclosure.js b/src/core/script/disclosure/disclosure.js
@@ -122,7 +122,7 @@ class Disclosure extends Instance {
 
   set isDisclosed (value) {
     if (this._isDisclosed === value || (!this.isEnabled && value === true)) return;
-    this.dispatch(value ? DisclosureEvent.DISCLOSE : DisclosureEvent.CONCEAL, this.type);
+    this.dispatch(value ? DisclosureEvent.DISCLOSE : DisclosureEvent.CONCEAL, this);
     this._isDisclosed = value;
     if (value) this.addClass(this.modifier);
     else this.removeClass(this.modifier);

diff --git a/src/core/script/disclosure/disclosures-group.js b/src/core/script/disclosure/disclosures-group.js
@@ -1,4 +1,5 @@
 import { Instance } from '../api/modules/register/instance.js';
+import { DisclosureEvent } from './disclosure-event.js';
 import { DisclosureEmission } from './disclosure-emission.js';
 import { completeAssign } from '../api/utilities/property/complete-assign.js';
 import { DisclosureSelector } from './disclosure-selector.js';
@@ -147,6 +148,7 @@ class DisclosuresGroup extends Instance {
       }
     }
     this.apply();
+    this.dispatch(DisclosureEvent.CURRENT, this.current);
   }
 
   get current () {

diff --git a/src/scheme/script/scheme/scheme.js b/src/scheme/script/scheme/scheme.js
@@ -110,7 +110,7 @@ class Scheme extends api.core.Instance {
       localStorage.setItem('scheme', value);
     }
     this.setAttribute(SchemeAttribute.SCHEME, value);
-    this.dispatch(SchemeEvent.SCHEME, { scheme: this._scheme });
+    this.dispatch(SchemeEvent.SCHEME, { scheme: this._scheme }, false);
   }
 
   get theme () {
@@ -125,7 +125,7 @@ class Scheme extends api.core.Instance {
         this._theme = value;
         this.setAttribute(SchemeAttribute.THEME, value);
         this.descend(SchemeEmission.THEME, value);
-        this.dispatch(SchemeEvent.THEME, { theme: this._theme });
+        this.dispatch(SchemeEvent.THEME, { theme: this._theme }, false);
         document.documentElement.style.colorScheme = value === SchemeTheme.DARK ? 'dark' : '';
         break;
     }