Add expand/compress image button on image view box (mastodon#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
mashirozx · Nov 2, 2020 · 6a2db10 · 6a2db10
1 parent 4b2ec4a
commit 6a2db10
Show file tree

Hide file tree

Showing 79 changed files with 2,029 additions and 23 deletions.
diff --git a/app/javascript/mastodon/features/ui/components/image_loader.js b/app/javascript/mastodon/features/ui/components/image_loader.js
@@ -13,6 +13,7 @@ export default class ImageLoader extends React.PureComponent {
     width: PropTypes.number,
     height: PropTypes.number,
     onClick: PropTypes.func,
+    zoomButtonHidden: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -151,6 +152,9 @@ export default class ImageLoader extends React.PureComponent {
             alt={alt}
             src={src}
             onClick={onClick}
+            width={width}
+            height={height}
+            zoomButtonHidden={this.props.zoomButtonHidden}
           />
         )}
       </div>

diff --git 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}
           >