mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-20 00:35:44 +00:00
Bug 1550093 - Clicking the Copy button places the related text on the clipboard. r=MattN
Differential Revision: https://phabricator.services.mozilla.com/D31520 --HG-- extra : source : 510a686041bb31f70684c29a72e8a5f1163836b2
This commit is contained in:
parent
a444990438
commit
7891929ef0
@ -5,6 +5,16 @@
|
||||
/* globals ReflectedFluentElement */
|
||||
|
||||
class CopyToClipboardButton extends ReflectedFluentElement {
|
||||
static get BUTTON_RESET_TIMEOUT() {
|
||||
return 5000;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this._relatedInput = null;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
if (this.children.length) {
|
||||
return;
|
||||
@ -37,11 +47,23 @@ class CopyToClipboardButton extends ReflectedFluentElement {
|
||||
}
|
||||
|
||||
handleEvent(event) {
|
||||
if (event.type != "click") {
|
||||
let copyButton = this.shadowRoot.querySelector(".copy-button");
|
||||
if (event.type != "click" || event.currentTarget != copyButton) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setAttribute("copied", "");
|
||||
copyButton.disabled = true;
|
||||
navigator.clipboard.writeText(this._relatedInput.value).then(() => {
|
||||
this.setAttribute("copied", "");
|
||||
setTimeout(() => {
|
||||
copyButton.disabled = false;
|
||||
this.removeAttribute("copied");
|
||||
}, CopyToClipboardButton.BUTTON_RESET_TIMEOUT);
|
||||
}, () => copyButton.disabled = false);
|
||||
}
|
||||
|
||||
set relatedInput(val) {
|
||||
this._relatedInput = val;
|
||||
}
|
||||
}
|
||||
customElements.define("copy-to-clipboard-button", CopyToClipboardButton);
|
||||
|
@ -37,6 +37,11 @@ class LoginItem extends ReflectedFluentElement {
|
||||
|
||||
window.addEventListener("AboutLoginsLoginSelected", this);
|
||||
|
||||
let copyUsernameButton = this.shadowRoot.querySelector(".copy-username-button");
|
||||
let copyPasswordButton = this.shadowRoot.querySelector(".copy-password-button");
|
||||
copyUsernameButton.relatedInput = this.shadowRoot.querySelector("modal-input[name='username']");
|
||||
copyPasswordButton.relatedInput = this.shadowRoot.querySelector("modal-input[name='password']");
|
||||
|
||||
this.render();
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user