Adjust style and add magnification to zoomed avatar

public/index.html

@@ -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>
@@ -5941,8 +5942,13 @@
     </div>
     <div id="zoomed_avatar_template" class="template_element">
         <div class="zoomed_avatar">
-            <div id="" class="fa-solid fa-grip drag-grabber"></div>
+            <div class="fa-solid fa-grip drag-grabber"></div>
-            <img class="zoomed_avatar_img" src="">
+            <div class="zoomed_avatar_container">
+                <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">

public/lib/jquery.izoomify.js

@@ -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));

public/script.js

@@ -10213,7 +10213,8 @@ 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();
+            setTimeout(function() { $(`.zoomed_avatar[forChar="${charname}"]`).remove(); }, 410);
         } else {
             console.debug('making new container from template');
             const template = $('#zoomed_avatar_template').html();
@@ -10224,17 +10225,23 @@ jQuery(async function () {
             newElement.find('.drag-grabber').attr('id', `zoomFor_${charname}header`);
 
             $('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);
             } 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);
             }
             loadMovingUIState();
-            $(`.zoomed_avatar[forChar="${charname}"]`).css('display', 'block');
+            $(`.zoomed_avatar[forChar="${charname}"]`).css('display', 'flex');
             dragElement(newElement);
 
+            $('.zoomed_avatar_container').izoomify();
+
             $(`.zoomed_avatar[forChar="${charname}"] img`).on('dragstart', (e) => {
                 console.log('saw drag on avatar!');
                 e.preventDefault();

public/style.css

@@ -3811,13 +3811,22 @@ body:not(.movingUI) .drawer-content.maximized {
     background-color: transparent;
     max-width: var(--maxWidth);
     left: var(--leftPosition);
+    position: absolute;
+    height: 100%;
+    max-height: 100vh !important;
+    align-items: center;
+}
+
+.zoomed_avatar_container {
+    width: 100%;
+    margin-inline: 10px;
 }
 
 .zoomed_avatar img {
-    height: 100%;
+    height: unset !important;
     width: 100%;
-    vertical-align: bottom;
+    object-fit: contain !important;
-    object-fit: cover;
+    border-radius: 10px;
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */