demarches-normaliennes/app/javascript/new_design/support.js

/*
*   This content is inspired by w3c aria example
*   https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html
*/

var ButtonExpand = function (domNode) {

  this.domNode = domNode;

  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.formInput.value = this.domNode.getAttribute('data-question-type');

  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;
}

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;
  }

};

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 = [];
  var formInput = document.querySelector('form input#type');

  buttons.forEach((button) => {
    var be = new ButtonExpand(button);
    be.init();
    expandButtons.push(be);
  });
  expandButtons.forEach((button) => button.setAllButtons(expandButtons));
  expandButtons.forEach((button) => button.setFormInput(formInput));

}, false);