remove transition swapping on UI customization

This commit is contained in:
RossAscends
2023-04-21 04:33:46 +09:00
parent cb87ba2da1
commit f5582a62bc

View File

@ -95,9 +95,6 @@ const storage_keys = {
}; };
const chat = document.getElementById('chat'); const chat = document.getElementById('chat');
const chatTransition = window.getComputedStyle(chat).transition;
//Updated at the bottom of this script document based on 'focus' and 'blur' events
let browser_has_focus = true; let browser_has_focus = true;
function playMessageSound() { function playMessageSound() {
@ -162,66 +159,32 @@ function applySheldWidth() {
} }
async function applyThemeColor(type) { async function applyThemeColor(type) {
// temporarily unset transition from chat to not make the browser calculate the animation
chat.style.transition = 'unset';
if (type === 'main') { if (type === 'main') {
document.documentElement.style.setProperty('--SmartThemeBodyColor', power_user.main_text_color); document.documentElement.style.setProperty('--SmartThemeBodyColor', power_user.main_text_color);
} }
if (type === 'italics') { if (type === 'italics') {
document.documentElement.style.setProperty('--SmartThemeEmColor', power_user.italics_text_color); document.documentElement.style.setProperty('--SmartThemeEmColor', power_user.italics_text_color);
} }
if (type === 'fastUIBG') { if (type === 'fastUIBG') {
document.documentElement.style.setProperty('--SmartThemeFastUIBGColor', power_user.fastui_bg_color); document.documentElement.style.setProperty('--SmartThemeFastUIBGColor', power_user.fastui_bg_color);
} }
if (type === 'blurTint') { if (type === 'blurTint') {
document.documentElement.style.setProperty('--SmartThemeBlurTintColor', power_user.blur_tint_color); document.documentElement.style.setProperty('--SmartThemeBlurTintColor', power_user.blur_tint_color);
} }
// a small delay to let the browser do the layout redraw
await delay(1);
// set transition back to chat
chat.style.transition = chatTransition;
} }
async function applyBlurStrength() { async function applyBlurStrength() {
power_user.blur_strength = Number(localStorage.getItem(storage_keys.blur_strength) ?? 1); power_user.blur_strength = Number(localStorage.getItem(storage_keys.blur_strength) ?? 1);
// temporarily unset transition from chat to not make the browser calculate the animation
chat.style.transition = 'unset';
// now apply the blur strength to the document
document.documentElement.style.setProperty('--blurStrength', power_user.blur_strength); document.documentElement.style.setProperty('--blurStrength', power_user.blur_strength);
$("#blur_strength_counter").text(power_user.blur_strength); $("#blur_strength_counter").text(power_user.blur_strength);
// a small delay to let the browser do the layout redraw
await delay(1);
// set transition back to chat
chat.style.transition = chatTransition;
} }
async function applyFontScale() { async function applyFontScale() {
power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1); power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1);
// temporarily unset transition from chat to not make the browser calculate the animation
chat.style.transition = 'unset';
// now apply the font scale to the document
document.documentElement.style.setProperty('--fontScale', power_user.font_scale); document.documentElement.style.setProperty('--fontScale', power_user.font_scale);
$("#font_scale_counter").text(power_user.font_scale); $("#font_scale_counter").text(power_user.font_scale);
// a small delay to let the browser do the layout redraw
await delay(1);
// set transition back to chat
chat.style.transition = chatTransition;
} }
async function applyTheme(name) { async function applyTheme(name) {