Refactor hex colour preview Javascript

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…
This commit is contained in:
Chris Hill-Scott
2018-08-20 13:27:50 +01:00
parent 864e732c38
commit b73e42650d
6 changed files with 36 additions and 21 deletions

View File

@@ -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);