mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-06 11:23:48 -05:00
66a33e4e47
A long email message needs to be collapsed to only show the first few lines. The problem is that we were doing this by adding a class with Javascript, meaning that the email wasn’t being collapsed until the script in the footer ran. This caused a jump in the page because the browser was painting the whole email message, then repainting it once it was collapsed. This commit takes advantage of the `.js-enabled` class added to the `<body>` by a script in the `<head>` of GOV.UK template. This means that the email message is collapsed with CSS before the first paint of the page, so no jump. This introduces some complexity in how we determine which emails get the expander toggle. Because they’re already collapsed we can’t get their height and work out if they’re long enough to need collapsing. So we need to take a copy of the message, put it off-screen, expand it, get its height, then remove it from the DOM. Bit of a faff. Because of this there’s still a quick flash of the toggle if you see an email message that’s too short to need collapsing. I think this is the lesser of two evils—very short email messages will be few and far between in the real world.
59 lines
1.2 KiB
JavaScript
59 lines
1.2 KiB
JavaScript
(function(Modules) {
|
|
"use strict";
|
|
|
|
Modules.ExpandCollapse = function() {
|
|
|
|
this.start = function(component) {
|
|
|
|
this.$component = $(component);
|
|
|
|
this.$toggle = this.$component.find('.toggle')
|
|
.on(
|
|
"click",
|
|
this.change
|
|
)
|
|
.on("keydown", this.filterKeyPresses([32, 13], this.change));
|
|
|
|
if (this.getNativeHeight() < this.$component.data('max-height')) {
|
|
this.change();
|
|
}
|
|
|
|
};
|
|
|
|
this.filterKeyPresses = (keys, callback) => function(event) {
|
|
|
|
if (keys.indexOf(event.keyCode)) return;
|
|
|
|
event.preventDefault();
|
|
callback();
|
|
|
|
};
|
|
|
|
this.getNativeHeight = function() {
|
|
|
|
var $copy = this.$component.clone().css({
|
|
'position': 'absolute',
|
|
'left': '9999px',
|
|
'width': this.$component.width(),
|
|
'font-size': this.$component.css('font-size'),
|
|
'line-height': this.$component.css('line-height')
|
|
}).addClass('expanded');
|
|
|
|
$('body').append($copy);
|
|
|
|
var nativeHeight = $copy.height();
|
|
|
|
$copy.remove();
|
|
|
|
return nativeHeight;
|
|
|
|
};
|
|
|
|
this.change = () => this.toggleCollapsed() && this.$toggle.remove();
|
|
|
|
this.toggleCollapsed = () => this.$component.addClass('expanded');
|
|
|
|
};
|
|
|
|
})(window.GOVUK.Modules);
|