mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-06-24 01:11:15 -04:00
b10f0747ae
The `oninput` event is a more performant way to detect changes to a textbox’s contents (compared to `onkeydown`, `onpaste`, etc). It’s not supported in older browsers, but since this is a likely to be used by platform admin users only that’s OK.
30 lines
628 B
JavaScript
30 lines
628 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);
|
|
|
|
$(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);
|