From 719e03e60728401c3f40e3a9be63ce648e8c352e Mon Sep 17 00:00:00 2001
From: flashwave <me@flash.moe>
Date: Fri, 9 Feb 2024 16:19:17 +0000
Subject: [PATCH] Made animation on settings categories cancellable.

---
 src/mami.js/animate.js      | 15 ++++++--------
 src/mami.js/ui/settings.jsx | 41 +++++++++++++------------------------
 2 files changed, 20 insertions(+), 36 deletions(-)

diff --git a/src/mami.js/animate.js b/src/mami.js/animate.js
index dd913e4..06928e6 100644
--- a/src/mami.js/animate.js
+++ b/src/mami.js/animate.js
@@ -1,6 +1,7 @@
 #include easings.js
 
-const MamiAnimate = function(info) {
+// This probably need a bit of a rewrite at some point to allow starting for arbitrary time points
+const MamiAnimate = info => {
     if(typeof info !== 'object')
         throw 'info must be an object';
 
@@ -54,7 +55,7 @@ const MamiAnimate = function(info) {
         tCompletion = 0,
         started = !delayed;
 
-    const update = function(tCurrent) {
+    const update = tCurrent => {
         if(tStart === undefined) {
             tStart = tCurrent;
             if(onStart !== undefined)
@@ -116,12 +117,8 @@ const MamiAnimate = function(info) {
     }
 
     return {
-        getCompletion: function() {
-            return tCompletion;
-        },
-        getRawCompletion: function() {
-            return tRawCompletion;
-        },
+        getCompletion: () => tCompletion,
+        getRawCompletion: () => tRawCompletion,
         start: () => {
             if(!started) {
                 started = true;
@@ -131,7 +128,7 @@ const MamiAnimate = function(info) {
             if(promise !== undefined)
                 return promise;
         },
-        cancel: function() {
+        cancel: () => {
             cancel = true;
         },
     };
diff --git a/src/mami.js/ui/settings.jsx b/src/mami.js/ui/settings.jsx
index 65de000..f39e7a9 100644
--- a/src/mami.js/ui/settings.jsx
+++ b/src/mami.js/ui/settings.jsx
@@ -475,46 +475,33 @@ Umi.UI.Settings = (function() {
         const catBody = <div class={['setting__category', `setting__category--${category.name}`]} style={{ overflow: 'hidden' }}/>;
         const catContainer = <div>{catHeader}{catBody}</div>;
 
+        let anime, closed = false;
+
         catHeader.onclick = () => {
-            if(catContainer.dataset.mamiAnimRun === 'yes')
-                return;
-            catContainer.dataset.mamiAnimRun = 'yes';
+            if(anime !== undefined) {
+                anime.cancel();
+                anime = undefined;
+            }
 
             let start, update, end, height;
 
-            if(catContainer.dataset.mamiIsClosed === 'yes') {
-                catContainer.dataset.mamiIsClosed = 'no';
-
+            if(closed) {
                 start = () => {
                     const curHeight = catBody.style.height;
                     catBody.style.height = null;
                     height = catBody.clientHeight;
                     catBody.style.height = curHeight;
                 };
-                update = t => {
-                    catBody.style.height = `${height * t}px`;
-                };
-                end = () => {
-                    catBody.style.height = null;
-                    catContainer.dataset.mamiAnimRun = 'no';
-                };
+                update = t => catBody.style.height = `${height * t}px`;
+                end = () => catBody.style.height = null;
             } else {
-                catContainer.dataset.mamiIsClosed = 'yes';
-
-                start = () => {
-                    height = catBody.clientHeight;
-                };
-                update = t => {
-                    catBody.style.height = `${height - (height * t)}px`;
-                };
-                end = () => {
-                    catBody.style.height = '0';
-                    catContainer.dataset.mamiAnimRun = 'no';
-                };
+                start = () => height = catBody.clientHeight;
+                update = t => catBody.style.height = `${height - (height * t)}px`;
+                end = () => catBody.style.height = '0';
             }
 
-            // todo: actually make cancellable
-            MamiAnimate({
+            closed = !closed;
+            anime = MamiAnimate({
                 duration: 500,
                 easing: 'outExpo',
                 start: start,