darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-09 10:54:11 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add mixin & field to make collapsible checkboxes

Browse Source 
Allows checkboxes to be collapsed so they take up
less space in the page. The collapsed state
includes a live summary tracking which of them are
selected.

Includes changes to the JS for collapsible
checkboxes to make it work with the GOVUK
Checkboxes component HTML.
This commit is contained in:
Tom Byers
2020-04-23 12:12:55 +01:00
parent 7b288ea51a
commit 38ad2e7e86
2 changed files with 38 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/assets/javascripts/collapsibleCheckboxes.js
View File

@@ -5,7 +5,7 @@
function Summary (module) {
this.module = module;
this.$el = module.$formGroup.find('.selection-summary');
this.$el = module.$formGroup.find('.selection-summary').first();
this.fieldLabel = module.fieldLabel;
this.total = module.total;
this.addContent();
@@ -25,6 +25,7 @@
if (this.fieldLabel === 'folder') { this.$text.addClass('selection-summary__text--folders'); }
this.$el.append(this.$text);
this.module.$formGroup.find('.govuk-hint').remove();
};
Summary.prototype.update = function(selection) {
let template;
@@ -86,12 +87,13 @@
.focus();
};
CollapsibleCheckboxes.prototype.start = function(component) {
this.$formGroup = $(component);
this.$fieldset = this.$formGroup.find('fieldset');
this.$component = $(component);
this.$formGroup = this.$component.find('.govuk-form-group').first();
this.$fieldset = this.$formGroup.find('fieldset').first();
this.$checkboxes = this.$fieldset.find('input[type=checkbox]');
this.fieldLabel = this.$formGroup.data('fieldLabel');
this.fieldLabel = this.$component.data('fieldLabel');
this.total = this.$checkboxes.length;
this.legendText = this.$fieldset.find('legend').text().trim();
this.legendText = this.$fieldset.find('legend').first().text().trim();
this.expanded = false;
this.addHeadingHideLegend();
@@ -113,7 +115,7 @@
};
CollapsibleCheckboxes.prototype.getSelection = function() { return this.$checkboxes.filter(':checked').length; };
CollapsibleCheckboxes.prototype.addHeadingHideLegend = function() {
const headingLevel = this.$formGroup.data('heading-level') || '2';
const headingLevel = this.$component.data('heading-level') || '2';
this.$heading = $(`<h${headingLevel} class="heading-small">${this.legendText}</h${headingLevel}>`);
this.$fieldset.before(this.$heading);