@mjhls/mjh-framework 1.0.552 → 1.0.554
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/README.md +1 -1
- package/dist/cjs/ADSkyscraper.js +114 -0
- package/dist/cjs/IssueContentDeck.js +7 -3
- package/dist/cjs/PublicationLanding.js +8 -4
- package/dist/cjs/QueueDeckExpanded.js +73 -25
- package/dist/cjs/index.js +2 -0
- package/dist/esm/ADSkyscraper.js +109 -0
- package/dist/esm/IssueContentDeck.js +7 -3
- package/dist/esm/PublicationLanding.js +8 -4
- package/dist/esm/QueueDeckExpanded.js +73 -25
- package/dist/esm/index.js +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
4
|
+
|
|
5
|
+
require('./_commonjsHelpers-06173234.js');
|
|
6
|
+
require('./_to-object-329a650b.js');
|
|
7
|
+
require('./core.get-iterator-method-41e87ec1.js');
|
|
8
|
+
require('./_library-dd23b178.js');
|
|
9
|
+
require('./_iter-detect-4d0352f8.js');
|
|
10
|
+
require('./web.dom.iterable-43c3e277.js');
|
|
11
|
+
var React = require('react');
|
|
12
|
+
var React__default = _interopDefault(React);
|
|
13
|
+
require('./index-f7ee1612.js');
|
|
14
|
+
require('prop-types');
|
|
15
|
+
require('./isSymbol-488934a7.js');
|
|
16
|
+
require('./debounce-32e57002.js');
|
|
17
|
+
require('./main-bc4db521.js');
|
|
18
|
+
var slicedToArray = require('./slicedToArray-8063ee51.js');
|
|
19
|
+
require('./stringify-7c5aff47.js');
|
|
20
|
+
require('./asyncToGenerator-8e707718.js');
|
|
21
|
+
require('./_set-species-4458e975.js');
|
|
22
|
+
require('./beam-d22818d3.js');
|
|
23
|
+
var AdSlot = require('./AdSlot.js');
|
|
24
|
+
|
|
25
|
+
// Skyscraper is below sponsored resource ad in the left column.
|
|
26
|
+
var ADSkyscraper = function ADSkyscraper(_ref) {
|
|
27
|
+
var skyscraperAd = _ref.skyscraperAd,
|
|
28
|
+
_ref$minScreenWidth = _ref.minScreenWidth,
|
|
29
|
+
minScreenWidth = _ref$minScreenWidth === undefined ? 1200 : _ref$minScreenWidth;
|
|
30
|
+
|
|
31
|
+
// position is set to 'sky1' as default.
|
|
32
|
+
var className = skyscraperAd.className,
|
|
33
|
+
slotId = skyscraperAd.slotId,
|
|
34
|
+
adUnit = skyscraperAd.adUnit,
|
|
35
|
+
_skyscraperAd$targeti = skyscraperAd.targeting,
|
|
36
|
+
targeting = _skyscraperAd$targeti === undefined ? {} : _skyscraperAd$targeti,
|
|
37
|
+
_skyscraperAd$positio = skyscraperAd.position,
|
|
38
|
+
position = _skyscraperAd$positio === undefined ? 'sky1' : _skyscraperAd$positio,
|
|
39
|
+
networkID = skyscraperAd.networkID,
|
|
40
|
+
sizes = skyscraperAd.sizes;
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
var adTargeting = {
|
|
44
|
+
content_placement: targeting.content_placement,
|
|
45
|
+
tags: targeting.tags,
|
|
46
|
+
document_group: targeting.document_group,
|
|
47
|
+
document_url: targeting.document_url,
|
|
48
|
+
pos: position,
|
|
49
|
+
campaign_id: targeting.campaign_id,
|
|
50
|
+
issue_url: targeting.issue_url,
|
|
51
|
+
publication_url: targeting.publication_url
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
var _useState = React.useState(false),
|
|
55
|
+
_useState2 = slicedToArray._slicedToArray(_useState, 2),
|
|
56
|
+
widthFlag = _useState2[0],
|
|
57
|
+
setWidthFlag = _useState2[1];
|
|
58
|
+
|
|
59
|
+
React.useEffect(function () {
|
|
60
|
+
// Setting flag to hide ad in screens < 1200px.
|
|
61
|
+
if (window && window.innerWidth >= minScreenWidth) {
|
|
62
|
+
setWidthFlag(true);
|
|
63
|
+
}
|
|
64
|
+
}, [minScreenWidth]);
|
|
65
|
+
|
|
66
|
+
// Function to collapse skyscrapper ad.
|
|
67
|
+
var collapseAd = function collapseAd() {
|
|
68
|
+
var parent = document.getElementById('skyscraper-ad-wrapper');
|
|
69
|
+
parent.style.height = '0%';
|
|
70
|
+
parent.style.width = '0%';
|
|
71
|
+
parent.style.display = 'none';
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
// Function to check if the skyscrapper ad is available or not.
|
|
75
|
+
var checkIsAdFound = function checkIsAdFound(isFound) {
|
|
76
|
+
if (isFound) {
|
|
77
|
+
var parent = document.getElementById('skyscraper-ad-wrapper');
|
|
78
|
+
parent.style.display = 'block';
|
|
79
|
+
} else {
|
|
80
|
+
collapseAd();
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
if (widthFlag) {
|
|
84
|
+
return React__default.createElement(
|
|
85
|
+
React__default.Fragment,
|
|
86
|
+
null,
|
|
87
|
+
React__default.createElement(
|
|
88
|
+
'div',
|
|
89
|
+
{ id: 'skyscraper-ad-wrapper', className: 'skyscraper-ad-wrapper' },
|
|
90
|
+
React__default.createElement(
|
|
91
|
+
'div',
|
|
92
|
+
{ className: 'skyscraper-ad' },
|
|
93
|
+
React__default.createElement(AdSlot, {
|
|
94
|
+
className: className,
|
|
95
|
+
slotId: slotId,
|
|
96
|
+
networkID: networkID,
|
|
97
|
+
sizes: sizes,
|
|
98
|
+
adUnit: adUnit,
|
|
99
|
+
targeting: adTargeting,
|
|
100
|
+
refreshFlag: false,
|
|
101
|
+
checkIsAdFound: checkIsAdFound
|
|
102
|
+
})
|
|
103
|
+
),
|
|
104
|
+
React__default.createElement(
|
|
105
|
+
'style',
|
|
106
|
+
{ jsx: 'true' },
|
|
107
|
+
'\n .skyscraper-ad-wrapper {\n margin-top: 20px;\n margin-bottom: 20px;\n }\n '
|
|
108
|
+
)
|
|
109
|
+
)
|
|
110
|
+
);
|
|
111
|
+
} else return null;
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
module.exports = ADSkyscraper;
|
|
@@ -116,8 +116,12 @@ var PublicationDeckStack = function PublicationDeckStack(props) {
|
|
|
116
116
|
{ style: { float: 'left' } },
|
|
117
117
|
source && !coverImage && React__default.createElement(
|
|
118
118
|
'div',
|
|
119
|
-
{ className: '
|
|
120
|
-
|
|
119
|
+
{ className: 'content-category-label' },
|
|
120
|
+
React__default.createElement(
|
|
121
|
+
'div',
|
|
122
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
123
|
+
source
|
|
124
|
+
)
|
|
121
125
|
),
|
|
122
126
|
React__default.createElement(
|
|
123
127
|
'p',
|
|
@@ -242,7 +246,7 @@ var IssueContentDeck = function IssueContentDeck(props) {
|
|
|
242
246
|
React__default.createElement(
|
|
243
247
|
'style',
|
|
244
248
|
{ jsx: 'true' },
|
|
245
|
-
'\n .displayLabelThumb {\n margin: 0 auto;\n margin-top: -1.25rem;\n background-color: white;\n position: relative;\n }\n .sanityDisplayLabel {\n border: 2px solid var(--franchise-primary, #484848);\n width:
|
|
249
|
+
'\n .displayLabelThumb {\n margin: 0 auto;\n margin-top: -1.25rem;\n background-color: white;\n position: relative;\n }\n .content-category-label {\n margin: 0.5rem 0;\n display: block;\n }\n .sanityDisplayLabel {\n border: 2px solid var(--franchise-primary, #484848);\n display: inline;\n width: max-content;\n padding: 5px;\n color: var(--franchise-primary, #484848);\n border-radius: 2px;\n }\n '
|
|
246
250
|
)
|
|
247
251
|
);
|
|
248
252
|
};
|
|
@@ -508,9 +508,13 @@ var PublicationLanding = function PublicationLanding(props) {
|
|
|
508
508
|
issue.name
|
|
509
509
|
),
|
|
510
510
|
issue.source && React__default.createElement(
|
|
511
|
-
'
|
|
512
|
-
{ className: '
|
|
513
|
-
|
|
511
|
+
'div',
|
|
512
|
+
{ className: 'content-category-label' },
|
|
513
|
+
React__default.createElement(
|
|
514
|
+
'div',
|
|
515
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
516
|
+
issue.source
|
|
517
|
+
)
|
|
514
518
|
),
|
|
515
519
|
issue.volume && issue.number && React__default.createElement(
|
|
516
520
|
'p',
|
|
@@ -551,7 +555,7 @@ var PublicationLanding = function PublicationLanding(props) {
|
|
|
551
555
|
React__default.createElement(
|
|
552
556
|
'style',
|
|
553
557
|
{ jsx: 'true' },
|
|
554
|
-
'\n .issueCard.card:hover {\n cursor: default;\n }\n .sanityDisplayLabel {\n border: 2px solid var(--franchise-primary, #484848);\n width:
|
|
558
|
+
'\n .issueCard.card:hover {\n cursor: default;\n }\n .content-category-label {\n margin: 0.5rem 0;\n display: block;\n }\n .sanityDisplayLabel {\n border: 2px solid var(--franchise-primary, #484848);\n display: inline;\n width: max-content;\n padding: 5px;\n color: var(--franchise-primary, #484848);\n border-radius: 2px;\n }\n '
|
|
555
559
|
)
|
|
556
560
|
);
|
|
557
561
|
};
|
|
@@ -288,8 +288,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
288
288
|
),
|
|
289
289
|
article.source && React__default.createElement(
|
|
290
290
|
'div',
|
|
291
|
-
{ className: '
|
|
292
|
-
|
|
291
|
+
{ className: 'content-category-label' },
|
|
292
|
+
React__default.createElement(
|
|
293
|
+
'div',
|
|
294
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
295
|
+
article.source
|
|
296
|
+
)
|
|
293
297
|
)
|
|
294
298
|
),
|
|
295
299
|
React__default.createElement(
|
|
@@ -316,8 +320,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
316
320
|
),
|
|
317
321
|
!article.thumbnail && !defaultImage && article.source && React__default.createElement(
|
|
318
322
|
'div',
|
|
319
|
-
{ className: '
|
|
320
|
-
|
|
323
|
+
{ className: 'content-category-label' },
|
|
324
|
+
React__default.createElement(
|
|
325
|
+
'div',
|
|
326
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
327
|
+
article.source
|
|
328
|
+
)
|
|
321
329
|
),
|
|
322
330
|
React__default.createElement(
|
|
323
331
|
'div',
|
|
@@ -409,8 +417,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
409
417
|
),
|
|
410
418
|
article.source && React__default.createElement(
|
|
411
419
|
'div',
|
|
412
|
-
{ className: '
|
|
413
|
-
|
|
420
|
+
{ className: 'content-category-label' },
|
|
421
|
+
React__default.createElement(
|
|
422
|
+
'div',
|
|
423
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
424
|
+
article.source
|
|
425
|
+
)
|
|
414
426
|
)
|
|
415
427
|
),
|
|
416
428
|
React__default.createElement(
|
|
@@ -437,8 +449,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
437
449
|
),
|
|
438
450
|
!article.thumbnail && !defaultImage && article.source && React__default.createElement(
|
|
439
451
|
'div',
|
|
440
|
-
{ className: '
|
|
441
|
-
|
|
452
|
+
{ className: 'content-category-label' },
|
|
453
|
+
React__default.createElement(
|
|
454
|
+
'div',
|
|
455
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
456
|
+
article.source
|
|
457
|
+
)
|
|
442
458
|
),
|
|
443
459
|
React__default.createElement(
|
|
444
460
|
'div',
|
|
@@ -539,8 +555,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
539
555
|
),
|
|
540
556
|
article.source && React__default.createElement(
|
|
541
557
|
'div',
|
|
542
|
-
{ className: '
|
|
543
|
-
|
|
558
|
+
{ className: 'content-category-label' },
|
|
559
|
+
React__default.createElement(
|
|
560
|
+
'div',
|
|
561
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
562
|
+
article.source
|
|
563
|
+
)
|
|
544
564
|
)
|
|
545
565
|
),
|
|
546
566
|
React__default.createElement(
|
|
@@ -571,8 +591,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
571
591
|
),
|
|
572
592
|
!article.thumbnail && !defaultImage && article.source && React__default.createElement(
|
|
573
593
|
'div',
|
|
574
|
-
{ className: '
|
|
575
|
-
|
|
594
|
+
{ className: 'content-category-label' },
|
|
595
|
+
React__default.createElement(
|
|
596
|
+
'div',
|
|
597
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
598
|
+
article.source
|
|
599
|
+
)
|
|
576
600
|
),
|
|
577
601
|
React__default.createElement(
|
|
578
602
|
'div',
|
|
@@ -676,8 +700,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
676
700
|
),
|
|
677
701
|
article.source && React__default.createElement(
|
|
678
702
|
'div',
|
|
679
|
-
{ className: '
|
|
680
|
-
|
|
703
|
+
{ className: 'content-category-label' },
|
|
704
|
+
React__default.createElement(
|
|
705
|
+
'div',
|
|
706
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
707
|
+
article.source
|
|
708
|
+
)
|
|
681
709
|
)
|
|
682
710
|
),
|
|
683
711
|
React__default.createElement(
|
|
@@ -704,8 +732,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
704
732
|
),
|
|
705
733
|
!article.thumbnail && !defaultImage && article.source && React__default.createElement(
|
|
706
734
|
'div',
|
|
707
|
-
{ className: '
|
|
708
|
-
|
|
735
|
+
{ className: 'content-category-label' },
|
|
736
|
+
React__default.createElement(
|
|
737
|
+
'div',
|
|
738
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
739
|
+
article.source
|
|
740
|
+
)
|
|
709
741
|
),
|
|
710
742
|
React__default.createElement(
|
|
711
743
|
'div',
|
|
@@ -797,8 +829,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
797
829
|
),
|
|
798
830
|
article.source && React__default.createElement(
|
|
799
831
|
'div',
|
|
800
|
-
{ className: '
|
|
801
|
-
|
|
832
|
+
{ className: 'content-category-label' },
|
|
833
|
+
React__default.createElement(
|
|
834
|
+
'div',
|
|
835
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
836
|
+
article.source
|
|
837
|
+
)
|
|
802
838
|
)
|
|
803
839
|
),
|
|
804
840
|
React__default.createElement(
|
|
@@ -825,8 +861,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
825
861
|
),
|
|
826
862
|
!article.thumbnail && !defaultImage && article.source && React__default.createElement(
|
|
827
863
|
'div',
|
|
828
|
-
{ className: '
|
|
829
|
-
|
|
864
|
+
{ className: 'content-category-label' },
|
|
865
|
+
React__default.createElement(
|
|
866
|
+
'div',
|
|
867
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
868
|
+
article.source
|
|
869
|
+
)
|
|
830
870
|
),
|
|
831
871
|
React__default.createElement(
|
|
832
872
|
'div',
|
|
@@ -927,8 +967,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
927
967
|
),
|
|
928
968
|
article.source && React__default.createElement(
|
|
929
969
|
'div',
|
|
930
|
-
{ className: '
|
|
931
|
-
|
|
970
|
+
{ className: 'content-category-label' },
|
|
971
|
+
React__default.createElement(
|
|
972
|
+
'div',
|
|
973
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
974
|
+
article.source
|
|
975
|
+
)
|
|
932
976
|
)
|
|
933
977
|
),
|
|
934
978
|
React__default.createElement(
|
|
@@ -959,8 +1003,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
959
1003
|
),
|
|
960
1004
|
!article.thumbnail && !defaultImage && article.source && React__default.createElement(
|
|
961
1005
|
'div',
|
|
962
|
-
{ className: '
|
|
963
|
-
|
|
1006
|
+
{ className: 'content-category-label' },
|
|
1007
|
+
React__default.createElement(
|
|
1008
|
+
'div',
|
|
1009
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
1010
|
+
article.source
|
|
1011
|
+
)
|
|
964
1012
|
),
|
|
965
1013
|
React__default.createElement(
|
|
966
1014
|
'div',
|
|
@@ -1042,7 +1090,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
1042
1090
|
React__default.createElement(
|
|
1043
1091
|
'style',
|
|
1044
1092
|
{ jsx: 'true' },
|
|
1045
|
-
'\n .displayLabelThumb {\n margin: 0 auto;\n margin-top: -1.25rem;\n background-color: white;\n position: relative;\n }\n .sanityDisplayLabel {\n margin: 0.5rem 0;\n border: 1px solid black;\n display:
|
|
1093
|
+
'\n .displayLabelThumb {\n margin: 0 auto;\n margin-top: -1.25rem;\n background-color: white;\n position: relative;\n }\n .content-category-label {\n margin: 0.5rem 0;\n display: block;\n }\n .sanityDisplayLabel {\n margin: 0.5rem 0;\n border: 1px solid black;\n display: inline;\n width: max-content;\n padding: 5px;\n color: var(--franchise-primary, #484848);\n border-radius: 2px;\n }\n .feature-media > .media-body {\n -webkit-box-flex: none;\n -ms-flex: none;\n flex: none;\n }\n .img-wrapper img {\n max-height: 240px;\n height: auto;\n width: 100%;\n object-fit: contain;\n }\n .feature-wrapper {\n height: 100%;\n width: 100%;\n }\n .feature-wrapper img {\n width: 100%;\n margin-bottom: 1em;\n }\n @media only screen and (min-width: 768px) {\n .img-wrapper > img {\n padding-right: 1em;\n }\n }\n @media only screen and (max-width: 767px) {\n .img-wrapper {\n width: 100%;\n }\n .img-wrapper img {\n padding-bottom: 1em;\n }\n .media {\n flex-direction: column !important;\n }\n }\n '
|
|
1046
1094
|
)
|
|
1047
1095
|
);
|
|
1048
1096
|
};
|
package/dist/cjs/index.js
CHANGED
|
@@ -121,6 +121,7 @@ var ADFooter = require('./ADFooter.js');
|
|
|
121
121
|
var AdSlotsProvider = require('./AdSlotsProvider.js');
|
|
122
122
|
var ADFloatingFooter = require('./ADFloatingFooter.js');
|
|
123
123
|
var ADWelcome = require('./ADWelcome.js');
|
|
124
|
+
var ADSkyscraper = require('./ADSkyscraper.js');
|
|
124
125
|
require('react-bootstrap/Carousel');
|
|
125
126
|
var Feature = require('./Feature.js');
|
|
126
127
|
require('react-bootstrap/Breadcrumb');
|
|
@@ -218,6 +219,7 @@ exports.ADFooter = ADFooter;
|
|
|
218
219
|
exports.AdSlotsProvider = AdSlotsProvider;
|
|
219
220
|
exports.ADFloatingFooter = ADFloatingFooter;
|
|
220
221
|
exports.ADWelcome = ADWelcome;
|
|
222
|
+
exports.ADSkyscraper = ADSkyscraper;
|
|
221
223
|
exports.Feature = Feature;
|
|
222
224
|
exports.Breadcrumbs = Breadcrumbs;
|
|
223
225
|
exports.Hero = Hero;
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import './_commonjsHelpers-0c4b6f40.js';
|
|
2
|
+
import './_to-object-16fd8b46.js';
|
|
3
|
+
import './core.get-iterator-method-f5c0d66a.js';
|
|
4
|
+
import './_library-528f1934.js';
|
|
5
|
+
import './_iter-detect-6e099a34.js';
|
|
6
|
+
import './web.dom.iterable-46c95e52.js';
|
|
7
|
+
import React__default, { useState, useEffect } from 'react';
|
|
8
|
+
import './index-93ec3c59.js';
|
|
9
|
+
import 'prop-types';
|
|
10
|
+
import './isSymbol-b7b7434f.js';
|
|
11
|
+
import './debounce-048d9cb6.js';
|
|
12
|
+
import './main-7255814e.js';
|
|
13
|
+
import { _ as _slicedToArray } from './slicedToArray-f1e40361.js';
|
|
14
|
+
import './stringify-e30bc114.js';
|
|
15
|
+
import './asyncToGenerator-0379e924.js';
|
|
16
|
+
import './_set-species-6f64f1c1.js';
|
|
17
|
+
import './beam-a25bd8fd.js';
|
|
18
|
+
import DFPAdSlot from './AdSlot.js';
|
|
19
|
+
|
|
20
|
+
// Skyscraper is below sponsored resource ad in the left column.
|
|
21
|
+
var ADSkyscraper = function ADSkyscraper(_ref) {
|
|
22
|
+
var skyscraperAd = _ref.skyscraperAd,
|
|
23
|
+
_ref$minScreenWidth = _ref.minScreenWidth,
|
|
24
|
+
minScreenWidth = _ref$minScreenWidth === undefined ? 1200 : _ref$minScreenWidth;
|
|
25
|
+
|
|
26
|
+
// position is set to 'sky1' as default.
|
|
27
|
+
var className = skyscraperAd.className,
|
|
28
|
+
slotId = skyscraperAd.slotId,
|
|
29
|
+
adUnit = skyscraperAd.adUnit,
|
|
30
|
+
_skyscraperAd$targeti = skyscraperAd.targeting,
|
|
31
|
+
targeting = _skyscraperAd$targeti === undefined ? {} : _skyscraperAd$targeti,
|
|
32
|
+
_skyscraperAd$positio = skyscraperAd.position,
|
|
33
|
+
position = _skyscraperAd$positio === undefined ? 'sky1' : _skyscraperAd$positio,
|
|
34
|
+
networkID = skyscraperAd.networkID,
|
|
35
|
+
sizes = skyscraperAd.sizes;
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
var adTargeting = {
|
|
39
|
+
content_placement: targeting.content_placement,
|
|
40
|
+
tags: targeting.tags,
|
|
41
|
+
document_group: targeting.document_group,
|
|
42
|
+
document_url: targeting.document_url,
|
|
43
|
+
pos: position,
|
|
44
|
+
campaign_id: targeting.campaign_id,
|
|
45
|
+
issue_url: targeting.issue_url,
|
|
46
|
+
publication_url: targeting.publication_url
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
var _useState = useState(false),
|
|
50
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
51
|
+
widthFlag = _useState2[0],
|
|
52
|
+
setWidthFlag = _useState2[1];
|
|
53
|
+
|
|
54
|
+
useEffect(function () {
|
|
55
|
+
// Setting flag to hide ad in screens < 1200px.
|
|
56
|
+
if (window && window.innerWidth >= minScreenWidth) {
|
|
57
|
+
setWidthFlag(true);
|
|
58
|
+
}
|
|
59
|
+
}, [minScreenWidth]);
|
|
60
|
+
|
|
61
|
+
// Function to collapse skyscrapper ad.
|
|
62
|
+
var collapseAd = function collapseAd() {
|
|
63
|
+
var parent = document.getElementById('skyscraper-ad-wrapper');
|
|
64
|
+
parent.style.height = '0%';
|
|
65
|
+
parent.style.width = '0%';
|
|
66
|
+
parent.style.display = 'none';
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
// Function to check if the skyscrapper ad is available or not.
|
|
70
|
+
var checkIsAdFound = function checkIsAdFound(isFound) {
|
|
71
|
+
if (isFound) {
|
|
72
|
+
var parent = document.getElementById('skyscraper-ad-wrapper');
|
|
73
|
+
parent.style.display = 'block';
|
|
74
|
+
} else {
|
|
75
|
+
collapseAd();
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
if (widthFlag) {
|
|
79
|
+
return React__default.createElement(
|
|
80
|
+
React__default.Fragment,
|
|
81
|
+
null,
|
|
82
|
+
React__default.createElement(
|
|
83
|
+
'div',
|
|
84
|
+
{ id: 'skyscraper-ad-wrapper', className: 'skyscraper-ad-wrapper' },
|
|
85
|
+
React__default.createElement(
|
|
86
|
+
'div',
|
|
87
|
+
{ className: 'skyscraper-ad' },
|
|
88
|
+
React__default.createElement(DFPAdSlot, {
|
|
89
|
+
className: className,
|
|
90
|
+
slotId: slotId,
|
|
91
|
+
networkID: networkID,
|
|
92
|
+
sizes: sizes,
|
|
93
|
+
adUnit: adUnit,
|
|
94
|
+
targeting: adTargeting,
|
|
95
|
+
refreshFlag: false,
|
|
96
|
+
checkIsAdFound: checkIsAdFound
|
|
97
|
+
})
|
|
98
|
+
),
|
|
99
|
+
React__default.createElement(
|
|
100
|
+
'style',
|
|
101
|
+
{ jsx: 'true' },
|
|
102
|
+
'\n .skyscraper-ad-wrapper {\n margin-top: 20px;\n margin-bottom: 20px;\n }\n '
|
|
103
|
+
)
|
|
104
|
+
)
|
|
105
|
+
);
|
|
106
|
+
} else return null;
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
export default ADSkyscraper;
|
|
@@ -111,8 +111,12 @@ var PublicationDeckStack = function PublicationDeckStack(props) {
|
|
|
111
111
|
{ style: { float: 'left' } },
|
|
112
112
|
source && !coverImage && React__default.createElement(
|
|
113
113
|
'div',
|
|
114
|
-
{ className: '
|
|
115
|
-
|
|
114
|
+
{ className: 'content-category-label' },
|
|
115
|
+
React__default.createElement(
|
|
116
|
+
'div',
|
|
117
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
118
|
+
source
|
|
119
|
+
)
|
|
116
120
|
),
|
|
117
121
|
React__default.createElement(
|
|
118
122
|
'p',
|
|
@@ -237,7 +241,7 @@ var IssueContentDeck = function IssueContentDeck(props) {
|
|
|
237
241
|
React__default.createElement(
|
|
238
242
|
'style',
|
|
239
243
|
{ jsx: 'true' },
|
|
240
|
-
'\n .displayLabelThumb {\n margin: 0 auto;\n margin-top: -1.25rem;\n background-color: white;\n position: relative;\n }\n .sanityDisplayLabel {\n border: 2px solid var(--franchise-primary, #484848);\n width:
|
|
244
|
+
'\n .displayLabelThumb {\n margin: 0 auto;\n margin-top: -1.25rem;\n background-color: white;\n position: relative;\n }\n .content-category-label {\n margin: 0.5rem 0;\n display: block;\n }\n .sanityDisplayLabel {\n border: 2px solid var(--franchise-primary, #484848);\n display: inline;\n width: max-content;\n padding: 5px;\n color: var(--franchise-primary, #484848);\n border-radius: 2px;\n }\n '
|
|
241
245
|
)
|
|
242
246
|
);
|
|
243
247
|
};
|
|
@@ -502,9 +502,13 @@ var PublicationLanding = function PublicationLanding(props) {
|
|
|
502
502
|
issue.name
|
|
503
503
|
),
|
|
504
504
|
issue.source && React__default.createElement(
|
|
505
|
-
'
|
|
506
|
-
{ className: '
|
|
507
|
-
|
|
505
|
+
'div',
|
|
506
|
+
{ className: 'content-category-label' },
|
|
507
|
+
React__default.createElement(
|
|
508
|
+
'div',
|
|
509
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
510
|
+
issue.source
|
|
511
|
+
)
|
|
508
512
|
),
|
|
509
513
|
issue.volume && issue.number && React__default.createElement(
|
|
510
514
|
'p',
|
|
@@ -545,7 +549,7 @@ var PublicationLanding = function PublicationLanding(props) {
|
|
|
545
549
|
React__default.createElement(
|
|
546
550
|
'style',
|
|
547
551
|
{ jsx: 'true' },
|
|
548
|
-
'\n .issueCard.card:hover {\n cursor: default;\n }\n .sanityDisplayLabel {\n border: 2px solid var(--franchise-primary, #484848);\n width:
|
|
552
|
+
'\n .issueCard.card:hover {\n cursor: default;\n }\n .content-category-label {\n margin: 0.5rem 0;\n display: block;\n }\n .sanityDisplayLabel {\n border: 2px solid var(--franchise-primary, #484848);\n display: inline;\n width: max-content;\n padding: 5px;\n color: var(--franchise-primary, #484848);\n border-radius: 2px;\n }\n '
|
|
549
553
|
)
|
|
550
554
|
);
|
|
551
555
|
};
|
|
@@ -282,8 +282,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
282
282
|
),
|
|
283
283
|
article.source && React__default.createElement(
|
|
284
284
|
'div',
|
|
285
|
-
{ className: '
|
|
286
|
-
|
|
285
|
+
{ className: 'content-category-label' },
|
|
286
|
+
React__default.createElement(
|
|
287
|
+
'div',
|
|
288
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
289
|
+
article.source
|
|
290
|
+
)
|
|
287
291
|
)
|
|
288
292
|
),
|
|
289
293
|
React__default.createElement(
|
|
@@ -310,8 +314,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
310
314
|
),
|
|
311
315
|
!article.thumbnail && !defaultImage && article.source && React__default.createElement(
|
|
312
316
|
'div',
|
|
313
|
-
{ className: '
|
|
314
|
-
|
|
317
|
+
{ className: 'content-category-label' },
|
|
318
|
+
React__default.createElement(
|
|
319
|
+
'div',
|
|
320
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
321
|
+
article.source
|
|
322
|
+
)
|
|
315
323
|
),
|
|
316
324
|
React__default.createElement(
|
|
317
325
|
'div',
|
|
@@ -403,8 +411,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
403
411
|
),
|
|
404
412
|
article.source && React__default.createElement(
|
|
405
413
|
'div',
|
|
406
|
-
{ className: '
|
|
407
|
-
|
|
414
|
+
{ className: 'content-category-label' },
|
|
415
|
+
React__default.createElement(
|
|
416
|
+
'div',
|
|
417
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
418
|
+
article.source
|
|
419
|
+
)
|
|
408
420
|
)
|
|
409
421
|
),
|
|
410
422
|
React__default.createElement(
|
|
@@ -431,8 +443,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
431
443
|
),
|
|
432
444
|
!article.thumbnail && !defaultImage && article.source && React__default.createElement(
|
|
433
445
|
'div',
|
|
434
|
-
{ className: '
|
|
435
|
-
|
|
446
|
+
{ className: 'content-category-label' },
|
|
447
|
+
React__default.createElement(
|
|
448
|
+
'div',
|
|
449
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
450
|
+
article.source
|
|
451
|
+
)
|
|
436
452
|
),
|
|
437
453
|
React__default.createElement(
|
|
438
454
|
'div',
|
|
@@ -533,8 +549,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
533
549
|
),
|
|
534
550
|
article.source && React__default.createElement(
|
|
535
551
|
'div',
|
|
536
|
-
{ className: '
|
|
537
|
-
|
|
552
|
+
{ className: 'content-category-label' },
|
|
553
|
+
React__default.createElement(
|
|
554
|
+
'div',
|
|
555
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
556
|
+
article.source
|
|
557
|
+
)
|
|
538
558
|
)
|
|
539
559
|
),
|
|
540
560
|
React__default.createElement(
|
|
@@ -565,8 +585,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
565
585
|
),
|
|
566
586
|
!article.thumbnail && !defaultImage && article.source && React__default.createElement(
|
|
567
587
|
'div',
|
|
568
|
-
{ className: '
|
|
569
|
-
|
|
588
|
+
{ className: 'content-category-label' },
|
|
589
|
+
React__default.createElement(
|
|
590
|
+
'div',
|
|
591
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
592
|
+
article.source
|
|
593
|
+
)
|
|
570
594
|
),
|
|
571
595
|
React__default.createElement(
|
|
572
596
|
'div',
|
|
@@ -670,8 +694,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
670
694
|
),
|
|
671
695
|
article.source && React__default.createElement(
|
|
672
696
|
'div',
|
|
673
|
-
{ className: '
|
|
674
|
-
|
|
697
|
+
{ className: 'content-category-label' },
|
|
698
|
+
React__default.createElement(
|
|
699
|
+
'div',
|
|
700
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
701
|
+
article.source
|
|
702
|
+
)
|
|
675
703
|
)
|
|
676
704
|
),
|
|
677
705
|
React__default.createElement(
|
|
@@ -698,8 +726,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
698
726
|
),
|
|
699
727
|
!article.thumbnail && !defaultImage && article.source && React__default.createElement(
|
|
700
728
|
'div',
|
|
701
|
-
{ className: '
|
|
702
|
-
|
|
729
|
+
{ className: 'content-category-label' },
|
|
730
|
+
React__default.createElement(
|
|
731
|
+
'div',
|
|
732
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
733
|
+
article.source
|
|
734
|
+
)
|
|
703
735
|
),
|
|
704
736
|
React__default.createElement(
|
|
705
737
|
'div',
|
|
@@ -791,8 +823,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
791
823
|
),
|
|
792
824
|
article.source && React__default.createElement(
|
|
793
825
|
'div',
|
|
794
|
-
{ className: '
|
|
795
|
-
|
|
826
|
+
{ className: 'content-category-label' },
|
|
827
|
+
React__default.createElement(
|
|
828
|
+
'div',
|
|
829
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
830
|
+
article.source
|
|
831
|
+
)
|
|
796
832
|
)
|
|
797
833
|
),
|
|
798
834
|
React__default.createElement(
|
|
@@ -819,8 +855,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
819
855
|
),
|
|
820
856
|
!article.thumbnail && !defaultImage && article.source && React__default.createElement(
|
|
821
857
|
'div',
|
|
822
|
-
{ className: '
|
|
823
|
-
|
|
858
|
+
{ className: 'content-category-label' },
|
|
859
|
+
React__default.createElement(
|
|
860
|
+
'div',
|
|
861
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
862
|
+
article.source
|
|
863
|
+
)
|
|
824
864
|
),
|
|
825
865
|
React__default.createElement(
|
|
826
866
|
'div',
|
|
@@ -921,8 +961,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
921
961
|
),
|
|
922
962
|
article.source && React__default.createElement(
|
|
923
963
|
'div',
|
|
924
|
-
{ className: '
|
|
925
|
-
|
|
964
|
+
{ className: 'content-category-label' },
|
|
965
|
+
React__default.createElement(
|
|
966
|
+
'div',
|
|
967
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
968
|
+
article.source
|
|
969
|
+
)
|
|
926
970
|
)
|
|
927
971
|
),
|
|
928
972
|
React__default.createElement(
|
|
@@ -953,8 +997,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
953
997
|
),
|
|
954
998
|
!article.thumbnail && !defaultImage && article.source && React__default.createElement(
|
|
955
999
|
'div',
|
|
956
|
-
{ className: '
|
|
957
|
-
|
|
1000
|
+
{ className: 'content-category-label' },
|
|
1001
|
+
React__default.createElement(
|
|
1002
|
+
'div',
|
|
1003
|
+
{ className: 'mb-1 sanityDisplayLabel displayLabelThumb' },
|
|
1004
|
+
article.source
|
|
1005
|
+
)
|
|
958
1006
|
),
|
|
959
1007
|
React__default.createElement(
|
|
960
1008
|
'div',
|
|
@@ -1036,7 +1084,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
|
|
|
1036
1084
|
React__default.createElement(
|
|
1037
1085
|
'style',
|
|
1038
1086
|
{ jsx: 'true' },
|
|
1039
|
-
'\n .displayLabelThumb {\n margin: 0 auto;\n margin-top: -1.25rem;\n background-color: white;\n position: relative;\n }\n .sanityDisplayLabel {\n margin: 0.5rem 0;\n border: 1px solid black;\n display:
|
|
1087
|
+
'\n .displayLabelThumb {\n margin: 0 auto;\n margin-top: -1.25rem;\n background-color: white;\n position: relative;\n }\n .content-category-label {\n margin: 0.5rem 0;\n display: block;\n }\n .sanityDisplayLabel {\n margin: 0.5rem 0;\n border: 1px solid black;\n display: inline;\n width: max-content;\n padding: 5px;\n color: var(--franchise-primary, #484848);\n border-radius: 2px;\n }\n .feature-media > .media-body {\n -webkit-box-flex: none;\n -ms-flex: none;\n flex: none;\n }\n .img-wrapper img {\n max-height: 240px;\n height: auto;\n width: 100%;\n object-fit: contain;\n }\n .feature-wrapper {\n height: 100%;\n width: 100%;\n }\n .feature-wrapper img {\n width: 100%;\n margin-bottom: 1em;\n }\n @media only screen and (min-width: 768px) {\n .img-wrapper > img {\n padding-right: 1em;\n }\n }\n @media only screen and (max-width: 767px) {\n .img-wrapper {\n width: 100%;\n }\n .img-wrapper img {\n padding-bottom: 1em;\n }\n .media {\n flex-direction: column !important;\n }\n }\n '
|
|
1040
1088
|
)
|
|
1041
1089
|
);
|
|
1042
1090
|
};
|
package/dist/esm/index.js
CHANGED
|
@@ -117,6 +117,7 @@ export { default as ADFooter } from './ADFooter.js';
|
|
|
117
117
|
export { default as AdSlotsProvider } from './AdSlotsProvider.js';
|
|
118
118
|
export { default as ADFloatingFooter } from './ADFloatingFooter.js';
|
|
119
119
|
export { default as ADWelcome } from './ADWelcome.js';
|
|
120
|
+
export { default as ADSkyscraper } from './ADSkyscraper.js';
|
|
120
121
|
import 'react-bootstrap/Carousel';
|
|
121
122
|
export { default as Feature } from './Feature.js';
|
|
122
123
|
import 'react-bootstrap/Breadcrumb';
|