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

Made animation on settings categories cancellable.

Browse source
This commit is contained in:
flash 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 #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') if(typeof info !== 'object')
throw 'info must be an object'; throw 'info must be an object';
@ -54,7 +55,7 @@ const MamiAnimate = function(info) {
tCompletion = 0, tCompletion = 0,
started = !delayed; started = !delayed;
const update = function(tCurrent) { const update = tCurrent => {
if(tStart === undefined) { if(tStart === undefined) {
tStart = tCurrent; tStart = tCurrent;
if(onStart !== undefined) if(onStart !== undefined)
@ -116,12 +117,8 @@ const MamiAnimate = function(info) {
} }
return { return {
getCompletion: function() { getCompletion: () => tCompletion,
return tCompletion; getRawCompletion: () => tRawCompletion,
},
getRawCompletion: function() {
return tRawCompletion;
},
start: () => { start: () => {
if(!started) { if(!started) {
started = true; started = true;
@ -131,7 +128,7 @@ const MamiAnimate = function(info) {
if(promise !== undefined) if(promise !== undefined)
return promise; return promise;
}, },
cancel: function() { cancel: () => {
cancel = true; 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 catBody = <div class={['setting__category', `setting__category--${category.name}`]} style={{ overflow: 'hidden' }}/>;
const catContainer = <div>{catHeader}{catBody}</div>; const catContainer = <div>{catHeader}{catBody}</div>;
let anime, closed = false;
catHeader.onclick = () => { catHeader.onclick = () => {
if(catContainer.dataset.mamiAnimRun === 'yes') if(anime !== undefined) {
return; anime.cancel();
catContainer.dataset.mamiAnimRun = 'yes'; anime = undefined;
}
let start, update, end, height; let start, update, end, height;
if(catContainer.dataset.mamiIsClosed === 'yes') { if(closed) {
catContainer.dataset.mamiIsClosed = 'no';
start = () => { start = () => {
const curHeight = catBody.style.height; const curHeight = catBody.style.height;
catBody.style.height = null; catBody.style.height = null;
height = catBody.clientHeight; height = catBody.clientHeight;
catBody.style.height = curHeight; catBody.style.height = curHeight;
}; };
update = t => { update = t => catBody.style.height = `${height * t}px`;
catBody.style.height = `${height * t}px`; end = () => catBody.style.height = null;
};
end = () => {
catBody.style.height = null;
catContainer.dataset.mamiAnimRun = 'no';
};
} else { } else {
catContainer.dataset.mamiIsClosed = 'yes'; start = () => height = catBody.clientHeight;
update = t => catBody.style.height = `${height - (height * t)}px`;
start = () => { end = () => catBody.style.height = '0';
height = catBody.clientHeight;
};
update = t => {
catBody.style.height = `${height - (height * t)}px`;
};
end = () => {
catBody.style.height = '0';
catContainer.dataset.mamiAnimRun = 'no';
};
} }
// todo: actually make cancellable closed = !closed;
MamiAnimate({ anime = MamiAnimate({
duration: 500, duration: 500,
easing: 'outExpo', easing: 'outExpo',
start: start, start: start,