fix js lint errors
This commit is contained in:
parent
9be015752a
commit
5bd4644c2c
1 changed files with 34 additions and 45 deletions
|
@ -1,19 +1,17 @@
|
||||||
/*
|
//
|
||||||
* This content is inspired by w3c aria example
|
// This content is inspired by w3c aria example
|
||||||
* https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html
|
// https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html
|
||||||
*/
|
//
|
||||||
|
|
||||||
var ButtonExpand = function (domNode) {
|
var ButtonExpand = function (domNode) {
|
||||||
|
|
||||||
this.domNode = domNode;
|
this.domNode = domNode;
|
||||||
|
|
||||||
this.keyCode = Object.freeze({
|
this.keyCode = Object.freeze({
|
||||||
'RETURN': 13
|
RETURN: 13
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
ButtonExpand.prototype.init = function () {
|
ButtonExpand.prototype.init = function () {
|
||||||
|
|
||||||
this.allButtons = [];
|
this.allButtons = [];
|
||||||
this.controlledNode = false;
|
this.controlledNode = false;
|
||||||
|
|
||||||
|
@ -26,20 +24,17 @@ ButtonExpand.prototype.init = function () {
|
||||||
this.domNode.setAttribute('aria-expanded', 'false');
|
this.domNode.setAttribute('aria-expanded', 'false');
|
||||||
this.hideContent();
|
this.hideContent();
|
||||||
|
|
||||||
this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
|
this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
|
||||||
this.domNode.addEventListener('click', this.handleClick.bind(this));
|
this.domNode.addEventListener('click', this.handleClick.bind(this));
|
||||||
this.domNode.addEventListener('focus', this.handleFocus.bind(this));
|
this.domNode.addEventListener('focus', this.handleFocus.bind(this));
|
||||||
this.domNode.addEventListener('blur', this.handleBlur.bind(this));
|
this.domNode.addEventListener('blur', this.handleBlur.bind(this));
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ButtonExpand.prototype.showContent = function () {
|
ButtonExpand.prototype.showContent = function () {
|
||||||
|
|
||||||
this.domNode.setAttribute('aria-expanded', 'true');
|
this.domNode.setAttribute('aria-expanded', 'true');
|
||||||
this.domNode.classList.add('primary');
|
this.domNode.classList.add('primary');
|
||||||
if (this.controlledNode) {
|
if (this.controlledNode) {
|
||||||
this.controlledNode.classList.remove('hidden');
|
this.controlledNode.classList.remove('hidden');
|
||||||
|
|
||||||
}
|
}
|
||||||
this.formInput.value = this.domNode.getAttribute('data-question-type');
|
this.formInput.value = this.domNode.getAttribute('data-question-type');
|
||||||
|
|
||||||
|
@ -51,43 +46,34 @@ ButtonExpand.prototype.showContent = function () {
|
||||||
};
|
};
|
||||||
|
|
||||||
ButtonExpand.prototype.hideContent = function () {
|
ButtonExpand.prototype.hideContent = function () {
|
||||||
|
|
||||||
this.domNode.setAttribute('aria-expanded', 'false');
|
this.domNode.setAttribute('aria-expanded', 'false');
|
||||||
this.domNode.classList.remove('primary');
|
this.domNode.classList.remove('primary');
|
||||||
if (this.controlledNode) {
|
if (this.controlledNode) {
|
||||||
this.controlledNode.classList.add('hidden');
|
this.controlledNode.classList.add('hidden');
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ButtonExpand.prototype.toggleExpand = function () {
|
ButtonExpand.prototype.toggleExpand = function () {
|
||||||
console.log("toggleExpanding...");
|
|
||||||
|
|
||||||
if (this.domNode.getAttribute('aria-expanded') === 'true') {
|
if (this.domNode.getAttribute('aria-expanded') === 'true') {
|
||||||
this.hideContent();
|
this.hideContent();
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
this.showContent();
|
this.showContent();
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ButtonExpand.prototype.setAllButtons = function(buttons) {
|
ButtonExpand.prototype.setAllButtons = function (buttons) {
|
||||||
this.allButtons = buttons;
|
this.allButtons = buttons;
|
||||||
}
|
};
|
||||||
|
|
||||||
ButtonExpand.prototype.setFormInput = function(formInput) {
|
ButtonExpand.prototype.setFormInput = function (formInput) {
|
||||||
this.formInput = formInput;
|
this.formInput = formInput;
|
||||||
}
|
};
|
||||||
|
|
||||||
/* EVENT HANDLERS */
|
/* EVENT HANDLERS */
|
||||||
|
|
||||||
ButtonExpand.prototype.handleKeydown = function (event) {
|
ButtonExpand.prototype.handleKeydown = function (event) {
|
||||||
|
|
||||||
switch (event.keyCode) {
|
switch (event.keyCode) {
|
||||||
|
|
||||||
case this.keyCode.RETURN:
|
case this.keyCode.RETURN:
|
||||||
|
|
||||||
this.toggleExpand();
|
this.toggleExpand();
|
||||||
|
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
@ -97,7 +83,6 @@ ButtonExpand.prototype.handleKeydown = function (event) {
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ButtonExpand.prototype.handleClick = function (event) {
|
ButtonExpand.prototype.handleClick = function (event) {
|
||||||
|
@ -106,28 +91,32 @@ ButtonExpand.prototype.handleClick = function (event) {
|
||||||
this.toggleExpand();
|
this.toggleExpand();
|
||||||
};
|
};
|
||||||
|
|
||||||
ButtonExpand.prototype.handleFocus = function (event) {
|
ButtonExpand.prototype.handleFocus = function () {
|
||||||
this.domNode.classList.add('focus');
|
this.domNode.classList.add('focus');
|
||||||
};
|
};
|
||||||
|
|
||||||
ButtonExpand.prototype.handleBlur = function (event) {
|
ButtonExpand.prototype.handleBlur = function () {
|
||||||
this.domNode.classList.remove('focus');
|
this.domNode.classList.remove('focus');
|
||||||
};
|
};
|
||||||
|
|
||||||
/* Initialize Hide/Show Buttons */
|
/* Initialize Hide/Show Buttons */
|
||||||
|
|
||||||
window.addEventListener('load', function (event) {
|
window.addEventListener(
|
||||||
|
'load',
|
||||||
|
function () {
|
||||||
|
var buttons = document.querySelectorAll(
|
||||||
|
'button[aria-expanded][aria-controls], button.button-without-hint'
|
||||||
|
);
|
||||||
|
var expandButtons = [];
|
||||||
|
var formInput = document.querySelector('form input#type');
|
||||||
|
|
||||||
var buttons = document.querySelectorAll('button[aria-expanded][aria-controls], button.button-without-hint');
|
buttons.forEach((button) => {
|
||||||
var expandButtons = [];
|
var be = new ButtonExpand(button);
|
||||||
var formInput = document.querySelector('form input#type');
|
be.init();
|
||||||
|
expandButtons.push(be);
|
||||||
buttons.forEach((button) => {
|
});
|
||||||
var be = new ButtonExpand(button);
|
expandButtons.forEach((button) => button.setAllButtons(expandButtons));
|
||||||
be.init();
|
expandButtons.forEach((button) => button.setFormInput(formInput));
|
||||||
expandButtons.push(be);
|
},
|
||||||
});
|
false
|
||||||
expandButtons.forEach((button) => button.setAllButtons(expandButtons));
|
);
|
||||||
expandButtons.forEach((button) => button.setFormInput(formInput));
|
|
||||||
|
|
||||||
}, false);
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue