@micromag/viewer 0.2.407 → 0.2.412
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/css/styles.css +1 -1
- package/es/index.js +142 -140
- package/lib/index.js +142 -140
- package/package.json +8 -8
package/es/index.js
CHANGED
|
@@ -12,15 +12,15 @@ import { ScreenSizeProvider, ViewerProvider, useRoutes, useRoutePush, GoogleKeys
|
|
|
12
12
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
13
13
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
14
14
|
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
15
|
-
import { Button, ScreenPreview, Screen, Meta, FontFaces } from '@micromag/core/components';
|
|
16
|
-
import { useDocumentEvent, useParsedStory, useLoadedFonts, useTrackScreenView, useTrackEvent, useScreenSizeFromElement, useResizeObserver, useFullscreen } from '@micromag/core/hooks';
|
|
17
|
-
import { getStyleFromColor, getStyleFromText, getDeviceScreens } from '@micromag/core/utils';
|
|
18
15
|
import { useSpring, config } from '@react-spring/core';
|
|
19
16
|
import { animated } from '@react-spring/web';
|
|
20
17
|
import { useDrag } from '@use-gesture/react';
|
|
21
18
|
import classNames from 'classnames';
|
|
22
19
|
import { Helmet } from 'react-helmet';
|
|
23
20
|
import { useIntl, FormattedMessage } from 'react-intl';
|
|
21
|
+
import { Screen, Button, ScreenPreview, Meta, FontFaces } from '@micromag/core/components';
|
|
22
|
+
import { useDocumentEvent, useParsedStory, useLoadedFonts, useTrackScreenView, useTrackEvent, useScreenSizeFromElement, useResizeObserver, useFullscreen } from '@micromag/core/hooks';
|
|
23
|
+
import { getStyleFromColor, getStyleFromText, getDeviceScreens } from '@micromag/core/utils';
|
|
24
24
|
import { faTimes, faShare, faCompress, faExpand } from '@fortawesome/free-solid-svg-icons';
|
|
25
25
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
26
26
|
import Scroll from '@micromag/element-scroll';
|
|
@@ -33,17 +33,73 @@ var routes = PropTypes.shape({
|
|
|
33
33
|
|
|
34
34
|
var styles$6 = {"container":"micromag-viewer-container","menuPreview":"micromag-viewer-menuPreview","menuPreviewContainer":"micromag-viewer-menuPreviewContainer","screen":"micromag-viewer-screen","screenInner":"micromag-viewer-screenInner","content":"micromag-viewer-content","menuDotsContainer":"micromag-viewer-menuDotsContainer","menuDots":"micromag-viewer-menuDots","current":"micromag-viewer-current","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","ready":"micromag-viewer-ready"};
|
|
35
35
|
|
|
36
|
-
var styles$5 = {"container":"micromag-viewer-
|
|
37
|
-
|
|
38
|
-
var styles$4 = {};
|
|
36
|
+
var styles$5 = {"container":"micromag-viewer-screen-container","current":"micromag-viewer-screen-current"};
|
|
39
37
|
|
|
40
38
|
var propTypes$8 = {
|
|
39
|
+
screen: PropTypes$1.screenComponent,
|
|
40
|
+
renderContext: PropTypes$1.renderContext,
|
|
41
|
+
current: PropTypes.bool,
|
|
42
|
+
active: PropTypes.bool,
|
|
43
|
+
onPrevious: PropTypes.func,
|
|
44
|
+
onNext: PropTypes.func,
|
|
45
|
+
onEnableInteraction: PropTypes.func,
|
|
46
|
+
onDisableInteraction: PropTypes.func,
|
|
47
|
+
getMediaRef: PropTypes.func
|
|
48
|
+
};
|
|
49
|
+
var defaultProps$8 = {
|
|
50
|
+
screen: null,
|
|
51
|
+
renderContext: null,
|
|
52
|
+
current: false,
|
|
53
|
+
active: true,
|
|
54
|
+
onPrevious: null,
|
|
55
|
+
onNext: null,
|
|
56
|
+
onEnableInteraction: null,
|
|
57
|
+
onDisableInteraction: null,
|
|
58
|
+
getMediaRef: null
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
var ViewerScreen = function ViewerScreen(_ref) {
|
|
62
|
+
var _ref2;
|
|
63
|
+
|
|
64
|
+
var screen = _ref.screen,
|
|
65
|
+
renderContext = _ref.renderContext,
|
|
66
|
+
active = _ref.active,
|
|
67
|
+
current = _ref.current,
|
|
68
|
+
onPrevious = _ref.onPrevious,
|
|
69
|
+
onNext = _ref.onNext,
|
|
70
|
+
onEnableInteraction = _ref.onEnableInteraction,
|
|
71
|
+
onDisableInteraction = _ref.onDisableInteraction,
|
|
72
|
+
getMediaRef = _ref.getMediaRef;
|
|
73
|
+
return screen !== null ? /*#__PURE__*/React.createElement("div", {
|
|
74
|
+
className: classNames([styles$5.container, (_ref2 = {}, _defineProperty(_ref2, styles$5.active, active), _defineProperty(_ref2, styles$5.current, current), _ref2)]),
|
|
75
|
+
"aria-hidden": current ? null : 'true'
|
|
76
|
+
}, /*#__PURE__*/React.createElement(Screen, {
|
|
77
|
+
screen: screen,
|
|
78
|
+
renderContext: renderContext,
|
|
79
|
+
active: active,
|
|
80
|
+
current: current,
|
|
81
|
+
onPrevious: onPrevious,
|
|
82
|
+
onNext: onNext,
|
|
83
|
+
onEnableInteraction: onEnableInteraction,
|
|
84
|
+
onDisableInteraction: onDisableInteraction,
|
|
85
|
+
getMediaRef: getMediaRef
|
|
86
|
+
})) : null;
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
ViewerScreen.propTypes = propTypes$8;
|
|
90
|
+
ViewerScreen.defaultProps = defaultProps$8;
|
|
91
|
+
|
|
92
|
+
var styles$4 = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","item":"micromag-viewer-menus-menu-dots-item","button":"micromag-viewer-menus-menu-dots-button","menuButton":"micromag-viewer-menus-menu-dots-menuButton","items":"micromag-viewer-menus-menu-dots-items","dot":"micromag-viewer-menus-menu-dots-dot","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
|
|
93
|
+
|
|
94
|
+
var styles$3 = {};
|
|
95
|
+
|
|
96
|
+
var propTypes$7 = {
|
|
41
97
|
size: PropTypes.number,
|
|
42
98
|
spacing: PropTypes.number,
|
|
43
99
|
color: PropTypes.string,
|
|
44
100
|
className: PropTypes.string
|
|
45
101
|
};
|
|
46
|
-
var defaultProps$
|
|
102
|
+
var defaultProps$7 = {
|
|
47
103
|
size: 100,
|
|
48
104
|
spacing: 8,
|
|
49
105
|
color: 'white',
|
|
@@ -57,7 +113,7 @@ var MenuIcon = function MenuIcon(_ref) {
|
|
|
57
113
|
className = _ref.className;
|
|
58
114
|
var squareSize = (size - 2 * spacing) / 3;
|
|
59
115
|
return /*#__PURE__*/React.createElement("svg", {
|
|
60
|
-
className: classNames([styles$
|
|
116
|
+
className: classNames([styles$3.container, _defineProperty({}, className, className !== null)]),
|
|
61
117
|
xmlns: "http://www.w3.org/2000/svg",
|
|
62
118
|
viewBox: "0 0 ".concat(size, " ").concat(size),
|
|
63
119
|
"aria-hidden": "true"
|
|
@@ -75,10 +131,10 @@ var MenuIcon = function MenuIcon(_ref) {
|
|
|
75
131
|
}));
|
|
76
132
|
};
|
|
77
133
|
|
|
78
|
-
MenuIcon.propTypes = propTypes$
|
|
79
|
-
MenuIcon.defaultProps = defaultProps$
|
|
134
|
+
MenuIcon.propTypes = propTypes$7;
|
|
135
|
+
MenuIcon.defaultProps = defaultProps$7;
|
|
80
136
|
|
|
81
|
-
var propTypes$
|
|
137
|
+
var propTypes$6 = {
|
|
82
138
|
direction: PropTypes.oneOf(['horizontal', 'vertical']),
|
|
83
139
|
withShadow: PropTypes.bool,
|
|
84
140
|
items: PropTypes$1.menuItems,
|
|
@@ -92,7 +148,7 @@ var propTypes$7 = {
|
|
|
92
148
|
onClose: PropTypes.func,
|
|
93
149
|
className: PropTypes.string
|
|
94
150
|
};
|
|
95
|
-
var defaultProps$
|
|
151
|
+
var defaultProps$6 = {
|
|
96
152
|
direction: 'horizontal',
|
|
97
153
|
withShadow: false,
|
|
98
154
|
items: [],
|
|
@@ -125,7 +181,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
|
|
|
125
181
|
|
|
126
182
|
var intl = useIntl();
|
|
127
183
|
return /*#__PURE__*/React.createElement("nav", {
|
|
128
|
-
className: classNames([styles$
|
|
184
|
+
className: classNames([styles$4.container, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles$4.vertical, direction === 'vertical'), _defineProperty(_ref3, styles$4.withShadow, withShadow), _ref3)]),
|
|
129
185
|
"aria-label": intl.formatMessage({
|
|
130
186
|
id: "bLYuuN",
|
|
131
187
|
defaultMessage: [{
|
|
@@ -149,15 +205,15 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
|
|
|
149
205
|
total: items.length
|
|
150
206
|
})
|
|
151
207
|
}, /*#__PURE__*/React.createElement("ul", {
|
|
152
|
-
className: styles$
|
|
208
|
+
className: styles$4.items
|
|
153
209
|
}, items.map(function (item, index) {
|
|
154
|
-
return /*#__PURE__*/React.createElement("li", {
|
|
155
|
-
className: classNames([styles$
|
|
210
|
+
return (item === null || item === void 0 ? void 0 : item.parentId) === null ? /*#__PURE__*/React.createElement("li", {
|
|
211
|
+
className: classNames([styles$4.item, _defineProperty({}, styles$4.active, current === index)]),
|
|
156
212
|
key: "item-".concat(index),
|
|
157
213
|
"aria-hidden": "true"
|
|
158
214
|
}, /*#__PURE__*/React.createElement("button", {
|
|
159
215
|
type: "button",
|
|
160
|
-
className: styles$
|
|
216
|
+
className: styles$4.button,
|
|
161
217
|
onClick: function onClick() {
|
|
162
218
|
if (onClickItem !== null) {
|
|
163
219
|
onClickItem(index);
|
|
@@ -165,15 +221,15 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
|
|
|
165
221
|
},
|
|
166
222
|
tabIndex: "-1"
|
|
167
223
|
}, /*#__PURE__*/React.createElement("span", {
|
|
168
|
-
className: styles$
|
|
224
|
+
className: styles$4.dot,
|
|
169
225
|
style: {
|
|
170
226
|
backgroundColor: index <= current ? primary : secondary
|
|
171
227
|
}
|
|
172
|
-
})));
|
|
228
|
+
}))) : null;
|
|
173
229
|
}), /*#__PURE__*/React.createElement("li", {
|
|
174
|
-
className: styles$
|
|
230
|
+
className: styles$4.menu
|
|
175
231
|
}, /*#__PURE__*/React.createElement(MenuIcon, {
|
|
176
|
-
className: styles$
|
|
232
|
+
className: styles$4.menuIcon,
|
|
177
233
|
color: primary
|
|
178
234
|
}), /*#__PURE__*/React.createElement("button", {
|
|
179
235
|
type: "button",
|
|
@@ -191,20 +247,20 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
|
|
|
191
247
|
"value": "Menu"
|
|
192
248
|
}]
|
|
193
249
|
}),
|
|
194
|
-
className: styles$
|
|
250
|
+
className: styles$4.menuButton,
|
|
195
251
|
onClick: function onClick() {
|
|
196
252
|
if (onClickItem !== null) {
|
|
197
253
|
onClickItem(null);
|
|
198
254
|
}
|
|
199
255
|
}
|
|
200
256
|
})), closeable ? /*#__PURE__*/React.createElement("li", {
|
|
201
|
-
className: styles$
|
|
257
|
+
className: styles$4.closeButton,
|
|
202
258
|
style: {
|
|
203
259
|
color: primary
|
|
204
260
|
}
|
|
205
261
|
}, /*#__PURE__*/React.createElement("button", {
|
|
206
262
|
type: "button",
|
|
207
|
-
className: styles$
|
|
263
|
+
className: styles$4.closeButton,
|
|
208
264
|
onClick: onClose,
|
|
209
265
|
title: intl.formatMessage({
|
|
210
266
|
id: "dj/p/q",
|
|
@@ -225,14 +281,14 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
|
|
|
225
281
|
}))) : null));
|
|
226
282
|
};
|
|
227
283
|
|
|
228
|
-
ViewerMenuDots.propTypes = propTypes$
|
|
229
|
-
ViewerMenuDots.defaultProps = defaultProps$
|
|
284
|
+
ViewerMenuDots.propTypes = propTypes$6;
|
|
285
|
+
ViewerMenuDots.defaultProps = defaultProps$6;
|
|
230
286
|
|
|
231
|
-
var styles$
|
|
287
|
+
var styles$2 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","itemContent":"micromag-viewer-menus-menu-preview-itemContent","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
|
|
232
288
|
|
|
233
|
-
var styles$
|
|
289
|
+
var styles$1 = {"container":"micromag-viewer-partials-share-modal-container","content":"micromag-viewer-partials-share-modal-content","opened":"micromag-viewer-partials-share-modal-opened"};
|
|
234
290
|
|
|
235
|
-
var propTypes$
|
|
291
|
+
var propTypes$5 = {
|
|
236
292
|
url: PropTypes.string,
|
|
237
293
|
title: PropTypes.string,
|
|
238
294
|
opened: PropTypes.bool,
|
|
@@ -240,7 +296,7 @@ var propTypes$6 = {
|
|
|
240
296
|
onShare: PropTypes.func,
|
|
241
297
|
onCancel: PropTypes.func
|
|
242
298
|
};
|
|
243
|
-
var defaultProps$
|
|
299
|
+
var defaultProps$5 = {
|
|
244
300
|
url: null,
|
|
245
301
|
title: null,
|
|
246
302
|
opened: false,
|
|
@@ -293,13 +349,13 @@ var ShareModal = function ShareModal(_ref) {
|
|
|
293
349
|
}, [opened, onCancel]);
|
|
294
350
|
useDocumentEvent('click', onDocumentClick, opened);
|
|
295
351
|
return /*#__PURE__*/React.createElement("div", {
|
|
296
|
-
className: classNames([styles$
|
|
352
|
+
className: classNames([styles$1.container, (_ref2 = {}, _defineProperty(_ref2, className, className), _defineProperty(_ref2, styles$1.opened, opened), _ref2)]),
|
|
297
353
|
ref: containerRef,
|
|
298
354
|
"aria-hidden": opened ? null : '-1'
|
|
299
355
|
}, /*#__PURE__*/React.createElement("div", {
|
|
300
|
-
className: styles$
|
|
356
|
+
className: styles$1.content
|
|
301
357
|
}, /*#__PURE__*/React.createElement("div", {
|
|
302
|
-
className: styles$
|
|
358
|
+
className: styles$1.buttons
|
|
303
359
|
}, /*#__PURE__*/React.createElement(FacebookShareButton, Object.assign({}, shareButtonProps, {
|
|
304
360
|
quote: title,
|
|
305
361
|
beforeOnClick: function beforeOnClick() {
|
|
@@ -324,12 +380,12 @@ var ShareModal = function ShareModal(_ref) {
|
|
|
324
380
|
}), /*#__PURE__*/React.createElement(EmailIcon, shareIconProps)))));
|
|
325
381
|
};
|
|
326
382
|
|
|
327
|
-
ShareModal.propTypes = propTypes$
|
|
328
|
-
ShareModal.defaultProps = defaultProps$
|
|
383
|
+
ShareModal.propTypes = propTypes$5;
|
|
384
|
+
ShareModal.defaultProps = defaultProps$5;
|
|
329
385
|
|
|
330
|
-
var styles
|
|
386
|
+
var styles = {"container":"micromag-viewer-partials-share-button-container","shareModal":"micromag-viewer-partials-share-button-shareModal"};
|
|
331
387
|
|
|
332
|
-
var propTypes$
|
|
388
|
+
var propTypes$4 = {
|
|
333
389
|
title: PropTypes.string,
|
|
334
390
|
url: PropTypes.string,
|
|
335
391
|
className: PropTypes.string,
|
|
@@ -338,7 +394,7 @@ var propTypes$5 = {
|
|
|
338
394
|
children: PropTypes.node,
|
|
339
395
|
focusable: PropTypes.bool
|
|
340
396
|
};
|
|
341
|
-
var defaultProps$
|
|
397
|
+
var defaultProps$4 = {
|
|
342
398
|
title: null,
|
|
343
399
|
url: null,
|
|
344
400
|
className: null,
|
|
@@ -379,7 +435,7 @@ var ShareButton = function ShareButton(_ref) {
|
|
|
379
435
|
setStoryShareModalOpened(false);
|
|
380
436
|
}, [setStoryShareModalOpened]);
|
|
381
437
|
return /*#__PURE__*/React.createElement("div", {
|
|
382
|
-
className: classNames([styles
|
|
438
|
+
className: classNames([styles.container, _defineProperty({}, className, className !== null)])
|
|
383
439
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
384
440
|
className: classNames([_defineProperty({}, buttonClassName, buttonClassName !== null)]),
|
|
385
441
|
onClick: onShareIconClick,
|
|
@@ -399,7 +455,7 @@ var ShareButton = function ShareButton(_ref) {
|
|
|
399
455
|
}),
|
|
400
456
|
focusable: focusable
|
|
401
457
|
}, children), /*#__PURE__*/React.createElement(ShareModal, {
|
|
402
|
-
className: styles
|
|
458
|
+
className: styles.shareModal,
|
|
403
459
|
opened: storyShareModalOpened,
|
|
404
460
|
title: title,
|
|
405
461
|
url: url,
|
|
@@ -408,10 +464,10 @@ var ShareButton = function ShareButton(_ref) {
|
|
|
408
464
|
}));
|
|
409
465
|
};
|
|
410
466
|
|
|
411
|
-
ShareButton.propTypes = propTypes$
|
|
412
|
-
ShareButton.defaultProps = defaultProps$
|
|
467
|
+
ShareButton.propTypes = propTypes$4;
|
|
468
|
+
ShareButton.defaultProps = defaultProps$4;
|
|
413
469
|
|
|
414
|
-
var propTypes$
|
|
470
|
+
var propTypes$3 = {
|
|
415
471
|
viewerTheme: PropTypes$1.viewerTheme,
|
|
416
472
|
screenWidth: PropTypes.number,
|
|
417
473
|
title: PropTypes.string,
|
|
@@ -428,7 +484,7 @@ var propTypes$4 = {
|
|
|
428
484
|
fullscreenEnabled: PropTypes.bool,
|
|
429
485
|
className: PropTypes.string
|
|
430
486
|
};
|
|
431
|
-
var defaultProps$
|
|
487
|
+
var defaultProps$3 = {
|
|
432
488
|
viewerTheme: null,
|
|
433
489
|
screenWidth: null,
|
|
434
490
|
title: null,
|
|
@@ -446,7 +502,7 @@ var defaultProps$4 = {
|
|
|
446
502
|
className: null
|
|
447
503
|
};
|
|
448
504
|
|
|
449
|
-
function ViewerMenuPreview(_ref) {
|
|
505
|
+
var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
|
|
450
506
|
var viewerTheme = _ref.viewerTheme,
|
|
451
507
|
screenWidth = _ref.screenWidth,
|
|
452
508
|
title = _ref.title,
|
|
@@ -556,36 +612,36 @@ function ViewerMenuPreview(_ref) {
|
|
|
556
612
|
setScrolledBottom(false);
|
|
557
613
|
}, [setScrolledBottom]);
|
|
558
614
|
return hasSize ? /*#__PURE__*/React.createElement("div", Object.assign({
|
|
559
|
-
className: classNames([styles$
|
|
615
|
+
className: classNames([styles$2.container, _defineProperty({}, className, className !== null)]),
|
|
560
616
|
style: _objectSpread(_objectSpread(_objectSpread({}, backgroundColorStyle), brandImageStyle), {}, {
|
|
561
617
|
width: screenWidth
|
|
562
618
|
}),
|
|
563
619
|
"aria-hidden": focusable ? null : 'true'
|
|
564
620
|
}, dragBind()), /*#__PURE__*/React.createElement("div", {
|
|
565
|
-
className: styles$
|
|
621
|
+
className: styles$2.header
|
|
566
622
|
}, brandLogoUrl !== null ? /*#__PURE__*/React.createElement("div", {
|
|
567
|
-
className: styles$
|
|
623
|
+
className: styles$2.organisation,
|
|
568
624
|
style: {
|
|
569
625
|
backgroundImage: "url(".concat(brandLogoUrl, ")")
|
|
570
626
|
}
|
|
571
627
|
}) : null, /*#__PURE__*/React.createElement("div", {
|
|
572
|
-
className: styles$
|
|
628
|
+
className: styles$2.title,
|
|
573
629
|
style: titleStyle
|
|
574
630
|
}, title), /*#__PURE__*/React.createElement("div", {
|
|
575
|
-
className: styles$
|
|
631
|
+
className: styles$2.buttons,
|
|
576
632
|
style: colorSecondaryColorStyle
|
|
577
633
|
}, /*#__PURE__*/React.createElement(ShareButton, {
|
|
578
|
-
className: styles$
|
|
579
|
-
buttonClassName: styles$
|
|
634
|
+
className: styles$2.shareButton,
|
|
635
|
+
buttonClassName: styles$2.button,
|
|
580
636
|
onShare: onShare,
|
|
581
637
|
url: shareUrl,
|
|
582
638
|
title: title,
|
|
583
639
|
focusable: focusable
|
|
584
640
|
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
585
|
-
className: styles$
|
|
641
|
+
className: styles$2.icon,
|
|
586
642
|
icon: faShare
|
|
587
643
|
})), fullscreenEnabled ? /*#__PURE__*/React.createElement(Button, {
|
|
588
|
-
className: styles$
|
|
644
|
+
className: styles$2.button,
|
|
589
645
|
onClick: toggleFullscreen,
|
|
590
646
|
title: intl.formatMessage({
|
|
591
647
|
id: "AuxqcG",
|
|
@@ -603,10 +659,10 @@ function ViewerMenuPreview(_ref) {
|
|
|
603
659
|
}),
|
|
604
660
|
focusable: focusable
|
|
605
661
|
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
606
|
-
className: styles$
|
|
662
|
+
className: styles$2.icon,
|
|
607
663
|
icon: fullscreenActive ? faCompress : faExpand
|
|
608
664
|
})) : null, /*#__PURE__*/React.createElement(Button, {
|
|
609
|
-
className: styles$
|
|
665
|
+
className: styles$2.button,
|
|
610
666
|
onClick: onClose,
|
|
611
667
|
title: intl.formatMessage({
|
|
612
668
|
id: "dj/p/q",
|
|
@@ -624,18 +680,18 @@ function ViewerMenuPreview(_ref) {
|
|
|
624
680
|
}),
|
|
625
681
|
focusable: focusable
|
|
626
682
|
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
627
|
-
className: styles$
|
|
683
|
+
className: styles$2.icon,
|
|
628
684
|
icon: faTimes
|
|
629
685
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
630
|
-
className: styles$
|
|
686
|
+
className: styles$2.content
|
|
631
687
|
}, /*#__PURE__*/React.createElement(Scroll, {
|
|
632
|
-
className: styles$
|
|
688
|
+
className: styles$2.scroll,
|
|
633
689
|
onScrolledBottom: onScrolledBottom,
|
|
634
690
|
onScrolledNotBottom: onScrolledNotBottom
|
|
635
691
|
}, /*#__PURE__*/React.createElement("nav", {
|
|
636
|
-
className: styles$
|
|
692
|
+
className: styles$2.nav
|
|
637
693
|
}, /*#__PURE__*/React.createElement("ul", {
|
|
638
|
-
className: styles$
|
|
694
|
+
className: styles$2.items
|
|
639
695
|
}, items.map(function (item, index) {
|
|
640
696
|
var screenIndexLabel = intl.formatMessage({
|
|
641
697
|
id: "LkVfwW",
|
|
@@ -657,20 +713,20 @@ function ViewerMenuPreview(_ref) {
|
|
|
657
713
|
}]
|
|
658
714
|
})) : '';
|
|
659
715
|
var screenAriaLabel = screenIndexLabel + isCurrentScreenLabel;
|
|
660
|
-
return /*#__PURE__*/React.createElement("li", {
|
|
661
|
-
className: classNames([styles$
|
|
716
|
+
return item.parentId === null ? /*#__PURE__*/React.createElement("li", {
|
|
717
|
+
className: classNames([styles$2.item, _defineProperty({}, styles$2.active, current === index)]),
|
|
662
718
|
key: "item-".concat(index),
|
|
663
719
|
style: {
|
|
664
720
|
paddingBottom: screenSizeRatio,
|
|
665
721
|
width: "".concat(100 / thumbsPerLine, "%")
|
|
666
722
|
}
|
|
667
723
|
}, /*#__PURE__*/React.createElement("div", {
|
|
668
|
-
className: styles$
|
|
724
|
+
className: styles$2.itemContent
|
|
669
725
|
}, /*#__PURE__*/React.createElement("div", {
|
|
670
|
-
className: styles$
|
|
726
|
+
className: styles$2.screenContainer,
|
|
671
727
|
ref: index === 0 ? firstScreenContainerRef : null
|
|
672
728
|
}, /*#__PURE__*/React.createElement("div", {
|
|
673
|
-
className: styles$
|
|
729
|
+
className: styles$2.screenContent,
|
|
674
730
|
style: thumbSize !== null ? {
|
|
675
731
|
width: screenWidth,
|
|
676
732
|
height: screenRatioHeight,
|
|
@@ -683,11 +739,11 @@ function ViewerMenuPreview(_ref) {
|
|
|
683
739
|
screen: item,
|
|
684
740
|
focusable: false
|
|
685
741
|
})), current === index ? /*#__PURE__*/React.createElement("div", {
|
|
686
|
-
className: styles$
|
|
742
|
+
className: styles$2.activeScreenBorder,
|
|
687
743
|
style: borderPrimaryColorStyle
|
|
688
744
|
}) : null)), /*#__PURE__*/React.createElement("button", {
|
|
689
745
|
type: "button",
|
|
690
|
-
className: styles$
|
|
746
|
+
className: styles$2.screenButton,
|
|
691
747
|
onClick: function onClick() {
|
|
692
748
|
onClickItem(index);
|
|
693
749
|
},
|
|
@@ -698,68 +754,12 @@ function ViewerMenuPreview(_ref) {
|
|
|
698
754
|
}
|
|
699
755
|
},
|
|
700
756
|
tabIndex: focusable ? '0' : '-1'
|
|
701
|
-
}));
|
|
757
|
+
})) : null;
|
|
702
758
|
})))))) : null;
|
|
703
|
-
}
|
|
704
|
-
|
|
705
|
-
ViewerMenuPreview.propTypes = propTypes$4;
|
|
706
|
-
ViewerMenuPreview.defaultProps = defaultProps$4;
|
|
707
|
-
|
|
708
|
-
var styles = {"container":"micromag-viewer-screen-container","current":"micromag-viewer-screen-current"};
|
|
709
|
-
|
|
710
|
-
var propTypes$3 = {
|
|
711
|
-
screen: PropTypes$1.screenComponent,
|
|
712
|
-
renderContext: PropTypes$1.renderContext,
|
|
713
|
-
current: PropTypes.bool,
|
|
714
|
-
active: PropTypes.bool,
|
|
715
|
-
onPrevious: PropTypes.func,
|
|
716
|
-
onNext: PropTypes.func,
|
|
717
|
-
onEnableInteraction: PropTypes.func,
|
|
718
|
-
onDisableInteraction: PropTypes.func,
|
|
719
|
-
getMediaRef: PropTypes.func
|
|
720
|
-
};
|
|
721
|
-
var defaultProps$3 = {
|
|
722
|
-
screen: null,
|
|
723
|
-
renderContext: null,
|
|
724
|
-
current: false,
|
|
725
|
-
active: true,
|
|
726
|
-
onPrevious: null,
|
|
727
|
-
onNext: null,
|
|
728
|
-
onEnableInteraction: null,
|
|
729
|
-
onDisableInteraction: null,
|
|
730
|
-
getMediaRef: null
|
|
731
759
|
};
|
|
732
760
|
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
var screen = _ref.screen,
|
|
737
|
-
renderContext = _ref.renderContext,
|
|
738
|
-
active = _ref.active,
|
|
739
|
-
current = _ref.current,
|
|
740
|
-
onPrevious = _ref.onPrevious,
|
|
741
|
-
onNext = _ref.onNext,
|
|
742
|
-
onEnableInteraction = _ref.onEnableInteraction,
|
|
743
|
-
onDisableInteraction = _ref.onDisableInteraction,
|
|
744
|
-
getMediaRef = _ref.getMediaRef;
|
|
745
|
-
return screen !== null ? /*#__PURE__*/React.createElement("div", {
|
|
746
|
-
className: classNames([styles.container, (_ref2 = {}, _defineProperty(_ref2, styles.active, active), _defineProperty(_ref2, styles.current, current), _ref2)]),
|
|
747
|
-
"aria-hidden": current ? null : 'true'
|
|
748
|
-
}, /*#__PURE__*/React.createElement(Screen, {
|
|
749
|
-
screen: screen,
|
|
750
|
-
renderContext: renderContext,
|
|
751
|
-
active: active,
|
|
752
|
-
current: current,
|
|
753
|
-
onPrevious: onPrevious,
|
|
754
|
-
onNext: onNext,
|
|
755
|
-
onEnableInteraction: onEnableInteraction,
|
|
756
|
-
onDisableInteraction: onDisableInteraction,
|
|
757
|
-
getMediaRef: getMediaRef
|
|
758
|
-
})) : null;
|
|
759
|
-
};
|
|
760
|
-
|
|
761
|
-
ViewerScreen.propTypes = propTypes$3;
|
|
762
|
-
ViewerScreen.defaultProps = defaultProps$3;
|
|
761
|
+
ViewerMenuPreview.propTypes = propTypes$3;
|
|
762
|
+
ViewerMenuPreview.defaultProps = defaultProps$3;
|
|
763
763
|
|
|
764
764
|
var propTypes$2 = {
|
|
765
765
|
story: PropTypes$1.story,
|
|
@@ -821,7 +821,7 @@ var defaultProps$2 = {
|
|
|
821
821
|
className: null
|
|
822
822
|
};
|
|
823
823
|
|
|
824
|
-
function Viewer(_ref) {
|
|
824
|
+
var Viewer = function Viewer(_ref) {
|
|
825
825
|
var _ref15;
|
|
826
826
|
|
|
827
827
|
var story = _ref.story,
|
|
@@ -988,11 +988,11 @@ function Viewer(_ref) {
|
|
|
988
988
|
}, [currentScreen, trackScreenView, trackingEnabled]); // Handle interaction enable
|
|
989
989
|
|
|
990
990
|
var currentScreenRef = useRef(null);
|
|
991
|
-
var
|
|
991
|
+
var gotoPreviousScreen = useCallback(function () {
|
|
992
992
|
changeIndex(Math.max(0, screenIndex - 1));
|
|
993
993
|
currentScreenRef.current.focus();
|
|
994
994
|
}, [changeIndex]);
|
|
995
|
-
var
|
|
995
|
+
var gotoNextScreen = useCallback(function () {
|
|
996
996
|
changeIndex(Math.min(screens.length - 1, screenIndex + 1));
|
|
997
997
|
currentScreenRef.current.focus();
|
|
998
998
|
}, [changeIndex]);
|
|
@@ -1281,13 +1281,13 @@ function Viewer(_ref) {
|
|
|
1281
1281
|
break;
|
|
1282
1282
|
|
|
1283
1283
|
case 'arrowleft':
|
|
1284
|
-
|
|
1284
|
+
gotoPreviousScreen();
|
|
1285
1285
|
break;
|
|
1286
1286
|
|
|
1287
1287
|
case 'arrowright':
|
|
1288
1288
|
case ' ':
|
|
1289
1289
|
// spacebar
|
|
1290
|
-
|
|
1290
|
+
gotoNextScreen();
|
|
1291
1291
|
break;
|
|
1292
1292
|
}
|
|
1293
1293
|
};
|
|
@@ -1299,7 +1299,7 @@ function Viewer(_ref) {
|
|
|
1299
1299
|
return function () {
|
|
1300
1300
|
window.removeEventListener('keydown', onKey);
|
|
1301
1301
|
};
|
|
1302
|
-
}, [renderContext, closePreviewMenu,
|
|
1302
|
+
}, [renderContext, closePreviewMenu, gotoPreviousScreen, gotoNextScreen]);
|
|
1303
1303
|
|
|
1304
1304
|
var _ref11 = currentScreen || {},
|
|
1305
1305
|
screenParameters = _ref11.parameters;
|
|
@@ -1328,7 +1328,9 @@ function Viewer(_ref) {
|
|
|
1328
1328
|
size: screenSize
|
|
1329
1329
|
}, /*#__PURE__*/React.createElement(ViewerProvider, {
|
|
1330
1330
|
menuVisible: menuVisible,
|
|
1331
|
-
menuSize: menuDotsContainerHeight
|
|
1331
|
+
menuSize: menuDotsContainerHeight,
|
|
1332
|
+
gotoPreviousScreen: gotoPreviousScreen,
|
|
1333
|
+
gotoNextScreen: gotoNextScreen
|
|
1332
1334
|
}, withMetadata ? /*#__PURE__*/React.createElement(Meta, {
|
|
1333
1335
|
title: finalTitle,
|
|
1334
1336
|
metadata: finalMetadata
|
|
@@ -1386,8 +1388,8 @@ function Viewer(_ref) {
|
|
|
1386
1388
|
index: i,
|
|
1387
1389
|
current: current,
|
|
1388
1390
|
active: active,
|
|
1389
|
-
onPrevious:
|
|
1390
|
-
onNext:
|
|
1391
|
+
onPrevious: gotoPreviousScreen,
|
|
1392
|
+
onNext: gotoNextScreen,
|
|
1391
1393
|
onEnableInteraction: onEnableInteraction,
|
|
1392
1394
|
onDisableInteraction: onDisableInteraction,
|
|
1393
1395
|
getMediaRef: function getMediaRef(mediaRef) {
|
|
@@ -1401,7 +1403,7 @@ function Viewer(_ref) {
|
|
|
1401
1403
|
}, current && screenIndex > 0 ? /*#__PURE__*/React.createElement("button", {
|
|
1402
1404
|
type: "button",
|
|
1403
1405
|
className: "sr-only",
|
|
1404
|
-
onClick:
|
|
1406
|
+
onClick: gotoPreviousScreen,
|
|
1405
1407
|
tabIndex: "-1"
|
|
1406
1408
|
}, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
1407
1409
|
id: "zYH/31",
|
|
@@ -1439,12 +1441,12 @@ function Viewer(_ref) {
|
|
|
1439
1441
|
}
|
|
1440
1442
|
},
|
|
1441
1443
|
onClick: function onClick(e) {
|
|
1442
|
-
onScreenClick(e, i);
|
|
1444
|
+
return onScreenClick(e, i);
|
|
1443
1445
|
}
|
|
1444
1446
|
}, viewerScreen), current && screenIndex < screens.length ? /*#__PURE__*/React.createElement("button", {
|
|
1445
1447
|
type: "button",
|
|
1446
1448
|
className: "sr-only",
|
|
1447
|
-
onClick:
|
|
1449
|
+
onClick: gotoNextScreen,
|
|
1448
1450
|
tabIndex: "-1"
|
|
1449
1451
|
}, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
1450
1452
|
id: "v9bqYj",
|
|
@@ -1454,7 +1456,7 @@ function Viewer(_ref) {
|
|
|
1454
1456
|
}]
|
|
1455
1457
|
})) : null);
|
|
1456
1458
|
})) : null)));
|
|
1457
|
-
}
|
|
1459
|
+
};
|
|
1458
1460
|
|
|
1459
1461
|
Viewer.propTypes = propTypes$2;
|
|
1460
1462
|
Viewer.defaultProps = defaultProps$2;
|