Change allowFullScreen to showFullscreenButton

Author: xiaolin

README.md

@@ -103,7 +103,7 @@ class MyComponent extends React.Component {
 * `lazyLoad`: Boolean, default `false`
 * `showNav`: Boolean, default `true`
 * `showThumbnails`: Boolean, default `true`
-* `allowFullscreen`: Boolean, default `true`
+* `showFullscreenButton`: Boolean, default `true`
 * `showPlayButton`: Boolean, default `true`
 * `showBullets`: Boolean, default `false`
 * `showIndex`: Boolean, default `false`

example/app.js

@@ -15,7 +15,7 @@ class App extends React.Component {
       showBullets: true,
       infinite: true,
       showThumbnails: true,
-      allowFullscreen: true,
+      showFullscreenButton: true,
       showPlayButton: true,
       showNav: true,
       slideInterval: 2000,
@@ -76,7 +76,7 @@ class App extends React.Component {
     this.setState({
       showVideo: {},
       showPlayButton: true,
-      allowFullscreen: true
+      showFullscreenButton: true
     });
   }
 
@@ -91,8 +91,8 @@ class App extends React.Component {
         this.setState({showPlayButton: false});
       }
 
-      if (this.state.allowFullscreen) {
-        this.setState({allowFullscreen: false});
+      if (this.state.showFullscreenButton) {
+        this.setState({showFullscreenButton: false});
       }
     }
   }
@@ -169,7 +169,7 @@ class App extends React.Component {
           onPlay={this._onPlay.bind(this)}
           infinite={this.state.infinite}
           showBullets={this.state.showBullets}
-          allowFullscreen={this.state.allowFullscreen}
+          showFullscreenButton={this.state.showFullscreenButton}
           showPlayButton={this.state.showPlayButton}
           showThumbnails={this.state.showThumbnails}
           showIndex={this.state.showIndex}
@@ -202,15 +202,15 @@ class App extends React.Component {
                 type='checkbox'
                 onChange={this._handleCheckboxChange.bind(this, 'infinite')}
                 checked={this.state.infinite}/>
-                <label htmlFor='infinite'>infinite sliding</label>
+                <label htmlFor='infinite'>allow infinite sliding</label>
             </li>
             <li>
               <input
                 id='show_fullscreen'
                 type='checkbox'
-                onChange={this._handleCheckboxChange.bind(this, 'allowFullscreen')}
-                checked={this.state.allowFullscreen}/>
-                <label htmlFor='show_fullscreen'>allow fullscreen</label>
+                onChange={this._handleCheckboxChange.bind(this, 'showFullscreenButton')}
+                checked={this.state.showFullscreenButton}/>
+                <label htmlFor='show_fullscreen'>show fullscreen button</label>
             </li>
             <li>
               <input

src/ImageGallery.jsx

@@ -178,24 +178,22 @@ export default class ImageGallery extends React.Component {
   }
 
   fullScreen() {
-    if (this.props.allowFullscreen) {
-      const gallery = this._imageGallery;
-
-      if (gallery.requestFullscreen) {
-        gallery.requestFullscreen();
-      } else if (gallery.msRequestFullscreen) {
-        gallery.msRequestFullscreen();
-      } else if (gallery.mozRequestFullScreen) {
-        gallery.mozRequestFullScreen();
-      } else if (gallery.webkitRequestFullscreen) {
-        gallery.webkitRequestFullscreen();
-      } else {
-        // fallback to modal for unsupported browsers
-        this.setState({modalFullscreen: true});
-      }
-
-      this.setState({isFullscreen: true});
+    const gallery = this._imageGallery;
+
+    if (gallery.requestFullscreen) {
+      gallery.requestFullscreen();
+    } else if (gallery.msRequestFullscreen) {
+      gallery.msRequestFullscreen();
+    } else if (gallery.mozRequestFullScreen) {
+      gallery.mozRequestFullScreen();
+    } else if (gallery.webkitRequestFullscreen) {
+      gallery.webkitRequestFullscreen();
+    } else {
+      // fallback to modal for unsupported browsers
+      this.setState({modalFullscreen: true});
     }
+
+    this.setState({isFullscreen: true});
   }
 
   exitFullScreen() {
@@ -710,7 +708,7 @@ export default class ImageGallery extends React.Component {
             className='image-gallery-slide-wrapper'>
 
             {
-              this.props.allowFullscreen &&
+              this.props.showFullscreenButton &&
                 <a
                   className={
                     `image-gallery-fullscreen-button${isFullscreen ? ' active' : ''}`}
@@ -822,7 +820,7 @@ ImageGallery.propTypes = {
   showBullets: React.PropTypes.bool,
   showThumbnails: React.PropTypes.bool,
   showPlayButton: React.PropTypes.bool,
-  allowFullscreen: React.PropTypes.bool,
+  showFullscreenButton: React.PropTypes.bool,
   slideOnThumbnailHover: React.PropTypes.bool,
   disableThumbnailScroll: React.PropTypes.bool,
   disableArrowKeys: React.PropTypes.bool,
@@ -850,7 +848,7 @@ ImageGallery.defaultProps = {
   showBullets: false,
   showThumbnails: true,
   showPlayButton: true,
-  allowFullscreen: true,
+  showFullscreenButton: true,
   slideOnThumbnailHover: false,
   disableThumbnailScroll: false,
   disableArrowKeys: false,