Improved animation quality for users and settings sidebars.

src/mami.css/setting.css

@@ -3,10 +3,6 @@ select {
     accent-color: currentcolor;
 }
 
-.setting__category {
-    transition: max-height .2s;
-}
-
 .setting__category-title {
     font-size: 2em;
     line-height: 1.1em;

src/mami.js/ui/settings.jsx

@@ -1,3 +1,4 @@
+#include animate.js
 #include common.js
 #include emotes.js
 #include utility.js
@@ -462,32 +463,56 @@ Umi.UI.Settings = (function() {
     const createCategory = function(category) {
         const catHeader = <div class={['setting__category-title', `setting__category-title--${category.name}`]} style={{ cursor: 'pointer' }}>{category.title}</div>;
         const catBody = <div class={['setting__category', `setting__category--${category.name}`]} style={{ overflow: 'hidden' }}/>;
+        const catContainer = <div>{catHeader}{catBody}</div>;
 
         catHeader.onclick = () => {
-            if(catBody.dataset.mamiClosed) {
+            if(catContainer.dataset.mamiAnimRun === 'yes')
-                delete catBody.dataset.mamiClosed;
+                return;
-                catBody.style.maxHeight = null;
+            catContainer.dataset.mamiAnimRun = 'yes';
-                const meow = catBody.clientHeight;
-                catBody.style.maxHeight = '0';
-                setTimeout(function() {
-                    catBody.style.maxHeight = meow.toString() + 'px';
-                }, 50);
-            } else {
-                catBody.dataset.mamiClosed = 1;
-                if(!catBody.style.maxHeight) {
-                    catBody.style.maxHeight = catBody.clientHeight.toString() + 'px';
-                    setTimeout(function() {
-                        catBody.style.maxHeight = '0';
-                    }, 50);
-                } else catBody.style.maxHeight = '0';
-            }
-        };
 
-        if(category.collapse) {
+            let start, update, end, height;
-            catBody.dataset.mamiClosed = 1;
+
-            catBody.style.maxHeight = '0';
+            if(catContainer.dataset.mamiIsClosed === 'yes') {
+                catContainer.dataset.mamiIsClosed = 'no';
+
+                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';
+                };
+            } 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';
+                };
             }
 
+            // todo: actually make cancellable
+            MamiAnimate({
+                duration: 500,
+                easing: 'easeOutExpo',
+                start: start,
+                update: update,
+                end: end,
+            });
+        };
+
         if(category.warning)
             catBody.appendChild(<div style={{ fontSize: '.9em', lineHeight: '1.4em', margin: '5px', padding: '5px', backgroundColor: 'darkred', border: '2px solid red', borderRadius: '5px' }}>{category.warning}</div>);
 
@@ -495,10 +520,7 @@ Umi.UI.Settings = (function() {
             for(const item of category.items)
                 catBody.appendChild(createSetting(item));
 
-        return <div>
+        return catContainer;
-            {catHeader}
-            {catBody}
-        </div>;
     };
 
     return {
@@ -506,8 +528,15 @@ Umi.UI.Settings = (function() {
             const html = Umi.UI.Menus.Get('settings');
             $rc(html);
 
-            for(const category of items)
+            for(const category of items) {
-                html.appendChild(createCategory(category));
+                const elem = createCategory(category);
+
+                html.appendChild(elem);
+
+                // only a little bit of hacking, stan
+                if(category.collapse)
+                    elem.firstChild.click();
+            }
 
             html.appendChild(createCopyright());
         },

src/mami.js/ui/users.js

@@ -13,9 +13,7 @@ Umi.UI.Users = (function() {
             userOptions = $i(prefix + '-options-wrapper'),
             closedClass = 'sidebar__user-options--hidden',
             isClosed = userOptions.classList.contains(closedClass);
-        let update = null,
+        let start, update, end, height;
-            start = null,
-            end = null;
 
         if(prefix in toggleTimeouts) {
             clearTimeout(toggleTimeouts[prefix]);
@@ -29,21 +27,33 @@ Umi.UI.Users = (function() {
                         toggleUser(id);
                 }, 300000);
 
-            start = function() {
+            start = () => {
                 userOptions.classList.remove(closedClass);
+                const curHeight = userOptions.style.height;
+                userOptions.style.height = null;
+                height = userOptions.clientHeight;
+                userOptions.style.height = curHeight;
             };
             update = function(t) {
-                userOptions.style.maxHeight = (230 * t).toString() + 'px';
+                userOptions.style.height = `${height * t}px`;
+            };
+            end = () => {
+                userOptions.style.height = null;
             };
         } else {
-            end = function() {
+            start = () => {
-                userOptions.classList.add(closedClass);
+                height = userOptions.clientHeight;
             };
-            update = function(t) {
+            update = t => {
-                userOptions.style.maxHeight = (230 - (230 * t)).toString() + 'px';
+                userOptions.style.height = `${height - (height * t)}px`;
+            };
+            end = () => {
+                userOptions.style.height = '0';
+                userOptions.classList.add(closedClass);
             };
         }
 
+        // todo: actually make cancellable
         MamiAnimate({
             duration: 500,
             easing: 'easeOutExpo',