From 98ef57276ca73d628ebb179ffbc55d5d3651f26c Mon Sep 17 00:00:00 2001 From: Sandra Date: Thu, 25 Jan 2018 12:48:21 +0000 Subject: [PATCH] update build files --- .github/HISTORY.md | 5 +- dist/react-images.es.js | 207 ++++++++++++++++++++++++++++--------- dist/react-images.js | 214 +++++++++++++++++++++++++++++--------- dist/react-images.min.js | 2 +- lib/Lightbox.js | 208 ++++++++++++++++++++++++++++--------- package-lock.json | 218 ++++++++++++++++++++++++++++++++++++--- package.json | 2 +- rollup.config.js | 3 +- 8 files changed, 693 insertions(+), 166 deletions(-) diff --git a/.github/HISTORY.md b/.github/HISTORY.md index 2cd7bca9..dc4c86f3 100644 --- a/.github/HISTORY.md +++ b/.github/HISTORY.md @@ -1,10 +1,13 @@ # React-Images +### v0.5.15 / 2018-01-25 +- spinner functionality pull request #187 thanks to [mkalygin] (https://github.com/(https://github.com/mkalygin) + ### v0.5.13 / 2017-11-29 - change srcset to srcSet to fix intermittent warning: Invalid DOM property `srcset`. Did you mean `srcSet`? ### v0.5.12 / 2017-11-29 -- Fix React warning issue #171 thanks to [kachkaev] (https://github.com/(https://github.com/smeijer) +- Fix React warning issue #171 thanks to [kachkaev] (https://github.com/(https://github.com/kachkaev) ### v0.5.10 / 2017-10-18 - New build diff --git a/dist/react-images.es.js b/dist/react-images.es.js index 95fc915c..94f7fd53 100644 --- a/dist/react-images.es.js +++ b/dist/react-images.es.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import React, { Children, Component } from 'react'; import { StyleSheet, css } from 'aphrodite'; import ScrollLock from 'react-scrolllock'; +import { BounceLoader } from 'react-spinners'; import { StyleSheet as StyleSheet$1, css as css$1 } from 'aphrodite/no-important'; import { CSSTransitionGroup } from 'react-transition-group'; import { render } from 'react-dom'; @@ -948,7 +949,9 @@ var Lightbox = function (_Component) { _this.theme = deepMerge(theme, props.theme); _this.classes = StyleSheet.create(deepMerge(defaultStyles, _this.theme)); - bindFunctions.call(_this, ['gotoNext', 'gotoPrev', 'closeBackdrop', 'handleKeyboardInput']); + _this.state = { imageLoaded: false }; + + bindFunctions.call(_this, ['gotoNext', 'gotoPrev', 'closeBackdrop', 'handleKeyboardInput', 'handleImageLoaded']); return _this; } @@ -994,6 +997,12 @@ var Lightbox = function (_Component) { } } + // preload current image + if (this.props.currentImage !== nextProps.currentImage || !this.props.isOpen && nextProps.isOpen) { + var img = this.preloadImage(nextProps.currentImage, this.handleImageLoaded); + this.setState({ imageLoaded: img.complete }); + } + // add/remove event listeners if (!this.props.isOpen && nextProps.isOpen && nextProps.enableKeyboardInput) { window.addEventListener('keydown', this.handleKeyboardInput); @@ -1016,33 +1025,54 @@ var Lightbox = function (_Component) { }, { key: 'preloadImage', - value: function preloadImage(idx) { + value: function preloadImage(idx, onload) { var image = this.props.images[idx]; if (!image) return; var img = new Image(); + // TODO: add error handling for missing images + img.onerror = onload; + img.onload = onload; img.src = image.src; img.srcSet = image.srcSet || image.srcset; + + if (img.srcSet) img.setAttribute('srcset', img.srcSet); + + return img; } }, { key: 'gotoNext', value: function gotoNext(event) { - if (this.props.currentImage === this.props.images.length - 1) return; + var _props = this.props, + currentImage = _props.currentImage, + images = _props.images; + var imageLoaded = this.state.imageLoaded; + + + if (!imageLoaded || currentImage === images.length - 1) return; + if (event) { event.preventDefault(); event.stopPropagation(); } + this.props.onClickNext(); } }, { key: 'gotoPrev', value: function gotoPrev(event) { - if (this.props.currentImage === 0) return; + var currentImage = this.props.currentImage; + var imageLoaded = this.state.imageLoaded; + + + if (!imageLoaded || currentImage === 0) return; + if (event) { event.preventDefault(); event.stopPropagation(); } + this.props.onClickPrev(); } }, { @@ -1072,6 +1102,11 @@ var Lightbox = function (_Component) { } return false; } + }, { + key: 'handleImageLoaded', + value: function handleImageLoaded() { + this.setState({ imageLoaded: true }); + } // ============================== // RENDERERS @@ -1106,14 +1141,12 @@ var Lightbox = function (_Component) { }, { key: 'renderDialog', value: function renderDialog() { - var _props = this.props, - backdropClosesModal = _props.backdropClosesModal, - customControls = _props.customControls, - isOpen = _props.isOpen, - onClose = _props.onClose, - showCloseButton = _props.showCloseButton, - showThumbnails = _props.showThumbnails, - width = _props.width; + var _props2 = this.props, + backdropClosesModal = _props2.backdropClosesModal, + isOpen = _props2.isOpen, + showThumbnails = _props2.showThumbnails, + width = _props2.width; + var imageLoaded = this.state.imageLoaded; if (!isOpen) return React.createElement('span', { key: 'closed' }); @@ -1132,31 +1165,31 @@ var Lightbox = function (_Component) { }, React.createElement( 'div', - { className: css(this.classes.content), style: { marginBottom: offsetThumbnails, maxWidth: width } }, - React.createElement(Header, { - customControls: customControls, - onClose: onClose, - showCloseButton: showCloseButton, - closeButtonTitle: this.props.closeButtonTitle - }), - this.renderImages() - ), - this.renderThumbnails(), - this.renderArrowPrev(), - this.renderArrowNext(), - React.createElement(ScrollLock, null) + null, + React.createElement( + 'div', + { className: css(this.classes.content), style: { marginBottom: offsetThumbnails, maxWidth: width } }, + imageLoaded && this.renderHeader(), + this.renderImages(), + this.renderSpinner(), + imageLoaded && this.renderFooter() + ), + imageLoaded && this.renderThumbnails(), + imageLoaded && this.renderArrowPrev(), + imageLoaded && this.renderArrowNext(), + React.createElement(ScrollLock, null) + ) ); } }, { key: 'renderImages', value: function renderImages() { - var _props2 = this.props, - currentImage = _props2.currentImage, - images = _props2.images, - imageCountSeparator = _props2.imageCountSeparator, - onClickImage = _props2.onClickImage, - showImageCount = _props2.showImageCount, - showThumbnails = _props2.showThumbnails; + var _props3 = this.props, + currentImage = _props3.currentImage, + images = _props3.images, + onClickImage = _props3.onClickImage, + showThumbnails = _props3.showThumbnails; + var imageLoaded = this.state.imageLoaded; if (!images || !images.length) return null; @@ -1179,7 +1212,7 @@ var Lightbox = function (_Component) { 'figure', { className: css(this.classes.figure) }, React.createElement('img', { - className: css(this.classes.image), + className: css(this.classes.image, imageLoaded && this.classes.imageLoaded), onClick: onClickImage, sizes: sizes, alt: image.alt, @@ -1189,25 +1222,18 @@ var Lightbox = function (_Component) { cursor: onClickImage ? 'pointer' : 'auto', maxHeight: 'calc(100vh - ' + heightOffset + ')' } - }), - React.createElement(Footer, { - caption: images[currentImage].caption, - countCurrent: currentImage + 1, - countSeparator: imageCountSeparator, - countTotal: images.length, - showCount: showImageCount }) ); } }, { key: 'renderThumbnails', value: function renderThumbnails() { - var _props3 = this.props, - images = _props3.images, - currentImage = _props3.currentImage, - onClickThumbnail = _props3.onClickThumbnail, - showThumbnails = _props3.showThumbnails, - thumbnailOffset = _props3.thumbnailOffset; + var _props4 = this.props, + images = _props4.images, + currentImage = _props4.currentImage, + onClickThumbnail = _props4.onClickThumbnail, + showThumbnails = _props4.showThumbnails, + thumbnailOffset = _props4.thumbnailOffset; if (!showThumbnails) return; @@ -1219,6 +1245,63 @@ var Lightbox = function (_Component) { onClickThumbnail: onClickThumbnail }); } + }, { + key: 'renderHeader', + value: function renderHeader() { + var _props5 = this.props, + closeButtonTitle = _props5.closeButtonTitle, + customControls = _props5.customControls, + onClose = _props5.onClose, + showCloseButton = _props5.showCloseButton; + + + return React.createElement(Header, { + customControls: customControls, + onClose: onClose, + showCloseButton: showCloseButton, + closeButtonTitle: closeButtonTitle + }); + } + }, { + key: 'renderFooter', + value: function renderFooter() { + var _props6 = this.props, + currentImage = _props6.currentImage, + images = _props6.images, + imageCountSeparator = _props6.imageCountSeparator, + showImageCount = _props6.showImageCount; + + + if (!images || !images.length) return null; + + return React.createElement(Footer, { + caption: images[currentImage].caption, + countCurrent: currentImage + 1, + countSeparator: imageCountSeparator, + countTotal: images.length, + showCount: showImageCount + }); + } + }, { + key: 'renderSpinner', + value: function renderSpinner() { + var _props7 = this.props, + spinner = _props7.spinner, + spinnerColor = _props7.spinnerColor, + spinnerSize = _props7.spinnerSize; + var imageLoaded = this.state.imageLoaded; + + var Spinner = spinner; + + return React.createElement( + 'div', + { className: css(this.classes.spinner, !imageLoaded && this.classes.spinnerActive) }, + React.createElement(Spinner, { + color: spinnerColor, + size: spinnerSize + }) + ); + } }, { key: 'render', value: function render$$1() { @@ -1232,6 +1315,10 @@ var Lightbox = function (_Component) { return Lightbox; }(Component); +var DefaultSpinner = function DefaultSpinner(props) { + return React.createElement(BounceLoader, props); +}; + Lightbox.propTypes = { backdropClosesModal: PropTypes.bool, closeButtonTitle: PropTypes.string, @@ -1256,6 +1343,9 @@ Lightbox.propTypes = { showCloseButton: PropTypes.bool, showImageCount: PropTypes.bool, showThumbnails: PropTypes.bool, + spinner: PropTypes.func, + spinnerColor: PropTypes.string, + spinnerSize: PropTypes.number, theme: PropTypes.object, thumbnailOffset: PropTypes.number, width: PropTypes.number @@ -1271,6 +1361,9 @@ Lightbox.defaultProps = { rightArrowTitle: 'Next (Right arrow key)', showCloseButton: true, showImageCount: true, + spinner: DefaultSpinner, + spinnerColor: 'white', + spinnerSize: 100, theme: {}, thumbnailOffset: 2, width: 1024 @@ -1294,7 +1387,27 @@ var defaultStyles = { // disable user select WebkitTouchCallout: 'none', - userSelect: 'none' + userSelect: 'none', + + // opacity animation on image load + opacity: 0, + transition: 'opacity 0.3s' + }, + imageLoaded: { + opacity: 1 + }, + spinner: { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + + // opacity animation to make spinner appear with delay + opacity: 0, + transition: 'opacity 0.3s' + }, + spinnerActive: { + opacity: 1 } }; diff --git a/dist/react-images.js b/dist/react-images.js index 1f10ec03..e7d96a9e 100644 --- a/dist/react-images.js +++ b/dist/react-images.js @@ -1,8 +1,8 @@ (function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('prop-types'), require('react'), require('aphrodite'), require('react-scrolllock'), require('aphrodite/no-important'), require('react-transition-group'), require('react-dom')) : - typeof define === 'function' && define.amd ? define(['prop-types', 'react', 'aphrodite', 'react-scrolllock', 'aphrodite/no-important', 'react-transition-group', 'react-dom'], factory) : - (global.Lightbox = factory(global.PropTypes,global.React,global.aphrodite,global.ScrollLock,global.aphrodite,global.ReactTransitionGroup,global.ReactDOM)); -}(this, (function (PropTypes,React,aphrodite,ScrollLock,noImportant,reactTransitionGroup,reactDom) { 'use strict'; + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('prop-types'), require('react'), require('aphrodite'), require('react-scrolllock'), require('react-spinners'), require('aphrodite/no-important'), require('react-transition-group'), require('react-dom')) : + typeof define === 'function' && define.amd ? define(['prop-types', 'react', 'aphrodite', 'react-scrolllock', 'react-spinners', 'aphrodite/no-important', 'react-transition-group', 'react-dom'], factory) : + (global.Lightbox = factory(global.PropTypes,global.React,global.aphrodite,global.ScrollLock,global.BounceLoader,global.aphrodite,global.ReactTransitionGroup,global.ReactDOM)); +}(this, (function (PropTypes,React,aphrodite,ScrollLock,reactSpinners,noImportant,reactTransitionGroup,reactDom) { 'use strict'; PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; var React__default = 'default' in React ? React['default'] : React; @@ -950,7 +950,9 @@ var Lightbox = function (_Component) { _this.theme = deepMerge(theme, props.theme); _this.classes = aphrodite.StyleSheet.create(deepMerge(defaultStyles, _this.theme)); - bindFunctions.call(_this, ['gotoNext', 'gotoPrev', 'closeBackdrop', 'handleKeyboardInput']); + _this.state = { imageLoaded: false }; + + bindFunctions.call(_this, ['gotoNext', 'gotoPrev', 'closeBackdrop', 'handleKeyboardInput', 'handleImageLoaded']); return _this; } @@ -996,6 +998,12 @@ var Lightbox = function (_Component) { } } + // preload current image + if (this.props.currentImage !== nextProps.currentImage || !this.props.isOpen && nextProps.isOpen) { + var img = this.preloadImage(nextProps.currentImage, this.handleImageLoaded); + this.setState({ imageLoaded: img.complete }); + } + // add/remove event listeners if (!this.props.isOpen && nextProps.isOpen && nextProps.enableKeyboardInput) { window.addEventListener('keydown', this.handleKeyboardInput); @@ -1018,33 +1026,54 @@ var Lightbox = function (_Component) { }, { key: 'preloadImage', - value: function preloadImage(idx) { + value: function preloadImage(idx, onload) { var image = this.props.images[idx]; if (!image) return; var img = new Image(); + // TODO: add error handling for missing images + img.onerror = onload; + img.onload = onload; img.src = image.src; img.srcSet = image.srcSet || image.srcset; + + if (img.srcSet) img.setAttribute('srcset', img.srcSet); + + return img; } }, { key: 'gotoNext', value: function gotoNext(event) { - if (this.props.currentImage === this.props.images.length - 1) return; + var _props = this.props, + currentImage = _props.currentImage, + images = _props.images; + var imageLoaded = this.state.imageLoaded; + + + if (!imageLoaded || currentImage === images.length - 1) return; + if (event) { event.preventDefault(); event.stopPropagation(); } + this.props.onClickNext(); } }, { key: 'gotoPrev', value: function gotoPrev(event) { - if (this.props.currentImage === 0) return; + var currentImage = this.props.currentImage; + var imageLoaded = this.state.imageLoaded; + + + if (!imageLoaded || currentImage === 0) return; + if (event) { event.preventDefault(); event.stopPropagation(); } + this.props.onClickPrev(); } }, { @@ -1074,6 +1103,11 @@ var Lightbox = function (_Component) { } return false; } + }, { + key: 'handleImageLoaded', + value: function handleImageLoaded() { + this.setState({ imageLoaded: true }); + } // ============================== // RENDERERS @@ -1108,14 +1142,12 @@ var Lightbox = function (_Component) { }, { key: 'renderDialog', value: function renderDialog() { - var _props = this.props, - backdropClosesModal = _props.backdropClosesModal, - customControls = _props.customControls, - isOpen = _props.isOpen, - onClose = _props.onClose, - showCloseButton = _props.showCloseButton, - showThumbnails = _props.showThumbnails, - width = _props.width; + var _props2 = this.props, + backdropClosesModal = _props2.backdropClosesModal, + isOpen = _props2.isOpen, + showThumbnails = _props2.showThumbnails, + width = _props2.width; + var imageLoaded = this.state.imageLoaded; if (!isOpen) return React__default.createElement('span', { key: 'closed' }); @@ -1134,31 +1166,31 @@ var Lightbox = function (_Component) { }, React__default.createElement( 'div', - { className: aphrodite.css(this.classes.content), style: { marginBottom: offsetThumbnails, maxWidth: width } }, - React__default.createElement(Header, { - customControls: customControls, - onClose: onClose, - showCloseButton: showCloseButton, - closeButtonTitle: this.props.closeButtonTitle - }), - this.renderImages() - ), - this.renderThumbnails(), - this.renderArrowPrev(), - this.renderArrowNext(), - React__default.createElement(ScrollLock, null) + null, + React__default.createElement( + 'div', + { className: aphrodite.css(this.classes.content), style: { marginBottom: offsetThumbnails, maxWidth: width } }, + imageLoaded && this.renderHeader(), + this.renderImages(), + this.renderSpinner(), + imageLoaded && this.renderFooter() + ), + imageLoaded && this.renderThumbnails(), + imageLoaded && this.renderArrowPrev(), + imageLoaded && this.renderArrowNext(), + React__default.createElement(ScrollLock, null) + ) ); } }, { key: 'renderImages', value: function renderImages() { - var _props2 = this.props, - currentImage = _props2.currentImage, - images = _props2.images, - imageCountSeparator = _props2.imageCountSeparator, - onClickImage = _props2.onClickImage, - showImageCount = _props2.showImageCount, - showThumbnails = _props2.showThumbnails; + var _props3 = this.props, + currentImage = _props3.currentImage, + images = _props3.images, + onClickImage = _props3.onClickImage, + showThumbnails = _props3.showThumbnails; + var imageLoaded = this.state.imageLoaded; if (!images || !images.length) return null; @@ -1181,7 +1213,7 @@ var Lightbox = function (_Component) { 'figure', { className: aphrodite.css(this.classes.figure) }, React__default.createElement('img', { - className: aphrodite.css(this.classes.image), + className: aphrodite.css(this.classes.image, imageLoaded && this.classes.imageLoaded), onClick: onClickImage, sizes: sizes, alt: image.alt, @@ -1191,25 +1223,18 @@ var Lightbox = function (_Component) { cursor: onClickImage ? 'pointer' : 'auto', maxHeight: 'calc(100vh - ' + heightOffset + ')' } - }), - React__default.createElement(Footer, { - caption: images[currentImage].caption, - countCurrent: currentImage + 1, - countSeparator: imageCountSeparator, - countTotal: images.length, - showCount: showImageCount }) ); } }, { key: 'renderThumbnails', value: function renderThumbnails() { - var _props3 = this.props, - images = _props3.images, - currentImage = _props3.currentImage, - onClickThumbnail = _props3.onClickThumbnail, - showThumbnails = _props3.showThumbnails, - thumbnailOffset = _props3.thumbnailOffset; + var _props4 = this.props, + images = _props4.images, + currentImage = _props4.currentImage, + onClickThumbnail = _props4.onClickThumbnail, + showThumbnails = _props4.showThumbnails, + thumbnailOffset = _props4.thumbnailOffset; if (!showThumbnails) return; @@ -1221,6 +1246,63 @@ var Lightbox = function (_Component) { onClickThumbnail: onClickThumbnail }); } + }, { + key: 'renderHeader', + value: function renderHeader() { + var _props5 = this.props, + closeButtonTitle = _props5.closeButtonTitle, + customControls = _props5.customControls, + onClose = _props5.onClose, + showCloseButton = _props5.showCloseButton; + + + return React__default.createElement(Header, { + customControls: customControls, + onClose: onClose, + showCloseButton: showCloseButton, + closeButtonTitle: closeButtonTitle + }); + } + }, { + key: 'renderFooter', + value: function renderFooter() { + var _props6 = this.props, + currentImage = _props6.currentImage, + images = _props6.images, + imageCountSeparator = _props6.imageCountSeparator, + showImageCount = _props6.showImageCount; + + + if (!images || !images.length) return null; + + return React__default.createElement(Footer, { + caption: images[currentImage].caption, + countCurrent: currentImage + 1, + countSeparator: imageCountSeparator, + countTotal: images.length, + showCount: showImageCount + }); + } + }, { + key: 'renderSpinner', + value: function renderSpinner() { + var _props7 = this.props, + spinner = _props7.spinner, + spinnerColor = _props7.spinnerColor, + spinnerSize = _props7.spinnerSize; + var imageLoaded = this.state.imageLoaded; + + var Spinner = spinner; + + return React__default.createElement( + 'div', + { className: aphrodite.css(this.classes.spinner, !imageLoaded && this.classes.spinnerActive) }, + React__default.createElement(Spinner, { + color: spinnerColor, + size: spinnerSize + }) + ); + } }, { key: 'render', value: function render$$1() { @@ -1234,6 +1316,10 @@ var Lightbox = function (_Component) { return Lightbox; }(React.Component); +var DefaultSpinner = function DefaultSpinner(props) { + return React__default.createElement(reactSpinners.BounceLoader, props); +}; + Lightbox.propTypes = { backdropClosesModal: PropTypes.bool, closeButtonTitle: PropTypes.string, @@ -1258,6 +1344,9 @@ Lightbox.propTypes = { showCloseButton: PropTypes.bool, showImageCount: PropTypes.bool, showThumbnails: PropTypes.bool, + spinner: PropTypes.func, + spinnerColor: PropTypes.string, + spinnerSize: PropTypes.number, theme: PropTypes.object, thumbnailOffset: PropTypes.number, width: PropTypes.number @@ -1273,6 +1362,9 @@ Lightbox.defaultProps = { rightArrowTitle: 'Next (Right arrow key)', showCloseButton: true, showImageCount: true, + spinner: DefaultSpinner, + spinnerColor: 'white', + spinnerSize: 100, theme: {}, thumbnailOffset: 2, width: 1024 @@ -1296,7 +1388,27 @@ var defaultStyles = { // disable user select WebkitTouchCallout: 'none', - userSelect: 'none' + userSelect: 'none', + + // opacity animation on image load + opacity: 0, + transition: 'opacity 0.3s' + }, + imageLoaded: { + opacity: 1 + }, + spinner: { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + + // opacity animation to make spinner appear with delay + opacity: 0, + transition: 'opacity 0.3s' + }, + spinnerActive: { + opacity: 1 } }; diff --git a/dist/react-images.min.js b/dist/react-images.min.js index ada2b152..948e21e5 100644 --- a/dist/react-images.min.js +++ b/dist/react-images.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("prop-types"),require("react"),require("aphrodite"),require("react-scrolllock"),require("aphrodite/no-important"),require("react-transition-group"),require("react-dom")):"function"==typeof define&&define.amd?define(["prop-types","react","aphrodite","react-scrolllock","aphrodite/no-important","react-transition-group","react-dom"],t):e.Lightbox=t(e.PropTypes,e.React,e.aphrodite,e.ScrollLock,e.aphrodite,e.ReactTransitionGroup,e.ReactDOM)}(this,function(e,t,o,n,r,i,a){"use strict";function s(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=Object.assign({},e);return Object.keys(t).forEach(function(n){"object"===g(t[n])&&t[n]&&e[n]?o[n]=s(e[n],t[n]):o[n]=t[n]}),o}function l(e,t){var o=t.theme,n=e.direction,i=e.icon,a=e.onClick,l=e.size,c=k(e,["direction","icon","onClick","size"]),u=r.StyleSheet.create(s(_,o));return m.createElement("button",w({type:"button",className:r.css(u.arrow,u["arrow__direction__"+n],l&&u["arrow__size__"+l]),onClick:a,onTouchEnd:a},c),m.createElement(E,{fill:!!o.arrow&&o.arrow.fill||f.arrow.fill,type:i}))}function c(e,t){var o=t.theme,n=k(e,[]),i=r.StyleSheet.create(s(S,o));return m.createElement("div",w({id:"lightboxBackdrop",className:r.css(i.container)},n))}function u(e,t){var o=t.theme,n=e.caption,i=e.countCurrent,a=e.countSeparator,l=e.countTotal,c=e.showCount,u=k(e,["caption","countCurrent","countSeparator","countTotal","showCount"]);if(!n&&!c)return null;var h=r.StyleSheet.create(s(I,o)),p=c?m.createElement("div",{className:r.css(h.footerCount)},i,a,l):m.createElement("span",null);return m.createElement("div",w({className:r.css(h.footer)},u),n?m.createElement("figcaption",{className:r.css(h.footerCaption)},n):m.createElement("span",null),p)}function h(e,t){var o=t.theme,n=e.customControls,i=e.onClose,a=e.showCloseButton,l=e.closeButtonTitle,c=k(e,["customControls","onClose","showCloseButton","closeButtonTitle"]),u=r.StyleSheet.create(s(T,o));return m.createElement("div",w({className:r.css(u.header)},c),n||m.createElement("span",null),!!a&&m.createElement("button",{title:l,className:r.css(u.close),onClick:i},m.createElement(E,{fill:!!o.close&&o.close.fill||f.close.fill,type:"close"})))}function p(e,t){var o=e.index,n=e.src,i=e.thumbnail,a=e.active,l=e.onClick,c=t.theme,u=i||n,h=r.StyleSheet.create(s(P,c));return m.createElement("div",{className:r.css(h.thumbnail,a&&h.thumbnail__active),onClick:function(e){e.preventDefault(),e.stopPropagation(),l(o)},style:{backgroundImage:'url("'+u+'")'}})}function d(e){var t=this;e.forEach(function(e){return t[e]=t[e].bind(t)})}e=e&&e.hasOwnProperty("default")?e.default:e;var m="default"in t?t.default:t;n=n&&n.hasOwnProperty("default")?n.default:n;var f={};f.container={background:"rgba(0, 0, 0, 0.8)",gutter:{horizontal:10,vertical:10},zIndex:2001},f.header={height:40},f.close={fill:"white"},f.footer={color:"white",count:{color:"rgba(255, 255, 255, 0.75)",fontSize:"0.85em"},height:40,gutter:{horizontal:0,vertical:5}},f.thumbnail={activeBorderColor:"white",size:50,gutter:2},f.arrow={background:"none",fill:"white",height:120};var g="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},v=(function(){function e(e){this.value=e}function t(t){function o(r,i){try{var a=t[r](i),s=a.value;s instanceof e?Promise.resolve(s.value).then(function(e){o("next",e)},function(e){o("throw",e)}):n(a.done?"return":"normal",a.value)}catch(e){n("throw",e)}}function n(e,t){switch(e){case"return":r.resolve({value:t,done:!0});break;case"throw":r.reject(t);break;default:r.resolve({value:t,done:!1})}(r=r.next)?o(r.key,r.arg):i=null}var r,i;this._invoke=function(e,t){return new Promise(function(n,a){var s={key:e,arg:t,resolve:n,reject:a,next:null};i?i=i.next=s:(r=i=s,o(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}(),function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}),y=function(){function e(e,t){for(var o=0;o=0||Object.prototype.hasOwnProperty.call(e,n)&&(o[n]=e[n]);return o},x=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},C={arrowLeft:function(e){return'\n\t\t\n\t'},arrowRight:function(e){return'\n\t\t\n\t'},close:function(e){return'\n\t\t\n\t'}},E=function(e){var t=e.fill,o=e.type,n=k(e,["fill","type"]),r=C[o];return m.createElement("span",w({dangerouslySetInnerHTML:{__html:r(t)}},n))};E.defaultProps={fill:"white"},l.defaultProps={size:"medium"},l.contextTypes={theme:e.object.isRequired};var _={arrow:{background:"none",border:"none",borderRadius:4,cursor:"pointer",outline:"none",padding:10,position:"absolute",top:"50%",WebkitTouchCallout:"none",userSelect:"none"},arrow__size__medium:{height:f.arrow.height,marginTop:f.arrow.height/-2,width:40,"@media (min-width: 768px)":{width:70}},arrow__size__small:{height:f.thumbnail.size,marginTop:f.thumbnail.size/-2,width:30,"@media (min-width: 500px)":{width:40}},arrow__direction__right:{right:f.container.gutter.horizontal},arrow__direction__left:{left:f.container.gutter.horizontal}};c.contextTypes={theme:e.object.isRequired};var S={container:{alignItems:"center",backgroundColor:f.container.background,boxSizing:"border-box",display:"flex",height:"100%",justifyContent:"center",left:0,paddingBottom:f.container.gutter.vertical,paddingLeft:f.container.gutter.horizontal,paddingRight:f.container.gutter.horizontal,paddingTop:f.container.gutter.vertical,position:"fixed",top:0,width:"100%",zIndex:f.container.zIndex}};u.contextTypes={theme:e.object.isRequired};var I={footer:{boxSizing:"border-box",color:f.footer.color,cursor:"auto",display:"flex",justifyContent:"space-between",left:0,lineHeight:1.3,paddingBottom:f.footer.gutter.vertical,paddingLeft:f.footer.gutter.horizontal,paddingRight:f.footer.gutter.horizontal,paddingTop:f.footer.gutter.vertical},footerCount:{color:f.footer.count.color,fontSize:f.footer.count.fontSize,paddingLeft:"1em"},footerCaption:{flex:"1 1 0"}};h.contextTypes={theme:e.object.isRequired};var T={header:{display:"flex",justifyContent:"space-between",height:f.header.height},close:{background:"none",border:"none",cursor:"pointer",outline:"none",position:"relative",top:0,verticalAlign:"bottom",height:40,marginRight:-10,padding:10,width:40}};p.contextTypes={theme:e.object.isRequired};var P={thumbnail:{backgroundPosition:"center",backgroundSize:"cover",borderRadius:2,boxShadow:"inset 0 0 0 1px hsla(0,0%,100%,.2)",cursor:"pointer",display:"inline-block",height:f.thumbnail.size,margin:f.thumbnail.gutter,overflow:"hidden",width:f.thumbnail.size},thumbnail__active:{boxShadow:"inset 0 0 0 2px "+f.thumbnail.activeBorderColor}},z=r.StyleSheet.create({paginatedThumbnails:{bottom:f.container.gutter.vertical,height:f.thumbnail.size,padding:"0 50px",position:"absolute",textAlign:"center",whiteSpace:"nowrap",left:"50%",transform:"translateX(-50%)"}}),L={height:f.thumbnail.size+2*f.thumbnail.gutter,width:40},N=function(e){function t(e){v(this,t);var o=x(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.state={hasCustomPage:!1},o.gotoPrev=o.gotoPrev.bind(o),o.gotoNext=o.gotoNext.bind(o),o}return b(t,e),y(t,[{key:"componentWillReceiveProps",value:function(e){e.currentImage!==this.props.currentImage&&this.setState({hasCustomPage:!1})}},{key:"getFirst",value:function(){var e=this.props,t=e.currentImage,o=e.offset;return this.state.hasCustomPage?this.clampFirst(this.state.first):this.clampFirst(t-o)}},{key:"setFirst",value:function(e,t){var o=this.state.first;e&&(e.preventDefault(),e.stopPropagation()),o!==t&&this.setState({hasCustomPage:!0,first:t})}},{key:"gotoPrev",value:function(e){this.setFirst(e,this.getFirst()-this.props.offset)}},{key:"gotoNext",value:function(e){this.setFirst(e,this.getFirst()+this.props.offset)}},{key:"clampFirst",value:function(e){var t=this.props,o=t.images,n=2*t.offset+1;return e<0?0:e+n>o.length?o.length-n:e}},{key:"renderArrowPrev",value:function(){return this.getFirst()<=0?null:m.createElement(l,{direction:"left",size:"small",icon:"arrowLeft",onClick:this.gotoPrev,style:L,title:"Previous (Left arrow key)",type:"button"})}},{key:"renderArrowNext",value:function(){var e=this.props,t=e.offset,o=e.images,n=2*t+1;return this.getFirst()+n>=o.length?null:m.createElement(l,{direction:"right",size:"small",icon:"arrowRight",onClick:this.gotoNext,style:L,title:"Next (Right arrow key)",type:"button"})}},{key:"render",value:function(){var e=this.props,t=e.images,o=e.currentImage,n=e.onClickThumbnail,i=2*e.offset+1,a=[],s=0;return t.length<=i?a=t:(s=this.getFirst(),a=t.slice(s,s+i)),m.createElement("div",{className:r.css(z.paginatedThumbnails)},this.renderArrowPrev(),a.map(function(e,t){return m.createElement(p,w({key:s+t},e,{index:s+t,onClick:n,active:s+t===o}))}),this.renderArrowNext())}}]),t}(t.Component),O=function(e){function o(){return v(this,o),x(this,(o.__proto__||Object.getPrototypeOf(o)).apply(this,arguments))}return b(o,e),y(o,[{key:"getChildContext",value:function(){return this.props.context}},{key:"render",value:function(){return t.Children.only(this.props.children)}}]),o}(t.Component);O.childContextTypes={theme:e.object};var j=function(e){function t(){v(this,t);var e=x(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.portalElement=null,e}return b(t,e),y(t,[{key:"componentDidMount",value:function(){var e=document.createElement("div");document.body.appendChild(e),this.portalElement=e,this.componentDidUpdate()}},{key:"componentDidUpdate",value:function(){a.render(m.createElement(O,{context:this.context},m.createElement("div",null,m.createElement("style",null,"\n\t\t\t\t.fade-enter { opacity: 0.01; }\n\t\t\t\t.fade-enter.fade-enter-active { opacity: 1; transition: opacity 200ms; }\n\t\t\t\t.fade-leave { opacity: 1; }\n\t\t\t\t.fade-leave.fade-leave-active { opacity: 0.01; transition: opacity 200ms; }\n\t\t"),m.createElement(i.CSSTransitionGroup,w({component:"div",transitionName:"fade",transitionEnterTimeout:200,transitionLeaveTimeout:200},this.props)))),this.portalElement)}},{key:"componentWillUnmount",value:function(){document.body.removeChild(this.portalElement)}},{key:"render",value:function(){return null}}]),t}(t.Component);j.contextTypes={theme:e.object.isRequired};var B=!("undefined"==typeof window||!window.document||!window.document.createElement),R=function(e){function t(e){v(this,t);var n=x(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.theme=s(f,e.theme),n.classes=o.StyleSheet.create(s(q,n.theme)),d.call(n,["gotoNext","gotoPrev","closeBackdrop","handleKeyboardInput"]),n}return b(t,e),y(t,[{key:"getChildContext",value:function(){return{theme:this.theme}}},{key:"componentDidMount",value:function(){this.props.isOpen&&this.props.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput)}},{key:"componentWillReceiveProps",value:function(e){if(B){if(e.preloadNextImage){var t=this.props.currentImage,o=e.currentImage+1,n=e.currentImage-1,r=void 0;t&&e.currentImage>t?r=o:t&&e.currentImage1&&void 0!==arguments[1]?arguments[1]:{},n=Object.assign({},e);return Object.keys(t).forEach(function(r){"object"===v(t[r])&&t[r]&&e[r]?n[r]=l(e[r],t[r]):n[r]=t[r]}),n}function c(e,t){var n=t.theme,r=e.direction,o=e.icon,a=e.onClick,s=e.size,c=x(e,["direction","icon","onClick","size"]),u=i.StyleSheet.create(l(I,n));return f.createElement("button",b({type:"button",className:i.css(u.arrow,u["arrow__direction__"+r],s&&u["arrow__size__"+s]),onClick:a,onTouchEnd:a},c),f.createElement(E,{fill:!!n.arrow&&n.arrow.fill||g.arrow.fill,type:o}))}function u(e,t){var n=t.theme,r=x(e,[]),o=i.StyleSheet.create(l(_,n));return f.createElement("div",b({id:"lightboxBackdrop",className:i.css(o.container)},r))}function h(e,t){var n=t.theme,r=e.caption,o=e.countCurrent,a=e.countSeparator,s=e.countTotal,c=e.showCount,u=x(e,["caption","countCurrent","countSeparator","countTotal","showCount"]);if(!r&&!c)return null;var h=i.StyleSheet.create(l(L,n)),p=c?f.createElement("div",{className:i.css(h.footerCount)},o,a,s):f.createElement("span",null);return f.createElement("div",b({className:i.css(h.footer)},u),r?f.createElement("figcaption",{className:i.css(h.footerCaption)},r):f.createElement("span",null),p)}function p(e,t){var n=t.theme,r=e.customControls,o=e.onClose,a=e.showCloseButton,s=e.closeButtonTitle,c=x(e,["customControls","onClose","showCloseButton","closeButtonTitle"]),u=i.StyleSheet.create(l(T,n));return f.createElement("div",b({className:i.css(u.header)},c),r||f.createElement("span",null),!!a&&f.createElement("button",{title:s,className:i.css(u.close),onClick:o},f.createElement(E,{fill:!!n.close&&n.close.fill||g.close.fill,type:"close"})))}function d(e,t){var n=e.index,r=e.src,o=e.thumbnail,a=e.active,s=e.onClick,c=t.theme,u=o||r,h=i.StyleSheet.create(l(P,c));return f.createElement("div",{className:i.css(h.thumbnail,a&&h.thumbnail__active),onClick:function(e){e.preventDefault(),e.stopPropagation(),s(n)},style:{backgroundImage:'url("'+u+'")'}})}function m(e){var t=this;e.forEach(function(e){return t[e]=t[e].bind(t)})}e=e&&e.hasOwnProperty("default")?e.default:e;var f="default"in t?t.default:t;r=r&&r.hasOwnProperty("default")?r.default:r;var g={};g.container={background:"rgba(0, 0, 0, 0.8)",gutter:{horizontal:10,vertical:10},zIndex:2001},g.header={height:40},g.close={fill:"white"},g.footer={color:"white",count:{color:"rgba(255, 255, 255, 0.75)",fontSize:"0.85em"},height:40,gutter:{horizontal:0,vertical:5}},g.thumbnail={activeBorderColor:"white",size:50,gutter:2},g.arrow={background:"none",fill:"white",height:120};var v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},y=(function(){function e(e){this.value=e}function t(t){function n(o,i){try{var a=t[o](i),s=a.value;s instanceof e?Promise.resolve(s.value).then(function(e){n("next",e)},function(e){n("throw",e)}):r(a.done?"return":"normal",a.value)}catch(e){r("throw",e)}}function r(e,t){switch(e){case"return":o.resolve({value:t,done:!0});break;case"throw":o.reject(t);break;default:o.resolve({value:t,done:!1})}(o=o.next)?n(o.key,o.arg):i=null}var o,i;this._invoke=function(e,t){return new Promise(function(r,a){var s={key:e,arg:t,resolve:r,reject:a,next:null};i?i=i.next=s:(o=i=s,n(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}(),function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}),w=function(){function e(e,t){for(var n=0;n=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},C=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},S={arrowLeft:function(e){return'\n\t\t\n\t'},arrowRight:function(e){return'\n\t\t\n\t'},close:function(e){return'\n\t\t\n\t'}},E=function(e){var t=e.fill,n=e.type,r=x(e,["fill","type"]),o=S[n];return f.createElement("span",b({dangerouslySetInnerHTML:{__html:o(t)}},r))};E.defaultProps={fill:"white"},c.defaultProps={size:"medium"},c.contextTypes={theme:e.object.isRequired};var I={arrow:{background:"none",border:"none",borderRadius:4,cursor:"pointer",outline:"none",padding:10,position:"absolute",top:"50%",WebkitTouchCallout:"none",userSelect:"none"},arrow__size__medium:{height:g.arrow.height,marginTop:g.arrow.height/-2,width:40,"@media (min-width: 768px)":{width:70}},arrow__size__small:{height:g.thumbnail.size,marginTop:g.thumbnail.size/-2,width:30,"@media (min-width: 500px)":{width:40}},arrow__direction__right:{right:g.container.gutter.horizontal},arrow__direction__left:{left:g.container.gutter.horizontal}};u.contextTypes={theme:e.object.isRequired};var _={container:{alignItems:"center",backgroundColor:g.container.background,boxSizing:"border-box",display:"flex",height:"100%",justifyContent:"center",left:0,paddingBottom:g.container.gutter.vertical,paddingLeft:g.container.gutter.horizontal,paddingRight:g.container.gutter.horizontal,paddingTop:g.container.gutter.vertical,position:"fixed",top:0,width:"100%",zIndex:g.container.zIndex}};h.contextTypes={theme:e.object.isRequired};var L={footer:{boxSizing:"border-box",color:g.footer.color,cursor:"auto",display:"flex",justifyContent:"space-between",left:0,lineHeight:1.3,paddingBottom:g.footer.gutter.vertical,paddingLeft:g.footer.gutter.horizontal,paddingRight:g.footer.gutter.horizontal,paddingTop:g.footer.gutter.vertical},footerCount:{color:g.footer.count.color,fontSize:g.footer.count.fontSize,paddingLeft:"1em"},footerCaption:{flex:"1 1 0"}};p.contextTypes={theme:e.object.isRequired};var T={header:{display:"flex",justifyContent:"space-between",height:g.header.height},close:{background:"none",border:"none",cursor:"pointer",outline:"none",position:"relative",top:0,verticalAlign:"bottom",height:40,marginRight:-10,padding:10,width:40}};d.contextTypes={theme:e.object.isRequired};var P={thumbnail:{backgroundPosition:"center",backgroundSize:"cover",borderRadius:2,boxShadow:"inset 0 0 0 1px hsla(0,0%,100%,.2)",cursor:"pointer",display:"inline-block",height:g.thumbnail.size,margin:g.thumbnail.gutter,overflow:"hidden",width:g.thumbnail.size},thumbnail__active:{boxShadow:"inset 0 0 0 2px "+g.thumbnail.activeBorderColor}},z=i.StyleSheet.create({paginatedThumbnails:{bottom:g.container.gutter.vertical,height:g.thumbnail.size,padding:"0 50px",position:"absolute",textAlign:"center",whiteSpace:"nowrap",left:"50%",transform:"translateX(-50%)"}}),O={height:g.thumbnail.size+2*g.thumbnail.gutter,width:40},N=function(e){function t(e){y(this,t);var n=C(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={hasCustomPage:!1},n.gotoPrev=n.gotoPrev.bind(n),n.gotoNext=n.gotoNext.bind(n),n}return k(t,e),w(t,[{key:"componentWillReceiveProps",value:function(e){e.currentImage!==this.props.currentImage&&this.setState({hasCustomPage:!1})}},{key:"getFirst",value:function(){var e=this.props,t=e.currentImage,n=e.offset;return this.state.hasCustomPage?this.clampFirst(this.state.first):this.clampFirst(t-n)}},{key:"setFirst",value:function(e,t){var n=this.state.first;e&&(e.preventDefault(),e.stopPropagation()),n!==t&&this.setState({hasCustomPage:!0,first:t})}},{key:"gotoPrev",value:function(e){this.setFirst(e,this.getFirst()-this.props.offset)}},{key:"gotoNext",value:function(e){this.setFirst(e,this.getFirst()+this.props.offset)}},{key:"clampFirst",value:function(e){var t=this.props,n=t.images,r=2*t.offset+1;return e<0?0:e+r>n.length?n.length-r:e}},{key:"renderArrowPrev",value:function(){return this.getFirst()<=0?null:f.createElement(c,{direction:"left",size:"small",icon:"arrowLeft",onClick:this.gotoPrev,style:O,title:"Previous (Left arrow key)",type:"button"})}},{key:"renderArrowNext",value:function(){var e=this.props,t=e.offset,n=e.images,r=2*t+1;return this.getFirst()+r>=n.length?null:f.createElement(c,{direction:"right",size:"small",icon:"arrowRight",onClick:this.gotoNext,style:O,title:"Next (Right arrow key)",type:"button"})}},{key:"render",value:function(){var e=this.props,t=e.images,n=e.currentImage,r=e.onClickThumbnail,o=2*e.offset+1,a=[],s=0;return t.length<=o?a=t:(s=this.getFirst(),a=t.slice(s,s+o)),f.createElement("div",{className:i.css(z.paginatedThumbnails)},this.renderArrowPrev(),a.map(function(e,t){return f.createElement(d,b({key:s+t},e,{index:s+t,onClick:r,active:s+t===n}))}),this.renderArrowNext())}}]),t}(t.Component),j=function(e){function n(){return y(this,n),C(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return k(n,e),w(n,[{key:"getChildContext",value:function(){return this.props.context}},{key:"render",value:function(){return t.Children.only(this.props.children)}}]),n}(t.Component);j.childContextTypes={theme:e.object};var B=function(e){function t(){y(this,t);var e=C(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.portalElement=null,e}return k(t,e),w(t,[{key:"componentDidMount",value:function(){var e=document.createElement("div");document.body.appendChild(e),this.portalElement=e,this.componentDidUpdate()}},{key:"componentDidUpdate",value:function(){s.render(f.createElement(j,{context:this.context},f.createElement("div",null,f.createElement("style",null,"\n\t\t\t\t.fade-enter { opacity: 0.01; }\n\t\t\t\t.fade-enter.fade-enter-active { opacity: 1; transition: opacity 200ms; }\n\t\t\t\t.fade-leave { opacity: 1; }\n\t\t\t\t.fade-leave.fade-leave-active { opacity: 0.01; transition: opacity 200ms; }\n\t\t"),f.createElement(a.CSSTransitionGroup,b({component:"div",transitionName:"fade",transitionEnterTimeout:200,transitionLeaveTimeout:200},this.props)))),this.portalElement)}},{key:"componentWillUnmount",value:function(){document.body.removeChild(this.portalElement)}},{key:"render",value:function(){return null}}]),t}(t.Component);B.contextTypes={theme:e.object.isRequired};var R=!("undefined"==typeof window||!window.document||!window.document.createElement),A=function(e){function t(e){y(this,t);var r=C(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.theme=l(g,e.theme),r.classes=n.StyleSheet.create(l(q,r.theme)),r.state={imageLoaded:!1},m.call(r,["gotoNext","gotoPrev","closeBackdrop","handleKeyboardInput","handleImageLoaded"]),r}return k(t,e),w(t,[{key:"getChildContext",value:function(){return{theme:this.theme}}},{key:"componentDidMount",value:function(){this.props.isOpen&&this.props.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput)}},{key:"componentWillReceiveProps",value:function(e){if(R){if(e.preloadNextImage){var t=this.props.currentImage,n=e.currentImage+1,r=e.currentImage-1,o=void 0;t&&e.currentImage>t?o=n:t&&e.currentImage {