Merge pull request #2242 from alphagov/colour-preview-refactor

Refactor hex colour preview Javascript

app/assets/javascripts/colourPreview.js

@@ -0,0 +1,29 @@
+(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);
+
+      $(component).append(
+        this.$preview = $('<span class="textbox-colour-preview"></span>')
+      );
+
+      this.$input
+        .on('input', this.update)
+        .trigger('change');
+
+    };
+
+    this.update = () => this.$preview.css(
+      'background', colourOrWhite(this.$input.val())
+    );
+
+  };
+
+})(window.GOVUK.Modules);

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

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')
         ]

app/templates/components/textbox.html

@@ -4,6 +4,7 @@
   hint=False,
   highlight_tags=False,
   autofocus=False,
+  colour_preview=False,
   help_link=None,
   help_link_text=None,
   width='2-3',
@@ -11,7 +12,10 @@
   safe_error_message=False,
   rows=8
 ) %}
-  <div class="form-group{% if field.errors %} form-group-error{% endif %}" {% if autofocus %}data-module="autofocus"{% endif %}>
+  <div
+    class="form-group{% if field.errors %} form-group-error{% endif %}"
+    data-module="{% if autofocus %}autofocus{% elif colour_preview %}colour-preview{% endif %}"
+  >
     <label class="form-label" for="{{ field.name }}">
       {% if label %}
         {{ label }}
@@ -57,29 +61,3 @@
     {% endif %}
   </div>
 {% endmacro %}
-
-{% macro colour_textbox(
-  field,
-  width='2-3',
-  colour='#FFFFFF'
-) %}
-  <div class="form-group{% if field.errors %} form-group-error{% endif %}">
-    <label class="form-label" for="{{ field.name }}">
-      {{ field.label.text }}
-      {% if field.errors %}
-        <span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
-          {{ field.errors[0] }}
-        </span>
-      {% endif %}
-    </label>
-    {% set field_class = 'form-control-{} {}'.format(width, 'textbox-right-aligned' if suffix else '') %}
-    {% set field_class = 'form-control ' + field_class + (' form-control-error' if field.errors else '') %}
-    {{ field(
-      class=field_class,
-      data_module='',
-      rows='1',
-      **kwargs
-    ) }}
-    <span class="textbox-colour-preview" style="background:{{ colour }}"></span>
-  </div>
-{% endmacro %}

app/templates/views/email-branding/manage-branding.html

@@ -1,7 +1,7 @@
 {% extends "views/platform-admin/_base_template.html" %}
 {% from "components/file-upload.html" import file_upload %}
 {% from "components/page-footer.html" import page_footer %}
-{% from "components/textbox.html" import textbox, colour_textbox %}
+{% from "components/textbox.html" import textbox %}
 
 {% block service_page_title %}
   {{ '{} email branding'.format('Update' if email_branding else 'Create')}}
@@ -22,9 +22,9 @@
         <div class="form-group">
           <div style='margin-top:15px;'>{{textbox(form.name)}}</div>
           <div style='margin-top:15px;'>{{textbox(form.text)}}</div>
-          {{colour_textbox(form.colour, width='1-4', colour=email_branding.colour if email_branding)}}
-          {{colour_textbox(form.banner_colour, width='1-4', colour=email_branding.banner_colour if email_branding)}}
-          {{colour_textbox(form.single_id_colour, width='1-4', colour=email_branding.single_id_colour if email_branding)}}
+          {{ textbox(form.colour, width='1-4', colour_preview=True) }}
+          {{ textbox(form.banner_colour, width='1-4', colour_preview=True) }}
+          {{ textbox(form.single_id_colour, width='1-4', colour_preview=True) }}
            <div style='margin-top:15px;'>{{textbox(form.domain)}}</div>
           {{ page_footer(
             'Save',
@@ -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 %}

app/templates/views/organisations/organisation/settings/edit-name/index.html

@@ -1,6 +1,6 @@
 {% extends "org_template.html" %}
 {% from "components/page-footer.html" import page_footer %}
-{% from "components/textbox.html" import textbox, colour_textbox %}
+{% from "components/textbox.html" import textbox %}
 
 {% block org_page_title %}
   Change organisation name

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())