From d0ce4d07a34ee396b1c65a07f0ea4bb838e270dc Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 16 Oct 2019 14:35:18 +0100
Subject: [PATCH] Autosize textboxes w/out highlighting placeholders
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Scrolling within textareas on the page is a bit grim. Which is why we
don’t do it for the textboxes that people use to edit templates.

This commit will allow us to extend the auto-resizing of `<textarea>`s
to those which don’t need the highlighting of placeholders.

The code is still quite coupled to the placeholder highlighting code,
because both work by copying the content of the `<textarea>` into a
`<div>` that underlaps the textbox. This `<div>` is used for both
rendering the placeholder highlights, and calculating the natural height
of the content. So it would be hard/confusing to split the two bits of
code into separate modules.
---
 app/assets/javascripts/highlightTags.js | 41 +++++++++++++++++------
 app/templates/components/textbox.html   |  4 ++-
 tests/javascripts/highlightTags.test.js | 44 +++++++++++++++++++++++++
 3 files changed, 78 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/highlightTags.js b/app/assets/javascripts/highlightTags.js
index bc533d4b7..3658c94c4 100644
--- a/app/assets/javascripts/highlightTags.js
+++ b/app/assets/javascripts/highlightTags.js
@@ -11,6 +11,13 @@
 
     this.start = function(textarea) {
 
+      let visibleTextbox;
+
+      this.highlightPlaceholders = (
+        typeof textarea.data('highlightPlaceholders') === 'undefined' ||
+        !!textarea.data('highlightPlaceholders')
+      );
+
       this.$textbox = $(textarea)
         .wrap(`
           <div class='textbox-highlight-wrapper' />
@@ -20,13 +27,19 @@
         `))
         .on("input", this.update);
 
-      this.initialHeight = this.$textbox.height();
+      visibleTextbox = this.$textbox.clone().appendTo("body").css({
+        position: 'absolute',
+        visibility: 'hidden',
+        display: 'block'
+      });
+      this.initialHeight = visibleTextbox.height();
 
       this.$background.css({
-        'width': this.$textbox.outerWidth(),
         'border-width': this.$textbox.css('border-width')
       });
 
+      visibleTextbox.remove();
+
       this.$textbox
         .trigger("input");
 
@@ -34,6 +47,8 @@
 
     this.resize = () => {
 
+      this.$background.width(this.$textbox.outerWidth());
+
       this.$textbox.height(
         Math.max(
           this.initialHeight,
@@ -47,17 +62,23 @@
 
     };
 
-    this.escapedMessage = () => $('<div/>').text(this.$textbox.val()).html();
+    this.contentEscaped = () => $('<div/>').text(this.$textbox.val()).html();
 
-    this.replacePlaceholders = () => this.$background.html(
-      this.escapedMessage().replace(
-        tagPattern, (match, name, separator, value) => value && separator ?
-          `<span class='placeholder-conditional'>((${name}??</span>${value}))` :
-          `<span class='placeholder'>((${name}${value}))</span>`
-      )
+    this.contentReplaced = () => this.contentEscaped().replace(
+      tagPattern, (match, name, separator, value) => value && separator ?
+        `<span class='placeholder-conditional'>((${name}??</span>${value}))` :
+        `<span class='placeholder'>((${name}${value}))</span>`
     );
 
-    this.update = () => this.replacePlaceholders() && this.resize();
+    this.update = () => {
+
+      this.$background.html(
+        this.highlightPlaceholders ? this.contentReplaced() : this.contentEscaped()
+      );
+
+      this.resize();
+
+    };
 
   };
 
diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html
index fc14d6dc4..27f1ba378 100644
--- a/app/templates/components/textbox.html
+++ b/app/templates/components/textbox.html
@@ -4,6 +4,7 @@
   hint=False,
   highlight_tags=False,
   autofocus=False,
+  autosize=False,
   colour_preview=False,
   help_link=None,
   help_link_text=None,
@@ -47,7 +48,8 @@
     %}
     {{ field(
       class=field_class,
-      data_module='highlight-tags' if highlight_tags else '',
+      data_module='highlight-tags' if highlight_tags or autosize else '',
+      data_highlight_placeholders='true' if highlight_tags else 'false',
       rows=rows|string,
       **kwargs
     ) }}
diff --git a/tests/javascripts/highlightTags.test.js b/tests/javascripts/highlightTags.test.js
index cadac0b9b..a14779230 100644
--- a/tests/javascripts/highlightTags.test.js
+++ b/tests/javascripts/highlightTags.test.js
@@ -125,6 +125,34 @@ describe('Highlight tags', () => {
 
     });
 
+    describe("The element's width should match even when the textbox is initially hidden", () => {
+
+      beforeEach(() => {
+
+        let setDisplayPropertyOfFormGroups = function(property) {
+          Array.prototype.forEach.call(
+            document.getElementsByClassName('form-group'),
+            element => element.style.display = property
+          );
+        };
+
+        setDisplayPropertyOfFormGroups('none');
+
+        window.GOVUK.modules.start();
+
+        setDisplayPropertyOfFormGroups('block');
+
+      });
+
+      test("If the textbox is an <textarea>", () => {
+
+        backgroundEl = textarea.nextElementSibling;
+        expect(backgroundEl.style.width).toEqual('582px');
+
+      });
+
+    });
+
     test("The element should be hidden from assistive technologies", () => {
 
       expect(backgroundEl.getAttribute('aria-hidden')).toEqual('true');
@@ -167,6 +195,22 @@ describe('Highlight tags', () => {
 
       });
 
+      test("Unless a data attribute is set to turn this feature off", () => {
+
+        textarea.textContent  = "Dear ((title)) ((name))";
+        textarea.setAttribute('data-highlight-placeholders', 'false')
+
+        // start module
+        window.GOVUK.modules.start();
+
+        backgroundEl = textarea.nextElementSibling;
+
+        const highlightTags = backgroundEl.querySelectorAll('.placeholder');
+
+        expect(highlightTags.length).toEqual(0);
+
+      });
+
     });
 
     describe("If there is optional text in the content, its matching text in the element below should be wrapped in a highlight tag", () => {