@micromag/screen-slideshow 0.3.348 → 0.3.354

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.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +67 -46
  3. package/lib/index.js +68 -46
  4. package/package.json +11 -10
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-slideshow-container .micromag-screen-slideshow-background,.micromag-screen-slideshow-container .micromag-screen-slideshow-inner{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-slideshow-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-slideshow-disabled.micromag-screen-slideshow-container{overflow:hidden;pointer-events:none}.micromag-screen-slideshow-hidden.micromag-screen-slideshow-container{display:none;visibility:hidden}.micromag-screen-slideshow-placeholder.micromag-screen-slideshow-container .micromag-screen-slideshow-content{padding:6px;position:relative}.micromag-screen-slideshow-container .micromag-screen-slideshow-background{z-index:0}.micromag-screen-slideshow-container .micromag-screen-slideshow-content{z-index:1}
1
+ .micromag-screen-slideshow-container .micromag-screen-slideshow-background,.micromag-screen-slideshow-container .micromag-screen-slideshow-inner{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-slideshow-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-slideshow-disabled.micromag-screen-slideshow-container{overflow:hidden;pointer-events:none}.micromag-screen-slideshow-hidden.micromag-screen-slideshow-container{display:none;visibility:hidden}.micromag-screen-slideshow-placeholder.micromag-screen-slideshow-container .micromag-screen-slideshow-content{padding:6px;position:relative}.micromag-screen-slideshow-container .micromag-screen-slideshow-background{z-index:0}.micromag-screen-slideshow-container .micromag-screen-slideshow-content{z-index:1}.micromag-screen-slideshow-container .micromag-screen-slideshow-header{left:0;position:absolute;top:0;width:100%;z-index:2}.micromag-screen-slideshow-container .micromag-screen-slideshow-footer{bottom:0;left:0;position:absolute;width:100%}
package/es/index.js CHANGED
@@ -8,36 +8,41 @@ import { PropTypes as PropTypes$1 } from '@micromag/core';
8
8
  import { Transitions, ScreenElement } from '@micromag/core/components';
9
9
  import { useScreenSize, useViewerContext, useViewerInteraction, useScreenRenderContext } from '@micromag/core/contexts';
10
10
  import { useDimensionObserver } from '@micromag/core/hooks';
11
- import { isTextFilled } from '@micromag/core/utils';
11
+ import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled } from '@micromag/core/utils';
12
12
  import Background from '@micromag/element-background';
13
- import CallToAction from '@micromag/element-call-to-action';
14
13
  import Container from '@micromag/element-container';
14
+ import Footer from '@micromag/element-footer';
15
+ import Header from '@micromag/element-header';
15
16
  import Text from '@micromag/element-text';
16
17
  import Visual from '@micromag/element-visual';
17
18
 
18
- var styles = {"container":"micromag-screen-slideshow-container","inner":"micromag-screen-slideshow-inner","background":"micromag-screen-slideshow-background","disabled":"micromag-screen-slideshow-disabled","hidden":"micromag-screen-slideshow-hidden","placeholder":"micromag-screen-slideshow-placeholder","content":"micromag-screen-slideshow-content"};
19
+ var styles = {"container":"micromag-screen-slideshow-container","inner":"micromag-screen-slideshow-inner","background":"micromag-screen-slideshow-background","disabled":"micromag-screen-slideshow-disabled","hidden":"micromag-screen-slideshow-hidden","placeholder":"micromag-screen-slideshow-placeholder","content":"micromag-screen-slideshow-content","header":"micromag-screen-slideshow-header","footer":"micromag-screen-slideshow-footer"};
20
+
21
+ // TODO: make this happen
19
22
 
20
23
  var propTypes = {
21
- layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
24
+ // layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
22
25
  slides: PropTypes.oneOfType([PropTypes$1.imageMedias, PropTypes$1.imageElements]),
23
26
  withCaptions: PropTypes.bool,
24
27
  spacing: PropTypes.number,
25
28
  captionMaxLines: PropTypes.number,
26
29
  background: PropTypes$1.backgroundElement,
27
- callToAction: PropTypes$1.callToAction,
30
+ header: PropTypes$1.header,
31
+ footer: PropTypes$1.footer,
28
32
  current: PropTypes.bool,
29
33
  active: PropTypes.bool,
30
34
  transitions: PropTypes$1.transitions,
31
35
  className: PropTypes.string
32
36
  };
33
37
  var defaultProps = {
34
- layout: 'middle',
38
+ // layout: 'middle',
35
39
  withCaptions: false,
36
40
  slides: [],
37
41
  spacing: 20,
38
42
  captionMaxLines: 2,
39
43
  background: null,
40
- callToAction: null,
44
+ header: null,
45
+ footer: null,
41
46
  current: true,
42
47
  active: true,
43
48
  transitions: null,
@@ -48,7 +53,8 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
48
53
  var slides = _ref.slides,
49
54
  withCaptions = _ref.withCaptions,
50
55
  background = _ref.background,
51
- callToAction = _ref.callToAction,
56
+ header = _ref.header,
57
+ footer = _ref.footer,
52
58
  current = _ref.current,
53
59
  active = _ref.active,
54
60
  spacing = _ref.spacing,
@@ -81,32 +87,43 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
81
87
  setImagesLoaded = _useState2[1];
82
88
  var ready = true;
83
89
  var transitionPlaying = current && ready;
84
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
90
+ var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview;
85
91
  var onImageLoaded = useCallback(function () {
86
92
  setImagesLoaded(imagesLoaded + 1);
87
93
  }, [imagesLoaded, setImagesLoaded]);
88
94
  var imagesEl = useRef([]);
89
95
 
90
- // Call to Action
91
- var hasCallToAction = callToAction !== null && callToAction.active === true;
96
+ // Head and foot
97
+ var hasHeader = isHeaderFilled(header);
98
+ var hasFooter = isFooterFilled(footer);
99
+ var footerProps = getFooterProps(footer, {
100
+ isView: isView,
101
+ current: current,
102
+ isPreview: isPreview,
103
+ enableInteraction: enableInteraction,
104
+ disableInteraction: disableInteraction
105
+ });
92
106
  var _useDimensionObserver = useDimensionObserver(),
93
- callToActionRef = _useDimensionObserver.ref,
107
+ footerRef = _useDimensionObserver.ref,
94
108
  _useDimensionObserver2 = _useDimensionObserver.height,
95
- callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
109
+ footerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
110
+ var _useDimensionObserver3 = useDimensionObserver(),
111
+ headerRef = _useDimensionObserver3.ref;
112
+ _useDimensionObserver3.height;
96
113
  var items = (slides || []).map(function (item, itemI) {
97
114
  var _ref2 = item || {},
98
- _ref2$visual = _ref2.visual,
99
- visual = _ref2$visual === void 0 ? null : _ref2$visual,
115
+ _ref2$media = _ref2.media,
116
+ media = _ref2$media === void 0 ? null : _ref2$media,
100
117
  _ref2$caption = _ref2.caption,
101
118
  caption = _ref2$caption === void 0 ? null : _ref2$caption;
102
119
  var imageSize = {
103
- width: width / 2,
104
- height: height / 2
120
+ width: width,
121
+ height: height
105
122
  };
106
-
123
+ // console.log(imageSize);
107
124
  // const { caption = null } = finalImage || {};
108
125
 
109
- var hasImage = visual !== null;
126
+ var hasImage = media !== null;
110
127
  var hasCaption = isTextFilled(caption);
111
128
  return /*#__PURE__*/React.createElement("div", {
112
129
  key: "item-".concat(itemI),
@@ -139,7 +156,7 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
139
156
  isEmpty: !hasImage
140
157
  }, mediaShouldLoad ? /*#__PURE__*/React.createElement(Visual, Object.assign({
141
158
  className: styles.image,
142
- media: visual
159
+ media: media
143
160
  }, imageSize, {
144
161
  resolution: resolution,
145
162
  objectFit: {
@@ -183,25 +200,21 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
183
200
  className: styles.inner,
184
201
  style: {
185
202
  paddingTop: !isPreview ? viewerTopHeight : null,
186
- paddingBottom: (hasCallToAction ? callToActionHeight - finalSpacing : 0) + (current && !isPreview ? viewerBottomHeight : 0)
203
+ paddingBottom: (hasFooter ? footerHeight - finalSpacing : 0) + (current && !isPreview ? viewerBottomHeight : 0)
187
204
  }
188
- }, items, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
205
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
206
+ className: styles.header,
207
+ ref: headerRef,
189
208
  style: {
190
- marginTop: -finalSpacing
209
+ padding: finalSpacing
191
210
  }
192
- }, /*#__PURE__*/React.createElement(CallToAction, {
193
- ref: callToActionRef,
194
- className: styles.callToAction,
195
- callToAction: callToAction,
196
- animationDisabled: isPreview,
197
- focusable: current && isView,
198
- screenSize: {
199
- width: width,
200
- height: height
201
- },
202
- enableInteraction: enableInteraction,
203
- disableInteraction: disableInteraction
204
- })) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
211
+ }, /*#__PURE__*/React.createElement(Header, header)) : null, items, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
212
+ className: styles.footer,
213
+ ref: footerRef,
214
+ style: {
215
+ padding: finalSpacing / 2
216
+ }
217
+ }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
205
218
  background: background,
206
219
  width: width,
207
220
  height: height,
@@ -273,17 +286,25 @@ var definition = [{
273
286
  }]
274
287
  })
275
288
  }, {
276
- name: 'callToAction',
277
- type: 'call-to-action',
278
- theme: {
279
- boxStyle: 'cta',
280
- label: {
281
- textStyle: 'cta'
282
- }
283
- }
289
+ name: 'header',
290
+ type: 'header',
291
+ label: defineMessage({
292
+ id: "rhuDxI",
293
+ defaultMessage: [{
294
+ "type": 0,
295
+ "value": "Header"
296
+ }]
297
+ })
284
298
  }, {
285
- name: 'shareIncentive',
286
- type: 'share-incentive'
299
+ name: 'footer',
300
+ type: 'footer',
301
+ label: defineMessage({
302
+ id: "g4nybp",
303
+ defaultMessage: [{
304
+ "type": 0,
305
+ "value": "Footer"
306
+ }]
307
+ })
287
308
  }]
