@micromag/screen-gallery 0.3.310 → 0.3.318
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 +89 -95
- package/lib/index.js +90 -95
- package/package.json +12 -12
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-gallery-container .micromag-screen-gallery-background,.micromag-screen-gallery-container .micromag-screen-gallery-image,.micromag-screen-gallery-container .micromag-screen-gallery-inner{position:absolute;top:0;
|
|
1
|
+
.micromag-screen-gallery-container .micromag-screen-gallery-background,.micromag-screen-gallery-container .micromag-screen-gallery-image,.micromag-screen-gallery-container .micromag-screen-gallery-inner{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-gallery-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-gallery-disabled.micromag-screen-gallery-container{overflow:hidden;pointer-events:none}.micromag-screen-gallery-hidden.micromag-screen-gallery-container{display:none;visibility:hidden}.micromag-screen-gallery-placeholder.micromag-screen-gallery-container .micromag-screen-gallery-content{padding:6px;position:relative}.micromag-screen-gallery-container .micromag-screen-gallery-emptyCaption,.micromag-screen-gallery-container .micromag-screen-gallery-emptyImage{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-gallery-container .micromag-screen-gallery-background{z-index:0}.micromag-screen-gallery-container .micromag-screen-gallery-content{z-index:1}.micromag-screen-gallery-container .micromag-screen-gallery-inner{-webkit-transition:padding-bottom .2s ease-out;-o-transition:padding-bottom .2s ease-out;transition:padding-bottom .2s ease-out}.micromag-screen-gallery-container .micromag-screen-gallery-grid{height:100%;position:relative}.micromag-screen-gallery-container .micromag-screen-gallery-placeholder{height:100%}.micromag-screen-gallery-container .micromag-screen-gallery-emptyCaption,.micromag-screen-gallery-container .micromag-screen-gallery-emptyImage{width:100%}.micromag-screen-gallery-container .micromag-screen-gallery-emptyImage{height:100%}.micromag-screen-gallery-container .micromag-screen-gallery-emptyCaption{height:50px;margin-top:10px}.micromag-screen-gallery-container .micromag-screen-gallery-gridItem{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;position:relative}.micromag-screen-gallery-container .micromag-screen-gallery-imageContainer{-ms-flex-positive:1;flex-grow:1;overflow:hidden;position:relative}.micromag-screen-gallery-container .micromag-screen-gallery-callToAction{bottom:0;left:0;position:absolute;-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out;width:100%}.micromag-screen-gallery-container .micromag-screen-gallery-caption{padding:10px 0}
|
package/es/index.js
CHANGED
|
@@ -17,6 +17,7 @@ import Container from '@micromag/element-container';
|
|
|
17
17
|
import Grid from '@micromag/element-grid';
|
|
18
18
|
import Text from '@micromag/element-text';
|
|
19
19
|
import Visual from '@micromag/element-visual';
|
|
20
|
+
import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
|
|
20
21
|
import _extends from '@babel/runtime/helpers/extends';
|
|
21
22
|
import _objectSpread from '@babel/runtime/helpers/objectSpread2';
|
|
22
23
|
import { Mosaic, Container as Container$1 } from '@micromag/transforms/apple-news';
|
|
@@ -191,14 +192,19 @@ var layoutProps = {
|
|
|
191
192
|
}
|
|
192
193
|
};
|
|
193
194
|
|
|
194
|
-
var styles = {"container":"micromag-screen-gallery-container","
|
|
195
|
+
var styles = {"container":"micromag-screen-gallery-container","image":"micromag-screen-gallery-image","inner":"micromag-screen-gallery-inner","background":"micromag-screen-gallery-background","disabled":"micromag-screen-gallery-disabled","hidden":"micromag-screen-gallery-hidden","placeholder":"micromag-screen-gallery-placeholder","content":"micromag-screen-gallery-content","emptyImage":"micromag-screen-gallery-emptyImage","emptyCaption":"micromag-screen-gallery-emptyCaption","grid":"micromag-screen-gallery-grid","gridItem":"micromag-screen-gallery-gridItem","imageContainer":"micromag-screen-gallery-imageContainer","callToAction":"micromag-screen-gallery-callToAction","caption":"micromag-screen-gallery-caption"};
|
|
195
196
|
|
|
196
197
|
var propTypes = {
|
|
197
|
-
layout: PropTypes.oneOf([
|
|
198
|
-
|
|
199
|
-
'
|
|
200
|
-
|
|
201
|
-
'
|
|
198
|
+
layout: PropTypes.oneOf([
|
|
199
|
+
// 2
|
|
200
|
+
'two-vertical-equal', 'two-vertical-top', 'two-vertical-bottom',
|
|
201
|
+
// 3
|
|
202
|
+
'three-vertical', 'one-two', 'two-one',
|
|
203
|
+
// 4
|
|
204
|
+
'two-by-two', 'four-vertical', 'one-two-one', 'four-mosaic',
|
|
205
|
+
// 5
|
|
206
|
+
'two-one-two', 'one-two-two', 'two-two-one',
|
|
207
|
+
// 6
|
|
202
208
|
'two-by-three', 'one-one-two-two', 'two-two-one-one']),
|
|
203
209
|
images: PropTypes.oneOfType([PropTypes$1.imageMedias, PropTypes$1.imageElements]),
|
|
204
210
|
withCaptions: PropTypes.bool,
|
|
@@ -226,68 +232,57 @@ var defaultProps = {
|
|
|
226
232
|
transitionStagger: 50,
|
|
227
233
|
className: null
|
|
228
234
|
};
|
|
229
|
-
|
|
230
235
|
var GalleryScreen = function GalleryScreen(_ref) {
|
|
231
236
|
var _ref5;
|
|
232
|
-
|
|
233
237
|
var layout = _ref.layout,
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
238
|
+
images = _ref.images,
|
|
239
|
+
withCaptions = _ref.withCaptions,
|
|
240
|
+
background = _ref.background,
|
|
241
|
+
callToAction = _ref.callToAction,
|
|
242
|
+
current = _ref.current,
|
|
243
|
+
active = _ref.active,
|
|
244
|
+
spacing = _ref.spacing,
|
|
245
|
+
captionMaxLines = _ref.captionMaxLines,
|
|
246
|
+
transitions = _ref.transitions,
|
|
247
|
+
transitionStagger = _ref.transitionStagger,
|
|
248
|
+
className = _ref.className;
|
|
246
249
|
var _useScreenSize = useScreenSize(),
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
250
|
+
width = _useScreenSize.width,
|
|
251
|
+
height = _useScreenSize.height,
|
|
252
|
+
resolution = _useScreenSize.resolution;
|
|
251
253
|
var _useViewerContext = useViewerContext(),
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
254
|
+
viewerTopHeight = _useViewerContext.topHeight,
|
|
255
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
256
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
256
257
|
var _useViewerWebView = useViewerWebView(),
|
|
257
|
-
|
|
258
|
-
|
|
258
|
+
openWebView = _useViewerWebView.open;
|
|
259
259
|
var _usePlaybackContext = usePlaybackContext(),
|
|
260
|
-
|
|
261
|
-
|
|
260
|
+
muted = _usePlaybackContext.muted;
|
|
262
261
|
var mediaRef = usePlaybackMediaRef(current);
|
|
263
|
-
|
|
264
262
|
var _useScreenRenderConte = useScreenRenderContext(),
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
263
|
+
isView = _useScreenRenderConte.isView,
|
|
264
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
265
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
266
|
+
isEdit = _useScreenRenderConte.isEdit,
|
|
267
|
+
isStatic = _useScreenRenderConte.isStatic,
|
|
268
|
+
isCapture = _useScreenRenderConte.isCapture;
|
|
272
269
|
var backgroundPlaying = current && (isView || isEdit);
|
|
273
270
|
var mediaShouldLoad = current || active;
|
|
274
271
|
var finalSpacing = isPlaceholder ? 5 : spacing;
|
|
275
272
|
var grid = isPlainObject(layoutProps[layout]) ? layoutProps[layout] : {};
|
|
276
273
|
var _grid$layout = grid.layout,
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
274
|
+
gridLayout = _grid$layout === void 0 ? [] : _grid$layout,
|
|
275
|
+
_grid$vertical = grid.vertical,
|
|
276
|
+
vertical = _grid$vertical === void 0 ? false : _grid$vertical;
|
|
280
277
|
var gridSpaces = gridLayout.reduce(function (acc, _ref2) {
|
|
281
278
|
var rows = _ref2.rows,
|
|
282
|
-
|
|
279
|
+
columns = _ref2.columns;
|
|
283
280
|
return acc + (vertical ? rows : columns).length;
|
|
284
281
|
}, 0);
|
|
285
|
-
|
|
286
282
|
var _useState = useState(0),
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
283
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
284
|
+
imagesLoaded = _useState2[0],
|
|
285
|
+
setImagesLoaded = _useState2[1];
|
|
291
286
|
var imagesCount = images !== null ? Math.min(gridSpaces, images.length) : 0;
|
|
292
287
|
var ready = imagesLoaded >= imagesCount;
|
|
293
288
|
var transitionPlaying = current && ready;
|
|
@@ -298,19 +293,16 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
298
293
|
});
|
|
299
294
|
}, [setImagesLoaded]);
|
|
300
295
|
var imagesEl = useRef([]);
|
|
301
|
-
|
|
302
296
|
var _useState3 = useState([]),
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
297
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
298
|
+
imagesSizes = _useState4[0],
|
|
299
|
+
setImagesSizes = _useState4[1];
|
|
307
300
|
var _useDimensionObserver = useDimensionObserver(),
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
301
|
+
contentRef = _useDimensionObserver.ref,
|
|
302
|
+
_useDimensionObserver2 = _useDimensionObserver.width,
|
|
303
|
+
contentWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2,
|
|
304
|
+
_useDimensionObserver3 = _useDimensionObserver.height,
|
|
305
|
+
contentHeight = _useDimensionObserver3 === void 0 ? null : _useDimensionObserver3;
|
|
314
306
|
useEffect(function () {
|
|
315
307
|
if (imagesEl.current.length) {
|
|
316
308
|
setImagesSizes(imagesEl.current.map(function (imageEl) {
|
|
@@ -320,29 +312,27 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
320
312
|
} : {};
|
|
321
313
|
}));
|
|
322
314
|
}
|
|
323
|
-
}, [contentWidth, contentHeight, layout, setImagesSizes]);
|
|
315
|
+
}, [contentWidth, contentHeight, layout, setImagesSizes]);
|
|
324
316
|
|
|
317
|
+
// Call to Action
|
|
325
318
|
var _ref3 = callToAction || {},
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
319
|
+
_ref3$active = _ref3.active,
|
|
320
|
+
hasCallToAction = _ref3$active === void 0 ? false : _ref3$active;
|
|
329
321
|
var _useDimensionObserver4 = useDimensionObserver(),
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
322
|
+
callToActionRef = _useDimensionObserver4.ref,
|
|
323
|
+
_useDimensionObserver5 = _useDimensionObserver4.height,
|
|
324
|
+
callToActionHeight = _useDimensionObserver5 === void 0 ? 0 : _useDimensionObserver5;
|
|
334
325
|
|
|
326
|
+
// items
|
|
335
327
|
var items = _toConsumableArray(Array(gridSpaces)).map(function (item, itemI) {
|
|
336
328
|
var image = images !== null ? images[itemI] : null;
|
|
337
329
|
var imageSize = imagesSizes[itemI] || {};
|
|
338
330
|
var finalImage = withCaptions ? image : {
|
|
339
331
|
media: image
|
|
340
332
|
};
|
|
341
|
-
|
|
342
333
|
var _ref4 = finalImage || {},
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
334
|
+
_ref4$caption = _ref4.caption,
|
|
335
|
+
caption = _ref4$caption === void 0 ? null : _ref4$caption;
|
|
346
336
|
var hasImage = isImageFilled(finalImage);
|
|
347
337
|
var hasCaption = isTextFilled(caption);
|
|
348
338
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -409,7 +399,6 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
409
399
|
lineClamp: captionMaxLines
|
|
410
400
|
}))))) : null);
|
|
411
401
|
});
|
|
412
|
-
|
|
413
402
|
return /*#__PURE__*/React.createElement("div", {
|
|
414
403
|
className: classNames([styles.container, (_ref5 = {}, _defineProperty(_ref5, className, className !== null), _defineProperty(_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
|
|
415
404
|
"data-screen-ready": ready
|
|
@@ -455,14 +444,12 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
455
444
|
className: styles.background
|
|
456
445
|
}) : null);
|
|
457
446
|
};
|
|
458
|
-
|
|
459
447
|
GalleryScreen.propTypes = propTypes;
|
|
460
448
|
GalleryScreen.defaultProps = defaultProps;
|
|
461
449
|
var GalleryScreen$1 = /*#__PURE__*/React.memo(GalleryScreen);
|
|
462
450
|
|
|
463
451
|
function GalleryCaptionsScreen(_ref) {
|
|
464
|
-
var props = _extends({}, _ref);
|
|
465
|
-
|
|
452
|
+
var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
466
453
|
return /*#__PURE__*/React.createElement(GalleryScreen$1, Object.assign({}, props, {
|
|
467
454
|
withCaptions: true
|
|
468
455
|
}));
|
|
@@ -470,17 +457,14 @@ function GalleryCaptionsScreen(_ref) {
|
|
|
470
457
|
|
|
471
458
|
var transform = function transform(newStory, _ref) {
|
|
472
459
|
var images = _ref.images;
|
|
473
|
-
|
|
474
460
|
var _Mosaic = Mosaic(newStory, {
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
461
|
+
images: images
|
|
462
|
+
}),
|
|
463
|
+
titleStory = _Mosaic.story,
|
|
464
|
+
titleComponent = _Mosaic.component;
|
|
480
465
|
var _Container = Container$1(titleStory, _toConsumableArray(titleComponent ? [titleComponent] : [])),
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
466
|
+
containerStory = _Container.story,
|
|
467
|
+
containerComponent = _Container.component;
|
|
484
468
|
return _objectSpread(_objectSpread({}, containerStory), {}, {
|
|
485
469
|
components: [].concat(_toConsumableArray(newStory.components || []), _toConsumableArray(containerComponent ? [containerComponent] : []))
|
|
486
470
|
});
|
|
@@ -514,11 +498,16 @@ var definition = [{
|
|
|
514
498
|
}]
|
|
515
499
|
}),
|
|
516
500
|
component: GalleryScreen$1,
|
|
517
|
-
layouts: [
|
|
518
|
-
|
|
519
|
-
'
|
|
520
|
-
|
|
521
|
-
'
|
|
501
|
+
layouts: [
|
|
502
|
+
// 2
|
|
503
|
+
'two-vertical-equal', 'two-vertical-top', 'two-vertical-bottom',
|
|
504
|
+
// 3
|
|
505
|
+
'three-vertical', 'one-two', 'two-one',
|
|
506
|
+
// 4
|
|
507
|
+
'two-by-two', 'four-vertical', 'one-two-one', 'four-mosaic',
|
|
508
|
+
// 5
|
|
509
|
+
'two-one-two', 'one-two-two', 'two-two-one',
|
|
510
|
+
// 6
|
|
522
511
|
'two-by-three', 'one-one-two-two', 'two-two-one-one'],
|
|
523
512
|
transforms: transforms,
|
|
524
513
|
fields: [{
|
|
@@ -586,11 +575,16 @@ var definition = [{
|
|
|
586
575
|
}]
|
|
587
576
|
}),
|
|
588
577
|
component: GalleryCaptionsScreen,
|
|
589
|
-
layouts: [
|
|
590
|
-
|
|
591
|
-
'
|
|
592
|
-
|
|
593
|
-
'
|
|
578
|
+
layouts: [
|
|
579
|
+
// 2
|
|
580
|
+
'two-vertical-equal', 'two-vertical-top', 'two-vertical-bottom',
|
|
581
|
+
// 3
|
|
582
|
+
'three-vertical', 'one-two', 'two-one',
|
|
583
|
+
// 4
|
|
584
|
+
'two-by-two', 'four-vertical', 'one-two-one', 'four-mosaic',
|
|
585
|
+
// 5
|
|
586
|
+
'two-one-two', 'one-two-two', 'two-two-one',
|
|
587
|
+
// 6
|
|
594
588
|
'two-by-three', 'one-one-two-two', 'two-two-one-one'],
|
|
595
589
|
transforms: transforms,
|
|
596
590
|
fields: [{
|
package/lib/index.js
CHANGED
|
@@ -21,6 +21,7 @@ var Container = require('@micromag/element-container');
|
|
|
21
21
|
var Grid = require('@micromag/element-grid');
|
|
22
22
|
var Text = require('@micromag/element-text');
|
|
23
23
|
var Visual = require('@micromag/element-visual');
|
|
24
|
+
var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
|
|
24
25
|
var _extends = require('@babel/runtime/helpers/extends');
|
|
25
26
|
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
26
27
|
var appleNews = require('@micromag/transforms/apple-news');
|
|
@@ -40,6 +41,7 @@ var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
|
|
|
40
41
|
var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
|
|
41
42
|
var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
|
|
42
43
|
var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
|
|
44
|
+
var _objectDestructuringEmpty__default = /*#__PURE__*/_interopDefaultLegacy(_objectDestructuringEmpty);
|
|
43
45
|
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
44
46
|
var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
|
|
45
47
|
|
|
@@ -213,14 +215,19 @@ var layoutProps = {
|
|
|
213
215
|
}
|
|
214
216
|
};
|
|
215
217
|
|
|
216
|
-
var styles = {"container":"micromag-screen-gallery-container","
|
|
218
|
+
var styles = {"container":"micromag-screen-gallery-container","image":"micromag-screen-gallery-image","inner":"micromag-screen-gallery-inner","background":"micromag-screen-gallery-background","disabled":"micromag-screen-gallery-disabled","hidden":"micromag-screen-gallery-hidden","placeholder":"micromag-screen-gallery-placeholder","content":"micromag-screen-gallery-content","emptyImage":"micromag-screen-gallery-emptyImage","emptyCaption":"micromag-screen-gallery-emptyCaption","grid":"micromag-screen-gallery-grid","gridItem":"micromag-screen-gallery-gridItem","imageContainer":"micromag-screen-gallery-imageContainer","callToAction":"micromag-screen-gallery-callToAction","caption":"micromag-screen-gallery-caption"};
|
|
217
219
|
|
|
218
220
|
var propTypes = {
|
|
219
|
-
layout: PropTypes__default["default"].oneOf([
|
|
220
|
-
|
|
221
|
-
'
|
|
222
|
-
|
|
223
|
-
'
|
|
221
|
+
layout: PropTypes__default["default"].oneOf([
|
|
222
|
+
// 2
|
|
223
|
+
'two-vertical-equal', 'two-vertical-top', 'two-vertical-bottom',
|
|
224
|
+
// 3
|
|
225
|
+
'three-vertical', 'one-two', 'two-one',
|
|
226
|
+
// 4
|
|
227
|
+
'two-by-two', 'four-vertical', 'one-two-one', 'four-mosaic',
|
|
228
|
+
// 5
|
|
229
|
+
'two-one-two', 'one-two-two', 'two-two-one',
|
|
230
|
+
// 6
|
|
224
231
|
'two-by-three', 'one-one-two-two', 'two-two-one-one']),
|
|
225
232
|
images: PropTypes__default["default"].oneOfType([core.PropTypes.imageMedias, core.PropTypes.imageElements]),
|
|
226
233
|
withCaptions: PropTypes__default["default"].bool,
|
|
@@ -248,68 +255,57 @@ var defaultProps = {
|
|
|
248
255
|
transitionStagger: 50,
|
|
249
256
|
className: null
|
|
250
257
|
};
|
|
251
|
-
|
|
252
258
|
var GalleryScreen = function GalleryScreen(_ref) {
|
|
253
259
|
var _ref5;
|
|
254
|
-
|
|
255
260
|
var layout = _ref.layout,
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
261
|
+
images = _ref.images,
|
|
262
|
+
withCaptions = _ref.withCaptions,
|
|
263
|
+
background = _ref.background,
|
|
264
|
+
callToAction = _ref.callToAction,
|
|
265
|
+
current = _ref.current,
|
|
266
|
+
active = _ref.active,
|
|
267
|
+
spacing = _ref.spacing,
|
|
268
|
+
captionMaxLines = _ref.captionMaxLines,
|
|
269
|
+
transitions = _ref.transitions,
|
|
270
|
+
transitionStagger = _ref.transitionStagger,
|
|
271
|
+
className = _ref.className;
|
|
268
272
|
var _useScreenSize = contexts.useScreenSize(),
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
+
width = _useScreenSize.width,
|
|
274
|
+
height = _useScreenSize.height,
|
|
275
|
+
resolution = _useScreenSize.resolution;
|
|
273
276
|
var _useViewerContext = contexts.useViewerContext(),
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
277
|
+
viewerTopHeight = _useViewerContext.topHeight,
|
|
278
|
+
viewerBottomHeight = _useViewerContext.bottomHeight,
|
|
279
|
+
viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
|
|
278
280
|
var _useViewerWebView = contexts.useViewerWebView(),
|
|
279
|
-
|
|
280
|
-
|
|
281
|
+
openWebView = _useViewerWebView.open;
|
|
281
282
|
var _usePlaybackContext = contexts.usePlaybackContext(),
|
|
282
|
-
|
|
283
|
-
|
|
283
|
+
muted = _usePlaybackContext.muted;
|
|
284
284
|
var mediaRef = contexts.usePlaybackMediaRef(current);
|
|
285
|
-
|
|
286
285
|
var _useScreenRenderConte = contexts.useScreenRenderContext(),
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
286
|
+
isView = _useScreenRenderConte.isView,
|
|
287
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
288
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
289
|
+
isEdit = _useScreenRenderConte.isEdit,
|
|
290
|
+
isStatic = _useScreenRenderConte.isStatic,
|
|
291
|
+
isCapture = _useScreenRenderConte.isCapture;
|
|
294
292
|
var backgroundPlaying = current && (isView || isEdit);
|
|
295
293
|
var mediaShouldLoad = current || active;
|
|
296
294
|
var finalSpacing = isPlaceholder ? 5 : spacing;
|
|
297
295
|
var grid = isPlainObject__default["default"](layoutProps[layout]) ? layoutProps[layout] : {};
|
|
298
296
|
var _grid$layout = grid.layout,
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
297
|
+
gridLayout = _grid$layout === void 0 ? [] : _grid$layout,
|
|
298
|
+
_grid$vertical = grid.vertical,
|
|
299
|
+
vertical = _grid$vertical === void 0 ? false : _grid$vertical;
|
|
302
300
|
var gridSpaces = gridLayout.reduce(function (acc, _ref2) {
|
|
303
301
|
var rows = _ref2.rows,
|
|
304
|
-
|
|
302
|
+
columns = _ref2.columns;
|
|
305
303
|
return acc + (vertical ? rows : columns).length;
|
|
306
304
|
}, 0);
|
|
307
|
-
|
|
308
305
|
var _useState = React.useState(0),
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
306
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
307
|
+
imagesLoaded = _useState2[0],
|
|
308
|
+
setImagesLoaded = _useState2[1];
|
|
313
309
|
var imagesCount = images !== null ? Math.min(gridSpaces, images.length) : 0;
|
|
314
310
|
var ready = imagesLoaded >= imagesCount;
|
|
315
311
|
var transitionPlaying = current && ready;
|
|
@@ -320,19 +316,16 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
320
316
|
});
|
|
321
317
|
}, [setImagesLoaded]);
|
|
322
318
|
var imagesEl = React.useRef([]);
|
|
323
|
-
|
|
324
319
|
var _useState3 = React.useState([]),
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
320
|
+
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
321
|
+
imagesSizes = _useState4[0],
|
|
322
|
+
setImagesSizes = _useState4[1];
|
|
329
323
|
var _useDimensionObserver = hooks.useDimensionObserver(),
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
324
|
+
contentRef = _useDimensionObserver.ref,
|
|
325
|
+
_useDimensionObserver2 = _useDimensionObserver.width,
|
|
326
|
+
contentWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2,
|
|
327
|
+
_useDimensionObserver3 = _useDimensionObserver.height,
|
|
328
|
+
contentHeight = _useDimensionObserver3 === void 0 ? null : _useDimensionObserver3;
|
|
336
329
|
React.useEffect(function () {
|
|
337
330
|
if (imagesEl.current.length) {
|
|
338
331
|
setImagesSizes(imagesEl.current.map(function (imageEl) {
|
|
@@ -342,29 +335,27 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
342
335
|
} : {};
|
|
343
336
|
}));
|
|
344
337
|
}
|
|
345
|
-
}, [contentWidth, contentHeight, layout, setImagesSizes]);
|
|
338
|
+
}, [contentWidth, contentHeight, layout, setImagesSizes]);
|
|
346
339
|
|
|
340
|
+
// Call to Action
|
|
347
341
|
var _ref3 = callToAction || {},
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
342
|
+
_ref3$active = _ref3.active,
|
|
343
|
+
hasCallToAction = _ref3$active === void 0 ? false : _ref3$active;
|
|
351
344
|
var _useDimensionObserver4 = hooks.useDimensionObserver(),
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
345
|
+
callToActionRef = _useDimensionObserver4.ref,
|
|
346
|
+
_useDimensionObserver5 = _useDimensionObserver4.height,
|
|
347
|
+
callToActionHeight = _useDimensionObserver5 === void 0 ? 0 : _useDimensionObserver5;
|
|
356
348
|
|
|
349
|
+
// items
|
|
357
350
|
var items = _toConsumableArray__default["default"](Array(gridSpaces)).map(function (item, itemI) {
|
|
358
351
|
var image = images !== null ? images[itemI] : null;
|
|
359
352
|
var imageSize = imagesSizes[itemI] || {};
|
|
360
353
|
var finalImage = withCaptions ? image : {
|
|
361
354
|
media: image
|
|
362
355
|
};
|
|
363
|
-
|
|
364
356
|
var _ref4 = finalImage || {},
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
357
|
+
_ref4$caption = _ref4.caption,
|
|
358
|
+
caption = _ref4$caption === void 0 ? null : _ref4$caption;
|
|
368
359
|
var hasImage = utils.isImageFilled(finalImage);
|
|
369
360
|
var hasCaption = utils.isTextFilled(caption);
|
|
370
361
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
@@ -431,7 +422,6 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
431
422
|
lineClamp: captionMaxLines
|
|
432
423
|
}))))) : null);
|
|
433
424
|
});
|
|
434
|
-
|
|
435
425
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
436
426
|
className: classNames__default["default"]([styles.container, (_ref5 = {}, _defineProperty__default["default"](_ref5, className, className !== null), _defineProperty__default["default"](_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
|
|
437
427
|
"data-screen-ready": ready
|
|
@@ -477,14 +467,12 @@ var GalleryScreen = function GalleryScreen(_ref) {
|
|
|
477
467
|
className: styles.background
|
|
478
468
|
}) : null);
|
|
479
469
|
};
|
|
480
|
-
|
|
481
470
|
GalleryScreen.propTypes = propTypes;
|
|
482
471
|
GalleryScreen.defaultProps = defaultProps;
|
|
483
472
|
var GalleryScreen$1 = /*#__PURE__*/React__default["default"].memo(GalleryScreen);
|
|
484
473
|
|
|
485
474
|
function GalleryCaptionsScreen(_ref) {
|
|
486
|
-
var props = _extends__default["default"]({}, _ref);
|
|
487
|
-
|
|
475
|
+
var props = _extends__default["default"]({}, (_objectDestructuringEmpty__default["default"](_ref), _ref));
|
|
488
476
|
return /*#__PURE__*/React__default["default"].createElement(GalleryScreen$1, Object.assign({}, props, {
|
|
489
477
|
withCaptions: true
|
|
490
478
|
}));
|
|
@@ -492,17 +480,14 @@ function GalleryCaptionsScreen(_ref) {
|
|
|
492
480
|
|
|
493
481
|
var transform = function transform(newStory, _ref) {
|
|
494
482
|
var images = _ref.images;
|
|
495
|
-
|
|
496
483
|
var _Mosaic = appleNews.Mosaic(newStory, {
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
484
|
+
images: images
|
|
485
|
+
}),
|
|
486
|
+
titleStory = _Mosaic.story,
|
|
487
|
+
titleComponent = _Mosaic.component;
|
|
502
488
|
var _Container = appleNews.Container(titleStory, _toConsumableArray__default["default"](titleComponent ? [titleComponent] : [])),
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
489
|
+
containerStory = _Container.story,
|
|
490
|
+
containerComponent = _Container.component;
|
|
506
491
|
return _objectSpread__default["default"](_objectSpread__default["default"]({}, containerStory), {}, {
|
|
507
492
|
components: [].concat(_toConsumableArray__default["default"](newStory.components || []), _toConsumableArray__default["default"](containerComponent ? [containerComponent] : []))
|
|
508
493
|
});
|
|
@@ -536,11 +521,16 @@ var definition = [{
|
|
|
536
521
|
}]
|
|
537
522
|
}),
|
|
538
523
|
component: GalleryScreen$1,
|
|
539
|
-
layouts: [
|
|
540
|
-
|
|
541
|
-
'
|
|
542
|
-
|
|
543
|
-
'
|
|
524
|
+
layouts: [
|
|
525
|
+
// 2
|
|
526
|
+
'two-vertical-equal', 'two-vertical-top', 'two-vertical-bottom',
|
|
527
|
+
// 3
|
|
528
|
+
'three-vertical', 'one-two', 'two-one',
|
|
529
|
+
// 4
|
|
530
|
+
'two-by-two', 'four-vertical', 'one-two-one', 'four-mosaic',
|
|
531
|
+
// 5
|
|
532
|
+
'two-one-two', 'one-two-two', 'two-two-one',
|
|
533
|
+
// 6
|
|
544
534
|
'two-by-three', 'one-one-two-two', 'two-two-one-one'],
|
|
545
535
|
transforms: transforms,
|
|
546
536
|
fields: [{
|
|
@@ -608,11 +598,16 @@ var definition = [{
|
|
|
608
598
|
}]
|
|
609
599
|
}),
|
|
610
600
|
component: GalleryCaptionsScreen,
|
|
611
|
-
layouts: [
|
|
612
|
-
|
|
613
|
-
'
|
|
614
|
-
|
|
615
|
-
'
|
|
601
|
+
layouts: [
|
|
602
|
+
// 2
|
|
603
|
+
'two-vertical-equal', 'two-vertical-top', 'two-vertical-bottom',
|
|
604
|
+
// 3
|
|
605
|
+
'three-vertical', 'one-two', 'two-one',
|
|
606
|
+
// 4
|
|
607
|
+
'two-by-two', 'four-vertical', 'one-two-one', 'four-mosaic',
|
|
608
|
+
// 5
|
|
609
|
+
'two-one-two', 'one-two-two', 'two-two-one',
|
|
610
|
+
// 6
|
|
616
611
|
'two-by-three', 'one-one-two-two', 'two-two-one-one'],
|
|
617
612
|
transforms: transforms,
|
|
618
613
|
fields: [{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-gallery",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.318",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -49,23 +49,23 @@
|
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@babel/runtime": "^7.13.10",
|
|
52
|
-
"@micromag/core": "^0.3.
|
|
53
|
-
"@micromag/element-background": "^0.3.
|
|
54
|
-
"@micromag/element-call-to-action": "^0.3.
|
|
55
|
-
"@micromag/element-container": "^0.3.
|
|
56
|
-
"@micromag/element-grid": "^0.3.
|
|
57
|
-
"@micromag/element-layout": "^0.3.
|
|
58
|
-
"@micromag/element-text": "^0.3.
|
|
59
|
-
"@micromag/element-visual": "^0.3.
|
|
60
|
-
"@micromag/transforms": "^0.3.
|
|
52
|
+
"@micromag/core": "^0.3.318",
|
|
53
|
+
"@micromag/element-background": "^0.3.318",
|
|
54
|
+
"@micromag/element-call-to-action": "^0.3.318",
|
|
55
|
+
"@micromag/element-container": "^0.3.318",
|
|
56
|
+
"@micromag/element-grid": "^0.3.318",
|
|
57
|
+
"@micromag/element-layout": "^0.3.318",
|
|
58
|
+
"@micromag/element-text": "^0.3.318",
|
|
59
|
+
"@micromag/element-visual": "^0.3.318",
|
|
60
|
+
"@micromag/transforms": "^0.3.318",
|
|
61
61
|
"classnames": "^2.2.6",
|
|
62
62
|
"lodash": "^4.17.21",
|
|
63
63
|
"prop-types": "^15.7.2",
|
|
64
64
|
"react-intl": "^5.12.1",
|
|
65
|
-
"uuid": "^
|
|
65
|
+
"uuid": "^9.0.0"
|
|
66
66
|
},
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "7d1a296e0c0d410e1225279e1f19e3a7715bfa96"
|
|
71
71
|
}
|