mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-06 19:34:15 -05:00
b727a50c13
It’s annoying that this button moves after you click on it. It’s happening because the API key is wrapping onto multiple lines. This commit fixes the height of the container so that it doesn’t reflow when it has less content in it. Uses a bit of flexbox to vertically centre the text.
57 lines
1.6 KiB
JavaScript
57 lines
1.6 KiB
JavaScript
(function(Modules) {
|
|
"use strict";
|
|
|
|
if (!document.queryCommandSupported('copy')) return;
|
|
|
|
Modules.ApiKey = function() {
|
|
|
|
const states = {
|
|
'keyVisible': (key, thing) => `
|
|
<span class="api-key-key">${key}</span>
|
|
<input type='button' class='api-key-button-copy' value='Copy ${thing} to clipboard' />
|
|
`,
|
|
'keyCopied': thing => `
|
|
<span class="api-key-key">Copied to clipboard</span>
|
|
<input type='button' class='api-key-button-show' value='Show ${thing}' />
|
|
`
|
|
};
|
|
|
|
this.copyKey = function(keyElement, callback) {
|
|
var selection = window.getSelection ? window.getSelection() : document.selection,
|
|
range = document.createRange();
|
|
selection.removeAllRanges();
|
|
range.selectNodeContents(keyElement);
|
|
selection.addRange(range);
|
|
document.execCommand('copy');
|
|
selection.removeAllRanges();
|
|
callback();
|
|
};
|
|
|
|
this.start = function(component) {
|
|
|
|
const $component = $(component),
|
|
key = $component.data('key'),
|
|
thing = $component.data('thing');
|
|
|
|
$component
|
|
.addClass('api-key')
|
|
.css('min-height', $component.height())
|
|
.html(states.keyVisible(key, thing))
|
|
.attr('aria-live', 'polite')
|
|
.on(
|
|
'click', '.api-key-button-copy', () =>
|
|
this.copyKey(
|
|
$('.api-key-key', component)[0], () =>
|
|
$component.html(states.keyCopied(thing))
|
|
)
|
|
)
|
|
.on(
|
|
'click', '.api-key-button-show', () =>
|
|
$component.html(states.keyVisible(key, thing))
|
|
);
|
|
|
|
};
|
|
};
|
|
|
|
})(window.GOVUK.Modules);
|