288
309
  }];
289
310
 
package/lib/index.js CHANGED
@@ -14,8 +14,9 @@ var contexts = require('@micromag/core/contexts');
14
14
  var hooks = require('@micromag/core/hooks');
15
15
  var utils = require('@micromag/core/utils');
16
16
  var Background = require('@micromag/element-background');
17
- var CallToAction = require('@micromag/element-call-to-action');
18
17
  var Container = require('@micromag/element-container');
18
+ var Footer = require('@micromag/element-footer');
19
+ var Header = require('@micromag/element-header');
19
20
  var Text = require('@micromag/element-text');
20
21
  var Visual = require('@micromag/element-visual');
21
22
 
@@ -27,34 +28,39 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
27
28
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
28
29
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
29
30
  var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
30
- var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
31
31
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
32
+ var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
33
+ var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
32
34
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
33
35
  var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
34
36
 
35
- var styles = {"container":"micromag-screen-slideshow-container","inner":"micromag-screen-slideshow-inner","background":"micromag-screen-slideshow-background","disabled":"micromag-screen-slideshow-disabled","hidden":"micromag-screen-slideshow-hidden","placeholder":"micromag-screen-slideshow-placeholder","content":"micromag-screen-slideshow-content"};
37
+ var styles = {"container":"micromag-screen-slideshow-container","inner":"micromag-screen-slideshow-inner","background":"micromag-screen-slideshow-background","disabled":"micromag-screen-slideshow-disabled","hidden":"micromag-screen-slideshow-hidden","placeholder":"micromag-screen-slideshow-placeholder","content":"micromag-screen-slideshow-content","header":"micromag-screen-slideshow-header","footer":"micromag-screen-slideshow-footer"};
38
+
39
+ // TODO: make this happen
36
40
 
