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

Converted another js file

Browse Source
This commit is contained in:
Alex Janousek
2025-10-22 08:49:49 -04:00
parent d119ac9c18
commit 51c7587637
1 changed files with 78 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,7 @@
function Summary (module) { function Summary (module) {
this.module = module; this.module = module;
this.$el = module.$formGroup.find('.selection-summary').first(); this.el = module.formGroup.querySelector('.selection-summary');
this.fieldLabel = module.fieldLabel; this.fieldLabel = module.fieldLabel;
this.total = module.total; this.total = module.total;
this.addContent(); this.addContent();
@@ -20,14 +20,15 @@
}[field] || `No ${field}s`) }[field] || `No ${field}s`)
}; };
Summary.prototype.addContent = function() { Summary.prototype.addContent = function() {
const $hint = this.module.$formGroup.find('.usa-hint'); const hint = this.module.formGroup.querySelector('.usa-hint');
this.$text = $(`<p class="selection-summary__text" />`); this.text = document.createElement('p');
this.text.className = 'selection-summary__text';
if (this.fieldLabel === 'folder') { this.$text.addClass('selection-summary__text--folders'); } if (this.fieldLabel === 'folder') { this.text.classList.add('selection-summary__text--folders'); }
this.$el.attr('id', $hint.attr('id')); this.el.setAttribute('id', hint.getAttribute('id'));
this.$el.append(this.$text); this.el.appendChild(this.text);
$hint.remove(); hint.remove();
}; };
Summary.prototype.update = function(selection) { Summary.prototype.update = function(selection) {
let template; let template;
@@ -40,19 +41,19 @@
template = 'none'; template = 'none';
} }
this.$text.html(this.templates[template](selection, this.total, this.fieldLabel)); this.text.innerHTML = this.templates[template](selection, this.total, this.fieldLabel);
}; };
Summary.prototype.bindEvents = function () { Summary.prototype.bindEvents = function () {
// take summary out of tab order when focus moves // take summary out of tab order when focus moves
this.$el.on('blur', (e) => $(this).attr('tabindex', '-1')); this.el.addEventListener('blur', (e) => e.target.setAttribute('tabindex', '-1'));
}; };
function Footer (module) { function Footer (module) {
this.module = module; this.module = module;
this.fieldLabel = module.fieldLabel; this.fieldLabel = module.fieldLabel;
this.fieldsetId = module.$fieldset.attr('id'); this.fieldsetId = module.fieldset.getAttribute('id');
this.$el = this.getEl(this.module.expanded); this.el = this.getEl(this.module.expanded);
this.module.$formGroup.append(this.$el); this.module.formGroup.appendChild(this.el);
} }
Footer.prototype.buttonContent = { Footer.prototype.buttonContent = {
change: (fieldLabel) => `Choose ${fieldLabel}s`, change: (fieldLabel) => `Choose ${fieldLabel}s`,
@@ -63,37 +64,37 @@
const buttonContent = this.buttonContent[buttonState](this.fieldLabel); const buttonContent = this.buttonContent[buttonState](this.fieldLabel);
const stickyClass = expanded ? ' js-stick-at-bottom-when-scrolling' : ''; const stickyClass = expanded ? ' js-stick-at-bottom-when-scrolling' : '';
return $(`<div class="selection-footer${stickyClass} margin-top-2"> const div = document.createElement('div');
<button div.className = `selection-footer${stickyClass} margin-top-2`;
div.innerHTML = `<button
class="usa-button usa-button--outline selection-footer__button" class="usa-button usa-button--outline selection-footer__button"
aria-expanded="${expanded ? 'true' : 'false'}" aria-expanded="${expanded ? 'true' : 'false'}"
aria-controls="${this.fieldsetId}"> aria-controls="${this.fieldsetId}">
${buttonContent} ${buttonContent}
</button> </button>`;
</div>`); return div;
}; };
Footer.prototype.update = function (expanded) { Footer.prototype.update = function (expanded) {
this.$el.remove(); this.el.remove();
this.$el = this.getEl(expanded); this.el = this.getEl(expanded);
this.module.$formGroup.append(this.$el); this.module.formGroup.appendChild(this.el);
}; };
function CollapsibleCheckboxes () {} function CollapsibleCheckboxes () {}
CollapsibleCheckboxes.prototype._focusTextElement = ($el) => { CollapsibleCheckboxes.prototype._focusTextElement = (el) => {
$el el.setAttribute('tabindex', '-1');
.attr('tabindex', '-1') el.focus();
.focus();
}; };
CollapsibleCheckboxes.prototype.start = function(component) { CollapsibleCheckboxes.prototype.start = function(component) {
this.$component = $(component); this.component = component;
this.$formGroup = this.$component.find('.usa-form-group').first(); this.formGroup = component.querySelector('.usa-form-group');
this.$fieldset = this.$formGroup.find('fieldset').first(); this.fieldset = this.formGroup.querySelector('fieldset');
this.$checkboxes = this.$fieldset.find('input[type=checkbox]'); this.checkboxes = this.fieldset.querySelectorAll('input[type=checkbox]');
this.fieldLabel = this.$component.data('fieldLabel'); this.fieldLabel = component.dataset.fieldLabel;
this.total = this.$checkboxes.length; this.total = this.checkboxes.length;
this.legendText = this.$fieldset.find('legend').first().text().trim(); this.legendText = this.fieldset.querySelector('legend').textContent.trim();
this.expanded = false; this.expanded = false;
this.checkUncheckButtonsAdded = false; this.checkUncheckButtonsAdded = false;
@@ -103,71 +104,78 @@
this.footer = new Footer(this); this.footer = new Footer(this);
this.summary = new Summary(this); this.summary = new Summary(this);
this.$fieldset.before(this.summary.$el); this.fieldset.insertAdjacentElement('beforebegin', this.summary.el);
// add custom classes // add custom classes
this.$formGroup.addClass('selection-wrapper'); this.formGroup.classList.add('selection-wrapper');
this.$fieldset.addClass('selection-content'); this.fieldset.classList.add('selection-content');
// hide checkboxes // hide checkboxes
this.$fieldset.hide(); this.fieldset.style.display = 'none';
this.bindEvents(); this.bindEvents();
}; };
CollapsibleCheckboxes.prototype.getSelection = function() { return this.$checkboxes.filter(':checked').length; }; CollapsibleCheckboxes.prototype.getSelection = function() {
return Array.from(this.checkboxes).filter(cb => cb.checked).length;
};
CollapsibleCheckboxes.prototype.addHeadingHideLegend = function() { CollapsibleCheckboxes.prototype.addHeadingHideLegend = function() {
const headingLevel = this.$component.data('heading-level') || '2'; const headingLevel = this.component.dataset.headingLevel || '2';
this.$heading = $(`<h${headingLevel} class="heading-small"></h${headingLevel}>`); this.heading = document.createElement(`h${headingLevel}`);
this.$heading.text(this.legendText); this.heading.className = 'heading-small';
this.$fieldset.before(this.$heading); this.heading.textContent = this.legendText;
this.fieldset.insertAdjacentElement('beforebegin', this.heading);
this.$fieldset.find('legend').addClass('usa-sr-only'); this.fieldset.querySelector('legend').classList.add('usa-sr-only');
}; };
CollapsibleCheckboxes.prototype.addCheckUncheckAllButtons = function() { CollapsibleCheckboxes.prototype.addCheckUncheckAllButtons = function() {
const $buttonsContainer = $('<div class="check-uncheck-all-buttons margin-bottom-2"></div>'); const buttonsContainer = document.createElement('div');
buttonsContainer.className = 'check-uncheck-all-buttons margin-bottom-2';
this.$toggleAllButton = $('<button type="button" class="usa-button usa-button--outline usa-button--small">Select all</button>'); this.toggleAllButton = document.createElement('button');
this.toggleAllButton.type = 'button';
this.toggleAllButton.className = 'usa-button usa-button--outline usa-button--small';
this.toggleAllButton.textContent = 'Select all';
$buttonsContainer.append(this.$toggleAllButton); buttonsContainer.appendChild(this.toggleAllButton);
this.summary.$el.after($buttonsContainer); this.summary.el.insertAdjacentElement('afterend', buttonsContainer);
this.$toggleAllButton.on('click', this.toggleAll.bind(this)); this.toggleAllButton.addEventListener('click', this.toggleAll.bind(this));
this.updateToggleButtonText(); this.updateToggleButtonText();
}; };
CollapsibleCheckboxes.prototype.toggleAll = function(e) { CollapsibleCheckboxes.prototype.toggleAll = function(e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
const allChecked = this.$checkboxes.filter(':checked').length === this.$checkboxes.length; const allChecked = Array.from(this.checkboxes).filter(cb => cb.checked).length === this.checkboxes.length;
if (allChecked) { if (allChecked) {
this.$checkboxes.prop('checked', false); this.checkboxes.forEach(cb => cb.checked = false);
} else { } else {
this.$checkboxes.prop('checked', true); this.checkboxes.forEach(cb => cb.checked = true);
} }
this.handleSelection(); this.handleSelection();
this.updateToggleButtonText(); this.updateToggleButtonText();
}; };
CollapsibleCheckboxes.prototype.updateToggleButtonText = function() { CollapsibleCheckboxes.prototype.updateToggleButtonText = function() {
if (!this.$toggleAllButton) return; if (!this.toggleAllButton) return;
const checkedCount = this.$checkboxes.filter(':checked').length; const checkedCount = Array.from(this.checkboxes).filter(cb => cb.checked).length;
const allChecked = checkedCount === this.$checkboxes.length; const allChecked = checkedCount === this.checkboxes.length;
if (allChecked) { if (allChecked) {
this.$toggleAllButton.text('Deselect all'); this.toggleAllButton.textContent = 'Deselect all';
} else { } else {
this.$toggleAllButton.text('Select all'); this.toggleAllButton.textContent = 'Select all';
} }
}; };
CollapsibleCheckboxes.prototype.expand = function(e) { CollapsibleCheckboxes.prototype.expand = function(e) {
if (e !== undefined) { e.preventDefault(); } if (e !== undefined) { e.preventDefault(); }
if (!this.expanded) { if (!this.expanded) {
this.$fieldset.show(); this.fieldset.style.display = '';
this.expanded = true; this.expanded = true;
this.summary.update(this.getSelection()); this.summary.update(this.getSelection());
this.footer.update(this.expanded); this.footer.update(this.expanded);
@@ -176,31 +184,31 @@
this.addCheckUncheckAllButtons(); this.addCheckUncheckAllButtons();
this.checkUncheckButtonsAdded = true; this.checkUncheckButtonsAdded = true;
} else { } else {
if (this.$toggleAllButton) { if (this.toggleAllButton) {
this.$toggleAllButton.parent().show(); this.toggleAllButton.parentElement.style.display = '';
} }
} }
} }
// shift focus whether expanded or not // shift focus whether expanded or not
this._focusTextElement(this.$fieldset); this._focusTextElement(this.fieldset);
}; };
CollapsibleCheckboxes.prototype.collapse = function(e) { CollapsibleCheckboxes.prototype.collapse = function(e) {
if (e !== undefined) { e.preventDefault(); } if (e !== undefined) { e.preventDefault(); }
if (this.expanded) { if (this.expanded) {
this.$fieldset.hide(); this.fieldset.style.display = 'none';
this.expanded = false; this.expanded = false;
this.summary.update(this.getSelection()); this.summary.update(this.getSelection());
this.footer.update(this.expanded); this.footer.update(this.expanded);
if (this.$toggleAllButton) { if (this.toggleAllButton) {
this.$toggleAllButton.parent().hide(); this.toggleAllButton.parentElement.style.display = 'none';
} }
} }
// shift focus whether expanded or not // shift focus whether expanded or not
this._focusTextElement(this.summary.$text); this._focusTextElement(this.summary.text);
}; };
CollapsibleCheckboxes.prototype.handleClick = function(e) { CollapsibleCheckboxes.prototype.handleClick = function(e) {
if (this.expanded) { if (this.expanded) {
@@ -216,8 +224,15 @@
CollapsibleCheckboxes.prototype.bindEvents = function() { CollapsibleCheckboxes.prototype.bindEvents = function() {
const self = this; const self = this;
this.$formGroup.on('click', '.usa-button', this.handleClick.bind(this)); this.formGroup.addEventListener('click', (e) => {
this.$checkboxes.on('click', this.handleSelection.bind(this)); if (e.target.closest('.usa-button')) {
this.handleClick.call(this, e);
}
});
this.checkboxes.forEach(cb => {
cb.addEventListener('click', this.handleSelection.bind(this));
});
this.summary.bindEvents(this); this.summary.bindEvents(this);
}; };