2018-08-20 13:27:50 +01:00
|
|
|
(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 => {
|
|
|
|
|
|
2020-08-06 15:36:34 +01:00
|
|
|
this.$input = $(component);
|
2018-08-20 15:03:58 +01:00
|
|
|
|
2023-08-18 11:30:30 -04:00
|
|
|
this.$input.closest('.usa-form-group').append(
|
2018-08-20 15:03:58 +01:00
|
|
|
this.$preview = $('<span class="textbox-colour-preview"></span>')
|
|
|
|
|
);
|
2018-08-20 13:27:50 +01:00
|
|
|
|
|
|
|
|
this.$input
|
2018-08-20 15:04:07 +01:00
|
|
|
.on('input', this.update)
|
2018-08-22 16:51:16 +01:00
|
|
|
.trigger('input');
|
2018-08-20 13:27:50 +01:00
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
this.update = () => this.$preview.css(
|
|
|
|
|
'background', colourOrWhite(this.$input.val())
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
})(window.GOVUK.Modules);
|