From 6a2db10f767879b9072b6c020ebadac4f985ed34 Mon Sep 17 00:00:00 2001
From: Mashiro <moezhx@outlook.com>
Date: Tue, 3 Nov 2020 04:16:38 +0800
Subject: Add expand/compress image button on image view box (#15068)

* add zoom image button

* enhance zoom algorithm & add translation

* code structure

* code structure

* code structure

* enhance grab performance

* rm useless state

* fix behavior on Firefox & scroll lock & horizontal scroll with mousewheel

* remove scroll lock on MouseWheelEvent

* code structure

* enhance algorithm and code structure

* rm Gemfile.lock from tree

* codeclimate

* fix a stupid mistake
---
 .../mastodon/features/ui/components/media_modal.js | 24 +++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

(limited to 'app/javascript/mastodon/features/ui/components/media_modal.js')

diff --git a/app/javascript/mastodon/features/ui/components/media_modal.js b/app/javascript/mastodon/features/ui/components/media_modal.js
index 54ec51fcf..d18f26b4e 100644
--- a/app/javascript/mastodon/features/ui/components/media_modal.js
+++ b/app/javascript/mastodon/features/ui/components/media_modal.js
@@ -38,23 +38,39 @@ class MediaModal extends ImmutablePureComponent {
   state = {
     index: null,
     navigationHidden: false,
+    zoomButtonHidden: false,
   };
 
   handleSwipe = (index) => {
     this.setState({ index: index % this.props.media.size });
   }
 
+  handleTransitionEnd = () => {
+    this.setState({
+      zoomButtonHidden: false,
+    });
+  }
+
   handleNextClick = () => {
-    this.setState({ index: (this.getIndex() + 1) % this.props.media.size });
+    this.setState({
+      index: (this.getIndex() + 1) % this.props.media.size,
+      zoomButtonHidden: true,
+    });
   }
 
   handlePrevClick = () => {
-    this.setState({ index: (this.props.media.size + this.getIndex() - 1) % this.props.media.size });
+    this.setState({
+      index: (this.props.media.size + this.getIndex() - 1) % this.props.media.size,
+      zoomButtonHidden: true,
+    });
   }
 
   handleChangeIndex = (e) => {
     const index = Number(e.currentTarget.getAttribute('data-index'));
-    this.setState({ index: index % this.props.media.size });
+    this.setState({
+      index: index % this.props.media.size,
+      zoomButtonHidden: true,
+    });
   }
 
   handleKeyDown = (e) => {
@@ -149,6 +165,7 @@ class MediaModal extends ImmutablePureComponent {
             alt={image.get('description')}
             key={image.get('url')}
             onClick={this.toggleNavigation}
+            zoomButtonHidden={this.state.zoomButtonHidden}
           />
         );
       } else if (image.get('type') === 'video') {
@@ -212,6 +229,7 @@ class MediaModal extends ImmutablePureComponent {
             style={swipeableViewsStyle}
             containerStyle={containerStyle}
             onChangeIndex={this.handleSwipe}
+            onTransitionEnd={this.handleTransitionEnd}
             index={index}
             disabled={disableSwiping}
           >
-- 
cgit