react-grid-gallery - npm Package Compare versions

Comparing version 0.5.2 to 0.5.3

CHANGELOG.md

 # react-grid-gallery
 
+### v0.5.3 / 2018-09-30
+
+* Added `nano` prop and functionality for base64 4x4 image placeholders [PR 101](https://github.com/benhowell/react-grid-gallery/pull/101). Thanks [Vadimuz](https://github.com/vadimuz).
+
 ### v0.5.2 / 2018-09-15
@@ -4,0 +8,0 @@

lib/Gallery.js

@@ -359,2 +359,3 @@ 'use strict';
         src: _propTypes2.default.string.isRequired,
+        nano: _propTypes2.default.string,
         alt: _propTypes2.default.string,
@@ -361,0 +362,0 @@ thumbnail: _propTypes2.default.string.isRequired,

lib/Image.js

@@ -65,3 +65,11 @@ 'use strict';
             if (this.props.tileViewportStyle) return this.props.tileViewportStyle.call(this);
-            if (this.props.item.isSelected) return {
+            var nanoBase64Backgorund = {};
+            if (this.props.item.nano) {
+                nanoBase64Backgorund = {
+                    background: 'url(' + this.props.item.nano + ')',
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center center'
+                };
+            }
+            if (this.props.item.isSelected) return Object.assign({
                 width: this.props.item.vwidth - 32,
@@ -71,8 +79,8 @@ height: this.props.height - 32,
                 overflow: "hidden"
-            };
-            return {
+            }, nanoBase64Backgorund);
+            return Object.assign({
                 width: this.props.item.vwidth,
                 height: this.props.height,
                 overflow: "hidden"
-            };
+            }, nanoBase64Backgorund);
         }
@@ -79,0 +87,0 @@ }, {

package.json

 {
   "name": "react-grid-gallery",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Justified gallery component for React.",
@@ -5,0 +5,0 @@ "main": "lib/Gallery.js",

README.md

@@ -69,2 +69,3 @@ # React Grid Gallery
 thumbnailHeight         | number        | undefined     | Required. Height of the thumbnail image.
+nano                    | string:base64 | undefined     | Optional. Thumbnail Base64 image will be injected to background under the main image. This provides a base64, 4x4 generated image whilst the image is beong loaded.
 alt                     | string        | ""            | Optional. Image alt attribute.
@@ -120,3 +121,3 @@ tags                    | array         | undefined     | Optional. An array of objects containing tag attributes (value and title). e.g. `{value: "foo", title: "bar"}`
 onClickNext             | func          | onClickNext   | Optional. Function to execute when lightbox right arrow clicked. Overrides internal implementation of onClickNext.
-currentImageWillChange  | func          | undefined     | Optional. Function to execute before lightbox image change. Useful for tracking current image shown in lightbox. Allows access to gallery object using `this` (See [Programmers notes])
+currentImageWillChange  | func          | undefined     | Optional. Function to execute before lightbox image change. Useful for tracking current image shown in lightbox. Allows access to gallery object using `this` (See [Programmers notes](#programmers-notes) for more info about implicit `this`).
 showLightboxThumbnails  | bool          | false         | Optional. Display thumbnails beneath the Lightbox image.
@@ -199,2 +200,4 @@ onClickLightboxThumbnail | func         | gotoImage     | Optional. Function to execute when lightbox thumbnail clicked. Overrides internal function: gotoImage.
 
+* [Vadimuz](https://github.com/vadimuz) for nano image props and functionality [PR 101](https://github.com/benhowell/react-grid-gallery/pull/101).
+
  * Demo stock photos:
@@ -201,0 +204,0 @@ * [Jeshu John - designerspics.com](http://designerspics.com)

src/Gallery.js

@@ -316,2 +316,3 @@ import PropTypes from 'prop-types';
             src: PropTypes.string.isRequired,
+            nano: PropTypes.string,
             alt: PropTypes.string,
@@ -318,0 +319,0 @@ thumbnail: PropTypes.string.isRequired,

src/Image.js

@@ -35,14 +35,22 @@ import PropTypes from 'prop-types';
             return this.props.tileViewportStyle.call(this);
+        var nanoBase64Backgorund = {}
+        if(this.props.item.nano) {
+            nanoBase64Backgorund = { 
+                background: `url(${this.props.item.nano})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center center'
+            }
+        }
         if (this.props.item.isSelected)
-            return {
+            return Object.assign({
                 width: this.props.item.vwidth -32,
                 height: this.props.height -32,
                 margin: 16,
-                overflow: "hidden"
-            };
-        return {
+                overflow: "hidden",
+            }, nanoBase64Backgorund);
+        return Object.assign({
             width: this.props.item.vwidth,
             height: this.props.height,
-            overflow: "hidden"
-        };
+            overflow: "hidden",
+        }, nanoBase64Backgorund);
     }
@@ -49,0 +57,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

443903

increased by0.38%

Lines of code

4351

increased by0.42%

Number of lines in readme file

208

increased by1.46%

No dependency changes