@micromag/screen-article 0.3.403 → 0.3.408

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 +24 -7
  3. package/lib/index.js +24 -7
  4. package/package.json +14 -14
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-article-container .micromag-screen-article-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-article-container{position:relative}.micromag-screen-article-container .micromag-screen-article-background{z-index:0}.micromag-screen-article-container .micromag-screen-article-content{z-index:1}.micromag-screen-article-container .micromag-screen-article-layout{position:relative}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{margin:10px auto;padding:12px 0 10px;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle{-ms-flex-negative:0;flex-shrink:0;padding:4px 0;width:50%}.micromag-screen-article-container .micromag-screen-article-visualContainer{left:0;position:absolute;top:0;z-index:-1}.micromag-screen-article-container .micromag-screen-article-surtitle{font-size:12px;width:100%}.micromag-screen-article-container .micromag-screen-article-date{font-size:12px;text-align:right;width:100%}.micromag-screen-article-container .micromag-screen-article-title{margin:10px 0}.micromag-screen-article-container .micromag-screen-article-text{margin-top:2.5em}.micromag-screen-article-container .micromag-screen-article-topContent{-ms-flex-pack:justify;display:-ms-flexbox;display:flex;justify-content:space-between}.micromag-screen-article-container .micromag-screen-article-footer{-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-article-container .micromag-screen-article-footer a{padding:0}.micromag-screen-article-container .micromag-screen-article-footer.micromag-screen-article-disabled{opacity:0;pointer-events:none}.micromag-screen-article-container.micromag-screen-article-isPlaceholder .micromag-screen-article-layout{padding:10px}
1
+ .micromag-screen-article-container .micromag-screen-article-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-article-container{position:relative}.micromag-screen-article-container .micromag-screen-article-background{z-index:0}.micromag-screen-article-container .micromag-screen-article-content{z-index:1}.micromag-screen-article-container .micromag-screen-article-layout{position:relative}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{margin:10px auto;padding:12px 0 10px;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle{-ms-flex-negative:0;flex-shrink:0;padding:4px 0;width:50%}.micromag-screen-article-container .micromag-screen-article-visualContainer{height:auto;left:0;position:absolute;top:0;width:100%;z-index:-1}.micromag-screen-article-container .micromag-screen-article-surtitle{font-size:12px;width:100%}.micromag-screen-article-container .micromag-screen-article-date{font-size:12px;text-align:right;width:100%}.micromag-screen-article-container .micromag-screen-article-title{margin:10px 0}.micromag-screen-article-container .micromag-screen-article-text{margin-top:2.5em}.micromag-screen-article-container .micromag-screen-article-text blockquote,.micromag-screen-article-container .micromag-screen-article-text h2,.micromag-screen-article-container .micromag-screen-article-text h3,.micromag-screen-article-container .micromag-screen-article-text img,.micromag-screen-article-container .micromag-screen-article-text ol,.micromag-screen-article-container .micromag-screen-article-text p,.micromag-screen-article-container .micromag-screen-article-text ul{margin-bottom:1rem}.micromag-screen-article-container .micromag-screen-article-text blockquote:last-child,.micromag-screen-article-container .micromag-screen-article-text h2:last-child,.micromag-screen-article-container .micromag-screen-article-text h3:last-child,.micromag-screen-article-container .micromag-screen-article-text img:last-child,.micromag-screen-article-container .micromag-screen-article-text ol:last-child,.micromag-screen-article-container .micromag-screen-article-text p:last-child,.micromag-screen-article-container .micromag-screen-article-text ul:last-child{margin-bottom:0}.micromag-screen-article-container .micromag-screen-article-text h2{font-size:2em}.micromag-screen-article-container .micromag-screen-article-text h3{font-size:1.5em}.micromag-screen-article-container .micromag-screen-article-text ol,.micromag-screen-article-container .micromag-screen-article-text ul{list-style-position:inside}.micromag-screen-article-container .micromag-screen-article-text blockquote{border-left:1px solid;padding-left:.5em}.micromag-screen-article-container .micromag-screen-article-topContent{-ms-flex-pack:justify;display:-ms-flexbox;display:flex;justify-content:space-between}.micromag-screen-article-container .micromag-screen-article-footer{-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-article-container .micromag-screen-article-footer a{padding:0}.micromag-screen-article-container .micromag-screen-article-footer.micromag-screen-article-disabled{opacity:0;pointer-events:none}.micromag-screen-article-container.micromag-screen-article-isPlaceholder .micromag-screen-article-layout{padding:10px}
package/es/index.js CHANGED
@@ -61,7 +61,7 @@ var defaultProps = {
61
61
  className: null
62
62
  };
63
63
  var ArticleScreen = function ArticleScreen(_ref) {
64
- var _ref3;
64
+ var _ref5;
65
65
  var image = _ref.image,
66
66
  title = _ref.title,
67
67
  surtitle = _ref.surtitle,
@@ -114,13 +114,26 @@ var ArticleScreen = function ArticleScreen(_ref) {
114
114
  var hasAuthor = isTextFilled(author);
115
115
  var hasImage = isImageFilled(image);
116
116
  var hasDate = isTextFilled(date);
117
- // const hasDate = date !== null && date.length > 0;
118
117
  var footerProps = getFooterProps(footer, {
119
118
  isView: isView,
120
119
  current: current,
121
120
  openWebView: openWebView,
122
121
  isPreview: isPreview
123
122
  });
123
+ var mediaHeight = useMemo(function () {
124
+ if (!hasImage) {
125
+ return 0;
126
+ }
127
+ var _ref2 = image || {},
128
+ _ref2$metadata = _ref2.metadata,
129
+ metadata = _ref2$metadata === void 0 ? {} : _ref2$metadata;
130
+ var _ref3 = metadata || {},
131
+ _ref3$width = _ref3.width,
132
+ initialWidth = _ref3$width === void 0 ? 0 : _ref3$width,
133
+ _ref3$height = _ref3.height,
134
+ initialHeight = _ref3$height === void 0 ? 0 : _ref3$height;
135
+ return width * initialHeight / initialWidth;
136
+ }, [image]);
124
137
  var partialDate = hasDate ? date.body || null : null;
125
138
  var finalDate = useMemo(function () {
126
139
  return partialDate !== null ? intl.formatDate(dayjs(partialDate).toDate(), {
@@ -147,8 +160,12 @@ var ArticleScreen = function ArticleScreen(_ref) {
147
160
  media: image
148
161
  // width={width - spacing * 2} // in layout flow
149
162
  ,
150
- width: width,
151
- height: "100%",
163
+ width: width
164
+ // width="100%"
165
+ ,
166
+ height: mediaHeight
167
+ // height="100%"
168
+ ,
152
169
  resolution: resolution,
153
170
  className: styles.visual
154
171
  }) : null));
@@ -232,8 +249,8 @@ var ArticleScreen = function ArticleScreen(_ref) {
232
249
  _useState2 = _slicedToArray(_useState, 2),
233
250
  scrolledBottom = _useState2[0],
234
251
  setScrolledBottom = _useState2[1];
235
- var onScrolledBottom = useCallback(function (_ref2) {
236
- var initial = _ref2.initial;
252
+ var onScrolledBottom = useCallback(function (_ref4) {
253
+ var initial = _ref4.initial;
237
254
  if (initial) {
238
255
  trackScreenEvent('scroll', 'Screen');
239
256
  }
@@ -243,7 +260,7 @@ var ArticleScreen = function ArticleScreen(_ref) {
243
260
  setScrolledBottom(false);
244
261
  }, [setScrolledBottom]);
245
262
  return /*#__PURE__*/React.createElement("div", {
246
- className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
263
+ className: classNames([styles.container, (_ref5 = {}, _defineProperty(_ref5, className, className !== null), _defineProperty(_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
247
264
  "data-screen-ready": ready
248
265
  }, /*#__PURE__*/React.createElement(Container, {
249
266
  width: width,
package/lib/index.js CHANGED
@@ -85,7 +85,7 @@ var defaultProps = {
85
85
  className: null
86
86
  };
87
87
  var ArticleScreen = function ArticleScreen(_ref) {
88
- var _ref3;
88
+ var _ref5;
89
89
  var image = _ref.image,
90
90
  title = _ref.title,
91
91
  surtitle = _ref.surtitle,
@@ -138,13 +138,26 @@ var ArticleScreen = function ArticleScreen(_ref) {
138
138
  var hasAuthor = utils.isTextFilled(author);
139
139
  var hasImage = utils.isImageFilled(image);
140
140
  var hasDate = utils.isTextFilled(date);
141
- // const hasDate = date !== null && date.length > 0;
142
141
  var footerProps = utils.getFooterProps(footer, {
143
142
  isView: isView,
144
143
  current: current,
145
144
  openWebView: openWebView,
146
145
  isPreview: isPreview
147
146
  });
147
+ var mediaHeight = React.useMemo(function () {
148
+ if (!hasImage) {
149
+ return 0;
150
+ }
151
+ var _ref2 = image || {},
152
+ _ref2$metadata = _ref2.metadata,
153
+ metadata = _ref2$metadata === void 0 ? {} : _ref2$metadata;
154
+ var _ref3 = metadata || {},
155
+ _ref3$width = _ref3.width,
156
+ initialWidth = _ref3$width === void 0 ? 0 : _ref3$width,
157
+ _ref3$height = _ref3.height,
158
+ initialHeight = _ref3$height === void 0 ? 0 : _ref3$height;
159
+ return width * initialHeight / initialWidth;
160
+ }, [image]);
148
161
  var partialDate = hasDate ? date.body || null : null;
149
162
  var finalDate = React.useMemo(function () {
150
163
  return partialDate !== null ? intl.formatDate(dayjs__default["default"](partialDate).toDate(), {
@@ -171,8 +184,12 @@ var ArticleScreen = function ArticleScreen(_ref) {
171
184
  media: image
172
185
  // width={width - spacing * 2} // in layout flow
173
186
  ,
174
- width: width,
175
- height: "100%",
187
+ width: width
188
+ // width="100%"
189
+ ,
190
+ height: mediaHeight
191
+ // height="100%"
192
+ ,
176
193
  resolution: resolution,
177
194
  className: styles.visual
178
195
  }) : null));
@@ -256,8 +273,8 @@ var ArticleScreen = function ArticleScreen(_ref) {
256
273
  _useState2 = _slicedToArray__default["default"](_useState, 2),
257
274
  scrolledBottom = _useState2[0],
258
275
  setScrolledBottom = _useState2[1];
259
- var onScrolledBottom = React.useCallback(function (_ref2) {
260
- var initial = _ref2.initial;
276
+ var onScrolledBottom = React.useCallback(function (_ref4) {
277
+ var initial = _ref4.initial;
261
278
  if (initial) {
262
279
  trackScreenEvent('scroll', 'Screen');
263
280
  }
@@ -267,7 +284,7 @@ var ArticleScreen = function ArticleScreen(_ref) {
267
284
  setScrolledBottom(false);
268
285
  }, [setScrolledBottom]);
269
286
  return /*#__PURE__*/React__default["default"].createElement("div", {
270
- className: classNames__default["default"]([styles.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles.isPlaceholder, isPlaceholder), _ref3)]),
287
+ className: classNames__default["default"]([styles.container, (_ref5 = {}, _defineProperty__default["default"](_ref5, className, className !== null), _defineProperty__default["default"](_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
271
288
  "data-screen-ready": ready
272
289
  }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
273
290
  width: width,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-article",
3
- "version": "0.3.403",
3
+ "version": "0.3.408",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -46,18 +46,18 @@
46
46
  },
47
47
  "dependencies": {
48
48
  "@babel/runtime": "^7.13.10",
49
- "@micromag/core": "^0.3.403",
50
- "@micromag/element-background": "^0.3.403",
51
- "@micromag/element-container": "^0.3.403",
52
- "@micromag/element-footer": "^0.3.403",
53
- "@micromag/element-header": "^0.3.403",
54
- "@micromag/element-heading": "^0.3.403",
55
- "@micromag/element-layout": "^0.3.403",
56
- "@micromag/element-scroll": "^0.3.403",
57
- "@micromag/element-stack": "^0.3.403",
58
- "@micromag/element-text": "^0.3.403",
59
- "@micromag/element-visual": "^0.3.403",
60
- "@micromag/transforms": "^0.3.403",
49
+ "@micromag/core": "^0.3.408",
50
+ "@micromag/element-background": "^0.3.408",
51
+ "@micromag/element-container": "^0.3.408",
52
+ "@micromag/element-footer": "^0.3.408",
53
+ "@micromag/element-header": "^0.3.408",
54
+ "@micromag/element-heading": "^0.3.408",
55
+ "@micromag/element-layout": "^0.3.408",
56
+ "@micromag/element-scroll": "^0.3.408",
57
+ "@micromag/element-stack": "^0.3.408",
58
+ "@micromag/element-text": "^0.3.408",
59
+ "@micromag/element-visual": "^0.3.408",
60
+ "@micromag/transforms": "^0.3.408",
61
61
  "classnames": "^2.2.6",
62
62
  "dayjs": "^1.11.10",
63
63
  "lodash": "^4.17.21",
@@ -69,5 +69,5 @@
69
69
  "access": "public",
70
70
  "registry": "https://registry.npmjs.org/"
71
71
  },
72
- "gitHead": "3179202a6bd721978ed10d9282b904045770189b"
72
+ "gitHead": "da827edbb305a6e1cc9832e33f2d4263dadd2331"
73
73
  }