mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-24 12:21:22 -05:00
b73e42650d
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…
27 lines
587 B
JavaScript
27 lines
587 B
JavaScript
(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);
|