darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-22 08:58:46 -04: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

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>