react-photo-gallery
Advanced tools
Comparing version 5.6.1 to 5.6.2
@@ -124,41 +124,39 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Gallery = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| (function () { | ||
| var printWarning = function printWarning(format) { | ||
| for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
| args[_key - 1] = arguments[_key]; | ||
| } | ||
| var printWarning = function printWarning(format) { | ||
| for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
| args[_key - 1] = arguments[_key]; | ||
| } | ||
| var argIndex = 0; | ||
| var message = 'Warning: ' + format.replace(/%s/g, function () { | ||
| return args[argIndex++]; | ||
| }); | ||
| if (typeof console !== 'undefined') { | ||
| console.error(message); | ||
| } | ||
| try { | ||
| // --- Welcome to debugging React --- | ||
| // This error was thrown as a convenience so that you can use this stack | ||
| // to find the callsite that caused this warning to fire. | ||
| throw new Error(message); | ||
| } catch (x) {} | ||
| }; | ||
| var argIndex = 0; | ||
| var message = 'Warning: ' + format.replace(/%s/g, function () { | ||
| return args[argIndex++]; | ||
| }); | ||
| if (typeof console !== 'undefined') { | ||
| console.error(message); | ||
| } | ||
| try { | ||
| // --- Welcome to debugging React --- | ||
| // This error was thrown as a convenience so that you can use this stack | ||
| // to find the callsite that caused this warning to fire. | ||
| throw new Error(message); | ||
| } catch (x) {} | ||
| }; | ||
| warning = function warning(condition, format) { | ||
| if (format === undefined) { | ||
| throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument'); | ||
| } | ||
| warning = function warning(condition, format) { | ||
| if (format === undefined) { | ||
| throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument'); | ||
| } | ||
| if (format.indexOf('Failed Composite propType: ') === 0) { | ||
| return; // Ignore CompositeComponent proptype check. | ||
| if (format.indexOf('Failed Composite propType: ') === 0) { | ||
| return; // Ignore CompositeComponent proptype check. | ||
| } | ||
| if (!condition) { | ||
| for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) { | ||
| args[_key2 - 2] = arguments[_key2]; | ||
| } | ||
| if (!condition) { | ||
| for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) { | ||
| args[_key2 - 2] = arguments[_key2]; | ||
| } | ||
| printWarning.apply(undefined, [format].concat(args)); | ||
| } | ||
| }; | ||
| })(); | ||
| printWarning.apply(undefined, [format].concat(args)); | ||
| } | ||
| }; | ||
| } | ||
@@ -339,3 +337,7 @@ | ||
| process.emit = noop; | ||
| process.prependListener = noop; | ||
| process.prependOnceListener = noop; | ||
| process.listeners = function (name) { return [] } | ||
| process.binding = function (name) { | ||
@@ -1048,5 +1050,7 @@ throw new Error('process.binding is not supported'); | ||
| Object.defineProperty(exports, '__esModule', { | ||
| value: true | ||
| value: true | ||
| }); | ||
| var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
| var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); | ||
@@ -1058,2 +1062,4 @@ | ||
| function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } | ||
@@ -1072,127 +1078,116 @@ | ||
| var Gallery = (function (_React$Component) { | ||
| _inherits(Gallery, _React$Component); | ||
| _inherits(Gallery, _React$Component); | ||
| function Gallery() { | ||
| _classCallCheck(this, Gallery); | ||
| function Gallery() { | ||
| _classCallCheck(this, Gallery); | ||
| _get(Object.getPrototypeOf(Gallery.prototype), 'constructor', this).call(this); | ||
| this.state = { | ||
| containerWidth: 0 | ||
| }; | ||
| this.handleResize = this.handleResize.bind(this); | ||
| } | ||
| _get(Object.getPrototypeOf(Gallery.prototype), 'constructor', this).call(this); | ||
| this.state = { | ||
| containerWidth: 0 | ||
| }; | ||
| this.handleResize = this.handleResize.bind(this); | ||
| } | ||
| _createClass(Gallery, [{ | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
| this.setState({ containerWidth: Math.floor(this._gallery.clientWidth) }); | ||
| window.addEventListener('resize', this.handleResize); | ||
| } | ||
| }, { | ||
| key: 'componentDidUpdate', | ||
| value: function componentDidUpdate() { | ||
| if (this._gallery.clientWidth !== this.state.containerWidth) { | ||
| this.setState({ containerWidth: Math.floor(this._gallery.clientWidth) }); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
| window.removeEventListener('resize', this.handleResize, false); | ||
| } | ||
| }, { | ||
| key: 'handleResize', | ||
| value: function handleResize(e) { | ||
| this.setState({ containerWidth: Math.floor(this._gallery.clientWidth) }); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _this = this; | ||
| _createClass(Gallery, [{ | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
| this.setState({ containerWidth: Math.floor(this._gallery.clientWidth) }); | ||
| window.addEventListener('resize', this.handleResize); | ||
| } | ||
| }, { | ||
| key: 'componentDidUpdate', | ||
| value: function componentDidUpdate() { | ||
| if (this._gallery.clientWidth !== this.state.containerWidth) { | ||
| this.setState({ containerWidth: Math.floor(this._gallery.clientWidth) }); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
| window.removeEventListener('resize', this.handleResize, false); | ||
| } | ||
| }, { | ||
| key: 'handleResize', | ||
| value: function handleResize(e) { | ||
| this.setState({ containerWidth: Math.floor(this._gallery.clientWidth) }); | ||
| } | ||
| }, { | ||
| key: 'aspectRatio', | ||
| value: function aspectRatio(_ref) { | ||
| var width = _ref.width; | ||
| var height = _ref.height; | ||
| var cols = this.props.cols, | ||
| photoPreviewNodes = [], | ||
| contWidth = this.state.containerWidth - cols * (this.props.margin * 2); | ||
| return width / height; | ||
| } | ||
| }, { | ||
| key: 'scalePhotoDimensions', | ||
| value: function scalePhotoDimensions() { | ||
| var _this = this; | ||
| contWidth = Math.floor(contWidth); // add some padding to prevent layout prob | ||
| var remainder = this.props.photos.length % cols; | ||
| if (remainder) { | ||
| // there are fewer photos than cols num in last row | ||
| var lastRowWidth = Math.floor(this.state.containerWidth / cols * remainder - remainder * (this.props.margin * 2)); | ||
| var lastRowIndex = this.props.photos.length - remainder; | ||
| } | ||
| // loop thru each set of cols num | ||
| // eg. if cols is 3 it will loop thru 0,1,2, then 3,4,5 to perform calculations for the particular set | ||
| for (var i = 0; i < this.props.photos.length; i += cols) { | ||
| var totalAr = 0, | ||
| commonHeight = 0; | ||
| var _props = this.props; | ||
| var cols = _props.cols; | ||
| var margin = _props.margin; | ||
| var photos = _props.photos; | ||
| // get the total aspect ratio of the row | ||
| for (var j = i; j < i + cols; j++) { | ||
| if (j == this.props.photos.length) { | ||
| break; | ||
| } | ||
| this.props.photos[j].aspectRatio = this.props.photos[j].width / this.props.photos[j].height; | ||
| totalAr += this.props.photos[j].aspectRatio; | ||
| } | ||
| if (i === lastRowIndex) { | ||
| commonHeight = lastRowWidth / totalAr; | ||
| } else { | ||
| commonHeight = contWidth / totalAr; | ||
| } | ||
| // run thru the same set of items again to give the width and common height | ||
| // subtract 1 pixel because the browser may round up a pixel | ||
| var containerWidth = this.state.containerWidth - 1; | ||
| var _loop = function (k) { | ||
| if (k == _this.props.photos.length) { | ||
| return 'break'; | ||
| } | ||
| // divide photos in rows based on cols per row [[1,2,3],[4,5,6],[7,8]]] | ||
| var rows = photos.reduce(function (acc, item, idx) { | ||
| var rowNum = Math.floor(idx / cols); | ||
| acc[rowNum] = acc[rowNum] ? [].concat(_toConsumableArray(acc[rowNum]), [item]) : [item]; | ||
| return acc; | ||
| }, []); | ||
| var src = _this.props.photos[k].src, | ||
| srcset = undefined, | ||
| sizes = undefined; | ||
| if (_this.props.photos[k].srcset) { | ||
| srcset = _this.props.photos[k].srcset.join(); | ||
| } | ||
| if (_this.props.photos[k].sizes) { | ||
| sizes = _this.props.photos[k].sizes.join(); | ||
| } | ||
| // scale the image dimensions | ||
| rows = rows.map(function (row) { | ||
| var totalAspectRatio = row.reduce(function (acc, photo, idx) { | ||
| return acc + _this.aspectRatio(photo); | ||
| }, 0); | ||
| // calculate the width differently if its the last row and there are fewer photos left than col num | ||
| var rowWidth = row.length < cols ? Math.floor(containerWidth / cols * row.length - row.length * (margin * 2)) : Math.floor(containerWidth - row.length * (margin * 2)); | ||
| var rowHeight = rowWidth / totalAspectRatio; | ||
| return row.map(function (photo) { | ||
| return _extends({}, photo, { | ||
| width: rowHeight * _this.aspectRatio(photo), | ||
| height: rowHeight | ||
| }); | ||
| }); | ||
| }); | ||
| style.margin = _this.props.margin; | ||
| photoPreviewNodes.push(_react2['default'].createElement( | ||
| 'div', | ||
| { key: k, style: style }, | ||
| _react2['default'].createElement( | ||
| 'a', | ||
| { href: '#', className: k, onClick: function (e) { | ||
| return _this.props.onClickPhoto(k, e); | ||
| } }, | ||
| _react2['default'].createElement('img', { src: src, srcSet: srcset, sizes: sizes, style: { display: 'block', border: 0 }, height: commonHeight, width: commonHeight * _this.props.photos[k].aspectRatio, alt: _this.props.photos[k].alt }) | ||
| ) | ||
| )); | ||
| }; | ||
| // flatten back the photos array | ||
| return rows.reduce(function (acc, row) { | ||
| return [].concat(_toConsumableArray(acc), _toConsumableArray(row)); | ||
| }, []); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _this2 = this; | ||
| for (var k = i; k < i + cols; k++) { | ||
| var _ret = _loop(k); | ||
| var resizedPhotos = this.scalePhotoDimensions(); | ||
| style.margin = this.props.margin; | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| { id: 'Gallery', className: 'clearfix', ref: function (c) { | ||
| return _this2._gallery = c; | ||
| } }, | ||
| resizedPhotos.map(function (photo, idx) { | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| { style: style, key: idx }, | ||
| _react2['default'].createElement( | ||
| 'a', | ||
| { href: '#', onClick: function (e) { | ||
| return _this2.props.onClickPhoto(idx, e); | ||
| } }, | ||
| _react2['default'].createElement('img', { src: photo.src, srcSet: photo.srcset.join(), sizes: photo.sizes.join(), style: { display: 'block', border: 0 }, height: photo.height, width: photo.width, alt: photo.alt }) | ||
| ) | ||
| ); | ||
| }) | ||
| ); | ||
| } | ||
| }]); | ||
| if (_ret === 'break') break; | ||
| } | ||
| } | ||
| return this.renderGallery(photoPreviewNodes); | ||
| } | ||
| }, { | ||
| key: 'renderGallery', | ||
| value: function renderGallery(photoPreviewNodes) { | ||
| var _this2 = this; | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| { id: 'Gallery', className: 'clearfix', ref: function (c) { | ||
| return _this2._gallery = c; | ||
| } }, | ||
| photoPreviewNodes | ||
| ); | ||
| } | ||
| }]); | ||
| return Gallery; | ||
| return Gallery; | ||
| })(_react2['default'].Component); | ||
@@ -1203,28 +1198,28 @@ | ||
| Gallery.propTypes = { | ||
| photos: function photos(props, propName, componentName) { | ||
| return _propTypes2['default'].arrayOf(_propTypes2['default'].shape({ | ||
| src: _propTypes2['default'].string.isRequired, | ||
| width: _propTypes2['default'].number.isRequired, | ||
| height: _propTypes2['default'].number.isRequired, | ||
| alt: _propTypes2['default'].string, | ||
| srcset: _propTypes2['default'].array, | ||
| sizes: _propTypes2['default'].array | ||
| })).isRequired.apply(this, arguments); | ||
| }, | ||
| onClickPhoto: _propTypes2['default'].func, | ||
| cols: _propTypes2['default'].number, | ||
| margin: _propTypes2['default'].number | ||
| photos: function photos(props, propName, componentName) { | ||
| return _propTypes2['default'].arrayOf(_propTypes2['default'].shape({ | ||
| src: _propTypes2['default'].string.isRequired, | ||
| width: _propTypes2['default'].number.isRequired, | ||
| height: _propTypes2['default'].number.isRequired, | ||
| alt: _propTypes2['default'].string, | ||
| srcset: _propTypes2['default'].array, | ||
| sizes: _propTypes2['default'].array | ||
| })).isRequired.apply(this, arguments); | ||
| }, | ||
| onClickPhoto: _propTypes2['default'].func, | ||
| cols: _propTypes2['default'].number, | ||
| margin: _propTypes2['default'].number | ||
| }; | ||
| Gallery.defaultProps = { | ||
| cols: 3, | ||
| onClickPhoto: function onClickPhoto(k, e) { | ||
| e.preventDefault(); | ||
| }, | ||
| margin: 2 | ||
| cols: 3, | ||
| onClickPhoto: function onClickPhoto(k, e) { | ||
| e.preventDefault(); | ||
| }, | ||
| margin: 2 | ||
| }; | ||
| // Gallery image style | ||
| var style = { | ||
| display: 'block', | ||
| backgroundColor: '#e3e3e3', | ||
| float: 'left' | ||
| display: 'block', | ||
| backgroundColor: '#e3e3e3', | ||
| float: 'left' | ||
| }; | ||
@@ -1231,0 +1226,0 @@ |
@@ -1,1 +0,1 @@ | ||
| !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Gallery=e()}}(function(){return function e(t,n,r){function o(a,u){if(!n[a]){if(!t[a]){var s="function"==typeof require&&require;if(!u&&s)return s(a,!0);if(i)return i(a,!0);var c=new Error("Cannot find module '"+a+"'");throw c.code="MODULE_NOT_FOUND",c}var f=n[a]={exports:{}};t[a][0].call(f.exports,function(e){var n=t[a][1][e];return o(n?n:e)},f,f.exports,e,t,n,r)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a<r.length;a++)o(r[a]);return o}({1:[function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},t.exports=o},{}],2:[function(e,t,n){(function(e){"use strict";function n(e,t,n,o,i,a,u,s){if(r(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var f=[n,o,i,a,u,s],l=0;c=new Error(t.replace(/%s/g,function(){return f[l++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var r=function(e){};"production"!==e.env.NODE_ENV&&(r=function(e){if(void 0===e)throw new Error("invariant requires an error message argument")}),t.exports=n}).call(this,e("_process"))},{_process:4}],3:[function(e,t,n){(function(n){"use strict";var r=e("./emptyFunction"),o=r;"production"!==n.env.NODE_ENV&&!function(){var e=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var o=0,i="Warning: "+e.replace(/%s/g,function(){return n[o++]});"undefined"!=typeof console&&console.error(i);try{throw new Error(i)}catch(a){}};o=function(t,n){if(void 0===n)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(0!==n.indexOf("Failed Composite propType: ")&&!t){for(var r=arguments.length,o=Array(r>2?r-2:0),i=2;i<r;i++)o[i-2]=arguments[i];e.apply(void 0,[n].concat(o))}}}(),t.exports=o}).call(this,e("_process"))},{"./emptyFunction":1,_process:4}],4:[function(e,t,n){function r(){throw new Error("setTimeout has not been defined")}function o(){throw new Error("clearTimeout has not been defined")}function i(e){if(l===setTimeout)return setTimeout(e,0);if((l===r||!l)&&setTimeout)return l=setTimeout,setTimeout(e,0);try{return l(e,0)}catch(t){try{return l.call(null,e,0)}catch(t){return l.call(this,e,0)}}}function a(e){if(p===clearTimeout)return clearTimeout(e);if((p===o||!p)&&clearTimeout)return p=clearTimeout,clearTimeout(e);try{return p(e)}catch(t){try{return p.call(null,e)}catch(t){return p.call(this,e)}}}function u(){v&&h&&(v=!1,h.length?y=h.concat(y):b=-1,y.length&&s())}function s(){if(!v){var e=i(u);v=!0;for(var t=y.length;t;){for(h=y,y=[];++b<t;)h&&h[b].run();b=-1,t=y.length}h=null,v=!1,a(e)}}function c(e,t){this.fun=e,this.array=t}function f(){}var l,p,d=t.exports={};!function(){try{l="function"==typeof setTimeout?setTimeout:r}catch(e){l=r}try{p="function"==typeof clearTimeout?clearTimeout:o}catch(e){p=o}}();var h,y=[],v=!1,b=-1;d.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];y.push(new c(e,t)),1!==y.length||v||i(s)},c.prototype.run=function(){this.fun.apply(null,this.array)},d.title="browser",d.browser=!0,d.env={},d.argv=[],d.version="",d.versions={},d.on=f,d.addListener=f,d.once=f,d.off=f,d.removeListener=f,d.removeAllListeners=f,d.emit=f,d.binding=function(e){throw new Error("process.binding is not supported")},d.cwd=function(){return"/"},d.chdir=function(e){throw new Error("process.chdir is not supported")},d.umask=function(){return 0}},{}],5:[function(e,t,n){(function(n){"use strict";function r(e,t,r,s,c){if("production"!==n.env.NODE_ENV)for(var f in e)if(e.hasOwnProperty(f)){var l;try{o("function"==typeof e[f],"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",s||"React class",r,f),l=e[f](t,f,s,r,null,a)}catch(p){l=p}if(i(!l||l instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",s||"React class",r,f,typeof l),l instanceof Error&&!(l.message in u)){u[l.message]=!0;var d=c?c():"";i(!1,"Failed %s type: %s%s",r,l.message,null!=d?d:"")}}}if("production"!==n.env.NODE_ENV)var o=e("fbjs/lib/invariant"),i=e("fbjs/lib/warning"),a=e("./lib/ReactPropTypesSecret"),u={};t.exports=r}).call(this,e("_process"))},{"./lib/ReactPropTypesSecret":9,_process:4,"fbjs/lib/invariant":2,"fbjs/lib/warning":3}],6:[function(e,t,n){"use strict";var r=e("fbjs/lib/emptyFunction"),o=e("fbjs/lib/invariant"),i=e("./lib/ReactPropTypesSecret");t.exports=function(){function e(e,t,n,r,a,u){u!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},{"./lib/ReactPropTypesSecret":9,"fbjs/lib/emptyFunction":1,"fbjs/lib/invariant":2}],7:[function(e,t,n){(function(n){"use strict";var r=e("fbjs/lib/emptyFunction"),o=e("fbjs/lib/invariant"),i=e("fbjs/lib/warning"),a=e("./lib/ReactPropTypesSecret"),u=e("./checkPropTypes");t.exports=function(e,t){function s(e){var t=e&&(P&&e[P]||e[k]);if("function"==typeof t)return t}function c(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function f(e){this.message=e,this.stack=""}function l(e){function r(r,c,l,p,d,h,y){if(p=p||N,h=h||l,y!==a)if(t)o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");else if("production"!==n.env.NODE_ENV&&"undefined"!=typeof console){var v=p+":"+l;!u[v]&&s<3&&(i(!1,"You are manually calling a React.PropTypes validation function for the `%s` prop on `%s`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.",h,p),u[v]=!0,s++)}return null==c[l]?r?new f(null===c[l]?"The "+d+" `"+h+"` is marked as required "+("in `"+p+"`, but its value is `null`."):"The "+d+" `"+h+"` is marked as required in "+("`"+p+"`, but its value is `undefined`.")):null:e(c,l,p,d,h)}if("production"!==n.env.NODE_ENV)var u={},s=0;var c=r.bind(null,!1);return c.isRequired=r.bind(null,!0),c}function p(e){function t(t,n,r,o,i,a){var u=t[n],s=R(u);if(s!==e){var c=_(u);return new f("Invalid "+o+" `"+i+"` of type "+("`"+c+"` supplied to `"+r+"`, expected ")+("`"+e+"`."))}return null}return l(t)}function d(){return l(r.thatReturnsNull)}function h(e){function t(t,n,r,o,i){if("function"!=typeof e)return new f("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var u=t[n];if(!Array.isArray(u)){var s=R(u);return new f("Invalid "+o+" `"+i+"` of type "+("`"+s+"` supplied to `"+r+"`, expected an array."))}for(var c=0;c<u.length;c++){var l=e(u,c,r,o,i+"["+c+"]",a);if(l instanceof Error)return l}return null}return l(t)}function y(){function t(t,n,r,o,i){var a=t[n];if(!e(a)){var u=R(a);return new f("Invalid "+o+" `"+i+"` of type "+("`"+u+"` supplied to `"+r+"`, expected a single ReactElement."))}return null}return l(t)}function v(e){function t(t,n,r,o,i){if(!(t[n]instanceof e)){var a=e.name||N,u=x(t[n]);return new f("Invalid "+o+" `"+i+"` of type "+("`"+u+"` supplied to `"+r+"`, expected ")+("instance of `"+a+"`."))}return null}return l(t)}function b(e){function t(t,n,r,o,i){for(var a=t[n],u=0;u<e.length;u++)if(c(a,e[u]))return null;var s=JSON.stringify(e);return new f("Invalid "+o+" `"+i+"` of value `"+a+"` "+("supplied to `"+r+"`, expected one of "+s+"."))}return Array.isArray(e)?l(t):("production"!==n.env.NODE_ENV?i(!1,"Invalid argument supplied to oneOf, expected an instance of array."):void 0,r.thatReturnsNull)}function m(e){function t(t,n,r,o,i){if("function"!=typeof e)return new f("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside objectOf.");var u=t[n],s=R(u);if("object"!==s)return new f("Invalid "+o+" `"+i+"` of type "+("`"+s+"` supplied to `"+r+"`, expected an object."));for(var c in u)if(u.hasOwnProperty(c)){var l=e(u,c,r,o,i+"."+c,a);if(l instanceof Error)return l}return null}return l(t)}function g(e){function t(t,n,r,o,i){for(var u=0;u<e.length;u++){var s=e[u];if(null==s(t,n,r,o,i,a))return null}return new f("Invalid "+o+" `"+i+"` supplied to "+("`"+r+"`."))}if(!Array.isArray(e))return"production"!==n.env.NODE_ENV?i(!1,"Invalid argument supplied to oneOfType, expected an instance of array."):void 0,r.thatReturnsNull;for(var o=0;o<e.length;o++){var u=e[o];if("function"!=typeof u)return i(!1,"Invalid argument supplid to oneOfType. Expected an array of check functions, but received %s at index %s.",j(u),o),r.thatReturnsNull}return l(t)}function w(){function e(e,t,n,r,o){return O(e[t])?null:new f("Invalid "+r+" `"+o+"` supplied to "+("`"+n+"`, expected a ReactNode."))}return l(e)}function T(e){function t(t,n,r,o,i){var u=t[n],s=R(u);if("object"!==s)return new f("Invalid "+o+" `"+i+"` of type `"+s+"` "+("supplied to `"+r+"`, expected `object`."));for(var c in e){var l=e[c];if(l){var p=l(u,c,r,o,i+"."+c,a);if(p)return p}}return null}return l(t)}function O(t){switch(typeof t){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(O);if(null===t||e(t))return!0;var n=s(t);if(!n)return!1;var r,o=n.call(t);if(n!==t.entries){for(;!(r=o.next()).done;)if(!O(r.value))return!1}else for(;!(r=o.next()).done;){var i=r.value;if(i&&!O(i[1]))return!1}return!0;default:return!1}}function E(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function R(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":E(t,e)?"symbol":t}function _(e){if("undefined"==typeof e||null===e)return""+e;var t=R(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function j(e){var t=_(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}function x(e){return e.constructor&&e.constructor.name?e.constructor.name:N}var P="function"==typeof Symbol&&Symbol.iterator,k="@@iterator",N="<<anonymous>>",S={array:p("array"),bool:p("boolean"),func:p("function"),number:p("number"),object:p("object"),string:p("string"),symbol:p("symbol"),any:d(),arrayOf:h,element:y(),instanceOf:v,node:w(),objectOf:m,oneOf:b,oneOfType:g,shape:T};return f.prototype=Error.prototype,S.checkPropTypes=u,S.PropTypes=S,S}}).call(this,e("_process"))},{"./checkPropTypes":5,"./lib/ReactPropTypesSecret":9,_process:4,"fbjs/lib/emptyFunction":1,"fbjs/lib/invariant":2,"fbjs/lib/warning":3}],8:[function(e,t,n){(function(n){if("production"!==n.env.NODE_ENV){var r="function"==typeof Symbol&&Symbol["for"]&&Symbol["for"]("react.element")||60103,o=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},i=!0;t.exports=e("./factoryWithTypeCheckers")(o,i)}else t.exports=e("./factoryWithThrowingShims")()}).call(this,e("_process"))},{"./factoryWithThrowingShims":6,"./factoryWithTypeCheckers":7,_process:4}],9:[function(e,t,n){"use strict";var r="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";t.exports=r},{}],10:[function(e,t,n){(function(r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=function(e,t,n){for(var r=!0;r;){var o=e,i=t,a=n;r=!1,null===o&&(o=Function.prototype);var u=Object.getOwnPropertyDescriptor(o,i);if(void 0!==u){if("value"in u)return u.value;var s=u.get;if(void 0===s)return;return s.call(a)}var c=Object.getPrototypeOf(o);if(null===c)return;e=c,t=i,n=a,r=!0,u=c=void 0}},c="undefined"!=typeof window?window.React:"undefined"!=typeof r?r.React:null,f=o(c),l=e("prop-types"),p=o(l),d=function(e){function t(){i(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).call(this),this.state={containerWidth:0},this.handleResize=this.handleResize.bind(this)}return a(t,e),u(t,[{key:"componentDidMount",value:function(){this.setState({containerWidth:Math.floor(this._gallery.clientWidth)}),window.addEventListener("resize",this.handleResize)}},{key:"componentDidUpdate",value:function(){this._gallery.clientWidth!==this.state.containerWidth&&this.setState({containerWidth:Math.floor(this._gallery.clientWidth)})}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.handleResize,!1)}},{key:"handleResize",value:function(e){this.setState({containerWidth:Math.floor(this._gallery.clientWidth)})}},{key:"render",value:function(){var e=this,t=this.props.cols,n=[],r=this.state.containerWidth-t*(2*this.props.margin);r=Math.floor(r);var o=this.props.photos.length%t;if(o)var i=Math.floor(this.state.containerWidth/t*o-o*(2*this.props.margin)),a=this.props.photos.length-o;for(var u=0;u<this.props.photos.length;u+=t){for(var s=0,c=0,l=u;l<u+t&&l!=this.props.photos.length;l++)this.props.photos[l].aspectRatio=this.props.photos[l].width/this.props.photos[l].height,s+=this.props.photos[l].aspectRatio;c=u===a?i/s:r/s;for(var p=function(t){if(t==e.props.photos.length)return"break";var r=e.props.photos[t].src,o=void 0,i=void 0;e.props.photos[t].srcset&&(o=e.props.photos[t].srcset.join()),e.props.photos[t].sizes&&(i=e.props.photos[t].sizes.join()),h.margin=e.props.margin,n.push(f["default"].createElement("div",{key:t,style:h},f["default"].createElement("a",{href:"#",className:t,onClick:function(n){return e.props.onClickPhoto(t,n)}},f["default"].createElement("img",{src:r,srcSet:o,sizes:i,style:{display:"block",border:0},height:c,width:c*e.props.photos[t].aspectRatio,alt:e.props.photos[t].alt}))))},d=u;d<u+t;d++){var y=p(d);if("break"===y)break}}return this.renderGallery(n)}},{key:"renderGallery",value:function(e){var t=this;return f["default"].createElement("div",{id:"Gallery",className:"clearfix",ref:function(e){return t._gallery=e}},e)}}]),t}(f["default"].Component);d.displayName="Gallery",d.propTypes={photos:function(e,t,n){return p["default"].arrayOf(p["default"].shape({src:p["default"].string.isRequired,width:p["default"].number.isRequired,height:p["default"].number.isRequired,alt:p["default"].string,srcset:p["default"].array,sizes:p["default"].array})).isRequired.apply(this,arguments)},onClickPhoto:p["default"].func,cols:p["default"].number,margin:p["default"].number},d.defaultProps={cols:3,onClickPhoto:function(e,t){t.preventDefault()},margin:2};var h={display:"block",backgroundColor:"#e3e3e3","float":"left"};n["default"]=d,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"prop-types":8}]},{},[10])(10)}); | ||
| !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Gallery=e()}}(function(){return function e(t,n,r){function o(a,u){if(!n[a]){if(!t[a]){var c="function"==typeof require&&require;if(!u&&c)return c(a,!0);if(i)return i(a,!0);var s=new Error("Cannot find module '"+a+"'");throw s.code="MODULE_NOT_FOUND",s}var f=n[a]={exports:{}};t[a][0].call(f.exports,function(e){var n=t[a][1][e];return o(n?n:e)},f,f.exports,e,t,n,r)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a<r.length;a++)o(r[a]);return o}({1:[function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},t.exports=o},{}],2:[function(e,t,n){(function(e){"use strict";function n(e,t,n,o,i,a,u,c){if(r(t),!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var f=[n,o,i,a,u,c],l=0;s=new Error(t.replace(/%s/g,function(){return f[l++]})),s.name="Invariant Violation"}throw s.framesToPop=1,s}}var r=function(e){};"production"!==e.env.NODE_ENV&&(r=function(e){if(void 0===e)throw new Error("invariant requires an error message argument")}),t.exports=n}).call(this,e("_process"))},{_process:4}],3:[function(e,t,n){(function(n){"use strict";var r=e("./emptyFunction"),o=r;if("production"!==n.env.NODE_ENV){var i=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var o=0,i="Warning: "+e.replace(/%s/g,function(){return n[o++]});"undefined"!=typeof console&&console.error(i);try{throw new Error(i)}catch(a){}};o=function(e,t){if(void 0===t)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(0!==t.indexOf("Failed Composite propType: ")&&!e){for(var n=arguments.length,r=Array(n>2?n-2:0),o=2;o<n;o++)r[o-2]=arguments[o];i.apply(void 0,[t].concat(r))}}}t.exports=o}).call(this,e("_process"))},{"./emptyFunction":1,_process:4}],4:[function(e,t,n){function r(){throw new Error("setTimeout has not been defined")}function o(){throw new Error("clearTimeout has not been defined")}function i(e){if(l===setTimeout)return setTimeout(e,0);if((l===r||!l)&&setTimeout)return l=setTimeout,setTimeout(e,0);try{return l(e,0)}catch(t){try{return l.call(null,e,0)}catch(t){return l.call(this,e,0)}}}function a(e){if(p===clearTimeout)return clearTimeout(e);if((p===o||!p)&&clearTimeout)return p=clearTimeout,clearTimeout(e);try{return p(e)}catch(t){try{return p.call(null,e)}catch(t){return p.call(this,e)}}}function u(){v&&y&&(v=!1,y.length?h=y.concat(h):m=-1,h.length&&c())}function c(){if(!v){var e=i(u);v=!0;for(var t=h.length;t;){for(y=h,h=[];++m<t;)y&&y[m].run();m=-1,t=h.length}y=null,v=!1,a(e)}}function s(e,t){this.fun=e,this.array=t}function f(){}var l,p,d=t.exports={};!function(){try{l="function"==typeof setTimeout?setTimeout:r}catch(e){l=r}try{p="function"==typeof clearTimeout?clearTimeout:o}catch(e){p=o}}();var y,h=[],v=!1,m=-1;d.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];h.push(new s(e,t)),1!==h.length||v||i(c)},s.prototype.run=function(){this.fun.apply(null,this.array)},d.title="browser",d.browser=!0,d.env={},d.argv=[],d.version="",d.versions={},d.on=f,d.addListener=f,d.once=f,d.off=f,d.removeListener=f,d.removeAllListeners=f,d.emit=f,d.prependListener=f,d.prependOnceListener=f,d.listeners=function(e){return[]},d.binding=function(e){throw new Error("process.binding is not supported")},d.cwd=function(){return"/"},d.chdir=function(e){throw new Error("process.chdir is not supported")},d.umask=function(){return 0}},{}],5:[function(e,t,n){(function(n){"use strict";function r(e,t,r,c,s){if("production"!==n.env.NODE_ENV)for(var f in e)if(e.hasOwnProperty(f)){var l;try{o("function"==typeof e[f],"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",c||"React class",r,f),l=e[f](t,f,c,r,null,a)}catch(p){l=p}if(i(!l||l instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",c||"React class",r,f,typeof l),l instanceof Error&&!(l.message in u)){u[l.message]=!0;var d=s?s():"";i(!1,"Failed %s type: %s%s",r,l.message,null!=d?d:"")}}}if("production"!==n.env.NODE_ENV)var o=e("fbjs/lib/invariant"),i=e("fbjs/lib/warning"),a=e("./lib/ReactPropTypesSecret"),u={};t.exports=r}).call(this,e("_process"))},{"./lib/ReactPropTypesSecret":9,_process:4,"fbjs/lib/invariant":2,"fbjs/lib/warning":3}],6:[function(e,t,n){"use strict";var r=e("fbjs/lib/emptyFunction"),o=e("fbjs/lib/invariant"),i=e("./lib/ReactPropTypesSecret");t.exports=function(){function e(e,t,n,r,a,u){u!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},{"./lib/ReactPropTypesSecret":9,"fbjs/lib/emptyFunction":1,"fbjs/lib/invariant":2}],7:[function(e,t,n){(function(n){"use strict";var r=e("fbjs/lib/emptyFunction"),o=e("fbjs/lib/invariant"),i=e("fbjs/lib/warning"),a=e("./lib/ReactPropTypesSecret"),u=e("./checkPropTypes");t.exports=function(e,t){function c(e){var t=e&&(x&&e[x]||e[k]);if("function"==typeof t)return t}function s(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function f(e){this.message=e,this.stack=""}function l(e){function r(r,s,l,p,d,y,h){if(p=p||N,y=y||l,h!==a)if(t)o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");else if("production"!==n.env.NODE_ENV&&"undefined"!=typeof console){var v=p+":"+l;!u[v]&&c<3&&(i(!1,"You are manually calling a React.PropTypes validation function for the `%s` prop on `%s`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.",y,p),u[v]=!0,c++)}return null==s[l]?r?new f(null===s[l]?"The "+d+" `"+y+"` is marked as required "+("in `"+p+"`, but its value is `null`."):"The "+d+" `"+y+"` is marked as required in "+("`"+p+"`, but its value is `undefined`.")):null:e(s,l,p,d,y)}if("production"!==n.env.NODE_ENV)var u={},c=0;var s=r.bind(null,!1);return s.isRequired=r.bind(null,!0),s}function p(e){function t(t,n,r,o,i,a){var u=t[n],c=R(u);if(c!==e){var s=j(u);return new f("Invalid "+o+" `"+i+"` of type "+("`"+s+"` supplied to `"+r+"`, expected ")+("`"+e+"`."))}return null}return l(t)}function d(){return l(r.thatReturnsNull)}function y(e){function t(t,n,r,o,i){if("function"!=typeof e)return new f("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var u=t[n];if(!Array.isArray(u)){var c=R(u);return new f("Invalid "+o+" `"+i+"` of type "+("`"+c+"` supplied to `"+r+"`, expected an array."))}for(var s=0;s<u.length;s++){var l=e(u,s,r,o,i+"["+s+"]",a);if(l instanceof Error)return l}return null}return l(t)}function h(){function t(t,n,r,o,i){var a=t[n];if(!e(a)){var u=R(a);return new f("Invalid "+o+" `"+i+"` of type "+("`"+u+"` supplied to `"+r+"`, expected a single ReactElement."))}return null}return l(t)}function v(e){function t(t,n,r,o,i){if(!(t[n]instanceof e)){var a=e.name||N,u=_(t[n]);return new f("Invalid "+o+" `"+i+"` of type "+("`"+u+"` supplied to `"+r+"`, expected ")+("instance of `"+a+"`."))}return null}return l(t)}function m(e){function t(t,n,r,o,i){for(var a=t[n],u=0;u<e.length;u++)if(s(a,e[u]))return null;var c=JSON.stringify(e);return new f("Invalid "+o+" `"+i+"` of value `"+a+"` "+("supplied to `"+r+"`, expected one of "+c+"."))}return Array.isArray(e)?l(t):("production"!==n.env.NODE_ENV?i(!1,"Invalid argument supplied to oneOf, expected an instance of array."):void 0,r.thatReturnsNull)}function b(e){function t(t,n,r,o,i){if("function"!=typeof e)return new f("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside objectOf.");var u=t[n],c=R(u);if("object"!==c)return new f("Invalid "+o+" `"+i+"` of type "+("`"+c+"` supplied to `"+r+"`, expected an object."));for(var s in u)if(u.hasOwnProperty(s)){var l=e(u,s,r,o,i+"."+s,a);if(l instanceof Error)return l}return null}return l(t)}function g(e){function t(t,n,r,o,i){for(var u=0;u<e.length;u++){var c=e[u];if(null==c(t,n,r,o,i,a))return null}return new f("Invalid "+o+" `"+i+"` supplied to "+("`"+r+"`."))}if(!Array.isArray(e))return"production"!==n.env.NODE_ENV?i(!1,"Invalid argument supplied to oneOfType, expected an instance of array."):void 0,r.thatReturnsNull;for(var o=0;o<e.length;o++){var u=e[o];if("function"!=typeof u)return i(!1,"Invalid argument supplid to oneOfType. Expected an array of check functions, but received %s at index %s.",P(u),o),r.thatReturnsNull}return l(t)}function w(){function e(e,t,n,r,o){return O(e[t])?null:new f("Invalid "+r+" `"+o+"` supplied to "+("`"+n+"`, expected a ReactNode."))}return l(e)}function T(e){function t(t,n,r,o,i){var u=t[n],c=R(u);if("object"!==c)return new f("Invalid "+o+" `"+i+"` of type `"+c+"` "+("supplied to `"+r+"`, expected `object`."));for(var s in e){var l=e[s];if(l){var p=l(u,s,r,o,i+"."+s,a);if(p)return p}}return null}return l(t)}function O(t){switch(typeof t){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(O);if(null===t||e(t))return!0;var n=c(t);if(!n)return!1;var r,o=n.call(t);if(n!==t.entries){for(;!(r=o.next()).done;)if(!O(r.value))return!1}else for(;!(r=o.next()).done;){var i=r.value;if(i&&!O(i[1]))return!1}return!0;default:return!1}}function E(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function R(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":E(t,e)?"symbol":t}function j(e){if("undefined"==typeof e||null===e)return""+e;var t=R(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function P(e){var t=j(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}function _(e){return e.constructor&&e.constructor.name?e.constructor.name:N}var x="function"==typeof Symbol&&Symbol.iterator,k="@@iterator",N="<<anonymous>>",S={array:p("array"),bool:p("boolean"),func:p("function"),number:p("number"),object:p("object"),string:p("string"),symbol:p("symbol"),any:d(),arrayOf:y,element:h(),instanceOf:v,node:w(),objectOf:b,oneOf:m,oneOfType:g,shape:T};return f.prototype=Error.prototype,S.checkPropTypes=u,S.PropTypes=S,S}}).call(this,e("_process"))},{"./checkPropTypes":5,"./lib/ReactPropTypesSecret":9,_process:4,"fbjs/lib/emptyFunction":1,"fbjs/lib/invariant":2,"fbjs/lib/warning":3}],8:[function(e,t,n){(function(n){if("production"!==n.env.NODE_ENV){var r="function"==typeof Symbol&&Symbol["for"]&&Symbol["for"]("react.element")||60103,o=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},i=!0;t.exports=e("./factoryWithTypeCheckers")(o,i)}else t.exports=e("./factoryWithThrowingShims")()}).call(this,e("_process"))},{"./factoryWithThrowingShims":6,"./factoryWithTypeCheckers":7,_process:4}],9:[function(e,t,n){"use strict";var r="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";t.exports=r},{}],10:[function(e,t,n){(function(r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0});var c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),f=function(e,t,n){for(var r=!0;r;){var o=e,i=t,a=n;r=!1,null===o&&(o=Function.prototype);var u=Object.getOwnPropertyDescriptor(o,i);if(void 0!==u){if("value"in u)return u.value;var c=u.get;if(void 0===c)return;return c.call(a)}var s=Object.getPrototypeOf(o);if(null===s)return;e=s,t=i,n=a,r=!0,u=s=void 0}},l="undefined"!=typeof window?window.React:"undefined"!=typeof r?r.React:null,p=o(l),d=e("prop-types"),y=o(d),h=function(e){function t(){a(this,t),f(Object.getPrototypeOf(t.prototype),"constructor",this).call(this),this.state={containerWidth:0},this.handleResize=this.handleResize.bind(this)}return u(t,e),s(t,[{key:"componentDidMount",value:function(){this.setState({containerWidth:Math.floor(this._gallery.clientWidth)}),window.addEventListener("resize",this.handleResize)}},{key:"componentDidUpdate",value:function(){this._gallery.clientWidth!==this.state.containerWidth&&this.setState({containerWidth:Math.floor(this._gallery.clientWidth)})}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.handleResize,!1)}},{key:"handleResize",value:function(e){this.setState({containerWidth:Math.floor(this._gallery.clientWidth)})}},{key:"aspectRatio",value:function(e){var t=e.width,n=e.height;return t/n}},{key:"scalePhotoDimensions",value:function(){var e=this,t=this.props,n=t.cols,r=t.margin,o=t.photos,a=this.state.containerWidth-1,u=o.reduce(function(e,t,r){var o=Math.floor(r/n);return e[o]=e[o]?[].concat(i(e[o]),[t]):[t],e},[]);return u=u.map(function(t){var o=t.reduce(function(t,n,r){return t+e.aspectRatio(n)},0),i=t.length<n?Math.floor(a/n*t.length-t.length*(2*r)):Math.floor(a-t.length*(2*r)),u=i/o;return t.map(function(t){return c({},t,{width:u*e.aspectRatio(t),height:u})})}),u.reduce(function(e,t){return[].concat(i(e),i(t))},[])}},{key:"render",value:function(){var e=this,t=this.scalePhotoDimensions();return v.margin=this.props.margin,p["default"].createElement("div",{id:"Gallery",className:"clearfix",ref:function(t){return e._gallery=t}},t.map(function(t,n){return p["default"].createElement("div",{style:v,key:n},p["default"].createElement("a",{href:"#",onClick:function(t){return e.props.onClickPhoto(n,t)}},p["default"].createElement("img",{src:t.src,srcSet:t.srcset.join(),sizes:t.sizes.join(),style:{display:"block",border:0},height:t.height,width:t.width,alt:t.alt})))}))}}]),t}(p["default"].Component);h.displayName="Gallery",h.propTypes={photos:function(e,t,n){return y["default"].arrayOf(y["default"].shape({src:y["default"].string.isRequired,width:y["default"].number.isRequired,height:y["default"].number.isRequired,alt:y["default"].string,srcset:y["default"].array,sizes:y["default"].array})).isRequired.apply(this,arguments)},onClickPhoto:y["default"].func,cols:y["default"].number,margin:y["default"].number},h.defaultProps={cols:3,onClickPhoto:function(e,t){t.preventDefault()},margin:2};var v={display:"block",backgroundColor:"#e3e3e3","float":"left"};n["default"]=h,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"prop-types":8}]},{},[10])(10)}); |
@@ -124,41 +124,39 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Gallery = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| (function () { | ||
| var printWarning = function printWarning(format) { | ||
| for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
| args[_key - 1] = arguments[_key]; | ||
| } | ||
| var printWarning = function printWarning(format) { | ||
| for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
| args[_key - 1] = arguments[_key]; | ||
| } | ||
| var argIndex = 0; | ||
| var message = 'Warning: ' + format.replace(/%s/g, function () { | ||
| return args[argIndex++]; | ||
| }); | ||
| if (typeof console !== 'undefined') { | ||
| console.error(message); | ||
| } | ||
| try { | ||
| // --- Welcome to debugging React --- | ||
| // This error was thrown as a convenience so that you can use this stack | ||
| // to find the callsite that caused this warning to fire. | ||
| throw new Error(message); | ||
| } catch (x) {} | ||
| }; | ||
| var argIndex = 0; | ||
| var message = 'Warning: ' + format.replace(/%s/g, function () { | ||
| return args[argIndex++]; | ||
| }); | ||
| if (typeof console !== 'undefined') { | ||
| console.error(message); | ||
| } | ||
| try { | ||
| // --- Welcome to debugging React --- | ||
| // This error was thrown as a convenience so that you can use this stack | ||
| // to find the callsite that caused this warning to fire. | ||
| throw new Error(message); | ||
| } catch (x) {} | ||
| }; | ||
| warning = function warning(condition, format) { | ||
| if (format === undefined) { | ||
| throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument'); | ||
| } | ||
| warning = function warning(condition, format) { | ||
| if (format === undefined) { | ||
| throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument'); | ||
| } | ||
| if (format.indexOf('Failed Composite propType: ') === 0) { | ||
| return; // Ignore CompositeComponent proptype check. | ||
| if (format.indexOf('Failed Composite propType: ') === 0) { | ||
| return; // Ignore CompositeComponent proptype check. | ||
| } | ||
| if (!condition) { | ||
| for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) { | ||
| args[_key2 - 2] = arguments[_key2]; | ||
| } | ||
| if (!condition) { | ||
| for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) { | ||
| args[_key2 - 2] = arguments[_key2]; | ||
| } | ||
| printWarning.apply(undefined, [format].concat(args)); | ||
| } | ||
| }; | ||
| })(); | ||
| printWarning.apply(undefined, [format].concat(args)); | ||
| } | ||
| }; | ||
| } | ||
@@ -339,3 +337,7 @@ | ||
| process.emit = noop; | ||
| process.prependListener = noop; | ||
| process.prependOnceListener = noop; | ||
| process.listeners = function (name) { return [] } | ||
| process.binding = function (name) { | ||
@@ -1048,5 +1050,7 @@ throw new Error('process.binding is not supported'); | ||
| Object.defineProperty(exports, '__esModule', { | ||
| value: true | ||
| value: true | ||
| }); | ||
| var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
| var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); | ||
@@ -1058,2 +1062,4 @@ | ||
| function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } | ||
@@ -1072,127 +1078,116 @@ | ||
| var Gallery = (function (_React$Component) { | ||
| _inherits(Gallery, _React$Component); | ||
| _inherits(Gallery, _React$Component); | ||
| function Gallery() { | ||
| _classCallCheck(this, Gallery); | ||
| function Gallery() { | ||
| _classCallCheck(this, Gallery); | ||
| _get(Object.getPrototypeOf(Gallery.prototype), 'constructor', this).call(this); | ||
| this.state = { | ||
| containerWidth: 0 | ||
| }; | ||
| this.handleResize = this.handleResize.bind(this); | ||
| } | ||
| _get(Object.getPrototypeOf(Gallery.prototype), 'constructor', this).call(this); | ||
| this.state = { | ||
| containerWidth: 0 | ||
| }; | ||
| this.handleResize = this.handleResize.bind(this); | ||
| } | ||
| _createClass(Gallery, [{ | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
| this.setState({ containerWidth: Math.floor(this._gallery.clientWidth) }); | ||
| window.addEventListener('resize', this.handleResize); | ||
| } | ||
| }, { | ||
| key: 'componentDidUpdate', | ||
| value: function componentDidUpdate() { | ||
| if (this._gallery.clientWidth !== this.state.containerWidth) { | ||
| this.setState({ containerWidth: Math.floor(this._gallery.clientWidth) }); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
| window.removeEventListener('resize', this.handleResize, false); | ||
| } | ||
| }, { | ||
| key: 'handleResize', | ||
| value: function handleResize(e) { | ||
| this.setState({ containerWidth: Math.floor(this._gallery.clientWidth) }); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _this = this; | ||
| _createClass(Gallery, [{ | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
| this.setState({ containerWidth: Math.floor(this._gallery.clientWidth) }); | ||
| window.addEventListener('resize', this.handleResize); | ||
| } | ||
| }, { | ||
| key: 'componentDidUpdate', | ||
| value: function componentDidUpdate() { | ||
| if (this._gallery.clientWidth !== this.state.containerWidth) { | ||
| this.setState({ containerWidth: Math.floor(this._gallery.clientWidth) }); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
| window.removeEventListener('resize', this.handleResize, false); | ||
| } | ||
| }, { | ||
| key: 'handleResize', | ||
| value: function handleResize(e) { | ||
| this.setState({ containerWidth: Math.floor(this._gallery.clientWidth) }); | ||
| } | ||
| }, { | ||
| key: 'aspectRatio', | ||
| value: function aspectRatio(_ref) { | ||
| var width = _ref.width; | ||
| var height = _ref.height; | ||
| var cols = this.props.cols, | ||
| photoPreviewNodes = [], | ||
| contWidth = this.state.containerWidth - cols * (this.props.margin * 2); | ||
| return width / height; | ||
| } | ||
| }, { | ||
| key: 'scalePhotoDimensions', | ||
| value: function scalePhotoDimensions() { | ||
| var _this = this; | ||
| contWidth = Math.floor(contWidth); // add some padding to prevent layout prob | ||
| var remainder = this.props.photos.length % cols; | ||
| if (remainder) { | ||
| // there are fewer photos than cols num in last row | ||
| var lastRowWidth = Math.floor(this.state.containerWidth / cols * remainder - remainder * (this.props.margin * 2)); | ||
| var lastRowIndex = this.props.photos.length - remainder; | ||
| } | ||
| // loop thru each set of cols num | ||
| // eg. if cols is 3 it will loop thru 0,1,2, then 3,4,5 to perform calculations for the particular set | ||
| for (var i = 0; i < this.props.photos.length; i += cols) { | ||
| var totalAr = 0, | ||
| commonHeight = 0; | ||
| var _props = this.props; | ||
| var cols = _props.cols; | ||
| var margin = _props.margin; | ||
| var photos = _props.photos; | ||
| // get the total aspect ratio of the row | ||
| for (var j = i; j < i + cols; j++) { | ||
| if (j == this.props.photos.length) { | ||
| break; | ||
| } | ||
| this.props.photos[j].aspectRatio = this.props.photos[j].width / this.props.photos[j].height; | ||
| totalAr += this.props.photos[j].aspectRatio; | ||
| } | ||
| if (i === lastRowIndex) { | ||
| commonHeight = lastRowWidth / totalAr; | ||
| } else { | ||
| commonHeight = contWidth / totalAr; | ||
| } | ||
| // run thru the same set of items again to give the width and common height | ||
| // subtract 1 pixel because the browser may round up a pixel | ||
| var containerWidth = this.state.containerWidth - 1; | ||
| var _loop = function (k) { | ||
| if (k == _this.props.photos.length) { | ||
| return 'break'; | ||
| } | ||
| // divide photos in rows based on cols per row [[1,2,3],[4,5,6],[7,8]]] | ||
| var rows = photos.reduce(function (acc, item, idx) { | ||
| var rowNum = Math.floor(idx / cols); | ||
| acc[rowNum] = acc[rowNum] ? [].concat(_toConsumableArray(acc[rowNum]), [item]) : [item]; | ||
| return acc; | ||
| }, []); | ||
| var src = _this.props.photos[k].src, | ||
| srcset = undefined, | ||
| sizes = undefined; | ||
| if (_this.props.photos[k].srcset) { | ||
| srcset = _this.props.photos[k].srcset.join(); | ||
| } | ||
| if (_this.props.photos[k].sizes) { | ||
| sizes = _this.props.photos[k].sizes.join(); | ||
| } | ||
| // scale the image dimensions | ||
| rows = rows.map(function (row) { | ||
| var totalAspectRatio = row.reduce(function (acc, photo, idx) { | ||
| return acc + _this.aspectRatio(photo); | ||
| }, 0); | ||
| // calculate the width differently if its the last row and there are fewer photos left than col num | ||
| var rowWidth = row.length < cols ? Math.floor(containerWidth / cols * row.length - row.length * (margin * 2)) : Math.floor(containerWidth - row.length * (margin * 2)); | ||
| var rowHeight = rowWidth / totalAspectRatio; | ||
| return row.map(function (photo) { | ||
| return _extends({}, photo, { | ||
| width: rowHeight * _this.aspectRatio(photo), | ||
| height: rowHeight | ||
| }); | ||
| }); | ||
| }); | ||
| style.margin = _this.props.margin; | ||
| photoPreviewNodes.push(_react2['default'].createElement( | ||
| 'div', | ||
| { key: k, style: style }, | ||
| _react2['default'].createElement( | ||
| 'a', | ||
| { href: '#', className: k, onClick: function (e) { | ||
| return _this.props.onClickPhoto(k, e); | ||
| } }, | ||
| _react2['default'].createElement('img', { src: src, srcSet: srcset, sizes: sizes, style: { display: 'block', border: 0 }, height: commonHeight, width: commonHeight * _this.props.photos[k].aspectRatio, alt: _this.props.photos[k].alt }) | ||
| ) | ||
| )); | ||
| }; | ||
| // flatten back the photos array | ||
| return rows.reduce(function (acc, row) { | ||
| return [].concat(_toConsumableArray(acc), _toConsumableArray(row)); | ||
| }, []); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _this2 = this; | ||
| for (var k = i; k < i + cols; k++) { | ||
| var _ret = _loop(k); | ||
| var resizedPhotos = this.scalePhotoDimensions(); | ||
| style.margin = this.props.margin; | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| { id: 'Gallery', className: 'clearfix', ref: function (c) { | ||
| return _this2._gallery = c; | ||
| } }, | ||
| resizedPhotos.map(function (photo, idx) { | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| { style: style, key: idx }, | ||
| _react2['default'].createElement( | ||
| 'a', | ||
| { href: '#', onClick: function (e) { | ||
| return _this2.props.onClickPhoto(idx, e); | ||
| } }, | ||
| _react2['default'].createElement('img', { src: photo.src, srcSet: photo.srcset.join(), sizes: photo.sizes.join(), style: { display: 'block', border: 0 }, height: photo.height, width: photo.width, alt: photo.alt }) | ||
| ) | ||
| ); | ||
| }) | ||
| ); | ||
| } | ||
| }]); | ||
| if (_ret === 'break') break; | ||
| } | ||
| } | ||
| return this.renderGallery(photoPreviewNodes); | ||
| } | ||
| }, { | ||
| key: 'renderGallery', | ||
| value: function renderGallery(photoPreviewNodes) { | ||
| var _this2 = this; | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| { id: 'Gallery', className: 'clearfix', ref: function (c) { | ||
| return _this2._gallery = c; | ||
| } }, | ||
| photoPreviewNodes | ||
| ); | ||
| } | ||
| }]); | ||
| return Gallery; | ||
| return Gallery; | ||
| })(_react2['default'].Component); | ||
@@ -1203,28 +1198,28 @@ | ||
| Gallery.propTypes = { | ||
| photos: function photos(props, propName, componentName) { | ||
| return _propTypes2['default'].arrayOf(_propTypes2['default'].shape({ | ||
| src: _propTypes2['default'].string.isRequired, | ||
| width: _propTypes2['default'].number.isRequired, | ||
| height: _propTypes2['default'].number.isRequired, | ||
| alt: _propTypes2['default'].string, | ||
| srcset: _propTypes2['default'].array, | ||
| sizes: _propTypes2['default'].array | ||
| })).isRequired.apply(this, arguments); | ||
| }, | ||
| onClickPhoto: _propTypes2['default'].func, | ||
| cols: _propTypes2['default'].number, | ||
| margin: _propTypes2['default'].number | ||
| photos: function photos(props, propName, componentName) { | ||
| return _propTypes2['default'].arrayOf(_propTypes2['default'].shape({ | ||
| src: _propTypes2['default'].string.isRequired, | ||
| width: _propTypes2['default'].number.isRequired, | ||
| height: _propTypes2['default'].number.isRequired, | ||
| alt: _propTypes2['default'].string, | ||
| srcset: _propTypes2['default'].array, | ||
| sizes: _propTypes2['default'].array | ||
| })).isRequired.apply(this, arguments); | ||
| }, | ||
| onClickPhoto: _propTypes2['default'].func, | ||
| cols: _propTypes2['default'].number, | ||
| margin: _propTypes2['default'].number | ||
| }; | ||
| Gallery.defaultProps = { | ||
| cols: 3, | ||
| onClickPhoto: function onClickPhoto(k, e) { | ||
| e.preventDefault(); | ||
| }, | ||
| margin: 2 | ||
| cols: 3, | ||
| onClickPhoto: function onClickPhoto(k, e) { | ||
| e.preventDefault(); | ||
| }, | ||
| margin: 2 | ||
| }; | ||
| // Gallery image style | ||
| var style = { | ||
| display: 'block', | ||
| backgroundColor: '#e3e3e3', | ||
| float: 'left' | ||
| display: 'block', | ||
| backgroundColor: '#e3e3e3', | ||
| float: 'left' | ||
| }; | ||
@@ -1231,0 +1226,0 @@ |
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import Gallery from 'react-photo-gallery'; | ||
| import $ from 'jquery'; | ||
| import _ from 'lodash'; | ||
| import Measure from 'react-measure'; | ||
| import Lightbox from 'react-images'; | ||
| import jsonp from 'jsonp'; | ||
| function debounce(func, wait, immediate) { | ||
| let timeout; | ||
| return function() { | ||
| const context = this, args = arguments; | ||
| let later = function() { | ||
| timeout = null; | ||
| if (!immediate) func.apply(context, args); | ||
| }; | ||
| const callNow = immediate && !timeout; | ||
| clearTimeout(timeout); | ||
| timeout = setTimeout(later, wait); | ||
| if (callNow) func.apply(context, args); | ||
| }; | ||
| }; | ||
| class App extends React.Component{ | ||
| constructor(){ | ||
| super(); | ||
| this.state = {photos:null, pageNum:1, totalPages:1, loadedAll: false, currentImage:0}; | ||
| this.handleScroll = this.handleScroll.bind(this); | ||
| this.loadMorePhotos = this.loadMorePhotos.bind(this); | ||
| this.closeLightbox = this.closeLightbox.bind(this); | ||
| this.openLightbox = this.openLightbox.bind(this); | ||
| this.gotoNext = this.gotoNext.bind(this); | ||
| this.gotoPrevious = this.gotoPrevious.bind(this); | ||
| } | ||
| componentDidMount() { | ||
| this.loadMorePhotos(); | ||
| this.loadMorePhotos = _.debounce(this.loadMorePhotos, 200); | ||
| window.addEventListener('scroll', this.handleScroll); | ||
| } | ||
| handleScroll(){ | ||
| let scrollY = window.scrollY || window.pageYOffset || document.documentElement.scrollTop; | ||
| if ((window.innerHeight + scrollY) >= (document.body.offsetHeight - 50)) { | ||
| this.loadMorePhotos(); | ||
| constructor(){ | ||
| super(); | ||
| this.state = {photos:null, pageNum:1, totalPages:1, loadedAll: false, currentImage:0}; | ||
| this.handleScroll = this.handleScroll.bind(this); | ||
| this.loadMorePhotos = this.loadMorePhotos.bind(this); | ||
| this.closeLightbox = this.closeLightbox.bind(this); | ||
| this.openLightbox = this.openLightbox.bind(this); | ||
| this.gotoNext = this.gotoNext.bind(this); | ||
| this.gotoPrevious = this.gotoPrevious.bind(this); | ||
| } | ||
| } | ||
| loadMorePhotos(e){ | ||
| if (e){ | ||
| e.preventDefault(); | ||
| } | ||
| if (this.state.pageNum > this.state.totalPages){ | ||
| this.setState({loadedAll: true}); | ||
| return; | ||
| componentDidMount() { | ||
| this.loadMorePhotos(); | ||
| this.loadMorePhotos = debounce(this.loadMorePhotos, 200); | ||
| window.addEventListener('scroll', this.handleScroll); | ||
| } | ||
| $.ajax({ | ||
| url: 'https://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=372ef3a005d9b9df062b8240c326254d&photoset_id=72157680705961676&user_id=57933175@N08&format=json&per_page=21&page='+this.state.pageNum+'&extras=url_m,url_c,url_l,url_h,url_o', | ||
| dataType: 'jsonp', | ||
| jsonpCallback: 'jsonFlickrApi', | ||
| cache: false, | ||
| success: function(data) { | ||
| let photos = []; | ||
| data.photoset.photo.forEach(function(obj,i,array){ | ||
| let aspectRatio = parseFloat(obj.width_o / obj.height_o); | ||
| photos.push({ | ||
| src: (aspectRatio >= 3) ? obj.url_c : obj.url_m, | ||
| width: parseInt(obj.width_o), | ||
| height: parseInt(obj.height_o), | ||
| caption: obj.title, | ||
| alt: obj.title, | ||
| srcset:[ | ||
| obj.url_m+' '+obj.width_m+'w', | ||
| obj.url_c+' '+obj.width_c+'w', | ||
| obj.url_l+' '+obj.width_l+'w', | ||
| obj.url_h+' '+obj.width_h+'w' | ||
| ], | ||
| sizes:[ | ||
| '(min-width: 480px) 50vw', | ||
| '(min-width: 1024px) 33.3vw', | ||
| '100vw' | ||
| ] | ||
| handleScroll(){ | ||
| let scrollY = window.scrollY || window.pageYOffset || document.documentElement.scrollTop; | ||
| if ((window.innerHeight + scrollY) >= (document.body.offsetHeight - 50)) { | ||
| this.loadMorePhotos(); | ||
| } | ||
| } | ||
| loadMorePhotos(e){ | ||
| if (e){ | ||
| e.preventDefault(); | ||
| } | ||
| if (this.state.pageNum > this.state.totalPages){ | ||
| this.setState({loadedAll: true}); | ||
| return; | ||
| } | ||
| const urlParams = { | ||
| api_key: '372ef3a005d9b9df062b8240c326254d', | ||
| photoset_id: '72157680705961676', | ||
| user_id: '57933175@N08', | ||
| format: 'json', | ||
| per_page: '21', | ||
| page: this.state.pageNum, | ||
| extras: 'url_m,url_c,url_l,url_h,url_o' | ||
| }; | ||
| let url = 'https://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos'; | ||
| url = Object.keys(urlParams).reduce((acc,item,) => { | ||
| return acc+'&'+item+'='+urlParams[item]; | ||
| },url); | ||
| jsonp(url,{name: 'jsonFlickrApi'},(err,data) => { | ||
| let photos = data.photoset.photo.map((item) => { | ||
| let aspectRatio = parseFloat(item.width_o / item.height_o); | ||
| return { | ||
| src: (aspectRatio >= 3) ? item.url_c : item.url_m, | ||
| width: parseInt(item.width_o), | ||
| height: parseInt(item.height_o), | ||
| caption: item.title, | ||
| alt: item.title, | ||
| srcset:[ | ||
| `${item.url_m} ${item.width_m}w`, | ||
| `${item.url_c} ${item.width_c}w`, | ||
| `${item.url_l} ${item.width_l}w`, | ||
| `${item.url_h} ${item.width_h}w`, | ||
| ], | ||
| sizes:[ | ||
| '(min-width: 480px) 50vw', | ||
| '(min-width: 1024px) 33.3vw', | ||
| '100vw' | ||
| ] | ||
| }; | ||
| }); | ||
| this.setState({ | ||
| photos: this.state.photos ? this.state.photos.concat(photos) : photos, | ||
| pageNum: this.state.pageNum + 1, | ||
| totalPages: data.photoset.pages | ||
| }); | ||
| }); | ||
| }) | ||
| this.setState({ | ||
| photos: this.state.photos ? this.state.photos.concat(photos) : photos, | ||
| pageNum: this.state.pageNum + 1, | ||
| totalPages: data.photoset.pages | ||
| }); | ||
| }.bind(this), | ||
| error: function(xhr, status, err) { | ||
| console.error(status, err.toString()); | ||
| }.bind(this) | ||
| }); | ||
| } | ||
| openLightbox(index, event){ | ||
| event.preventDefault(); | ||
| this.setState({ | ||
| currentImage: index, | ||
| lightboxIsOpen: true | ||
| }); | ||
| } | ||
| closeLightbox(){ | ||
| this.setState({ | ||
| currentImage: 0, | ||
| lightboxIsOpen: false, | ||
| }); | ||
| } | ||
| gotoPrevious(){ | ||
| this.setState({ | ||
| currentImage: this.state.currentImage - 1, | ||
| }); | ||
| } | ||
| gotoNext(){ | ||
| if(this.state.photos.length - 2 === this.state.currentImage){ | ||
| this.loadMorePhotos(); | ||
| } | ||
| this.setState({ | ||
| currentImage: this.state.currentImage + 1, | ||
| }); | ||
| } | ||
| renderGallery(){ | ||
| return( | ||
| <Measure whitelist={['width']}> | ||
| { | ||
| ({ width }) => { | ||
| var cols = 1; | ||
| if (width >= 480){ | ||
| cols = 2; | ||
| } | ||
| if (width >= 1024){ | ||
| cols = 3; | ||
| } | ||
| return <Gallery photos={this.state.photos} cols={cols} onClickPhoto={this.openLightbox} /> | ||
| } | ||
| openLightbox(index, event){ | ||
| event.preventDefault(); | ||
| this.setState({ | ||
| currentImage: index, | ||
| lightboxIsOpen: true | ||
| }); | ||
| } | ||
| closeLightbox(){ | ||
| this.setState({ | ||
| currentImage: 0, | ||
| lightboxIsOpen: false, | ||
| }); | ||
| } | ||
| gotoPrevious(){ | ||
| this.setState({ | ||
| currentImage: this.state.currentImage - 1, | ||
| }); | ||
| } | ||
| gotoNext(){ | ||
| if(this.state.photos.length - 2 === this.state.currentImage){ | ||
| this.loadMorePhotos(); | ||
| } | ||
| } | ||
| </Measure> | ||
| ); | ||
| } | ||
| render(){ | ||
| // no loading sign if its all loaded | ||
| if (this.state.photos){ | ||
| return( | ||
| <div className="App"> | ||
| {this.renderGallery()} | ||
| <Lightbox | ||
| theme={{container: { background: 'rgba(0, 0, 0, 0.85)' }}} | ||
| images={this.state.photos} | ||
| backdropClosesModal={true} | ||
| onClose={this.closeLightbox} | ||
| onClickPrev={this.gotoPrevious} | ||
| onClickNext={this.gotoNext} | ||
| currentImage={this.state.currentImage} | ||
| isOpen={this.state.lightboxIsOpen} | ||
| width={1600} | ||
| /> | ||
| {!this.state.loadedAll && <div className="loading-msg" id="msg-loading-more">Loading</div>} | ||
| </div> | ||
| ); | ||
| } | ||
| else{ | ||
| return( | ||
| <div className="App"> | ||
| <div id="msg-app-loading" className="loading-msg">Loading</div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| this.setState({ | ||
| currentImage: this.state.currentImage + 1, | ||
| }); | ||
| } | ||
| renderGallery(){ | ||
| return( | ||
| <Measure whitelist={['width']}> | ||
| { | ||
| ({ width }) => { | ||
| let cols = 1; | ||
| if (width >= 480){ | ||
| cols = 2; | ||
| } | ||
| if (width >= 1024){ | ||
| cols = 3; | ||
| } | ||
| if (width >= 1824){ | ||
| cols = 4; | ||
| } | ||
| return <Gallery photos={this.state.photos} cols={cols} onClickPhoto={this.openLightbox} /> | ||
| } | ||
| } | ||
| </Measure> | ||
| ); | ||
| } | ||
| render(){ | ||
| if (this.state.photos){ | ||
| return( | ||
| <div className="App"> | ||
| {this.renderGallery()} | ||
| <Lightbox | ||
| theme={{container: { background: 'rgba(0, 0, 0, 0.85)' }}} | ||
| images={this.state.photos} | ||
| backdropClosesModal={true} | ||
| onClose={this.closeLightbox} | ||
| onClickPrev={this.gotoPrevious} | ||
| onClickNext={this.gotoNext} | ||
| currentImage={this.state.currentImage} | ||
| isOpen={this.state.lightboxIsOpen} | ||
| width={1600} | ||
| /> | ||
| {!this.state.loadedAll && <div className="loading-msg" id="msg-loading-more">Loading</div>} | ||
| </div> | ||
| ); | ||
| } | ||
| else{ | ||
| return( | ||
| <div className="App"> | ||
| <div id="msg-app-loading" className="loading-msg">Loading</div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| }; | ||
| ReactDOM.render(<App />, document.getElementById('app')); |
| 'use strict'; | ||
| Object.defineProperty(exports, '__esModule', { | ||
| value: true | ||
| value: true | ||
| }); | ||
| var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
| var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); | ||
@@ -13,2 +15,4 @@ | ||
| function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } | ||
@@ -27,127 +31,116 @@ | ||
| var Gallery = (function (_React$Component) { | ||
| _inherits(Gallery, _React$Component); | ||
| _inherits(Gallery, _React$Component); | ||
| function Gallery() { | ||
| _classCallCheck(this, Gallery); | ||
| function Gallery() { | ||
| _classCallCheck(this, Gallery); | ||
| _get(Object.getPrototypeOf(Gallery.prototype), 'constructor', this).call(this); | ||
| this.state = { | ||
| containerWidth: 0 | ||
| }; | ||
| this.handleResize = this.handleResize.bind(this); | ||
| } | ||
| _get(Object.getPrototypeOf(Gallery.prototype), 'constructor', this).call(this); | ||
| this.state = { | ||
| containerWidth: 0 | ||
| }; | ||
| this.handleResize = this.handleResize.bind(this); | ||
| } | ||
| _createClass(Gallery, [{ | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
| this.setState({ containerWidth: Math.floor(this._gallery.clientWidth) }); | ||
| window.addEventListener('resize', this.handleResize); | ||
| } | ||
| }, { | ||
| key: 'componentDidUpdate', | ||
| value: function componentDidUpdate() { | ||
| if (this._gallery.clientWidth !== this.state.containerWidth) { | ||
| this.setState({ containerWidth: Math.floor(this._gallery.clientWidth) }); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
| window.removeEventListener('resize', this.handleResize, false); | ||
| } | ||
| }, { | ||
| key: 'handleResize', | ||
| value: function handleResize(e) { | ||
| this.setState({ containerWidth: Math.floor(this._gallery.clientWidth) }); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _this = this; | ||
| _createClass(Gallery, [{ | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
| this.setState({ containerWidth: Math.floor(this._gallery.clientWidth) }); | ||
| window.addEventListener('resize', this.handleResize); | ||
| } | ||
| }, { | ||
| key: 'componentDidUpdate', | ||
| value: function componentDidUpdate() { | ||
| if (this._gallery.clientWidth !== this.state.containerWidth) { | ||
| this.setState({ containerWidth: Math.floor(this._gallery.clientWidth) }); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'componentWillUnmount', | ||
| value: function componentWillUnmount() { | ||
| window.removeEventListener('resize', this.handleResize, false); | ||
| } | ||
| }, { | ||
| key: 'handleResize', | ||
| value: function handleResize(e) { | ||
| this.setState({ containerWidth: Math.floor(this._gallery.clientWidth) }); | ||
| } | ||
| }, { | ||
| key: 'aspectRatio', | ||
| value: function aspectRatio(_ref) { | ||
| var width = _ref.width; | ||
| var height = _ref.height; | ||
| var cols = this.props.cols, | ||
| photoPreviewNodes = [], | ||
| contWidth = this.state.containerWidth - cols * (this.props.margin * 2); | ||
| return width / height; | ||
| } | ||
| }, { | ||
| key: 'scalePhotoDimensions', | ||
| value: function scalePhotoDimensions() { | ||
| var _this = this; | ||
| contWidth = Math.floor(contWidth); // add some padding to prevent layout prob | ||
| var remainder = this.props.photos.length % cols; | ||
| if (remainder) { | ||
| // there are fewer photos than cols num in last row | ||
| var lastRowWidth = Math.floor(this.state.containerWidth / cols * remainder - remainder * (this.props.margin * 2)); | ||
| var lastRowIndex = this.props.photos.length - remainder; | ||
| } | ||
| // loop thru each set of cols num | ||
| // eg. if cols is 3 it will loop thru 0,1,2, then 3,4,5 to perform calculations for the particular set | ||
| for (var i = 0; i < this.props.photos.length; i += cols) { | ||
| var totalAr = 0, | ||
| commonHeight = 0; | ||
| var _props = this.props; | ||
| var cols = _props.cols; | ||
| var margin = _props.margin; | ||
| var photos = _props.photos; | ||
| // get the total aspect ratio of the row | ||
| for (var j = i; j < i + cols; j++) { | ||
| if (j == this.props.photos.length) { | ||
| break; | ||
| } | ||
| this.props.photos[j].aspectRatio = this.props.photos[j].width / this.props.photos[j].height; | ||
| totalAr += this.props.photos[j].aspectRatio; | ||
| } | ||
| if (i === lastRowIndex) { | ||
| commonHeight = lastRowWidth / totalAr; | ||
| } else { | ||
| commonHeight = contWidth / totalAr; | ||
| } | ||
| // run thru the same set of items again to give the width and common height | ||
| // subtract 1 pixel because the browser may round up a pixel | ||
| var containerWidth = this.state.containerWidth - 1; | ||
| var _loop = function (k) { | ||
| if (k == _this.props.photos.length) { | ||
| return 'break'; | ||
| } | ||
| // divide photos in rows based on cols per row [[1,2,3],[4,5,6],[7,8]]] | ||
| var rows = photos.reduce(function (acc, item, idx) { | ||
| var rowNum = Math.floor(idx / cols); | ||
| acc[rowNum] = acc[rowNum] ? [].concat(_toConsumableArray(acc[rowNum]), [item]) : [item]; | ||
| return acc; | ||
| }, []); | ||
| var src = _this.props.photos[k].src, | ||
| srcset = undefined, | ||
| sizes = undefined; | ||
| if (_this.props.photos[k].srcset) { | ||
| srcset = _this.props.photos[k].srcset.join(); | ||
| } | ||
| if (_this.props.photos[k].sizes) { | ||
| sizes = _this.props.photos[k].sizes.join(); | ||
| } | ||
| // scale the image dimensions | ||
| rows = rows.map(function (row) { | ||
| var totalAspectRatio = row.reduce(function (acc, photo, idx) { | ||
| return acc + _this.aspectRatio(photo); | ||
| }, 0); | ||
| // calculate the width differently if its the last row and there are fewer photos left than col num | ||
| var rowWidth = row.length < cols ? Math.floor(containerWidth / cols * row.length - row.length * (margin * 2)) : Math.floor(containerWidth - row.length * (margin * 2)); | ||
| var rowHeight = rowWidth / totalAspectRatio; | ||
| return row.map(function (photo) { | ||
| return _extends({}, photo, { | ||
| width: rowHeight * _this.aspectRatio(photo), | ||
| height: rowHeight | ||
| }); | ||
| }); | ||
| }); | ||
| style.margin = _this.props.margin; | ||
| photoPreviewNodes.push(_react2['default'].createElement( | ||
| 'div', | ||
| { key: k, style: style }, | ||
| _react2['default'].createElement( | ||
| 'a', | ||
| { href: '#', className: k, onClick: function (e) { | ||
| return _this.props.onClickPhoto(k, e); | ||
| } }, | ||
| _react2['default'].createElement('img', { src: src, srcSet: srcset, sizes: sizes, style: { display: 'block', border: 0 }, height: commonHeight, width: commonHeight * _this.props.photos[k].aspectRatio, alt: _this.props.photos[k].alt }) | ||
| ) | ||
| )); | ||
| }; | ||
| // flatten back the photos array | ||
| return rows.reduce(function (acc, row) { | ||
| return [].concat(_toConsumableArray(acc), _toConsumableArray(row)); | ||
| }, []); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| value: function render() { | ||
| var _this2 = this; | ||
| for (var k = i; k < i + cols; k++) { | ||
| var _ret = _loop(k); | ||
| var resizedPhotos = this.scalePhotoDimensions(); | ||
| style.margin = this.props.margin; | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| { id: 'Gallery', className: 'clearfix', ref: function (c) { | ||
| return _this2._gallery = c; | ||
| } }, | ||
| resizedPhotos.map(function (photo, idx) { | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| { style: style, key: idx }, | ||
| _react2['default'].createElement( | ||
| 'a', | ||
| { href: '#', onClick: function (e) { | ||
| return _this2.props.onClickPhoto(idx, e); | ||
| } }, | ||
| _react2['default'].createElement('img', { src: photo.src, srcSet: photo.srcset.join(), sizes: photo.sizes.join(), style: { display: 'block', border: 0 }, height: photo.height, width: photo.width, alt: photo.alt }) | ||
| ) | ||
| ); | ||
| }) | ||
| ); | ||
| } | ||
| }]); | ||
| if (_ret === 'break') break; | ||
| } | ||
| } | ||
| return this.renderGallery(photoPreviewNodes); | ||
| } | ||
| }, { | ||
| key: 'renderGallery', | ||
| value: function renderGallery(photoPreviewNodes) { | ||
| var _this2 = this; | ||
| return _react2['default'].createElement( | ||
| 'div', | ||
| { id: 'Gallery', className: 'clearfix', ref: function (c) { | ||
| return _this2._gallery = c; | ||
| } }, | ||
| photoPreviewNodes | ||
| ); | ||
| } | ||
| }]); | ||
| return Gallery; | ||
| return Gallery; | ||
| })(_react2['default'].Component); | ||
@@ -158,28 +151,28 @@ | ||
| Gallery.propTypes = { | ||
| photos: function photos(props, propName, componentName) { | ||
| return _propTypes2['default'].arrayOf(_propTypes2['default'].shape({ | ||
| src: _propTypes2['default'].string.isRequired, | ||
| width: _propTypes2['default'].number.isRequired, | ||
| height: _propTypes2['default'].number.isRequired, | ||
| alt: _propTypes2['default'].string, | ||
| srcset: _propTypes2['default'].array, | ||
| sizes: _propTypes2['default'].array | ||
| })).isRequired.apply(this, arguments); | ||
| }, | ||
| onClickPhoto: _propTypes2['default'].func, | ||
| cols: _propTypes2['default'].number, | ||
| margin: _propTypes2['default'].number | ||
| photos: function photos(props, propName, componentName) { | ||
| return _propTypes2['default'].arrayOf(_propTypes2['default'].shape({ | ||
| src: _propTypes2['default'].string.isRequired, | ||
| width: _propTypes2['default'].number.isRequired, | ||
| height: _propTypes2['default'].number.isRequired, | ||
| alt: _propTypes2['default'].string, | ||
| srcset: _propTypes2['default'].array, | ||
| sizes: _propTypes2['default'].array | ||
| })).isRequired.apply(this, arguments); | ||
| }, | ||
| onClickPhoto: _propTypes2['default'].func, | ||
| cols: _propTypes2['default'].number, | ||
| margin: _propTypes2['default'].number | ||
| }; | ||
| Gallery.defaultProps = { | ||
| cols: 3, | ||
| onClickPhoto: function onClickPhoto(k, e) { | ||
| e.preventDefault(); | ||
| }, | ||
| margin: 2 | ||
| cols: 3, | ||
| onClickPhoto: function onClickPhoto(k, e) { | ||
| e.preventDefault(); | ||
| }, | ||
| margin: 2 | ||
| }; | ||
| // Gallery image style | ||
| var style = { | ||
| display: 'block', | ||
| backgroundColor: '#e3e3e3', | ||
| float: 'left' | ||
| display: 'block', | ||
| backgroundColor: '#e3e3e3', | ||
| float: 'left' | ||
| }; | ||
@@ -186,0 +179,0 @@ |
| { | ||
| "name": "react-photo-gallery", | ||
| "version": "5.6.1", | ||
| "version": "5.6.2", | ||
| "description": "Responsive React Photo Gallery Component", | ||
@@ -25,9 +25,8 @@ "main": "lib/Gallery.js", | ||
| "gulp": "^3.9.0", | ||
| "jquery": "^2.1.4", | ||
| "lodash": "^3.10.1", | ||
| "jsonp": "^0.2.1", | ||
| "react": "~15.5.0", | ||
| "react-component-gulp-tasks": "^0.7.7", | ||
| "react-dom": "~15.5.0", | ||
| "react-component-gulp-tasks": "^0.7.7", | ||
| "react-measure": "~1.4.7", | ||
| "react-images": "~0.5.2" | ||
| "react-images": "~0.5.2", | ||
| "react-measure": "^1.4.7" | ||
| }, | ||
@@ -34,0 +33,0 @@ "peerDependencies": { |
@@ -101,9 +101,3 @@ # React Responsive Photo Gallery | ||
| ## Demo explanation | ||
| This component uses [React Images](https://github.com/jossmac/react-images) for lightbox functionality in the example demo, but the component itself does not depend on it. | ||
| PHOTO_SET obj in the example above is also being passed to lightbox which uses src, srcset, and caption props. | ||
| To gain a good understanding of 'srcset' and 'sizes' attributes, I found this site very helpful: [https://ericportis.com/posts/2014/srcset-sizes/](https://ericportis.com/posts/2014/srcset-sizes/). | ||
| ## User Guide / Best Practice | ||
@@ -113,7 +107,7 @@ | ||
| The parameter `cols` allows the adjustment of the displayed colums. In combination with `react-measure` this allows the demo page to adjust colums (https://github.com/neptunian/react-photo-gallery/blob/master/examples/src/app.js#L103). Code snippet: | ||
| The number of columns and when they change is something the user has control over in their app. The parameter `cols` allows the adjustment of the displayed colums. In combination with `react-measure` this allows the demo page to adjust colums (https://github.com/neptunian/react-photo-gallery/blob/master/examples/src/app.js#L103). Code snippet: | ||
| ``` | ||
| import { Measure } from 'react-measure'; | ||
| function ResponseiveGallery (props) { | ||
| function ResponsiveGallery (props) { | ||
| const { maxImageWidth = 300 } = props; | ||
@@ -130,1 +124,11 @@ return ( | ||
| This idea was discussed in #32 and proposed by @smeijer. | ||
| ### Passing in photos | ||
| In the demo I chose to have one object of photos that I pass in to both the Gallery component and the Lightbox component to keep the code cleaner and stateless. Stateless because I can keep the Lightbox outside of the Gallery component and the user can decide whether to use any Lightbox of their choosing or none at all. I added all the properties into this object that either component might need or that I wanted to use for customization. | ||
| ## Other notes | ||
| This component uses [React Images](https://github.com/jossmac/react-images) for lightbox functionality in the example demo, but the component itself does not depend on it. | ||
| To gain a good understanding of 'srcset' and 'sizes' attributes, I found this site very helpful: [https://ericportis.com/posts/2014/srcset-sizes/](https://ericportis.com/posts/2014/srcset-sizes/). | ||
@@ -5,122 +5,104 @@ import React from 'react'; | ||
| class Gallery extends React.Component{ | ||
| constructor(){ | ||
| super(); | ||
| this.state = { | ||
| containerWidth: 0 | ||
| }; | ||
| this.handleResize = this.handleResize.bind(this); | ||
| } | ||
| componentDidMount(){ | ||
| this.setState({containerWidth: Math.floor(this._gallery.clientWidth)}) | ||
| window.addEventListener('resize', this.handleResize); | ||
| } | ||
| componentDidUpdate(){ | ||
| if (this._gallery.clientWidth !== this.state.containerWidth){ | ||
| this.setState({containerWidth: Math.floor(this._gallery.clientWidth)}); | ||
| constructor(){ | ||
| super(); | ||
| this.state = { | ||
| containerWidth: 0 | ||
| }; | ||
| this.handleResize = this.handleResize.bind(this); | ||
| } | ||
| } | ||
| componentWillUnmount(){ | ||
| window.removeEventListener('resize', this.handleResize, false); | ||
| } | ||
| handleResize(e){ | ||
| this.setState({containerWidth: Math.floor(this._gallery.clientWidth)}); | ||
| } | ||
| render(){ | ||
| let cols = this.props.cols, | ||
| photoPreviewNodes = [], | ||
| contWidth = this.state.containerWidth - (cols * (this.props.margin * 2)); | ||
| componentDidMount(){ | ||
| this.setState({containerWidth: Math.floor(this._gallery.clientWidth)}) | ||
| window.addEventListener('resize', this.handleResize); | ||
| } | ||
| componentDidUpdate(){ | ||
| if (this._gallery.clientWidth !== this.state.containerWidth){ | ||
| this.setState({containerWidth: Math.floor(this._gallery.clientWidth)}); | ||
| } | ||
| } | ||
| componentWillUnmount(){ | ||
| window.removeEventListener('resize', this.handleResize, false); | ||
| } | ||
| handleResize(e){ | ||
| this.setState({containerWidth: Math.floor(this._gallery.clientWidth)}); | ||
| } | ||
| aspectRatio({width, height}){ | ||
| return width / height; | ||
| } | ||
| scalePhotoDimensions(){ | ||
| const { cols, margin, photos} = this.props; | ||
| // subtract 1 pixel because the browser may round up a pixel | ||
| const containerWidth = this.state.containerWidth - 1; | ||
| contWidth = Math.floor(contWidth); // add some padding to prevent layout prob | ||
| var remainder = this.props.photos.length % cols; | ||
| if (remainder) { // there are fewer photos than cols num in last row | ||
| var lastRowWidth = Math.floor( ((this.state.containerWidth / cols) * remainder) - (remainder * (this.props.margin * 2)) ); | ||
| var lastRowIndex = this.props.photos.length - remainder; | ||
| } | ||
| // loop thru each set of cols num | ||
| // eg. if cols is 3 it will loop thru 0,1,2, then 3,4,5 to perform calculations for the particular set | ||
| for (var i=0;i<this.props.photos.length;i+=cols){ | ||
| var totalAr=0, | ||
| commonHeight = 0; | ||
| // divide photos in rows based on cols per row [[1,2,3],[4,5,6],[7,8]]] | ||
| let rows = photos.reduce((acc,item,idx) => { | ||
| const rowNum = Math.floor(idx / cols); | ||
| acc[rowNum] = acc[rowNum] ? [...acc[rowNum], item] : [item]; | ||
| return acc; | ||
| },[]); | ||
| // get the total aspect ratio of the row | ||
| for (var j=i; j<i+cols; j++){ | ||
| if (j == this.props.photos.length){ | ||
| break; | ||
| } | ||
| this.props.photos[j].aspectRatio = this.props.photos[j].width / this.props.photos[j].height; | ||
| totalAr += this.props.photos[j].aspectRatio; | ||
| } | ||
| if (i === lastRowIndex) { | ||
| commonHeight = lastRowWidth / totalAr; | ||
| } else { | ||
| commonHeight = contWidth / totalAr; | ||
| } | ||
| // run thru the same set of items again to give the width and common height | ||
| for (let k=i; k<i+cols; k++){ | ||
| if (k == this.props.photos.length){ | ||
| break; | ||
| } | ||
| // scale the image dimensions | ||
| rows = rows.map((row) => { | ||
| const totalAspectRatio = row.reduce((acc, photo, idx) => acc + this.aspectRatio(photo), 0); | ||
| // calculate the width differently if its the last row and there are fewer photos left than col num | ||
| const rowWidth = (row.length < cols) ? Math.floor((containerWidth / cols) * row.length - (row.length * (margin * 2))) : | ||
| Math.floor(containerWidth - (row.length * (margin * 2))); | ||
| const rowHeight = rowWidth / totalAspectRatio; | ||
| return row.map(photo => ({ | ||
| ...photo, | ||
| width: rowHeight * (this.aspectRatio(photo)), | ||
| height: rowHeight | ||
| })); | ||
| }); | ||
| let src = this.props.photos[k].src, srcset, sizes; | ||
| if (this.props.photos[k].srcset){ | ||
| srcset = this.props.photos[k].srcset.join(); | ||
| } | ||
| if (this.props.photos[k].sizes){ | ||
| sizes = this.props.photos[k].sizes.join(); | ||
| } | ||
| // flatten back the photos array | ||
| return rows.reduce((acc,row) => [...acc, ...row], []); | ||
| } | ||
| render(){ | ||
| const resizedPhotos = this.scalePhotoDimensions(); | ||
| style.margin = this.props.margin; | ||
| photoPreviewNodes.push( | ||
| <div key={k} style={style}> | ||
| <a href="#" className={k} onClick={(e) => this.props.onClickPhoto(k, e)}> | ||
| <img src={src} srcSet={srcset} sizes={sizes} style={{display:'block', border:0}} height={commonHeight} width={commonHeight * this.props.photos[k].aspectRatio} alt={this.props.photos[k].alt} /> | ||
| </a> | ||
| </div> | ||
| return( | ||
| <div id="Gallery" className="clearfix" ref={(c) => this._gallery = c}> | ||
| {resizedPhotos.map((photo,idx) => | ||
| <div style={style} key={idx}> | ||
| <a href="#" onClick={(e) => this.props.onClickPhoto(idx, e)}> | ||
| <img src={photo.src} srcSet={photo.srcset.join()} sizes={photo.sizes.join()} style={{display:'block', border:0}} height={photo.height} width={photo.width} alt={photo.alt} /> | ||
| </a> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| return( | ||
| this.renderGallery(photoPreviewNodes) | ||
| ); | ||
| } | ||
| renderGallery(photoPreviewNodes){ | ||
| return( | ||
| <div id="Gallery" className="clearfix" ref={(c) => this._gallery = c}> | ||
| {photoPreviewNodes} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| }; | ||
| Gallery.displayName = 'Gallery'; | ||
| Gallery.propTypes = { | ||
| photos: function(props, propName, componentName){ | ||
| return PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| src: PropTypes.string.isRequired, | ||
| width: PropTypes.number.isRequired, | ||
| height: PropTypes.number.isRequired, | ||
| alt: PropTypes.string, | ||
| srcset: PropTypes.array, | ||
| sizes: PropTypes.array | ||
| }) | ||
| ).isRequired.apply(this,arguments); | ||
| }, | ||
| onClickPhoto: PropTypes.func, | ||
| cols: PropTypes.number, | ||
| margin: PropTypes.number | ||
| photos: function(props, propName, componentName){ | ||
| return PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| src: PropTypes.string.isRequired, | ||
| width: PropTypes.number.isRequired, | ||
| height: PropTypes.number.isRequired, | ||
| alt: PropTypes.string, | ||
| srcset: PropTypes.array, | ||
| sizes: PropTypes.array | ||
| }) | ||
| ).isRequired.apply(this,arguments); | ||
| }, | ||
| onClickPhoto: PropTypes.func, | ||
| cols: PropTypes.number, | ||
| margin: PropTypes.number | ||
| }; | ||
| Gallery.defaultProps = { | ||
| cols: 3, | ||
| onClickPhoto: function(k,e){ | ||
| e.preventDefault(); | ||
| }, | ||
| margin: 2 | ||
| cols: 3, | ||
| onClickPhoto: (k,e) => { | ||
| e.preventDefault(); | ||
| }, | ||
| margin: 2 | ||
| } | ||
| // Gallery image style | ||
| const style = { | ||
| display: 'block', | ||
| backgroundColor:'#e3e3e3', | ||
| float: 'left' | ||
| display: 'block', | ||
| backgroundColor:'#e3e3e3', | ||
| float: 'left' | ||
| } | ||
| export default Gallery; |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-8.33%
11
- Number of lines in readme file
- increased by3.13%
132
Worsened metrics
- Total package byte prevSize
- decreased by-62.56%
1199055
- Number of package files
- decreased by-8.33%
22
- Lines of code
- decreased by-44.07%
29579
- Number of low supply chain risk alerts
- increased by7.47%
475
No dependency changes