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

Add option to toggle magnification behaviour

Browse Source
This commit is contained in:
Kristan Schlikow
2024-04-14 16:59:51 +02:00
parent 384708f577
commit 835d6c71fa
3 changed files with 32 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/index.html
View File

@ -3739,6 +3739,11 @@
<span data-i18n="Tags as Folders">Tags as Folders</span> <span data-i18n="Tags as Folders">Tags as Folders</span>
<i title="Recent change: Tags must be marked as folders in the Tag Management menu to appear as such. Click here to bring it up." class="tags_view right_menu_button fa-solid fa-circle-exclamation"></i> <i title="Recent change: Tags must be marked as folders in the Tag Management menu to appear as such. Click here to bring it up." class="tags_view right_menu_button fa-solid fa-circle-exclamation"></i>
</label> </label>
<label for="zoomed_avatar_magnification" class="checkbox_label" title="Enable magnification for zoomed avatar display." data-i18n="[title]Enable magnification for zoomed avatar display.">
<input id="zoomed_avatar_magnification" type="checkbox" />
<span data-i18n="Avatar Hover Magnification">Avatar Hover Magnification</span>
<i title="Enables a magnification effect on hover when you display the zoomed avatar after clicking an avatar's image in chat." class="right_menu_button fa-solid fa-circle-exclamation"></i>
</label>
</div> </div>
<h4><span data-i18n="Miscellaneous">Miscellaneous</span></h4> <h4><span data-i18n="Miscellaneous">Miscellaneous</span></h4>
<div title="If set in the advanced character definitions, this field will be displayed in the characters list." data-i18n="[title]If set in the advanced character definitions, this field will be displayed in the characters list."> <div title="If set in the advanced character definitions, this field will be displayed in the characters list." data-i18n="[title]If set in the advanced character definitions, this field will be displayed in the characters list.">

19
public/script.js
View File

