From 3ed415fb7516c6acc5b98c4a73160511404ae055 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Sun, 20 Dec 2015 00:00:01 +0000
Subject: [PATCH] Enhance message textbox by styling placeholders
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Users can add placeholders to their messages, eg

> …your vehicle ((registration number))

when the message is sent, this gets replaced with the data the user uploads, eg

> …your vehicle LC12 BFL

We reckon that it will be useful to see that the placeholder has been
recognised, ie that its syntax is correct, before uploading any data.

We reckon that the best way to do this is by styling it differently to the rest
of the text that the user types.

This is not a trivial problem. There are two possible ways to do it:

1 Write a Google Docs-style text rendering engine, which completely replaces
  the native HTML `<textarea>` with a custom control, and programme what should
  happen when the user types something that looks like a placeholder, or
  presses an arrow key, or makes a selection, or…
2 Leave the `<textarea>` in place, unmodified, and duplicate layers in front
  of/behind it to visually replace a placeholder with the blue lozenge

Unsurprisingly, this commit implements 2.

There are four layers. Each layer contains live-updated copy of the text in the
textbox, and each is styled differently:
- one layer behind the textbox to make the blue background
- the textbox itself
- a layer with the white text, which overlays the black text of the textbox
- a layer with an inner shadow to knock back the brackets

This is because of some interesting limitations:
- The text in the foreground and background must occupy the same physical space,
  so no deleting characters from the duplicated layers
- Words can’t be split up into multiple elements,
  eg `<span>((</span>regist…`:—this results in slightly different kerning to
  `((regis…`, which messes up the alignment of the layers
- The textbox can’t be completely overlapped with a block of colour, because
  the cursor disappears behind it. Trying to edit text when you can’t see the
  cursor is hard.

Implementation

Technically this makes use of Paul Hayes work on Javascript modules in the
GOV.UK frontend toolkit[1].

It also makes use of the `oninput` event to detect changes to the textbox’s
contents. This is much more performant than `onkeydown`, `onpaste`, etc. Without
it the delay between user input and the layers all updating is too slow and you
see misalignment of the layers.

1. https://github.com/alphagov/govuk_frontend_toolkit/pull/227
---
 app/assets/javascripts/highlightTags.js       | 47 +++++++++++
 app/assets/javascripts/main.js                |  9 +-
 .../stylesheets/components/textbox.scss       | 83 +++++++++++++++++++
 app/assets/stylesheets/main.scss              |  1 +
 app/templates/admin_template.html             |  2 +-
 app/templates/components/textbox.html         |  9 +-
 app/templates/views/edit-template.html        |  2 +-
 app/templates/views/job.html                  |  2 +-
 bower.json                                    |  1 -
 gulpfile.js                                   | 16 +++-
 package.json                                  |  4 +-
 11 files changed, 165 insertions(+), 11 deletions(-)
 create mode 100644 app/assets/javascripts/highlightTags.js
 create mode 100644 app/assets/stylesheets/components/textbox.scss

diff --git a/app/assets/javascripts/highlightTags.js b/app/assets/javascripts/highlightTags.js
new file mode 100644
index 000000000..05eee1343
--- /dev/null
+++ b/app/assets/javascripts/highlightTags.js
@@ -0,0 +1,47 @@
+(function(Modules) {
+  "use strict";
+
+  Modules.HighlightTags = function() {
+
+    this.start = function(textarea) {
+
+      this.$textbox = $(textarea)
+        .wrap(
+          "<div class='textbox-highlight-wrapper' />"
+        )
+        .after(this.$backgroundMaskForeground = $(
+          "<div class='textbox-highlight-background' aria-hidden='true' />" +
+          "<div class='textbox-highlight-mask' aria-hidden='true' />" +
+          "<div class='textbox-highlight-foreground' aria-hidden='true' />"
+        ))
+        .on("input", this.update.bind(this))
+        .on("scroll", this.maintainScrollParity.bind(this));
+
+      this.$textbox
+        .trigger("input");
+
+    };
+
+    this.update = function(event) {
+      this.$backgroundMaskForeground.html(
+        replaceTags(this.$textbox.val())
+      );
+    };
+
+    this.maintainScrollParity = function() {
+      this.$backgroundMaskForeground.scrollTop(
+        this.$textbox.scrollTop()
+      );
+    };
+
+  };
+
+  function replaceTag(match) {
+    return ("<span class='tag'>" + match + "</span>");
+  }
+
+  function replaceTags(content) {
+    return content.replace(/\(\([^\)\(]+\)\)/g, replaceTag);
+  }
+
+})(window.GOVUK.Modules);
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 5f96d14b0..df347f460 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -1,5 +1,8 @@
 //= include ../../../bower_components/jquery/dist/jquery.js
