react-image-gallery - npm Package Compare versions

Comparing version 0.7.12 to 0.7.13

build/image-gallery.js

@@ -180,2 +180,11 @@ 'use strict';
   }, {
+    key: 'setModalFullscreen',
+    value: function setModalFullscreen(state) {
+      this.setState({ modalFullscreen: state });
+      // manually call because browser does not support screenchange events
+      if (this.props.onScreenChange) {
+        this.props.onScreenChange(state);
+      }
+    }
+  }, {
     key: 'fullScreen',
@@ -185,17 +194,17 @@ value: function fullScreen() {
 
-      if (gallery.requestFullscreen) {
-        gallery.requestFullscreen();
-      } else if (gallery.msRequestFullscreen) {
-        gallery.msRequestFullscreen();
-      } else if (gallery.mozRequestFullScreen) {
-        gallery.mozRequestFullScreen();
-      } else if (gallery.webkitRequestFullscreen) {
-        gallery.webkitRequestFullscreen();
+      if (this.props.useBrowserFullscreen) {
+        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 fullscreen modal for unsupported browsers
+          this.setModalFullscreen(true);
+        }
       } else {
-        // fallback to fullscreen modal for unsupported browsers
-        this.setState({ modalFullscreen: true });
-        // manually call because browser does not support screenchange events
-        if (this.props.onScreenChange) {
-          this.props.onScreenChange(true);
-        }
+        this.setModalFullscreen(true);
       }
@@ -209,17 +218,17 @@
       if (this.state.isFullscreen) {
-        if (document.exitFullscreen) {
-          document.exitFullscreen();
-        } else if (document.webkitExitFullscreen) {
-          document.webkitExitFullscreen();
-        } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen();
-        } else if (document.msExitFullscreen) {
-          document.msExitFullscreen();
+        if (this.props.useBrowserFullscreen) {
+          if (document.exitFullscreen) {
+            document.exitFullscreen();
+          } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+          } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+          } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+          } else {
+            // fallback to fullscreen modal for unsupported browsers
+            this.setModalFullscreen(false);
+          }
         } else {
-          // fallback to fullscreen modal for unsupported browsers
-          this.setState({ modalFullscreen: false });
-          // manually call because browser does not support screenchange events
-          if (this.props.onScreenChange) {
-            this.props.onScreenChange(false);
-          }
+          this.setModalFullscreen(false);
         }
@@ -784,2 +793,5 @@
               key: index,
+              role: 'button',
+              'aria-pressed': currentIndex === index ? 'true' : 'false',
+              'aria-label': 'Go to Slide ' + (index + 1),
               className: 'image-gallery-thumbnail' + (currentIndex === index ? ' active' : '') + thumbnailClass,
@@ -810,3 +822,6 @@
               return _this7.slideToIndex.call(_this7, index, event);
-            } }));
+            },
+            'aria-pressed': currentIndex === index ? 'true' : 'false',
+            'aria-label': 'Go to Slide ' + (index + 1)
+          }));
         }
@@ -862,3 +877,7 @@ });
             'ul',
-            { className: 'image-gallery-bullets-container' },
+            {
+              className: 'image-gallery-bullets-container',
+              role: 'navigation',
+              'aria-label': 'Bullet Navigation'
+            },
             bullets
@@ -894,3 +913,4 @@ )
           },
-          className: 'image-gallery' + (modalFullscreen ? ' fullscreen-modal' : '')
+          className: 'image-gallery' + (modalFullscreen ? ' fullscreen-modal' : ''),
+          'aria-live': 'polite'
         },
@@ -924,3 +944,6 @@ _react2.default.createElement(
                   className: 'image-gallery-thumbnails-container',
-                  style: thumbnailStyle },
+                  style: thumbnailStyle,
+                  role: 'navigation',
+                  'aria-label': 'Thumbnail Navigation'
+                },
                 thumbnails
@@ -954,2 +977,3 @@ )
   disableSwipe: _react2.default.PropTypes.bool,
+  useBrowserFullscreen: _react2.default.PropTypes.bool,
   defaultImage: _react2.default.PropTypes.string,
@@ -991,2 +1015,3 @@ indexSeparator: _react2.default.PropTypes.string,
   disableSwipe: false,
+  useBrowserFullscreen: true,
   indexSeparator: ' / ',
@@ -1002,3 +1027,4 @@ thumbnailPosition: 'bottom',
       disabled: disabled,
-      onClick: onClick
+      onClick: onClick,
+      'aria-label': 'Previous Slide'
     });
@@ -1011,3 +1037,4 @@ },
       disabled: disabled,
-      onClick: onClick
+      onClick: onClick,
+      'aria-label': 'Next Slide'
     });
@@ -1019,3 +1046,4 @@ },
       className: 'image-gallery-play-button' + (isPlaying ? ' active' : ''),
-      onClick: onClick
+      onClick: onClick,
+      'aria-label': 'Play or Pause Slideshow'
     });
@@ -1027,3 +1055,4 @@ },
       className: 'image-gallery-fullscreen-button' + (isFullscreen ? ' active' : ''),
-      onClick: onClick
+      onClick: onClick,
+      'aria-label': 'Open Fullscreen'
     });
