digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
170 lines (168 loc) • 6.32 kB
JavaScript
class QuestionListMultiquestionQuestionInput {
$input;
constructor($question) {
this.$input = $question.find('input');
}
getValue() {
return this.$input.val();
}
toggleVisibility(isShown) {
if (isShown) {
this.$input.removeAttr('tabindex');
}
else {
this.$input.val('');
this.$input.attr('value', '');
this.$input.attr('tabindex', -1);
}
}
}
class QuestionListMultiquestionRow {
answerList;
$row;
answerListRowInputs;
constructor(answerList, $row) {
this.answerList = answerList;
this.$row = $row;
this.answerListRowInputs = $row.find('.question').get().map((question) => new QuestionListMultiquestionQuestionInput($(question)));
}
toggleVisibility(isShown) {
this.$row.toggleClass('govuk-visually-hidden', !isShown);
this.answerListRowInputs.forEach((answerListRowInput) => answerListRowInput.toggleVisibility(isShown));
}
isRowVisible() {
return !this.$row.hasClass('govuk-visually-hidden');
}
rowHasValues() {
return this.answerListRowInputs.some((answerListRowInput) => !!answerListRowInput.getValue());
}
}
class QuestionListMultiquestionButton {
answerList;
$button;
$buttonCounter;
constructor(answerList, $button, buttonType) {
this.answerList = answerList;
this.$button = $button;
this.$buttonCounter = $button.find(`.dm-list-multiquestion__item-${buttonType}-counter`);
}
updateButtonText(numberOfRows) {
this.$buttonCounter.text(numberOfRows);
}
toggleVisibility(isShown) {
this.$button.toggleClass('govuk-visually-hidden', !isShown);
if (isShown) {
this.$button.removeAttr('tabindex');
}
else {
this.$button.attr('tabindex', -1);
}
}
}
class QuestionListMultiquestionRemoveButton extends QuestionListMultiquestionButton {
constructor(answerList, $button) {
super(answerList, $button, 'remove');
}
init(numberOfRows) {
this.$button.on('click', () => {
this.answerList.hideRow();
});
this.updateButtonText(numberOfRows);
}
}
class QuestionListMultiquestionAddButton extends QuestionListMultiquestionButton {
maxNumberOfItems;
constructor(answerList, $button, maxNumberOfItems) {
super(answerList, $button, 'add');
this.maxNumberOfItems = maxNumberOfItems;
}
init(numberOfRows) {
this.$button.on('click', () => {
this.answerList.addRow();
});
this.updateButtonText(this.maxNumberOfItems - numberOfRows);
}
}
class QuestionListMultiquestionClientSide {
static moduleName = 'dm-question-list-multiquestion-client-side';
$answerList;
maxNumberOfItems;
answerListRows;
answerListAddButton;
answerListRemoveButton;
constructor($answerList) {
this.$answerList = $answerList;
this.maxNumberOfItems = this.$answerList.data('maxNumberOfItems');
this.answerListRows = this.$answerList.find('.dm-list-multiquestion__item').get().map((row) => new QuestionListMultiquestionRow(this, $(row)));
this.answerListAddButton = new QuestionListMultiquestionAddButton(this, this.$answerList.find('.dm-list-multiquestion__item-add'), this.maxNumberOfItems);
this.answerListRemoveButton = new QuestionListMultiquestionRemoveButton(this, this.$answerList.find('.dm-list-multiquestion__item-remove'));
}
init() {
const rowsVisible = this.answerListRows.map((answerListRow) => answerListRow.rowHasValues());
let indexToHideFrom = -1;
if (rowsVisible.every((rowVisible) => !rowVisible)) {
indexToHideFrom = 1;
}
else {
let previousRowVisible = true;
rowsVisible.forEach((rowVisible, index) => {
if (previousRowVisible && !rowVisible) {
indexToHideFrom = index;
}
previousRowVisible = rowVisible;
});
}
if (indexToHideFrom >= 0) {
this.answerListRows.slice(indexToHideFrom).forEach((answerListRow) => answerListRow.toggleVisibility(false));
}
const numberOfRows = this.visibleRowsCount();
this.answerListAddButton.init(numberOfRows);
this.answerListRemoveButton.init(numberOfRows);
this.updateRemoveButton(numberOfRows);
this.updateAnswerButton(numberOfRows);
}
hideRow() {
const numberOfRows = this.visibleRowsCount();
if (numberOfRows > 1) {
this.answerListRows[numberOfRows - 1].toggleVisibility(false);
this.updateRemoveButton(numberOfRows - 1);
this.updateAnswerButton(numberOfRows - 1);
this.focusOnRow(numberOfRows - 1);
}
}
addRow() {
const numberOfRows = this.visibleRowsCount();
if (numberOfRows < this.maxNumberOfItems) {
this.answerListRows[numberOfRows].toggleVisibility(true);
this.updateRemoveButton(numberOfRows + 1);
this.updateAnswerButton(numberOfRows + 1);
this.focusOnRow(numberOfRows + 1);
}
}
visibleRowsCount() {
return this.answerListRows.reduce((count, answerListRow) => count += answerListRow.isRowVisible() ? 1 : 0, 0);
}
updateRemoveButton(numberOfRows) {
if (numberOfRows === 1) {
this.answerListRemoveButton.toggleVisibility(false);
}
else {
this.answerListRemoveButton.toggleVisibility(true);
this.answerListRemoveButton.updateButtonText(numberOfRows);
}
}
updateAnswerButton(numberOfRows) {
if (numberOfRows === this.maxNumberOfItems) {
this.answerListAddButton.toggleVisibility(false);
}
else {
this.answerListAddButton.toggleVisibility(true);
this.answerListAddButton.updateButtonText(this.maxNumberOfItems - numberOfRows);
}
}
focusOnRow(numberOfRows) {
this.answerListRows[numberOfRows - 1].answerListRowInputs[0].$input.focus();
}
}
export { QuestionListMultiquestionClientSide };
//# sourceMappingURL=question-list-multiquestion-client-side.bundle.mjs.map