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;
});