Add option to toggle magnification behaviour

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

View File

@ -3739,6 +3739,11 @@
<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>
</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>
<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.">

View File

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

View File

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