[skip ci] integrate animations to vars

sylviiu · Mar 5, 2024 · 94250b5 · 94250b5
1 parent 44e266c
commit 94250b5
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 65 deletions.
diff --git a/html/topjs/disableAnimations.js b/html/topjs/disableAnimations.js
diff --git a/html/topjs/vars.js b/html/topjs/vars.js
@@ -29,31 +29,108 @@ var genericURLRegex = /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-
 
 var markdown = new showdown.Converter({ parseImgDimensions: true });
 
-var postChangeHook = () => {
+var postChangeHook = (newConf) => {
     if(typeof theme == `function`) {
         console.log(`Updating theme`)
         theme()
     };
 
     if(typeof useWindow.disableAnimations == `function`) {
         console.log(`Disabling animations (via useWindow)`)
-        useWindow.disableAnimations()
+        useWindow.disableAnimations(newConf)
     } else if(typeof disableAnimations == `function`) {
         console.log(`Disabling animations`)
-        disableAnimations()
+        disableAnimations(newConf)
     };
 }
 
 if(window == useWindow) {
     configuration.get().then(newConf => { 
         Object.assign(config, newConf);
         postChangeHook();
+
+        if(typeof window.rawAnimeFunc == `undefined`) {
+            anime.suspendWhenDocumentHidden = false;
+
+            window.rawAnimeFunc = anime;
+
+            window.rawAnimeFunc._onDocumentVisibility = () => {
+                console.log(`[ignored root] document visibility changed (${e})`)
+            }
+        }
+
+        var disableAnimations = (useConf) => {
+            if((useConf || typeof config == `object` ? config : {}).animations.disableAnimations) {
+                console.log(`Disabling animations (crudely)`)
+
+                window.anime = (obj) => {
+                    /*const parseTargetStyle = (target) => {
+                        if(target && target.style) {
+                            const computedStyle = window.getComputedStyle(target);
+                            for(const key of Object.keys(obj)) {
+                                if(typeof computedStyle[key] != `undefined`) {
+                                    console.log(key, obj[key])
+        
+                                    if(typeof obj[key] == `object` && typeof obj[key].length == `number`) {
+                                        target.style[key] = `${obj[key].slice(-1)[0]}`;
+                                    } else {
+                                        target.style[key] = `${obj[key]}`;
+                                    };
+        
+                                    //delete obj[key];
+                                }
+                            }
+                        }
+                    }
+        
+                    if(obj.targets && obj.targets.forEach) {
+                        obj.targets.forEach(parseTargetStyle)
+                    } else parseTargetStyle(obj.targets || obj.target)*/
+
+                    return window.rawAnimeFunc(Object.assign(obj, { 
+                        easing: `linear`,
+                        duration: 0,
+                        delay: 0,
+                    }))
+                };
+
+                Object.assign(anime, window.rawAnimeFunc)
+
+                //anime.remove = () => null;
+            } else {
+                console.log(`Keeping animations (config: ${typeof config})`);
+
+                window.anime = window.rawAnimeFunc;
+
+                //anime.remove = (...args) => rawAnimeFunc.remove(...args);
+            }
+        }
+
+        disableAnimations(newConf);
+
+        configuration.hook(disableAnimations);
     });
-} else if(typeof config != `undefined`) postChangeHook();
+} else {
+    Object.assign(window, {
+        get anime() {
+            return useWindow.anime;
+        },
+        set anime(newAnime) {
+            return useWindow.anime = newAnime;
+        },
+        get rawAnimeFunc() {
+            return useWindow.rawAnimeFunc;
+        },
+        set rawAnimeFunc(newAnime) {
+            return useWindow.rawAnimeFunc = newAnime;
+        },
+    })
+    if(typeof config != `undefined`) postChangeHook(config);
+}
 
 useWindow.configuration.hook(newConf => {
     Object.assign(config, newConf);
-    postChangeHook();
+    postChangeHook(newConf);
 });
 
 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => typeof theme == `function` ? theme() : null);