@mjhls/mjh-framework 1.0.493 → 1.0.494

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/README.md +1 -1
  2. package/dist/cjs/QueueDeckExpanded.js +16 -3
  3. package/dist/esm/QueueDeckExpanded.js +16 -3
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- # mjh-framework v. 1.0.493
2
+ # mjh-framework v. 1.0.494
3
3
 
4
4
  > Foundation Framework
5
5
 
package/dist/cjs/QueueDeckExpanded.js CHANGED
@@ -282,7 +282,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
282
282
  { href: article.url.current, target: '_blank', className: 'feature-wrapper' },
283
283
  React__default.createElement(
284
284
  index$2.LazyLoad,
285
- { height: imageHeight },
285
+ { height: imageHeight, placeholder: React__default.createElement(ImagePlaceholder, null) },
286
286
  article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'img-fluid', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React__default.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React__default.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
287
287
  ),
288
288
  article.source && React__default.createElement(
@@ -383,7 +383,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
383
383
  { href: article.url.current, className: 'feature-wrapper' },
384
384
  React__default.createElement(
385
385
  index$2.LazyLoad,
386
- { height: imageHeight },
386
+ { height: imageHeight, placeholder: React__default.createElement(ImagePlaceholder, null) },
387
387
  article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'img-fluid', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React__default.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React__default.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
388
388
  ),
389
389
  article.source && React__default.createElement(
@@ -493,7 +493,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
493
493
  { href: mapping[contentCategoryName] + '/' + article.url.current, className: 'img-wrapper' },
494
494
  React__default.createElement(
495
495
  index$2.LazyLoad,
496
- { height: imageHeight },
496
+ { height: imageHeight, placeholder: React__default.createElement(ImagePlaceholder, null) },
497
497
  article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'mr-3 img-fluid', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React__default.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React__default.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
498
498
  ),
499
499
  article.source && React__default.createElement(
@@ -597,6 +597,19 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
597
597
  );
598
598
  };
599
599
 
600
+ var ImagePlaceholder = function ImagePlaceholder() {
601
+ return React__default.createElement(
602
+ React__default.Fragment,
603
+ null,
604
+ React__default.createElement('div', { className: 'queuedeck-exp-image-placeholder' }),
605
+ React__default.createElement(
606
+ 'style',
607
+ { jsx: 'true' },
608
+ '\n .queuedeck-exp-image-placeholder {\n width: 240px;\n height: 0;\n padding-top: calc(240px * 9 / 16);\n margin: 0 1rem 0 0;\n }\n @media only screen and (max-width: 767px) {\n .queuedeck-exp-image-placeholder {\n width: 100%;\n height: 0;\n padding-top: calc(100% * 9 / 16);\n margin: 0 0 1rem 0;\n }\n }\n '
609
+ )
610
+ );
611
+ };
612
+
600
613
  var renderMobileAd = function renderMobileAd(index, numberOfItemsBeforeAd, rightItems) {
601
614
  var i = ((index + 1) / numberOfItemsBeforeAd - 1) % rightItems.length;
602
615
  return React__default.createElement(
package/dist/esm/QueueDeckExpanded.js CHANGED
@@ -276,7 +276,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
276
276
  { href: article.url.current, target: '_blank', className: 'feature-wrapper' },
277
277
  React__default.createElement(
278
278
  LazyLoad,
279
- { height: imageHeight },
279
+ { height: imageHeight, placeholder: React__default.createElement(ImagePlaceholder, null) },
280
280
  article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'img-fluid', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React__default.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React__default.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
281
281
  ),
282
282
  article.source && React__default.createElement(
@@ -377,7 +377,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
377
377
  { href: article.url.current, className: 'feature-wrapper' },
378
378
  React__default.createElement(
379
379
  LazyLoad,
380
- { height: imageHeight },
380
+ { height: imageHeight, placeholder: React__default.createElement(ImagePlaceholder, null) },
381
381
  article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'img-fluid', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React__default.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React__default.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
382
382
  ),
383
383
  article.source && React__default.createElement(
@@ -487,7 +487,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
487
487
  { href: mapping[contentCategoryName] + '/' + article.url.current, className: 'img-wrapper' },
488
488
  React__default.createElement(
489
489
  LazyLoad,
490
- { height: imageHeight },
490
+ { height: imageHeight, placeholder: React__default.createElement(ImagePlaceholder, null) },
491
491
  article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'mr-3 img-fluid', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : article.thumbnail ? React__default.createElement('img', { src: article.thumbnail, className: 'mr-3', alt: article.title }) : React__default.createElement('img', { src: defaultImage, src2: article.thumbnail, className: 'mr-3', width: '240', height: '135', alt: article.title })
492
492
  ),
493
493
  article.source && React__default.createElement(
@@ -591,6 +591,19 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
591
591
  );
592
592
  };
593
593
 
594
+ var ImagePlaceholder = function ImagePlaceholder() {
595
+ return React__default.createElement(
596
+ React__default.Fragment,
597
+ null,
598
+ React__default.createElement('div', { className: 'queuedeck-exp-image-placeholder' }),
599
+ React__default.createElement(
600
+ 'style',
601
+ { jsx: 'true' },
602
+ '\n .queuedeck-exp-image-placeholder {\n width: 240px;\n height: 0;\n padding-top: calc(240px * 9 / 16);\n margin: 0 1rem 0 0;\n }\n @media only screen and (max-width: 767px) {\n .queuedeck-exp-image-placeholder {\n width: 100%;\n height: 0;\n padding-top: calc(100% * 9 / 16);\n margin: 0 0 1rem 0;\n }\n }\n '
603
+ )
604
+ );
605
+ };
606
+
594
607
  var renderMobileAd = function renderMobileAd(index, numberOfItemsBeforeAd, rightItems) {
595
608
  var i = ((index + 1) / numberOfItemsBeforeAd - 1) % rightItems.length;
596
609
  return React__default.createElement(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mjhls/mjh-framework",
3
- "version": "1.0.493",
3
+ "version": "1.0.494",
4
4
  "description": "Foundation Framework",
5
5
  "author": "mjh-framework",
6
6
  "license": "MIT",