🐛 fix(navigation): corrige bugs de fermeture du composant [DS-3617, D…

…S-3619] (#840)

src/analytics/example/spa/agnostic/route.js.ejs

@@ -10,7 +10,7 @@
 
     e.preventDefault();
     window.history.pushState({}, '', href);
-    urlLocationHandler();
+    handleUrlLocation();
   });
 
   // create an object that maps the url to the template, title, and description
@@ -38,7 +38,7 @@
   };
 
   // create a function that handles the url location
-  const urlLocationHandler = async () => {
+  const handleUrlLocation = async () => {
     let location = window.location.href.replace(HREF, ''); // get the url route
 
     // get the route object from the urlRoutes object
@@ -56,9 +56,9 @@
   };
 
   // add an event listener to the window that watches for url changes
-  window.onpopstate = urlLocationHandler;
-  // call the urlLocationHandler function to handle the initial url
-  window.route = urlLocationHandler;
-  // call the urlLocationHandler function to handle the initial url
-  urlLocationHandler();
+  window.onpopstate = handleUrlLocation;
+  // call the handleUrlLocation function to handle the initial url
+  window.route = handleUrlLocation;
+  // call the handleUrlLocation function to handle the initial url
+  handleUrlLocation();
 </script>

src/analytics/script/integration/component/component-actionee.js

@@ -63,8 +63,8 @@ class ComponentActionee extends Actionee {
     const button = this.element.getDescendantInstances('ButtonActionee', null, true)[0];
     if (button) button.isMuted = true;
     this._validatedInput = node.querySelector('input');
-    this._inputValidationHandler = this._handleInputValidation.bind(this);
-    if (this._validatedInput) this._validatedInput.addEventListener('keydown', this._inputValidationHandler);
+    this._handlingInputValidation = this._handleInputValidation.bind(this);
+    if (this._validatedInput) this._validatedInput.addEventListener('keydown', this._handlingInputValidation);
   }
 
   _handleInputValidation (e) {
@@ -141,7 +141,7 @@ class ComponentActionee extends Actionee {
 
   dispose () {
     if (this._validatedInput) {
-      this._validatedInput.removeEventListener('keydown', this._inputValidationHandler);
+      this._validatedInput.removeEventListener('keydown', this._handlingInputValidation);
     }
 
     super.dispose();

src/analytics/script/integration/core/actionee.js

@@ -141,9 +141,8 @@ class Actionee extends api.core.Instance {
   listenClick (target) {
     if (target) {
       this._clickTarget = target;
-      this._clickHandler = this.handleClick.bind(this);
-      this._clickTarget.addEventListener('click', this._clickHandler, { capture: true });
-    } else this.listen('click', this.handleClick.bind(this), { capture: true });
+      this._clickTarget.addEventListener('click', this.handlingClick, { capture: true });
+    } else this.listenClick({ capture: true });
   }
 
   handleClick () {
@@ -259,7 +258,7 @@ class Actionee extends api.core.Instance {
 
   dispose () {
     if (this._clickTarget) {
-      this._clickTarget.removeEventListener('click', this._clickHandler);
+      this._clickTarget.removeEventListener('click', this.handlingClick);
     }
     super.dispose();
   }

src/component/header/script/header/header-modal.js

@@ -1,11 +1,6 @@
 import api from '../../api.js';
 
 class HeaderModal extends api.core.Instance {
-  constructor () {
-    super();
-    this._clickHandling = this.clickHandler.bind(this);
-  }
-
   static get instanceClassName () {
     return 'HeaderModal';
   }
@@ -23,18 +18,18 @@ class HeaderModal extends api.core.Instance {
     const modal = this.element.getInstance('Modal');
     if (!modal) return;
     modal.isEnabled = true;
-    this.listen('click', this._clickHandling, { capture: true });
+    this.listenClick({ capture: true });
   }
 
   deactivateModal () {
     const modal = this.element.getInstance('Modal');
     if (!modal) return;
     modal.conceal();
     modal.isEnabled = false;
-    this.unlisten('click', this._clickHandling, { capture: true });
+    this.unlistenClick({ capture: true });
   }
 
-  clickHandler (e) {
+  handleClick (e) {
     if (e.target.matches('a, button') && !e.target.matches('[aria-controls]') && !e.target.matches(api.core.DisclosureSelector.PREVENT_CONCEAL)) {
       const modal = this.element.getInstance('Modal');
       modal.conceal();

src/component/navigation/script/navigation/navigation.js

@@ -11,29 +11,33 @@ class Navigation extends api.core.CollapsesGroup {
     super.init();
     this.clicked = false;
     this.out = false;
-    this.listen('focusout', this.focusOutHandler.bind(this));
-    this.listen('mousedown', this.mouseDownHandler.bind(this));
+    this.addEmission(api.core.RootEmission.CLICK, this._handleRootClick.bind(this));
+    this.listen('mousedown', this.handleMouseDown.bind(this));
     this.listenClick({ capture: true });
   }
 
   validate (member) {
     return super.validate(member) && member.element.node.matches(api.internals.legacy.isLegacy ? NavigationSelector.COLLAPSE_LEGACY : NavigationSelector.COLLAPSE);
   }
 
-  mouseDownHandler (e) {
+  handleMouseDown (e) {
     if (!this.isBreakpoint(api.core.Breakpoints.LG) || this.index === -1 || !this.current) return;
     this.position = this.current.node.contains(e.target) ? NavigationMousePosition.INSIDE : NavigationMousePosition.OUTSIDE;
     this.requestPosition();
   }
 
-  clickHandler (e) {
-    if (e.target.matches('a, button') && !e.target.matches('[aria-controls]') && !e.target.matches(api.core.DisclosureSelector.PREVENT_CONCEAL)) this.index = -1;
+  handleClick (e) {
+    if (e.target.matches('a, button') && !e.target.matches('[aria-controls]') && !e.target.matches(api.core.DisclosureSelector.PREVENT_CONCEAL)) {
+      this.index = -1;
+    }
   }
 
-  focusOutHandler (e) {
+  _handleRootClick (target) {
     if (!this.isBreakpoint(api.core.Breakpoints.LG)) return;
-    this.out = true;
-    this.requestPosition();
+    if (!this.node.contains(target)) {
+      this.out = true;
+      this.requestPosition();
+    }
   }
 
   requestPosition () {