mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-10 05:14:05 -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
124 lines
3.3 KiB
JavaScript
124 lines
3.3 KiB
JavaScript
(function(window) {
|
|
"use strict";
|
|
|
|
window.NotifyModules['fullscreen-table'] = function() {
|
|
|
|
this.start = function(component) {
|
|
|
|
this.$component = $(component);
|
|
this.$table = this.$component.find('table');
|
|
this.nativeHeight = this.$component.innerHeight() + 20; // 20px to allow room for scrollbar
|
|
this.topOffset = this.$component.offset().top;
|
|
|
|
this.insertShims();
|
|
this.maintainWidth();
|
|
this.maintainHeight();
|
|
this.toggleShadows();
|
|
|
|
$(window)
|
|
.on('scroll resize', this.maintainHeight)
|
|
.on('resize', this.maintainWidth);
|
|
|
|
this.$scrollableTable
|
|
.on('scroll', this.toggleShadows)
|
|
.on('scroll', this.maintainHeight)
|
|
|
|
if (
|
|
window.NotifyModules.stickAtBottomWhenScrolling &&
|
|
window.NotifyModules.stickAtBottomWhenScrolling.recalculate
|
|
) {
|
|
window.NotifyModules.stickAtBottomWhenScrolling.recalculate();
|
|
}
|
|
|
|
this.maintainWidth();
|
|
|
|
};
|
|
|
|
this.insertShims = () => {
|
|
|
|
const attributesForFocus = 'role aria-labelledby';
|
|
let captionId = this.$table.find('caption').text().toLowerCase().replace(/[^A-Za-z]+/g, '');
|
|
|
|
this.$table.find('caption').attr('id', captionId);
|
|
this.$table.wrap(`<div class="fullscreen-scrollable-table" role="region" aria-labelledby="${captionId}"/>`);
|
|
|
|
this.$component
|
|
.append(
|
|
this.$component.find('.fullscreen-scrollable-table')
|
|
.clone()
|
|
.addClass('fullscreen-fixed-table')
|
|
.removeClass('fullscreen-scrollable-table')
|
|
.removeAttr(attributesForFocus)
|
|
.attr('aria-hidden', true)
|
|
.find('caption')
|
|
.removeAttr('id')
|
|
.closest('.fullscreen-fixed-table')
|
|
)
|
|
.append(
|
|
'<div class="fullscreen-right-shadow" />'
|
|
)
|
|
.after(
|
|
$("<div class='fullscreen-shim'/>").css({
|
|
'height': this.nativeHeight,
|
|
'top': this.topOffset
|
|
})
|
|
)
|
|
.css('position', 'absolute');
|
|
|
|
this.$scrollableTable = this.$component.find('.fullscreen-scrollable-table');
|
|
this.$fixedTable = this.$component.find('.fullscreen-fixed-table');
|
|
|
|
};
|
|
|
|
this.maintainHeight = () => {
|
|
|
|
let height = Math.min(
|
|
$(window).height() - this.topOffset + $(window).scrollTop(),
|
|
this.nativeHeight
|
|
);
|
|
|
|
this.$scrollableTable.outerHeight(height);
|
|
this.$fixedTable.outerHeight(height);
|
|
|
|
};
|
|
|
|
this.maintainWidth = () => {
|
|
|
|
let indexColumnWidth = this.$fixedTable.find('.table-field-index').outerWidth();
|
|
|
|
this.$scrollableTable
|
|
.css({
|
|
'width': this.$component.parent('main').width() - indexColumnWidth,
|
|
'margin-left': indexColumnWidth
|
|
});
|
|
|
|
this.$fixedTable
|
|
.width(indexColumnWidth + 4);
|
|
|
|
};
|
|
|
|
this.toggleShadows = () => {
|
|
|
|
this.$fixedTable
|
|
.toggleClass(
|
|
'fullscreen-scrolled-table',
|
|
this.$scrollableTable.scrollLeft() > 0
|
|
);
|
|
|
|
this.$component.find('.fullscreen-right-shadow')
|
|
.toggleClass(
|
|
'visible',
|
|
this.$scrollableTable.scrollLeft() < (this.$table.width() - this.$scrollableTable.width())
|
|
);
|
|
|
|
setTimeout(
|
|
() => this.$component.find('.fullscreen-right-shadow').addClass('with-transition'),
|
|
3000
|
|
);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
})(window);
|