Animate gallery block

2fe12ed0cf5b3fd58da409bc3a9c601eaa055acb

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

Parents: d83f92626990c5fd22512e0ebc019b1d82516698
1 files changed, +17 -2Ignore whitespace
public/scripts/extensions/gallery/index.js+17 -2
@@ -4,6 +4,8 @@ import {
4 characters,4 characters,
5 getRequestHeaders,5 getRequestHeaders,
6 event_types,6 event_types,
7 animation_duration,
8 animation_easing,
7} from '../../../script.js';9} from '../../../script.js';
8import { groups, selected_group } from '../../group-chats.js';10import { groups, selected_group } from '../../group-chats.js';
9import { loadFileToDocument, delay, getBase64Async, getSanitizedFilename } from '../../utils.js';11import { loadFileToDocument, delay, getBase64Async, getSanitizedFilename } from '../../utils.js';
@@ -32,7 +34,15 @@ let galleryMaxRows = 3;
32$('#movingDivs').on('click', '.dragClose', function () {34$('#movingDivs').on('click', '.dragClose', function () {
33 const relatedId = $(this).data('related-id');35 const relatedId = $(this).data('related-id');
34 if (!relatedId) return;36 if (!relatedId) return;
35 $(`#movingDivs > .draggable[id="${relatedId}"]`).remove();37 const relatedElement = $(`#movingDivs > .draggable[id="${relatedId}"]`);
38 relatedElement.transition({
39 opacity: 0,
40 duration: animation_duration,
41 easing: animation_easing,
42 complete: () => {
43 relatedElement.remove();
44 },
45 });
36});46});
3747
38const CUSTOM_GALLERY_REMOVED_EVENT = 'galleryRemoved';48const CUSTOM_GALLERY_REMOVED_EVENT = 'galleryRemoved';
@@ -373,7 +383,7 @@ async function makeMovable(url) {
373 const id = 'gallery';383 const id = 'gallery';
374 const template = $('#generic_draggable_template').html();384 const template = $('#generic_draggable_template').html();
375 const newElement = $(template);385 const newElement = $(template);
376 newElement.css('background-color', 'var(--SmartThemeBlurTintColor)');386 newElement.css({ 'background-color': 'var(--SmartThemeBlurTintColor)', 'opacity': 0 });
377 newElement.attr('forChar', id);387 newElement.attr('forChar', id);
378 newElement.attr('id', id);388 newElement.attr('id', id);
379 newElement.find('.drag-grabber').attr('id', `${id}header`);389 newElement.find('.drag-grabber').attr('id', `${id}header`);
@@ -505,6 +515,11 @@ async function makeMovable(url) {
505 loadMovingUIState();515 loadMovingUIState();
506 $(`.draggable[forChar="${id}"]`).css('display', 'block');516 $(`.draggable[forChar="${id}"]`).css('display', 'block');
507 dragElement(newElement);517 dragElement(newElement);
518 newElement.transition({
519 opacity: 1,
520 duration: animation_duration,
521 easing: animation_easing,
522 });
508523
509 $(`.draggable[forChar="${id}"] img`).on('dragstart', (e) => {524 $(`.draggable[forChar="${id}"] img`).on('dragstart', (e) => {
510 console.log('saw drag on avatar!');525 console.log('saw drag on avatar!');