darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2025-12-10 07:03:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

PR changes

Browse Source
This commit is contained in:
Alex Janousek
2025-10-28 17:42:25 -04:00
parent c273d5dd6f
commit 3ec039cdf7
4 changed files with 63 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,6 @@
(function (window) {
"use strict";
const USWDS = window.USWDS || {};
function Summary (module) {
this.module = module;
this.el = module.formGroup.querySelector('.selection-summary');
@@ -26,9 +24,11 @@
if (this.fieldLabel === 'folder') { this.text.classList.add('selection-summary__text--folders'); }
this.el.setAttribute('id', hint.getAttribute('id'));
if (hint) {
this.el.setAttribute('id', hint.getAttribute('id'));
hint.remove();
}
this.el.appendChild(this.text);
hint.remove();
};
Summary.prototype.update = function(selection) {
let template;
@@ -222,8 +222,6 @@
this.updateToggleButtonText();
};
CollapsibleCheckboxes.prototype.bindEvents = function() {
const self = this;
this.formGroup.addEventListener('click', (e) => {
if (e.target.closest('.usa-button')) {
this.handleClick.call(this, e);

32
app/assets/javascripts/radioSelect.js
View File

@@ -4,6 +4,16 @@
var Modules = window.NotifyModules;
const escapeHtml = (unsafe) => {
if (!unsafe) return '';
return String(unsafe)
.replace(/&/g, "&")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
};
// Template functions for rendering component states
let renderStates = {
'initial': function(data) {
@@ -11,14 +21,14 @@
${data.showNowAsDefault ? `
<div class="radio-select__column margin-y-2">
<div class="usa-radio">
<input class="usa-radio__input" checked="checked" id="${data.name}-0" name="${data.name}" type="radio" value="">
<label class="usa-radio__label" for="${data.name}-0">Now</label>
<input class="usa-radio__input" checked="checked" id="${escapeHtml(data.name)}-0" name="${escapeHtml(data.name)}" type="radio" value="">
<label class="usa-radio__label" for="${escapeHtml(data.name)}-0">Now</label>
</div>
</div>
` : ''}
<div class="radio-select__column margin-y-2">
${data.categories.map(category =>
`<input type='button' class='usa-button usa-button--outline radio-select__button--category' aria-expanded="false" value='${category}' />`
`<input type='button' class='usa-button usa-button--outline radio-select__button--category' aria-expanded="false" value='${escapeHtml(category)}' />`
).join('')}
</div>
`;
@@ -28,16 +38,16 @@
${data.showNowAsDefault ? `
<div class="radio-select__column margin-y-2">
<div class="usa-radio">
<input class="usa-radio__input" checked="checked" id="${data.name}-0" name="${data.name}" type="radio" value="">
<label class="usa-radio__label" for="${data.name}-0">Now</label>
<input class="usa-radio__input" checked="checked" id="${escapeHtml(data.name)}-0" name="${escapeHtml(data.name)}" type="radio" value="">
<label class="usa-radio__label" for="${escapeHtml(data.name)}-0">Now</label>
</div>
</div>
` : ''}
<div class="radio-select__column margin-y-2">
${data.choices.map(choice => `
<div class="usa-radio js-option">
<input class="usa-radio__input" type="radio" value="${choice.value}" id="${choice.id}" name="${data.name}" />
<label class="usa-radio__label" for="${choice.id}">${choice.label}</label>
<input class="usa-radio__input" type="radio" value="${escapeHtml(choice.value)}" id="${escapeHtml(choice.id)}" name="${escapeHtml(data.name)}" />
<label class="usa-radio__label" for="${escapeHtml(choice.id)}">${escapeHtml(choice.label)}</label>
</div>
`).join('')}
<input type='button' class='usa-button usa-button--outline radio-select__button--done margin-top-4' aria-expanded='true' value='Back to select a new time' />
@@ -49,16 +59,16 @@
${data.showNowAsDefault ? `
<div class="radio-select__column margin-y-2">
<div class="usa-radio">
<input class="usa-radio__input" id="${data.name}-0" name="${data.name}" type="radio" value="">
<label class="usa-radio__label" for="${data.name}-0">Now</label>
<input class="usa-radio__input" id="${escapeHtml(data.name)}-0" name="${escapeHtml(data.name)}" type="radio" value="">
<label class="usa-radio__label" for="${escapeHtml(data.name)}-0">Now</label>
</div>
</div>
` : ''}
<div class="radio-select__column margin-y-2">
${data.choices.map(choice => `
<div class="usa-radio">
<input class="usa-radio__input" checked="checked" type="radio" value="${choice.value}" id="${choice.id}" name="${data.name}" />
<label class="usa-radio__label" for="${choice.id}">${choice.label}</label>
<input class="usa-radio__input" checked="checked" type="radio" value="${escapeHtml(choice.value)}" id="${escapeHtml(choice.id)}" name="${escapeHtml(data.name)}" />
<label class="usa-radio__label" for="${escapeHtml(choice.id)}">${escapeHtml(choice.label)}</label>
</div>
`).join('')}
</div>