1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends2 = require('babel-runtime/helpers/extends');
|
8 |
|
9 | var _extends3 = _interopRequireDefault(_extends2);
|
10 |
|
11 | var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
|
12 |
|
13 | var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
|
14 |
|
15 | var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n display: flex;\n flex-direction: ', ';\n align-items: center;\n justify-content: center;\n'], ['\n display: flex;\n flex-direction: ', ';\n align-items: center;\n justify-content: center;\n']),
|
16 | _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n position: relative;\n display: flex;\n justify-content: center;\n'], ['\n position: relative;\n display: flex;\n justify-content: center;\n']),
|
17 | _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n background-position: center;\n background-repeat: no-repeat;\n background-size: auto 8rem;\n min-width: 5rem;\n min-height: 8rem;\n'], ['\n background-position: center;\n background-repeat: no-repeat;\n background-size: auto 8rem;\n min-width: 5rem;\n min-height: 8rem;\n']),
|
18 | _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n position: relative;\n display: flex;\n flex-direction: ', ';\n'], ['\n position: relative;\n display: flex;\n flex-direction: ', ';\n']),
|
19 | _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n width: ', ';\n overflow-x: hidden;\n overflow-y: hidden;\n display: flex;\n align-items: center;\n'], ['\n width: ', ';\n overflow-x: hidden;\n overflow-y: hidden;\n display: flex;\n align-items: center;\n']),
|
20 | _templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n margin-right: ', ';\n'], ['\n margin-right: ', ';\n']);
|
21 |
|
22 | var _react = require('react');
|
23 |
|
24 | var _react2 = _interopRequireDefault(_react);
|
25 |
|
26 | var _Button = require('./Button');
|
27 |
|
28 | var _Button2 = _interopRequireDefault(_Button);
|
29 |
|
30 | var _styledComponents = require('styled-components');
|
31 |
|
32 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
33 |
|
34 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
35 |
|
36 | var NEXT = 'NEXT';
|
37 | var PREV = 'PREV';
|
38 | var GOTO = 'GOTO';
|
39 |
|
40 | var CONTAINER = _styledComponents2.default.div.attrs(function (_ref) {
|
41 | var style = _ref.style;
|
42 | return {
|
43 | style: style
|
44 | };
|
45 | })(_templateObject, function (_ref2) {
|
46 | var layout = _ref2.layout;
|
47 | return layout === 'vertical' ? 'row' : 'column';
|
48 | });
|
49 |
|
50 | var MAIN_FRAME = _styledComponents2.default.div.attrs(function (_) {
|
51 | return {
|
52 | className: 'imageviewer__mainframe'
|
53 | };
|
54 | })(_templateObject2);
|
55 |
|
56 | var PREVIEW_BUTTON = (0, _styledComponents2.default)(_Button2.default).attrs(function (_) {
|
57 | return {
|
58 | className: 'imageviewer__previewbutton'
|
59 | };
|
60 | })(_templateObject3);
|
61 |
|
62 | var PREVIEW_FRAME = _styledComponents2.default.div.attrs(function (_) {
|
63 | return {
|
64 | className: 'imageviewer__previewframe'
|
65 | };
|
66 | })(_templateObject4, function (_ref3) {
|
67 | var layout = _ref3.layout;
|
68 | return layout === 'vertical' ? 'column' : 'row';
|
69 | });
|
70 |
|
71 | var PREVIEW_ACCORDION = _styledComponents2.default.div.attrs(function (_) {
|
72 | return {
|
73 | className: 'imageviewer__previewaccordion'
|
74 | };
|
75 | })(function (_ref4) {
|
76 | var layout = _ref4.layout,
|
77 | previewImageWidth = _ref4.previewImageWidth,
|
78 | mainImageWidth = _ref4.mainImageWidth,
|
79 | previewImageHeight = _ref4.previewImageHeight,
|
80 | mainImageMaxHeight = _ref4.mainImageMaxHeight,
|
81 | srcsLength = _ref4.srcsLength;
|
82 | return {
|
83 | overflow: 'hidden',
|
84 | display: 'flex',
|
85 | flexDirection: layout === 'vertical' ? 'column' : 'row',
|
86 | width: layout === 'vertical' ? 'auto' : srcsLength * previewImageWidth > mainImageWidth ? mainImageWidth : srcsLength * previewImageWidth,
|
87 | height: layout === 'vertical' ? srcsLength * previewImageHeight > mainImageMaxHeight ? mainImageMaxHeight : srcsLength * previewImageHeight : 'auto'
|
88 | };
|
89 | });
|
90 |
|
91 | var MAIN_IMAGE_FRAME = _styledComponents2.default.div(_templateObject5, function (_ref5) {
|
92 | var imageWidth = _ref5.imageWidth;
|
93 | return imageWidth + 'px';
|
94 | });
|
95 | var MAIN_IMAGE = _styledComponents2.default.div(_templateObject6, function (_ref6) {
|
96 | var imageMargin = _ref6.imageMargin;
|
97 | return imageMargin;
|
98 | });
|
99 |
|
100 | var sharedLargeNavButtonStyle = {
|
101 | position: 'absolute',
|
102 | top: 0,
|
103 | padding: 0,
|
104 | zIndex: 1
|
105 | };
|
106 |
|
107 | var LARGE_NAV_BUTTON = (0, _styledComponents2.default)(_Button2.default)(function (_ref7) {
|
108 | var layout = _ref7.layout,
|
109 | disableDiscreteNavButtons = _ref7.disableDiscreteNavButtons,
|
110 | previewImageHeight = _ref7.previewImageHeight,
|
111 | mainImageMaxHeight = _ref7.mainImageMaxHeight,
|
112 | previewImageWidth = _ref7.previewImageWidth,
|
113 | mainImageWidth = _ref7.mainImageWidth,
|
114 | dir = _ref7.dir,
|
115 | srcsLength = _ref7.srcsLength;
|
116 | return layout === 'vertical' ? (0, _extends3.default)({}, sharedLargeNavButtonStyle, {
|
117 | display: disableDiscreteNavButtons ? 'none' : srcsLength * previewImageHeight > mainImageMaxHeight ? 'flex' : 'none',
|
118 | top: dir === PREV ? -30 : 'auto',
|
119 | bottom: dir === NEXT ? -30 : 'auto',
|
120 | width: '100%',
|
121 | height: 30
|
122 | }) : (0, _extends3.default)({}, sharedLargeNavButtonStyle, {
|
123 | display: disableDiscreteNavButtons ? 'none' : srcsLength * previewImageWidth > mainImageWidth ? 'flex' : 'none',
|
124 | left: dir === PREV ? -30 : 'auto',
|
125 | right: dir === NEXT ? -30 : 'auto',
|
126 | height: '100%',
|
127 | width: 30
|
128 | });
|
129 | });
|
130 |
|
131 | var sharedSmallNavButtonStyles = {
|
132 | height: '2.5rem',
|
133 | width: '2.5rem',
|
134 | margin: '0 1.75rem',
|
135 | border: '1px solid white',
|
136 | padding: '1rem',
|
137 | zIndex: 1
|
138 | };
|
139 |
|
140 | var SMALL_NAV_BUTTON = (0, _styledComponents2.default)(_Button2.default)(function (_ref8) {
|
141 | var layout = _ref8.layout,
|
142 | disableDiscreteNavButtons = _ref8.disableDiscreteNavButtons,
|
143 | previewImageHeight = _ref8.previewImageHeight,
|
144 | mainImageMaxHeight = _ref8.mainImageMaxHeight,
|
145 | previewImageWidth = _ref8.previewImageWidth,
|
146 | mainImageWidth = _ref8.mainImageWidth,
|
147 | srcsLength = _ref8.srcsLength;
|
148 | return layout === 'vertical' ? (0, _extends3.default)({}, sharedSmallNavButtonStyles, {
|
149 | display: disableDiscreteNavButtons ? 'none' : srcsLength * previewImageHeight > mainImageMaxHeight ? 'none' : 'flex'
|
150 | }) : (0, _extends3.default)({}, sharedSmallNavButtonStyles, {
|
151 | display: disableDiscreteNavButtons ? 'none' : srcsLength * previewImageWidth > mainImageWidth ? 'none' : 'flex'
|
152 | });
|
153 | });
|
154 |
|
155 | exports.default = {
|
156 | CONTAINER: CONTAINER,
|
157 | MAIN_FRAME: MAIN_FRAME,
|
158 | PREVIEW_BUTTON: PREVIEW_BUTTON,
|
159 | PREVIEW_FRAME: PREVIEW_FRAME,
|
160 | PREVIEW_ACCORDION: PREVIEW_ACCORDION,
|
161 | MAIN_IMAGE_FRAME: MAIN_IMAGE_FRAME,
|
162 | MAIN_IMAGE: MAIN_IMAGE,
|
163 | SMALL_NAV_BUTTON: SMALL_NAV_BUTTON,
|
164 | LARGE_NAV_BUTTON: LARGE_NAV_BUTTON
|
165 | }; |
\ | No newline at end of file |