summaryrefslogtreecommitdiffstats
path: root/toolkit/content/aboutwebrtc/copyButton.mjs
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /toolkit/content/aboutwebrtc/copyButton.mjs
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'toolkit/content/aboutwebrtc/copyButton.mjs')
-rw-r--r--toolkit/content/aboutwebrtc/copyButton.mjs83
1 files changed, 83 insertions, 0 deletions
diff --git a/toolkit/content/aboutwebrtc/copyButton.mjs b/toolkit/content/aboutwebrtc/copyButton.mjs
new file mode 100644
index 0000000000..f39210c709
--- /dev/null
+++ b/toolkit/content/aboutwebrtc/copyButton.mjs
@@ -0,0 +1,83 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/*
+ * This creates a button that can be used to copy text to the clipboard.
+ * Whenever the button is pressed the getCopyContentsFn passed into the
+ * constructor is called and the resulting text is copied. It uses CSS
+ * transitions to perform a short animation.
+ */
+class CopyButton {
+ constructor(getCopyContentsFn) {
+ const button = document.createElement("span");
+ button.textContent = String.fromCodePoint(0x1f4cb);
+ button.classList.add("copy-button", "copy-button-base");
+ button.onclick = () => {
+ if (!button.classList.contains("copy-button")) {
+ return;
+ }
+
+ const handleAnimation = async () => {
+ const switchFadeDirection = () => {
+ if (button.classList.contains("copy-button-fade-out")) {
+ // We just faded out so let's fade in
+ button.classList.toggle("copy-button-fade-out");
+ button.classList.toggle("copy-button-fade-in");
+ } else {
+ // We just faded in so let's fade out
+ button.classList.toggle("copy-button-fade-out");
+ button.classList.toggle("copy-button-fade-in");
+ }
+ };
+
+ // Fade out clipboard icon
+ // Fade out the clipboard character
+ button.classList.toggle("copy-button-fade-out");
+ // Wait for CSS transition to end
+ await new Promise(r => (button.ontransitionend = r));
+
+ // Fade in checkmark icon
+ // This is the start of fade in.
+ // Switch to the checkmark character
+ button.textContent = String.fromCodePoint(0x2705);
+ // Trigger CSS fade in transition
+ switchFadeDirection();
+ // Wait for CSS transition to end
+ await new Promise(r => (button.ontransitionend = r));
+
+ // Fade out clipboard icon
+ // Trigger CSS fade out transition
+ switchFadeDirection();
+ // Wait for CSS transition to end
+ await new Promise(r => (button.ontransitionend = r));
+
+ // Fade in clipboard icon
+ // This is the start of fade in.
+ // Switch to the clipboard character
+ button.textContent = String.fromCodePoint(0x1f4cb);
+ // Trigger CSS fade in transition
+ switchFadeDirection();
+ // Wait for CSS transition to end
+ await new Promise(r => (button.ontransitionend = r));
+
+ // Remove fade
+ button.classList.toggle("copy-button-fade-in");
+ // Re-enable clicks and hidding when parent div has lost :hover
+ button.classList.add("copy-button");
+ };
+
+ // Note the fade effect is handled in the CSS, we just need to swap
+ // between the different CSS classes. This returns a promise that waits
+ // for the current fade to end, starts the next fade, then resolves.
+
+ navigator.clipboard.writeText(getCopyContentsFn());
+ // Prevent animation from disappearing when parent div losses :hover,
+ // and prevent additional clicks until the animation finishes.
+ button.classList.remove("copy-button");
+ handleAnimation(); // runs unawaited
+ };
+ this.element = button;
+ }
+}
+export { CopyButton };