diff --git a/interface/src/App.tsx b/interface/src/App.tsx index 97cd34de..3499d785 100644 --- a/interface/src/App.tsx +++ b/interface/src/App.tsx @@ -11,7 +11,6 @@ import Themes from './pages/Themes'; //import About from './pages/About'; const App: React.FC = () => { - const { standalone, setStandalone } = useSettingsContext(); useEffect(() => { @@ -35,7 +34,7 @@ const App: React.FC = () => { title: 'Themes', content: } - ]; + ]; return (
diff --git a/interface/src/components/Picker.tsx b/interface/src/components/Picker.tsx index 81f568ed..b3a5eb64 100644 --- a/interface/src/components/Picker.tsx +++ b/interface/src/components/Picker.tsx @@ -4,10 +4,28 @@ import { useSettingsContext } from '../SettingsContext'; import { motion } from "framer-motion"; import "./Picker.css"; +import { useEffect } from 'react'; export default function Picker() { const { settingsState, setSettingsState, showPicker, setShowPicker } = useSettingsContext(); + const handleMessage = (event: MessageEvent) => { + if (event.data === "popupClosed") { + setShowPicker(false); + } + }; + + useEffect(() => { + // Add event listener for 'message' event + window.addEventListener("message", handleMessage); + + // Cleanup + return () => { + window.removeEventListener("message", handleMessage); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + const colorChange = (color: string) => { setSettingsState({ ...settingsState, diff --git a/interface/src/components/TabbedContainer.tsx b/interface/src/components/TabbedContainer.tsx index 9e050d84..4a7108b1 100644 --- a/interface/src/components/TabbedContainer.tsx +++ b/interface/src/components/TabbedContainer.tsx @@ -11,6 +11,26 @@ const TabbedContainer: React.FC = ({ tabs }) => { const positionRef = useRef(position); const themeColor = useSettingsContext().settingsState.customThemeColor; + + // Function to handle message + const handleMessage = (event: MessageEvent) => { + if (event.data === "popupClosed") { + setActiveTab(0); + } + }; + + useEffect(() => { + // Add event listener for 'message' event + window.addEventListener("message", handleMessage); + + // Cleanup + return () => { + window.removeEventListener("message", handleMessage); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + useEffect(() => { const newPosition = -activeTab * 100; setPosition(newPosition); diff --git a/src/SEQTA.js b/src/SEQTA.js index bc8db29b..1f5524d4 100644 --- a/src/SEQTA.js +++ b/src/SEQTA.js @@ -788,6 +788,7 @@ function addExtensionSettings() { let iframe = document.createElement("iframe"); iframe.src = chrome.runtime.getURL("interface/index.html"); + iframe.id = "ExtensionIframe"; iframe.allowTransparency = "true"; iframe.style.width = "384px"; iframe.style.height = "600px"; @@ -798,11 +799,18 @@ function addExtensionSettings() { var container = document.getElementById("container"); var extensionsettings = document.getElementById("ExtensionPopup"); - container.onclick = function () { - if (!SettingsClicked) { - extensionsettings.classList.add("hide"); + var extensionIframe = document.getElementById("ExtensionIframe"); + + container.onclick = function (event) { + if (event.target.id !== "AddedSettings") { + if (!SettingsClicked) { + extensionsettings.classList.add("hide"); + extensionIframe.contentWindow.postMessage("popupClosed", "*"); + } + SettingsClicked = false; + } else { + SettingsClicked = false; } - SettingsClicked = false; }; } @@ -1329,9 +1337,8 @@ async function AddBetterSEQTAElements(toggle) { var AddedSettings = document.getElementById("AddedSettings"); var extensionsettings = document.getElementById("ExtensionPopup"); - + AddedSettings.addEventListener("click", function () { - extensionsettings.contentWindow.postMessage("popupClosed", "*"); extensionsettings.classList.toggle("hide"); SettingsClicked = true; });