Merge pull request #686 from alphagov/no-jump-email

Stop page jumping on first load with a long email

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(`
-          <div class='toggle' tabindex='0'>...<span class='visually-hidden'>show full email</span></div>
-        `)
-        .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');
 
   };
 

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;
+}

app/templates/components/email-message.html

@@ -49,6 +49,7 @@
       <div class="email-message-body-wrapper">
       {{ body|nl2br }}
       </div>
+      <div class='toggle' tabindex='0'>...<span class='visually-hidden'>show full email</span></div>
     </div>
   </div>
 {% endmacro %}