mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-12 09:24:15 -04:00
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:
26
app/assets/javascripts/colourPreview.js
Normal file
26
app/assets/javascripts/colourPreview.js
Normal 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);
|
||||
Reference in New Issue
Block a user