Browse Source

added copy to clipboard

pull/75/head
jad2121 1 year ago
parent
commit
5e7d9b91ed
  1. 94
      client/gui/static/js/index.js
  2. 8
      client/gui/static/stylesheet/style.css

94
client/gui/static/js/index.js

@ -9,7 +9,33 @@ document.addEventListener("DOMContentLoaded", async function () {
const saveApiKeyButton = document.getElementById("saveApiKey"); const saveApiKeyButton = document.getElementById("saveApiKey");
const apiKeyInput = document.getElementById("apiKeyInput"); const apiKeyInput = document.getElementById("apiKeyInput");
const originalPlaceholder = userInput.placeholder; const originalPlaceholder = userInput.placeholder;
const copyButton = document.getElementById("copyButton"); const copyButton = document.createElement("button");
copyButton.textContent = "Copy";
copyButton.id = "copyButton";
document.addEventListener("click", function (e) {
if (e.target && e.target.id === "copyButton") {
// Your copy to clipboard function
copyToClipboard();
}
});
function htmlToPlainText(html) {
// Create a temporary div element to hold the HTML
var tempDiv = document.createElement("div");
tempDiv.innerHTML = html;
// Replace <br> tags with newline characters
tempDiv.querySelectorAll("br").forEach((br) => br.replaceWith("\n"));
// Replace block elements like <p> and <div> with newline characters
tempDiv.querySelectorAll("p, div").forEach((block) => {
block.prepend("\n"); // Add a newline before the block element's content
block.replaceWith(...block.childNodes); // Replace the block element with its own contents
});
// Return the text content, trimming leading and trailing newlines
return tempDiv.textContent.trim();
}
async function submitQuery(userInputValue) { async function submitQuery(userInputValue) {
userInput.value = ""; // Clear the input after submitting userInput.value = ""; // Clear the input after submitting
@ -18,7 +44,11 @@ document.addEventListener("DOMContentLoaded", async function () {
patternSelector.value patternSelector.value
); );
responseContainer.innerHTML = ""; // Clear previous responses responseContainer.innerHTML = ""; // Clear previous responses
responseContainer.classList.remove("hidden"); if (responseContainer.classList.contains("hidden")) {
console.log("contains hidden");
responseContainer.classList.remove("hidden");
responseContainer.appendChild(copyButton);
}
window.electronAPI.send( window.electronAPI.send(
"start-query-openai", "start-query-openai",
systemCommand, systemCommand,
@ -26,42 +56,43 @@ document.addEventListener("DOMContentLoaded", async function () {
); );
} }
function fallbackCopyTextToClipboard(text) { function copyToClipboard() {
const textArea = document.createElement("textarea"); const containerClone = responseContainer.cloneNode(true);
textArea.value = text; // Remove the copy button from the clone
const copyButtonClone = containerClone.querySelector("#copyButton");
if (copyButtonClone) {
copyButtonClone.parentNode.removeChild(copyButtonClone);
}
// Avoid scrolling to bottom // Convert HTML to plain text, preserving newlines
textArea.style.top = "0"; const plainText = htmlToPlainText(containerClone.innerHTML);
textArea.style.left = "0";
textArea.style.position = "fixed";
// Use a temporary textarea for copying
const textArea = document.createElement("textarea");
textArea.style.position = "absolute";
textArea.style.left = "-9999px";
textArea.setAttribute("aria-hidden", "true");
textArea.value = plainText;
document.body.appendChild(textArea); document.body.appendChild(textArea);
textArea.focus();
textArea.select(); textArea.select();
function copyToClipboard() { try {
try { document.execCommand("copy");
if (responseContainer.textContent) { console.log("Text successfully copied to clipboard");
text = responseContainer.textContent; } catch (err) {
} console.error("Failed to copy text: ", err);
if (navigator.clipboard) {
navigator.clipboard
.writeText(text)
.then(function () {
console.log("Text successfully copied to clipboard");
})
.catch(function (err) {
console.error("Error in copying text: ", err);
// Optionally, use fallback method here
});
} else {
fallbackCopyTextToClipboard(text);
}
} catch (err) {
console.error("Error in copying text: ", err);
}
} }
document.body.removeChild(textArea);
}
function fallbackCopyTextToClipboard(text) {
const textArea = document.createElement("textarea");
textArea.value = text;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try { try {
const successful = document.execCommand("copy"); const successful = document.execCommand("copy");
const msg = successful ? "successful" : "unsuccessful"; const msg = successful ? "successful" : "unsuccessful";
@ -147,6 +178,7 @@ document.addEventListener("DOMContentLoaded", async function () {
// Use systemCommand as part of the input for querying OpenAI // Use systemCommand as part of the input for querying OpenAI
}); });
// drag and drop
userInput.addEventListener("dragover", (event) => { userInput.addEventListener("dragover", (event) => {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();

8
client/gui/static/stylesheet/style.css

@ -127,7 +127,7 @@ body.light-theme .navbar-toggler-icon {
position: relative; /* Needed for absolute positioning of the child button */ position: relative; /* Needed for absolute positioning of the child button */
} }
.copy-button { #copyButton {
position: absolute; position: absolute;
top: 10px; /* Adjust as needed */ top: 10px; /* Adjust as needed */
right: 10px; /* Adjust as needed */ right: 10px; /* Adjust as needed */
@ -146,7 +146,7 @@ body.light-theme .navbar-toggler-icon {
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
.copy-button:hover { #copyButton:hover {
background-color: rgba( background-color: rgba(
0, 0,
123, 123,
@ -154,3 +154,7 @@ body.light-theme .navbar-toggler-icon {
0.8 0.8
); /* Slightly less transparent on hover */ ); /* Slightly less transparent on hover */
} }
#copyButton:focus {
outline: none;
}

Loading…
Cancel
Save