react-image-gallery - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1

build/image-gallery.js

@@ -39,2 +39,6 @@ 'use strict';
 
+var _screenfull = require('screenfull');
+
+var _screenfull2 = _interopRequireDefault(_screenfull);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -188,2 +192,13 @@
   }, {
+    key: 'fullScreen',
+    value: function fullScreen() {
+      if (_screenfull2.default.enabled) {
+        if (!_screenfull2.default.isFullscreen) {
+          _screenfull2.default.request(this._imageGallery);
+        } else {
+          _screenfull2.default.exit();
+        }
+      }
+    }
+  }, {
     key: 'slideToIndex',
@@ -457,3 +472,3 @@ value: function slideToIndex(index, event) {
 
-      if (this.props.infinite) {
+      if (this.props.infinite && this.props.items.length > 1) {
         if (currentIndex === 0 && index === totalSlides) {
@@ -529,2 +544,6 @@ // make the last slide the slide before the first
 
+        var onImageError = _this7._handleImageError;
+        if (_this7.props.onImageError) {
+          onImageError = _this7.props.onImageError;
+        }
         var slide = _react2.default.createElement(
@@ -547,3 +566,3 @@ 'div',
               onLoad: _this7.props.onImageLoad,
-              onError: _this7._handleImageError.bind(_this7)
+              onError: onImageError.bind(_this7)
             }),
@@ -566,2 +585,7 @@ item.description && _react2.default.createElement(
 
+        var onThumbnailError = _this7._handleImageError;
+        if (_this7.props.onThumbnailError) {
+          onThumbnailError = _this7.props.onThumbnailError;
+        }
+
         if (_this7.props.showThumbnails) {
@@ -582,3 +606,3 @@ thumbnails.push(_react2.default.createElement(
               alt: item.thumbnailAlt,
-              onError: _this7._handleImageError.bind(_this7) })
+              onError: onThumbnailError.bind(_this7) })
           ));
@@ -627,2 +651,3 @@ }
               key: 'swipeable',
+              delta: 1,
               onSwipingLeft: this._handleSwiping.bind(this, -1),
@@ -715,3 +740,5 @@ onSwipingRight: this._handleSwiping.bind(this, 1),
   onClick: _react2.default.PropTypes.func,
-  onImageLoad: _react2.default.PropTypes.func
+  onImageLoad: _react2.default.PropTypes.func,
+  onImageError: _react2.default.PropTypes.func,
+  onThumbnailError: _react2.default.PropTypes.func
 };
@@ -718,0 +745,0 @@

gulpfile.js

@@ -9,2 +9,3 @@ var babel = require('gulp-babel')
 var sass = require('gulp-sass')
+var uglify = require('gulp-uglify')
 var source = require('vinyl-source-stream')
@@ -36,3 +37,6 @@ var buffer = require('vinyl-buffer')
     debug: true
-  }).transform('babelify', {presets: ['es2015', 'react']}))
+  }).transform('babelify', {
+      plugins: ['transform-runtime'],
+      presets: ['es2015', 'react']
+    }))
     .bundle()
@@ -45,2 +49,18 @@ .pipe(source('example.js'))
 
