|
63 | 63 | const buttonContent = this.buttonContent[buttonState](this.fieldLabel); |
64 | 64 | const stickyClass = expanded ? ' js-stick-at-bottom-when-scrolling' : ''; |
65 | 65 |
|
66 | | - return $(`<div class="selection-footer${stickyClass}"> |
| 66 | + return $(`<div class="selection-footer${stickyClass} margin-top-2"> |
67 | 67 | <button |
68 | 68 | class="govuk-button govuk-button--secondary selection-footer__button usa-button usa-button--outline" |
69 | 69 | aria-expanded="${expanded ? 'true' : 'false'}" |
|
78 | 78 |
|
79 | 79 | this.module.$formGroup.append(this.$el); |
80 | 80 |
|
81 | | - // make footer sticky if expanded, clear up from it being sticky if not |
82 | | - GOVUK.stickAtBottomWhenScrolling.recalculate(); |
83 | 81 | }; |
84 | 82 |
|
85 | 83 | function CollapsibleCheckboxes () {} |
|
97 | 95 | this.total = this.$checkboxes.length; |
98 | 96 | this.legendText = this.$fieldset.find('legend').first().text().trim(); |
99 | 97 | this.expanded = false; |
| 98 | + this.checkUncheckButtonsAdded = false; |
100 | 99 |
|
101 | 100 | this.addHeadingHideLegend(); |
102 | 101 |
|
|
124 | 123 |
|
125 | 124 | this.$fieldset.find('legend').addClass('usa-sr-only'); |
126 | 125 | }; |
| 126 | + CollapsibleCheckboxes.prototype.addCheckUncheckAllButtons = function() { |
| 127 | + const $buttonsContainer = $('<div class="check-uncheck-all-buttons margin-bottom-2"></div>'); |
| 128 | + |
| 129 | + this.$toggleAllButton = $('<button type="button" class="usa-button usa-button--outline usa-button--small">Select all</button>'); |
| 130 | + |
| 131 | + $buttonsContainer.append(this.$toggleAllButton); |
| 132 | + |
| 133 | + this.summary.$el.after($buttonsContainer); |
| 134 | + |
| 135 | + this.$toggleAllButton.on('click', this.toggleAll.bind(this)); |
| 136 | + |
| 137 | + this.updateToggleButtonText(); |
| 138 | + }; |
| 139 | + CollapsibleCheckboxes.prototype.toggleAll = function(e) { |
| 140 | + e.preventDefault(); |
| 141 | + const allChecked = this.$checkboxes.filter(':checked').length === this.$checkboxes.length; |
| 142 | + |
| 143 | + if (allChecked) { |
| 144 | + this.$checkboxes.prop('checked', false); |
| 145 | + } else { |
| 146 | + this.$checkboxes.prop('checked', true); |
| 147 | + } |
| 148 | + |
| 149 | + this.handleSelection(); |
| 150 | + this.updateToggleButtonText(); |
| 151 | + }; |
| 152 | + CollapsibleCheckboxes.prototype.updateToggleButtonText = function() { |
| 153 | + if (!this.$toggleAllButton) return; |
| 154 | + |
| 155 | + const checkedCount = this.$checkboxes.filter(':checked').length; |
| 156 | + const allChecked = checkedCount === this.$checkboxes.length; |
| 157 | + |
| 158 | + if (allChecked) { |
| 159 | + this.$toggleAllButton.text('Deselect all'); |
| 160 | + } else { |
| 161 | + this.$toggleAllButton.text('Select all'); |
| 162 | + } |
| 163 | + }; |
127 | 164 | CollapsibleCheckboxes.prototype.expand = function(e) { |
128 | 165 | if (e !== undefined) { e.preventDefault(); } |
129 | 166 |
|
|
132 | 169 | this.expanded = true; |
133 | 170 | this.summary.update(this.getSelection()); |
134 | 171 | this.footer.update(this.expanded); |
| 172 | + |
| 173 | + if (!this.checkUncheckButtonsAdded) { |
| 174 | + this.addCheckUncheckAllButtons(); |
| 175 | + this.checkUncheckButtonsAdded = true; |
| 176 | + } else { |
| 177 | + if (this.$toggleAllButton) { |
| 178 | + this.$toggleAllButton.parent().show(); |
| 179 | + } |
| 180 | + } |
135 | 181 | } |
136 | 182 |
|
137 | 183 | // shift focus whether expanded or not |
|
145 | 191 | this.expanded = false; |
146 | 192 | this.summary.update(this.getSelection()); |
147 | 193 | this.footer.update(this.expanded); |
| 194 | + |
| 195 | + if (this.$toggleAllButton) { |
| 196 | + this.$toggleAllButton.parent().hide(); |
| 197 | + } |
148 | 198 | } |
149 | 199 |
|
150 | 200 | // shift focus whether expanded or not |
|
159 | 209 | }; |
160 | 210 | CollapsibleCheckboxes.prototype.handleSelection = function(e) { |
161 | 211 | this.summary.update(this.getSelection(), this.total, this.fieldLabel); |
| 212 | + this.updateToggleButtonText(); |
162 | 213 | }; |
163 | 214 | CollapsibleCheckboxes.prototype.bindEvents = function() { |
164 | 215 | const self = this; |
|
0 commit comments