webui/js: opt dialog animation

Author: KOWX712

webui/index.js

@@ -330,6 +330,56 @@ function initSwitch(path, id) {
     });
 }
 
+// Overwrite default dialog animation
+document.querySelectorAll('md-dialog').forEach(dialog => {
+    const defaulfOpenAnim = dialog.getOpenAnimation;
+    const defaultCloseAnim = dialog.getCloseAnimation;
+
+    dialog.getOpenAnimation = () => {
+        const defaultAnim = defaulfOpenAnim.call(dialog);
+        const customAnim = {};
+        Object.keys(defaultAnim).forEach(key => customAnim[key] = defaultAnim[key]);
+
+        customAnim.dialog = [
+            [
+                [{ opacity: 0, transform: 'translateY(50px)' }, { opacity: 1, transform: 'translateY(0)' }],
+                { duration: 300, easing: 'ease' }
+            ]
+        ];
+        customAnim.scrim = [
+            [
+                [{'opacity': 0}, {'opacity': 0.32}],
+                {duration: 300, easing: 'linear'},
+            ],
+        ];
+        customAnim.container = [];
+
+        return customAnim;
+    };
+
+    dialog.getCloseAnimation = () => {
+        const defaultAnim = defaultCloseAnim.call(dialog);
+        const customAnim = {};
+        Object.keys(defaultAnim).forEach(key => customAnim[key] = defaultAnim[key]);
+
+        customAnim.dialog = [
+            [
+                [{ opacity: 1, transform: 'translateY(0)' }, { opacity: 0, transform: 'translateY(-50px)' }],
+                { duration: 300, easing: 'ease' }
+            ]
+        ];
+        customAnim.scrim = [
+            [
+                [{'opacity': 0.32}, {'opacity': 0}],
+                {duration: 300, easing: 'linear'},
+            ],
+        ];
+        customAnim.container = [];
+
+        return customAnim;
+    };
+});
+
 document.addEventListener('DOMContentLoaded', async () => {
     [config, configMetadata] = await Promise.all([file.loadConfig(), file.loadConfigMetadata()]);
     const advanced = document.getElementById('advanced');