+gulp.task('demo-js', function() {
+  browserify({
+    entries: './example/app.js',
+    extensions: ['.jsx'],
+    debug: true
+  }).transform('babelify', {
+      plugins: ['transform-runtime'],
+      presets: ['es2015', 'react']
+    })
+    .bundle()
+    .pipe(source('demo.js'))
+    .pipe(buffer())
+    .pipe(uglify())
+    .pipe(gulp.dest('./demo/'))
+})
+
 gulp.task('source-js', function () {
@@ -64,1 +84,3 @@ return gulp.src('./src/ImageGallery.jsx')
 gulp.task('build', ['source-js', 'sass'])
+// NODE_ENV=production gulp demo
+gulp.task('demo', ['demo-js'])

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "React Image gallery, React Carousel, React Slide Show component",
@@ -50,2 +50,3 @@ "main": "./build/image-gallery",
     "gulp-sass": "^2.1.1",
+    "gulp-uglify": "^1.5.3",
     "react": "^15.0.1",
@@ -58,4 +59,5 @@ "react-dom": "^15.0.1",
   "dependencies": {
-    "react-swipeable": "^3.3.1"
+    "react-swipeable": "^3.3.1",
+    "screenfull": "^3.0.0"
   }
 }

README.md

@@ -5,3 +5,3 @@ React Image Gallery
 [![npm version](https://badge.fury.io/js/react-image-gallery.svg)](https://badge.fury.io/js/react-image-gallery)
-[![Download Count](http://img.shields.io/npm/dm/react-swipe.svg?style=flat)](http://www.npmjs.com/package/react-image-gallery)
+[![Download Count](http://img.shields.io/npm/dm/react-image-gallery.svg?style=flat)](http://www.npmjs.com/package/react-image-gallery)
 
@@ -17,3 +17,3 @@ ![http://i.imgur.com/bxa4s9f.gif](http://i.imgur.com/bxa4s9f.gif)
 
-## Demo & Examples
+## Live Demo (try it on mobile)
 Live demo: [`linxtion.com/demo/react-image-gallery`](http://linxtion.com/demo/react-image-gallery)
@@ -113,4 +113,9 @@
   * an image src pointing to your default image if an image fails to load
+  * handles both slide image, and thumbnail image
+* `onImageError`: Function, `callback(event)`
+  * overrides defaultImage
+* `onThumbnailError`: Function, `callback(event)`
+  * overrides defaultImage
 * `indexSeparator`: String, default `' / '`, ignored if `showIndex` is false
-* `slideInterval`: Integer, default `4000`
+* `slideInterval`: Integer, default `3000`
 * `startIndex`: Integer, default `0`
@@ -128,2 +133,3 @@ * `onImageLoad`: Function, `callback(event)`
 * `pause()`: pauses the slides.
+* `fullScreen()`: activates full screen
 * `slideToIndex(index)`: slide to a specific index.
@@ -130,0 +136,0 @@

src/ImageGallery.jsx

 import React from 'react'
 import Swipeable from 'react-swipeable'
+import ScreenFull from 'screenfull'
 
@@ -131,2 +132,12 @@ const MIN_INTERVAL = 500
 
+  fullScreen() {
+    if (ScreenFull.enabled) {
+      if (!ScreenFull.isFullscreen) {
+          ScreenFull.request(this._imageGallery);
+      } else {
+          ScreenFull.exit();
+      }
+    }
+  }
+
   slideToIndex(index, event) {
@@ -373,3 +384,3 @@ let slideCount = this.props.items.length - 1
 
-    if (this.props.infinite) {
+    if (this.props.infinite && this.props.items.length > 1) {
       if (currentIndex === 0 && index === totalSlides) {
@@ -440,2 +451,6 @@ // make the last slide the slide before the first
 
+      let onImageError = this._handleImageError;
+      if (this.props.onImageError) {
+        onImageError = this.props.onImageError
+      }
       const slide = (
@@ -455,3 +470,3 @@ <div
               onLoad={this.props.onImageLoad}
-              onError={this._handleImageError.bind(this)}
+              onError={onImageError.bind(this)}
             />
@@ -476,2 +491,7 @@ {
 
+      let onThumbnailError = this._handleImageError;
+      if (this.props.onThumbnailError) {
+        onThumbnailError = this.props.onThumbnailError
+      }
+
       if (this.props.showThumbnails) {
@@ -496,3 +516,3 @@ thumbnails.push(
               alt={item.thumbnailAlt}
-              onError={this._handleImageError.bind(this)}/>
+              onError={onThumbnailError.bind(this)}/>
           </a>
@@ -551,2 +571,3 @@ )
                     key='swipeable'
+                    delta={1}
                     onSwipingLeft={this._handleSwiping.bind(this, -1)}
@@ -629,2 +650,4 @@ onSwipingRight={this._handleSwiping.bind(this, 1)}
   onImageLoad: React.PropTypes.func,
+  onImageError: React.PropTypes.func,
+  onThumbnailError: React.PropTypes.func
 }
@@ -631,0 +654,0 @@

New alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

356728

546.02%

Number of package files

11

22.22%

Lines of code

2435

75.31%

Number of lines in readme file

151

4.14%

Worsened metrics

Dependency count

2

100%

Dev dependency count

19

5.56%

Number of low quality alerts

2

100%

Number of low supply chain risk alerts

2

Infinity%

Dependency changes

• + Added

  screenfull@^3.0.0

• + Added

  screenfull@3.3.3
  (transitive)