@kit-data-manager/pid-component
Version:
The PID-Component is a web component that can be used to evaluate and display FAIR Digital Objects, PIDs, ORCiDs, and possibly other identifiers in a user-friendly way. It is easily extensible to support other identifier types.
157 lines (156 loc) • 6.75 kB
JavaScript
/*!
*
* Copyright 2024 Karlsruhe Institute of Technology.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
import { h, Host } from "@stencil/core";
export class CopyButton {
constructor() {
this.copied = false;
this.copyValue = async (event) => {
event.stopPropagation();
event.preventDefault();
try {
if ('clipboard' in navigator) {
try {
await navigator.clipboard.writeText(this.value);
this.showSuccess();
return;
}
catch (ignored) {
}
}
const textArea = document.createElement('textarea');
textArea.value = this.value;
textArea.setAttribute('aria-hidden', 'true');
textArea.setAttribute('tabindex', '-1');
textArea.setAttribute('readonly', 'readonly');
textArea.className = 'fixed top-0 left-0 opacity-0 pointer-events-none z-[9999] w-[10em] h-[10em]';
document.body.appendChild(textArea);
setTimeout(() => {
textArea.focus();
textArea.select();
try {
const success = document.execCommand('copy');
if (success) {
this.showSuccess();
}
else {
const range = document.createRange();
range.selectNodeContents(textArea);
const selection = window.getSelection();
if (selection) {
selection.removeAllRanges();
selection.addRange(range);
textArea.setSelectionRange(0, textArea.value.length);
const secondAttempt = document.execCommand('copy');
if (secondAttempt) {
this.showSuccess();
}
}
}
}
catch (ignored) {
}
finally {
document.body.removeChild(textArea);
}
}, 200);
}
catch (err) {
console.error('Failed to copy text: ', err);
}
};
}
showSuccess() {
this.copied = true;
setTimeout(() => {
this.copied = false;
}, 1500);
}
getAriaLabel() {
const baseLabel = this.label || 'content';
return this.copied ? `${baseLabel} copied to clipboard` : `Copy ${baseLabel} to clipboard`;
}
render() {
const buttonText = this.copied ? '✓ Copied!' : 'Copy';
const ariaLabel = this.getAriaLabel();
const parentComponent = this.el.closest('pid-component');
const isDarkMode = parentComponent === null || parentComponent === void 0 ? void 0 : parentComponent.classList.contains('bg-gray-800');
return (h(Host, { key: '30c4993a4b0dd5bb0453f1e4564b95a6dc1fbe76', class: 'inline-block align-baseline text-xs' }, this.copied && (h("span", { key: '0e86f99522d6a10f954e0dc898fb1f438766dabc', class: "sr-only", "aria-live": "assertive" }, "Content copied to clipboard")), h("button", { key: '5fce7616e8ce231f5471674dc188287aa86559df', class: `${this.copied ? (isDarkMode ? 'bg-green-700' : 'bg-green-200') : isDarkMode ? 'bg-gray-700 hover:bg-gray-600' : 'bg-white hover:bg-blue-200'} relative z-30 max-h-min flex-none items-center rounded-md border ${isDarkMode ? 'border-gray-600 text-gray-200 hover:text-white' : 'border-slate-500 text-slate-800 hover:text-slate-900'} px-2 py-0.5 font-mono font-medium transition-colors duration-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:outline-none`, onClick: e => this.copyValue(e), "aria-label": ariaLabel, title: ariaLabel, type: "button" }, buttonText)));
}
static get is() { return "copy-button"; }
static get properties() {
return {
"value": {
"type": "string",
"attribute": "value",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "type",
"text": "{string}"
}, {
"name": "public",
"text": undefined
}],
"text": "The value to copy to the clipboard."
},
"getter": false,
"setter": false,
"reflect": false
},
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "type",
"text": "{string}"
}, {
"name": "public",
"text": undefined
}],
"text": "Optional custom label for the button.\nIf not provided, a default label will be used."
},
"getter": false,
"setter": false,
"reflect": false
}
};
}
static get states() {
return {
"copied": {}
};
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=copy-button.js.map