@mjhls/mjh-framework 1.0.699 → 1.0.701
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/ArticleCarousel.js +4 -2
- package/dist/cjs/BrowseVideosListing.js +62 -18
- package/dist/cjs/View.js +140 -175
- package/dist/cjs/YoutubeGroup.js +10 -7
- package/dist/cjs/getQuery.js +2 -2
- package/dist/cjs/getRelatedArticle.js +60 -31
- package/dist/esm/ArticleCarousel.js +4 -2
- package/dist/esm/BrowseVideosListing.js +62 -18
- package/dist/esm/View.js +140 -175
- package/dist/esm/YoutubeGroup.js +10 -7
- package/dist/esm/getQuery.js +2 -2
- package/dist/esm/getRelatedArticle.js +60 -31
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -24,7 +24,9 @@ var YoutubeGroup = require('./YoutubeGroup.js');
|
|
|
24
24
|
|
|
25
25
|
function ArticleCarousel(props) {
|
|
26
26
|
//Passed in array of articles to pass into YoutubeGroup
|
|
27
|
-
var articles = props.articles
|
|
27
|
+
var articles = props.articles,
|
|
28
|
+
vidHolderWidth = props.vidHolderWidth,
|
|
29
|
+
numOfTiles = props.numOfTiles;
|
|
28
30
|
|
|
29
31
|
//Setup article.link URL
|
|
30
32
|
|
|
@@ -36,7 +38,7 @@ function ArticleCarousel(props) {
|
|
|
36
38
|
return React__default.createElement(
|
|
37
39
|
React__default.Fragment,
|
|
38
40
|
null,
|
|
39
|
-
articles ? React__default.createElement(YoutubeGroup, _extends._extends({ key: 'articleCarousel-0', dataset: data }, props)) : React__default.createElement(
|
|
41
|
+
articles ? React__default.createElement(YoutubeGroup, _extends._extends({ key: 'articleCarousel-0', vidHolderWidth: vidHolderWidth, numOfTiles: numOfTiles, dataset: data }, props)) : React__default.createElement(
|
|
40
42
|
'p',
|
|
41
43
|
null,
|
|
42
44
|
'No Article Found.'
|
|
@@ -21,6 +21,8 @@ require('./index-da796b8c.js');
|
|
|
21
21
|
require('./slicedToArray-8f385299.js');
|
|
22
22
|
require('./smoothscroll-95231a70.js');
|
|
23
23
|
require('./YoutubeGroup.js');
|
|
24
|
+
require('./iconBase-68959171.js');
|
|
25
|
+
var index_esm = require('./index.esm-90433435.js');
|
|
24
26
|
var ArticleCarousel = require('./ArticleCarousel.js');
|
|
25
27
|
|
|
26
28
|
function BrowseVideosListing(_ref) {
|
|
@@ -29,7 +31,11 @@ function BrowseVideosListing(_ref) {
|
|
|
29
31
|
_ref$client = _ref.client,
|
|
30
32
|
client = _ref$client === undefined ? null : _ref$client,
|
|
31
33
|
_ref$color = _ref.color,
|
|
32
|
-
color = _ref$color === undefined ? '#FFFFFF' : _ref$color
|
|
34
|
+
color = _ref$color === undefined ? '#FFFFFF' : _ref$color,
|
|
35
|
+
_ref$numOfTiles = _ref.numOfTiles,
|
|
36
|
+
numOfTiles = _ref$numOfTiles === undefined ? [3, 2, 1] : _ref$numOfTiles,
|
|
37
|
+
_ref$vidHolderWidth = _ref.vidHolderWidth,
|
|
38
|
+
vidHolderWidth = _ref$vidHolderWidth === undefined ? '805px' : _ref$vidHolderWidth;
|
|
33
39
|
|
|
34
40
|
// Look at AJMC for query setup
|
|
35
41
|
// Data format = Array of Objects based on Taxonomies with videos and latest videos
|
|
@@ -41,35 +47,73 @@ function BrowseVideosListing(_ref) {
|
|
|
41
47
|
return React__default.createElement(
|
|
42
48
|
'div',
|
|
43
49
|
null,
|
|
44
|
-
data
|
|
50
|
+
data.length > 0 ? data.map(function (taxonomy, index) {
|
|
45
51
|
return React__default.createElement(
|
|
46
|
-
|
|
47
|
-
|
|
52
|
+
React__default.Fragment,
|
|
53
|
+
null,
|
|
48
54
|
React__default.createElement(
|
|
49
55
|
'div',
|
|
50
|
-
{
|
|
56
|
+
{ key: 'articleCarousel_' + taxonomy.identifier + '_' + index, className: 'mb-3 browse-videos' },
|
|
51
57
|
React__default.createElement(
|
|
52
|
-
'
|
|
53
|
-
{ style: {
|
|
54
|
-
taxonomy.name
|
|
55
|
-
),
|
|
56
|
-
taxonomy.identifier && React__default.createElement(
|
|
57
|
-
'p',
|
|
58
|
-
{ style: { width: 'fit-content', marginBottom: '.25rem' } },
|
|
58
|
+
'div',
|
|
59
|
+
{ className: 'browse-videos-header', style: { borderBottom: '2px solid ' + color } },
|
|
59
60
|
React__default.createElement(
|
|
60
61
|
'a',
|
|
61
62
|
{ href: '/' + taxonomy.identifier },
|
|
62
|
-
|
|
63
|
+
React__default.createElement(
|
|
64
|
+
'h4',
|
|
65
|
+
{ className: 'article-title-banner', style: { fontWeight: 'bold', color: 'var(--primary)', padding: '.25rem 0', margin: '0' } },
|
|
66
|
+
taxonomy.name
|
|
67
|
+
)
|
|
68
|
+
),
|
|
69
|
+
taxonomy.identifier && React__default.createElement(
|
|
70
|
+
'div',
|
|
71
|
+
{ style: { width: 'fit-content', whiteSpace: 'nowrap' } },
|
|
72
|
+
React__default.createElement(
|
|
73
|
+
'a',
|
|
74
|
+
{ href: '/' + taxonomy.identifier },
|
|
75
|
+
'View All ',
|
|
76
|
+
React__default.createElement(index_esm.IoIosArrowForward, null)
|
|
77
|
+
)
|
|
78
|
+
)
|
|
79
|
+
),
|
|
80
|
+
taxonomy.data.length > 0 ? React__default.createElement(
|
|
81
|
+
'div',
|
|
82
|
+
{ className: 'article-carousel' },
|
|
83
|
+
React__default.createElement(ArticleCarousel, { articles: taxonomy.data, client: client, numOfTiles: numOfTiles, vidHolderWidth: vidHolderWidth })
|
|
84
|
+
) : React__default.createElement(
|
|
85
|
+
'div',
|
|
86
|
+
null,
|
|
87
|
+
React__default.createElement(
|
|
88
|
+
'h5',
|
|
89
|
+
{ className: 'mt-2' },
|
|
90
|
+
React__default.createElement(
|
|
91
|
+
'em',
|
|
92
|
+
{ className: 'pl-3' },
|
|
93
|
+
'New content coming soon, please check back later.'
|
|
94
|
+
)
|
|
63
95
|
)
|
|
64
96
|
)
|
|
65
97
|
),
|
|
66
|
-
|
|
67
|
-
'
|
|
68
|
-
|
|
69
|
-
|
|
98
|
+
React__default.createElement(
|
|
99
|
+
'style',
|
|
100
|
+
{ jsx: 'true' },
|
|
101
|
+
'\n .article-carousel {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .browse-videos-header {\n display: flex;\n flex-wrap: no-wrap;\n align-items: center;\n justify-content: space-between;\n }\n '
|
|
70
102
|
)
|
|
71
103
|
);
|
|
72
|
-
})
|
|
104
|
+
}) : React__default.createElement(
|
|
105
|
+
'div',
|
|
106
|
+
null,
|
|
107
|
+
React__default.createElement(
|
|
108
|
+
'h5',
|
|
109
|
+
null,
|
|
110
|
+
React__default.createElement(
|
|
111
|
+
'em',
|
|
112
|
+
{ className: 'pl-3' },
|
|
113
|
+
'New content coming soon, please check back later.'
|
|
114
|
+
)
|
|
115
|
+
)
|
|
116
|
+
)
|
|
73
117
|
);
|
|
74
118
|
}
|
|
75
119
|
|
package/dist/cjs/View.js
CHANGED
|
@@ -48,7 +48,6 @@ require('react-bootstrap');
|
|
|
48
48
|
require('./iconBase-68959171.js');
|
|
49
49
|
require('./index.esm-90433435.js');
|
|
50
50
|
var Button = _interopDefault(require('react-bootstrap/Button'));
|
|
51
|
-
var defineProperty$1 = require('./defineProperty-55548b25.js');
|
|
52
51
|
var Form = _interopDefault(require('react-bootstrap/Form'));
|
|
53
52
|
var getSerializers = require('./index-ec02006c.js');
|
|
54
53
|
require('./util-f2c1b65b.js');
|
|
@@ -255,7 +254,7 @@ var ISI = function ISI(props) {
|
|
|
255
254
|
);
|
|
256
255
|
};
|
|
257
256
|
|
|
258
|
-
var css = ".RelatedArticles-module_mediaContainer__10h9k {\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: nowrap;\r\n margin: 0 -1rem;\r\n}\r\n.RelatedArticles-module_mediaCard__3wQbn {\r\n margin: 0 1rem 1rem;\r\n width: calc(33% - 1rem);\r\n display: column;\r\n flex-direction: row;\r\n margin-bottom: 0.75rem;\r\n padding-bottom: 0.75rem;\r\n border-bottom: none;\r\n}\r\n.RelatedArticles-module_mediaCard__3wQbn:last-child {\r\n border-bottom: none;\r\n}\r\n.RelatedArticles-module_cardTitle__3P-Ib {\r\n font-weight: bold;\r\n color: #252525;\r\n margin-bottom: 0.25rem;\r\n font-size: 15px;\r\n}\r\n.RelatedArticles-module_authorListing__1EFg4 span.RelatedArticles-module_text-muted__3b0zX {\r\n color: #000;\r\n font-weight: bold;\r\n}\r\n.RelatedArticles-module_cardDate__1wOR5 {\r\n color: var(--dark);\r\n display: block;\r\n background: #fff !important;\r\n margin-bottom: 0;\r\n}\r\n.RelatedArticles-module_imgWrapper__5Jx_4 {\r\n display: block;\r\n text-align: center;\r\n margin-bottom: 0.5rem;\r\n}\r\n.RelatedArticles-module_imgWrapper__5Jx_4 img {\r\n height: 135px;\r\n width: 100%;\r\n object-fit: cover;\r\n object-position: center;\r\n}\r\n@media screen and (max-width: 1064px) {\r\n}\r\n@media screen and (max-width: 968px) {\r\n .RelatedArticles-module_mediaContainer__10h9k {\r\n flex-wrap: wrap;\r\n }\r\n .RelatedArticles-
|
|
257
|
+
var css = ".RelatedArticles-module_mediaContainer__10h9k {\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: nowrap;\r\n margin: 0 -1rem;\r\n}\r\n.RelatedArticles-module_mediaCard__3wQbn {\r\n margin: 0 1rem 1rem;\r\n width: calc(33% - 1rem);\r\n display: column;\r\n flex-direction: row;\r\n margin-bottom: 0.75rem;\r\n padding-bottom: 0.75rem;\r\n border-bottom: none;\r\n}\r\n.RelatedArticles-module_mediaCard__3wQbn:last-child {\r\n border-bottom: none;\r\n}\r\n.RelatedArticles-module_cardTitle__3P-Ib {\r\n font-weight: bold;\r\n color: #252525;\r\n margin-bottom: 0.25rem;\r\n font-size: 15px;\r\n}\r\n.RelatedArticles-module_authorListing__1EFg4 span.RelatedArticles-module_text-muted__3b0zX {\r\n color: #000;\r\n font-weight: bold;\r\n}\r\n.RelatedArticles-module_cardDate__1wOR5 {\r\n color: var(--dark);\r\n display: block;\r\n background: #fff !important;\r\n margin-bottom: 0;\r\n}\r\n.RelatedArticles-module_imgWrapper__5Jx_4 {\r\n display: block;\r\n text-align: center;\r\n margin-bottom: 0.5rem;\r\n}\r\n.RelatedArticles-module_imgWrapper__5Jx_4 img {\r\n height: 135px;\r\n width: 100%;\r\n object-fit: cover;\r\n object-position: center;\r\n}\r\n@media screen and (max-width: 1064px) {\r\n}\r\n@media screen and (max-width: 968px) {\r\n .RelatedArticles-module_mediaContainer__10h9k {\r\n flex-wrap: wrap;\r\n }\r\n .RelatedArticles-module_imgWrapper__5Jx_4 {\r\n display: none;\r\n }\r\n .RelatedArticles-module_mediaCard__3wQbn {\r\n width: 100%;\r\n margin-bottom: 0.5rem;\r\n padding: 0;\r\n }\r\n .RelatedArticles-module_cardTitle__3P-Ib {\r\n font-size: 0.75rem;\r\n margin-bottom: 0;\r\n }\r\n}\r\n";
|
|
259
258
|
var styles = { "mediaContainer": "RelatedArticles-module_mediaContainer__10h9k", "mediaCard": "RelatedArticles-module_mediaCard__3wQbn", "cardTitle": "RelatedArticles-module_cardTitle__3P-Ib", "authorListing": "RelatedArticles-module_authorListing__1EFg4", "text-muted": "RelatedArticles-module_text-muted__3b0zX", "cardDate": "RelatedArticles-module_cardDate__1wOR5", "imgWrapper": "RelatedArticles-module_imgWrapper__5Jx_4" };
|
|
260
259
|
styleInject_es.styleInject(css);
|
|
261
260
|
|
|
@@ -383,6 +382,7 @@ var Article = function Article(props) {
|
|
|
383
382
|
issue = _props$article.issue,
|
|
384
383
|
source = _props$article.source,
|
|
385
384
|
documentGroupMapping = _props$article.documentGroupMapping,
|
|
385
|
+
issueGroup = _props$article.issueGroup,
|
|
386
386
|
showIsi = _props$article.showIsi,
|
|
387
387
|
isi = _props$article.isi,
|
|
388
388
|
regionalPages = props.regionalPages,
|
|
@@ -493,65 +493,76 @@ var Article = function Article(props) {
|
|
|
493
493
|
};
|
|
494
494
|
|
|
495
495
|
var RelevantTopics = function RelevantTopics() {
|
|
496
|
-
if (content_placement && content_placement.length > 0 || documentGroupMapping) {
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
{ className: 'mb-0' },
|
|
503
|
-
React__default.createElement(
|
|
504
|
-
'b',
|
|
505
|
-
null,
|
|
506
|
-
'Related Content:'
|
|
507
|
-
)
|
|
508
|
-
),
|
|
509
|
-
documentGroupMapping && documentGroupMapping.map(function (documentGroup) {
|
|
510
|
-
if (!documentGroup.parent) {
|
|
511
|
-
return null;
|
|
496
|
+
if (content_placement && content_placement.length > 0 || documentGroupMapping && documentGroupMapping.length > 0) {
|
|
497
|
+
var relatedLinks = [];
|
|
498
|
+
if (documentGroupMapping && documentGroupMapping.length > 0) {
|
|
499
|
+
documentGroupMapping.forEach(function (documentGroup) {
|
|
500
|
+
if (documentGroup.parent) {
|
|
501
|
+
relatedLinks = [].concat(toConsumableArray._toConsumableArray(relatedLinks), [{ label: documentGroup.name, href: cpModificationRequired ? '/' + documentGroup.parent.identifier.current + '/' + documentGroup.path : '/' + documentGroup.path }]);
|
|
512
502
|
}
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
{ className: '' },
|
|
520
|
-
React__default.createElement(
|
|
521
|
-
'a',
|
|
522
|
-
{
|
|
523
|
-
className: 'related-links',
|
|
524
|
-
style: { color: 'blue' },
|
|
525
|
-
href: cpModificationRequired ? '/' + documentGroup.parent.identifier.current + '/' + documentGroup.path : '/' + documentGroup.path },
|
|
526
|
-
documentGroup.name
|
|
527
|
-
)
|
|
528
|
-
),
|
|
529
|
-
content_placement && content_placement.length ? ' | ' : null
|
|
530
|
-
);
|
|
531
|
-
}),
|
|
532
|
-
content_placement && content_placement.length > 0 ? content_placement.map(function (cp, index) {
|
|
503
|
+
});
|
|
504
|
+
}
|
|
505
|
+
if (content_placement && content_placement.length > 0) {
|
|
506
|
+
content_placement.filter(function (item) {
|
|
507
|
+
return item.path !== 'news';
|
|
508
|
+
}).forEach(function (cp) {
|
|
533
509
|
var cp_url = cpModificationRequired ? getTargeting.getContentPlacementUrl(cp) : cp.path;
|
|
534
510
|
var href = '/' + cp_url;
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
511
|
+
relatedLinks = [].concat(toConsumableArray._toConsumableArray(relatedLinks), [{ label: cp.name, href: href }]);
|
|
512
|
+
});
|
|
513
|
+
}
|
|
514
|
+
if (issueGroup && issueGroup.name && issueGroup.identifier && issueGroup.identifier.current && issueGroup.parent && issueGroup.parent.identifier && issueGroup.parent.identifier.current) {
|
|
515
|
+
relatedLinks = [].concat(toConsumableArray._toConsumableArray(relatedLinks), [{ label: issueGroup.name, href: '/publications/' + issueGroup.parent.identifier.current + '/' + issueGroup.identifier.current }]);
|
|
516
|
+
}
|
|
517
|
+
if (relatedLinks && relatedLinks.length > 0) {
|
|
518
|
+
return React__default.createElement(
|
|
519
|
+
'div',
|
|
520
|
+
null,
|
|
521
|
+
relatedLinks.map(function (relatedLink, index) {
|
|
522
|
+
return React__default.createElement(
|
|
539
523
|
'span',
|
|
540
|
-
|
|
524
|
+
{ key: index, className: 'related-link' },
|
|
541
525
|
React__default.createElement(
|
|
542
526
|
'a',
|
|
543
|
-
{ className: 'related-links',
|
|
544
|
-
|
|
527
|
+
{ className: 'related-links', style: { color: 'blue' }, href: relatedLink.href },
|
|
528
|
+
relatedLink.label
|
|
529
|
+
),
|
|
530
|
+
React__default.createElement(
|
|
531
|
+
'style',
|
|
532
|
+
{ jsx: 'true' },
|
|
533
|
+
'\n .related-link:not(:first-child):before {\n content: \' | \';\n }\n '
|
|
545
534
|
)
|
|
546
|
-
)
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
535
|
+
);
|
|
536
|
+
})
|
|
537
|
+
);
|
|
538
|
+
}
|
|
539
|
+
return null;
|
|
551
540
|
}
|
|
552
541
|
return null;
|
|
553
542
|
};
|
|
554
543
|
|
|
544
|
+
var RelatedContent = function RelatedContent() {
|
|
545
|
+
return React__default.createElement(
|
|
546
|
+
'section',
|
|
547
|
+
{ id: 'related-content-section', className: 'my-1' },
|
|
548
|
+
React__default.createElement(
|
|
549
|
+
'p',
|
|
550
|
+
{ className: 'mb-0' },
|
|
551
|
+
React__default.createElement(
|
|
552
|
+
'b',
|
|
553
|
+
null,
|
|
554
|
+
'Related Content:'
|
|
555
|
+
)
|
|
556
|
+
),
|
|
557
|
+
React__default.createElement(RelevantTopics, null),
|
|
558
|
+
React__default.createElement(
|
|
559
|
+
'div',
|
|
560
|
+
{ className: 'pt-2' },
|
|
561
|
+
React__default.createElement(RelatedArticle, { articles: article.relatedArticle, client: client })
|
|
562
|
+
)
|
|
563
|
+
);
|
|
564
|
+
};
|
|
565
|
+
|
|
555
566
|
var form = function form() {
|
|
556
567
|
return React__default.createElement(
|
|
557
568
|
React__default.Fragment,
|
|
@@ -1010,20 +1021,7 @@ var Article = function Article(props) {
|
|
|
1010
1021
|
)
|
|
1011
1022
|
),
|
|
1012
1023
|
React__default.createElement('div', { className: 'clearfix', style: { minHeight: '1px' } }),
|
|
1013
|
-
showRelatedArticles && !showIsi && React__default.createElement(
|
|
1014
|
-
React__default.Fragment,
|
|
1015
|
-
null,
|
|
1016
|
-
React__default.createElement(
|
|
1017
|
-
'div',
|
|
1018
|
-
null,
|
|
1019
|
-
React__default.createElement(RelevantTopics, null)
|
|
1020
|
-
),
|
|
1021
|
-
React__default.createElement(
|
|
1022
|
-
'div',
|
|
1023
|
-
{ className: 'pt-2' },
|
|
1024
|
-
React__default.createElement(RelatedArticle, { articles: article.relatedArticle, client: client })
|
|
1025
|
-
)
|
|
1026
|
-
)
|
|
1024
|
+
showRelatedArticles && !showIsi && React__default.createElement(RelatedContent, null)
|
|
1027
1025
|
),
|
|
1028
1026
|
renderIsiContent(props.article)
|
|
1029
1027
|
),
|
|
@@ -1188,50 +1186,77 @@ var ArticleQueue = function ArticleQueue(props) {
|
|
|
1188
1186
|
}, 1000);
|
|
1189
1187
|
}, [queueData.length]);
|
|
1190
1188
|
|
|
1191
|
-
var loadmore = function
|
|
1192
|
-
var
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
switch (_context.prev = _context.next) {
|
|
1202
|
-
case 0:
|
|
1203
|
-
if (!(article && article._id)) {
|
|
1204
|
-
_context.next = 9;
|
|
1205
|
-
break;
|
|
1206
|
-
}
|
|
1207
|
-
|
|
1208
|
-
//query next 4 related article without repeating previous 4 related articles
|
|
1209
|
-
startingIndex = queueData.length + 1;
|
|
1210
|
-
endingIndex = startingIndex + 2;
|
|
1211
|
-
_context.next = 5;
|
|
1212
|
-
return getRelatedArticle(null, props.client, article, prevUrl, startingIndex + '..' + endingIndex);
|
|
1213
|
-
|
|
1214
|
-
case 5:
|
|
1215
|
-
article.relatedArticle = _context.sent;
|
|
1216
|
-
targeting = getTargeting.getTargeting({ article: article, cpModificationRequired: cpModificationRequired, prevUrl: prevUrl });
|
|
1217
|
-
|
|
1218
|
-
article.Ads = Ads.getRightItems(targeting);
|
|
1219
|
-
setQueueData([].concat(toConsumableArray._toConsumableArray(queueData), [article]));
|
|
1220
|
-
|
|
1221
|
-
case 9:
|
|
1222
|
-
case 'end':
|
|
1223
|
-
return _context.stop();
|
|
1189
|
+
var loadmore = function () {
|
|
1190
|
+
var _ref = asyncToGenerator._asyncToGenerator( /*#__PURE__*/asyncToGenerator.regenerator.mark(function _callee() {
|
|
1191
|
+
var index, article, startingIndex, endingIndex, targeting;
|
|
1192
|
+
return asyncToGenerator.regenerator.wrap(function _callee$(_context) {
|
|
1193
|
+
while (1) {
|
|
1194
|
+
switch (_context.prev = _context.next) {
|
|
1195
|
+
case 0:
|
|
1196
|
+
if (!(queueData && queueData.length < maxListLength)) {
|
|
1197
|
+
_context.next = 27;
|
|
1198
|
+
break;
|
|
1224
1199
|
}
|
|
1225
|
-
}
|
|
1226
|
-
}, _callee, _this);
|
|
1227
|
-
}));
|
|
1228
1200
|
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1201
|
+
index = queueData.length - 1;
|
|
1202
|
+
article = null;
|
|
1203
|
+
_context.prev = 3;
|
|
1204
|
+
_context.next = 6;
|
|
1205
|
+
return getRelatedArticle(null, props.client, props.article, prevUrl, index);
|
|
1206
|
+
|
|
1207
|
+
case 6:
|
|
1208
|
+
article = _context.sent;
|
|
1209
|
+
_context.next = 12;
|
|
1210
|
+
break;
|
|
1211
|
+
|
|
1212
|
+
case 9:
|
|
1213
|
+
_context.prev = 9;
|
|
1214
|
+
_context.t0 = _context['catch'](3);
|
|
1215
|
+
|
|
1216
|
+
console.error(_context.t0);
|
|
1217
|
+
|
|
1218
|
+
case 12:
|
|
1219
|
+
if (!(article && article._id)) {
|
|
1220
|
+
_context.next = 27;
|
|
1221
|
+
break;
|
|
1222
|
+
}
|
|
1223
|
+
|
|
1224
|
+
//query next 4 related article without repeating previous 4 related articles
|
|
1225
|
+
startingIndex = queueData.length + 1;
|
|
1226
|
+
endingIndex = startingIndex + 2;
|
|
1227
|
+
_context.prev = 15;
|
|
1228
|
+
_context.next = 18;
|
|
1229
|
+
return getRelatedArticle(null, props.client, props.article, prevUrl, startingIndex + '..' + endingIndex);
|
|
1230
|
+
|
|
1231
|
+
case 18:
|
|
1232
|
+
article.relatedArticle = _context.sent;
|
|
1233
|
+
_context.next = 24;
|
|
1234
|
+
break;
|
|
1235
|
+
|
|
1236
|
+
case 21:
|
|
1237
|
+
_context.prev = 21;
|
|
1238
|
+
_context.t1 = _context['catch'](15);
|
|
1239
|
+
|
|
1240
|
+
console.error(_context.t1);
|
|
1241
|
+
|
|
1242
|
+
case 24:
|
|
1243
|
+
targeting = getTargeting.getTargeting({ article: article, cpModificationRequired: cpModificationRequired, prevUrl: prevUrl });
|
|
1244
|
+
|
|
1245
|
+
article.Ads = Ads.getRightItems(targeting);
|
|
1246
|
+
setQueueData([].concat(toConsumableArray._toConsumableArray(queueData), [article]));
|
|
1247
|
+
|
|
1248
|
+
case 27:
|
|
1249
|
+
case 'end':
|
|
1250
|
+
return _context.stop();
|
|
1251
|
+
}
|
|
1252
|
+
}
|
|
1253
|
+
}, _callee, _this, [[3, 9], [15, 21]]);
|
|
1254
|
+
}));
|
|
1255
|
+
|
|
1256
|
+
return function loadmore() {
|
|
1257
|
+
return _ref.apply(this, arguments);
|
|
1258
|
+
};
|
|
1259
|
+
}();
|
|
1235
1260
|
|
|
1236
1261
|
var changeMeta = function changeMeta(meta) {
|
|
1237
1262
|
document.title = meta.shareTitle;
|
|
@@ -1303,74 +1328,6 @@ var ArticleQueue = function ArticleQueue(props) {
|
|
|
1303
1328
|
);
|
|
1304
1329
|
};
|
|
1305
1330
|
|
|
1306
|
-
var Articles = function Articles(props) {
|
|
1307
|
-
var _extends2;
|
|
1308
|
-
|
|
1309
|
-
var videoAccountIDs = props.videoAccountIDs,
|
|
1310
|
-
Ads = props.Ads,
|
|
1311
|
-
cpModificationRequired = props.cpModificationRequired,
|
|
1312
|
-
Settings = props.Settings,
|
|
1313
|
-
ISIContent = props.ISIContent,
|
|
1314
|
-
prevUrl = props.prevUrl,
|
|
1315
|
-
setActiveArticle = props.setActiveArticle,
|
|
1316
|
-
article = props.article,
|
|
1317
|
-
client = props.client,
|
|
1318
|
-
relatedArticleQuery = props.relatedArticleQuery,
|
|
1319
|
-
Website = props.Website,
|
|
1320
|
-
pageview = props.pageview,
|
|
1321
|
-
shareOptions = props.shareOptions,
|
|
1322
|
-
WAds = props.WAds,
|
|
1323
|
-
regionalPages = props.regionalPages,
|
|
1324
|
-
nationalPage = props.nationalPage,
|
|
1325
|
-
canonicalTag = props.canonicalTag;
|
|
1326
|
-
var taxonomyMapping = article.taxonomyMapping,
|
|
1327
|
-
_article$url = article.url;
|
|
1328
|
-
_article$url = _article$url === undefined ? {
|
|
1329
|
-
current: null
|
|
1330
|
-
} : _article$url;
|
|
1331
|
-
var url = _article$url.current,
|
|
1332
|
-
content_placement = article.content_placement;
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
var taxonomy = [];
|
|
1336
|
-
content_placement.forEach(function (_ref2) {
|
|
1337
|
-
var path = _ref2.path,
|
|
1338
|
-
_id = _ref2._id;
|
|
1339
|
-
|
|
1340
|
-
var prev_url_to_check = prevUrl;
|
|
1341
|
-
if (prev_url_to_check.includes('?')) {
|
|
1342
|
-
prev_url_to_check = prev_url_to_check.split('?')[0];
|
|
1343
|
-
}
|
|
1344
|
-
if (prev_url_to_check.endsWith(path)) taxonomy.push(_id);
|
|
1345
|
-
});
|
|
1346
|
-
|
|
1347
|
-
if (taxonomy.length === 0) {
|
|
1348
|
-
taxonomy = taxonomyMapping.map(function (_ref3) {
|
|
1349
|
-
var _ref = _ref3._ref;
|
|
1350
|
-
return _ref;
|
|
1351
|
-
});
|
|
1352
|
-
}
|
|
1353
|
-
|
|
1354
|
-
var params = {
|
|
1355
|
-
url: url,
|
|
1356
|
-
taxonomy: taxonomy,
|
|
1357
|
-
index: 0
|
|
1358
|
-
};
|
|
1359
|
-
|
|
1360
|
-
return React__default.createElement(ArticleQueue, _extends._extends((_extends2 = {
|
|
1361
|
-
client: client,
|
|
1362
|
-
params: params,
|
|
1363
|
-
relatedArticleQuery: relatedArticleQuery,
|
|
1364
|
-
website: Website,
|
|
1365
|
-
checkSponsered: true,
|
|
1366
|
-
pageview: pageview,
|
|
1367
|
-
shareOptions: shareOptions,
|
|
1368
|
-
Ads: WAds,
|
|
1369
|
-
regionalPages: regionalPages,
|
|
1370
|
-
nationalPage: nationalPage
|
|
1371
|
-
}, defineProperty$1._defineProperty(_extends2, 'pageview', pageview), defineProperty$1._defineProperty(_extends2, 'onVote', function onVote() {}), defineProperty$1._defineProperty(_extends2, 'ISIContent', ISIContent), defineProperty$1._defineProperty(_extends2, 'videoAccountIDs', videoAccountIDs), defineProperty$1._defineProperty(_extends2, 'sponsoredTaxonomies', []), defineProperty$1._defineProperty(_extends2, 'cpModificationRequired', cpModificationRequired), defineProperty$1._defineProperty(_extends2, 'Settings', Settings), defineProperty$1._defineProperty(_extends2, 'canonicalTag', canonicalTag), _extends2), props));
|
|
1372
|
-
};
|
|
1373
|
-
|
|
1374
1331
|
var _this$1 = undefined;
|
|
1375
1332
|
|
|
1376
1333
|
var View = function View(props) {
|
|
@@ -1549,7 +1506,15 @@ var View = function View(props) {
|
|
|
1549
1506
|
props.article.seriesDetail && props.article.seriesDetail.nextUrl && React__default.createElement('link', { rel: 'next', href: props.article.seriesDetail.nextUrl })
|
|
1550
1507
|
)
|
|
1551
1508
|
),
|
|
1552
|
-
!needInfiniteScroll ? React__default.createElement(Article, _extends._extends({ infiniteScroll: false, showRelatedArticles: showRelatedArticles }, props)) : React__default.createElement(
|
|
1509
|
+
!needInfiniteScroll ? React__default.createElement(Article, _extends._extends({ infiniteScroll: false, showRelatedArticles: showRelatedArticles }, props)) : React__default.createElement(ArticleQueue, _extends._extends({
|
|
1510
|
+
infiniteScroll: true,
|
|
1511
|
+
showRelatedArticles: showRelatedArticles,
|
|
1512
|
+
canonicalTag: canonicalTag,
|
|
1513
|
+
checkSponsered: true,
|
|
1514
|
+
Ads: props.WAds,
|
|
1515
|
+
onVote: function onVote() {},
|
|
1516
|
+
sponsoredTaxonomies: []
|
|
1517
|
+
}, props))
|
|
1553
1518
|
);
|
|
1554
1519
|
};
|
|
1555
1520
|
|
package/dist/cjs/YoutubeGroup.js
CHANGED
|
@@ -47,6 +47,9 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
47
47
|
scrollPosition = _useState6[0],
|
|
48
48
|
setScrollPosition = _useState6[1];
|
|
49
49
|
|
|
50
|
+
var vidHolderWidth = props.vidHolderWidth ? props.vidHolderWidth : '805px';
|
|
51
|
+
var numOfTiles = props.numOfTiles ? props.numOfTiles : [3, 2, 1];
|
|
52
|
+
|
|
50
53
|
var urlFor = function urlFor(source, client) {
|
|
51
54
|
var builder = index$1.imageUrlBuilder(client);
|
|
52
55
|
return builder.image(source).auto('format');
|
|
@@ -85,19 +88,19 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
85
88
|
var thumbSize = void 0;
|
|
86
89
|
var scrollerVisible = false;
|
|
87
90
|
if (window.innerWidth > 1399) {
|
|
88
|
-
thumbSize = Math.floor(viewableWindow.current.clientWidth /
|
|
91
|
+
thumbSize = Math.floor(viewableWindow.current.clientWidth / numOfTiles[0] - 40);
|
|
89
92
|
if (props.dataset.length > 3) {
|
|
90
93
|
scrollerVisible = true;
|
|
91
94
|
}
|
|
92
95
|
}
|
|
93
96
|
if (window.innerWidth < 1399 && window.innerWidth > 592) {
|
|
94
|
-
thumbSize = Math.floor(viewableWindow.current.clientWidth /
|
|
97
|
+
thumbSize = Math.floor(viewableWindow.current.clientWidth / numOfTiles[1] - 48);
|
|
95
98
|
if (props.dataset.length > 2) {
|
|
96
99
|
scrollerVisible = true;
|
|
97
100
|
}
|
|
98
101
|
}
|
|
99
102
|
if (window.innerWidth < 592) {
|
|
100
|
-
thumbSize = Math.floor(viewableWindow.current.clientWidth /
|
|
103
|
+
thumbSize = Math.floor(viewableWindow.current.clientWidth / numOfTiles[2] - 64);
|
|
101
104
|
if (props.dataset.length > 1) {
|
|
102
105
|
scrollerVisible = true;
|
|
103
106
|
}
|
|
@@ -142,13 +145,13 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
142
145
|
|
|
143
146
|
if (scrollOffset === 0) {
|
|
144
147
|
if (window.innerWidth > 1399) {
|
|
145
|
-
scrollDirection = innerSlider.current.offsetWidth - tileSize *
|
|
148
|
+
scrollDirection = innerSlider.current.offsetWidth - tileSize * numOfTiles[0] - 70;
|
|
146
149
|
}
|
|
147
150
|
if (window.innerWidth < 1399 && window.innerWidth > 592) {
|
|
148
|
-
scrollDirection = innerSlider.current.offsetWidth - tileSize *
|
|
151
|
+
scrollDirection = innerSlider.current.offsetWidth - tileSize * numOfTiles[1] - 40;
|
|
149
152
|
}
|
|
150
153
|
if (window.innerWidth < 592) {
|
|
151
|
-
scrollDirection = innerSlider.current.offsetWidth - tileSize *
|
|
154
|
+
scrollDirection = innerSlider.current.offsetWidth - tileSize * numOfTiles[3] - 24;
|
|
152
155
|
}
|
|
153
156
|
}
|
|
154
157
|
}
|
|
@@ -356,7 +359,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
356
359
|
React__default.createElement(
|
|
357
360
|
'style',
|
|
358
361
|
{ jsx: 'true' },
|
|
359
|
-
'\n #vid-slider * {\n box-sizing: border-box;\n -ms-overflow-style: none;\n }\n #vid-slider::-webkit-scrollbar-thumb {\n display: none;\n }\n #vid-slider::-webkit-scrollbar {\n display: none;\n }\n #vid-slider .row::-webkit-scrollbar {\n display: none;\n }\n #vid-slider .row::-webkit-scrollbar-thumb {\n display: none;\n }\n #vid-slider {\n position: relative;\n -ms-overflow-style: none;\n padding: 0 1.5rem;\n margin-bottom: 2rem;\n }\n #vid-slider .now-playing {\n position: absolute;\n top: 0.5rem;\n left: 1rem;\n color: white;\n background: rgba(0, 0, 0, 0.75);\n }\n #vid-slider h1,\n #vid-slider p {\n text-align: center;\n width: 100%;\n max-width: 500px;\n margin: auto;\n }\n #vid-slider,\n #vidHolder {\n max-width:
|
|
362
|
+
'\n #vid-slider * {\n box-sizing: border-box;\n -ms-overflow-style: none;\n }\n #vid-slider::-webkit-scrollbar-thumb {\n display: none;\n }\n #vid-slider::-webkit-scrollbar {\n display: none;\n }\n #vid-slider .row::-webkit-scrollbar {\n display: none;\n }\n #vid-slider .row::-webkit-scrollbar-thumb {\n display: none;\n }\n #vid-slider {\n position: relative;\n -ms-overflow-style: none;\n padding: 0 1.5rem;\n margin-bottom: 2rem;\n }\n #vid-slider .now-playing {\n position: absolute;\n top: 0.5rem;\n left: 1rem;\n color: white;\n background: rgba(0, 0, 0, 0.75);\n }\n #vid-slider h1,\n #vid-slider p {\n text-align: center;\n width: 100%;\n max-width: 500px;\n margin: auto;\n }\n #vid-slider,\n #vidHolder {\n max-width: ' + vidHolderWidth + ';\n }\n #vid-slider a:link,\n #vid-slider a:hover,\n #vid-slider a:active,\n #vid-slider a:visited {\n transition: color 150ms;\n color: #95a5a6;\n text-decoration: none;\n }\n #vid-slider a:hover {\n color: #7f8c8d;\n text-decoration: underline;\n }\n #vid-slider .contain {\n width: 100%;\n }\n #vid-slider .row {\n overflow-x: hidden;\n width: 100%;\n -ms-overflow-style: none;\n overflow-y: hidden !important;\n }\n #vid-slider .tile__info {\n white-space: normal !important;\n position: absolute;\n width: 100%;\n text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: 0.9rem;\n font-weight: bold;\n transition: opacity 0.25s;\n }\n #vid-slider .row__inner {\n transition: 450ms -webkit-transform;\n transition: 450ms transform;\n transition: 450ms transform, 450ms -webkit-transform;\n font-size: 0;\n white-space: nowrap;\n margin: 25px 0 0 -0.25rem !important;\n padding-bottom: 10px;\n padding-left: 0;\n }\n #vid-slider .tile {\n position: relative;\n display: inline-block;\n height: 100%;\n\n margin: 0 12.5px;\n font-size: 20px;\n cursor: pointer;\n transition: 450ms all;\n -webkit-transform-origin: center left;\n transform-origin: center left;\n }\n #vid-slider .tile:first-child {\n margin-left: 15px;\n }\n #vid-slider .tile__img {\n height: 135px;\n\n -o-object-fit: cover;\n object-fit: cover;\n object-position: center;\n }\n #vid-slider .tile__details {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n top: 0;\n font-size: 10px;\n opacity: 0;\n background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n transition: 450ms opacity;\n }\n #vid-slider .tile__details:after,\n #vid-slider .tile__details:before {\n content: \'\';\n\n position: absolute;\n top: 50%;\n left: 50%;\n display: #000;\n }\n #vid-slider .tile__details:after {\n margin-top: -25px;\n margin-left: -25px;\n width: 50px;\n height: 50px;\n border: 3px solid #ecf0f1;\n line-height: 50px;\n text-align: center;\n border-radius: 100%;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1;\n }\n #vid-slider .tile__details:before {\n content: \'\';\n background: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\' width=\'64\' height=\'64\' fill=\'white\'><path d=\'M26 46 L46 32 L26 18 Z\'/></svg>")\n no-repeat center center;\n left: 0;\n width: 100%;\n height: 3rem;\n font-size: 30px;\n margin-right: 12px;\n margin-top: -24px;\n text-align: center;\n z-index: 2;\n color: white;\n }\n\n #vid-slider .tile__title {\n position: absolute;\n bottom: 0;\n padding: 10px;\n max-width: 250px;\n }\n #vid-slider .tile__title_text {\n position: relative;\n left: 0;\n white-space: normal;\n }\n\n #vid-slider .tile__slider-prev,\n #vid-slider .tile__slider-next {\n width: 30px;\n background: transparent;\n border: none;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 99;\n cursor: pointer;\n color: ' + (props.dark ? 'white' : 'black') + ';\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 2rem;\n }\n #vid-slider .tile__slider-prev {\n left: -0.5rem;\n padding: 1rem;\n }\n #vid-slider .tile__slider-next {\n right: -0.5rem;\n padding: 1rem;\n }\n #vid-slider,\n #vid-slider .row {\n margin: 0;\n padding-right: 0 1.2rem;\n }\n\n #vid-slider .row::-webkit-scrollbar-thumb {\n background-color: transparent !important;\n }\n #vid-slider i {\n border: solid ' + (props.dark ? 'white' : 'black') + ';\n border-width: 0 4px 4px 0;\n display: inline-block;\n padding: 4px;\n pointer-events: none;\n }\n #vid-slider .right {\n transform: rotate(-45deg);\n -webkit-transform: rotate(-45deg);\n }\n #vid-slider .left {\n transform: rotate(135deg);\n -webkit-transform: rotate(135deg);\n }\n @media screen and (max-width: 1399px) {\n #vid-slider,\n #vidHolder {\n max-width: 620px;\n }\n #vid-slider .tile__img {\n height: 145px;\n }\n }\n @media screen and (max-width: 1200px) {\n #vid-slider,\n #vidHolder {\n max-width: 580px;\n }\n }\n @media screen and (max-width: 967px) {\n #vid-slider {\n max-width: 100%;\n }\n #vid-slider .tile__img {\n height: 175px;\n }\n }\n\n @media screen and (max-width: 768px) {\n #vidHolder {\n position: unset;\n width: 100%;\n }\n\n #vid-slider .tile__img {\n height: 118px;\n }\n #vid-slider .row__inner {\n margin: 30px 0 60px;\n }\n }\n\n @media screen and (max-width: 590px) {\n #vid-slider .tile__img {\n height: 195px;\n }\n }\n '
|
|
360
363
|
)
|
|
361
364
|
);
|
|
362
365
|
};
|