digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
237 lines (233 loc) • 9.49 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.DigitalMarketplaceFrontend = {}));
})(this, (function (exports) { 'use strict';
class QuestionListMultiquestionQuestionInput {
$question;
canHideQuestion;
constructor($question) {
this.$question = $question;
this.canHideQuestion = this.$question.hasClass('js-hidden');
}
toggleVisibility(isShown) {
if (isShown) {
this.showInput();
}
else {
this.hideInput();
this.hideQuestion();
}
}
hideQuestion() {
if (this.canHideQuestion) {
this.$question.toggleClass('govuk-visually-hidden', true);
this.$question.attr('aria-hidden', 'true');
this.$question.attr('hidden', '');
}
}
}
class QuestionListMultiquestionQuestionInputWithField extends QuestionListMultiquestionQuestionInput {
$input;
constructor($question, $input) {
super($question);
this.$input = $input;
}
hasValue() {
return !!this.$input.val();
}
showInput() {
this.$input.removeAttr('tabindex');
}
hideInput() {
this.$input.val('');
this.$input.attr('value', '');
this.$input.attr('tabindex', -1);
}
focusOnInput() {
this.$input.focus();
}
}
class QuestionListMultiquestionQuestionInputWithItems extends QuestionListMultiquestionQuestionInput {
inputs;
constructor($question, inputs) {
super($question);
this.inputs = inputs;
}
hasValue() {
return this.inputs.some($input => $input.is(':checked'));
}
showInput() {
this.inputs.forEach($input => $input.removeAttr('tabindex'));
}
hideInput() {
this.inputs.forEach(($input) => {
$input.prop('checked', false);
$input.attr('tabindex', -1);
});
}
focusOnInput() {
this.inputs[0].focus();
}
}
class QuestionListMultiquestionQuestionInputFactory {
static getQuestionListMultiquestionQuestionInput($question) {
const inputs = $question.find('input').get().map((input) => $(input));
if (inputs.length == 1) {
return new QuestionListMultiquestionQuestionInputWithField($question, inputs[0]);
}
else {
return new QuestionListMultiquestionQuestionInputWithItems($question, inputs);
}
}
}
class QuestionListMultiquestionRow {
answerList;
$row;
answerListRowInputs;
constructor(answerList, $row) {
this.answerList = answerList;
this.$row = $row;
this.answerListRowInputs = $row.find('.question').get().map((question) => QuestionListMultiquestionQuestionInputFactory.getQuestionListMultiquestionQuestionInput($(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.hasValue());
}
}
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].focusOnInput();
}
}
exports.QuestionListMultiquestionClientSide = QuestionListMultiquestionClientSide;
}));
//# sourceMappingURL=question-list-multiquestion-client-side.bundle.js.map