From f337437c35623e4faabd4c5666e628ed8971e509 Mon Sep 17 00:00:00 2001 From: Simon Li Date: Fri, 12 Jul 2024 13:52:31 +0100 Subject: [PATCH 1/4] Close clipboard if clicked outside --- js/clipboard.js | 15 ++++++++++++++- js/index.js | 1 + tests/test_browser.py | 6 ++++-- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/js/clipboard.js b/js/clipboard.js index 6a5f6659..ef2a26ae 100644 --- a/js/clipboard.js +++ b/js/clipboard.js @@ -11,7 +11,7 @@ import "./clipboard.css"; * @param {Element} trigger * @param {Element} clipboard */ -export function setupClipboard(trigger, clipboard) { +export function setupClipboard(trigger, clipboard, canvas) { const arrowElement = clipboard.querySelector(".arrow"); function updatePosition() { computePosition(trigger, clipboard, { @@ -53,5 +53,18 @@ export function setupClipboard(trigger, clipboard) { trigger.classList.toggle("active"); updatePosition(); e.preventDefault(); + e.stopPropagation(); + }); + + // If the clipboard is clicked this should not be passed to the desktop + clipboard.addEventListener("click", (e) => { + e.stopPropagation(); + }); + // Close the popup if we click outside it + canvas.addEventListener("click", () => { + if (trigger.classList.contains("active")) { + clipboard.classList.toggle("hidden"); + trigger.classList.toggle("active"); + } }); } diff --git a/js/index.js b/js/index.js index 863f1112..e661ba60 100644 --- a/js/index.js +++ b/js/index.js @@ -85,6 +85,7 @@ function connect() { setupClipboard( document.getElementById("clipboard-button"), document.getElementById("clipboard-container"), + document.getElementsByTagName("canvas")[0], ); } diff --git a/tests/test_browser.py b/tests/test_browser.py index 9d702067..7d4b3038 100644 --- a/tests/test_browser.py +++ b/tests/test_browser.py @@ -58,10 +58,12 @@ def test_desktop(browser): # Open clipboard, enter random text, close clipboard clipboard_text = str(uuid4()) page1.get_by_role("link", name="Remote Clipboard").click() - page1.wait_for_selector("#clipboard-text") + expect(page1.locator("#clipboard-text")).to_be_visible() page1.locator("#clipboard-text").click() page1.locator("#clipboard-text").fill(clipboard_text) - page1.get_by_role("link", name="Remote Clipboard").click() + # Click outside clipboard, it should be closed + page1.locator("canvas").click(position={"x": 969, "y": 273}) + expect(page1.locator("#clipboard-text")).not_to_be_visible() # Exec into container to check clipboard contents for engine in ["docker", "podman"]: From b4ef5acdd8b0b48319568c6cbad2b85b4495d90b Mon Sep 17 00:00:00 2001 From: Simon Li Date: Fri, 12 Jul 2024 14:25:27 +0100 Subject: [PATCH 2/4] stopPropagation shouldn't be needed here since the button is outside the canvas/desktop --- js/clipboard.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/clipboard.js b/js/clipboard.js index ef2a26ae..6827590a 100644 --- a/js/clipboard.js +++ b/js/clipboard.js @@ -53,7 +53,6 @@ export function setupClipboard(trigger, clipboard, canvas) { trigger.classList.toggle("active"); updatePosition(); e.preventDefault(); - e.stopPropagation(); }); // If the clipboard is clicked this should not be passed to the desktop From 05c6af9cf4f55f25bc3b40dfa94e7c3a052087ac Mon Sep 17 00:00:00 2001 From: Simon Li Date: Sun, 14 Jul 2024 23:11:55 +0100 Subject: [PATCH 3/4] Close clipboard if clicked anywhere outside clipboard --- js/clipboard.js | 5 +++-- js/index.js | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/js/clipboard.js b/js/clipboard.js index 6827590a..78acd923 100644 --- a/js/clipboard.js +++ b/js/clipboard.js @@ -11,7 +11,7 @@ import "./clipboard.css"; * @param {Element} trigger * @param {Element} clipboard */ -export function setupClipboard(trigger, clipboard, canvas) { +export function setupClipboard(trigger, clipboard, parent) { const arrowElement = clipboard.querySelector(".arrow"); function updatePosition() { computePosition(trigger, clipboard, { @@ -53,6 +53,7 @@ export function setupClipboard(trigger, clipboard, canvas) { trigger.classList.toggle("active"); updatePosition(); e.preventDefault(); + e.stopPropagation(); }); // If the clipboard is clicked this should not be passed to the desktop @@ -60,7 +61,7 @@ export function setupClipboard(trigger, clipboard, canvas) { e.stopPropagation(); }); // Close the popup if we click outside it - canvas.addEventListener("click", () => { + parent.addEventListener("click", () => { if (trigger.classList.contains("active")) { clipboard.classList.toggle("hidden"); trigger.classList.toggle("active"); diff --git a/js/index.js b/js/index.js index e661ba60..c11a3e34 100644 --- a/js/index.js +++ b/js/index.js @@ -85,7 +85,7 @@ function connect() { setupClipboard( document.getElementById("clipboard-button"), document.getElementById("clipboard-container"), - document.getElementsByTagName("canvas")[0], + document.body, ); } From f88af7d19d79bd650dbb10e09fc0f47d1b44480c Mon Sep 17 00:00:00 2001 From: Simon Li Date: Mon, 15 Jul 2024 23:38:36 +0100 Subject: [PATCH 4/4] Clos clipboard if canvas or other element is clicked --- js/clipboard.js | 15 +++++++++------ js/index.js | 2 +- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/js/clipboard.js b/js/clipboard.js index 78acd923..89ef6363 100644 --- a/js/clipboard.js +++ b/js/clipboard.js @@ -10,8 +10,9 @@ import "./clipboard.css"; * Setup trigger element to toggle showing / hiding clipboard element * @param {Element} trigger * @param {Element} clipboard + * @param {Array[Element]} closers array of elements that should close the clipboard if clicked */ -export function setupClipboard(trigger, clipboard, parent) { +export function setupClipboard(trigger, clipboard, closers) { const arrowElement = clipboard.querySelector(".arrow"); function updatePosition() { computePosition(trigger, clipboard, { @@ -61,10 +62,12 @@ export function setupClipboard(trigger, clipboard, parent) { e.stopPropagation(); }); // Close the popup if we click outside it - parent.addEventListener("click", () => { - if (trigger.classList.contains("active")) { - clipboard.classList.toggle("hidden"); - trigger.classList.toggle("active"); - } + closers.forEach((el) => { + el.addEventListener("click", () => { + if (trigger.classList.contains("active")) { + clipboard.classList.toggle("hidden"); + trigger.classList.toggle("active"); + } + }); }); } diff --git a/js/index.js b/js/index.js index c11a3e34..f5d32a5c 100644 --- a/js/index.js +++ b/js/index.js @@ -85,7 +85,7 @@ function connect() { setupClipboard( document.getElementById("clipboard-button"), document.getElementById("clipboard-container"), - document.body, + [document.body, document.getElementsByTagName("canvas")[0]], ); }