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 apiKeyInput = document.getElementById("apiKeyInput");
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) {
userInput.value = ""; // Clear the input after submitting
@ -18,7 +44,11 @@ document.addEventListener("DOMContentLoaded", async function () {
patternSelector.value
);
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(
"start-query-openai",
systemCommand,
@ -26,42 +56,43 @@ document.addEventListener("DOMContentLoaded", async function () {
);
}
function fallbackCopyTextToClipboard(text) {
const textArea = document.createElement("textarea");
textArea.value = text;
function copyToClipboard() {
const containerClone = responseContainer.cloneNode(true);
// Remove the copy button from the clone
const copyButtonClone = containerClone.querySelector("#copyButton");
if (copyButtonClone) {
copyButtonClone.parentNode.removeChild(copyButtonClone);
}
// Avoid scrolling to bottom
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
// Convert HTML to plain text, preserving newlines
const plainText = htmlToPlainText(containerClone.innerHTML);
// 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);
textArea.focus();
textArea.select();
function copyToClipboard() {
try {
if (responseContainer.textContent) {
text = responseContainer.textContent;
}
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);
}
try {
document.execCommand("copy");
console.log("Text successfully copied to clipboard");
} catch (err) {
console.error("Failed to copy 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 {
const successful = document.execCommand("copy");
const msg = successful ? "successful" : "unsuccessful";
@ -147,6 +178,7 @@ document.addEventListener("DOMContentLoaded", async function () {
// Use systemCommand as part of the input for querying OpenAI
});
// drag and drop
userInput.addEventListener("dragover", (event) => {
event.stopPropagation();
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 */
}
.copy-button {
#copyButton {
position: absolute;
top: 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;
}
.copy-button:hover {
#copyButton:hover {
background-color: rgba(
0,
123,
@ -154,3 +154,7 @@ body.light-theme .navbar-toggler-icon {
0.8
); /* Slightly less transparent on hover */
}
#copyButton:focus {
outline: none;
}

Loading…
Cancel
Save