mirror of
https://github.com/irislib/iris-messenger.git
synced 2024-10-18 14:13:21 +00:00
animate gallery
This commit is contained in:
parent
365201845d
commit
058cfb0ac7
@ -338,13 +338,18 @@ if (!iris.util.isMobile) {
|
||||
|
||||
$(document).keyup(function(e) {
|
||||
if (e.key === "Escape") { // escape key maps to keycode `27`
|
||||
if ($('#attachment-preview.gallery:visible').length) {
|
||||
closeAttachmentsGallery();
|
||||
} else {
|
||||
closeAttachmentsPreview();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function openAttachmentsPreview() {
|
||||
$('#floating-day-separator').remove();
|
||||
var attachmentsPreview = $('#attachment-preview');
|
||||
attachmentsPreview.removeClass('gallery');
|
||||
attachmentsPreview.empty();
|
||||
var closeBtn = $('<button>').text('Cancel').click(closeAttachmentsPreview);
|
||||
attachmentsPreview.append(closeBtn);
|
||||
@ -365,22 +370,44 @@ function openAttachmentsPreview() {
|
||||
}
|
||||
}
|
||||
|
||||
function openAttachmentsGallery(msg) {
|
||||
function openAttachmentsGallery(msg, event) {
|
||||
$('#floating-day-separator').remove();
|
||||
var attachmentsPreview = $('#attachment-preview');
|
||||
attachmentsPreview.addClass('gallery');
|
||||
attachmentsPreview.empty();
|
||||
$('#attachment-preview').one('click', closeAttachmentsPreview);
|
||||
attachmentsPreview.show();
|
||||
attachmentsPreview.fadeIn(100);
|
||||
var left, top, width, img;
|
||||
|
||||
if (msg.attachments) {
|
||||
msg.attachments.forEach(a => {
|
||||
if (a.type.indexOf('image') === 0 && a.data) {
|
||||
var img = $('<img>').attr('src', a.data);
|
||||
img = $('<img>').attr('src', a.data);
|
||||
if (msg.attachments.length === 1) {
|
||||
attachmentsPreview.css({'justify-content': 'center'});
|
||||
var original = $(event.target);
|
||||
left = original.offset().left;
|
||||
top = original.offset().top - $(window).scrollTop();
|
||||
width = original.width();
|
||||
var transitionImg = img.clone();
|
||||
transitionImg.css({position: 'fixed', left, top, width, 'max-width': 'none', 'max-height': 'none'});
|
||||
img.css({visibility: 'hidden', 'align-self': 'center'});
|
||||
attachmentsPreview.append(img);
|
||||
$('body').append(transitionImg);
|
||||
var o = img.offset();
|
||||
transitionImg.animate({width: img.width(), left: o.left, top: o.top}, {duration: 300, complete: () => {
|
||||
img.css({visibility: 'visible'});
|
||||
transitionImg.remove();
|
||||
}});
|
||||
} else {
|
||||
attachmentsPreview.css({'justify-content': ''});
|
||||
attachmentsPreview.append(img);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
$('#attachment-preview').one('click', () => {
|
||||
closeAttachmentsGallery();
|
||||
});
|
||||
}
|
||||
|
||||
function closeAttachmentsPreview() {
|
||||
@ -392,6 +419,13 @@ function closeAttachmentsPreview() {
|
||||
}
|
||||
}
|
||||
|
||||
function closeAttachmentsGallery() {
|
||||
$('#attachment-preview').fadeOut(300);
|
||||
if (activeChat) {
|
||||
chats[activeChat].attachments = null;
|
||||
}
|
||||
}
|
||||
|
||||
$('#attach-file').click(event => {
|
||||
event.preventDefault();
|
||||
$('#attachment-input').click();
|
||||
@ -1117,7 +1151,7 @@ function addMessage(msg, chatId) {
|
||||
if (msg.attachments) {
|
||||
msg.attachments.forEach(a => {
|
||||
if (a.type.indexOf('image') === 0 && a.data) {
|
||||
var img = $('<img>').attr('src', a.data).click(() => { openAttachmentsGallery(msg); });
|
||||
var img = $('<img>').attr('src', a.data).click(e => { openAttachmentsGallery(msg, e); });
|
||||
msgContent.prepend(img);
|
||||
img.one('load', scrollToMessageListBottom);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user