@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/lib/index.js
CHANGED
|
@@ -16,15 +16,15 @@ var contexts = require('@micromag/core/contexts');
|
|
|
16
16
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
17
17
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
18
18
|
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
|
|
19
|
-
var components = require('@micromag/core/components');
|
|
20
|
-
var hooks = require('@micromag/core/hooks');
|
|
21
|
-
var utils = require('@micromag/core/utils');
|
|
22
19
|
var core$1 = require('@react-spring/core');
|
|
23
20
|
var web = require('@react-spring/web');
|
|
24
21
|
var react = require('@use-gesture/react');
|
|
25
22
|
var classNames = require('classnames');
|
|
26
23
|
var reactHelmet = require('react-helmet');
|
|
27
24
|
var reactIntl = require('react-intl');
|
|
25
|
+
var components = require('@micromag/core/components');
|
|
26
|
+
var hooks = require('@micromag/core/hooks');
|
|
27
|
+
var utils = require('@micromag/core/utils');
|
|
28
28
|
var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
|
|
29
29
|
var reactFontawesome = require('@fortawesome/react-fontawesome');
|
|
30
30
|
var Scroll = require('@micromag/element-scroll');
|
|
@@ -50,17 +50,73 @@ var routes = PropTypes__default["default"].shape({
|
|
|
50
50
|
|
|
51
51
|
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"};
|
|
52
52
|
|
|
53
|
-
var styles$5 = {"container":"micromag-viewer-
|
|
54
|
-
|
|
55
|
-
var styles$4 = {};
|
|
53
|
+
var styles$5 = {"container":"micromag-viewer-screen-container","current":"micromag-viewer-screen-current"};
|
|
56
54
|
|
|
57
55
|
var propTypes$8 = {
|
|
56
|
+
screen: core.PropTypes.screenComponent,
|
|
57
|
+
renderContext: core.PropTypes.renderContext,
|
|
58
|
+
current: PropTypes__default["default"].bool,
|
|
59
|
+
active: PropTypes__default["default"].bool,
|
|
60
|
+
onPrevious: PropTypes__default["default"].func,
|
|
61
|
+
onNext: PropTypes__default["default"].func,
|
|
62
|
+
onEnableInteraction: PropTypes__default["default"].func,
|
|
63
|
+
onDisableInteraction: PropTypes__default["default"].func,
|
|
64
|
+
getMediaRef: PropTypes__default["default"].func
|
|
65
|
+
};
|
|
66
|
+
var defaultProps$8 = {
|
|
67
|
+
screen: null,
|
|
68
|
+
renderContext: null,
|
|
69
|
+
current: false,
|
|
70
|
+
active: true,
|
|
71
|
+
onPrevious: null,
|
|
72
|
+
onNext: null,
|
|
73
|
+
onEnableInteraction: null,
|
|
74
|
+
onDisableInteraction: null,
|
|
75
|
+
getMediaRef: null
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
var ViewerScreen = function ViewerScreen(_ref) {
|
|
79
|
+
var _ref2;
|
|
80
|
+
|
|
81
|
+
var screen = _ref.screen,
|
|
82
|
+
renderContext = _ref.renderContext,
|
|
83
|
+
active = _ref.active,
|
|
84
|
+
current = _ref.current,
|
|
85
|
+
onPrevious = _ref.onPrevious,
|
|
86
|
+
onNext = _ref.onNext,
|
|
87
|
+
onEnableInteraction = _ref.onEnableInteraction,
|
|
88
|
+
onDisableInteraction = _ref.onDisableInteraction,
|
|
89
|
+
getMediaRef = _ref.getMediaRef;
|
|
90
|
+
return screen !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
91
|
+
className: classNames__default["default"]([styles$5.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$5.active, active), _defineProperty__default["default"](_ref2, styles$5.current, current), _ref2)]),
|
|
92
|
+
"aria-hidden": current ? null : 'true'
|
|
93
|
+
}, /*#__PURE__*/React__default["default"].createElement(components.Screen, {
|
|
94
|
+
screen: screen,
|
|
95
|
+
renderContext: renderContext,
|
|
96
|
+
active: active,
|
|
97
|
+
current: current,
|
|
98
|
+
onPrevious: onPrevious,
|
|
99
|
+
onNext: onNext,
|
|
100
|
+
onEnableInteraction: onEnableInteraction,
|
|
101
|
+
onDisableInteraction: onDisableInteraction,
|
|
102
|
+
getMediaRef: getMediaRef
|
|
103
|
+
})) : null;
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
ViewerScreen.propTypes = propTypes$8;
|
|
107
|
+
ViewerScreen.defaultProps = defaultProps$8;
|
|
108
|
+
|
|
109
|
+
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"};
|
|
110
|
+
|
|
111
|
+
var styles$3 = {};
|
|
112
|
+
|
|
113
|
+
var propTypes$7 = {
|
|
58
114
|
size: PropTypes__default["default"].number,
|
|
59
115
|
spacing: PropTypes__default["default"].number,
|
|
60
116
|
color: PropTypes__default["default"].string,
|
|
61
117
|
className: PropTypes__default["default"].string
|
|
62
118
|
};
|
|
63
|
-
var defaultProps$
|
|
119
|
+
var defaultProps$7 = {
|
|
64
120
|
size: 100,
|
|
65
121
|
spacing: 8,
|
|
66
122
|
color: 'white',
|
|
@@ -74,7 +130,7 @@ var MenuIcon = function MenuIcon(_ref) {
|
|
|
74
130
|
className = _ref.className;
|
|
75
131
|
var squareSize = (size - 2 * spacing) / 3;
|
|
76
132
|
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
77
|
-
className: classNames__default["default"]([styles$
|
|
133
|
+
className: classNames__default["default"]([styles$3.container, _defineProperty__default["default"]({}, className, className !== null)]),
|
|
78
134
|
xmlns: "http://www.w3.org/2000/svg",
|
|
79
135
|
viewBox: "0 0 ".concat(size, " ").concat(size),
|
|
80
136
|
"aria-hidden": "true"
|
|
@@ -92,10 +148,10 @@ var MenuIcon = function MenuIcon(_ref) {
|
|
|
92
148
|
}));
|
|
93
149
|
};
|
|
94
150
|
|
|
95
|
-
MenuIcon.propTypes = propTypes$
|
|
96
|
-
MenuIcon.defaultProps = defaultProps$
|
|
151
|
+
MenuIcon.propTypes = propTypes$7;
|
|
152
|
+
MenuIcon.defaultProps = defaultProps$7;
|
|
97
153
|
|
|
98
|
-
var propTypes$
|
|
154
|
+
var propTypes$6 = {
|
|
99
155
|
direction: PropTypes__default["default"].oneOf(['horizontal', 'vertical']),
|
|
100
156
|
withShadow: PropTypes__default["default"].bool,
|
|
101
157
|
items: core.PropTypes.menuItems,
|
|
@@ -109,7 +165,7 @@ var propTypes$7 = {
|
|
|
109
165
|
onClose: PropTypes__default["default"].func,
|
|
110
166
|
className: PropTypes__default["default"].string
|
|
111
167
|
};
|
|
112
|
-
var defaultProps$
|
|
168
|
+
var defaultProps$6 = {
|
|
113
169
|
direction: 'horizontal',
|
|
114
170
|
withShadow: false,
|
|
115
171
|
items: [],
|
|
@@ -142,7 +198,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
|
|
|
142
198
|
|
|
143
199
|
var intl = reactIntl.useIntl();
|
|
144
200
|
return /*#__PURE__*/React__default["default"].createElement("nav", {
|
|
145
|
-
className: classNames__default["default"]([styles$
|
|
201
|
+
className: classNames__default["default"]([styles$4.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles$4.vertical, direction === 'vertical'), _defineProperty__default["default"](_ref3, styles$4.withShadow, withShadow), _ref3)]),
|
|
146
202
|
"aria-label": intl.formatMessage({
|
|
147
203
|
id: "bLYuuN",
|
|
148
204
|
defaultMessage: [{
|
|
@@ -166,15 +222,15 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
|
|
|
166
222
|
total: items.length
|
|
167
223
|
})
|
|
168
224
|
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
169
|
-
className: styles$
|
|
225
|
+
className: styles$4.items
|
|
170
226
|
}, items.map(function (item, index) {
|
|
171
|
-
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
172
|
-
className: classNames__default["default"]([styles$
|
|
227
|
+
return (item === null || item === void 0 ? void 0 : item.parentId) === null ? /*#__PURE__*/React__default["default"].createElement("li", {
|
|
228
|
+
className: classNames__default["default"]([styles$4.item, _defineProperty__default["default"]({}, styles$4.active, current === index)]),
|
|
173
229
|
key: "item-".concat(index),
|
|
174
230
|
"aria-hidden": "true"
|
|
175
231
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
176
232
|
type: "button",
|
|
177
|
-
className: styles$
|
|
233
|
+
className: styles$4.button,
|
|
178
234
|
onClick: function onClick() {
|
|
179
235
|
if (onClickItem !== null) {
|
|
180
236
|
onClickItem(index);
|
|
@@ -182,15 +238,15 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
|
|
|
182
238
|
},
|
|
183
239
|
tabIndex: "-1"
|
|
184
240
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
185
|
-
className: styles$
|
|
241
|
+
className: styles$4.dot,
|
|
186
242
|
style: {
|
|
187
243
|
backgroundColor: index <= current ? primary : secondary
|
|
188
244
|
}
|
|
189
|
-
})));
|
|
245
|
+
}))) : null;
|
|
190
246
|
}), /*#__PURE__*/React__default["default"].createElement("li", {
|
|
191
|
-
className: styles$
|
|
247
|
+
className: styles$4.menu
|
|
192
248
|
}, /*#__PURE__*/React__default["default"].createElement(MenuIcon, {
|
|
193
|
-
className: styles$
|
|
249
|
+
className: styles$4.menuIcon,
|
|
194
250
|
color: primary
|
|
195
251
|
}), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
196
252
|
type: "button",
|
|
@@ -208,20 +264,20 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
|
|
|
208
264
|
"value": "Menu"
|
|
209
265
|
}]
|
|
210
266
|
}),
|
|
211
|
-
className: styles$
|
|
267
|
+
className: styles$4.menuButton,
|
|
212
268
|
onClick: function onClick() {
|
|
213
269
|
if (onClickItem !== null) {
|
|
214
270
|
onClickItem(null);
|
|
215
271
|
}
|
|
216
272
|
}
|
|
217
273
|
})), closeable ? /*#__PURE__*/React__default["default"].createElement("li", {
|
|
218
|
-
className: styles$
|
|
274
|
+
className: styles$4.closeButton,
|
|
219
275
|
style: {
|
|
220
276
|
color: primary
|
|
221
277
|
}
|
|
222
278
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
223
279
|
type: "button",
|
|
224
|
-
className: styles$
|
|
280
|
+
className: styles$4.closeButton,
|
|
225
281
|
onClick: onClose,
|
|
226
282
|
title: intl.formatMessage({
|
|
227
283
|
id: "dj/p/q",
|
|
@@ -242,14 +298,14 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
|
|
|
242
298
|
}))) : null));
|
|
243
299
|
};
|
|
244
300
|
|
|
245
|
-
ViewerMenuDots.propTypes = propTypes$
|
|
246
|
-
ViewerMenuDots.defaultProps = defaultProps$
|
|
301
|
+
ViewerMenuDots.propTypes = propTypes$6;
|
|
302
|
+
ViewerMenuDots.defaultProps = defaultProps$6;
|
|
247
303
|
|
|
248
|
-
var styles$
|
|
304
|
+
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"};
|
|
249
305
|
|
|
250
|
-
var styles$
|
|
306
|
+
var styles$1 = {"container":"micromag-viewer-partials-share-modal-container","content":"micromag-viewer-partials-share-modal-content","opened":"micromag-viewer-partials-share-modal-opened"};
|
|
251
307
|
|
|
252
|
-
var propTypes$
|
|
308
|
+
var propTypes$5 = {
|
|
253
309
|
url: PropTypes__default["default"].string,
|
|
254
310
|
title: PropTypes__default["default"].string,
|
|
255
311
|
opened: PropTypes__default["default"].bool,
|
|
@@ -257,7 +313,7 @@ var propTypes$6 = {
|
|
|
257
313
|
onShare: PropTypes__default["default"].func,
|
|
258
314
|
onCancel: PropTypes__default["default"].func
|
|
259
315
|
};
|
|
260
|
-
var defaultProps$
|
|
316
|
+
var defaultProps$5 = {
|
|
261
317
|
url: null,
|
|
262
318
|
title: null,
|
|
263
319
|
opened: false,
|
|
@@ -310,13 +366,13 @@ var ShareModal = function ShareModal(_ref) {
|
|
|
310
366
|
}, [opened, onCancel]);
|
|
311
367
|
hooks.useDocumentEvent('click', onDocumentClick, opened);
|
|
312
368
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
313
|
-
className: classNames__default["default"]([styles$
|
|
369
|
+
className: classNames__default["default"]([styles$1.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className), _defineProperty__default["default"](_ref2, styles$1.opened, opened), _ref2)]),
|
|
314
370
|
ref: containerRef,
|
|
315
371
|
"aria-hidden": opened ? null : '-1'
|
|
316
372
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
317
|
-
className: styles$
|
|
373
|
+
className: styles$1.content
|
|
318
374
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
319
|
-
className: styles$
|
|
375
|
+
className: styles$1.buttons
|
|
320
376
|
}, /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookShareButton, Object.assign({}, shareButtonProps, {
|
|
321
377
|
quote: title,
|
|
322
378
|
beforeOnClick: function beforeOnClick() {
|
|
@@ -341,12 +397,12 @@ var ShareModal = function ShareModal(_ref) {
|
|
|
341
397
|
}), /*#__PURE__*/React__default["default"].createElement(reactShare.EmailIcon, shareIconProps)))));
|
|
342
398
|
};
|
|
343
399
|
|
|
344
|
-
ShareModal.propTypes = propTypes$
|
|
345
|
-
ShareModal.defaultProps = defaultProps$
|
|
400
|
+
ShareModal.propTypes = propTypes$5;
|
|
401
|
+
ShareModal.defaultProps = defaultProps$5;
|
|
346
402
|
|
|
347
|
-
var styles
|
|
403
|
+
var styles = {"container":"micromag-viewer-partials-share-button-container","shareModal":"micromag-viewer-partials-share-button-shareModal"};
|
|
348
404
|
|
|
349
|
-
var propTypes$
|
|
405
|
+
var propTypes$4 = {
|
|
350
406
|
title: PropTypes__default["default"].string,
|
|
351
407
|
url: PropTypes__default["default"].string,
|
|
352
408
|
className: PropTypes__default["default"].string,
|
|
@@ -355,7 +411,7 @@ var propTypes$5 = {
|
|
|
355
411
|
children: PropTypes__default["default"].node,
|
|
356
412
|
focusable: PropTypes__default["default"].bool
|
|
357
413
|
};
|
|
358
|
-
var defaultProps$
|
|
414
|
+
var defaultProps$4 = {
|
|
359
415
|
title: null,
|
|
360
416
|
url: null,
|
|
361
417
|
className: null,
|
|
@@ -396,7 +452,7 @@ var ShareButton = function ShareButton(_ref) {
|
|
|
396
452
|
setStoryShareModalOpened(false);
|
|
397
453
|
}, [setStoryShareModalOpened]);
|
|
398
454
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
399
|
-
className: classNames__default["default"]([styles
|
|
455
|
+
className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
|
|
400
456
|
}, /*#__PURE__*/React__default["default"].createElement(components.Button, {
|
|
401
457
|
className: classNames__default["default"]([_defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
|
|
402
458
|
onClick: onShareIconClick,
|
|
@@ -416,7 +472,7 @@ var ShareButton = function ShareButton(_ref) {
|
|
|
416
472
|
}),
|
|
417
473
|
focusable: focusable
|
|
418
474
|
}, children), /*#__PURE__*/React__default["default"].createElement(ShareModal, {
|
|
419
|
-
className: styles
|
|
475
|
+
className: styles.shareModal,
|
|
420
476
|
opened: storyShareModalOpened,
|
|
421
477
|
title: title,
|
|
422
478
|
url: url,
|
|
@@ -425,10 +481,10 @@ var ShareButton = function ShareButton(_ref) {
|
|
|
425
481
|
}));
|
|
426
482
|
};
|
|
427
483
|
|
|
428
|
-
ShareButton.propTypes = propTypes$
|
|
429
|
-
ShareButton.defaultProps = defaultProps$
|
|
484
|
+
ShareButton.propTypes = propTypes$4;
|
|
485
|
+
ShareButton.defaultProps = defaultProps$4;
|
|
430
486
|
|
|
431
|
-
var propTypes$
|
|
487
|
+
var propTypes$3 = {
|
|
432
488
|
viewerTheme: core.PropTypes.viewerTheme,
|
|
433
489
|
screenWidth: PropTypes__default["default"].number,
|
|
434
490
|
title: PropTypes__default["default"].string,
|
|
@@ -445,7 +501,7 @@ var propTypes$4 = {
|
|
|
445
501
|
fullscreenEnabled: PropTypes__default["default"].bool,
|
|
446
502
|
className: PropTypes__default["default"].string
|
|
447
503
|
};
|
|
448
|
-
var defaultProps$
|
|
504
|
+
var defaultProps$3 = {
|
|
449
505
|
viewerTheme: null,
|
|
450
506
|
screenWidth: null,
|
|
451
507
|
title: null,
|
|
@@ -463,7 +519,7 @@ var defaultProps$4 = {
|
|
|
463
519
|
className: null
|
|
464
520
|
};
|
|
465
521
|
|
|
466
|
-
function ViewerMenuPreview(_ref) {
|
|
522
|
+
var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
|
|
467
523
|
var viewerTheme = _ref.viewerTheme,
|
|
468
524
|
screenWidth = _ref.screenWidth,
|
|
469
525
|
title = _ref.title,
|
|
@@ -573,36 +629,36 @@ function ViewerMenuPreview(_ref) {
|
|
|
573
629
|
setScrolledBottom(false);
|
|
574
630
|
}, [setScrolledBottom]);
|
|
575
631
|
return hasSize ? /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
576
|
-
className: classNames__default["default"]([styles$
|
|
632
|
+
className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"]({}, className, className !== null)]),
|
|
577
633
|
style: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, backgroundColorStyle), brandImageStyle), {}, {
|
|
578
634
|
width: screenWidth
|
|
579
635
|
}),
|
|
580
636
|
"aria-hidden": focusable ? null : 'true'
|
|
581
637
|
}, dragBind()), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
582
|
-
className: styles$
|
|
638
|
+
className: styles$2.header
|
|
583
639
|
}, brandLogoUrl !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
584
|
-
className: styles$
|
|
640
|
+
className: styles$2.organisation,
|
|
585
641
|
style: {
|
|
586
642
|
backgroundImage: "url(".concat(brandLogoUrl, ")")
|
|
587
643
|
}
|
|
588
644
|
}) : null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
589
|
-
className: styles$
|
|
645
|
+
className: styles$2.title,
|
|
590
646
|
style: titleStyle
|
|
591
647
|
}, title), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
592
|
-
className: styles$
|
|
648
|
+
className: styles$2.buttons,
|
|
593
649
|
style: colorSecondaryColorStyle
|
|
594
650
|
}, /*#__PURE__*/React__default["default"].createElement(ShareButton, {
|
|
595
|
-
className: styles$
|
|
596
|
-
buttonClassName: styles$
|
|
651
|
+
className: styles$2.shareButton,
|
|
652
|
+
buttonClassName: styles$2.button,
|
|
597
653
|
onShare: onShare,
|
|
598
654
|
url: shareUrl,
|
|
599
655
|
title: title,
|
|
600
656
|
focusable: focusable
|
|
601
657
|
}, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
602
|
-
className: styles$
|
|
658
|
+
className: styles$2.icon,
|
|
603
659
|
icon: freeSolidSvgIcons.faShare
|
|
604
660
|
})), fullscreenEnabled ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
|
|
605
|
-
className: styles$
|
|
661
|
+
className: styles$2.button,
|
|
606
662
|
onClick: toggleFullscreen,
|
|
607
663
|
title: intl.formatMessage({
|
|
608
664
|
id: "AuxqcG",
|
|
@@ -620,10 +676,10 @@ function ViewerMenuPreview(_ref) {
|
|
|
620
676
|
}),
|
|
621
677
|
focusable: focusable
|
|
622
678
|
}, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
623
|
-
className: styles$
|
|
679
|
+
className: styles$2.icon,
|
|
624
680
|
icon: fullscreenActive ? freeSolidSvgIcons.faCompress : freeSolidSvgIcons.faExpand
|
|
625
681
|
})) : null, /*#__PURE__*/React__default["default"].createElement(components.Button, {
|
|
626
|
-
className: styles$
|
|
682
|
+
className: styles$2.button,
|
|
627
683
|
onClick: onClose,
|
|
628
684
|
title: intl.formatMessage({
|
|
629
685
|
id: "dj/p/q",
|
|
@@ -641,18 +697,18 @@ function ViewerMenuPreview(_ref) {
|
|
|
641
697
|
}),
|
|
642
698
|
focusable: focusable
|
|
643
699
|
}, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
644
|
-
className: styles$
|
|
700
|
+
className: styles$2.icon,
|
|
645
701
|
icon: freeSolidSvgIcons.faTimes
|
|
646
702
|
})))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
647
|
-
className: styles$
|
|
703
|
+
className: styles$2.content
|
|
648
704
|
}, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
|
|
649
|
-
className: styles$
|
|
705
|
+
className: styles$2.scroll,
|
|
650
706
|
onScrolledBottom: onScrolledBottom,
|
|
651
707
|
onScrolledNotBottom: onScrolledNotBottom
|
|
652
708
|
}, /*#__PURE__*/React__default["default"].createElement("nav", {
|
|
653
|
-
className: styles$
|
|
709
|
+
className: styles$2.nav
|
|
654
710
|
}, /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
655
|
-
className: styles$
|
|
711
|
+
className: styles$2.items
|
|
656
712
|
}, items.map(function (item, index) {
|
|
657
713
|
var screenIndexLabel = intl.formatMessage({
|
|
658
714
|
id: "LkVfwW",
|
|
@@ -674,20 +730,20 @@ function ViewerMenuPreview(_ref) {
|
|
|
674
730
|
}]
|
|
675
731
|
})) : '';
|
|
676
732
|
var screenAriaLabel = screenIndexLabel + isCurrentScreenLabel;
|
|
677
|
-
return /*#__PURE__*/React__default["default"].createElement("li", {
|
|
678
|
-
className: classNames__default["default"]([styles$
|
|
733
|
+
return item.parentId === null ? /*#__PURE__*/React__default["default"].createElement("li", {
|
|
734
|
+
className: classNames__default["default"]([styles$2.item, _defineProperty__default["default"]({}, styles$2.active, current === index)]),
|
|
679
735
|
key: "item-".concat(index),
|
|
680
736
|
style: {
|
|
681
737
|
paddingBottom: screenSizeRatio,
|
|
682
738
|
width: "".concat(100 / thumbsPerLine, "%")
|
|
683
739
|
}
|
|
684
740
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
685
|
-
className: styles$
|
|
741
|
+
className: styles$2.itemContent
|
|
686
742
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
687
|
-
className: styles$
|
|
743
|
+
className: styles$2.screenContainer,
|
|
688
744
|
ref: index === 0 ? firstScreenContainerRef : null
|
|
689
745
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
690
|
-
className: styles$
|
|
746
|
+
className: styles$2.screenContent,
|
|
691
747
|
style: thumbSize !== null ? {
|
|
692
748
|
width: screenWidth,
|
|
693
749
|
height: screenRatioHeight,
|
|
@@ -700,11 +756,11 @@ function ViewerMenuPreview(_ref) {
|
|
|
700
756
|
screen: item,
|
|
701
757
|
focusable: false
|
|
702
758
|
})), current === index ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
703
|
-
className: styles$
|
|
759
|
+
className: styles$2.activeScreenBorder,
|
|
704
760
|
style: borderPrimaryColorStyle
|
|
705
761
|
}) : null)), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
706
762
|
type: "button",
|
|
707
|
-
className: styles$
|
|
763
|
+
className: styles$2.screenButton,
|
|
708
764
|
onClick: function onClick() {
|
|
709
765
|
onClickItem(index);
|
|
710
766
|
},
|
|
@@ -715,68 +771,12 @@ function ViewerMenuPreview(_ref) {
|
|
|
715
771
|
}
|
|
716
772
|
},
|
|
717
773
|
tabIndex: focusable ? '0' : '-1'
|
|
718
|
-
}));
|
|
774
|
+
})) : null;
|
|
719
775
|
})))))) : null;
|
|
720
|
-
}
|
|
721
|
-
|
|
722
|
-
ViewerMenuPreview.propTypes = propTypes$4;
|
|
723
|
-
ViewerMenuPreview.defaultProps = defaultProps$4;
|
|
724
|
-
|
|
725
|
-
var styles = {"container":"micromag-viewer-screen-container","current":"micromag-viewer-screen-current"};
|
|
726
|
-
|
|
727
|
-
var propTypes$3 = {
|
|
728
|
-
screen: core.PropTypes.screenComponent,
|
|
729
|
-
renderContext: core.PropTypes.renderContext,
|
|
730
|
-
current: PropTypes__default["default"].bool,
|
|
731
|
-
active: PropTypes__default["default"].bool,
|
|
732
|
-
onPrevious: PropTypes__default["default"].func,
|
|
733
|
-
onNext: PropTypes__default["default"].func,
|
|
734
|
-
onEnableInteraction: PropTypes__default["default"].func,
|
|
735
|
-
onDisableInteraction: PropTypes__default["default"].func,
|
|
736
|
-
getMediaRef: PropTypes__default["default"].func
|
|
737
|
-
};
|
|
738
|
-
var defaultProps$3 = {
|
|
739
|
-
screen: null,
|
|
740
|
-
renderContext: null,
|
|
741
|
-
current: false,
|
|
742
|
-
active: true,
|
|
743
|
-
onPrevious: null,
|
|
744
|
-
onNext: null,
|
|
745
|
-
onEnableInteraction: null,
|
|
746
|
-
onDisableInteraction: null,
|
|
747
|
-
getMediaRef: null
|
|
748
776
|
};
|
|
749
777
|
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
var screen = _ref.screen,
|
|
754
|
-
renderContext = _ref.renderContext,
|
|
755
|
-
active = _ref.active,
|
|
756
|
-
current = _ref.current,
|
|
757
|
-
onPrevious = _ref.onPrevious,
|
|
758
|
-
onNext = _ref.onNext,
|
|
759
|
-
onEnableInteraction = _ref.onEnableInteraction,
|
|
760
|
-
onDisableInteraction = _ref.onDisableInteraction,
|
|
761
|
-
getMediaRef = _ref.getMediaRef;
|
|
762
|
-
return screen !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
763
|
-
className: classNames__default["default"]([styles.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles.active, active), _defineProperty__default["default"](_ref2, styles.current, current), _ref2)]),
|
|
764
|
-
"aria-hidden": current ? null : 'true'
|
|
765
|
-
}, /*#__PURE__*/React__default["default"].createElement(components.Screen, {
|
|
766
|
-
screen: screen,
|
|
767
|
-
renderContext: renderContext,
|
|
768
|
-
active: active,
|
|
769
|
-
current: current,
|
|
770
|
-
onPrevious: onPrevious,
|
|
771
|
-
onNext: onNext,
|
|
772
|
-
onEnableInteraction: onEnableInteraction,
|
|
773
|
-
onDisableInteraction: onDisableInteraction,
|
|
774
|
-
getMediaRef: getMediaRef
|
|
775
|
-
})) : null;
|
|
776
|
-
};
|
|
777
|
-
|
|
778
|
-
ViewerScreen.propTypes = propTypes$3;
|
|
779
|
-
ViewerScreen.defaultProps = defaultProps$3;
|
|
778
|
+
ViewerMenuPreview.propTypes = propTypes$3;
|
|
779
|
+
ViewerMenuPreview.defaultProps = defaultProps$3;
|
|
780
780
|
|
|
781
781
|
var propTypes$2 = {
|
|
782
782
|
story: core.PropTypes.story,
|
|
@@ -838,7 +838,7 @@ var defaultProps$2 = {
|
|
|
838
838
|
className: null
|
|
839
839
|
};
|
|
840
840
|
|
|
841
|
-
function Viewer(_ref) {
|
|
841
|
+
var Viewer = function Viewer(_ref) {
|
|
842
842
|
var _ref15;
|
|
843
843
|
|
|
844
844
|
var story = _ref.story,
|
|
@@ -1005,11 +1005,11 @@ function Viewer(_ref) {
|
|
|
1005
1005
|
}, [currentScreen, trackScreenView, trackingEnabled]); // Handle interaction enable
|
|
1006
1006
|
|
|
1007
1007
|
var currentScreenRef = React.useRef(null);
|
|
1008
|
-
var
|
|
1008
|
+
var gotoPreviousScreen = React.useCallback(function () {
|
|
1009
1009
|
changeIndex(Math.max(0, screenIndex - 1));
|
|
1010
1010
|
currentScreenRef.current.focus();
|
|
1011
1011
|
}, [changeIndex]);
|
|
1012
|
-
var
|
|
1012
|
+
var gotoNextScreen = React.useCallback(function () {
|
|
1013
1013
|
changeIndex(Math.min(screens.length - 1, screenIndex + 1));
|
|
1014
1014
|
currentScreenRef.current.focus();
|
|
1015
1015
|
}, [changeIndex]);
|
|
@@ -1298,13 +1298,13 @@ function Viewer(_ref) {
|
|
|
1298
1298
|
break;
|
|
1299
1299
|
|
|
1300
1300
|
case 'arrowleft':
|
|
1301
|
-
|
|
1301
|
+
gotoPreviousScreen();
|
|
1302
1302
|
break;
|
|
1303
1303
|
|
|
1304
1304
|
case 'arrowright':
|
|
1305
1305
|
case ' ':
|
|
1306
1306
|
// spacebar
|
|
1307
|
-
|
|
1307
|
+
gotoNextScreen();
|
|
1308
1308
|
break;
|
|
1309
1309
|
}
|
|
1310
1310
|
};
|
|
@@ -1316,7 +1316,7 @@ function Viewer(_ref) {
|
|
|
1316
1316
|
return function () {
|
|
1317
1317
|
window.removeEventListener('keydown', onKey);
|
|
1318
1318
|
};
|
|
1319
|
-
}, [renderContext, closePreviewMenu,
|
|
1319
|
+
}, [renderContext, closePreviewMenu, gotoPreviousScreen, gotoNextScreen]);
|
|
1320
1320
|
|
|
1321
1321
|
var _ref11 = currentScreen || {},
|
|
1322
1322
|
screenParameters = _ref11.parameters;
|
|
@@ -1345,7 +1345,9 @@ function Viewer(_ref) {
|
|
|
1345
1345
|
size: screenSize
|
|
1346
1346
|
}, /*#__PURE__*/React__default["default"].createElement(contexts.ViewerProvider, {
|
|
1347
1347
|
menuVisible: menuVisible,
|
|
1348
|
-
menuSize: menuDotsContainerHeight
|
|
1348
|
+
menuSize: menuDotsContainerHeight,
|
|
1349
|
+
gotoPreviousScreen: gotoPreviousScreen,
|
|
1350
|
+
gotoNextScreen: gotoNextScreen
|
|
1349
1351
|
}, withMetadata ? /*#__PURE__*/React__default["default"].createElement(components.Meta, {
|
|
1350
1352
|
title: finalTitle,
|
|
1351
1353
|
metadata: finalMetadata
|
|
@@ -1403,8 +1405,8 @@ function Viewer(_ref) {
|
|
|
1403
1405
|
index: i,
|
|
1404
1406
|
current: current,
|
|
1405
1407
|
active: active,
|
|
1406
|
-
onPrevious:
|
|
1407
|
-
onNext:
|
|
1408
|
+
onPrevious: gotoPreviousScreen,
|
|
1409
|
+
onNext: gotoNextScreen,
|
|
1408
1410
|
onEnableInteraction: onEnableInteraction,
|
|
1409
1411
|
onDisableInteraction: onDisableInteraction,
|
|
1410
1412
|
getMediaRef: function getMediaRef(mediaRef) {
|
|
@@ -1418,7 +1420,7 @@ function Viewer(_ref) {
|
|
|
1418
1420
|
}, current && screenIndex > 0 ? /*#__PURE__*/React__default["default"].createElement("button", {
|
|
1419
1421
|
type: "button",
|
|
1420
1422
|
className: "sr-only",
|
|
1421
|
-
onClick:
|
|
1423
|
+
onClick: gotoPreviousScreen,
|
|
1422
1424
|
tabIndex: "-1"
|
|
1423
1425
|
}, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
1424
1426
|
id: "zYH/31",
|
|
@@ -1456,12 +1458,12 @@ function Viewer(_ref) {
|
|
|
1456
1458
|
}
|
|
1457
1459
|
},
|
|
1458
1460
|
onClick: function onClick(e) {
|
|
1459
|
-
onScreenClick(e, i);
|
|
1461
|
+
return onScreenClick(e, i);
|
|
1460
1462
|
}
|
|
1461
1463
|
}, viewerScreen), current && screenIndex < screens.length ? /*#__PURE__*/React__default["default"].createElement("button", {
|
|
1462
1464
|
type: "button",
|
|
1463
1465
|
className: "sr-only",
|
|
1464
|
-
onClick:
|
|
1466
|
+
onClick: gotoNextScreen,
|
|
1465
1467
|
tabIndex: "-1"
|
|
1466
1468
|
}, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
1467
1469
|
id: "v9bqYj",
|
|
@@ -1471,7 +1473,7 @@ function Viewer(_ref) {
|
|
|
1471
1473
|
}]
|
|
1472
1474
|
})) : null);
|
|
1473
1475
|
})) : null)));
|
|
1474
|
-
}
|
|
1476
|
+
};
|
|
1475
1477
|
|
|
1476
1478
|
Viewer.propTypes = propTypes$2;
|
|
1477
1479
|
Viewer.defaultProps = defaultProps$2;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/viewer",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.412",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -59,12 +59,12 @@
|
|
|
59
59
|
"@fortawesome/fontawesome-svg-core": "^1.2.32",
|
|
60
60
|
"@fortawesome/free-solid-svg-icons": "^5.15.1",
|
|
61
61
|
"@fortawesome/react-fontawesome": "^0.1.13",
|
|
62
|
-
"@micromag/core": "^0.2.
|
|
63
|
-
"@micromag/element-scroll": "^0.2.
|
|
64
|
-
"@micromag/elements": "^0.2.
|
|
65
|
-
"@micromag/fields": "^0.2.
|
|
66
|
-
"@micromag/intl": "^0.2.
|
|
67
|
-
"@micromag/screens": "^0.2.
|
|
62
|
+
"@micromag/core": "^0.2.412",
|
|
63
|
+
"@micromag/element-scroll": "^0.2.412",
|
|
64
|
+
"@micromag/elements": "^0.2.412",
|
|
65
|
+
"@micromag/fields": "^0.2.412",
|
|
66
|
+
"@micromag/intl": "^0.2.412",
|
|
67
|
+
"@micromag/screens": "^0.2.412",
|
|
68
68
|
"@react-spring/core": "^9.1.1",
|
|
69
69
|
"@react-spring/web": "^9.1.1",
|
|
70
70
|
"@use-gesture/react": "^10.2.4",
|
|
@@ -80,5 +80,5 @@
|
|
|
80
80
|
"publishConfig": {
|
|
81
81
|
"access": "public"
|
|
82
82
|
},
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "e16acc4643a563f4b7e98ddc1b778ea8a6c8b320"
|
|
84
84
|
}
|