From 66a33e4e4761271746e19ab4e9d688206f093524 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Tue, 14 Jun 2016 15:19:31 +0100 Subject: [PATCH] Stop page jumping on first load with a long email MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 `` by a script in the `` 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. --- app/assets/javascripts/expandCollapse.js | 34 ++++++++++++++----- .../stylesheets/components/email-message.scss | 16 +++++++-- app/templates/components/email-message.html | 1 + 3 files changed, 40 insertions(+), 11 deletions(-) diff --git a/app/assets/javascripts/expandCollapse.js b/app/assets/javascripts/expandCollapse.js index a624b3605..396747d4c 100644 --- a/app/assets/javascripts/expandCollapse.js +++ b/app/assets/javascripts/expandCollapse.js @@ -7,14 +7,6 @@ this.$component = $(component); - if (this.$component.height() < this.$component.data('max-height')) return; - - this.$component - .append(` -
...
- `) - .addClass('collapsed'); - this.$toggle = this.$component.find('.toggle') .on( "click", @@ -22,6 +14,10 @@ ) .on("keydown", this.filterKeyPresses([32, 13], this.change)); + if (this.getNativeHeight() < this.$component.data('max-height')) { + this.change(); + } + }; this.filterKeyPresses = (keys, callback) => function(event) { @@ -33,9 +29,29 @@ }; + 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.removeClass('collapsed'); + this.toggleCollapsed = () => this.$component.addClass('expanded'); }; diff --git a/app/assets/stylesheets/components/email-message.scss b/app/assets/stylesheets/components/email-message.scss index 53230bb62..d3dbbfde4 100644 --- a/app/assets/stylesheets/components/email-message.scss +++ b/app/assets/stylesheets/components/email-message.scss @@ -47,20 +47,24 @@ $button-bottom-border-colour: rgba(0, 0, 0, 0.17); &-wrapper { - .collapsed & { + .js-enabled & { max-height: 92px; overflow: hidden; } + .js-enabled .expanded & { + max-height: none; + } + } .toggle { + display: none; position: absolute; left: 50%; bottom: -18px; height: 27px; - display: inline-block; padding: 0; margin: 0 0 0 -30px; line-height: 12px; @@ -93,3 +97,11 @@ $button-bottom-border-colour: rgba(0, 0, 0, 0.17); } } + +.js-enabled .toggle { + display: inline-block; +} + +.js-enabled .expanded .toggle { + display: none; +} diff --git a/app/templates/components/email-message.html b/app/templates/components/email-message.html index 51a1cffae..8543fae86 100644 --- a/app/templates/components/email-message.html +++ b/app/templates/components/email-message.html @@ -49,6 +49,7 @@
{{ body|nl2br }}
+
...
{% endmacro %}