From b73e42650d4d7c8fd4cc39c0c316ece43392e69f Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 20 Aug 2018 13:27:50 +0100
Subject: [PATCH] Refactor hex colour preview Javascript
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit improves the code that previews a hex colour when setting up
or changing an email branding.

Specifically it:
- refactors the Javascript to conform to our patterns (module pattern,
  preprocessed with Gulp)
- makes the code work when there are multiple colour previews on one
  page

It also does some visual prettifying, because I couldn’t help myself…
---
 app/assets/javascripts/colourPreview.js       | 26 +++++++++++++++++++
 .../stylesheets/components/textbox.scss       |  8 +++---
 app/main/forms.py                             |  3 ---
 app/templates/components/textbox.html         |  7 +++--
 .../views/email-branding/manage-branding.html | 12 +--------
 gulpfile.babel.js                             |  1 +
 6 files changed, 36 insertions(+), 21 deletions(-)
 create mode 100644 app/assets/javascripts/colourPreview.js

diff --git a/app/assets/javascripts/colourPreview.js b/app/assets/javascripts/colourPreview.js
new file mode 100644
index 000000000..da9546ba7
--- /dev/null
+++ b/app/assets/javascripts/colourPreview.js
@@ -0,0 +1,26 @@
+(function(Modules) {
+  "use strict";
+
+  let isSixDigitHex = value => value.match(/^#[0-9A-F]{6}$/i);
+  let colourOrWhite = value => isSixDigitHex(value) ? value : '#FFFFFF';
+
+  Modules.ColourPreview = function() {
+
+    this.start = component => {
+
+      this.$input = $('input', component);
+      this.$preview = $('.textbox-colour-preview', component);
+
+      this.$input
+        .on('change keyup', this.update)
+        .trigger('change');
+
+    };
+
+    this.update = () => this.$preview.css(
+      'background', colourOrWhite(this.$input.val())
+    );
+
+  };
+
+})(window.GOVUK.Modules);
diff --git a/app/assets/stylesheets/components/textbox.scss b/app/assets/stylesheets/components/textbox.scss
index 0555c0586..c675b016e 100644
--- a/app/assets/stylesheets/components/textbox.scss
+++ b/app/assets/stylesheets/components/textbox.scss
@@ -62,11 +62,13 @@
 
 .textbox-colour-preview {
   @include media(desktop) {
-    width: 34px;
-    height: 34px;
+    width: 38px;
+    height: 38px;
     margin-left: 5px;
-    border: 2px solid #0B0C0C;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 1px rgba($black, 0.2);
     display: inline-block;
     vertical-align: top;
+    transition: background 0.3s ease-out;
   }
 }
diff --git a/app/main/forms.py b/app/main/forms.py
index b3678f75d..fbc856b3b 100644
--- a/app/main/forms.py
+++ b/app/main/forms.py
@@ -734,21 +734,18 @@ class ServiceUpdateEmailBranding(StripWhitespaceForm):
     domain = StringField('Domain')
     colour = StringField(
         'Colour',
-        render_kw={'onchange': 'update_colour(this)'},
         validators=[
             Regexp(regex="^$|^#(?:[0-9a-fA-F]{3}){1,2}$", message='Must be a valid color hex code')
         ]
     )
     banner_colour = StringField(
         'Banner colour',
-        render_kw={'onchange': 'update_colour(this)'},
         validators=[
             Regexp(regex="^$|^#(?:[0-9a-fA-F]{3}){1,2}$", message='Must be a valid color hex code')
         ]
     )
     single_id_colour = StringField(
         'Single identity colour',
-        render_kw={'onchange': 'update_colour(this)'},
         validators=[
             Regexp(regex="^$|^#(?:[0-9a-fA-F]{3}){1,2}$", message='Must be a valid color hex code')
         ]
diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html
index 955ffb7d5..e723b9a41 100644
--- a/app/templates/components/textbox.html
+++ b/app/templates/components/textbox.html
@@ -60,10 +60,9 @@
 
 {% macro colour_textbox(
   field,
-  width='2-3',
-  colour='#FFFFFF'
+  width='2-3'
 ) %}
-  <div class="form-group{% if field.errors %} form-group-error{% endif %}">
+  <div class="form-group{% if field.errors %} form-group-error{% endif %}" data-module="colour-preview">
     <label class="form-label" for="{{ field.name }}">
       {{ field.label.text }}
       {% if field.errors %}
@@ -80,6 +79,6 @@
       rows='1',
       **kwargs
     ) }}
-    <span class="textbox-colour-preview" style="background:{{ colour }}"></span>
+    <span class="textbox-colour-preview"></span>
   </div>
 {% endmacro %}
diff --git a/app/templates/views/email-branding/manage-branding.html b/app/templates/views/email-branding/manage-branding.html
index 8b628a9a4..f191d2a2d 100644
--- a/app/templates/views/email-branding/manage-branding.html
+++ b/app/templates/views/email-branding/manage-branding.html
@@ -34,15 +34,5 @@
         </div>
       </form>
     </div>
-  </div>
-  <script type="text/javascript">
-    function update_colour(element){
-      colour_preview = document.getElementsByClassName("textbox-colour-preview")[0];
-      if (element.value.match(/^#[0-9A-F]{6}$/i)) {
-        colour_preview.style.background = element.value;
-      } else {
-        colour_preview.style.background = '#FFFFFF';
-      }
-    }
-  </script>
+
 {% endblock %}
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index c8c43188c..a7da1e92e 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -75,6 +75,7 @@ gulp.task('javascripts', () => gulp
     paths.src + 'javascripts/preventDuplicateFormSubmissions.js',
     paths.src + 'javascripts/fullscreenTable.js',
     paths.src + 'javascripts/emailPreviewPane.js',
+    paths.src + 'javascripts/colourPreview.js',
     paths.src + 'javascripts/main.js'
   ])
   .pipe(plugins.prettyerror())