Close #243: right to left languages support (#256)

xiaolin · Aug 1, 2018 · 88ae504 · 88ae504
1 parent b4a30e5
commit 88ae504
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -112,6 +112,8 @@ class MyComponent extends React.Component {
 * `useTranslate3D`: Boolean, default `true`
   * if false, will use `translate` instead of `translate3d` css property to transition slides
 * `showPlayButton`: Boolean, default `true`
+* `isRTL`: Boolean, default `false`
+  * if true, gallery's direction will be from right-to-left (to support right-to-left languages)
 * `showBullets`: Boolean, default `false`
 * `showIndex`: Boolean, default `false`
 * `autoPlay`: Boolean, default `false`

diff --git a/example/app.js b/example/app.js
@@ -19,6 +19,7 @@ class App extends React.Component {
       showPlayButton: true,
       showGalleryPlayButton: true,
       showNav: true,
+      isRTL: false,
       slideDuration: 450,
       slideInterval: 2000,
       thumbnailPosition: 'bottom',
@@ -204,6 +205,7 @@ class App extends React.Component {
           showThumbnails={this.state.showThumbnails}
           showIndex={this.state.showIndex}
           showNav={this.state.showNav}
+          isRTL={this.state.isRTL}
           thumbnailPosition={this.state.thumbnailPosition}
           slideDuration={parseInt(this.state.slideDuration)}
           slideInterval={parseInt(this.state.slideInterval)}
@@ -312,6 +314,22 @@ class App extends React.Component {
                   checked={this.state.showIndex}/>
                   <label htmlFor='show_index'>show index</label>
               </li>
+              <li>
+                <input
+                  id='slide_on_thumbnail_hover'
+                  type='checkbox'
+                  onChange={this._handleCheckboxChange.bind(this, 'slideOnThumbnailHover')}
+                  checked={this.state.slideOnThumbnailHover}/>
+                  <label htmlFor='slide_on_thumbnail_hover'>slide on thumbnail hover (desktop)</label>
+              </li>
+              <li>
+                <input
+                  id='is_rtl'
+                  type='checkbox'
+                  onChange={this._handleCheckboxChange.bind(this, 'isRTL')}
+                  checked={this.state.isRTL}/>
+                  <label htmlFor='is_rtl'>is right to left</label>
+              </li>
             </ul>
           </div>
 

diff --git a/src/ImageGallery.jsx b/src/ImageGallery.jsx
@@ -86,6 +86,7 @@ export default class ImageGallery extends React.Component {
     stopPropagation: PropTypes.bool,
     additionalClass: PropTypes.string,
     useTranslate3D: PropTypes.bool,
+    isRTL: PropTypes.bool
   };
 
   static defaultProps = {
@@ -103,6 +104,7 @@ export default class ImageGallery extends React.Component {
     disableArrowKeys: false,
     disableSwipe: false,
     useTranslate3D: true,
+    isRTL: false,
     useBrowserFullscreen: true,
     preventDefaultTouchmoveEvent: false,
     flickThreshold: 0.4,
@@ -577,12 +579,21 @@ export default class ImageGallery extends React.Component {
   }
 
   _canSlideLeft() {
-    return this.props.infinite || this.state.currentIndex > 0;
+    return this.props.infinite ||
+      (this.props.isRTL ? this._canSlideNext() : this._canSlidePrevious());
   }
 
   _canSlideRight() {
     return this.props.infinite ||
-      this.state.currentIndex < this.props.items.length - 1;
+      (this.props.isRTL ? this._canSlidePrevious() : this._canSlideNext());
+  }
+
+  _canSlidePrevious() {
+    return this.state.currentIndex > 0;
+  }
+
+  _canSlideNext() {
+    return this.state.currentIndex < this.props.items.length - 1;
   }
 
   _updateThumbnailTranslate(previousIndex) {
@@ -825,17 +836,19 @@ export default class ImageGallery extends React.Component {
 
   _getThumbnailStyle() {
     let translate;
-    const { useTranslate3D } = this.props;
+    const { useTranslate3D, isRTL } = this.props;
+    const { thumbsTranslate } = this.state;
+    const verticalTranslateValue = isRTL ? thumbsTranslate * -1 : thumbsTranslate;
 
     if (this._isThumbnailHorizontal()) {
-      translate = `translate(0, ${this.state.thumbsTranslate}px)`;
+      translate = `translate(0, ${thumbsTranslate}px)`;
       if (useTranslate3D) {
-        translate = `translate3d(0, ${this.state.thumbsTranslate}px, 0)`;
+        translate = `translate3d(0, ${thumbsTranslate}px, 0)`;
       }
     } else {
-      translate = `translate(${this.state.thumbsTranslate}px, 0)`;
+      translate = `translate(${verticalTranslateValue}px, 0)`;
       if (useTranslate3D) {
-        translate = `translate3d(${this.state.thumbsTranslate}px, 0, 0)`;
+        translate = `translate3d(${verticalTranslateValue}px, 0, 0)`;
       }
     }
     return {
@@ -848,10 +861,18 @@ export default class ImageGallery extends React.Component {
   }
 
   _slideLeft = (event) => {
-    this.slideToIndex(this.state.currentIndex - 1, event);
+    this.props.isRTL ? this._slideNext() : this.ـslidePrevious();
   };
 
   _slideRight = (event) => {
+    this.props.isRTL ? this.ـslidePrevious() : this._slideNext();
+  };
+
+  ـslidePrevious = (event) => {
+    this.slideToIndex(this.state.currentIndex - 1, event);
+  };
+
+  _slideNext = (event) => {
     this.slideToIndex(this.state.currentIndex + 1, event);
   };
 
@@ -942,6 +963,7 @@ export default class ImageGallery extends React.Component {
     const {
       infinite,
       preventDefaultTouchmoveEvent,
+      isRTL,
     } = this.props;
 
     const thumbnailStyle = this._getThumbnailStyle();
@@ -1047,7 +1069,7 @@ export default class ImageGallery extends React.Component {
     const slideWrapper = (
       <div
         ref={this._initGalleryResizing}
-        className={`image-gallery-slide-wrapper ${thumbnailPosition}`}
+        className={`image-gallery-slide-wrapper ${thumbnailPosition} ${isRTL ? 'image-gallery-rtl' : ''}`}
       >
 
         {this.props.renderCustomControls && this.props.renderCustomControls()}
@@ -1145,7 +1167,7 @@ export default class ImageGallery extends React.Component {
           {
             this.props.showThumbnails &&
               <div
-                className={`image-gallery-thumbnails-wrapper ${thumbnailPosition}`}
+                className={`image-gallery-thumbnails-wrapper ${thumbnailPosition} ${!this._isThumbnailHorizontal() && isRTL ? 'thumbnails-wrapper-rtl' : ''}`}
                 style={this._getThumbnailBarHeight()}
               >
                 <div

diff --git a/styles/scss/image-gallery-no-icon.scss b/styles/scss/image-gallery-no-icon.scss
@@ -61,6 +61,9 @@ $ig-transparent: rgba(0, 0, 0, 0) !default;
       width: calc(100% - 84px); // 75px + 6px for border + 3px for padding
     }
   }
+  &.image-gallery-rtl {
+    direction: rtl;
+  }
 }
 
 .image-gallery-fullscreen-button,
@@ -208,6 +211,9 @@ $ig-transparent: rgba(0, 0, 0, 0) !default;
 .image-gallery-thumbnails-wrapper {
   position: relative;
 
+  &.thumbnails-wrapper-rtl {
+    direction: rtl;
+  }
   &.left,
   &.right {
     display: inline-block;

diff --git a/styles/scss/image-gallery.scss b/styles/scss/image-gallery.scss
@@ -63,6 +63,9 @@ $ig-transparent: rgba(0, 0, 0, 0) !default;
       width: calc(100% - 84px); // 75px + 6px for border + 3px for padding
     }
   }
+  &.image-gallery-rtl {
+    direction: rtl;
+  }
 }
 
 .image-gallery-fullscreen-button,
@@ -279,6 +282,9 @@ $ig-transparent: rgba(0, 0, 0, 0) !default;
 .image-gallery-thumbnails-wrapper {
   position: relative;
 
+  &.thumbnails-wrapper-rtl {
+    direction: rtl;
+  }
   &.left,
   &.right {
     display: inline-block;