darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-05-04 08:01:34 -04:00
Code Issues Packages Projects Releases Wiki Activity

rename api key component to copy_to_clipboard

Browse Source 
does what it says on the tin, and is also consistent with prior art:
https://components.publishing.service.gov.uk/component-guide/copy_to_clipboard
This commit is contained in:
Leo Hemsted
2021-08-27 17:32:06 +01:00
parent 4921e6d46e
commit 85f6881a56
14 changed files with 100 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/assets/javascripts/apiKey.js → app/assets/javascripts/copyToClipboard.js
View File

@@ -3,33 +3,33 @@
if (!document.queryCommandSupported('copy')) return;
Modules.ApiKey = function() {
Modules.CopyToClipboard = function() {
const states = {
'keyVisible': (options) => `
<span class="api-key__key">
${options.keyLabel ? '<span class="govuk-visually-hidden">' + options.thing + ': </span>' : ''}${options.key}
'valueVisible': (options) => `
<span class="copy-to-clipboard__value">
${options.valueLabel ? '<span class="govuk-visually-hidden">' + options.thing + ': </span>' : ''}${options.value}
</span>
<span class="api-key__notice govuk-visually-hidden" aria-live="assertive">
<span class="copy-to-clipboard__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">
<button class="govuk-button govuk-button--secondary copy-to-clipboard__button--copy">
Copy ${options.thing} to clipboard${options.name ? '<span class="govuk-visually-hidden"> for ' + options.name + '</span>' : ''}
</button>
`,
'keyCopied': (options) => `
<span class="api-key__notice" aria-live="assertive">
'valueCopied': (options) => `
<span class="copy-to-clipboard__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">
<button class="govuk-button govuk-button--secondary copy-to-clipboard__button--show">
Show ${options.thing}${options.name ? '<span class="govuk-visually-hidden"> for ' + options.name + '</span>' : ''}
</button>
`
};
this.getRangeFromElement = function (keyElement) {
this.getRangeFromElement = function (copyableElement) {
const range = document.createRange();
const childNodes = Array.prototype.slice.call(keyElement.childNodes);
const childNodes = Array.prototype.slice.call(copyableElement.childNodes);
let prefixIndex = -1;
childNodes.forEach((el, idx) => {
@@ -38,15 +38,15 @@
}
});
range.selectNodeContents(keyElement);
if (prefixIndex !== -1) { range.setStart(keyElement, prefixIndex + 1); }
range.selectNodeContents(copyableElement);
if (prefixIndex !== -1) { range.setStart(copyableElement, prefixIndex + 1); }
return range;
};
this.copyKey = function(keyElement, callback) {
this.copyValueToClipboard = function(copyableElement, callback) {
var selection = window.getSelection ? window.getSelection() : document.selection,
range = this.getRangeFromElement(keyElement);
range = this.getRangeFromElement(copyableElement);
selection.removeAllRanges();
selection.addRange(range);
@@ -59,36 +59,36 @@
const $component = $(component),
stateOptions = {
key: $component.data('key'),
value: $component.data('value'),
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
// - the value won't be identified by a heading so needs its own label
if (name !== stateOptions.thing) {
stateOptions.name = name;
stateOptions.keyLabel = true;
stateOptions.valueLabel = true;
}
$component
.addClass('api-key')
.addClass('copy-to-clipboard')
.css('min-height', $component.height())
.html(states.keyVisible($.extend({ 'onload': true }, stateOptions)))
.html(states.valueVisible($.extend({ 'onload': true }, stateOptions)))
.on(
'click', '.api-key__button--copy', () =>
this.copyKey(
$('.api-key__key', component)[0], () =>
'click', '.copy-to-clipboard__button--copy', () =>
this.copyValueToClipboard(
$('.copy-to-clipboard__value', component)[0], () =>
$component
.html(states.keyCopied(stateOptions))
.html(states.valueCopied(stateOptions))
.find('.govuk-button').focus()
)
)
.on(
'click', '.api-key__button--show', () =>
'click', '.copy-to-clipboard__button--show', () =>
$component
.html(states.keyVisible(stateOptions))
.html(states.valueVisible(stateOptions))
.find('.govuk-button').focus()
);