From 058cfb0ac70e9bb2e692709121e4f8a5acaeda08 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Tue, 19 May 2020 10:05:17 +0300
Subject: [PATCH] animate gallery

---
 src/js/app.js | 46 ++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/src/js/app.js b/src/js/app.js
index 45651540..f1d04b8b 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -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);
-        attachmentsPreview.append(img);
+        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);
       }