From 6fd0134b6da10a226e3f784b30f69cb0e4a2b0c5 Mon Sep 17 00:00:00 2001
From: Christophe Robillard <christophe.robillard@beta.gouv.fr>
Date: Tue, 22 Sep 2020 12:14:02 +0200
Subject: [PATCH] convert to es6 classes

---
 app/javascript/new_design/support.js | 163 +++++++++++++--------------
 1 file changed, 80 insertions(+), 83 deletions(-)

diff --git a/app/javascript/new_design/support.js b/app/javascript/new_design/support.js
index 3a2d812e5..8c590ae00 100644
--- a/app/javascript/new_design/support.js
+++ b/app/javascript/new_design/support.js
@@ -3,107 +3,105 @@
 // https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html
 //
 
-var ButtonExpand = function (domNode) {
-  this.domNode = domNode;
+class ButtonExpand {
+  constructor(domNode) {
+    this.domNode = domNode;
 
-  this.keyCode = Object.freeze({
-    RETURN: 13
-  });
-};
+    this.keyCode = Object.freeze({
+      RETURN: 13
+    });
 
-ButtonExpand.prototype.init = function () {
-  this.allButtons = [];
-  this.controlledNode = false;
+    this.allButtons = [];
+    this.controlledNode = false;
 
-  var id = this.domNode.getAttribute('aria-controls');
+    var id = this.domNode.getAttribute('aria-controls');
 
-  if (id) {
-    this.controlledNode = document.getElementById(id);
-  }
-
-  this.domNode.setAttribute('aria-expanded', 'false');
-  this.hideContent();
-
-  this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
-  this.domNode.addEventListener('click', this.handleClick.bind(this));
-  this.domNode.addEventListener('focus', this.handleFocus.bind(this));
-  this.domNode.addEventListener('blur', this.handleBlur.bind(this));
-};
-
-ButtonExpand.prototype.showContent = function () {
-  this.domNode.setAttribute('aria-expanded', 'true');
-  this.domNode.classList.add('primary');
-  if (this.controlledNode) {
-    this.controlledNode.classList.remove('hidden');
-  }
-  this.formInput.value = this.domNode.getAttribute('data-question-type');
-
-  this.allButtons.forEach((b) => {
-    if (b != this) {
-      b.hideContent();
+    if (id) {
+      this.controlledNode = document.getElementById(id);
     }
-  });
-};
 
-ButtonExpand.prototype.hideContent = function () {
-  this.domNode.setAttribute('aria-expanded', 'false');
-  this.domNode.classList.remove('primary');
-  if (this.controlledNode) {
-    this.controlledNode.classList.add('hidden');
-  }
-};
-
-ButtonExpand.prototype.toggleExpand = function () {
-  if (this.domNode.getAttribute('aria-expanded') === 'true') {
+    this.domNode.setAttribute('aria-expanded', 'false');
     this.hideContent();
-  } else {
-    this.showContent();
+
+    this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
+    this.domNode.addEventListener('click', this.handleClick.bind(this));
+    this.domNode.addEventListener('focus', this.handleFocus.bind(this));
+    this.domNode.addEventListener('blur', this.handleBlur.bind(this));
   }
-};
 
-ButtonExpand.prototype.setAllButtons = function (buttons) {
-  this.allButtons = buttons;
-};
+  showContent() {
+    this.domNode.setAttribute('aria-expanded', 'true');
+    this.domNode.classList.add('primary');
+    if (this.controlledNode) {
+      this.controlledNode.classList.remove('hidden');
+    }
+    this.formInput.value = this.domNode.getAttribute('data-question-type');
 
-ButtonExpand.prototype.setFormInput = function (formInput) {
-  this.formInput = formInput;
-};
-
-/* EVENT HANDLERS */
-
-ButtonExpand.prototype.handleKeydown = function (event) {
-  switch (event.keyCode) {
-    case this.keyCode.RETURN:
-      this.toggleExpand();
-
-      event.stopPropagation();
-      event.preventDefault();
-      break;
-
-    default:
-      break;
+    this.allButtons.forEach((b) => {
+      if (b != this) {
+        b.hideContent();
+      }
+    });
   }
-};
 
-ButtonExpand.prototype.handleClick = function (event) {
-  event.stopPropagation();
-  event.preventDefault();
-  this.toggleExpand();
-};
+  hideContent() {
+    this.domNode.setAttribute('aria-expanded', 'false');
+    this.domNode.classList.remove('primary');
+    if (this.controlledNode) {
+      this.controlledNode.classList.add('hidden');
+    }
+  }
 
-ButtonExpand.prototype.handleFocus = function () {
-  this.domNode.classList.add('focus');
-};
+  toggleExpand() {
+    if (this.domNode.getAttribute('aria-expanded') === 'true') {
+      this.hideContent();
+    } else {
+      this.showContent();
+    }
+  }
 
-ButtonExpand.prototype.handleBlur = function () {
-  this.domNode.classList.remove('focus');
-};
+  setAllButtons(buttons) {
+    this.allButtons = buttons;
+  }
+
+  setFormInput(formInput) {
+    this.formInput = formInput;
+  }
+
+  handleKeydown() {
+    switch (event.keyCode) {
+      case this.keyCode.RETURN:
+        this.toggleExpand();
+
+        event.stopPropagation();
+        event.preventDefault();
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  handleClick() {
+    event.stopPropagation();
+    event.preventDefault();
+    this.toggleExpand();
+  }
+
+  handleFocus = function () {
+    this.domNode.classList.add('focus');
+  };
+
+  handleBlur() {
+    this.domNode.classList.remove('focus');
+  }
+}
 
 /* Initialize Hide/Show Buttons */
 
 if (document.querySelector('#contact-form')) {
   window.addEventListener(
-    'load',
+    'ds:page:update',
     function () {
       var buttons = document.querySelectorAll(
         'button[aria-expanded][aria-controls], button.button-without-hint'
@@ -113,7 +111,6 @@ if (document.querySelector('#contact-form')) {
 
       buttons.forEach((button) => {
         var be = new ButtonExpand(button);
-        be.init();
         expandButtons.push(be);
       });
       expandButtons.forEach((button) => button.setAllButtons(expandButtons));