mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-08 04:13:41 -05:00
6f5750f095
* Removed all govuk css * Updated reference files * Removing govuk js * Fixed casing for modules, removed unused page * Got more reference images * Updated template page * Removed govuk padding util * Updated hint to uswds hint * More govuk cleanup * Commiting backstopjs ref files * Fixed all unit tests that broke due to brittleness around govuk styling * Added new ref images * Final removal of govuk * Officially removed all govuk references * Updated reference file * Updated link to button * UI modernization * Cleanup * removed govuk escaping tests since they are no longer needed * Fix CodeQL security issue in escapeElementName function - Escape backslashes first before other special characters - Prevents potential double-escaping vulnerability - Addresses CodeQL alert about improper string escaping * Found more govuk removal. Fixed unit tests * Add missing pipeline check to pre-commit * updated test * Updated e2e test * More update to e2e test * Fixed another e2e test * Simple PR comments addressed * More updates * Updated backstop ref files * Refactored folder selection for non-admins * Updated redundant line * Updated tests to include correct mocks * Added more ref files * Addressing carlos comments * Addressing Carlo comments, cleanup of window initing * More cleanup and addressing carlo comments * Fixing a11 scan * Fixed a few issues with javascript * Fixed for pr * Fixing e2e tests * Tweaking e2e test * Added more ref files and cleaned up urls.js * Fixed bug with creating new template * Removed brittle test - addressed code ql comment * e2e race condition fix * More e2e test fixes * Updated e2e tests to not wait for text sent * Updated test to not wait for button click response * Made tear down more resilent if staging is down * reverted e2e test to what was working before main merge * Updated backstopRef images * Updated gulp to include job-polling differently
89 lines
2.1 KiB
JavaScript
89 lines
2.1 KiB
JavaScript
(function(window) {
|
|
"use strict";
|
|
|
|
if (
|
|
!('oninput' in document.createElement('input'))
|
|
) return;
|
|
|
|
const tagPattern = /\(\(([^\)\((\?)]+)(\?\?)?([^\)\(]*)\)\)/g;
|
|
|
|
window.NotifyModules['enhanced-textbox'] = function() {
|
|
|
|
this.start = function(element) {
|
|
|
|
let textarea = $(element);
|
|
let visibleTextbox;
|
|
|
|
this.highlightPlaceholders = (
|
|
typeof textarea.data('highlightPlaceholders') === 'undefined' ||
|
|
!!textarea.data('highlightPlaceholders')
|
|
);
|
|
|
|
this.$textbox = textarea
|
|
.wrap(`
|
|
<div class='textbox-highlight-wrapper' />
|
|
`)
|
|
.after(this.$background = $(`
|
|
<div class="textbox-highlight-background" aria-hidden="true" />
|
|
`))
|
|
.on("input", this.update);
|
|
|
|
$(window).on("resize", this.resize);
|
|
|
|
visibleTextbox = this.$textbox.clone().appendTo("body").css({
|
|
position: 'absolute',
|
|
visibility: 'hidden',
|
|
display: 'block'
|
|
});
|
|
this.initialHeight = visibleTextbox.height();
|
|
|
|
this.$background.css({
|
|
'border-width': this.$textbox.css('border-width')
|
|
});
|
|
|
|
visibleTextbox.remove();
|
|
|
|
this.$textbox
|
|
.trigger("input");
|
|
|
|
};
|
|
|
|
this.resize = () => {
|
|
|
|
this.$background.width(this.$textbox.width());
|
|
|
|
this.$textbox.height(
|
|
Math.max(
|
|
this.initialHeight,
|
|
this.$background.outerHeight()
|
|
)
|
|
);
|
|
|
|
if ('stickAtBottomWhenScrolling' in window.NotifyModules) {
|
|
window.NotifyModules.stickAtBottomWhenScrolling.recalculate();
|
|
}
|
|
|
|
};
|
|
|
|
this.contentEscaped = () => $('<div/>').text(this.$textbox.val()).html();
|
|
|
|
this.contentReplaced = () => this.contentEscaped().replace(
|
|
tagPattern, (match, name, separator, value) => value && separator ?
|
|
`<span class='placeholder-conditional'>((${name}??</span>${value}))` :
|
|
`<span class='placeholder'>((${name}${value}))</span>`
|
|
);
|
|
|
|
this.update = () => {
|
|
|
|
this.$background.html(
|
|
this.highlightPlaceholders ? this.contentReplaced() : this.contentEscaped()
|
|
);
|
|
|
|
this.resize();
|
|
|
|
};
|
|
|
|
};
|
|
|
|
})(window);
|