37
41
  var propTypes = {
38
- layout: PropTypes__default["default"].oneOf(['top', 'middle', 'bottom']),
42
+ // layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
39
43
  slides: PropTypes__default["default"].oneOfType([core.PropTypes.imageMedias, core.PropTypes.imageElements]),
40
44
  withCaptions: PropTypes__default["default"].bool,
41
45
  spacing: PropTypes__default["default"].number,
42
46
  captionMaxLines: PropTypes__default["default"].number,
43
47
  background: core.PropTypes.backgroundElement,
44
- callToAction: core.PropTypes.callToAction,
48
+ header: core.PropTypes.header,
49
+ footer: core.PropTypes.footer,
45
50
  current: PropTypes__default["default"].bool,
46
51
  active: PropTypes__default["default"].bool,
47
52
  transitions: core.PropTypes.transitions,
48
53
  className: PropTypes__default["default"].string
49
54
  };
50
55
  var defaultProps = {
51
- layout: 'middle',
56
+ // layout: 'middle',
52
57
  withCaptions: false,
53
58
  slides: [],
54
59
  spacing: 20,
55
60
  captionMaxLines: 2,
56
61
  background: null,
57
- callToAction: null,
62
+ header: null,
63
+ footer: null,
58
64
  current: true,
59
65
  active: true,
60
66
  transitions: null,
@@ -65,7 +71,8 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
65
71
  var slides = _ref.slides,
66
72
  withCaptions = _ref.withCaptions,
67
73
  background = _ref.background,
68
- callToAction = _ref.callToAction,
74
+ header = _ref.header,
75
+ footer = _ref.footer,
69
76
  current = _ref.current,
70
77
  active = _ref.active,
71
78
  spacing = _ref.spacing,
@@ -98,32 +105,43 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
98
105
  setImagesLoaded = _useState2[1];
99
106
  var ready = true;
100
107
  var transitionPlaying = current && ready;
101
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
108
+ var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview;
102
109
  var onImageLoaded = React.useCallback(function () {
103
110
  setImagesLoaded(imagesLoaded + 1);
104
111
  }, [imagesLoaded, setImagesLoaded]);
105
112
  var imagesEl = React.useRef([]);
106
113
 
107
- // Call to Action
108
- var hasCallToAction = callToAction !== null && callToAction.active === true;
114
+ // Head and foot
115
+ var hasHeader = utils.isHeaderFilled(header);
116
+ var hasFooter = utils.isFooterFilled(footer);
117
+ var footerProps = utils.getFooterProps(footer, {
118
+ isView: isView,
119
+ current: current,
120
+ isPreview: isPreview,
121
+ enableInteraction: enableInteraction,
122
+ disableInteraction: disableInteraction
123
+ });
109
124
  var _useDimensionObserver = hooks.useDimensionObserver(),
110
- callToActionRef = _useDimensionObserver.ref,
125
+ footerRef = _useDimensionObserver.ref,
111
126
  _useDimensionObserver2 = _useDimensionObserver.height,
112
- callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
127
+ footerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
128
+ var _useDimensionObserver3 = hooks.useDimensionObserver(),
129
+ headerRef = _useDimensionObserver3.ref;
130
+ _useDimensionObserver3.height;
113
131
  var items = (slides || []).map(function (item, itemI) {
114
132
  var _ref2 = item || {},
115
- _ref2$visual = _ref2.visual,
116
- visual = _ref2$visual === void 0 ? null : _ref2$visual,
133
+ _ref2$media = _ref2.media,
134
+ media = _ref2$media === void 0 ? null : _ref2$media,
117
135
  _ref2$caption = _ref2.caption,
118
136
  caption = _ref2$caption === void 0 ? null : _ref2$caption;
119
137
  var imageSize = {
120
- width: width / 2,
121
- height: height / 2
138
+ width: width,
139
+ height: height
122
140
  };
123
-
141
+ // console.log(imageSize);
124
142
  // const { caption = null } = finalImage || {};
125
143
 
126
- var hasImage = visual !== null;
144
+ var hasImage = media !== null;
127
145
  var hasCaption = utils.isTextFilled(caption);
128
146
  return /*#__PURE__*/React__default["default"].createElement("div", {
129
147
  key: "item-".concat(itemI),
@@ -156,7 +174,7 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
156
174
  isEmpty: !hasImage
157
175
  }, mediaShouldLoad ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], Object.assign({
158
176
  className: styles.image,
159
- media: visual
177
+ media: media
160
178
  }, imageSize, {
161
179
  resolution: resolution,
162
180
  objectFit: {
@@ -200,25 +218,21 @@ var SlideshowScreen = function SlideshowScreen(_ref) {
200
218
  className: styles.inner,
201
219
  style: {
202
220
  paddingTop: !isPreview ? viewerTopHeight : null,
203
- paddingBottom: (hasCallToAction ? callToActionHeight - finalSpacing : 0) + (current && !isPreview ? viewerBottomHeight : 0)
221
+ paddingBottom: (hasFooter ? footerHeight - finalSpacing : 0) + (current && !isPreview ? viewerBottomHeight : 0)
204
222
  }
205
- }, items, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
223
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
224
+ className: styles.header,
225
+ ref: headerRef,
206
226
  style: {
207
- marginTop: -finalSpacing
227
+ padding: finalSpacing
208
228
  }
209
- }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
210
- ref: callToActionRef,
211
- className: styles.callToAction,
212
- callToAction: callToAction,
213
- animationDisabled: isPreview,
214
- focusable: current && isView,
215
- screenSize: {
216
- width: width,
217
- height: height
218
- },
219
- enableInteraction: enableInteraction,
220
- disableInteraction: disableInteraction
221
- })) : null)), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
229
+ }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, items, !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
230
+ className: styles.footer,
231
+ ref: footerRef,
232
+ style: {
233
+ padding: finalSpacing / 2
234
+ }
235
+ }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
222
236
  background: background,
