digitalmarketplace-frontend
Version:
Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects
200 lines (196 loc) • 9.1 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 QuestionCheckboxTreeSummary {
$totalSelected;
$totalSelectedText;
itemNameSingular;
itemNamePlural;
constructor($summary, itemNameSingular, itemNamePlural) {
this.$totalSelected = $summary.find('.dm-checkbox-tree__summary-total-selected');
this.$totalSelectedText = $summary.find('.dm-checkbox-tree__summary-total-selected-text');
this.itemNameSingular = itemNameSingular;
this.itemNamePlural = itemNamePlural;
}
updateSelectedCount = (numberSelected) => {
this.$totalSelected.text(numberSelected);
if (numberSelected === 1) {
this.$totalSelectedText.text(`${this.itemNameSingular} selected.`);
}
else {
this.$totalSelectedText.text(`${this.itemNamePlural} selected.`);
}
};
}
class QuestionCheckboxTreeSection {
checkboxTree;
$section;
$summaryTag;
$summaryTagCount;
tier;
checkboxTreeSections;
checkboxes;
isParent;
constructor(checkboxTree, $section, tier) {
this.checkboxTree = checkboxTree;
this.$section = $section;
this.tier = tier;
this.$summaryTag = this.$section.find('> .dm-checkbox-tree-details__summary .govuk-tag');
this.$summaryTagCount = this.$summaryTag.find('.dm-checkbox-tree-details__summary-text-count-selected');
this.checkboxTreeSections = this.$section.find('> .dm-checkbox-tree-details__text > .dm-checkbox-tree-details').get().map((element) => new QuestionCheckboxTreeSection(this.checkboxTree, $(element), tier + 1));
this.checkboxes = this.$section.find(`${this.$section.prop('tagName') === 'DETAILS' ? '> .dm-checkbox-tree-details__text > .govuk-form-group > .govuk-checkboxes > .govuk-checkboxes__item > ' : ''}.govuk-checkboxes__input`).get().map((element) => $(element));
this.isParent = this.checkboxTreeSections.length > 0;
}
init = () => {
this.openSectionIfSelected();
if (this.isParent) {
this.checkboxTreeSections.forEach((checkboxTreeSection) => checkboxTreeSection.init());
}
else {
this.checkboxes.forEach(($checkbox) => {
$checkbox.on('click', () => {
this.checkboxTree.updateTotals($checkbox.val(), $checkbox.is(':checked'));
});
});
}
};
selectedItems = () => {
return this.checkboxes.filter(($checkbox) => $checkbox.is(':checked'));
};
openSectionIfSelected = () => {
if (this.countSelected() > 0 && this.$section.attr('open') !== 'open') {
this.$section.attr('open', 'open');
}
};
countSelected = () => {
if (this.isParent) {
return this.checkboxTreeSections.reduce((total, checkboxTreeSection) => total + checkboxTreeSection.countSelected(), 0);
}
else {
return this.selectedItems().length;
}
};
slectedItemValues = () => {
if (this.isParent) {
return this.checkboxTreeSections.map((checkboxTreeSection) => checkboxTreeSection.slectedItemValues()).flat();
}
else {
return this.selectedItems().map(($checkbox) => $checkbox.val());
}
};
updateSelectedCount = () => {
const numberSelected = this.countSelected();
if (numberSelected > 0) {
this.$summaryTagCount.text(numberSelected);
this.$summaryTag.toggleClass('govuk-visually-hidden', false);
}
else {
this.$summaryTag.toggleClass('govuk-visually-hidden', true);
this.$summaryTagCount.text('');
}
if (this.isParent) {
this.checkboxTreeSections.forEach((checkboxTreeSection) => checkboxTreeSection.updateSelectedCount());
}
};
updateSectionLocks = (fromTier) => {
if (this.countSelected()) {
if (this.tier === fromTier) {
this.checkboxTreeSections.forEach((checkboxTreeSection) => checkboxTreeSection.toggleSectionLock(false));
}
else {
this.checkboxTreeSections.forEach((checkboxTreeSection) => checkboxTreeSection.updateSectionLocks(fromTier));
}
}
else {
this.toggleSectionLock(true);
}
};
toggleSectionLock = (isLocked) => {
if (this.isParent) {
this.checkboxTreeSections.forEach((checkboxTreeSection) => checkboxTreeSection.toggleSectionLock(isLocked));
}
else {
this.checkboxes.forEach((checkbox) => checkbox.prop('disabled', isLocked));
}
if (isLocked) {
this.$section.attr('disabled', 'disabled');
this.$section.attr('tabIndex', -1);
this.$section.removeAttr('open');
}
else {
this.$section.removeAttr('disabled');
this.$section.removeAttr('tabIndex');
}
};
toggleCheckbox = (value, isChecked) => {
if (this.isParent) {
this.checkboxTreeSections.forEach((checkboxTreeSection) => checkboxTreeSection.toggleCheckbox(value, isChecked));
}
else {
this.checkboxes.forEach(($checkbox) => {
if ($checkbox.val() === value) {
$checkbox.prop('checked', isChecked);
}
});
}
};
}
class QuestionCheckboxTree {
static moduleName = 'dm-question-checkbox-tree';
$checkboxTree;
checkboxTreeSummary;
checkboxTreeSections;
tierLimit;
currentCount = 0;
constructor($checkboxTree) {
this.$checkboxTree = $checkboxTree;
this.checkboxTreeSummary = new QuestionCheckboxTreeSummary(this.$checkboxTree.find('.dm-checkbox-tree__summary'), this.$checkboxTree.data('itemNameSingular'), this.$checkboxTree.data('itemNamePlural'));
this.tierLimit = this.$checkboxTree.data('tierRestriction') || 0;
const checkboxTreeSections = this.$checkboxTree.find('.dm-checkbox-tree__options > .dm-checkbox-tree-details').get().map((element) => new QuestionCheckboxTreeSection(this, $(element), 1));
if (checkboxTreeSections.length) {
this.checkboxTreeSections = checkboxTreeSections;
}
else {
this.checkboxTreeSections = [new QuestionCheckboxTreeSection(this, $('.dm-checkbox-tree__options'), 1)];
}
}
init = () => {
this.checkboxTreeSections.forEach((checkboxTreeSection) => checkboxTreeSection.init());
this.updateCheckboxTreeSummaryCount();
this.updateCheckboxTreeSectionSelectedCounts();
this.updateSectionLocks();
};
countSelected = () => {
return new Set(this.checkboxTreeSections.map((checkboxTreeSection) => checkboxTreeSection.slectedItemValues()).flat()).size;
};
updateCheckboxTreeSummaryCount = () => {
this.currentCount = this.countSelected();
this.checkboxTreeSummary.updateSelectedCount(this.currentCount);
};
updateCheckboxTreeSectionSelectedCounts = () => {
this.checkboxTreeSections.forEach((checkboxTreeSection) => checkboxTreeSection.updateSelectedCount());
};
updateSectionLocks = () => {
if (!this.tierLimit)
return;
this.checkboxTreeSections.forEach((checkboxTreeSection) => {
if (this.currentCount === 0) {
checkboxTreeSection.toggleSectionLock(false);
}
else {
checkboxTreeSection.updateSectionLocks(this.tierLimit);
}
});
};
updateTotals = (value, isChecked) => {
this.checkboxTreeSections.forEach((checkboxTreeSection) => checkboxTreeSection.toggleCheckbox(value, isChecked));
this.updateCheckboxTreeSummaryCount();
this.updateCheckboxTreeSectionSelectedCounts();
this.updateSectionLocks();
};
}
exports.QuestionCheckboxTree = QuestionCheckboxTree;
}));
//# sourceMappingURL=question-checkbox-tree.bundle.js.map