Animate gallery block

2fe12ed0cf5b3fd58da409bc3a9c601eaa055acb

Cohee <18619528+Cohee1207@users.noreply.github.com>

public/scripts/extensions/gallery/index.js+17 -2 Viewed

     characters,
     getRequestHeaders,
     event_types,
 +    animation_duration,
 +    animation_easing,
 } from '../../../script.js';
 import { groups, selected_group } from '../../group-chats.js';
 import { loadFileToDocument, delay, getBase64Async, getSanitizedFilename } from '../../utils.js';

 $('#movingDivs').on('click', '.dragClose', function () {
     const relatedId = $(this).data('related-id');
     if (!relatedId) return;
     const relatedElement = $(`#movingDivs > .draggable[id="${relatedId}"]`).remove();
 +    relatedElement.transition({
 +        opacity: 0,
 +        duration: animation_duration,
 +        easing: animation_easing,
 +        complete: () => {
 +            relatedElement.remove();
 +        },
 +    });
 });
 const CUSTOM_GALLERY_REMOVED_EVENT = 'galleryRemoved';

     const id = 'gallery';
     const template = $('#generic_draggable_template').html();
     const newElement = $(template);
     newElement.css({ 'background-color',: 'var(--SmartThemeBlurTintColor)', 'opacity': 0 });
     newElement.attr('forChar', id);
     newElement.attr('id', id);
     newElement.find('.drag-grabber').attr('id', `${id}header`);

     loadMovingUIState();
     $(`.draggable[forChar="${id}"]`).css('display', 'block');
     dragElement(newElement);
 +    newElement.transition({
 +        opacity: 1,
 +        duration: animation_duration,
 +        easing: animation_easing,
 +    });
     $(`.draggable[forChar="${id}"] img`).on('dragstart', (e) => {
         console.log('saw drag on avatar!');