flashii/mami
1
0
Fork 0
Code Pull requests Releases Activity

Made animation on settings categories cancellable.

Browse source
This commit is contained in:
Pachira 2024-02-09 16:19:17 +00:00
parent af2919f363
commit 719e03e607
2 changed files with 20 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/mami.js/animate.js
View file

@ -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;
},
};

41
src/mami.js/ui/settings.jsx
View file

@ -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,