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

122 lines
2.8 KiB
JavaScript
Raw Normal View History

2020-09-17 09:06:57 +02:00
//
// This content is inspired by w3c aria example
// https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html
//
2019-02-21 17:50:18 +01:00
2020-09-22 12:14:02 +02:00
class ButtonExpand {
constructor(domNode) {
this.domNode = domNode;
2020-09-16 21:10:23 +02:00
2020-09-22 12:14:02 +02:00
this.keyCode = Object.freeze({
RETURN: 13
});
2020-09-16 21:10:23 +02:00
2020-09-22 12:14:02 +02:00
this.allButtons = [];
this.controlledNode = false;
2020-09-16 21:10:23 +02:00
2020-09-22 12:14:02 +02:00
var id = this.domNode.getAttribute('aria-controls');
2020-09-16 21:10:23 +02:00
2020-09-22 12:14:02 +02:00
if (id) {
this.controlledNode = document.getElementById(id);
}
2020-09-16 21:10:23 +02:00
2020-09-22 12:14:02 +02:00
this.domNode.setAttribute('aria-expanded', 'false');
this.hideContent();
2020-09-16 21:10:23 +02:00
2020-09-22 12:14:02 +02:00
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));
2020-09-16 21:10:23 +02:00
}
2020-09-22 12:14:02 +02:00
showContent() {
this.domNode.setAttribute('aria-expanded', 'true');
this.domNode.classList.add('primary');
if (this.controlledNode) {
this.controlledNode.classList.remove('hidden');
2020-09-16 21:10:23 +02:00
}
2020-09-22 12:14:02 +02:00
this.formInput.value = this.domNode.getAttribute('data-question-type');
this.allButtons.forEach((b) => {
if (b != this) {
b.hideContent();
}
});
2020-09-16 21:10:23 +02:00
}
2020-09-22 12:14:02 +02:00
hideContent() {
this.domNode.setAttribute('aria-expanded', 'false');
this.domNode.classList.remove('primary');
if (this.controlledNode) {
this.controlledNode.classList.add('hidden');
}
2020-09-16 21:10:23 +02:00
}
2020-09-22 12:14:02 +02:00
toggleExpand() {
if (this.domNode.getAttribute('aria-expanded') === 'true') {
this.hideContent();
} else {
this.showContent();
}
}
2020-09-22 12:14:02 +02:00
setAllButtons(buttons) {
this.allButtons = buttons;
}
2020-09-22 12:14:02 +02:00
setFormInput(formInput) {
this.formInput = formInput;
}
2020-09-16 21:10:23 +02:00
2020-09-22 12:14:02 +02:00
handleKeydown() {
switch (event.keyCode) {
case this.keyCode.RETURN:
this.toggleExpand();
2020-09-16 21:10:23 +02:00
2020-09-22 12:14:02 +02:00
event.stopPropagation();
event.preventDefault();
break;
2020-09-16 21:10:23 +02:00
2020-09-22 12:14:02 +02:00
default:
break;
}
2020-09-16 21:10:23 +02:00
}
2020-09-22 12:14:02 +02:00
handleClick() {
event.stopPropagation();
event.preventDefault();
this.toggleExpand();
}
2020-09-16 21:10:23 +02:00
2020-09-22 12:14:02 +02:00
handleFocus = function () {
this.domNode.classList.add('focus');
};
2020-09-16 21:10:23 +02:00
2020-09-22 12:14:02 +02:00
handleBlur() {
this.domNode.classList.remove('focus');
}
}
2020-09-16 21:10:23 +02:00
/* Initialize Hide/Show Buttons */
if (document.querySelector('#contact-form')) {
window.addEventListener(
'DOMContentLoaded',
function () {
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);
expandButtons.push(be);
});
expandButtons.forEach((button) => button.setAllButtons(expandButtons));
expandButtons.forEach((button) => button.setFormInput(formInput));
},
false
);
}