223
237
  width: width,
224
238
  height: height,
@@ -290,17 +304,25 @@ var definition = [{
290
304
  }]
291
305
  })
292
306
  }, {
293
- name: 'callToAction',
294
- type: 'call-to-action',
295
- theme: {
296
- boxStyle: 'cta',
297
- label: {
298
- textStyle: 'cta'
299
- }
300
- }
307
+ name: 'header',
308
+ type: 'header',
309
+ label: reactIntl.defineMessage({
310
+ id: "rhuDxI",
311
+ defaultMessage: [{
312
+ "type": 0,
313
+ "value": "Header"
314
+ }]
315
+ })
301
316
  }, {
302
- name: 'shareIncentive',
303
- type: 'share-incentive'
317
+ name: 'footer',
318
+ type: 'footer',
319
+ label: reactIntl.defineMessage({
320
+ id: "g4nybp",
321
+ defaultMessage: [{
322
+ "type": 0,
323
+ "value": "Footer"
324
+ }]
325
+ })
304
326
  }]
305
327
  }];
306
328
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-slideshow",
3
- "version": "0.3.348",
3
+ "version": "0.3.354",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,14 +49,15 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.348",
53
- "@micromag/element-background": "^0.3.348",
54
- "@micromag/element-call-to-action": "^0.3.348",
55
- "@micromag/element-container": "^0.3.348",
56
- "@micromag/element-layout": "^0.3.348",
57
- "@micromag/element-text": "^0.3.348",
58
- "@micromag/element-visual": "^0.3.348",
59
- "@micromag/transforms": "^0.3.348",
52
+ "@micromag/core": "^0.3.354",
53
+ "@micromag/element-background": "^0.3.354",
54
+ "@micromag/element-container": "^0.3.354",
55
+ "@micromag/element-footer": "^0.3.354",
56
+ "@micromag/element-header": "^0.3.354",
57
+ "@micromag/element-layout": "^0.3.354",
58
+ "@micromag/element-text": "^0.3.354",
59
+ "@micromag/element-visual": "^0.3.354",
60
+ "@micromag/transforms": "^0.3.354",
60
61
  "classnames": "^2.2.6",
61
62
  "lodash": "^4.17.21",
62
63
  "prop-types": "^15.7.2",
@@ -66,5 +67,5 @@
66
67
  "publishConfig": {
67
68
  "access": "public"
68
69
  },
69
- "gitHead": "20ef008fdf5c678004b740f395f51cb548591dad"
70
+ "gitHead": "ccf852d0a7df8f222365088e7de3843492e720e7"
70
71
  }