Make the hint work for both subject and body

This commit makes the placeholder hint not be dependent on their only
being one textbox with placeholders on a page.

To do this it needs to be its own module, because the two textboxes are
each self-contained instances of the same module.

The way I’ve gone about this is to make the placeholder hint accept a
list of textboxes it should look in when deciding what message to
display to the user.

Most of the code is extracted from the existing placeholder highlighting
module.

app/assets/javascripts/highlightTags.js

@@ -7,25 +7,6 @@
 
   const tagPattern = /\(\([^\)\(]+\)\)/g;
 
-  const getPlaceholderHint = function(placeholders) {
-    if (0 === placeholders.length) {
-      return `
-        <p>Add fields using ((double brackets))</p>
-        <span class='placeholder-hint-action' tabindex='0' role='button'>Show me how</span>
-      `;
-    }
-    if (1 === placeholders.length) {
-        return `
-          <p>Add fields using ((double brackets))</p>
-          <p>You’ll populate the ‘${placeholders[0]}’ field when you send messages using this template</p>
-        `;
-    }    
-    return `
-      <p>Add fields using ((double brackets))</p>
-      <p>You’ll populate your fields when you send some messages</p>
-    `;
-  };
-
   Modules.HighlightTags = function() {
 
     this.start = function(textarea) {
@@ -41,9 +22,6 @@
         `))
         .on("input", this.update);
 
-      this.$placeHolderHint = $('#placeholder-hint')
-        .on("click", ".placeholder-hint-action", this.demo);
-
       this.initialHeight = this.$textbox.height();
 
       this.$backgroundMaskForeground.css({
@@ -65,29 +43,13 @@
 
     this.escapedMessage = () => $('<div/>').text(this.$textbox.val()).html();
 
-    this.listPlaceholders = () => this.escapedMessage().match(tagPattern) || [];
-
-    this.listPlaceholdersWithoutBrackets = () => this.listPlaceholders().map(
-      placeholder => placeholder.substring(2, placeholder.length - 2)
-    );
-
     this.replacePlaceholders = () => this.$backgroundMaskForeground.html(
       this.escapedMessage().replace(
         tagPattern, match => `<span class='tag'>${match}</span>`
       )
     );
 
-    this.hint = () => this.$placeHolderHint.html(
-      getPlaceholderHint(this.listPlaceholdersWithoutBrackets())
-    );
-
-    this.update = () => (
-      this.replacePlaceholders() && this.resize() && this.hint()
-    );
-
-    this.demo = () => (
-      this.$textbox.val((i, current) => `Dear ((name)), ${current}`) && this.update()
-    );
+    this.update = () => this.replacePlaceholders() && this.resize();
 
   };
 

app/assets/javascripts/placeholderHint.js

@@ -0,0 +1,75 @@
+(function(Modules) {
+  "use strict";
+
+  if (
+    !('oninput' in document.createElement('input'))
+  ) return;
+
+  const tagPattern = /\(\([^\)\(]+\)\)/g;
+
+  Modules.PlaceholderHint = function() {
+
+    this.start = function(component) {
+
+      this.$component = $(component);
+      this.originalHTML = this.$component.html();
+      this.$allTextboxes = $(this.$component.data('textboxes-selector'));
+      this.$targetTextbox = $(this.$component.data('target-textbox-selector'));
+
+      this.$component
+        .on('click', '.placeholder-hint-action', this.demo);
+      
+      this.$allTextboxes
+        .on('input', this.hint)
+        .trigger('input');
+
+    };
+
+    this.getPlaceholderHint = function() {
+
+      let placeholders = this.listPlaceholdersWithoutBrackets();
+
+      if (0 === placeholders.length) {
+        return `
+          ${this.originalHTML}
+          <span class='placeholder-hint-action' tabindex='0' role='button'>Show me how</span>
+        `;
+      }
+      if (1 === placeholders.length) {
+          return `
+            ${this.originalHTML}
+            <p>You’ll populate the ‘${placeholders[0]}’ field when you send messages using this template</p>
+          `;
+      }    
+      return `
+        ${this.originalHTML}
+        <p>You’ll populate your fields when you send some messages</p>
+      `;
+
+    };
+
+    this.escapedMessages = () => $('<div/>').text(
+      this.$allTextboxes.map(function() {
+          return $(this).val();
+      }).get()
+    ).html();
+
+    this.listPlaceholders = () => this.escapedMessages().match(tagPattern) || [];
+
+    this.listPlaceholdersWithoutBrackets = () => this.listPlaceholders().map(
+      placeholder => placeholder.substring(2, placeholder.length - 2)
+    );
+
+    this.renderDemo = () => this.$targetTextbox.val((i, current) => `Dear ((name)), ${current}`);
+
+    this.hint = () => this.$component.html(
+      this.getPlaceholderHint()
+    );
+
+    this.demo = () => (
+      this.renderDemo() && this.$targetTextbox.trigger('input') && this.hint()
+    );
+
+  };
+
+})(window.GOVUK.Modules);

app/templates/views/edit-email-template.html

@@ -27,8 +27,8 @@
           ) }}
         </div>
         <div class="column-one-third">
-          <label for='template_content' class='placeholder-hint'>
-            <div class="banner-mode" id="placeholder-hint" aria-live="polite">
+          <label for='template_content' class='placeholder-hint banner-mode' data-module='placeholder-hint' data-textboxes-selector='#template_content,#subject' data-target-textbox-selector="#template_content">
+            <div class="" id="placeholder-hint" aria-live="polite">
               <p>Add fields using ((double brackets))</p>
             </div>
           </label>

gulpfile.babel.js

@@ -59,6 +59,7 @@ gulp.task('javascripts', () => gulp
     paths.src + 'javascripts/fileUpload.js',
     paths.src + 'javascripts/updateContent.js',
     paths.src + 'javascripts/expandCollapse.js',
+    paths.src + 'javascripts/placeholderHint.js',
     paths.src + 'javascripts/main.js'
   ])
   .pipe(plugins.babel({