Merge branch 'staging' into neo-server
This commit is contained in:
Cohee
commit
2b12d3f8e8
|
|
@ -28,15 +28,22 @@
|
|||
z-index: 30;
|
||||
overflow: hidden;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
aspect-ratio: 2 / 3;
|
||||
width: fit-content;
|
||||
max-height: calc(60vh - 60px);
|
||||
max-height: calc(60svh - 60px);
|
||||
max-width: 90vw;
|
||||
max-width: 90svw;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.zoomed_avatar .dragClose {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
/* .world_entry_thin_controls, */
|
||||
|
|
@ -347,15 +354,18 @@
|
|||
}
|
||||
|
||||
body:not(.waifuMode) .zoomed_avatar {
|
||||
|
||||
width: fit-content;
|
||||
max-height: calc(60vh - 60px);
|
||||
max-height: calc(60svh - 60px);
|
||||
max-width: 90vw;
|
||||
max-width: 90svw;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/*portrait mode phones*/
|
||||
|
|
@ -373,10 +383,13 @@
|
|||
overflow: hidden;
|
||||
display: none;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
aspect-ratio: 2 / 3;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.drawer25pWidth {
|
||||
|
|
|
|||
|
|
@ -393,6 +393,7 @@ body.waifuMode .zoomed_avatar {
|
|||
margin: 0 auto;
|
||||
top: 50px;
|
||||
aspect-ratio: 2 / 3;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* movingUI*/
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@
|
|||
<script src="lib/svg-inject.js"></script>
|
||||
<script src="lib/Readability.js"></script>
|
||||
<script src="lib/Readability-readerable.js"></script>
|
||||
<script src="lib/jquery.izoomify.js"></script>
|
||||
<script type="module" src="lib/structured-clone/monkey-patch.js"></script>
|
||||
<script type="module" src="lib/swiped-events.js"></script>
|
||||
<script type="module" src="lib/eventemitter.js"></script>
|
||||
|
|
@ -3764,6 +3765,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.">
|
||||
|
|
@ -5966,8 +5972,16 @@
|
|||
</div>
|
||||
<div id="zoomed_avatar_template" class="template_element">
|
||||
<div class="zoomed_avatar">
|
||||
<div id="" class="fa-solid fa-grip drag-grabber"></div>
|
||||
<img class="zoomed_avatar_img" src="">
|
||||
<div class="zoomed_avatar_container">
|
||||
<div class="panelControlBar flex-container">
|
||||
<div class="fa-fw fa-solid fa-grip drag-grabber"></div>
|
||||
<div class="fa-fw fa-solid fa-circle-xmark dragClose" id="closeZoom"></div>
|
||||
</div>
|
||||
<img class="zoomed_avatar_img" src=""
|
||||
data-izoomify-url=""
|
||||
data-izoomify-magnify="1.8"
|
||||
data-izoomify-duration="300" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template id="generic_draggable_template">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,216 @@
|
|||
/*!
|
||||
* @name: jquery-izoomify
|
||||
* @version: 1.0
|
||||
* @author: Carl Lomer Abia
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
var defaults = {
|
||||
callback: false,
|
||||
target: false,
|
||||
duration: 120,
|
||||
magnify: 1.2,
|
||||
touch: true,
|
||||
url: false
|
||||
};
|
||||
|
||||
var _izoomify = function (target, duration, magnify, url) {
|
||||
var xPos,
|
||||
yPos,
|
||||
$elTarget = $(target),
|
||||
$imgTarget = $elTarget.find('img:first'),
|
||||
imgOrigSrc = $imgTarget.attr('src'),
|
||||
imgSwapSrc,
|
||||
defaultOrigin = 'center top ' + 0 + 'px',
|
||||
resultOrigin,
|
||||
dUrl = 'data-izoomify-url',
|
||||
dMagnify = 'data-izoomify-magnify',
|
||||
dDuration = 'data-izoomify-duration',
|
||||
eClass = 'izoomify-in',
|
||||
eMagnify,
|
||||
eDuration;
|
||||
|
||||
function imageSource(imgSource) {
|
||||
var _img = new Image();
|
||||
_img.src = imgSource;
|
||||
return _img.src;
|
||||
}
|
||||
|
||||
function getImageAttribute($img, dataAttribute, defaultAttribute) {
|
||||
if ($img.attr(dataAttribute)) {
|
||||
return $img.attr(dataAttribute);
|
||||
}
|
||||
|
||||
return defaultAttribute;
|
||||
}
|
||||
|
||||
function getImageSource($img, dataImageSource, defaultImageSource) {
|
||||
if ($img.attr(dataImageSource)) {
|
||||
return imageSource($img.attr(dataImageSource));
|
||||
}
|
||||
|
||||
return defaultImageSource ? imageSource(defaultImageSource) : false;
|
||||
}
|
||||
|
||||
function getTouches(e) {
|
||||
return e.touches || e.originalEvent.touches;
|
||||
}
|
||||
|
||||
imgSwapSrc = getImageSource($imgTarget, dUrl, url);
|
||||
|
||||
eMagnify = getImageAttribute($imgTarget, dMagnify, magnify);
|
||||
|
||||
eDuration = getImageAttribute($imgTarget, dDuration, duration);
|
||||
|
||||
$elTarget
|
||||
.addClass(eClass)
|
||||
.css({
|
||||
'position': 'relative',
|
||||
'overflow': 'hidden'
|
||||
});
|
||||
|
||||
$imgTarget.css({
|
||||
'-webkit-transition-property': '-webkit-transform',
|
||||
'transition-property': '-webkit-transform',
|
||||
'-o-transition-property': 'transform',
|
||||
'transition-property': 'transform',
|
||||
'transition-property': 'transform, -webkit-transform',
|
||||
'-webkit-transition-timing-function': 'ease',
|
||||
'-o-transition-timing-function': 'ease',
|
||||
'transition-timing-function': 'ease',
|
||||
'-webkit-transition-duration': eDuration + 'ms',
|
||||
'-o-transition-duration': eDuration + 'ms',
|
||||
'transition-duration': eDuration + 'ms',
|
||||
'-webkit-transform': 'scale(1)',
|
||||
'-ms-transform': 'scale(1)',
|
||||
'transform': 'scale(1)',
|
||||
'-webkit-transform-origin': defaultOrigin,
|
||||
'-ms-transform-origin': defaultOrigin,
|
||||
'transform-origin': defaultOrigin
|
||||
});
|
||||
|
||||
return {
|
||||
moveStart: function (e, hasTouch) {
|
||||
var o = $(target).offset();
|
||||
|
||||
if (hasTouch) {
|
||||
e.preventDefault();
|
||||
xPos = getTouches(e)[0].clientX - o.left;
|
||||
yPos = getTouches(e)[0].clientY - o.top;
|
||||
} else {
|
||||
xPos = e.pageX - o.left;
|
||||
yPos = e.pageY - o.top;
|
||||
}
|
||||
|
||||
resultOrigin = xPos + 'px ' + yPos + 'px ' + 0 + 'px';
|
||||
|
||||
$imgTarget
|
||||
.css({
|
||||
'-webkit-transform': 'scale(' + eMagnify + ')',
|
||||
'-ms-transform': 'scale(' + eMagnify + ')',
|
||||
'transform': 'scale(' + eMagnify + ')',
|
||||
'-webkit-transform-origin': resultOrigin,
|
||||
'-ms-transform-origin': resultOrigin,
|
||||
'transform-origin': resultOrigin
|
||||
})
|
||||
.attr('src', imgSwapSrc || imgOrigSrc);
|
||||
},
|
||||
moveEnd: function () {
|
||||
this.reset();
|
||||
},
|
||||
reset: function () {
|
||||
resultOrigin = defaultOrigin;
|
||||
|
||||
$imgTarget
|
||||
.css({
|
||||
'-webkit-transform': 'scale(1)',
|
||||
'-ms-transform': 'scale(1)',
|
||||
'transform': 'scale(1)',
|
||||
'-webkit-transform-origin': resultOrigin,
|
||||
'-ms-transform-origin': resultOrigin,
|
||||
'transform-origin': resultOrigin
|
||||
})
|
||||
.attr('src', imgOrigSrc);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.izoomify = function (options) {
|
||||
return this.each(function () {
|
||||
var settings = $.extend({}, defaults, options || {}),
|
||||
$target = settings.target && $(settings.target)[0] || this,
|
||||
src = this,
|
||||
$src = $(src),
|
||||
mouseStartEvents = 'mouseover.izoomify mousemove.izoomify',
|
||||
mouseEndEvents = 'mouseleave.izoomify mouseout.izoomify',
|
||||
touchStartEvents = 'touchstart.izoomify touchmove.izoomify',
|
||||
touchEndEvents = 'touchend.izoomify';
|
||||
|
||||
var izoomify = _izoomify($target, settings.duration, settings.magnify, settings.url);
|
||||
|
||||
function startEvent(e, hasTouch) {
|
||||
izoomify.moveStart(e, hasTouch);
|
||||
}
|
||||
|
||||
function endEvent($src) {
|
||||
izoomify.moveEnd();
|
||||
|
||||
if ($src) {
|
||||
$src
|
||||
.off(touchStartEvents)
|
||||
.off(touchEndEvents);
|
||||
}
|
||||
}
|
||||
|
||||
function resetImage() {
|
||||
izoomify.reset();
|
||||
}
|
||||
|
||||
$src.one('izoomify.destroy', function () {
|
||||
|
||||
$src.removeClass('izoomify-in');
|
||||
|
||||
resetImage();
|
||||
|
||||
$src
|
||||
.off(mouseStartEvents)
|
||||
.off(mouseEndEvents);
|
||||
|
||||
if (settings.touch) {
|
||||
$src
|
||||
.off(touchStartEvents)
|
||||
.off(touchStartEvents);
|
||||
}
|
||||
|
||||
$target.style.position = '';
|
||||
$target.style.overflow = '';
|
||||
|
||||
}.bind(this));
|
||||
|
||||
$src
|
||||
.on(mouseStartEvents, function (e) {
|
||||
startEvent(e);
|
||||
})
|
||||
.on(mouseEndEvents, function () {
|
||||
endEvent();
|
||||
});
|
||||
|
||||
if (settings.touch) {
|
||||
$src
|
||||
.on(touchStartEvents, function (e) {
|
||||
e.preventDefault();
|
||||
startEvent(e, true);
|
||||
})
|
||||
.on(touchEndEvents, function () {
|
||||
endEvent();
|
||||
});
|
||||
}
|
||||
|
||||
if ($.isFunction(settings.callback)) {
|
||||
settings.callback.call($src);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.izoomify.defaults = defaults;
|
||||
}(window.jQuery));
|
||||
|
|
@ -10231,7 +10231,9 @@ jQuery(async function () {
|
|||
const avatarSrc = isDataURL(thumbURL) ? thumbURL : charsPath + targetAvatarImg;
|
||||
if ($(`.zoomed_avatar[forChar="${charname}"]`).length) {
|
||||
console.debug('removing container as it already existed');
|
||||
$(`.zoomed_avatar[forChar="${charname}"]`).remove();
|
||||
$(`.zoomed_avatar[forChar="${charname}"]`).fadeOut(animation_duration, () => {
|
||||
$(`.zoomed_avatar[forChar="${charname}"]`).remove();
|
||||
});
|
||||
} else {
|
||||
console.debug('making new container from template');
|
||||
const template = $('#zoomed_avatar_template').html();
|
||||
|
|
@ -10242,18 +10244,43 @@ jQuery(async function () {
|
|||
newElement.find('.drag-grabber').attr('id', `zoomFor_${charname}header`);
|
||||
|
||||
$('body').append(newElement);
|
||||
if (messageElement.attr('is_user') == 'true') { //handle user avatars
|
||||
$(`.zoomed_avatar[forChar="${charname}"] img`).attr('src', thumbURL);
|
||||
} else if (messageElement.attr('is_system') == 'true' && !isValidCharacter) { //handle system avatars
|
||||
$(`.zoomed_avatar[forChar="${charname}"] img`).attr('src', thumbURL);
|
||||
newElement.fadeIn(animation_duration);
|
||||
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);
|
||||
zoomedAvatarImgElement.attr('src', avatarSrc);
|
||||
zoomedAvatarImgElement.attr('data-izoomify-url', avatarSrc);
|
||||
}
|
||||
loadMovingUIState();
|
||||
$(`.zoomed_avatar[forChar="${charname}"]`).css('display', 'block');
|
||||
$(`.zoomed_avatar[forChar="${charname}"]`).css('display', 'flex');
|
||||
dragElement(newElement);
|
||||
|
||||
$(`.zoomed_avatar[forChar="${charname}"] img`).on('dragstart', (e) => {
|
||||
if (power_user.zoomed_avatar_magnification) {
|
||||
$('.zoomed_avatar_container').izoomify();
|
||||
} else {
|
||||
$(`.zoomed_avatar[forChar="${charname}"] .dragClose`).hide();
|
||||
}
|
||||
|
||||
$('.zoomed_avatar').on('mouseup', (e) => {
|
||||
if (e.target.closest('.drag-grabber')) {
|
||||
return;
|
||||
}
|
||||
$(`.zoomed_avatar[forChar="${charname}"]`).fadeOut(animation_duration, () => {
|
||||
$(`.zoomed_avatar[forChar="${charname}"]`).remove();
|
||||
});
|
||||
});
|
||||
|
||||
$('.zoomed_avatar, .zoomed_avatar .dragClose').on('click touchend', (e) => {
|
||||
if (e.target.closest('.dragClose')) {
|
||||
$(`.zoomed_avatar[forChar="${charname}"]`).fadeOut(animation_duration, () => {
|
||||
$(`.zoomed_avatar[forChar="${charname}"]`).remove();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
zoomedAvatarImgElement.on('dragstart', (e) => {
|
||||
console.log('saw drag on avatar!');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -533,14 +533,14 @@ body.reduced-motion #bg_custom {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.panelControlBar {
|
||||
body .panelControlBar {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
margin-right: 5px;
|
||||
z-index: 2000;
|
||||
min-width: 55px;
|
||||
justify-content: flex-end;
|
||||
gap: 0px;
|
||||
}
|
||||
|
||||
.panelControlBar .drag-grabber {
|
||||
|
|
@ -2227,7 +2227,7 @@ grammarly-extension {
|
|||
text-align: center;
|
||||
font-size: 17px;
|
||||
aspect-ratio: 1 / 1;
|
||||
flex: 0.075;
|
||||
flex: 0.05;
|
||||
}
|
||||
|
||||
.menu_button:hover,
|
||||
|
|
@ -3806,19 +3806,33 @@ body:not(.movingUI) .drawer-content.maximized {
|
|||
--leftGapWidth: calc((100vw - var(--sheldWidth)) / 2);
|
||||
/* Left position of the avatar (half of the gap minus half of the avatar width) */
|
||||
--leftPosition: max(0px, calc((var(--leftGapWidth) - var(--maxWidth)) / 2));
|
||||
aspect-ratio: 2 / 3;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
max-width: var(--maxWidth);
|
||||
left: var(--leftPosition);
|
||||
position: absolute;
|
||||
height: auto;
|
||||
max-height: 90vh !important;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.zoomed_avatar .dragClose {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zoomed_avatar_container {
|
||||
width: 100%;
|
||||
margin-inline: 10px;
|
||||
max-height: 90vh;
|
||||
max-width: 90svh;
|
||||
}
|
||||
|
||||
.zoomed_avatar img {
|
||||
height: 100%;
|
||||
height: unset !important;
|
||||
width: 100%;
|
||||
vertical-align: bottom;
|
||||
object-fit: cover;
|
||||
object-fit: contain !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
|
|
|
|||
Loading…
Reference in New Issue