class CopyToClipboardComponent extends HTMLElement {
static STYLE = `
`;
static IN_ACTIVE = CopyToClipboardComponent.STYLE + `
copy
`;
static ACTIVE = CopyToClipboardComponent.STYLE + ` copied
`;
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.render(CopyToClipboardComponent.IN_ACTIVE);
this.addEventListeners();
}
render(value) {
this.shadowRoot.innerHTML = value;
}
addEventListeners() {
this.addEventListener('click', this.copyToClipboard.bind(this));
}
copyToClipboard() {
const fromElement = document.getElementById(this.getAttribute('from'));
if (fromElement) {
navigator.clipboard.writeText(fromElement.innerText)
.then(() => {
console.log('Content copied to clipboard');
this.render(CopyToClipboardComponent.ACTIVE)
setTimeout((target) => {
this.render(CopyToClipboardComponent.IN_ACTIVE)
}, 3000, this);
})
.catch(err => {
console.error('Failed to copy: ', err);
});
} else {
console.error('Element not found');
}
}
}
customElements.define('copy-to-clipboard', CopyToClipboardComponent);
class CodeSampleComponent extends HTMLElement {
connectedCallback() {
this.render();
}
render() {
let id = this.getAttribute("id");
let html = "
";
html += "" + this.innerHTML + "
";
console.log("html=" + html);
this.innerHTML = html;
}
}
customElements.define('code-sample', CodeSampleComponent);