@@ -1030,0 +1059,0 @@ }

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.7.12",
+  "version": "0.7.13",
   "description": "Responsive and flexible carousel component with thumbnail support",
@@ -5,0 +5,0 @@ "main": "./build/image-gallery",

README.md

@@ -106,2 +106,4 @@ React Image Gallery
 * `showFullscreenButton`: Boolean, default `true`
+* `useBrowserFullscreen`: Boolean, default `true`
+  * if false, fullscreen will be done via css within the browser
 * `showPlayButton`: Boolean, default `true`
@@ -244,2 +246,3 @@ * `showBullets`: Boolean, default `false`
 git clone https://github.com/xiaolin/react-image-gallery.git
+cd react-image-gallery
 npm install
@@ -246,0 +249,0 @@ npm start

src/ImageGallery.jsx

@@ -47,2 +47,3 @@ import React from 'react';
     disableSwipe: React.PropTypes.bool,
+    useBrowserFullscreen: React.PropTypes.bool,
     defaultImage: React.PropTypes.string,
@@ -67,3 +68,3 @@ indexSeparator: React.PropTypes.string,
     renderFullscreenButton: React.PropTypes.func,
-    renderItem: React.PropTypes.func,
+    renderItem: React.PropTypes.func
   };
@@ -86,2 +87,3 @@
     disableSwipe: false,
+    useBrowserFullscreen: true,
     indexSeparator: ' / ',
@@ -99,2 +101,3 @@ thumbnailPosition: 'bottom',
           onClick={onClick}
+          aria-label='Previous Slide'
         />
@@ -110,2 +113,3 @@ );
           onClick={onClick}
+          aria-label='Next Slide'
         />
@@ -121,2 +125,3 @@ );
           onClick={onClick}
+          aria-label='Play or Pause Slideshow'
         />
@@ -132,2 +137,3 @@ );
           onClick={onClick}
+          aria-label='Open Fullscreen'
         />
@@ -252,20 +258,28 @@ );
 
+  setModalFullscreen(state) {
+      this.setState({modalFullscreen: state});
+      // manually call because browser does not support screenchange events
+      if (this.props.onScreenChange) {
+        this.props.onScreenChange(state);
+      }
+  }
+
   fullScreen() {
     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();
+    if (this.props.useBrowserFullscreen) {
+      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 fullscreen modal for unsupported browsers
+        this.setModalFullscreen(true);
+      }
     } else {
-      // fallback to fullscreen modal for unsupported browsers
-      this.setState({modalFullscreen: true});
-      // manually call because browser does not support screenchange events
-      if (this.props.onScreenChange) {
-        this.props.onScreenChange(true);
-      }
+      this.setModalFullscreen(true);
     }
@@ -279,17 +293,17 @@
     if (this.state.isFullscreen) {
-      if (document.exitFullscreen) {
-        document.exitFullscreen();
-      } else if (document.webkitExitFullscreen) {
-        document.webkitExitFullscreen();
-      } else if (document.mozCancelFullScreen) {
-        document.mozCancelFullScreen();
-      } else if (document.msExitFullscreen) {
-        document.msExitFullscreen();
+      if (this.props.useBrowserFullscreen) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        } else {
+          // fallback to fullscreen modal for unsupported browsers
+          this.setModalFullscreen(false);
+        }
       } else {
-        // fallback to fullscreen modal for unsupported browsers
-        this.setState({modalFullscreen: false});
-        // manually call because browser does not support screenchange events
-        if (this.props.onScreenChange) {
-          this.props.onScreenChange(false);
-        }
+        this.setModalFullscreen(false);
       }
@@ -818,2 +832,5 @@
             key={index}
+            role='button'
+            aria-pressed={currentIndex === index ? 'true' : 'false'}
+            aria-label={`Go to Slide ${index + 1}`}
             className={
@@ -846,3 +863,6 @@ 'image-gallery-thumbnail' +
 
-            onClick={event => this.slideToIndex.call(this, index, event)}>
+            onClick={event => this.slideToIndex.call(this, index, event)}
+            aria-pressed={currentIndex === index ? 'true' : 'false'}
+            aria-label={`Go to Slide ${index + 1}`}
+          >
           </button>
@@ -908,3 +928,7 @@ );
             <div className='image-gallery-bullets'>
-              <ul className='image-gallery-bullets-container'>
+              <ul
+                className='image-gallery-bullets-container'
+                role='navigation'
+                aria-label='Bullet Navigation'
+              >
                 {bullets}
@@ -936,2 +960,3 @@ </ul>
           `image-gallery${modalFullscreen ? ' fullscreen-modal' : ''}`}
+        aria-live='polite'
       >
@@ -960,3 +985,6 @@
                     className='image-gallery-thumbnails-container'
-                    style={thumbnailStyle}>
+                    style={thumbnailStyle}
+                    role='navigation'
+                    aria-label='Thumbnail Navigation'
+                  >
                     {thumbnails}
@@ -963,0 +991,0 @@ </div>

No alert changes

Improved metrics

Total package byte prevSize

112664

increased by1.88%

Lines of code

2545

increased by2.25%

Number of lines in readme file

256

increased by1.19%

No dependency changes