@ -10226,28 +10226,27 @@ jQuery(async function () {
$('body').append(newElement); $('body').append(newElement);
newElement.fadeIn(); newElement.fadeIn();
if (messageElement.attr('is_user') == 'true') { //handle user avatars const zoomedAvatarImgElement = $(`.zoomed_avatar[forChar="${charname}"] img`);
$(`.zoomed_avatar[forChar="${charname}"] img`).attr('src', thumbURL); if (messageElement.attr('is_user') == 'true' || (messageElement.attr('is_system') == 'true' && !isValidCharacter)) { //handle user and system avatars
$(`.zoomed_avatar[forChar="${charname}"] img`).attr('data-izoomify-url', thumbURL); zoomedAvatarImgElement.attr('src', thumbURL);
} else if (messageElement.attr('is_system') == 'true' && !isValidCharacter) { //handle system avatars zoomedAvatarImgElement.attr('data-izoomify-url', thumbURL);
$(`.zoomed_avatar[forChar="${charname}"] img`).attr('src', thumbURL);
$(`.zoomed_avatar[forChar="${charname}"] img`).attr('data-izoomify-url', thumbURL);
} else if (messageElement.attr('is_user') == 'false') { //handle char avatars } else if (messageElement.attr('is_user') == 'false') { //handle char avatars
$(`.zoomed_avatar[forChar="${charname}"] img`).attr('src', avatarSrc); zoomedAvatarImgElement.attr('src', avatarSrc);
$(`.zoomed_avatar[forChar="${charname}"] img`).attr('data-izoomify-url', avatarSrc); zoomedAvatarImgElement.attr('data-izoomify-url', avatarSrc);
} }
loadMovingUIState(); loadMovingUIState();
$(`.zoomed_avatar[forChar="${charname}"]`).css('display', 'flex'); $(`.zoomed_avatar[forChar="${charname}"]`).css('display', 'flex');
dragElement(newElement); dragElement(newElement);
if (power_user.zoomed_avatar_magnification)
$('.zoomed_avatar_container').izoomify(); $('.zoomed_avatar_container').izoomify();
$(`.zoomed_avatar[forChar="${charname}"] img`).on('click', (e) => { zoomedAvatarImgElement.on('click', (e) => {
$(`.zoomed_avatar[forChar="${charname}"]`).fadeOut(); $(`.zoomed_avatar[forChar="${charname}"]`).fadeOut();
setTimeout(function() { $(`.zoomed_avatar[forChar="${charname}"]`).remove(); }, 410); setTimeout(function() { $(`.zoomed_avatar[forChar="${charname}"]`).remove(); }, 410);
}); });
$(`.zoomed_avatar[forChar="${charname}"] img`).on('dragstart', (e) => { zoomedAvatarImgElement.on('dragstart', (e) => {
console.log('saw drag on avatar!'); console.log('saw drag on avatar!');
e.preventDefault(); e.preventDefault();
return false; return false;

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

@ -247,6 +247,7 @@ let power_user = {
encode_tags: false, encode_tags: false,
servers: [], servers: [],
bogus_folders: false, bogus_folders: false,
zoomed_avatar_magnification: false,
show_tag_filters: false, show_tag_filters: false,
aux_field: 'character_version', aux_field: 'character_version',
restore_user_input: true, restore_user_input: true,
@ -1303,6 +1304,13 @@ async function applyTheme(name) {
printCharactersDebounced(); printCharactersDebounced();
}, },
}, },
{
key: 'zoomed_avatar_magnification',
action: async () => {
$('#zoomed_avatar_magnification').prop('checked', power_user.zoomed_avatar_magnification);
printCharactersDebounced();
},
},
{ {
key: 'reduced_motion', key: 'reduced_motion',
action: async () => { action: async () => {
@ -1498,6 +1506,7 @@ function loadPowerUserSettings(settings, data) {
$('#auto_fix_generated_markdown').prop('checked', power_user.auto_fix_generated_markdown); $('#auto_fix_generated_markdown').prop('checked', power_user.auto_fix_generated_markdown);
$('#auto_scroll_chat_to_bottom').prop('checked', power_user.auto_scroll_chat_to_bottom); $('#auto_scroll_chat_to_bottom').prop('checked', power_user.auto_scroll_chat_to_bottom);
$('#bogus_folders').prop('checked', power_user.bogus_folders); $('#bogus_folders').prop('checked', power_user.bogus_folders);
$('#zoomed_avatar_magnification').prop('checked', power_user.zoomed_avatar_magnification);
$(`#tokenizer option[value="${power_user.tokenizer}"]`).attr('selected', true); $(`#tokenizer option[value="${power_user.tokenizer}"]`).attr('selected', true);
$(`#send_on_enter option[value=${power_user.send_on_enter}]`).attr('selected', true); $(`#send_on_enter option[value=${power_user.send_on_enter}]`).attr('selected', true);
$('#import_card_tags').prop('checked', power_user.import_card_tags); $('#import_card_tags').prop('checked', power_user.import_card_tags);
@ -2148,6 +2157,7 @@ async function saveTheme(name = undefined) {
hotswap_enabled: power_user.hotswap_enabled, hotswap_enabled: power_user.hotswap_enabled,
custom_css: power_user.custom_css, custom_css: power_user.custom_css,
bogus_folders: power_user.bogus_folders, bogus_folders: power_user.bogus_folders,
zoomed_avatar_magnification: power_user.zoomed_avatar_magnification,
reduced_motion: power_user.reduced_motion, reduced_motion: power_user.reduced_motion,
compact_input_area: power_user.compact_input_area, compact_input_area: power_user.compact_input_area,
}; };
@ -3410,8 +3420,13 @@ $(document).ready(() => {
}); });
$('#bogus_folders').on('input', function () { $('#bogus_folders').on('input', function () {
const value = !!$(this).prop('checked'); power_user.bogus_folders = !!$(this).prop('checked');
power_user.bogus_folders = value; printCharactersDebounced();
saveSettingsDebounced();
});
$('#zoomed_avatar_magnification').on('input', function () {
power_user.zoomed_avatar_magnification = !!$(this).prop('checked');
printCharactersDebounced(); printCharactersDebounced();
saveSettingsDebounced(); saveSettingsDebounced();
}); });