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 =
;
const catContainer = {catHeader}{catBody}
;
+ 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,