+//= include ../govuk_frontend_toolkit/javascripts/govuk/modules.js
 
-(function() {
-  console.log("Hello world");
-})();
+//= include highlightTags.js
+
+$(function(){
+  GOVUK.modules.start();
+});
diff --git a/app/assets/stylesheets/components/textbox.scss b/app/assets/stylesheets/components/textbox.scss
new file mode 100644
index 000000000..1d2807709
--- /dev/null
+++ b/app/assets/stylesheets/components/textbox.scss
@@ -0,0 +1,83 @@
+.textbox-highlight {
+
+  &-wrapper {
+    position: relative;
+  }
+
+  &-textbox {
+    resize: none;
+    z-index: 20;
+    background: none;
+  }
+
+  &-textbox,
+  &-background,
+  &-foreground,
+  &-mask {
+    @include core-19;
+    display: block;
+    box-sizing: border-box;
+    position: relative;
+    width: 500px;
+    height: 200px;
+    margin: 0;
+    padding: 4px;
+    overflow: hidden;
+  }
+
+  &-background,
+  &-foreground,
+  &-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    color: transparent;
+    white-space: pre-wrap;
+    border: 2px solid transparent;
+  }
+
+  &-background {
+
+    z-index: 10;
+
+    .tag {
+      background: $light-blue;
+      border-radius: 3px;
+      color: transparent;
+      display: inline;
+    }
+
+  }
+
+  &-mask {
+
+    z-index: 30;
+
+    .tag {
+      color: $white;
+      text-shadow: 0 1px 0 $light-blue, 0 -1px 0 $light-blue;
+      position: relative;
+      display: inline;
+      overflow: hidden;
+    }
+
+  }
+
+  &-foreground {
+
+    z-index: 40;
+
+    .tag {
+      color: transparent;
+      border-radius: 3px;
+      overflow: hidden;
+      display: inline;
+      box-shadow: inset 0.75em 0 0 0 rgba($light-blue, .7),
+                  inset -0.75em 0 0 0 rgba($light-blue, .7);
+    }
+
+  }
+
+
+}
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index 13ac54a99..ece58780a 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -38,6 +38,7 @@
 @import 'components/navigation';
 @import 'components/big-number';
 @import 'components/banner';
+@import 'components/textbox';
 
 @import 'views/job';
 
diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html
index bff13ff6f..76947a435 100644
--- a/app/templates/admin_template.html
+++ b/app/templates/admin_template.html
@@ -47,5 +47,5 @@
 {% endblock %}
 
 {% block body_end %}
-  <script type="text/javascript" src="{{ asset_path }}javascripts/main.js" /></script>
+  <script type="text/javascript" src="{{ asset_path }}javascripts/all.js" /></script>
 {% endblock %}
diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html
index 7d5e640bd..a32a76c4b 100644
--- a/app/templates/components/textbox.html
+++ b/app/templates/components/textbox.html
@@ -1,10 +1,15 @@
-{% macro textbox(name, label, value='', small=True) %}
+{% macro textbox(name, label, value='', small=True, highlight_tags=False) %}
   <div class="form-group">
     <label class="form-label" for="{{ name }}">{{ label }}</label>
     {% if small %}
       <input class="form-control" id="{{ name }}" name="{{ name }}" type="text" value="{{ value }}">
     {% else %}
