diff --git a/public/index.html b/public/index.html
index 5635d12c0..da654f3fb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1103,7 +1103,7 @@
select
-
+
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index 1f2fe4a3f..101a08a38 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -23,8 +23,6 @@ const sheld_width = {
w1000px: 1,
}
-var font_scale = 1;
-
let power_user = {
collapse_newlines: false,
force_pygmalion_formatting: false,
@@ -43,7 +41,7 @@ let power_user = {
play_sound_unfocused: true,
sort_field: 'name',
sort_order: 'asc',
- font_scale: '1'
+ font_scale: 1,
};
const storage_keys = {
@@ -60,7 +58,7 @@ const storage_keys = {
avatar_style: "TavernAI_avatar_style",
chat_display: "TavernAI_chat_display",
sheld_width: "TavernAI_sheld_width",
- font_scale: "TavernAI_font_scale"
+ font_scale: "TavernAI_font_scale",
};
//Updated at the bottom of this script document based on 'focus' and 'blur' events
@@ -113,32 +111,23 @@ function applySheldWidth() {
r.style.setProperty('--sheldWidth', '800px');
}
}
-function applyFontScale() {
- const sliders = [
- {
- sliderId: "#font_scale",
- counterId: "#font_scale_counter",
- format: (val) => `${val}`,
- setValue: (val) => { font_scale = Number(val); },
- }
- ];
+async function applyFontScale() {
+ power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1);
- sliders.forEach(slider => {
- $(document).on("input", slider.sliderId, function () {
- const value = $(this).val();
- const formattedValue = slider.format(value);
- slider.setValue(value);
- $(slider.counterId).text(formattedValue);
- console.log('saving');
- saveSettingsDebounced();
- });
- });
+ // temporarily unset transition from chat to not make the browser calculate the animation
+ const chat = document.getElementById('chat');
+ const chatTransition = window.getComputedStyle(chat).transition;
+ chat.style.transition = 'unset';
- power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? chat_styles.DEFAULT);
- let r = document.documentElement;
- r.style.setProperty('--fontScale', power_user.font_scale);
- $("#font_scale_counter").html(power_user.font_scale);
+ // now apply the font scale to the document
+ document.documentElement.style.setProperty('--fontScale', 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;
}
applyAvatarStyle();
@@ -175,7 +164,7 @@ function loadPowerUserSettings(settings) {
power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND);
power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT);
power_user.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? sheld_width.DEFAULT);
- power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? font_scale);
+ power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1);
$("#force-pygmalion-formatting-checkbox").prop("checked", power_user.force_pygmalion_formatting);
$("#collapse-newlines-checkbox").prop("checked", power_user.collapse_newlines);
@@ -290,8 +279,8 @@ $(document).ready(() => {
$(`input[name="font_scale"]`).on('input', function (e) {
power_user.font_scale = Number(e.target.value);
+ $("#font_scale_counter").text(power_user.font_scale);
localStorage.setItem(storage_keys.font_scale, power_user.font_scale);
- /* console.log("font scale: " + power_user.font_scale); */
applyFontScale();
});