expand buttons for contact page

app/javascript/new_design/support.js

@@ -1,16 +1,126 @@
-import { show, hide, delegate } from '@utils';
+/*
+*   This content is inspired by w3c aria example
+*   https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html
+*/
 
-function updateContactElementsVisibility() {
+var ButtonExpand = function (domNode) {
-  const contactSelect = document.querySelector('#contact-form #type');
-  if (contactSelect) {
-    const type = contactSelect.value;
-    const visibleElements = `[data-contact-type-only="${type}"]`;
-    const hiddenElements = `[data-contact-type-only]:not([data-contact-type-only="${type}"])`;
 
-    document.querySelectorAll(visibleElements).forEach(show);
+  this.domNode = domNode;
-    document.querySelectorAll(hiddenElements).forEach(hide);
+
+  this.keyCode = Object.freeze({
+    'RETURN': 13
+  });
+};
+
+ButtonExpand.prototype.init = function () {
+
+  this.allButtons = [];
+  this.controlledNode = false;
+
+  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.allButtons.forEach((b) => {
+    if (b != this) {
+      b.hideContent();
+    }
+  });
+};
+
+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 () {
+  console.log("toggleExpanding...");
+
+  if (this.domNode.getAttribute('aria-expanded') === 'true') {
+    this.hideContent();
+  }
+  else {
+    this.showContent();
+  }
+
+};
+
+ButtonExpand.prototype.setAllButtons = function(buttons) {
+  this.allButtons = buttons;
 }
 
-addEventListener('ds:page:update', updateContactElementsVisibility);
+/* EVENT HANDLERS */
-delegate('change', '#contact-form #type', updateContactElementsVisibility);
+
+ButtonExpand.prototype.handleKeydown = function (event) {
+
+  switch (event.keyCode) {
+
+    case this.keyCode.RETURN:
+
+      this.toggleExpand();
+
+      event.stopPropagation();
+      event.preventDefault();
+      break;
+
+    default:
+      break;
+  }
+
+};
+
+ButtonExpand.prototype.handleClick = function (event) {
+  event.stopPropagation();
+  event.preventDefault();
+  this.toggleExpand();
+};
+
+ButtonExpand.prototype.handleFocus = function (event) {
+  this.domNode.classList.add('focus');
+};
+
+ButtonExpand.prototype.handleBlur = function (event) {
+  this.domNode.classList.remove('focus');
+};
+
+/* Initialize Hide/Show Buttons */
+
+window.addEventListener('load', function (event) {
+
+  var buttons =  document.querySelectorAll('button[aria-expanded][aria-controls], button.button-without-hint');
+  var expandButtons = [];
+
+  buttons.forEach((button) => {
+    var be = new ButtonExpand(button);
+    be.init();
+    expandButtons.push(be);
+  });
+  expandButtons.forEach((button) => button.setAllButtons(expandButtons));
+
+}, false);