mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-06 11:23:48 -05:00
92626c3f41
This module creates a clone of the existing table as an extra layer which sits on top of it. This allows the row headers to sit above the table content when it scrolls. We were setting `role=presentation` on the extra table to hide it from assistive technologies. It seems that this wasn't working. From the spec' `role-presentation` should remove the semantics of the table but leave the content. Testing in Safari, with the OSX Accessibility Inspector, this isn't happening and the table is still being reported as a table by the accessibility API. This changes to the `aria-hidden` attribute, to make sure the extra table is ignored.
116 lines
2.9 KiB
JavaScript
116 lines
2.9 KiB
JavaScript
(function(Modules) {
|
|
"use strict";
|
|
|
|
Modules.FullscreenTable = 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.GOVUK.stickAtBottomWhenScrolling &&
|
|
window.GOVUK.stickAtBottomWhenScrolling.recalculate
|
|
) {
|
|
window.GOVUK.stickAtBottomWhenScrolling.recalculate();
|
|
}
|
|
|
|
this.maintainWidth();
|
|
|
|
};
|
|
|
|
this.insertShims = () => {
|
|
|
|
this.$table.wrap('<div class="fullscreen-scrollable-table"/>');
|
|
|
|
this.$component
|
|
.append(
|
|
this.$component.find('.fullscreen-scrollable-table')
|
|
.clone()
|
|
.addClass('fullscreen-fixed-table')
|
|
.removeClass('fullscreen-scrollable-table')
|
|
.attr('aria-hidden', true)
|
|
)
|
|
.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 + $('html, body').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.GOVUK.Modules);
|