-      <textarea class="form-control" id="{{ name }}" name="{{ name }}" cols="30" rows="10">{{ value }}</textarea>
+      <textarea
+        class="form-control {% if highlight_tags %}textbox-highlight-textbox{% endif %}"
+        id="{{ name }}" name="{{ name }}"
+        cols="30" rows="10"
+        {% if highlight_tags %}data-module='highlight-tags'{% endif %}
+      >{{ value }}</textarea>
     {% endif %}
   </div>
 {% endmacro %}
diff --git a/app/templates/views/edit-template.html b/app/templates/views/edit-template.html
index 4570b3e61..b17b5b64c 100644
--- a/app/templates/views/edit-template.html
+++ b/app/templates/views/edit-template.html
@@ -12,7 +12,7 @@ GOV.UK Notify | Edit template
 
 		<form method="post">
 			{{ textbox(name='template_name', label='Template name', value=template_name) }}
-			{{ textbox(name='template_body', label='Message', small=False, value=template_body) }}
+			{{ textbox(name='template_body', label='Message', small=False, value=template_body, highlight_tags=True) }}
 			{{ submit_form('Save and continue') }}
 		</form>
 
diff --git a/app/templates/views/job.html b/app/templates/views/job.html
index 852c92eee..963ff1810 100644
--- a/app/templates/views/job.html
+++ b/app/templates/views/job.html
@@ -38,7 +38,7 @@ GOV.UK Notify | Notifications activity
 		</ul>
 
     <p>
-      Sent with template <a href="{{ url_for('.edittemplate') }}">{{ template_used }}</a> at {{ uploaded_file_time }}
+      Sent with template <a href="{{ url_for('.edit_template') }}">{{ template_used }}</a> at {{ uploaded_file_time }}
     </p>
 
     {% call(item) table(
diff --git a/bower.json b/bower.json
index 312bf3293..efa72b2c5 100644
--- a/bower.json
+++ b/bower.json
@@ -2,7 +2,6 @@
   "name": "GOV.UK Notify admin frontend",
   "version": "0.0.1",
   "dependencies": {
-    "jquery": "1.11.2",
     "govuk_template": "https://github.com/alphagov/govuk_template/releases/download/v0.16.0/jinja_govuk_template-0.16.0.tgz"
   }
 }
diff --git a/gulpfile.js b/gulpfile.js
index f480f2bc7..e316b67eb 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -34,6 +34,20 @@ gulp.task('copy:govuk_template:assets', function() {
 
 // Concatenate and minify
 
+gulp.task('jquery', function () {
+    return plugins.jquery.src({
+        release: 1,
+        flags: [
+          '-ajax', '-ajax/jsonp', '-ajax/load', '-ajax/parseJSON',
+          '-ajax/parseXML', '-ajax/script', '-ajax/var/nonce',
+          '-ajax/var/rquery', '-ajax/xhr', '-manipulation/_evalUrl',
+          '-deprecated', '-effects', '-effects/Tween',
+          '-effects/animatedSelector', '-effects/support', '-event-alias'
+        ]
+      })
+      .pipe(gulp.dest(paths.dist + 'javascripts/'));
+});
+
 gulp.task('javascripts', function() {
     return gulp.src(paths.src + 'javascripts/main.js')
         .pipe(plugins.include())
@@ -68,7 +82,7 @@ gulp.task('watchForChanges', function() {
 
 // Default: compile everything
 gulp.task('default',
-    ['copy:govuk_template:template', 'copy:govuk_template:assets', 'javascripts', 'sass', 'images']
+    ['copy:govuk_template:template', 'copy:govuk_template:assets', 'jquery', 'javascripts', 'sass', 'images']
 );
 
 // Optional: recompile on changes
diff --git a/package.json b/package.json
index 20c6dd27a..6f62fee9d 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,10 @@
     "bower": "1.7.1",
     "gulp": "3.9.0",
     "gulp-include": "2.1.0",
+    "gulp-jquery": "1.1.1",
     "gulp-load-plugins": "1.1.0",
     "gulp-sass": "2.1.1",
-    "gulp-uglify": "1.5.1"
+    "gulp-uglify": "1.5.1",
+    "jquery": "1.11.2"
   }
 }