diff --git a/dist/react-images.es.js b/dist/react-images.es.js deleted file mode 100644 index 8c4b8e58..00000000 --- a/dist/react-images.es.js +++ /dev/null @@ -1,1649 +0,0 @@ -import React, { Children, Component, cloneElement } from 'react'; -import { createPortal, findDOMNode } from 'react-dom'; -import glam from 'glam'; -import rafScheduler from 'raf-schd'; -import { Frame, Track, View, ViewPager } from 'react-view-pager'; -import Fullscreen from 'react-full-screen'; -import ScrollLock from 'react-scrolllock'; -import focusStore from 'a11y-focus-store'; -import { Transition, TransitionGroup } from 'react-transition-group'; - -var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } -}; - -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; - }; -}(); - - - - - -var defineProperty = function (obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } - - return obj; -}; - -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 inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; -}; - - - - - - - - - -var objectWithoutProperties = function (obj, keys) { - var target = {}; - - for (var i in obj) { - if (keys.indexOf(i) >= 0) continue; - if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; - target[i] = obj[i]; - } - - return target; -}; - -var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return call && (typeof call === "object" || typeof call === "function") ? call : self; -}; - -// @jsx glam -var Base = function Base(_ref) { - var css = _ref.css, - innerRef = _ref.innerRef, - Tag = _ref.tag, - props = objectWithoutProperties(_ref, ['css', 'innerRef', 'tag']); - return glam(Tag, _extends({ - ref: innerRef, - css: _extends({ - boxSizing: 'border-box' - }, css) - }, props)); -}; - - -var Button = function Button(props) { - return glam(Base, _extends({ tag: 'button' }, props)); -}; -var Div = function Div(props) { - return glam(Base, _extends({ tag: 'div' }, props)); -}; -var Img = function Img(props) { - return glam(Base, _extends({ tag: 'img' }, props)); -}; -var Nav = function Nav(props) { - return glam(Base, _extends({ tag: 'nav' }, props)); -}; -var Span = function Span(props) { - return glam(Base, _extends({ tag: 'span' }, props)); -}; - -// ============================== -// NO OP -// ============================== - - - -// ============================== -// Class Name Prefixer -// ============================== - -var CLASS_PREFIX = 'react-images'; - -/** - String representation of component state for styling with class names. - - Expects an array of strings OR a string/object pair: - - className(['comp', 'comp-arg', 'comp-arg-2']) - @returns 'react-images__comp react-images__comp-arg react-images__comp-arg-2' - - className('comp', { some: true, state: false }) - @returns 'react-images__comp react-images__comp--some' -*/ -function className(name, state) { - var arr = Array.isArray(name) ? name : [name]; - - // loop through state object, remove falsey values and combine with name - if (state && typeof name === 'string') { - for (var _key in state) { - if (state.hasOwnProperty(_key) && state[_key]) { - arr.push(name + '--' + _key); - } - } - } - - // prefix everything and return a string - return arr.map(function (cn) { - return CLASS_PREFIX + '__' + cn; - }).join(' '); -} - -// ============================== -// Touch Capability Detector -// ============================== - -function isTouch() { - try { - document.createEvent('TouchEvent'); - return true; - } catch (e) { - return false; - } -} - -// @jsx glam -var containerCSS = function containerCSS(_ref) { - var isFullscreen = _ref.isFullscreen; - return { - backgroundColor: isFullscreen ? 'black' : null, - display: 'flex ', - flexDirection: 'column', - height: '100%' - }; -}; - -var Container = function Container(props) { - var children = props.children, - getStyles = props.getStyles, - isFullscreen = props.isFullscreen, - isModal = props.isModal, - innerProps = props.innerProps; - - return glam( - Div, - _extends({ - css: getStyles('container', props), - className: className('container', { isFullscreen: isFullscreen, isModal: isModal }) - }, innerProps), - children - ); -}; - -var smallDevice = '@media (max-width: 769px)'; - -// @jsx glam -var footerCSS = function footerCSS(_ref) { - var isModal = _ref.isModal, - interactionIsIdle = _ref.interactionIsIdle; - return defineProperty({ - alignItems: 'top', - bottom: isModal ? 0 : null, - color: isModal ? 'rgba(255, 255, 255, 0.9)' : '#666', - display: 'flex ', - flex: '0 0 auto', - fontSize: 13, - justifyContent: 'space-between', - left: isModal ? 0 : null, - opacity: interactionIsIdle && isModal ? 0 : 1, - padding: isModal ? '30px 20px 20px' : '10px 0', - position: isModal ? 'absolute' : null, - right: isModal ? 0 : null, - transform: isModal ? 'translateY(' + (interactionIsIdle ? 10 : 0) + 'px)' : null, - transition: 'opacity 300ms, transform 300ms', - zIndex: isModal ? 1 : null - - }, smallDevice, { - padding: isModal ? '20px 15px 15px' : '5px 0' - }); -}; - -var Footer = function Footer(props) { - var components = props.components, - getStyles = props.getStyles, - innerProps = props.innerProps, - isFullscreen = props.isFullscreen, - isModal = props.isModal; - - - var style = isModal ? { background: 'linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.33))' } : null; - - var state = { isFullscreen: isFullscreen, isModal: isModal }; - var cn = { - container: className('footer', state), - caption: className('footer__caption', state), - count: className('footer__count', state) - }; - var css = { - container: getStyles('footer', props), - caption: getStyles('footerCaption', props), - count: getStyles('footerCount', props) - }; - var Caption = components.Caption, - Count = components.Count; - - - return glam( - Div, - _extends({ - css: css.container, - className: cn.container - // TODO glam prefixer fails on gradients - // https://github.com/threepointone/glam/issues/35 - , style: style - }, innerProps), - glam(Caption, props), - glam(Count, props) - ); -}; - -// ============================== -// Inner Elements -// ============================== - -var footerCaptionCSS = function footerCaptionCSS() { - return {}; -}; - -var FooterCaption = function FooterCaption(props) { - var currentView = props.currentView, - getStyles = props.getStyles, - isFullscreen = props.isFullscreen, - isModal = props.isModal; - var caption = currentView.caption; - - var state = { isFullscreen: isFullscreen, isModal: isModal }; - - return glam( - Span, - { - css: getStyles('footerCaption', props), - className: className('footer__caption', state) - }, - caption - ); -}; - -var footerCountCSS = function footerCountCSS() { - return { flexShrink: 0, marginLeft: '1em' }; -}; - -var FooterCount = function FooterCount(props) { - var currentIndex = props.currentIndex, - getStyles = props.getStyles, - isFullscreen = props.isFullscreen, - isModal = props.isModal, - views = props.views; - - var state = { isFullscreen: isFullscreen, isModal: isModal }; - var activeView = currentIndex + 1; - var totalViews = views.length; - - if (!activeView || !totalViews) return null; - - return glam( - Span, - { - css: getStyles('footerCount', props), - className: className('footer__count', state) - }, - activeView, - ' of ', - totalViews - ); -}; - -// @jsx glam -var Svg = function Svg(_ref) { - var size = _ref.size, - props = objectWithoutProperties(_ref, ['size']); - return glam('svg', _extends({ - role: 'presentation', - viewBox: '0 0 24 24', - css: { - display: 'inline-block', - fill: 'currentColor', - height: size, - stroke: 'currentColor', - strokeWidth: 0, - width: size - } - }, props)); -}; - -var ChevronLeft = function ChevronLeft(_ref2) { - var _ref2$size = _ref2.size, - size = _ref2$size === undefined ? 32 : _ref2$size, - props = objectWithoutProperties(_ref2, ['size']); - return glam( - Svg, - _extends({ size: size }, props), - glam('path', { d: 'M15.422 16.078l-1.406 1.406-6-6 6-6 1.406 1.406-4.594 4.594z' }) - ); -}; -var ChevronRight = function ChevronRight(_ref3) { - var _ref3$size = _ref3.size, - size = _ref3$size === undefined ? 32 : _ref3$size, - props = objectWithoutProperties(_ref3, ['size']); - return glam( - Svg, - _extends({ size: size }, props), - glam('path', { d: 'M9.984 6l6 6-6 6-1.406-1.406 4.594-4.594-4.594-4.594z' }) - ); -}; -var Close = function Close(_ref4) { - var _ref4$size = _ref4.size, - size = _ref4$size === undefined ? 32 : _ref4$size, - props = objectWithoutProperties(_ref4, ['size']); - return glam( - Svg, - _extends({ size: size }, props), - glam('path', { d: 'M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z' }) - ); -}; -var FullscreenEnter = function FullscreenEnter(_ref5) { - var _ref5$size = _ref5.size, - size = _ref5$size === undefined ? 32 : _ref5$size, - props = objectWithoutProperties(_ref5, ['size']); - return glam( - Svg, - _extends({ size: size }, props), - glam('path', { d: 'M14.016 5.016h4.969v4.969h-1.969v-3h-3v-1.969zM17.016 17.016v-3h1.969v4.969h-4.969v-1.969h3zM5.016 9.984v-4.969h4.969v1.969h-3v3h-1.969zM6.984 14.016v3h3v1.969h-4.969v-4.969h1.969z' }) - ); -}; -var FullscreenExit = function FullscreenExit(_ref6) { - var _ref6$size = _ref6.size, - size = _ref6$size === undefined ? 32 : _ref6$size, - props = objectWithoutProperties(_ref6, ['size']); - return glam( - Svg, - _extends({ size: size }, props), - glam('path', { d: 'M15.984 8.016h3v1.969h-4.969v-4.969h1.969v3zM14.016 18.984v-4.969h4.969v1.969h-3v3h-1.969zM8.016 8.016v-3h1.969v4.969h-4.969v-1.969h3zM5.016 15.984v-1.969h4.969v4.969h-1.969v-3h-3z' }) - ); -}; - -// @jsx glam -var headerCSS = function headerCSS(_ref) { - var interactionIsIdle = _ref.interactionIsIdle; - return { - alignItems: 'center', - display: 'flex ', - flex: '0 0 auto', - justifyContent: 'space-between', - opacity: interactionIsIdle ? 0 : 1, - padding: 10, - paddingBottom: 20, - position: 'absolute', - transform: 'translateY(' + (interactionIsIdle ? -10 : 0) + 'px)', - transition: 'opacity 300ms, transform 300ms', - top: 0, - left: 0, - right: 0, - zIndex: 1 - }; -}; - -var Header = function Header(props) { - var components = props.components, - getStyles = props.getStyles, - getCloseLabel = props.getCloseLabel, - getFullscreenLabel = props.getFullscreenLabel, - innerProps = props.innerProps, - isModal = props.isModal, - modalProps = props.modalProps; - - - if (!isModal) return null; - - var allowFullscreen = modalProps.allowFullscreen, - isFullscreen = modalProps.isFullscreen, - onClose = modalProps.onClose, - toggleFullscreen = modalProps.toggleFullscreen; - - var FsIcon = isFullscreen ? FullscreenExit : FullscreenEnter; - var CloseButton = components.CloseButton, - FullscreenButton = components.FullscreenButton; - - var state = { isFullscreen: isFullscreen, isModal: isModal }; - - return glam( - Div, - _extends({ - css: getStyles('header', props), - className: className('header', state) - // TODO glam prefixer fails on gradients - // https://github.com/threepointone/glam/issues/35 - , style: { - background: 'linear-gradient(rgba(0,0,0,0.33), rgba(0,0,0,0))' - } - }, innerProps), - glam('span', null), - glam( - 'span', - null, - allowFullscreen ? glam( - FullscreenButton, - { - getStyles: getStyles, - innerProps: { - onClick: toggleFullscreen, - title: getFullscreenLabel(state) - } - }, - glam(FsIcon, { size: 32 }) - ) : null, - glam( - CloseButton, - { - getStyles: getStyles, - innerProps: { - onClick: onClose, - title: getCloseLabel(state) - } - }, - glam(Close, { size: 32 }) - ) - ) - ); -}; - -// ============================== -// Header Buttons -// ============================== - -var headerButtonCSS = function headerButtonCSS() { - return { - alignItems: 'center', - background: 0, - border: 0, - color: 'rgba(255, 255, 255, 0.75)', - cursor: 'pointer', - display: 'inline-flex ', - height: 44, - justifyContent: 'center', - outline: 0, - padding: 0, - position: 'relative', - width: 44, - - '&:hover': { - color: 'white' - } - }; -}; - -var headerFullscreenCSS = headerButtonCSS; -var HeaderFullscreen = function HeaderFullscreen(props) { - var children = props.children, - getStyles = props.getStyles, - innerProps = props.innerProps; - - - return glam( - Button, - _extends({ - css: getStyles('headerFullscreen', props), - className: className(['header_button', 'header_button--fullscreen']), - type: 'button' - }, innerProps), - children - ); -}; - -var headerCloseCSS = headerButtonCSS; -var HeaderClose = function HeaderClose(props) { - var children = props.children, - getStyles = props.getStyles, - innerProps = props.innerProps; - - - return glam( - Button, - _extends({ - css: getStyles('headerClose', props), - className: className(['header_button', 'header_button--close']), - type: 'button' - }, innerProps), - children - ); -}; - -// @jsx glam -// ============================== -// Navigation -// ============================== - -var navigationCSS = function navigationCSS(_ref) { - var interactionIsIdle = _ref.interactionIsIdle; - return { - display: 'flex ', - alignItems: 'center', - justifyContent: 'space-between', - opacity: interactionIsIdle ? 0 : 1, - transition: 'opacity 300ms' - }; -}; - -var Navigation = function Navigation(props) { - var children = props.children, - getStyles = props.getStyles, - isFullscreen = props.isFullscreen, - isModal = props.isModal; - - return !isTouch() ? glam( - Nav, - { - css: getStyles('navigation', props), - className: className('navigation', { isFullscreen: isFullscreen, isModal: isModal }) - }, - children - ) : null; -}; - -// ============================== -// Nav Item -// ============================== - -var BUTTON_SIZE = 50; - -var navigationItemCSS = function navigationItemCSS(_ref2) { - var _ref3; - - var align = _ref2.align; - return _ref3 = { - alignItems: 'center', - background: 'rgba(255, 255, 255, 0.2)', - border: 0, - borderRadius: '50%', - color: 'white', - cursor: 'pointer', - display: 'flex ', - fontSize: 'inherit', - height: BUTTON_SIZE, - justifyContent: 'center', - marginTop: -(BUTTON_SIZE / 2), - outline: 0, - position: 'absolute', - top: '50%', - transition: 'background-color 200ms', - width: BUTTON_SIZE - }, defineProperty(_ref3, align, 20), defineProperty(_ref3, '&:hover', { - background: 'rgba(255, 255, 255, 0.3)' - }), defineProperty(_ref3, '&:active', { - background: 'rgba(255, 255, 255, 0.2)' - }), _ref3; -}; - -var navigationPrevCSS = navigationItemCSS; -var NavigationPrev = function NavigationPrev(props) { - var _props$children = props.children, - children = _props$children === undefined ? glam(ChevronLeft, { size: 48 }) : _props$children, - getStyles = props.getStyles, - innerProps = props.innerProps; - - - return glam( - Button, - _extends({ type: 'button', css: getStyles('navigationPrev', props) }, innerProps), - children - ); -}; - -var navigationNextCSS = navigationItemCSS; -var NavigationNext = function NavigationNext(props) { - var _props$children2 = props.children, - children = _props$children2 === undefined ? glam(ChevronRight, { size: 48 }) : _props$children2, - getStyles = props.getStyles, - innerProps = props.innerProps; - - - return glam( - Button, - _extends({ type: 'button', css: getStyles('navigationNext', props) }, innerProps), - children - ); -}; - -// @jsx glam -// ============================== -// Blanket -// ============================== - -var blanketCSS = function blanketCSS(_ref) { - var isFullscreen = _ref.isFullscreen; - return { - backgroundColor: isFullscreen ? 'black' : 'rgba(0, 0, 0, 0.8)', - bottom: 0, - left: 0, - position: 'fixed', - right: 0, - top: 0, - zIndex: 1 - }; -}; - -var Blanket = function Blanket(props) { - var getStyles = props.getStyles, - innerProps = props.innerProps, - isFullscreen = props.isFullscreen; - - return glam(Div, _extends({ - css: getStyles('blanket', props), - className: className('blanket', { isFullscreen: isFullscreen }) - }, innerProps)); -}; - -// ============================== -// Positioner -// ============================== - -var positionerCSS = function positionerCSS() { - return { - alignItems: 'center', - bottom: 0, - display: 'flex ', - justifyContent: 'center', - left: 0, - position: 'fixed', - right: 0, - top: 0, - zIndex: 1 - }; -}; - -var Positioner = function Positioner(props) { - var children = props.children, - getStyles = props.getStyles, - innerProps = props.innerProps, - isFullscreen = props.isFullscreen; - - return glam( - Div, - _extends({ - css: getStyles('positioner', props), - className: className('positioner', { isFullscreen: isFullscreen }) - }, innerProps), - children - ); -}; - -// ============================== -// Dialog -// ============================== - -var dialogCSS = function dialogCSS() { - return {}; -}; - -var Dialog = function Dialog(props) { - var children = props.children, - getStyles = props.getStyles, - innerProps = props.innerProps, - isFullscreen = props.isFullscreen; - - return glam( - Div, - _extends({ - css: getStyles('dialog', props), - className: className('dialog', { isFullscreen: isFullscreen }) - }, innerProps), - children - ); -}; - -function getSource(_ref) { - var data = _ref.data, - isFullscreen = _ref.isFullscreen; - var _data$source = data.source, - source = _data$source === undefined ? data.src : _data$source; - - if (typeof source === 'string') return source; - - return isFullscreen ? source.fullscreen : source.regular; -} - -// @jsx glam -var viewCSS = function viewCSS() { - return { - lineHeight: 0, - position: 'relative', - textAlign: 'center' - }; -}; - -var View$1 = function View$$1(props) { - var data = props.data, - formatters = props.formatters, - getStyles = props.getStyles, - index = props.index, - isFullscreen = props.isFullscreen, - isModal = props.isModal; - - var innerProps = { - alt: formatters.getAltText({ data: data, index: index }), - src: getSource({ data: data, isFullscreen: isFullscreen }) - }; - - return glam( - Div, - { - css: getStyles('view', props), - className: className('view', { isFullscreen: isFullscreen, isModal: isModal }) - }, - glam(Img, _extends({}, innerProps, { - className: className('view-image', { isFullscreen: isFullscreen, isModal: isModal }), - css: { - height: 'auto', - maxHeight: '100vh', - maxWidth: '100%', - userSelect: 'none' - } - })) - ); -}; - -var carouselComponents = { - Container: Container, - Footer: Footer, - FooterCaption: FooterCaption, - FooterCount: FooterCount, - Header: Header, - HeaderClose: HeaderClose, - HeaderFullscreen: HeaderFullscreen, - Navigation: Navigation, - NavigationPrev: NavigationPrev, - NavigationNext: NavigationNext, - View: View$1 -}; - -var defaultCarouselComponents = function defaultCarouselComponents(providedComponents) { - return _extends({}, carouselComponents, providedComponents); -}; - -// ============================== -// Modal -// ============================== - -var modalComponents = { - Blanket: Blanket, - Positioner: Positioner, - Dialog: Dialog -}; - -var defaultModalComponents = function defaultModalComponents(providedComponents) { - return _extends({}, modalComponents, providedComponents); -}; - -// Carousel -// Modal -var defaultCarouselStyles = { - container: containerCSS, - footer: footerCSS, - footerCaption: footerCaptionCSS, - footerCount: footerCountCSS, - header: headerCSS, - headerClose: headerCloseCSS, - headerFullscreen: headerFullscreenCSS, - navigation: navigationCSS, - navigationPrev: navigationPrevCSS, - navigationNext: navigationNextCSS, - view: viewCSS -}; -var defaultModalStyles = { - blanket: blanketCSS, - dialog: dialogCSS, - positioner: positionerCSS -}; - -// Merge Utility -// Allows consumers to extend a base Carousel or Modal with additional styles - -var easing = 'cubic-bezier(0.23, 1, 0.32, 1)'; // easeOutQuint -var verticalOffset = 40; - -// ============================== -// Fade -// ============================== - -var Fade = function Fade(_ref) { - var Tag = _ref.component, - onEntered = _ref.onEntered, - onExited = _ref.onExited, - inProp = _ref.in, - originalProps = _ref.innerProps, - props = objectWithoutProperties(_ref, ['component', 'onEntered', 'onExited', 'in', 'innerProps']); - - var enter = 300; - var exit = 500; - var fadeStyle = { - transition: 'opacity 200ms', - opacity: 0 - }; - var fadeTransition = { - entering: { opacity: 0 }, - entered: { opacity: 1 }, - exiting: { opacity: 0, transitionDuration: exit + 'ms' } - }; - - return React.createElement( - Transition, - { - appear: true, - mountOnEnter: true, - unmountOnExit: true, - onEntered: onEntered, - onExited: onExited, - key: 'fade', - 'in': inProp, - timeout: { enter: enter, exit: exit } - }, - function (status) { - var innerProps = _extends({}, originalProps, { - style: _extends({}, fadeStyle, fadeTransition[status]) - }); - - if (status === 'exited') return null; - - return React.createElement(Tag, _extends({ innerProps: innerProps }, props)); - } - ); -}; - -var SlideUp = function SlideUp(_ref2) { - var Tag = _ref2.component, - onEntered = _ref2.onEntered, - onExited = _ref2.onExited, - inProp = _ref2.in, - originalProps = _ref2.innerProps, - props = objectWithoutProperties(_ref2, ['component', 'onEntered', 'onExited', 'in', 'innerProps']); - - var enter = 300; - var exit = 500; - var restingTransform = 'translate3d(0, 0, 0)'; - var slideStyle = { - transition: 'transform ' + enter + 'ms ' + easing + ', opacity ' + enter + 'ms ' + easing, - transform: restingTransform - }; - var slideTransition = { - entering: { - opacity: 0, - transform: 'translate3d(0, ' + verticalOffset + 'px, 0) scale(0.9)' - }, - entered: { - opacity: 1, - transform: restingTransform - }, - exiting: { - opacity: 0, - transform: 'translate3d(0, ' + verticalOffset + 'px, 0) scale(0.9)', - transition: 'transform ' + exit + 'ms ' + easing + ', opacity ' + exit + 'ms ' + easing - } - }; - - return React.createElement( - Transition, - { - appear: true, - 'in': inProp, - mountOnEnter: true, - onEntered: onEntered, - onExited: onExited, - timeout: { enter: enter, exit: exit }, - unmountOnExit: true - }, - function (status) { - if (status === 'exited') return null; - - var innerProps = _extends({}, originalProps, { - style: _extends({}, slideStyle, slideTransition[status]) - }); - - return React.createElement(Tag, _extends({ innerProps: innerProps }, props)); - } - ); -}; - -// @jsx glam -var defaultProps$1 = { - allowFullscreen: !isTouch(), - closeOnBackdropClick: true, - closeOnEsc: true, - styles: {} -}; - -var Modal = function (_Component) { - inherits(Modal, _Component); - - // TODO - function Modal(props) { - classCallCheck(this, Modal); - - var _this = possibleConstructorReturn(this, (Modal.__proto__ || Object.getPrototypeOf(Modal)).call(this, props)); - - _initialiseProps$1.call(_this); - - _this.cacheComponents(props.components); - - _this.state = { isFullscreen: false }; - return _this; - } - - createClass(Modal, [{ - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(nextProps) { - if (nextProps.components !== this.props.components) { - this.cacheComponents(nextProps.components); - } - } - - // emulate `componentDidMount` & `componentWillUnmount` - // called on complete of enter & exit transitions respectively - - }, { - key: 'getCommonProps', - value: function getCommonProps() { - var isFullscreen = this.state.isFullscreen; - - - return { - getStyles: this.getStyles, - isFullscreen: isFullscreen, - modalProps: this.props - }; - } - }, { - key: 'render', - value: function render() { - var _components = this.components, - Blanket = _components.Blanket, - Positioner = _components.Positioner, - Dialog = _components.Dialog; - var _props = this.props, - allowFullscreen = _props.allowFullscreen, - children = _props.children; - var isFullscreen = this.state.isFullscreen; - - var commonProps = this.commonProps = this.getCommonProps(); - - // $FlowFixMe - var transitionIn = this.props.in; - - // forward props to modal for use in internal components - var modalProps = { - allowFullscreen: allowFullscreen, - isFullscreen: isFullscreen, - onClose: this.handleClose, - toggleFullscreen: this.toggleFullscreen - }; - - // augment user carousel with modal props - // $FlowFixMe - var carouselComponent = cloneElement(children, { - isModal: true, - modalProps: modalProps - }); - - return glam( - Fullscreen, - { enabled: isFullscreen, onChange: this.handleFullscreenChange }, - glam(Fade, _extends({}, commonProps, { component: Blanket, 'in': transitionIn })), - glam( - SlideUp, - _extends({}, commonProps, { - component: Positioner, - 'in': transitionIn, - innerProps: { - innerRef: this.getPositioner, - onClick: this.handleBackdropClick - }, - onEntered: this.modalDidMount, - onExited: this.modalWillUnmount - }), - glam( - Dialog, - commonProps, - carouselComponent - ), - glam(ScrollLock, null) - ) - ); - } - }]); - return Modal; -}(Component); - -Modal.defaultProps = defaultProps$1; - -var _initialiseProps$1 = function _initialiseProps() { - var _this2 = this; - - this.modalDidMount = function () { - document.addEventListener('keyup', _this2.handleKeyUp); - focusStore.storeFocus(); - }; - - this.modalWillUnmount = function () { - document.removeEventListener('keyup', _this2.handleKeyUp); - focusStore.restoreFocus(); - }; - - this.cacheComponents = function (comps) { - _this2.components = defaultModalComponents(comps); - }; - - this.handleFullscreenChange = function (isFullscreen) { - _this2.setState({ isFullscreen: isFullscreen }); - }; - - this.handleKeyUp = function (event) { - var _props2 = _this2.props, - allowFullscreen = _props2.allowFullscreen, - closeOnEsc = _props2.closeOnEsc; - var isFullscreen = _this2.state.isFullscreen; - - var allowClose = event.key === 'Escape' && closeOnEsc && !isFullscreen; - - // toggle fullscreen - if (allowFullscreen && event.key === 'f') { - _this2.toggleFullscreen(); - } - - // close on escape when not fullscreen - if (allowClose) _this2.handleClose(event); - }; - - this.handleBackdropClick = function (event) { - var closeOnBackdropClick = _this2.props.closeOnBackdropClick; - - - if (event.target !== _this2.positioner || !closeOnBackdropClick) return; - - _this2.handleClose(event); - }; - - this.getPositioner = function (ref) { - _this2.positioner = ref; - }; - - this.toggleFullscreen = function () { - _this2.setState(function (state) { - return { isFullscreen: !state.isFullscreen }; - }); - }; - - this.handleClose = function (event) { - var onClose = _this2.props.onClose; - var isFullscreen = _this2.state.isFullscreen; - - // force exit fullscreen mode on close - - if (isFullscreen) { - _this2.toggleFullscreen(); - } - - // call the consumer's onClose func - onClose(event); - }; - - this.getStyles = function (key, props) { - var base = defaultModalStyles[key](props); - base.boxSizing = 'border-box'; - var custom = _this2.props.styles[key]; - return custom ? custom(base, props) : base; - }; -}; - -// ============================== -// Navigation -// ============================== - -/* ARIA label for the next button */ - - -// NOTE: props aren't used by default for some getters but consumers may need -// them, this needs to be reflected in the flow type. - -/* eslint-disable no-unused-vars */ - -function getNextLabel(_ref) { - var currentIndex = _ref.currentIndex, - views = _ref.views; - - return 'Show slide ' + (currentIndex + 2) + ' of ' + views.length; -} - -/* ARIA label for the previous button */ -function getPrevLabel(_ref2) { - var currentIndex = _ref2.currentIndex, - views = _ref2.views; - - return 'Show slide ' + currentIndex + ' of ' + views.length; -} - -/* HTML title for the next button */ -function getNextTitle(props) { - return 'Next (right arrow)'; -} - -/* HTML title for the previous button */ -function getPrevTitle(props) { - return 'Previous (left arrow)'; -} - -// ============================== -// Header -// ============================== - -/* ARIA label for the close button */ -function getCloseLabel(props) { - return 'Close (esc)'; -} -/* ARIA label for the fullscreen button */ -function getFullscreenLabel(_ref3) { - var isFullscreen = _ref3.isFullscreen; - - return isFullscreen ? 'Exit fullscreen (f)' : 'Enter fullscreen (f)'; -} - -// ============================== -// View -// ============================== - -/* alt text for each image in the carousel */ -function getAltText(_ref4) { - var data = _ref4.data, - index = _ref4.index; - - if (data.caption) return data.caption; - - return 'Image ' + (index + 1); -} - -// ============================== -// Exports -// ============================== - -var formatters = { - getAltText: getAltText, - getNextLabel: getNextLabel, - getPrevLabel: getPrevLabel, - getNextTitle: getNextTitle, - getPrevTitle: getPrevTitle, - getCloseLabel: getCloseLabel, - getFullscreenLabel: getFullscreenLabel -}; - -// @jsx glam -var viewPagerStyles = { flex: '1 1 auto', position: 'relative' }; -var frameStyles = { outline: 0 }; - -var defaultProps = { - currentIndex: 0, - formatters: formatters, - hideControlsWhenIdle: 3000, - styles: {}, - trackProps: { - instant: !isTouch(), - swipe: 'touch' - } -}; - -var Carousel$1 = function (_Component) { - inherits(Carousel, _Component); - - function Carousel(props) { - classCallCheck(this, Carousel); - - var _this = possibleConstructorReturn(this, (Carousel.__proto__ || Object.getPrototypeOf(Carousel)).call(this, props)); - - _initialiseProps.call(_this); - - _this.cacheComponents(props.components); - - _this.state = { - currentIndex: props.currentIndex, - interactionIsIdle: isTouch() - }; - return _this; - } // TODO - - - createClass(Carousel, [{ - key: 'componentDidMount', - value: function componentDidMount() { - var _props = this.props, - hideControlsWhenIdle = _props.hideControlsWhenIdle, - modalProps = _props.modalProps; - - var isModal = Boolean(modalProps); - - this.mounted = true; - - if (hideControlsWhenIdle && this.container) { - this.container.addEventListener('mousedown', this.handleMouseActivity); - this.container.addEventListener('mousemove', this.handleMouseActivity); - this.container.addEventListener('touchmove', this.handleMouseActivity); - } - if (isModal) { - this.focusViewFrame(); - } - } - }, { - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(nextProps) { - if (nextProps.components !== this.props.components) { - this.cacheComponents(nextProps.components); - } - - if (this.props.currentIndex !== nextProps.currentIndex) { - this.setState({ currentIndex: nextProps.currentIndex }); - } - } - }, { - key: 'componentWillUnmount', - value: function componentWillUnmount() { - this.mounted = false; - - if (this.props.hideControlsWhenIdle && this.container) { - this.container.removeEventListener('mousedown', this.handleMouseActivity); - this.container.removeEventListener('mousemove', this.handleMouseActivity); - this.container.removeEventListener('touchmove', this.handleMouseActivity); - this.handleMouseActivity.cancel(); - } - } - - // ============================== - // Refs - // ============================== - - // ============================== - // Utilities - // ============================== - - // combine defaultProps with consumer props to maintain expected behaviour - - // combine defaultProps with consumer props to maintain expected behaviour - - - // ============================== - // Handlers - // ============================== - - // ============================== - // Renderers - // ============================== - - }, { - key: 'getCommonProps', - value: function getCommonProps() { - var _props2 = this.props, - frameProps = _props2.frameProps, - trackProps = _props2.trackProps, - modalProps = _props2.modalProps, - views = _props2.views; - - var isModal = Boolean(modalProps); - var isFullscreen = Boolean(modalProps && modalProps.isFullscreen); - var _state = this.state, - currentIndex = _state.currentIndex, - interactionIsIdle = _state.interactionIsIdle; - - var currentView = this.getViewData(); - - return { - carouselProps: this.props, - currentIndex: currentIndex, - currentView: currentView, - formatters: this.props.formatters, - frameProps: frameProps, - getStyles: this.getStyles, - isFullscreen: isFullscreen, - isModal: isModal, - modalProps: modalProps, - interactionIsIdle: interactionIsIdle, - trackProps: trackProps, - views: views - }; - } - }, { - key: 'render', - value: function render() { - var _components = this.components, - Container = _components.Container, - View$$1 = _components.View; - var currentIndex = this.state.currentIndex; - var _props3 = this.props, - frameProps = _props3.frameProps, - views = _props3.views; - - var commonProps = this.commonProps = this.getCommonProps(); - - return glam( - Container, - _extends({}, commonProps, { innerProps: { innerRef: this.getContainer } }), - this.renderHeader(), - glam( - ViewPager, - { - tag: 'main', - style: viewPagerStyles, - className: className('pager') - }, - glam( - Frame, - _extends({}, frameProps, { - ref: this.getFrame, - className: className('frame'), - style: frameStyles - }), - glam( - Track, - _extends({}, this.getTrackProps(this.props), { - currentView: currentIndex, - className: className('track'), - onViewChange: this.handleViewChange, - ref: this.getTrack - }), - views && views.map(function (data, index) { - return glam( - View, - { className: className('view-wrapper'), key: index }, - glam(View$$1, _extends({}, commonProps, { data: data, index: index })) - ); - }) - ) - ), - this.renderNavigation() - ), - this.renderFooter() - ); - } - }]); - return Carousel; -}(Component); - -Carousel$1.defaultProps = defaultProps; - -var _initialiseProps = function _initialiseProps() { - var _this2 = this; - - this.mounted = false; - - this.cacheComponents = function (comps) { - _this2.components = defaultCarouselComponents(comps); - }; - - this.getContainer = function (ref) { - _this2.container = ref; - }; - - this.getFooter = function (ref) { - _this2.footer = ref; - }; - - this.getFrame = function (ref) { - _this2.frame = findDOMNode(ref); - }; - - this.getHeader = function (ref) { - _this2.header = ref; - }; - - this.getTrack = function (ref) { - _this2.track = ref; - }; - - this.hasPreviousView = function () { - var trackProps = _this2.props.trackProps; - var currentIndex = _this2.state.currentIndex; - - - return trackProps.infinite || currentIndex !== 0; - }; - - this.hasNextView = function () { - var _props4 = _this2.props, - trackProps = _props4.trackProps, - views = _props4.views; - var currentIndex = _this2.state.currentIndex; - - - return trackProps.infinite || currentIndex !== views.length - 1; - }; - - this.getStyles = function (key, props) { - var base = defaultCarouselStyles[key](props); - base.boxSizing = 'border-box'; - var custom = _this2.props.styles[key]; - return custom ? custom(base, props) : base; - }; - - this.getTrackProps = function (props) { - return _extends({}, defaultProps.trackProps, props.trackProps); - }; - - this.getFormatters = function () { - return _extends({}, defaultProps.formatters, _this2.props.formatters); - }; - - this.getViewData = function () { - var views = _this2.props.views; - var currentIndex = _this2.state.currentIndex; - - - return views[currentIndex]; - }; - - this.focusViewFrame = function () { - if (_this2.frame && document.activeElement !== _this2.frame) { - _this2.frame.focus(); - } - }; - - this.prev = function () { - _this2.track.prev(); - _this2.focusViewFrame(); - }; - - this.next = function () { - _this2.track.next(); - _this2.focusViewFrame(); - }; - - this.handleMouseActivity = rafScheduler(function () { - clearTimeout(_this2.timer); - - if (_this2.state.interactionIsIdle) { - _this2.setState({ interactionIsIdle: false }); - } - - _this2.timer = setTimeout(function () { - if (_this2.mounted) { - _this2.setState({ interactionIsIdle: true }); - } - }, _this2.props.hideControlsWhenIdle); - }); - - this.handleViewChange = function (indicies) { - var trackProps = _this2.props.trackProps; - - // simplify by enforcing number - - var currentIndex = indicies[0]; - - _this2.setState({ currentIndex: currentIndex }); - - // call the consumer's onViewChange fn - if (trackProps && trackProps.onViewChange) { - trackProps.onViewChange(currentIndex); - } - }; - - this.renderNavigation = function () { - var _getFormatters = _this2.getFormatters(), - getNextLabel = _getFormatters.getNextLabel, - getPrevLabel = _getFormatters.getPrevLabel, - getNextTitle = _getFormatters.getNextTitle, - getPrevTitle = _getFormatters.getPrevTitle; - - var _components2 = _this2.components, - Navigation = _components2.Navigation, - NavigationPrev = _components2.NavigationPrev, - NavigationNext = _components2.NavigationNext; - var commonProps = _this2.commonProps; - - - var showPrev = _this2.hasPreviousView(); - var showNext = _this2.hasNextView(); - var showNav = (showPrev || showNext) && Navigation; - - return showNav ? glam( - Navigation, - commonProps, - showPrev && glam(NavigationPrev, _extends({}, commonProps, { - align: 'left', - innerProps: { - 'aria-label': getPrevLabel(commonProps), - onClick: _this2.prev, - title: getPrevTitle(commonProps) - } - })), - showNext && glam(NavigationNext, _extends({}, commonProps, { - align: 'right', - innerProps: { - 'aria-label': getNextLabel(commonProps), - onClick: _this2.next, - title: getNextTitle(commonProps) - } - })) - ) : null; - }; - - this.renderFooter = function () { - var _components3 = _this2.components, - Footer = _components3.Footer, - FooterCaption = _components3.FooterCaption, - FooterCount = _components3.FooterCount; - var commonProps = _this2.commonProps; - - - return Footer ? glam(Footer, _extends({}, commonProps, { - components: { - Caption: FooterCaption, - Count: FooterCount - }, - innerProps: { innerRef: _this2.getFooter } - })) : null; - }; - - this.renderHeader = function () { - var _components4 = _this2.components, - Header = _components4.Header, - HeaderClose = _components4.HeaderClose, - HeaderFullscreen = _components4.HeaderFullscreen; - - var _getFormatters2 = _this2.getFormatters(), - getCloseLabel = _getFormatters2.getCloseLabel, - getFullscreenLabel = _getFormatters2.getFullscreenLabel; - - var commonProps = _this2.commonProps; - - - return Header ? glam(Header, _extends({}, commonProps, { - getCloseLabel: getCloseLabel, - getFullscreenLabel: getFullscreenLabel, - components: { - CloseButton: HeaderClose, - FullscreenButton: HeaderFullscreen - }, - data: _this2.getViewData(), - innerProps: { innerRef: _this2.getHeader } - })) : null; - }; -}; - -var FirstChild = function FirstChild(_ref) { - var children = _ref.children; - return Children.toArray(children)[0] || null; -}; - -var ModalGateway = function (_Component) { - inherits(ModalGateway, _Component); - - function ModalGateway() { - classCallCheck(this, ModalGateway); - return possibleConstructorReturn(this, (ModalGateway.__proto__ || Object.getPrototypeOf(ModalGateway)).apply(this, arguments)); - } - - createClass(ModalGateway, [{ - key: 'render', - value: function render() { - if (typeof window === 'undefined') return null; - var _props = this.props, - target = _props.target, - children = _props.children; - - return createPortal(React.createElement(TransitionGroup, { component: FirstChild, children: children }), target); - } - }]); - return ModalGateway; -}(Component); - -ModalGateway.defaultProps = { - target: typeof window !== 'undefined' ? document.body : null -}; - -export { ModalGateway, Modal, carouselComponents, modalComponents }; -export default Carousel$1; diff --git a/dist/react-images.js b/dist/react-images.js deleted file mode 100644 index 0ab55a01..00000000 --- a/dist/react-images.js +++ /dev/null @@ -1,1663 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('react-dom'), require('glam'), require('raf-schd'), require('react-view-pager'), require('react-full-screen'), require('react-scrolllock'), require('a11y-focus-store'), require('react-transition-group')) : - typeof define === 'function' && define.amd ? define(['react', 'react-dom', 'glam', 'raf-schd', 'react-view-pager', 'react-full-screen', 'react-scrolllock', 'a11y-focus-store', 'react-transition-group'], factory) : - (global.Images = factory(global.React,global.ReactDOM,global.glam,global.rafScheduler,global.PageView,global.Fullscreen,global.ScrollLock,global.focusStore,global.Transition)); -}(this, (function (React,reactDom,glam,rafScheduler,reactViewPager,Fullscreen,ScrollLock,focusStore,reactTransitionGroup) { 'use strict'; - -var React__default = 'default' in React ? React['default'] : React; -glam = glam && glam.hasOwnProperty('default') ? glam['default'] : glam; -rafScheduler = rafScheduler && rafScheduler.hasOwnProperty('default') ? rafScheduler['default'] : rafScheduler; -Fullscreen = Fullscreen && Fullscreen.hasOwnProperty('default') ? Fullscreen['default'] : Fullscreen; -ScrollLock = ScrollLock && ScrollLock.hasOwnProperty('default') ? ScrollLock['default'] : ScrollLock; -focusStore = focusStore && focusStore.hasOwnProperty('default') ? focusStore['default'] : focusStore; - -var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } -}; - -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; - }; -}(); - - - - - -var defineProperty = function (obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } - - return obj; -}; - -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 inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; -}; - - - - - - - - - -var objectWithoutProperties = function (obj, keys) { - var target = {}; - - for (var i in obj) { - if (keys.indexOf(i) >= 0) continue; - if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; - target[i] = obj[i]; - } - - return target; -}; - -var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return call && (typeof call === "object" || typeof call === "function") ? call : self; -}; - -// @jsx glam -var Base = function Base(_ref) { - var css = _ref.css, - innerRef = _ref.innerRef, - Tag = _ref.tag, - props = objectWithoutProperties(_ref, ['css', 'innerRef', 'tag']); - return glam(Tag, _extends({ - ref: innerRef, - css: _extends({ - boxSizing: 'border-box' - }, css) - }, props)); -}; - - -var Button = function Button(props) { - return glam(Base, _extends({ tag: 'button' }, props)); -}; -var Div = function Div(props) { - return glam(Base, _extends({ tag: 'div' }, props)); -}; -var Img = function Img(props) { - return glam(Base, _extends({ tag: 'img' }, props)); -}; -var Nav = function Nav(props) { - return glam(Base, _extends({ tag: 'nav' }, props)); -}; -var Span = function Span(props) { - return glam(Base, _extends({ tag: 'span' }, props)); -}; - -// ============================== -// NO OP -// ============================== - - - -// ============================== -// Class Name Prefixer -// ============================== - -var CLASS_PREFIX = 'react-images'; - -/** - String representation of component state for styling with class names. - - Expects an array of strings OR a string/object pair: - - className(['comp', 'comp-arg', 'comp-arg-2']) - @returns 'react-images__comp react-images__comp-arg react-images__comp-arg-2' - - className('comp', { some: true, state: false }) - @returns 'react-images__comp react-images__comp--some' -*/ -function className(name, state) { - var arr = Array.isArray(name) ? name : [name]; - - // loop through state object, remove falsey values and combine with name - if (state && typeof name === 'string') { - for (var _key in state) { - if (state.hasOwnProperty(_key) && state[_key]) { - arr.push(name + '--' + _key); - } - } - } - - // prefix everything and return a string - return arr.map(function (cn) { - return CLASS_PREFIX + '__' + cn; - }).join(' '); -} - -// ============================== -// Touch Capability Detector -// ============================== - -function isTouch() { - try { - document.createEvent('TouchEvent'); - return true; - } catch (e) { - return false; - } -} - -// @jsx glam -var containerCSS = function containerCSS(_ref) { - var isFullscreen = _ref.isFullscreen; - return { - backgroundColor: isFullscreen ? 'black' : null, - display: 'flex ', - flexDirection: 'column', - height: '100%' - }; -}; - -var Container = function Container(props) { - var children = props.children, - getStyles = props.getStyles, - isFullscreen = props.isFullscreen, - isModal = props.isModal, - innerProps = props.innerProps; - - return glam( - Div, - _extends({ - css: getStyles('container', props), - className: className('container', { isFullscreen: isFullscreen, isModal: isModal }) - }, innerProps), - children - ); -}; - -var smallDevice = '@media (max-width: 769px)'; - -// @jsx glam -var footerCSS = function footerCSS(_ref) { - var isModal = _ref.isModal, - interactionIsIdle = _ref.interactionIsIdle; - return defineProperty({ - alignItems: 'top', - bottom: isModal ? 0 : null, - color: isModal ? 'rgba(255, 255, 255, 0.9)' : '#666', - display: 'flex ', - flex: '0 0 auto', - fontSize: 13, - justifyContent: 'space-between', - left: isModal ? 0 : null, - opacity: interactionIsIdle && isModal ? 0 : 1, - padding: isModal ? '30px 20px 20px' : '10px 0', - position: isModal ? 'absolute' : null, - right: isModal ? 0 : null, - transform: isModal ? 'translateY(' + (interactionIsIdle ? 10 : 0) + 'px)' : null, - transition: 'opacity 300ms, transform 300ms', - zIndex: isModal ? 1 : null - - }, smallDevice, { - padding: isModal ? '20px 15px 15px' : '5px 0' - }); -}; - -var Footer = function Footer(props) { - var components = props.components, - getStyles = props.getStyles, - innerProps = props.innerProps, - isFullscreen = props.isFullscreen, - isModal = props.isModal; - - - var style = isModal ? { background: 'linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.33))' } : null; - - var state = { isFullscreen: isFullscreen, isModal: isModal }; - var cn = { - container: className('footer', state), - caption: className('footer__caption', state), - count: className('footer__count', state) - }; - var css = { - container: getStyles('footer', props), - caption: getStyles('footerCaption', props), - count: getStyles('footerCount', props) - }; - var Caption = components.Caption, - Count = components.Count; - - - return glam( - Div, - _extends({ - css: css.container, - className: cn.container - // TODO glam prefixer fails on gradients - // https://github.com/threepointone/glam/issues/35 - , style: style - }, innerProps), - glam(Caption, props), - glam(Count, props) - ); -}; - -// ============================== -// Inner Elements -// ============================== - -var footerCaptionCSS = function footerCaptionCSS() { - return {}; -}; - -var FooterCaption = function FooterCaption(props) { - var currentView = props.currentView, - getStyles = props.getStyles, - isFullscreen = props.isFullscreen, - isModal = props.isModal; - var caption = currentView.caption; - - var state = { isFullscreen: isFullscreen, isModal: isModal }; - - return glam( - Span, - { - css: getStyles('footerCaption', props), - className: className('footer__caption', state) - }, - caption - ); -}; - -var footerCountCSS = function footerCountCSS() { - return { flexShrink: 0, marginLeft: '1em' }; -}; - -var FooterCount = function FooterCount(props) { - var currentIndex = props.currentIndex, - getStyles = props.getStyles, - isFullscreen = props.isFullscreen, - isModal = props.isModal, - views = props.views; - - var state = { isFullscreen: isFullscreen, isModal: isModal }; - var activeView = currentIndex + 1; - var totalViews = views.length; - - if (!activeView || !totalViews) return null; - - return glam( - Span, - { - css: getStyles('footerCount', props), - className: className('footer__count', state) - }, - activeView, - ' of ', - totalViews - ); -}; - -// @jsx glam -var Svg = function Svg(_ref) { - var size = _ref.size, - props = objectWithoutProperties(_ref, ['size']); - return glam('svg', _extends({ - role: 'presentation', - viewBox: '0 0 24 24', - css: { - display: 'inline-block', - fill: 'currentColor', - height: size, - stroke: 'currentColor', - strokeWidth: 0, - width: size - } - }, props)); -}; - -var ChevronLeft = function ChevronLeft(_ref2) { - var _ref2$size = _ref2.size, - size = _ref2$size === undefined ? 32 : _ref2$size, - props = objectWithoutProperties(_ref2, ['size']); - return glam( - Svg, - _extends({ size: size }, props), - glam('path', { d: 'M15.422 16.078l-1.406 1.406-6-6 6-6 1.406 1.406-4.594 4.594z' }) - ); -}; -var ChevronRight = function ChevronRight(_ref3) { - var _ref3$size = _ref3.size, - size = _ref3$size === undefined ? 32 : _ref3$size, - props = objectWithoutProperties(_ref3, ['size']); - return glam( - Svg, - _extends({ size: size }, props), - glam('path', { d: 'M9.984 6l6 6-6 6-1.406-1.406 4.594-4.594-4.594-4.594z' }) - ); -}; -var Close = function Close(_ref4) { - var _ref4$size = _ref4.size, - size = _ref4$size === undefined ? 32 : _ref4$size, - props = objectWithoutProperties(_ref4, ['size']); - return glam( - Svg, - _extends({ size: size }, props), - glam('path', { d: 'M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z' }) - ); -}; -var FullscreenEnter = function FullscreenEnter(_ref5) { - var _ref5$size = _ref5.size, - size = _ref5$size === undefined ? 32 : _ref5$size, - props = objectWithoutProperties(_ref5, ['size']); - return glam( - Svg, - _extends({ size: size }, props), - glam('path', { d: 'M14.016 5.016h4.969v4.969h-1.969v-3h-3v-1.969zM17.016 17.016v-3h1.969v4.969h-4.969v-1.969h3zM5.016 9.984v-4.969h4.969v1.969h-3v3h-1.969zM6.984 14.016v3h3v1.969h-4.969v-4.969h1.969z' }) - ); -}; -var FullscreenExit = function FullscreenExit(_ref6) { - var _ref6$size = _ref6.size, - size = _ref6$size === undefined ? 32 : _ref6$size, - props = objectWithoutProperties(_ref6, ['size']); - return glam( - Svg, - _extends({ size: size }, props), - glam('path', { d: 'M15.984 8.016h3v1.969h-4.969v-4.969h1.969v3zM14.016 18.984v-4.969h4.969v1.969h-3v3h-1.969zM8.016 8.016v-3h1.969v4.969h-4.969v-1.969h3zM5.016 15.984v-1.969h4.969v4.969h-1.969v-3h-3z' }) - ); -}; - -// @jsx glam -var headerCSS = function headerCSS(_ref) { - var interactionIsIdle = _ref.interactionIsIdle; - return { - alignItems: 'center', - display: 'flex ', - flex: '0 0 auto', - justifyContent: 'space-between', - opacity: interactionIsIdle ? 0 : 1, - padding: 10, - paddingBottom: 20, - position: 'absolute', - transform: 'translateY(' + (interactionIsIdle ? -10 : 0) + 'px)', - transition: 'opacity 300ms, transform 300ms', - top: 0, - left: 0, - right: 0, - zIndex: 1 - }; -}; - -var Header = function Header(props) { - var components = props.components, - getStyles = props.getStyles, - getCloseLabel = props.getCloseLabel, - getFullscreenLabel = props.getFullscreenLabel, - innerProps = props.innerProps, - isModal = props.isModal, - modalProps = props.modalProps; - - - if (!isModal) return null; - - var allowFullscreen = modalProps.allowFullscreen, - isFullscreen = modalProps.isFullscreen, - onClose = modalProps.onClose, - toggleFullscreen = modalProps.toggleFullscreen; - - var FsIcon = isFullscreen ? FullscreenExit : FullscreenEnter; - var CloseButton = components.CloseButton, - FullscreenButton = components.FullscreenButton; - - var state = { isFullscreen: isFullscreen, isModal: isModal }; - - return glam( - Div, - _extends({ - css: getStyles('header', props), - className: className('header', state) - // TODO glam prefixer fails on gradients - // https://github.com/threepointone/glam/issues/35 - , style: { - background: 'linear-gradient(rgba(0,0,0,0.33), rgba(0,0,0,0))' - } - }, innerProps), - glam('span', null), - glam( - 'span', - null, - allowFullscreen ? glam( - FullscreenButton, - { - getStyles: getStyles, - innerProps: { - onClick: toggleFullscreen, - title: getFullscreenLabel(state) - } - }, - glam(FsIcon, { size: 32 }) - ) : null, - glam( - CloseButton, - { - getStyles: getStyles, - innerProps: { - onClick: onClose, - title: getCloseLabel(state) - } - }, - glam(Close, { size: 32 }) - ) - ) - ); -}; - -// ============================== -// Header Buttons -// ============================== - -var headerButtonCSS = function headerButtonCSS() { - return { - alignItems: 'center', - background: 0, - border: 0, - color: 'rgba(255, 255, 255, 0.75)', - cursor: 'pointer', - display: 'inline-flex ', - height: 44, - justifyContent: 'center', - outline: 0, - padding: 0, - position: 'relative', - width: 44, - - '&:hover': { - color: 'white' - } - }; -}; - -var headerFullscreenCSS = headerButtonCSS; -var HeaderFullscreen = function HeaderFullscreen(props) { - var children = props.children, - getStyles = props.getStyles, - innerProps = props.innerProps; - - - return glam( - Button, - _extends({ - css: getStyles('headerFullscreen', props), - className: className(['header_button', 'header_button--fullscreen']), - type: 'button' - }, innerProps), - children - ); -}; - -var headerCloseCSS = headerButtonCSS; -var HeaderClose = function HeaderClose(props) { - var children = props.children, - getStyles = props.getStyles, - innerProps = props.innerProps; - - - return glam( - Button, - _extends({ - css: getStyles('headerClose', props), - className: className(['header_button', 'header_button--close']), - type: 'button' - }, innerProps), - children - ); -}; - -// @jsx glam -// ============================== -// Navigation -// ============================== - -var navigationCSS = function navigationCSS(_ref) { - var interactionIsIdle = _ref.interactionIsIdle; - return { - display: 'flex ', - alignItems: 'center', - justifyContent: 'space-between', - opacity: interactionIsIdle ? 0 : 1, - transition: 'opacity 300ms' - }; -}; - -var Navigation = function Navigation(props) { - var children = props.children, - getStyles = props.getStyles, - isFullscreen = props.isFullscreen, - isModal = props.isModal; - - return !isTouch() ? glam( - Nav, - { - css: getStyles('navigation', props), - className: className('navigation', { isFullscreen: isFullscreen, isModal: isModal }) - }, - children - ) : null; -}; - -// ============================== -// Nav Item -// ============================== - -var BUTTON_SIZE = 50; - -var navigationItemCSS = function navigationItemCSS(_ref2) { - var _ref3; - - var align = _ref2.align; - return _ref3 = { - alignItems: 'center', - background: 'rgba(255, 255, 255, 0.2)', - border: 0, - borderRadius: '50%', - color: 'white', - cursor: 'pointer', - display: 'flex ', - fontSize: 'inherit', - height: BUTTON_SIZE, - justifyContent: 'center', - marginTop: -(BUTTON_SIZE / 2), - outline: 0, - position: 'absolute', - top: '50%', - transition: 'background-color 200ms', - width: BUTTON_SIZE - }, defineProperty(_ref3, align, 20), defineProperty(_ref3, '&:hover', { - background: 'rgba(255, 255, 255, 0.3)' - }), defineProperty(_ref3, '&:active', { - background: 'rgba(255, 255, 255, 0.2)' - }), _ref3; -}; - -var navigationPrevCSS = navigationItemCSS; -var NavigationPrev = function NavigationPrev(props) { - var _props$children = props.children, - children = _props$children === undefined ? glam(ChevronLeft, { size: 48 }) : _props$children, - getStyles = props.getStyles, - innerProps = props.innerProps; - - - return glam( - Button, - _extends({ type: 'button', css: getStyles('navigationPrev', props) }, innerProps), - children - ); -}; - -var navigationNextCSS = navigationItemCSS; -var NavigationNext = function NavigationNext(props) { - var _props$children2 = props.children, - children = _props$children2 === undefined ? glam(ChevronRight, { size: 48 }) : _props$children2, - getStyles = props.getStyles, - innerProps = props.innerProps; - - - return glam( - Button, - _extends({ type: 'button', css: getStyles('navigationNext', props) }, innerProps), - children - ); -}; - -// @jsx glam -// ============================== -// Blanket -// ============================== - -var blanketCSS = function blanketCSS(_ref) { - var isFullscreen = _ref.isFullscreen; - return { - backgroundColor: isFullscreen ? 'black' : 'rgba(0, 0, 0, 0.8)', - bottom: 0, - left: 0, - position: 'fixed', - right: 0, - top: 0, - zIndex: 1 - }; -}; - -var Blanket = function Blanket(props) { - var getStyles = props.getStyles, - innerProps = props.innerProps, - isFullscreen = props.isFullscreen; - - return glam(Div, _extends({ - css: getStyles('blanket', props), - className: className('blanket', { isFullscreen: isFullscreen }) - }, innerProps)); -}; - -// ============================== -// Positioner -// ============================== - -var positionerCSS = function positionerCSS() { - return { - alignItems: 'center', - bottom: 0, - display: 'flex ', - justifyContent: 'center', - left: 0, - position: 'fixed', - right: 0, - top: 0, - zIndex: 1 - }; -}; - -var Positioner = function Positioner(props) { - var children = props.children, - getStyles = props.getStyles, - innerProps = props.innerProps, - isFullscreen = props.isFullscreen; - - return glam( - Div, - _extends({ - css: getStyles('positioner', props), - className: className('positioner', { isFullscreen: isFullscreen }) - }, innerProps), - children - ); -}; - -// ============================== -// Dialog -// ============================== - -var dialogCSS = function dialogCSS() { - return {}; -}; - -var Dialog = function Dialog(props) { - var children = props.children, - getStyles = props.getStyles, - innerProps = props.innerProps, - isFullscreen = props.isFullscreen; - - return glam( - Div, - _extends({ - css: getStyles('dialog', props), - className: className('dialog', { isFullscreen: isFullscreen }) - }, innerProps), - children - ); -}; - -function getSource(_ref) { - var data = _ref.data, - isFullscreen = _ref.isFullscreen; - var _data$source = data.source, - source = _data$source === undefined ? data.src : _data$source; - - if (typeof source === 'string') return source; - - return isFullscreen ? source.fullscreen : source.regular; -} - -// @jsx glam -var viewCSS = function viewCSS() { - return { - lineHeight: 0, - position: 'relative', - textAlign: 'center' - }; -}; - -var View$1 = function View$$1(props) { - var data = props.data, - formatters = props.formatters, - getStyles = props.getStyles, - index = props.index, - isFullscreen = props.isFullscreen, - isModal = props.isModal; - - var innerProps = { - alt: formatters.getAltText({ data: data, index: index }), - src: getSource({ data: data, isFullscreen: isFullscreen }) - }; - - return glam( - Div, - { - css: getStyles('view', props), - className: className('view', { isFullscreen: isFullscreen, isModal: isModal }) - }, - glam(Img, _extends({}, innerProps, { - className: className('view-image', { isFullscreen: isFullscreen, isModal: isModal }), - css: { - height: 'auto', - maxHeight: '100vh', - maxWidth: '100%', - userSelect: 'none' - } - })) - ); -}; - -var carouselComponents = { - Container: Container, - Footer: Footer, - FooterCaption: FooterCaption, - FooterCount: FooterCount, - Header: Header, - HeaderClose: HeaderClose, - HeaderFullscreen: HeaderFullscreen, - Navigation: Navigation, - NavigationPrev: NavigationPrev, - NavigationNext: NavigationNext, - View: View$1 -}; - -var defaultCarouselComponents = function defaultCarouselComponents(providedComponents) { - return _extends({}, carouselComponents, providedComponents); -}; - -// ============================== -// Modal -// ============================== - -var modalComponents = { - Blanket: Blanket, - Positioner: Positioner, - Dialog: Dialog -}; - -var defaultModalComponents = function defaultModalComponents(providedComponents) { - return _extends({}, modalComponents, providedComponents); -}; - -// Carousel -// Modal -var defaultCarouselStyles = { - container: containerCSS, - footer: footerCSS, - footerCaption: footerCaptionCSS, - footerCount: footerCountCSS, - header: headerCSS, - headerClose: headerCloseCSS, - headerFullscreen: headerFullscreenCSS, - navigation: navigationCSS, - navigationPrev: navigationPrevCSS, - navigationNext: navigationNextCSS, - view: viewCSS -}; -var defaultModalStyles = { - blanket: blanketCSS, - dialog: dialogCSS, - positioner: positionerCSS -}; - -// Merge Utility -// Allows consumers to extend a base Carousel or Modal with additional styles - -var easing = 'cubic-bezier(0.23, 1, 0.32, 1)'; // easeOutQuint -var verticalOffset = 40; - -// ============================== -// Fade -// ============================== - -var Fade = function Fade(_ref) { - var Tag = _ref.component, - onEntered = _ref.onEntered, - onExited = _ref.onExited, - inProp = _ref.in, - originalProps = _ref.innerProps, - props = objectWithoutProperties(_ref, ['component', 'onEntered', 'onExited', 'in', 'innerProps']); - - var enter = 300; - var exit = 500; - var fadeStyle = { - transition: 'opacity 200ms', - opacity: 0 - }; - var fadeTransition = { - entering: { opacity: 0 }, - entered: { opacity: 1 }, - exiting: { opacity: 0, transitionDuration: exit + 'ms' } - }; - - return React__default.createElement( - reactTransitionGroup.Transition, - { - appear: true, - mountOnEnter: true, - unmountOnExit: true, - onEntered: onEntered, - onExited: onExited, - key: 'fade', - 'in': inProp, - timeout: { enter: enter, exit: exit } - }, - function (status) { - var innerProps = _extends({}, originalProps, { - style: _extends({}, fadeStyle, fadeTransition[status]) - }); - - if (status === 'exited') return null; - - return React__default.createElement(Tag, _extends({ innerProps: innerProps }, props)); - } - ); -}; - -var SlideUp = function SlideUp(_ref2) { - var Tag = _ref2.component, - onEntered = _ref2.onEntered, - onExited = _ref2.onExited, - inProp = _ref2.in, - originalProps = _ref2.innerProps, - props = objectWithoutProperties(_ref2, ['component', 'onEntered', 'onExited', 'in', 'innerProps']); - - var enter = 300; - var exit = 500; - var restingTransform = 'translate3d(0, 0, 0)'; - var slideStyle = { - transition: 'transform ' + enter + 'ms ' + easing + ', opacity ' + enter + 'ms ' + easing, - transform: restingTransform - }; - var slideTransition = { - entering: { - opacity: 0, - transform: 'translate3d(0, ' + verticalOffset + 'px, 0) scale(0.9)' - }, - entered: { - opacity: 1, - transform: restingTransform - }, - exiting: { - opacity: 0, - transform: 'translate3d(0, ' + verticalOffset + 'px, 0) scale(0.9)', - transition: 'transform ' + exit + 'ms ' + easing + ', opacity ' + exit + 'ms ' + easing - } - }; - - return React__default.createElement( - reactTransitionGroup.Transition, - { - appear: true, - 'in': inProp, - mountOnEnter: true, - onEntered: onEntered, - onExited: onExited, - timeout: { enter: enter, exit: exit }, - unmountOnExit: true - }, - function (status) { - if (status === 'exited') return null; - - var innerProps = _extends({}, originalProps, { - style: _extends({}, slideStyle, slideTransition[status]) - }); - - return React__default.createElement(Tag, _extends({ innerProps: innerProps }, props)); - } - ); -}; - -// @jsx glam -var defaultProps$1 = { - allowFullscreen: !isTouch(), - closeOnBackdropClick: true, - closeOnEsc: true, - styles: {} -}; - -var Modal = function (_Component) { - inherits(Modal, _Component); - - // TODO - function Modal(props) { - classCallCheck(this, Modal); - - var _this = possibleConstructorReturn(this, (Modal.__proto__ || Object.getPrototypeOf(Modal)).call(this, props)); - - _initialiseProps$1.call(_this); - - _this.cacheComponents(props.components); - - _this.state = { isFullscreen: false }; - return _this; - } - - createClass(Modal, [{ - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(nextProps) { - if (nextProps.components !== this.props.components) { - this.cacheComponents(nextProps.components); - } - } - - // emulate `componentDidMount` & `componentWillUnmount` - // called on complete of enter & exit transitions respectively - - }, { - key: 'getCommonProps', - value: function getCommonProps() { - var isFullscreen = this.state.isFullscreen; - - - return { - getStyles: this.getStyles, - isFullscreen: isFullscreen, - modalProps: this.props - }; - } - }, { - key: 'render', - value: function render() { - var _components = this.components, - Blanket = _components.Blanket, - Positioner = _components.Positioner, - Dialog = _components.Dialog; - var _props = this.props, - allowFullscreen = _props.allowFullscreen, - children = _props.children; - var isFullscreen = this.state.isFullscreen; - - var commonProps = this.commonProps = this.getCommonProps(); - - // $FlowFixMe - var transitionIn = this.props.in; - - // forward props to modal for use in internal components - var modalProps = { - allowFullscreen: allowFullscreen, - isFullscreen: isFullscreen, - onClose: this.handleClose, - toggleFullscreen: this.toggleFullscreen - }; - - // augment user carousel with modal props - // $FlowFixMe - var carouselComponent = React.cloneElement(children, { - isModal: true, - modalProps: modalProps - }); - - return glam( - Fullscreen, - { enabled: isFullscreen, onChange: this.handleFullscreenChange }, - glam(Fade, _extends({}, commonProps, { component: Blanket, 'in': transitionIn })), - glam( - SlideUp, - _extends({}, commonProps, { - component: Positioner, - 'in': transitionIn, - innerProps: { - innerRef: this.getPositioner, - onClick: this.handleBackdropClick - }, - onEntered: this.modalDidMount, - onExited: this.modalWillUnmount - }), - glam( - Dialog, - commonProps, - carouselComponent - ), - glam(ScrollLock, null) - ) - ); - } - }]); - return Modal; -}(React.Component); - -Modal.defaultProps = defaultProps$1; - -var _initialiseProps$1 = function _initialiseProps() { - var _this2 = this; - - this.modalDidMount = function () { - document.addEventListener('keyup', _this2.handleKeyUp); - focusStore.storeFocus(); - }; - - this.modalWillUnmount = function () { - document.removeEventListener('keyup', _this2.handleKeyUp); - focusStore.restoreFocus(); - }; - - this.cacheComponents = function (comps) { - _this2.components = defaultModalComponents(comps); - }; - - this.handleFullscreenChange = function (isFullscreen) { - _this2.setState({ isFullscreen: isFullscreen }); - }; - - this.handleKeyUp = function (event) { - var _props2 = _this2.props, - allowFullscreen = _props2.allowFullscreen, - closeOnEsc = _props2.closeOnEsc; - var isFullscreen = _this2.state.isFullscreen; - - var allowClose = event.key === 'Escape' && closeOnEsc && !isFullscreen; - - // toggle fullscreen - if (allowFullscreen && event.key === 'f') { - _this2.toggleFullscreen(); - } - - // close on escape when not fullscreen - if (allowClose) _this2.handleClose(event); - }; - - this.handleBackdropClick = function (event) { - var closeOnBackdropClick = _this2.props.closeOnBackdropClick; - - - if (event.target !== _this2.positioner || !closeOnBackdropClick) return; - - _this2.handleClose(event); - }; - - this.getPositioner = function (ref) { - _this2.positioner = ref; - }; - - this.toggleFullscreen = function () { - _this2.setState(function (state) { - return { isFullscreen: !state.isFullscreen }; - }); - }; - - this.handleClose = function (event) { - var onClose = _this2.props.onClose; - var isFullscreen = _this2.state.isFullscreen; - - // force exit fullscreen mode on close - - if (isFullscreen) { - _this2.toggleFullscreen(); - } - - // call the consumer's onClose func - onClose(event); - }; - - this.getStyles = function (key, props) { - var base = defaultModalStyles[key](props); - base.boxSizing = 'border-box'; - var custom = _this2.props.styles[key]; - return custom ? custom(base, props) : base; - }; -}; - -// ============================== -// Navigation -// ============================== - -/* ARIA label for the next button */ - - -// NOTE: props aren't used by default for some getters but consumers may need -// them, this needs to be reflected in the flow type. - -/* eslint-disable no-unused-vars */ - -function getNextLabel(_ref) { - var currentIndex = _ref.currentIndex, - views = _ref.views; - - return 'Show slide ' + (currentIndex + 2) + ' of ' + views.length; -} - -/* ARIA label for the previous button */ -function getPrevLabel(_ref2) { - var currentIndex = _ref2.currentIndex, - views = _ref2.views; - - return 'Show slide ' + currentIndex + ' of ' + views.length; -} - -/* HTML title for the next button */ -function getNextTitle(props) { - return 'Next (right arrow)'; -} - -/* HTML title for the previous button */ -function getPrevTitle(props) { - return 'Previous (left arrow)'; -} - -// ============================== -// Header -// ============================== - -/* ARIA label for the close button */ -function getCloseLabel(props) { - return 'Close (esc)'; -} -/* ARIA label for the fullscreen button */ -function getFullscreenLabel(_ref3) { - var isFullscreen = _ref3.isFullscreen; - - return isFullscreen ? 'Exit fullscreen (f)' : 'Enter fullscreen (f)'; -} - -// ============================== -// View -// ============================== - -/* alt text for each image in the carousel */ -function getAltText(_ref4) { - var data = _ref4.data, - index = _ref4.index; - - if (data.caption) return data.caption; - - return 'Image ' + (index + 1); -} - -// ============================== -// Exports -// ============================== - -var formatters = { - getAltText: getAltText, - getNextLabel: getNextLabel, - getPrevLabel: getPrevLabel, - getNextTitle: getNextTitle, - getPrevTitle: getPrevTitle, - getCloseLabel: getCloseLabel, - getFullscreenLabel: getFullscreenLabel -}; - -// @jsx glam -var viewPagerStyles = { flex: '1 1 auto', position: 'relative' }; -var frameStyles = { outline: 0 }; - -var defaultProps = { - currentIndex: 0, - formatters: formatters, - hideControlsWhenIdle: 3000, - styles: {}, - trackProps: { - instant: !isTouch(), - swipe: 'touch' - } -}; - -var Carousel$1 = function (_Component) { - inherits(Carousel, _Component); - - function Carousel(props) { - classCallCheck(this, Carousel); - - var _this = possibleConstructorReturn(this, (Carousel.__proto__ || Object.getPrototypeOf(Carousel)).call(this, props)); - - _initialiseProps.call(_this); - - _this.cacheComponents(props.components); - - _this.state = { - currentIndex: props.currentIndex, - interactionIsIdle: isTouch() - }; - return _this; - } // TODO - - - createClass(Carousel, [{ - key: 'componentDidMount', - value: function componentDidMount() { - var _props = this.props, - hideControlsWhenIdle = _props.hideControlsWhenIdle, - modalProps = _props.modalProps; - - var isModal = Boolean(modalProps); - - this.mounted = true; - - if (hideControlsWhenIdle && this.container) { - this.container.addEventListener('mousedown', this.handleMouseActivity); - this.container.addEventListener('mousemove', this.handleMouseActivity); - this.container.addEventListener('touchmove', this.handleMouseActivity); - } - if (isModal) { - this.focusViewFrame(); - } - } - }, { - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(nextProps) { - if (nextProps.components !== this.props.components) { - this.cacheComponents(nextProps.components); - } - - if (this.props.currentIndex !== nextProps.currentIndex) { - this.setState({ currentIndex: nextProps.currentIndex }); - } - } - }, { - key: 'componentWillUnmount', - value: function componentWillUnmount() { - this.mounted = false; - - if (this.props.hideControlsWhenIdle && this.container) { - this.container.removeEventListener('mousedown', this.handleMouseActivity); - this.container.removeEventListener('mousemove', this.handleMouseActivity); - this.container.removeEventListener('touchmove', this.handleMouseActivity); - this.handleMouseActivity.cancel(); - } - } - - // ============================== - // Refs - // ============================== - - // ============================== - // Utilities - // ============================== - - // combine defaultProps with consumer props to maintain expected behaviour - - // combine defaultProps with consumer props to maintain expected behaviour - - - // ============================== - // Handlers - // ============================== - - // ============================== - // Renderers - // ============================== - - }, { - key: 'getCommonProps', - value: function getCommonProps() { - var _props2 = this.props, - frameProps = _props2.frameProps, - trackProps = _props2.trackProps, - modalProps = _props2.modalProps, - views = _props2.views; - - var isModal = Boolean(modalProps); - var isFullscreen = Boolean(modalProps && modalProps.isFullscreen); - var _state = this.state, - currentIndex = _state.currentIndex, - interactionIsIdle = _state.interactionIsIdle; - - var currentView = this.getViewData(); - - return { - carouselProps: this.props, - currentIndex: currentIndex, - currentView: currentView, - formatters: this.props.formatters, - frameProps: frameProps, - getStyles: this.getStyles, - isFullscreen: isFullscreen, - isModal: isModal, - modalProps: modalProps, - interactionIsIdle: interactionIsIdle, - trackProps: trackProps, - views: views - }; - } - }, { - key: 'render', - value: function render() { - var _components = this.components, - Container = _components.Container, - View$$1 = _components.View; - var currentIndex = this.state.currentIndex; - var _props3 = this.props, - frameProps = _props3.frameProps, - views = _props3.views; - - var commonProps = this.commonProps = this.getCommonProps(); - - return glam( - Container, - _extends({}, commonProps, { innerProps: { innerRef: this.getContainer } }), - this.renderHeader(), - glam( - reactViewPager.ViewPager, - { - tag: 'main', - style: viewPagerStyles, - className: className('pager') - }, - glam( - reactViewPager.Frame, - _extends({}, frameProps, { - ref: this.getFrame, - className: className('frame'), - style: frameStyles - }), - glam( - reactViewPager.Track, - _extends({}, this.getTrackProps(this.props), { - currentView: currentIndex, - className: className('track'), - onViewChange: this.handleViewChange, - ref: this.getTrack - }), - views && views.map(function (data, index) { - return glam( - reactViewPager.View, - { className: className('view-wrapper'), key: index }, - glam(View$$1, _extends({}, commonProps, { data: data, index: index })) - ); - }) - ) - ), - this.renderNavigation() - ), - this.renderFooter() - ); - } - }]); - return Carousel; -}(React.Component); - -Carousel$1.defaultProps = defaultProps; - -var _initialiseProps = function _initialiseProps() { - var _this2 = this; - - this.mounted = false; - - this.cacheComponents = function (comps) { - _this2.components = defaultCarouselComponents(comps); - }; - - this.getContainer = function (ref) { - _this2.container = ref; - }; - - this.getFooter = function (ref) { - _this2.footer = ref; - }; - - this.getFrame = function (ref) { - _this2.frame = reactDom.findDOMNode(ref); - }; - - this.getHeader = function (ref) { - _this2.header = ref; - }; - - this.getTrack = function (ref) { - _this2.track = ref; - }; - - this.hasPreviousView = function () { - var trackProps = _this2.props.trackProps; - var currentIndex = _this2.state.currentIndex; - - - return trackProps.infinite || currentIndex !== 0; - }; - - this.hasNextView = function () { - var _props4 = _this2.props, - trackProps = _props4.trackProps, - views = _props4.views; - var currentIndex = _this2.state.currentIndex; - - - return trackProps.infinite || currentIndex !== views.length - 1; - }; - - this.getStyles = function (key, props) { - var base = defaultCarouselStyles[key](props); - base.boxSizing = 'border-box'; - var custom = _this2.props.styles[key]; - return custom ? custom(base, props) : base; - }; - - this.getTrackProps = function (props) { - return _extends({}, defaultProps.trackProps, props.trackProps); - }; - - this.getFormatters = function () { - return _extends({}, defaultProps.formatters, _this2.props.formatters); - }; - - this.getViewData = function () { - var views = _this2.props.views; - var currentIndex = _this2.state.currentIndex; - - - return views[currentIndex]; - }; - - this.focusViewFrame = function () { - if (_this2.frame && document.activeElement !== _this2.frame) { - _this2.frame.focus(); - } - }; - - this.prev = function () { - _this2.track.prev(); - _this2.focusViewFrame(); - }; - - this.next = function () { - _this2.track.next(); - _this2.focusViewFrame(); - }; - - this.handleMouseActivity = rafScheduler(function () { - clearTimeout(_this2.timer); - - if (_this2.state.interactionIsIdle) { - _this2.setState({ interactionIsIdle: false }); - } - - _this2.timer = setTimeout(function () { - if (_this2.mounted) { - _this2.setState({ interactionIsIdle: true }); - } - }, _this2.props.hideControlsWhenIdle); - }); - - this.handleViewChange = function (indicies) { - var trackProps = _this2.props.trackProps; - - // simplify by enforcing number - - var currentIndex = indicies[0]; - - _this2.setState({ currentIndex: currentIndex }); - - // call the consumer's onViewChange fn - if (trackProps && trackProps.onViewChange) { - trackProps.onViewChange(currentIndex); - } - }; - - this.renderNavigation = function () { - var _getFormatters = _this2.getFormatters(), - getNextLabel = _getFormatters.getNextLabel, - getPrevLabel = _getFormatters.getPrevLabel, - getNextTitle = _getFormatters.getNextTitle, - getPrevTitle = _getFormatters.getPrevTitle; - - var _components2 = _this2.components, - Navigation = _components2.Navigation, - NavigationPrev = _components2.NavigationPrev, - NavigationNext = _components2.NavigationNext; - var commonProps = _this2.commonProps; - - - var showPrev = _this2.hasPreviousView(); - var showNext = _this2.hasNextView(); - var showNav = (showPrev || showNext) && Navigation; - - return showNav ? glam( - Navigation, - commonProps, - showPrev && glam(NavigationPrev, _extends({}, commonProps, { - align: 'left', - innerProps: { - 'aria-label': getPrevLabel(commonProps), - onClick: _this2.prev, - title: getPrevTitle(commonProps) - } - })), - showNext && glam(NavigationNext, _extends({}, commonProps, { - align: 'right', - innerProps: { - 'aria-label': getNextLabel(commonProps), - onClick: _this2.next, - title: getNextTitle(commonProps) - } - })) - ) : null; - }; - - this.renderFooter = function () { - var _components3 = _this2.components, - Footer = _components3.Footer, - FooterCaption = _components3.FooterCaption, - FooterCount = _components3.FooterCount; - var commonProps = _this2.commonProps; - - - return Footer ? glam(Footer, _extends({}, commonProps, { - components: { - Caption: FooterCaption, - Count: FooterCount - }, - innerProps: { innerRef: _this2.getFooter } - })) : null; - }; - - this.renderHeader = function () { - var _components4 = _this2.components, - Header = _components4.Header, - HeaderClose = _components4.HeaderClose, - HeaderFullscreen = _components4.HeaderFullscreen; - - var _getFormatters2 = _this2.getFormatters(), - getCloseLabel = _getFormatters2.getCloseLabel, - getFullscreenLabel = _getFormatters2.getFullscreenLabel; - - var commonProps = _this2.commonProps; - - - return Header ? glam(Header, _extends({}, commonProps, { - getCloseLabel: getCloseLabel, - getFullscreenLabel: getFullscreenLabel, - components: { - CloseButton: HeaderClose, - FullscreenButton: HeaderFullscreen - }, - data: _this2.getViewData(), - innerProps: { innerRef: _this2.getHeader } - })) : null; - }; -}; - -var FirstChild = function FirstChild(_ref) { - var children = _ref.children; - return React.Children.toArray(children)[0] || null; -}; - -var ModalGateway = function (_Component) { - inherits(ModalGateway, _Component); - - function ModalGateway() { - classCallCheck(this, ModalGateway); - return possibleConstructorReturn(this, (ModalGateway.__proto__ || Object.getPrototypeOf(ModalGateway)).apply(this, arguments)); - } - - createClass(ModalGateway, [{ - key: 'render', - value: function render() { - if (typeof window === 'undefined') return null; - var _props = this.props, - target = _props.target, - children = _props.children; - - return reactDom.createPortal(React__default.createElement(reactTransitionGroup.TransitionGroup, { component: FirstChild, children: children }), target); - } - }]); - return ModalGateway; -}(React.Component); - -ModalGateway.defaultProps = { - target: typeof window !== 'undefined' ? document.body : null -}; - -// This file exists as an entry point for bundling our umd builds. -// Both in rollup and in webpack, umd builds built from es6 modules are not -// compatible with mixed imports (which exist in index.js) -// This file does away with named imports in favor of a single export default. - -Carousel$1.ModalGateway = ModalGateway; -Carousel$1.Modal = Modal; -Carousel$1.carouselComponents = carouselComponents; -Carousel$1.modalComponents = modalComponents; - -return Carousel$1; - -}))); diff --git a/dist/react-images.min.js b/dist/react-images.min.js deleted file mode 100644 index 5160219a..00000000 --- a/dist/react-images.min.js +++ /dev/null @@ -1 +0,0 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-dom"),require("glam"),require("raf-schd"),require("react-view-pager"),require("react-full-screen"),require("react-scrolllock"),require("a11y-focus-store"),require("react-transition-group")):"function"==typeof define&&define.amd?define(["react","react-dom","glam","raf-schd","react-view-pager","react-full-screen","react-scrolllock","a11y-focus-store","react-transition-group"],t):e.Images=t(e.React,e.ReactDOM,e.glam,e.rafScheduler,e.PageView,e.Fullscreen,e.ScrollLock,e.focusStore,e.Transition)}(this,function(e,t,n,r,o,i,s,a,l){"use strict";var c="default"in e?e.default:e;n=n&&n.hasOwnProperty("default")?n.default:n,r=r&&r.hasOwnProperty("default")?r.default:r,i=i&&i.hasOwnProperty("default")?i.default:i,s=s&&s.hasOwnProperty("default")?s.default:s,a=a&&a.hasOwnProperty("default")?a.default:a;var u=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},p=function(){function e(e,t){for(var n=0;n=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},g=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},v=function(e){var t=e.css,r=e.innerRef,o=e.tag,i=m(e,["css","innerRef","tag"]);return n(o,f({ref:r,css:f({boxSizing:"border-box"},t)},i))},y=function(e){return n(v,f({tag:"button"},e))},b=function(e){return n(v,f({tag:"div"},e))},x=function(e){return n(v,f({tag:"img"},e))},P=function(e){return n(v,f({tag:"nav"},e))},w=function(e){return n(v,f({tag:"span"},e))},C="react-images";function F(e,t){var n=Array.isArray(e)?e:[e];if(t&&"string"==typeof e)for(var r in t)t.hasOwnProperty(r)&&t[r]&&n.push(e+"--"+r);return n.map(function(e){return C+"__"+e}).join(" ")}function k(){try{return document.createEvent("TouchEvent"),!0}catch(e){return!1}}var I=function(e){var t=e.size,r=m(e,["size"]);return n("svg",f({role:"presentation",viewBox:"0 0 24 24",css:{display:"inline-block",fill:"currentColor",height:t,stroke:"currentColor",strokeWidth:0,width:t}},r))},M=function(e){var t=e.size,r=void 0===t?32:t,o=m(e,["size"]);return n(I,f({size:r},o),n("path",{d:"M15.422 16.078l-1.406 1.406-6-6 6-6 1.406 1.406-4.594 4.594z"}))},E=function(e){var t=e.size,r=void 0===t?32:t,o=m(e,["size"]);return n(I,f({size:r},o),n("path",{d:"M9.984 6l6 6-6 6-1.406-1.406 4.594-4.594-4.594-4.594z"}))},z=function(e){var t=e.size,r=void 0===t?32:t,o=m(e,["size"]);return n(I,f({size:r},o),n("path",{d:"M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z"}))},S=function(e){var t=e.size,r=void 0===t?32:t,o=m(e,["size"]);return n(I,f({size:r},o),n("path",{d:"M14.016 5.016h4.969v4.969h-1.969v-3h-3v-1.969zM17.016 17.016v-3h1.969v4.969h-4.969v-1.969h3zM5.016 9.984v-4.969h4.969v1.969h-3v3h-1.969zM6.984 14.016v3h3v1.969h-4.969v-4.969h1.969z"}))},N=function(e){var t=e.size,r=void 0===t?32:t,o=m(e,["size"]);return n(I,f({size:r},o),n("path",{d:"M15.984 8.016h3v1.969h-4.969v-4.969h1.969v3zM14.016 18.984v-4.969h4.969v1.969h-3v3h-1.969zM8.016 8.016v-3h1.969v4.969h-4.969v-1.969h3zM5.016 15.984v-1.969h4.969v4.969h-1.969v-3h-3z"}))},O=function(){return{alignItems:"center",background:0,border:0,color:"rgba(255, 255, 255, 0.75)",cursor:"pointer",display:"inline-flex ",height:44,justifyContent:"center",outline:0,padding:0,position:"relative",width:44,"&:hover":{color:"white"}}},_=function(e){var t,n=e.align;return d(t={alignItems:"center",background:"rgba(255, 255, 255, 0.2)",border:0,borderRadius:"50%",color:"white",cursor:"pointer",display:"flex ",fontSize:"inherit",height:50,justifyContent:"center",marginTop:-25,outline:0,position:"absolute",top:"50%",transition:"background-color 200ms",width:50},n,20),d(t,"&:hover",{background:"rgba(255, 255, 255, 0.3)"}),d(t,"&:active",{background:"rgba(255, 255, 255, 0.2)"}),t};var V={Container:function(e){var t=e.children,r=e.getStyles,o=e.isFullscreen,i=e.isModal,s=e.innerProps;return n(b,f({css:r("container",e),className:F("container",{isFullscreen:o,isModal:i})},s),t)},Footer:function(e){var t=e.components,r=e.getStyles,o=e.innerProps,i=e.isFullscreen,s=e.isModal,a=s?{background:"linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.33))"}:null,l={isFullscreen:i,isModal:s},c={container:F("footer",l),caption:F("footer__caption",l),count:F("footer__count",l)},u={container:r("footer",e),caption:r("footerCaption",e),count:r("footerCount",e)},p=t.Caption,d=t.Count;return n(b,f({css:u.container,className:c.container,style:a},o),n(p,e),n(d,e))},FooterCaption:function(e){var t=e.currentView,r=e.getStyles,o=e.isFullscreen,i=e.isModal,s=t.caption,a={isFullscreen:o,isModal:i};return n(w,{css:r("footerCaption",e),className:F("footer__caption",a)},s)},FooterCount:function(e){var t=e.currentIndex,r=e.getStyles,o={isFullscreen:e.isFullscreen,isModal:e.isModal},i=t+1,s=e.views.length;return i&&s?n(w,{css:r("footerCount",e),className:F("footer__count",o)},i," of ",s):null},Header:function(e){var t=e.components,r=e.getStyles,o=e.getCloseLabel,i=e.getFullscreenLabel,s=e.innerProps,a=e.isModal,l=e.modalProps;if(!a)return null;var c=l.allowFullscreen,u=l.isFullscreen,p=l.onClose,d=l.toggleFullscreen,h=u?N:S,m=t.CloseButton,g=t.FullscreenButton,v={isFullscreen:u,isModal:a};return n(b,f({css:r("header",e),className:F("header",v),style:{background:"linear-gradient(rgba(0,0,0,0.33), rgba(0,0,0,0))"}},s),n("span",null),n("span",null,c?n(g,{getStyles:r,innerProps:{onClick:d,title:i(v)}},n(h,{size:32})):null,n(m,{getStyles:r,innerProps:{onClick:p,title:o(v)}},n(z,{size:32}))))},HeaderClose:function(e){var t=e.children,r=e.getStyles,o=e.innerProps;return n(y,f({css:r("headerClose",e),className:F(["header_button","header_button--close"]),type:"button"},o),t)},HeaderFullscreen:function(e){var t=e.children,r=e.getStyles,o=e.innerProps;return n(y,f({css:r("headerFullscreen",e),className:F(["header_button","header_button--fullscreen"]),type:"button"},o),t)},Navigation:function(e){var t=e.children,r=e.getStyles,o=e.isFullscreen,i=e.isModal;return k()?null:n(P,{css:r("navigation",e),className:F("navigation",{isFullscreen:o,isModal:i})},t)},NavigationPrev:function(e){var t=e.children,r=void 0===t?n(M,{size:48}):t,o=e.getStyles,i=e.innerProps;return n(y,f({type:"button",css:o("navigationPrev",e)},i),r)},NavigationNext:function(e){var t=e.children,r=void 0===t?n(E,{size:48}):t,o=e.getStyles,i=e.innerProps;return n(y,f({type:"button",css:o("navigationNext",e)},i),r)},View:function(e){var t=e.data,r=e.formatters,o=e.getStyles,i=e.index,s=e.isFullscreen,a=e.isModal,l={alt:r.getAltText({data:t,index:i}),src:function(e){var t=e.data,n=e.isFullscreen,r=t.source,o=void 0===r?t.src:r;return"string"==typeof o?o:n?o.fullscreen:o.regular}({data:t,isFullscreen:s})};return n(b,{css:o("view",e),className:F("view",{isFullscreen:s,isModal:a})},n(x,f({},l,{className:F("view-image",{isFullscreen:s,isModal:a}),css:{height:"auto",maxHeight:"100vh",maxWidth:"100%",userSelect:"none"}})))}},L={Blanket:function(e){var t=e.getStyles,r=e.innerProps,o=e.isFullscreen;return n(b,f({css:t("blanket",e),className:F("blanket",{isFullscreen:o})},r))},Positioner:function(e){var t=e.children,r=e.getStyles,o=e.innerProps,i=e.isFullscreen;return n(b,f({css:r("positioner",e),className:F("positioner",{isFullscreen:i})},o),t)},Dialog:function(e){var t=e.children,r=e.getStyles,o=e.innerProps,i=e.isFullscreen;return n(b,f({css:r("dialog",e),className:F("dialog",{isFullscreen:i})},o),t)}},T={container:function(e){return{backgroundColor:e.isFullscreen?"black":null,display:"flex ",flexDirection:"column",height:"100%"}},footer:function(e){var t=e.isModal,n=e.interactionIsIdle;return d({alignItems:"top",bottom:t?0:null,color:t?"rgba(255, 255, 255, 0.9)":"#666",display:"flex ",flex:"0 0 auto",fontSize:13,justifyContent:"space-between",left:t?0:null,opacity:n&&t?0:1,padding:t?"30px 20px 20px":"10px 0",position:t?"absolute":null,right:t?0:null,transform:t?"translateY("+(n?10:0)+"px)":null,transition:"opacity 300ms, transform 300ms",zIndex:t?1:null},"@media (max-width: 769px)",{padding:t?"20px 15px 15px":"5px 0"})},footerCaption:function(){return{}},footerCount:function(){return{flexShrink:0,marginLeft:"1em"}},header:function(e){var t=e.interactionIsIdle;return{alignItems:"center",display:"flex ",flex:"0 0 auto",justifyContent:"space-between",opacity:t?0:1,padding:10,paddingBottom:20,position:"absolute",transform:"translateY("+(t?-10:0)+"px)",transition:"opacity 300ms, transform 300ms",top:0,left:0,right:0,zIndex:1}},headerClose:O,headerFullscreen:O,navigation:function(e){return{display:"flex ",alignItems:"center",justifyContent:"space-between",opacity:e.interactionIsIdle?0:1,transition:"opacity 300ms"}},navigationPrev:_,navigationNext:_,view:function(){return{lineHeight:0,position:"relative",textAlign:"center"}}},j={blanket:function(e){return{backgroundColor:e.isFullscreen?"black":"rgba(0, 0, 0, 0.8)",bottom:0,left:0,position:"fixed",right:0,top:0,zIndex:1}},dialog:function(){return{}},positioner:function(){return{alignItems:"center",bottom:0,display:"flex ",justifyContent:"center",left:0,position:"fixed",right:0,top:0,zIndex:1}}},B="cubic-bezier(0.23, 1, 0.32, 1)",A=function(e){var t=e.component,n=e.onEntered,r=e.onExited,o=e.in,i=e.innerProps,s=m(e,["component","onEntered","onExited","in","innerProps"]),a={transition:"opacity 200ms",opacity:0},u={entering:{opacity:0},entered:{opacity:1},exiting:{opacity:0,transitionDuration:"500ms"}};return c.createElement(l.Transition,{appear:!0,mountOnEnter:!0,unmountOnExit:!0,onEntered:n,onExited:r,key:"fade",in:o,timeout:{enter:300,exit:500}},function(e){var n=f({},i,{style:f({},a,u[e])});return"exited"===e?null:c.createElement(t,f({innerProps:n},s))})},D=function(e){var t=e.component,n=e.onEntered,r=e.onExited,o=e.in,i=e.innerProps,s=m(e,["component","onEntered","onExited","in","innerProps"]),a={transition:"transform 300ms "+B+", opacity 300ms "+B,transform:"translate3d(0, 0, 0)"},u={entering:{opacity:0,transform:"translate3d(0, 40px, 0) scale(0.9)"},entered:{opacity:1,transform:"translate3d(0, 0, 0)"},exiting:{opacity:0,transform:"translate3d(0, 40px, 0) scale(0.9)",transition:"transform 500ms "+B+", opacity 500ms "+B}};return c.createElement(l.Transition,{appear:!0,in:o,mountOnEnter:!0,onEntered:n,onExited:r,timeout:{enter:300,exit:500},unmountOnExit:!0},function(e){if("exited"===e)return null;var n=f({},i,{style:f({},a,u[e])});return c.createElement(t,f({innerProps:n},s))})},H={allowFullscreen:!k(),closeOnBackdropClick:!0,closeOnEsc:!0,styles:{}},R=function(t){function r(e){u(this,r);var t=g(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e));return W.call(t),t.cacheComponents(e.components),t.state={isFullscreen:!1},t}return h(r,t),p(r,[{key:"componentWillReceiveProps",value:function(e){e.components!==this.props.components&&this.cacheComponents(e.components)}},{key:"getCommonProps",value:function(){var e=this.state.isFullscreen;return{getStyles:this.getStyles,isFullscreen:e,modalProps:this.props}}},{key:"render",value:function(){var t=this.components,r=t.Blanket,o=t.Positioner,a=t.Dialog,l=this.props,c=l.allowFullscreen,u=l.children,p=this.state.isFullscreen,d=this.commonProps=this.getCommonProps(),h=this.props.in,m={allowFullscreen:c,isFullscreen:p,onClose:this.handleClose,toggleFullscreen:this.toggleFullscreen},g=e.cloneElement(u,{isModal:!0,modalProps:m});return n(i,{enabled:p,onChange:this.handleFullscreenChange},n(A,f({},d,{component:r,in:h})),n(D,f({},d,{component:o,in:h,innerProps:{innerRef:this.getPositioner,onClick:this.handleBackdropClick},onEntered:this.modalDidMount,onExited:this.modalWillUnmount}),n(a,d,g),n(s,null)))}}]),r}(e.Component);R.defaultProps=H;var W=function(){var e=this;this.modalDidMount=function(){document.addEventListener("keyup",e.handleKeyUp),a.storeFocus()},this.modalWillUnmount=function(){document.removeEventListener("keyup",e.handleKeyUp),a.restoreFocus()},this.cacheComponents=function(t){e.components=f({},L,t)},this.handleFullscreenChange=function(t){e.setState({isFullscreen:t})},this.handleKeyUp=function(t){var n=e.props,r=n.allowFullscreen,o=n.closeOnEsc,i=e.state.isFullscreen,s="Escape"===t.key&&o&&!i;r&&"f"===t.key&&e.toggleFullscreen(),s&&e.handleClose(t)},this.handleBackdropClick=function(t){var n=e.props.closeOnBackdropClick;t.target===e.positioner&&n&&e.handleClose(t)},this.getPositioner=function(t){e.positioner=t},this.toggleFullscreen=function(){e.setState(function(e){return{isFullscreen:!e.isFullscreen}})},this.handleClose=function(t){var n=e.props.onClose;e.state.isFullscreen&&e.toggleFullscreen(),n(t)},this.getStyles=function(t,n){var r=j[t](n);r.boxSizing="border-box";var o=e.props.styles[t];return o?o(r,n):r}};var q={flex:"1 1 auto",position:"relative"},U={outline:0},K={currentIndex:0,formatters:{getAltText:function(e){var t=e.data,n=e.index;return t.caption?t.caption:"Image "+(n+1)},getNextLabel:function(e){return"Show slide "+(e.currentIndex+2)+" of "+e.views.length},getPrevLabel:function(e){return"Show slide "+e.currentIndex+" of "+e.views.length},getNextTitle:function(e){return"Next (right arrow)"},getPrevTitle:function(e){return"Previous (left arrow)"},getCloseLabel:function(e){return"Close (esc)"},getFullscreenLabel:function(e){return e.isFullscreen?"Exit fullscreen (f)":"Enter fullscreen (f)"}},hideControlsWhenIdle:3e3,styles:{},trackProps:{instant:!k(),swipe:"touch"}},G=function(e){function t(e){u(this,t);var n=g(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return Y.call(n),n.cacheComponents(e.components),n.state={currentIndex:e.currentIndex,interactionIsIdle:k()},n}return h(t,e),p(t,[{key:"componentDidMount",value:function(){var e=this.props,t=e.hideControlsWhenIdle,n=e.modalProps,r=Boolean(n);this.mounted=!0,t&&this.container&&(this.container.addEventListener("mousedown",this.handleMouseActivity),this.container.addEventListener("mousemove",this.handleMouseActivity),this.container.addEventListener("touchmove",this.handleMouseActivity)),r&&this.focusViewFrame()}},{key:"componentWillReceiveProps",value:function(e){e.components!==this.props.components&&this.cacheComponents(e.components),this.props.currentIndex!==e.currentIndex&&this.setState({currentIndex:e.currentIndex})}},{key:"componentWillUnmount",value:function(){this.mounted=!1,this.props.hideControlsWhenIdle&&this.container&&(this.container.removeEventListener("mousedown",this.handleMouseActivity),this.container.removeEventListener("mousemove",this.handleMouseActivity),this.container.removeEventListener("touchmove",this.handleMouseActivity),this.handleMouseActivity.cancel())}},{key:"getCommonProps",value:function(){var e=this.props,t=e.frameProps,n=e.trackProps,r=e.modalProps,o=e.views,i=Boolean(r),s=Boolean(r&&r.isFullscreen),a=this.state,l=a.currentIndex,c=a.interactionIsIdle,u=this.getViewData();return{carouselProps:this.props,currentIndex:l,currentView:u,formatters:this.props.formatters,frameProps:t,getStyles:this.getStyles,isFullscreen:s,isModal:i,modalProps:r,interactionIsIdle:c,trackProps:n,views:o}}},{key:"render",value:function(){var e=this.components,t=e.Container,r=e.View,i=this.state.currentIndex,s=this.props,a=s.frameProps,l=s.views,c=this.commonProps=this.getCommonProps();return n(t,f({},c,{innerProps:{innerRef:this.getContainer}}),this.renderHeader(),n(o.ViewPager,{tag:"main",style:q,className:F("pager")},n(o.Frame,f({},a,{ref:this.getFrame,className:F("frame"),style:U}),n(o.Track,f({},this.getTrackProps(this.props),{currentView:i,className:F("track"),onViewChange:this.handleViewChange,ref:this.getTrack}),l&&l.map(function(e,t){return n(o.View,{className:F("view-wrapper"),key:t},n(r,f({},c,{data:e,index:t})))}))),this.renderNavigation()),this.renderFooter())}}]),t}(e.Component);G.defaultProps=K;var Y=function(){var e=this;this.mounted=!1,this.cacheComponents=function(t){e.components=f({},V,t)},this.getContainer=function(t){e.container=t},this.getFooter=function(t){e.footer=t},this.getFrame=function(n){e.frame=t.findDOMNode(n)},this.getHeader=function(t){e.header=t},this.getTrack=function(t){e.track=t},this.hasPreviousView=function(){var t=e.props.trackProps,n=e.state.currentIndex;return t.infinite||0!==n},this.hasNextView=function(){var t=e.props,n=t.trackProps,r=t.views,o=e.state.currentIndex;return n.infinite||o!==r.length-1},this.getStyles=function(t,n){var r=T[t](n);r.boxSizing="border-box";var o=e.props.styles[t];return o?o(r,n):r},this.getTrackProps=function(e){return f({},K.trackProps,e.trackProps)},this.getFormatters=function(){return f({},K.formatters,e.props.formatters)},this.getViewData=function(){return e.props.views[e.state.currentIndex]},this.focusViewFrame=function(){e.frame&&document.activeElement!==e.frame&&e.frame.focus()},this.prev=function(){e.track.prev(),e.focusViewFrame()},this.next=function(){e.track.next(),e.focusViewFrame()},this.handleMouseActivity=r(function(){clearTimeout(e.timer),e.state.interactionIsIdle&&e.setState({interactionIsIdle:!1}),e.timer=setTimeout(function(){e.mounted&&e.setState({interactionIsIdle:!0})},e.props.hideControlsWhenIdle)}),this.handleViewChange=function(t){var n=e.props.trackProps,r=t[0];e.setState({currentIndex:r}),n&&n.onViewChange&&n.onViewChange(r)},this.renderNavigation=function(){var t=e.getFormatters(),r=t.getNextLabel,o=t.getPrevLabel,i=t.getNextTitle,s=t.getPrevTitle,a=e.components,l=a.Navigation,c=a.NavigationPrev,u=a.NavigationNext,p=e.commonProps,d=e.hasPreviousView(),h=e.hasNextView();return(d||h)&&l?n(l,p,d&&n(c,f({},p,{align:"left",innerProps:{"aria-label":o(p),onClick:e.prev,title:s(p)}})),h&&n(u,f({},p,{align:"right",innerProps:{"aria-label":r(p),onClick:e.next,title:i(p)}}))):null},this.renderFooter=function(){var t=e.components,r=t.Footer,o=t.FooterCaption,i=t.FooterCount,s=e.commonProps;return r?n(r,f({},s,{components:{Caption:o,Count:i},innerProps:{innerRef:e.getFooter}})):null},this.renderHeader=function(){var t=e.components,r=t.Header,o=t.HeaderClose,i=t.HeaderFullscreen,s=e.getFormatters(),a=s.getCloseLabel,l=s.getFullscreenLabel,c=e.commonProps;return r?n(r,f({},c,{getCloseLabel:a,getFullscreenLabel:l,components:{CloseButton:o,FullscreenButton:i},data:e.getViewData(),innerProps:{innerRef:e.getHeader}})):null}},J=function(t){var n=t.children;return e.Children.toArray(n)[0]||null},Q=function(e){function n(){return u(this,n),g(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return h(n,e),p(n,[{key:"render",value:function(){if("undefined"==typeof window)return null;var e=this.props,n=e.target,r=e.children;return t.createPortal(c.createElement(l.TransitionGroup,{component:J,children:r}),n)}}]),n}(e.Component);return Q.defaultProps={target:"undefined"!=typeof window?document.body:null},G.ModalGateway=Q,G.Modal=R,G.carouselComponents=V,G.modalComponents=L,G}); diff --git a/lib/components/Header.js b/lib/components/Header.js deleted file mode 100644 index a69930fb..00000000 --- a/lib/components/Header.js +++ /dev/null @@ -1,173 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.HeaderClose = exports.headerCloseCSS = exports.HeaderFullscreen = exports.headerFullscreenCSS = exports.headerButtonCSS = exports.headerCSS = undefined; - -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; }; -// @jsx glam - - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _glam = require('glam'); - -var _glam2 = _interopRequireDefault(_glam); - -var _primitives = require('../primitives'); - -var _utils = require('../utils'); - -var _svg = require('./svg'); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var headerCSS = exports.headerCSS = function headerCSS(_ref) { - var interactionIsIdle = _ref.interactionIsIdle; - return { - alignItems: 'center', - display: 'flex ', - flex: '0 0 auto', - justifyContent: 'space-between', - opacity: interactionIsIdle ? 0 : 1, - padding: 10, - paddingBottom: 20, - position: 'absolute', - transform: 'translateY(' + (interactionIsIdle ? -10 : 0) + 'px)', - transition: 'opacity 300ms, transform 300ms', - top: 0, - left: 0, - right: 0, - zIndex: 1 - }; -}; - -var Header = function Header(props) { - var components = props.components, - getStyles = props.getStyles, - getCloseLabel = props.getCloseLabel, - getFullscreenLabel = props.getFullscreenLabel, - innerProps = props.innerProps, - isModal = props.isModal, - modalProps = props.modalProps; - - - if (!isModal) return null; - - var allowFullscreen = modalProps.allowFullscreen, - isFullscreen = modalProps.isFullscreen, - onClose = modalProps.onClose, - toggleFullscreen = modalProps.toggleFullscreen; - - var FsIcon = isFullscreen ? _svg.FullscreenExit : _svg.FullscreenEnter; - var CloseButton = components.CloseButton, - FullscreenButton = components.FullscreenButton; - - var state = { isFullscreen: isFullscreen, isModal: isModal }; - - return (0, _glam2.default)( - _primitives.Div, - _extends({ - css: getStyles('header', props), - className: (0, _utils.className)('header', state) - // TODO glam prefixer fails on gradients - // https://github.com/threepointone/glam/issues/35 - , style: { - background: 'linear-gradient(rgba(0,0,0,0.33), rgba(0,0,0,0))' - } - }, innerProps), - (0, _glam2.default)('span', null), - (0, _glam2.default)( - 'span', - null, - allowFullscreen ? (0, _glam2.default)( - FullscreenButton, - { - getStyles: getStyles, - innerProps: { - onClick: toggleFullscreen, - title: getFullscreenLabel(state) - } - }, - (0, _glam2.default)(FsIcon, { size: 32 }) - ) : null, - (0, _glam2.default)( - CloseButton, - { - getStyles: getStyles, - innerProps: { - onClick: onClose, - title: getCloseLabel(state) - } - }, - (0, _glam2.default)(_svg.Close, { size: 32 }) - ) - ) - ); -}; - -// ============================== -// Header Buttons -// ============================== - -var headerButtonCSS = exports.headerButtonCSS = function headerButtonCSS() { - return { - alignItems: 'center', - background: 0, - border: 0, - color: 'rgba(255, 255, 255, 0.75)', - cursor: 'pointer', - display: 'inline-flex ', - height: 44, - justifyContent: 'center', - outline: 0, - padding: 0, - position: 'relative', - width: 44, - - '&:hover': { - color: 'white' - } - }; -}; - -var headerFullscreenCSS = exports.headerFullscreenCSS = headerButtonCSS; -var HeaderFullscreen = exports.HeaderFullscreen = function HeaderFullscreen(props) { - var children = props.children, - getStyles = props.getStyles, - innerProps = props.innerProps; - - - return (0, _glam2.default)( - _primitives.Button, - _extends({ - css: getStyles('headerFullscreen', props), - className: (0, _utils.className)(['header_button', 'header_button--fullscreen']), - type: 'button' - }, innerProps), - children - ); -}; - -var headerCloseCSS = exports.headerCloseCSS = headerButtonCSS; -var HeaderClose = exports.HeaderClose = function HeaderClose(props) { - var children = props.children, - getStyles = props.getStyles, - innerProps = props.innerProps; - - - return (0, _glam2.default)( - _primitives.Button, - _extends({ - css: getStyles('headerClose', props), - className: (0, _utils.className)(['header_button', 'header_button--close']), - type: 'button' - }, innerProps), - children - ); -}; - -exports.default = Header; \ No newline at end of file diff --git a/lib/components/Portal.js b/lib/components/Portal.js deleted file mode 100644 index 7ff6c140..00000000 --- a/lib/components/Portal.js +++ /dev/null @@ -1,104 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -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; }; }(); - -var _propTypes = require('prop-types'); - -var _propTypes2 = _interopRequireDefault(_propTypes); - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _reactTransitionGroup = require('react-transition-group'); - -var _reactDom = require('react-dom'); - -var _PassContext = require('./PassContext'); - -var _PassContext2 = _interopRequireDefault(_PassContext); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } - -var Portal = function (_Component) { - _inherits(Portal, _Component); - - function Portal() { - _classCallCheck(this, Portal); - - var _this = _possibleConstructorReturn(this, (Portal.__proto__ || Object.getPrototypeOf(Portal)).call(this)); - - _this.portalElement = null; - return _this; - } - - _createClass(Portal, [{ - key: 'componentDidMount', - value: function componentDidMount() { - var p = document.createElement('div'); - document.body.appendChild(p); - this.portalElement = p; - this.componentDidUpdate(); - } - }, { - key: 'componentDidUpdate', - value: function componentDidUpdate() { - // Animate fade on mount/unmount - var duration = 200; - var styles = '\n\t\t\t\t.fade-enter { opacity: 0.01; }\n\t\t\t\t.fade-enter.fade-enter-active { opacity: 1; transition: opacity ' + duration + 'ms; }\n\t\t\t\t.fade-leave { opacity: 1; }\n\t\t\t\t.fade-leave.fade-leave-active { opacity: 0.01; transition: opacity ' + duration + 'ms; }\n\t\t'; - - (0, _reactDom.render)(_react2.default.createElement( - _PassContext2.default, - { context: this.context }, - _react2.default.createElement( - 'div', - null, - _react2.default.createElement( - 'style', - null, - styles - ), - _react2.default.createElement( - _reactTransitionGroup.TransitionGroup, - this.props, - _react2.default.createElement( - _reactTransitionGroup.CSSTransition, - { timeout: { enter: duration, exit: duration }, classNames: 'fade' }, - this.props.children - ) - ) - ) - ), this.portalElement); - } - }, { - key: 'componentWillUnmount', - value: function componentWillUnmount() { - (0, _reactDom.unmountComponentAtNode)(this.portalElement); - document.body.removeChild(this.portalElement); - } - }, { - key: 'render', - value: function render() { - return null; - } - }]); - - return Portal; -}(_react.Component); - -exports.default = Portal; - - -Portal.contextTypes = { - theme: _propTypes2.default.object.isRequired -}; \ No newline at end of file diff --git a/lib/components/Spinner.js b/lib/components/Spinner.js deleted file mode 100644 index 27ea8567..00000000 --- a/lib/components/Spinner.js +++ /dev/null @@ -1,74 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _propTypes = require('prop-types'); - -var _propTypes2 = _interopRequireDefault(_propTypes); - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _noImportant = require('aphrodite/no-important'); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var Spinner = function Spinner(props) { - var classes = _noImportant.StyleSheet.create(styles(props)); - - return _react2.default.createElement( - 'div', - { className: (0, _noImportant.css)(classes.spinner) }, - _react2.default.createElement('div', { className: (0, _noImportant.css)(classes.ripple) }) - ); -}; - -Spinner.propTypes = { - color: _propTypes2.default.string, - size: _propTypes2.default.number -}; - -var rippleKeyframes = { - '0%': { - top: '50%', - left: '50%', - width: 0, - height: 0, - opacity: 1 - }, - '100%': { - top: 0, - left: 0, - width: '100%', - height: '100%', - opacity: 0 - } -}; - -var styles = function styles(_ref) { - var color = _ref.color, - size = _ref.size; - return { - spinner: { - display: 'inline-block', - position: 'relative', - width: size, - height: size - }, - ripple: { - position: 'absolute', - border: '4px solid ' + color, - opacity: 1, - borderRadius: '50%', - animationName: rippleKeyframes, - animationDuration: '1s', - animationTimingFunction: 'cubic-bezier(0, 0.2, 0.8, 1)', - animationIterationCount: 'infinite' - } - }; -}; - -exports.default = Spinner; \ No newline at end of file