From 4e103c81904e55e80f1f693a8480840ca3bd1e6a Mon Sep 17 00:00:00 2001
From: SethBurkart123 <hi25S.burkart@hills.adventist.edu.au>
Date: Thu, 23 Nov 2023 10:29:34 +1100
Subject: [PATCH] add animation to settings popup

---
 src/SEQTA.js          | 49 ++++++++++++++++++++++++++++++++-----------
 src/css/injected.scss |  1 +
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/SEQTA.js b/src/SEQTA.js
index b9b80c44..e37fc980 100644
--- a/src/SEQTA.js
+++ b/src/SEQTA.js
@@ -795,8 +795,18 @@ async function CheckLoadOnPeriods() {
 export function closeSettings() {
   var extensionsettings = document.getElementById('ExtensionPopup');
 
+  if (SettingsClicked == true) {
+    console.log(SettingsClicked, "Closing Menu!")
+    extensionsettings.classList.add('hide');
+    animate(
+      '#ExtensionPopup',
+      { opacity: [1, 0], scale: [1, 0] },
+      { easing: spring({ stiffness: 220, damping: 18 }) }
+      );
+    SettingsClicked = false;
+  }
+
   extensionsettings.classList.add('hide');
-  SettingsClicked = false;
 }
 
 function addExtensionSettings() {
@@ -823,17 +833,17 @@ function addExtensionSettings() {
 
   const container = document.getElementById('container');
   const closeExtensionPopup = () => {
-    if (!SettingsClicked) {
-      extensionPopup.classList.add('hide');
-    }
+    extensionPopup.classList.add('hide');
+    animate(
+      '#ExtensionPopup',
+      { opacity: [1, 0], scale: [1, 0] },
+      { easing: [.22, .03, .26, 1] }
+    );
     SettingsClicked = false;
   };
   container.onclick = (event) => {
-    extensionIframe.contentWindow.postMessage('popupClosed', '*');
-    if (event.target.id !== 'AddedSettings') {
-      closeExtensionPopup();
-    } else {
-      SettingsClicked = false;
+    if (event.target.closest('#AddedSettings') == null && SettingsClicked) {
+      closeExtensionPopup()
     }
   };
 }
@@ -1360,11 +1370,26 @@ async function AddBetterSEQTAElements(toggle) {
       }
 
       var AddedSettings = document.getElementById('AddedSettings');
-      var extensionsettings = document.getElementById('ExtensionPopup');
+      var extensionPopup = document.getElementById('ExtensionPopup');
       
       AddedSettings.addEventListener('click', function () {
-        extensionsettings.classList.toggle('hide');
-        SettingsClicked = true;
+        if (SettingsClicked) {
+          extensionPopup.classList.add('hide');
+          animate(
+            '#ExtensionPopup',
+            { opacity: [1, 0], scale: [1, 0] },
+            { easing: spring({ stiffness: 220, damping: 18 }) }
+          );
+          SettingsClicked = false;      
+        } else {
+          extensionPopup.classList.remove('hide');
+          animate(
+            '#ExtensionPopup',
+            { opacity: [0, 1], scale: [0, 1] },
+            { easing: spring({ stiffness: 260, damping: 24 }) }
+          )
+          SettingsClicked = true;
+        }
       });
     }
   }
diff --git a/src/css/injected.scss b/src/css/injected.scss
index bc25f572..99e182dd 100644
--- a/src/css/injected.scss
+++ b/src/css/injected.scss
@@ -982,6 +982,7 @@ div > ol:has(.uiFileHandlerWrapper) {
 #ExtensionPopup {
   border-radius: 1rem;
   box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.6);
+  transform-origin: 70% 0;
 }
 #menu li.active {
   color: #ffffff !important;