From cf0bf8d60666be05367cce964ad1c051dc081894 Mon Sep 17 00:00:00 2001
From: saicaca <zephyird@gmail.com>
Date: Fri, 6 Oct 2023 02:59:56 +0800
Subject: [PATCH] fix: temporary solution for ViewTransitions flickr issue

(cherry picked from commit 76c65f0ede9db821b84ecd0a4085da653235c6fa)
---
 src/components/widget/DisplaySetting.astro | 47 ------------
 src/layouts/Layout.astro                   | 84 +++++++++++++++++++++-
 2 files changed, 82 insertions(+), 49 deletions(-)

diff --git a/src/components/widget/DisplaySetting.astro b/src/components/widget/DisplaySetting.astro
index 19971d5..9105d14 100644
--- a/src/components/widget/DisplaySetting.astro
+++ b/src/components/widget/DisplaySetting.astro
@@ -39,53 +39,6 @@ const enableBanner = getConfig().banner.enable;
 
 </div>
 
-<script is:raw>
-(function () {
-    let presetList = document.getElementById("preset-list");
-    let output = document.getElementById("hueValue");
-    let slider = document.getElementById("colorSlider");
-    output.innerHTML = slider.value; // Display the default slider value
-
-    let r = document.querySelector(':root');
-    function setHue(hue) {
-        localStorage.setItem('hue', hue);
-        output.innerHTML = hue;
-        slider.value = hue;
-
-        r.style.setProperty(`--hue`, hue);
-    }
-
-    let storedHue = localStorage.getItem('hue');
-    if (storedHue) {
-        setHue(storedHue);
-    }
-
-    presetList.onclick = function(event) {
-        let hue = event.target.dataset.hue;
-        if (hue) {
-            setHue(hue);
-        }
-    }
-
-    slider.oninput = function() {
-        let hue = this.value;
-        output.innerHTML = this.value;
-        setHue(hue);
-    }
-
-    document.addEventListener("click", event => {
-        var cDom = document.getElementById("display-setting");
-        let settingBtn = document.getElementById("display-settings-switch");
-        var tDom = event.target;
-        if (cDom == tDom || cDom.contains(tDom) || settingBtn == tDom || settingBtn.contains(tDom)) {
-            return;
-        }
-        cDom.classList.add("closed");
-    });
-
-})();
-
-</script>
 
 <style lang="stylus" is:global>
 #display-setting
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 0200b98..5b89152 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -158,7 +158,7 @@ html::view-transition-new(banner-ani) {
 
 }
 </style>
-<script>
+<script is:inline>
 /* Preload fonts */
 // (async function() {
 // 	try {
@@ -172,6 +172,81 @@ html::view-transition-new(banner-ani) {
 // 	}
 // })();
 
+/* TODO This is a temporary solution for style flicker issue when the transition is activated */
+/* issue link: https://github.com/withastro/astro/issues/8711, the solution get from here too */
+function disableAnimation() {
+	const css = document.createElement('style')
+	css.appendChild(
+		document.createTextNode(
+			`*{
+              -webkit-transition:none!important;
+              -moz-transition:none!important;
+              -o-transition:none!important;
+              -ms-transition:none!important;
+              transition:none!important
+              }`
+		)
+	)
+	console.log("add")
+	document.head.appendChild(css)
+
+	return () => {
+		// Force restyle
+		;(() => window.getComputedStyle(document.body))()
+
+		// Wait for next tick before removing
+		setTimeout(() => {
+			console.log("remove")
+			document.head.removeChild(css)
+		}, 1)
+	}
+}
+
+
+function activateDisplaySettings() {
+	let presetList = document.getElementById("preset-list");
+	let output = document.getElementById("hueValue");
+	let slider = document.getElementById("colorSlider");
+	output.innerHTML = slider.value; // Display the default slider value
+
+	let r = document.querySelector(':root');
+	function setHue(hue) {
+		localStorage.setItem('hue', hue);
+		output.innerHTML = hue;
+		slider.value = hue;
+
+		r.style.setProperty(`--hue`, hue);
+	}
+
+	let storedHue = localStorage.getItem('hue');
+	if (storedHue) {
+		setHue(storedHue);
+	}
+
+	presetList.onclick = function(event) {
+		let hue = event.target.dataset.hue;
+		if (hue) {
+			setHue(hue);
+		}
+	}
+
+	slider.oninput = function() {
+		let hue = this.value;
+		output.innerHTML = this.value;
+		setHue(hue);
+	}
+
+	document.addEventListener("click", event => {
+		var cDom = document.getElementById("display-setting");
+		let settingBtn = document.getElementById("display-settings-switch");
+		var tDom = event.target;
+		if (cDom == tDom || cDom.contains(tDom) || settingBtn == tDom || settingBtn.contains(tDom)) {
+			return;
+		}
+		cDom.classList.add("closed");
+	});
+}
+
 function loadTheme() {
 	if (localStorage.theme === 'dark' || (!('theme' in localStorage) &&
 		window.matchMedia('(prefers-color-scheme: dark)').matches)) {
@@ -200,8 +275,10 @@ function setBannerHeight() {
 }
 
 /* Load settings when entering the site */
+disableAnimation()()		// TODO
 loadTheme();
 loadHue();
+activateDisplaySettings();
 
 /* Load settings before swapping */
 /* astro:after-swap event happened before swap animation */
@@ -209,5 +286,8 @@ document.addEventListener('astro:after-swap', () => {
 	setBannerHeight();
 	loadTheme();
 	loadHue();
-}, { once: false });
+	disableAnimation()();		// TODO
+	activateDisplaySettings();
+	fb();
+});
 </script>
\ No newline at end of file