rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix themes application, refactor user settings

Browse Source
This commit is contained in:
RossAscends
2023-09-22 22:16:24 +09:00
parent b1ab1451ec
commit 54c37e945b
5 changed files with 364 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
public/scripts/power-user.js
View File

@ -149,7 +149,6 @@ let power_user = {
render_formulas: false,
allow_name1_display: false,
allow_name2_display: false,
//removeXML: false,
hotswap_enabled: true,
timer_enabled: true,
timestamps_enabled: true,
@ -378,6 +377,18 @@ function switchTokenCount() {
$("#messageTokensEnabled").prop("checked", power_user.message_token_count_enabled);
}
function switchMesIDDisplay() {
const value = localStorage.getItem(storage_keys.mesIDDisplay_enabled);
let before = power_user.mesIDDisplay_enabled;
power_user.mesIDDisplay_enabled = value === null ? true : value == "true";
/* console.log(`
localstorage value:${value},
poweruser before:${before},
poweruser after:${power_user.mesIDDisplay_enabled}`) */
$("body").toggleClass("no-mesIDDisplay", !power_user.mesIDDisplay_enabled);
$("#mesIDDisplayEnabled").prop("checked", power_user.mesIDDisplay_enabled);
}
function switchMessageActions() {
const value = localStorage.getItem(storage_keys.expand_message_actions);
power_user.expand_message_actions = value === null ? false : value == "true";
@ -385,18 +396,15 @@ function switchMessageActions() {
$("#expandMessageActions").prop("checked", power_user.expand_message_actions);
}
function switchMesIDDisplay() {
const value = localStorage.getItem(storage_keys.mesIDDisplay_enabled);
power_user.mesIDDisplay_enabled = value === null ? true : value == "true";
$("body").toggleClass("no-mesIDDisplay", !power_user.mesIDDisplay_enabled);
$("#MesIDDisplayEnabled").prop("checked", power_user.mesIDDisplay_enabled);
}
function switchUiMode() {
const fastUi = localStorage.getItem(storage_keys.fast_ui_mode);
power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
$("body").toggleClass("no-blur", power_user.fast_ui_mode);
$("#fast_ui_mode").prop("checked", power_user.fast_ui_mode);
if (power_user.fast_ui_mode) {
$("#blur-strength-block").css('opacity', '0.2')
$("#blur_strength").prop('disabled', true)
} else { $("#blur-strength-block").css('opacity', '1') }
}
function toggleWaifu() {
@ -452,13 +460,18 @@ function noShadows() {
power_user.noShadows = noShadows === null ? false : noShadows == "true";
$("body").toggleClass("noShadows", power_user.noShadows);
$("#noShadowsmode").prop("checked", power_user.noShadows);
if (power_user.noShadows) {
$("#shadow-width-block").css('opacity', '0.2')
$("#shadow_width").prop('disabled', true)
} else { $("#shadow-width-block").css('opacity', '1') }
scrollChatToBottom();
}
function applyAvatarStyle() {
power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND);
$("body").toggleClass("big-avatars", power_user.avatar_style === avatar_styles.RECTANGULAR);
$(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
$("#avatar_style").val(power_user.avatar_style).prop("selected", true);
//$(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
}
@ -468,9 +481,8 @@ function applyChatDisplay() {
console.debug('applyChatDisplay: saw no chat display type defined')
return
}
console.debug(`applyChatDisplay: applying ${power_user.chat_display}`)
$(`#chat_display option[value=${power_user.chat_display}]`).attr("selected", true)
console.debug(`poweruser.chat_display ${power_user.chat_display}`)
$("#chat_display").val(power_user.chat_display).prop("selected", true);
switch (power_user.chat_display) {
case 0: {
@ -494,11 +506,20 @@ function applyChatDisplay() {
}
}
function applyChatWidth() {
function applyChatWidth(type) {
power_user.chat_width = Number(localStorage.getItem(storage_keys.chat_width) ?? 50);
let r = document.documentElement;
r.style.setProperty('--sheldWidth', `${power_user.chat_width}vw`);
$('#chat_width_slider').val(power_user.chat_width);
if (type === 'forced') {
let r = document.documentElement;
r.style.setProperty('--sheldWidth', `${power_user.chat_width}vw`);
$('#chat_width_slider').val(power_user.chat_width);
//document.documentElement.style.setProperty('--sheldWidth', power_user.chat_width);
} else {
//this is to prevent the slider from updating page in real time
$("#chat_width_slider").off('mouseup touchend').on('mouseup touchend', () => {
document.documentElement.style.setProperty('--sheldWidth', `${power_user.chat_width}vw`);
})
}
}
async function applyThemeColor(type) {
@ -540,6 +561,7 @@ async function applyBlurStrength() {
$("#blur_strength_counter").text(power_user.blur_strength);
$("#blur_strength").val(power_user.blur_strength);
}
async function applyShadowWidth() {
@ -649,55 +671,55 @@ async function applyTheme(name) {
}
localStorage.setItem(storage_keys.chat_width, String(power_user.chat_width));
applyChatWidth();
applyChatWidth('forced');
}
},
{
key: 'timer_enabled',
action: async () => {
localStorage.setItem(storage_keys.timer_enabled, String(power_user.timer_enabled));
localStorage.setItem(storage_keys.timer_enabled, Boolean(power_user.timer_enabled));
switchTimer();
}
},
{
key: 'timestamps_enabled',
action: async () => {
localStorage.setItem(storage_keys.timestamps_enabled, String(power_user.timestamps_enabled));
localStorage.setItem(storage_keys.timestamps_enabled, Boolean(power_user.timestamps_enabled));
switchTimestamps();
}
},
{
key: 'timestamp_model_icon',
action: async () => {
localStorage.setItem(storage_keys.timestamp_model_icon, String(power_user.timestamp_model_icon));
localStorage.setItem(storage_keys.timestamp_model_icon, Boolean(power_user.timestamp_model_icon));
switchIcons();
}
},
{
key: 'message_token_count',
key: 'message_token_count_enabled',
action: async () => {
localStorage.setItem(storage_keys.message_token_count_enabled, String(power_user.message_token_count_enabled));
localStorage.setItem(storage_keys.message_token_count_enabled, Boolean(power_user.message_token_count_enabled));
switchTokenCount();
}
},
{
key: 'mesIDDisplay_enabled',
action: async () => {
localStorage.setItem(storage_keys.mesIDDisplay_enabled, String(power_user.mesIDDisplay_enabled));
localStorage.setItem(storage_keys.mesIDDisplay_enabled, Boolean(power_user.mesIDDisplay_enabled));
switchMesIDDisplay();
}
},
{
key: 'expand_message_actions',
action: async () => {
localStorage.setItem(storage_keys.expand_message_actions, String(power_user.expand_message_actions));
localStorage.setItem(storage_keys.expand_message_actions, Boolean(power_user.expand_message_actions));
switchMessageActions();
}
},
{
key: 'hotswap_enabled',
action: async () => {
localStorage.setItem(storage_keys.hotswap_enabled, String(power_user.hotswap_enabled));
localStorage.setItem(storage_keys.hotswap_enabled, Boolean(power_user.hotswap_enabled));
switchHotswap();
}
}
@ -753,7 +775,7 @@ function showDebugMenu() {
switchUiMode();
applyFontScale('forced');
applyThemeColor();
applyChatWidth();
applyChatWidth('forced');
applyAvatarStyle();
applyBlurStrength();
applyShadowWidth();
@ -794,6 +816,8 @@ function loadPowerUserSettings(settings, data) {
const timer = localStorage.getItem(storage_keys.timer_enabled);
const timestamps = localStorage.getItem(storage_keys.timestamps_enabled);
const mesIDDisplay = localStorage.getItem(storage_keys.mesIDDisplay_enabled);
const expandMessageActions = localStorage.getItem(storage_keys.expand_message_actions);
console.log(expandMessageActions)
power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
power_user.movingUI = movingUI === null ? false : movingUI == "true";
power_user.noShadows = noShadows === null ? false : noShadows == "true";
@ -801,6 +825,8 @@ function loadPowerUserSettings(settings, data) {
power_user.timer_enabled = timer === null ? true : timer == "true";
power_user.timestamps_enabled = timestamps === null ? true : timestamps == "true";
power_user.mesIDDisplay_enabled = mesIDDisplay === null ? true : mesIDDisplay == "true";
power_user.expand_message_actions = expandMessageActions === null ? true : expandMessageActions == "true";
console.log(power_user.expand_message_actions)
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.chat_width = Number(localStorage.getItem(storage_keys.chat_width) ?? 50);
@ -896,7 +922,6 @@ function loadPowerUserSettings(settings, data) {
$("#main-text-color-picker").attr('color', power_user.main_text_color);
$("#italics-color-picker").attr('color', power_user.italics_text_color);
$("#quote-color-picker").attr('color', power_user.quote_text_color);
//$("#fastui-bg-color-picker").attr('color', power_user.fastui_bg_color);
$("#blur-tint-color-picker").attr('color', power_user.blur_tint_color);
$("#chat-tint-color-picker").attr('color', power_user.chat_tint_color);
$("#user-mes-blur-tint-color-picker").attr('color', power_user.user_mes_blur_tint_color);
@ -1234,7 +1259,6 @@ async function saveTheme() {
main_text_color: power_user.main_text_color,
italics_text_color: power_user.italics_text_color,
quote_text_color: power_user.quote_text_color,
//fastui_bg_color: power_user.fastui_bg_color,
blur_tint_color: power_user.blur_tint_color,
chat_tint_color: power_user.chat_tint_color,
user_mes_blur_tint_color: power_user.user_mes_blur_tint_color,
@ -1252,9 +1276,14 @@ async function saveTheme() {
timer_enabled: power_user.timer_enabled,
timestamps_enabled: power_user.timestamps_enabled,
timestamp_model_icon: power_user.timestamp_model_icon,
mesIDDisplay_enabled: power_user.mesIDDisplay_enabled,
message_token_count_enabled: power_user.message_token_count_enabled,
expand_message_actions: power_user.expand_message_actions,
hotswap_enabled: power_user.hotswap_enabled,
};
const response = await fetch('/savetheme', {
@ -1853,40 +1882,45 @@ $(document).ready(() => {
power_user.fast_ui_mode = $(this).prop("checked");
localStorage.setItem(storage_keys.fast_ui_mode, power_user.fast_ui_mode);
switchUiMode();
saveSettingsDebounced();
});
$("#waifuMode").on('change', () => {
power_user.waifuMode = $('#waifuMode').prop("checked");
saveSettingsDebounced();
switchWaifuMode();
saveSettingsDebounced();
});
$("#movingUImode").change(function () {
power_user.movingUI = $(this).prop("checked");
localStorage.setItem(storage_keys.movingUI, power_user.movingUI);
switchMovingUI();
saveSettingsDebounced();
});
$("#noShadowsmode").change(function () {
power_user.noShadows = $(this).prop("checked");
localStorage.setItem(storage_keys.noShadows, power_user.noShadows);
noShadows();
saveSettingsDebounced();
});
$("#movingUIreset").on('click', resetMovablePanels);
$(`input[name="avatar_style"]`).on('input', function (e) {
power_user.avatar_style = Number(e.target.value);
$("#avatar_style").on('change', function () {
const value = $(this).find(':selected').val();
power_user.avatar_style = Number(value);
localStorage.setItem(storage_keys.avatar_style, power_user.avatar_style);
applyAvatarStyle();
saveSettingsDebounced();
});
$("#chat_display").on('change', function () {
console.debug('###CHAT DISPLAY SELECTOR CHANGE###')
const value = $(this).find(':selected').val();
power_user.chat_display = Number(value);
saveSettingsDebounced();
localStorage.setItem(storage_keys.chat_display, power_user.chat_display);
applyChatDisplay();
saveSettingsDebounced();
});
@ -1902,6 +1936,7 @@ $(document).ready(() => {
$("#font_scale_counter").text(power_user.font_scale);
localStorage.setItem(storage_keys.font_scale, power_user.font_scale);
await applyFontScale();
saveSettingsDebounced();
});
$(`input[name="blur_strength"]`).on('input', async function (e) {
@ -1909,6 +1944,7 @@ $(document).ready(() => {
$("#blur_strength_counter").text(power_user.blur_strength);
localStorage.setItem(storage_keys.blur_strength, power_user.blur_strength);
await applyBlurStrength();
saveSettingsDebounced();
});
$(`input[name="shadow_width"]`).on('input', async function (e) {
@ -1916,6 +1952,7 @@ $(document).ready(() => {
$("#shadow_width_counter").text(power_user.shadow_width);
localStorage.setItem(storage_keys.shadow_width, power_user.shadow_width);
await applyShadowWidth();
saveSettingsDebounced();
});
$("#main-text-color-picker").on('change', (evt) => {
@ -2132,49 +2169,49 @@ $(document).ready(() => {
$("#messageTimerEnabled").on("input", function () {
const value = !!$(this).prop('checked');
power_user.timer_enabled = value;
localStorage.setItem(storage_keys.timer_enabled, String(power_user.timer_enabled));
localStorage.setItem(storage_keys.timer_enabled, Boolean(power_user.timer_enabled));
switchTimer();
});
$("#messageTimestampsEnabled").on("input", function () {
const value = !!$(this).prop('checked');
power_user.timestamps_enabled = value;
localStorage.setItem(storage_keys.timestamps_enabled, String(power_user.timestamps_enabled));
localStorage.setItem(storage_keys.timestamps_enabled, Boolean(power_user.timestamps_enabled));
switchTimestamps();
});
$("#messageModelIconEnabled").on("input", function () {
const value = !!$(this).prop('checked');
power_user.timestamp_model_icon = value;
localStorage.setItem(storage_keys.timestamp_model_icon, String(power_user.timestamp_model_icon));
localStorage.setItem(storage_keys.timestamp_model_icon, Boolean(power_user.timestamp_model_icon));
switchIcons();
});
$("#messageTokensEnabled").on("input", function () {
const value = !!$(this).prop('checked');
power_user.message_token_count_enabled = value;
localStorage.setItem(storage_keys.message_token_count_enabled, String(power_user.message_token_count_enabled));
localStorage.setItem(storage_keys.message_token_count_enabled, Boolean(power_user.message_token_count_enabled));
switchTokenCount();
});
$("#expandMessageActions").on("input", function () {
const value = !!$(this).prop('checked');
power_user.expand_message_actions = value;
localStorage.setItem(storage_keys.expand_message_actions, String(power_user.expand_message_actions));
localStorage.setItem(storage_keys.expand_message_actions, Boolean(power_user.expand_message_actions));
switchMessageActions();
});
$("#mesIDDisplayEnabled").on("input", function () {
const value = !!$(this).prop('checked');
power_user.mesIDDisplay_enabled = value;
localStorage.setItem(storage_keys.mesIDDisplay_enabled, String(power_user.mesIDDisplay_enabled));
localStorage.setItem(storage_keys.mesIDDisplay_enabled, Boolean(power_user.mesIDDisplay_enabled));
switchMesIDDisplay();
});
$("#hotswapEnabled").on("input", function () {
const value = !!$(this).prop('checked');
power_user.hotswap_enabled = value;
localStorage.setItem(storage_keys.hotswap_enabled, String(power_user.hotswap_enabled));
localStorage.setItem(storage_keys.hotswap_enabled, Boolean(power_user.hotswap_enabled));
switchHotswap();
});