digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
274 lines (271 loc) • 11.2 kB
JavaScript
import { FileUpload } from '../../node_modules/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs';
class ComplianceCommunicationAttachmentListRowFileInput {
$dropZone;
$input;
$label;
$hint;
$button;
$comma;
$announcements;
constructor($row, column) {
const $column = $row.find(`.govuk-grid-column-one-half:nth-of-type(${column})`);
this.$dropZone = $column.find('.govuk-drop-zone');
this.$input = $column.find('input');
this.$label = $column.find('.govuk-label');
this.$hint = $column.find('div.govuk-hint');
this.$button = $column.find('button');
this.$comma = $column.find('button > span.govuk-visually-hidden');
this.$announcements = $column.find('span.govuk-file-upload-announcements');
}
updateIndex(newIndex) {
const newName = this.$input.attr('name').replace(/\d+/, newIndex.toString());
const newId = `input-${newName}`;
if (this.$button.length) {
this.$label.attr('for', newId);
this.$label.attr('id', `${newId}-label`);
this.$hint.attr('id', `${newId}-hint`);
this.$input.attr('id', `${newId}-input`);
this.$input.attr('name', newName);
this.$input.attr('aria-describedby', `${newId}-hint`);
this.$button.attr('id', newId);
this.$button.attr('aria-describedby', `${newId}-hint`);
this.$button.attr('aria-labelledby', `${newId}-label ${newId}-comma ${newId}`);
this.$comma.attr('id', `${newId}-comma`);
}
else {
this.$label.attr('for', newId);
this.$hint.attr('id', `${newId}-hint`);
this.$input.attr('id', newId);
this.$input.attr('name', newName);
this.$input.attr('aria-describedby', `${newId}-hint`);
}
}
makeInteractable() {
if (!this.$button.length) {
return new FileUpload(this.$dropZone.get(0));
}
}
resetHtml() {
this.$label.removeAttr('id');
this.$dropZone.removeAttr('data-govuk-file-upload-init');
this.$button.remove();
const id = this.$input.attr('id');
this.$input.removeAttr('hidden');
this.$input.removeAttr('aria-hidden');
this.$input.attr('id', id.substring(0, id.length - 6));
this.$announcements.remove();
}
}
class ComplianceCommunicationAttachmentListRequiredInput {
$requiredSection;
$input;
$label;
constructor($row) {
this.$requiredSection = $row.find('.dm-compliance-communication__attachments-item-required');
this.$input = this.$requiredSection.find('.govuk-checkboxes__item > input');
this.$label = this.$requiredSection.find('.govuk-checkboxes__item > .govuk-label');
}
isChecked() {
return this.$input.is(':checked');
}
updateIndex(newIndex) {
const newName = this.$input.attr('name').replace(/\d+/, newIndex.toString());
const newId = `input-${newName}`;
this.$label.attr('for', newId);
this.$input.attr('id', newId);
this.$input.attr('name', newName);
}
checkRow() {
this.$requiredSection.toggleClass('govuk-visually-hidden', true);
this.$input.prop('checked', true);
this.$input.attr('tabindex', -1);
this.$input.attr('tabindex', -1);
}
}
class ComplianceCommunicationAttachmentListRowRemoveButton {
attachmentListRow;
$button;
$removeButtonCounter;
constructor(attachmentListRow, $row) {
this.attachmentListRow = attachmentListRow;
this.$button = $row.find('.dm-compliance-communication__attachments-item-remove');
this.$removeButtonCounter = this.$button.find('.dm-compliance-communication__attachments-item-remove-counter');
}
init() {
this.toggleVisibility(true);
this.$button.on('click', () => {
this.attachmentListRow.removeRow();
});
}
toggleVisibility(isShown) {
this.$button.toggleClass('govuk-visually-hidden', !isShown);
if (isShown) {
this.$button.removeAttr('tabindex');
}
else {
this.$button.attr('tabindex', -1);
}
}
updateIndex(newIndex) {
this.$removeButtonCounter.text(newIndex + 1);
}
}
class ComplianceCommunicationAttachmentListRow {
$row;
attachmentList;
index;
$legendCounter;
attachmentListRowFileInput;
attachmentListRowRequiredInput;
attachmentListRowRemoveButton;
constructor(attachmentList, index, $row) {
this.$row = $row;
this.attachmentList = attachmentList;
this.index = index;
this.$legendCounter = this.$row.find('.dm-compliance-communication__attachments-item-legend-counter');
this.attachmentListRowFileInput = new ComplianceCommunicationAttachmentListRowFileInput($row, 1);
this.attachmentListRowRequiredInput = new ComplianceCommunicationAttachmentListRequiredInput($row);
this.attachmentListRowRemoveButton = new ComplianceCommunicationAttachmentListRowRemoveButton(this, $row);
}
init() {
this.attachmentListRowRemoveButton.init();
this.attachmentListRowFileInput.makeInteractable();
this.attachmentListRowRequiredInput.checkRow();
}
updateIndex(newIndex) {
this.index = newIndex;
this.attachmentListRowFileInput.updateIndex(newIndex);
this.attachmentListRowRequiredInput.updateIndex(newIndex);
this.attachmentListRowRemoveButton.updateIndex(newIndex);
this.$legendCounter.text(newIndex + 1);
}
removeRow() {
this.attachmentList.removeRow(this.index);
this.deleteRow();
}
deleteRow() {
this.$row.remove();
}
toggleRemoveButtonVisibility(isShown) {
this.attachmentListRowRemoveButton.toggleVisibility(isShown);
}
isRowChecked() {
return this.attachmentListRowRequiredInput.isChecked();
}
}
class ComplianceCommunicationAttachmentListAddButton {
attachmentList;
$button;
$buttonCounter;
constructor(attachmentList, $button) {
this.attachmentList = attachmentList;
this.$button = $button;
this.$buttonCounter = $button.find('.dm-compliance-communication__attachments__js-remaining-counter');
}
init(numberOfRows) {
this.$button.on('click', () => {
this.attachmentList.addRow();
});
this.updateButtonText(this.attachmentList.maxNumberOfAttachments - numberOfRows);
}
updateButtonText(numberRemaining) {
this.$buttonCounter.text(numberRemaining);
}
toggleVisibility(isShown) {
this.$button.toggleClass('govuk-visually-hidden', !isShown);
if (isShown) {
this.$button.removeAttr('tabindex');
}
else {
this.$button.attr('tabindex', -1);
}
}
}
class ComplianceCommunicationAttachments {
static moduleName = 'dm-compliance-communication-attachments';
$attachmentList;
$attachmentListItems;
attachmentListRows;
attachmentListTemplateRow;
attachmentListAddButton;
maxNumberOfAttachments;
constructor($attachmentList) {
this.$attachmentList = $attachmentList;
this.$attachmentListItems = this.$attachmentList.find('.dm-compliance-communication__attachments-items');
this.attachmentListRows = this.$attachmentListItems.find('.dm-compliance-communication__attachments-item').get().map((row, index) => new ComplianceCommunicationAttachmentListRow(this, index, $(row)));
this.attachmentListTemplateRow = new ComplianceCommunicationAttachmentListRow(this, 99, this.$attachmentList.find('.dm-compliance-communication__attachments-item-template > .dm-compliance-communication__attachments-item'));
this.attachmentListAddButton = new ComplianceCommunicationAttachmentListAddButton(this, this.$attachmentList.find('.dm-compliance-communication__attachments-add'));
this.maxNumberOfAttachments = this.$attachmentList.data('maxNumberOfAttachments');
}
init() {
const rowsChecked = this.attachmentListRows.map((attachmentListRow) => attachmentListRow.isRowChecked());
let indexToDeleteFrom;
if (rowsChecked.every((rowChecked) => !rowChecked)) {
indexToDeleteFrom = 0;
}
else {
indexToDeleteFrom = rowsChecked.indexOf(false);
}
if (indexToDeleteFrom >= 0) {
this.attachmentListRows.slice(indexToDeleteFrom).forEach((attachmentListRow) => attachmentListRow.deleteRow());
this.attachmentListRows.splice(indexToDeleteFrom);
}
this.attachmentListAddButton.init(this.attachmentListRows.length);
this.attachmentListRows.forEach((attachmentListRow) => attachmentListRow.init());
this.attachmentListTemplateRow.attachmentListRowFileInput.resetHtml();
this.updateIfMinRows();
this.updateAttachmentButton();
}
removeRow(indexToRemove) {
this.attachmentListRows.splice(indexToRemove, 1);
this.attachmentListRows.slice(indexToRemove).forEach((attachmentListRow, index) => {
attachmentListRow.updateIndex(indexToRemove + index);
});
this.updateIfMinRows();
this.updateAttachmentButton();
if (indexToRemove > 0) {
this.focusOnRow(indexToRemove);
}
else {
this.attachmentListAddButton.$button.focus();
}
}
addRow() {
const numberOfRows = this.attachmentListRows.length;
if (numberOfRows < this.maxNumberOfAttachments) {
const $newRow = this.attachmentListTemplateRow.$row.clone();
const attachmentListRow = new ComplianceCommunicationAttachmentListRow(this, numberOfRows, $newRow);
attachmentListRow.updateIndex(numberOfRows);
this.attachmentListRows.push(attachmentListRow);
this.$attachmentListItems.append($newRow);
this.attachmentListRows[numberOfRows].init();
this.updateIfMinRows();
this.updateAttachmentButton();
this.focusOnRow(numberOfRows);
}
}
updateIfMinRows() {
if (this.attachmentListRows.length !== 0) {
this.attachmentListRows[0].toggleRemoveButtonVisibility(true);
}
}
updateAttachmentButton() {
if (this.attachmentListRows.length === this.maxNumberOfAttachments) {
this.attachmentListAddButton.toggleVisibility(false);
}
else {
this.attachmentListAddButton.toggleVisibility(true);
this.attachmentListAddButton.updateButtonText(this.maxNumberOfAttachments - this.attachmentListRows.length);
}
}
focusOnRow(targetIndexToFocus) {
const numberOfRows = this.attachmentListRows.length;
let indexToFocus = targetIndexToFocus;
if (targetIndexToFocus >= numberOfRows) {
indexToFocus = numberOfRows - 1;
}
this.attachmentListRows[indexToFocus].attachmentListRowFileInput.$button.focus();
}
}
export { ComplianceCommunicationAttachments };
//# sourceMappingURL=compliance-communication-attachments.mjs.map