digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
197 lines (195 loc) • 6.91 kB
JavaScript
class QuestionListRowInput {
$input;
$label;
$labelCounter;
$prefixText;
constructor($row) {
this.$input = $row.find('.dm-list__item-input');
this.$label = $row.find('.govuk-label');
this.$labelCounter = this.$label.find('.dm-list__item-label-counter');
this.$prefixText = $row.find('.govuk-input__prefix');
}
getValue() {
return this.$input.val();
}
clearValue() {
this.$input.val('');
this.$input.attr('value', '');
}
updateIndex(newIndex) {
const newId = `input-${this.$input.attr('name')}-${newIndex}`;
this.$label.attr('for', newId);
this.$labelCounter.text(newIndex + 1);
this.$prefixText.text(`${newIndex + 1}.`);
this.$input.attr('id', newId);
}
}
class QuestionListRowRemoveButton {
answerListRow;
$button;
$removeButtonCounter;
constructor(answerListRow, $row) {
this.answerListRow = answerListRow;
this.$button = $row.find('.dm-list__item-remove');
this.$removeButtonCounter = this.$button.find('.dm-list__item-remove-counter');
}
init() {
this.toggleVisibility(true);
this.$button.on('click', () => {
this.answerListRow.removeRow();
});
}
toggleVisibility(isShown) {
this.$button.toggleClass('govuk-visually-hidden', !isShown);
}
updateIndex(newIndex) {
this.$removeButtonCounter.text(newIndex + 1);
}
}
class QuestionListRow {
answerList;
index;
$row;
answerListRowInput;
answerListRowRemoveButton;
constructor(answerList, index, $row) {
this.answerList = answerList;
this.index = index;
this.$row = $row;
this.answerListRowInput = new QuestionListRowInput($row);
this.answerListRowRemoveButton = new QuestionListRowRemoveButton(this, $row);
}
init() {
this.answerListRowRemoveButton.init();
}
updateIndex(newIndex) {
this.index = newIndex;
this.answerListRowInput.updateIndex(newIndex);
this.answerListRowRemoveButton.updateIndex(newIndex);
}
removeRow() {
this.answerList.removeRow(this.index);
this.deleteRow();
}
deleteRow() {
this.$row.remove();
}
toggleRemoveButtonVisibility(isShown) {
this.answerListRowRemoveButton.toggleVisibility(isShown);
}
inputValue() {
return this.answerListRowInput.getValue();
}
}
class QuestionListAddButton {
answerList;
$button;
$buttonCounter;
constructor(answerList, $button) {
this.answerList = answerList;
this.$button = $button;
this.$buttonCounter = $button.find('.dm-list__item-add-counter');
}
init(numberOfRows) {
this.$button.on('click', () => {
this.answerList.addRow();
});
this.updateButtonText(this.answerList.maxNumberOfItems - numberOfRows);
}
updateButtonText(numberRemaining) {
this.$buttonCounter.text(numberRemaining);
}
toggleVisibility(isShown) {
this.$button.toggleClass('govuk-visually-hidden', !isShown);
}
}
class QuestionList {
static moduleName = 'dm-question-list';
$answerList;
$answerListItems;
answerListRows;
answerListAddButton;
maxNumberOfItems;
numberOfItemsShownAsDefault;
constructor($answerList) {
this.$answerList = $answerList;
this.maxNumberOfItems = this.$answerList.data('maxNumberOfItems');
this.numberOfItemsShownAsDefault = this.$answerList.data('numberOfItemsShownAsDefault');
this.$answerListItems = this.$answerList.find('.dm-list__items');
this.answerListRows = this.$answerList.find('.dm-list__item').get().map((row, index) => new QuestionListRow(this, index, $(row)));
this.answerListAddButton = new QuestionListAddButton(this, this.$answerList.find('.dm-list__item-add'));
}
init() {
const rowValues = this.answerListRows.map((answerListRow) => answerListRow.inputValue());
let indexToDeleteFrom = 1;
if (rowValues.every((rowValue) => !rowValue)) {
indexToDeleteFrom = this.numberOfItemsShownAsDefault;
}
else {
rowValues.forEach((rowValue, index) => {
if (rowValue) {
indexToDeleteFrom = index + 1;
}
});
}
if (indexToDeleteFrom >= 0) {
this.answerListRows.slice(indexToDeleteFrom).forEach((answerListRow) => answerListRow.deleteRow());
this.answerListRows.splice(indexToDeleteFrom);
}
this.answerListAddButton.init(this.answerListRows.length);
this.answerListRows.forEach((answerListRow) => answerListRow.init());
this.updateIfMinRows();
this.updateAnswerButton();
}
removeRow(indexToRemove) {
this.answerListRows.splice(indexToRemove, 1);
this.answerListRows.slice(indexToRemove).forEach((answerListRow, index) => {
answerListRow.updateIndex(indexToRemove + index);
});
this.updateIfMinRows();
this.updateAnswerButton();
this.focusOnRow(indexToRemove);
}
addRow() {
const numberOfRows = this.answerListRows.length;
if (numberOfRows < this.maxNumberOfItems) {
const $newRow = this.answerListRows[0].$row.clone();
const answerListRow = new QuestionListRow(this, numberOfRows, $newRow);
answerListRow.updateIndex(numberOfRows);
answerListRow.answerListRowInput.clearValue();
this.answerListRows.push(answerListRow);
this.$answerListItems.append($newRow);
this.answerListRows[numberOfRows].init();
this.updateIfMinRows();
this.updateAnswerButton();
this.focusOnRow(numberOfRows);
}
}
updateIfMinRows() {
if (this.answerListRows.length === 1) {
this.answerListRows[0].toggleRemoveButtonVisibility(false);
}
else {
this.answerListRows[0].toggleRemoveButtonVisibility(true);
}
}
updateAnswerButton() {
if (this.answerListRows.length === this.maxNumberOfItems) {
this.answerListAddButton.toggleVisibility(false);
}
else {
this.answerListAddButton.toggleVisibility(true);
this.answerListAddButton.updateButtonText(this.maxNumberOfItems - this.answerListRows.length);
}
}
focusOnRow(targetIndexToFocus) {
const numberOfRows = this.answerListRows.length;
let indexToFocus = targetIndexToFocus;
if (targetIndexToFocus >= numberOfRows) {
indexToFocus = numberOfRows - 1;
}
this.answerListRows[indexToFocus].answerListRowInput.$input.focus();
}
}
export { QuestionList };
//# sourceMappingURL=question-list.bundle.mjs.map