darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-09 10:54:11 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3591 from alphagov/fix-copy-to-clipboard

Browse Source 
Fix copy to clipboard
This commit is contained in:
Tom Byers
2020-08-28 10:58:36 +01:00
committed by GitHub
parent 786946639b 8b6069d717
commit d446a91a8e
11 changed files with 336 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
app/assets/javascripts/apiKey.js
View File

@@ -6,13 +6,24 @@
Modules.ApiKey = function() {
const states = {
'keyVisible': (key, thing) => `
<span class="api-key__key">${key}</span>
<input type='button' class='govuk-button govuk-button--secondary api-key__button--copy' value='Copy ${thing} to clipboard' />
'keyVisible': (options) => `
<span class="api-key__key">
${options.keyLabel ? '<span class="govuk-visually-hidden">' + options.thing + ': </span>' : ''}${options.key}
</span>
<span class="api-key__notice govuk-visually-hidden" aria-live="assertive">
${options.onload ? '' : options.thing + ' returned to page, press button to copy to clipboard'}
</span>
<button class="govuk-button govuk-button--secondary api-key__button--copy">
Copy ${options.thing} to clipboard${options.name ? '<span class="govuk-visually-hidden"> for ' + options.name + '</span>' : ''}
</button>
`,
'keyCopied': thing => `
<span class="api-key__key">Copied to clipboard</span>
<input type='button' class='govuk-button govuk-button--secondary api-key__button--show' value='Show ${thing}' />
'keyCopied': (options) => `
<span class="api-key__notice" aria-live="assertive">
<span class="govuk-visually-hidden">${options.thing} </span>Copied to clipboard<span class="govuk-visually-hidden">, press button to show in page</span>
</span>
<button class="govuk-button govuk-button--secondary api-key__button--show">
Show ${options.thing}${options.name ? '<span class="govuk-visually-hidden"> for ' + options.name + '</span>' : ''}
</button>
`
};
@@ -30,24 +41,38 @@
this.start = function(component) {
const $component = $(component),
key = $component.data('key'),
thing = $component.data('thing');
stateOptions = {
key: $component.data('key'),
thing: $component.data('thing')
},
name = $component.data('name');
// if the name is distinct from the thing:
// - it will be used in the rendering
// - the key won't be identified by a heading so needs its own label
if (name !== stateOptions.thing) {
stateOptions.name = name;
stateOptions.keyLabel = true;
}
$component
.addClass('api-key')
.css('min-height', $component.height())
.html(states.keyVisible(key, thing))
.attr('aria-live', 'polite')
.html(states.keyVisible($.extend({ 'onload': true }, stateOptions)))
.on(
'click', '.api-key__button--copy', () =>
this.copyKey(
$('.api-key__key', component)[0], () =>
$component.html(states.keyCopied(thing))
$component
.html(states.keyCopied(stateOptions))
.find('.govuk-button').focus()
)
)
.on(
'click', '.api-key__button--show', () =>
$component.html(states.keyVisible(key, thing))
$component
.html(states.keyVisible(stateOptions))
.find('.govuk-button').focus()
);
if ('stickAtBottomWhenScrolling' in GOVUK) {