@mjhls/mjh-framework 1.0.699 → 1.0.700
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/YoutubeGroup.js +10 -7
- package/dist/esm/ArticleCarousel.js +4 -2
- package/dist/esm/BrowseVideosListing.js +62 -18
- package/dist/esm/YoutubeGroup.js +10 -7
- 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/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
|
};
|
|
@@ -19,7 +19,9 @@ import YoutubeGroup from './YoutubeGroup.js';
|
|
|
19
19
|
|
|
20
20
|
function ArticleCarousel(props) {
|
|
21
21
|
//Passed in array of articles to pass into YoutubeGroup
|
|
22
|
-
var articles = props.articles
|
|
22
|
+
var articles = props.articles,
|
|
23
|
+
vidHolderWidth = props.vidHolderWidth,
|
|
24
|
+
numOfTiles = props.numOfTiles;
|
|
23
25
|
|
|
24
26
|
//Setup article.link URL
|
|
25
27
|
|
|
@@ -31,7 +33,7 @@ function ArticleCarousel(props) {
|
|
|
31
33
|
return React__default.createElement(
|
|
32
34
|
React__default.Fragment,
|
|
33
35
|
null,
|
|
34
|
-
articles ? React__default.createElement(YoutubeGroup, _extends({ key: 'articleCarousel-0', dataset: data }, props)) : React__default.createElement(
|
|
36
|
+
articles ? React__default.createElement(YoutubeGroup, _extends({ key: 'articleCarousel-0', vidHolderWidth: vidHolderWidth, numOfTiles: numOfTiles, dataset: data }, props)) : React__default.createElement(
|
|
35
37
|
'p',
|
|
36
38
|
null,
|
|
37
39
|
'No Article Found.'
|
|
@@ -16,6 +16,8 @@ import './index-5f9f807a.js';
|
|
|
16
16
|
import './slicedToArray-7021e5df.js';
|
|
17
17
|
import './smoothscroll-4b699764.js';
|
|
18
18
|
import './YoutubeGroup.js';
|
|
19
|
+
import './iconBase-602d52fe.js';
|
|
20
|
+
import { I as IoIosArrowForward } from './index.esm-29e48d38.js';
|
|
19
21
|
import ArticleCarousel from './ArticleCarousel.js';
|
|
20
22
|
|
|
21
23
|
function BrowseVideosListing(_ref) {
|
|
@@ -24,7 +26,11 @@ function BrowseVideosListing(_ref) {
|
|
|
24
26
|
_ref$client = _ref.client,
|
|
25
27
|
client = _ref$client === undefined ? null : _ref$client,
|
|
26
28
|
_ref$color = _ref.color,
|
|
27
|
-
color = _ref$color === undefined ? '#FFFFFF' : _ref$color
|
|
29
|
+
color = _ref$color === undefined ? '#FFFFFF' : _ref$color,
|
|
30
|
+
_ref$numOfTiles = _ref.numOfTiles,
|
|
31
|
+
numOfTiles = _ref$numOfTiles === undefined ? [3, 2, 1] : _ref$numOfTiles,
|
|
32
|
+
_ref$vidHolderWidth = _ref.vidHolderWidth,
|
|
33
|
+
vidHolderWidth = _ref$vidHolderWidth === undefined ? '805px' : _ref$vidHolderWidth;
|
|
28
34
|
|
|
29
35
|
// Look at AJMC for query setup
|
|
30
36
|
// Data format = Array of Objects based on Taxonomies with videos and latest videos
|
|
@@ -36,35 +42,73 @@ function BrowseVideosListing(_ref) {
|
|
|
36
42
|
return React__default.createElement(
|
|
37
43
|
'div',
|
|
38
44
|
null,
|
|
39
|
-
data
|
|
45
|
+
data.length > 0 ? data.map(function (taxonomy, index) {
|
|
40
46
|
return React__default.createElement(
|
|
41
|
-
|
|
42
|
-
|
|
47
|
+
React__default.Fragment,
|
|
48
|
+
null,
|
|
43
49
|
React__default.createElement(
|
|
44
50
|
'div',
|
|
45
|
-
{
|
|
51
|
+
{ key: 'articleCarousel_' + taxonomy.identifier + '_' + index, className: 'mb-3 browse-videos' },
|
|
46
52
|
React__default.createElement(
|
|
47
|
-
'
|
|
48
|
-
{ style: {
|
|
49
|
-
taxonomy.name
|
|
50
|
-
),
|
|
51
|
-
taxonomy.identifier && React__default.createElement(
|
|
52
|
-
'p',
|
|
53
|
-
{ style: { width: 'fit-content', marginBottom: '.25rem' } },
|
|
53
|
+
'div',
|
|
54
|
+
{ className: 'browse-videos-header', style: { borderBottom: '2px solid ' + color } },
|
|
54
55
|
React__default.createElement(
|
|
55
56
|
'a',
|
|
56
57
|
{ href: '/' + taxonomy.identifier },
|
|
57
|
-
|
|
58
|
+
React__default.createElement(
|
|
59
|
+
'h4',
|
|
60
|
+
{ className: 'article-title-banner', style: { fontWeight: 'bold', color: 'var(--primary)', padding: '.25rem 0', margin: '0' } },
|
|
61
|
+
taxonomy.name
|
|
62
|
+
)
|
|
63
|
+
),
|
|
64
|
+
taxonomy.identifier && React__default.createElement(
|
|
65
|
+
'div',
|
|
66
|
+
{ style: { width: 'fit-content', whiteSpace: 'nowrap' } },
|
|
67
|
+
React__default.createElement(
|
|
68
|
+
'a',
|
|
69
|
+
{ href: '/' + taxonomy.identifier },
|
|
70
|
+
'View All ',
|
|
71
|
+
React__default.createElement(IoIosArrowForward, null)
|
|
72
|
+
)
|
|
73
|
+
)
|
|
74
|
+
),
|
|
75
|
+
taxonomy.data.length > 0 ? React__default.createElement(
|
|
76
|
+
'div',
|
|
77
|
+
{ className: 'article-carousel' },
|
|
78
|
+
React__default.createElement(ArticleCarousel, { articles: taxonomy.data, client: client, numOfTiles: numOfTiles, vidHolderWidth: vidHolderWidth })
|
|
79
|
+
) : React__default.createElement(
|
|
80
|
+
'div',
|
|
81
|
+
null,
|
|
82
|
+
React__default.createElement(
|
|
83
|
+
'h5',
|
|
84
|
+
{ className: 'mt-2' },
|
|
85
|
+
React__default.createElement(
|
|
86
|
+
'em',
|
|
87
|
+
{ className: 'pl-3' },
|
|
88
|
+
'New content coming soon, please check back later.'
|
|
89
|
+
)
|
|
58
90
|
)
|
|
59
91
|
)
|
|
60
92
|
),
|
|
61
|
-
|
|
62
|
-
'
|
|
63
|
-
|
|
64
|
-
|
|
93
|
+
React__default.createElement(
|
|
94
|
+
'style',
|
|
95
|
+
{ jsx: 'true' },
|
|
96
|
+
'\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 '
|
|
65
97
|
)
|
|
66
98
|
);
|
|
67
|
-
})
|
|
99
|
+
}) : React__default.createElement(
|
|
100
|
+
'div',
|
|
101
|
+
null,
|
|
102
|
+
React__default.createElement(
|
|
103
|
+
'h5',
|
|
104
|
+
null,
|
|
105
|
+
React__default.createElement(
|
|
106
|
+
'em',
|
|
107
|
+
{ className: 'pl-3' },
|
|
108
|
+
'New content coming soon, please check back later.'
|
|
109
|
+
)
|
|
110
|
+
)
|
|
111
|
+
)
|
|
68
112
|
);
|
|
69
113
|
}
|
|
70
114
|
|
package/dist/esm/YoutubeGroup.js
CHANGED
|
@@ -42,6 +42,9 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
42
42
|
scrollPosition = _useState6[0],
|
|
43
43
|
setScrollPosition = _useState6[1];
|
|
44
44
|
|
|
45
|
+
var vidHolderWidth = props.vidHolderWidth ? props.vidHolderWidth : '805px';
|
|
46
|
+
var numOfTiles = props.numOfTiles ? props.numOfTiles : [3, 2, 1];
|
|
47
|
+
|
|
45
48
|
var urlFor = function urlFor(source, client) {
|
|
46
49
|
var builder = imageUrlBuilder(client);
|
|
47
50
|
return builder.image(source).auto('format');
|
|
@@ -80,19 +83,19 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
80
83
|
var thumbSize = void 0;
|
|
81
84
|
var scrollerVisible = false;
|
|
82
85
|
if (window.innerWidth > 1399) {
|
|
83
|
-
thumbSize = Math.floor(viewableWindow.current.clientWidth /
|
|
86
|
+
thumbSize = Math.floor(viewableWindow.current.clientWidth / numOfTiles[0] - 40);
|
|
84
87
|
if (props.dataset.length > 3) {
|
|
85
88
|
scrollerVisible = true;
|
|
86
89
|
}
|
|
87
90
|
}
|
|
88
91
|
if (window.innerWidth < 1399 && window.innerWidth > 592) {
|
|
89
|
-
thumbSize = Math.floor(viewableWindow.current.clientWidth /
|
|
92
|
+
thumbSize = Math.floor(viewableWindow.current.clientWidth / numOfTiles[1] - 48);
|
|
90
93
|
if (props.dataset.length > 2) {
|
|
91
94
|
scrollerVisible = true;
|
|
92
95
|
}
|
|
93
96
|
}
|
|
94
97
|
if (window.innerWidth < 592) {
|
|
95
|
-
thumbSize = Math.floor(viewableWindow.current.clientWidth /
|
|
98
|
+
thumbSize = Math.floor(viewableWindow.current.clientWidth / numOfTiles[2] - 64);
|
|
96
99
|
if (props.dataset.length > 1) {
|
|
97
100
|
scrollerVisible = true;
|
|
98
101
|
}
|
|
@@ -137,13 +140,13 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
137
140
|
|
|
138
141
|
if (scrollOffset === 0) {
|
|
139
142
|
if (window.innerWidth > 1399) {
|
|
140
|
-
scrollDirection = innerSlider.current.offsetWidth - tileSize *
|
|
143
|
+
scrollDirection = innerSlider.current.offsetWidth - tileSize * numOfTiles[0] - 70;
|
|
141
144
|
}
|
|
142
145
|
if (window.innerWidth < 1399 && window.innerWidth > 592) {
|
|
143
|
-
scrollDirection = innerSlider.current.offsetWidth - tileSize *
|
|
146
|
+
scrollDirection = innerSlider.current.offsetWidth - tileSize * numOfTiles[1] - 40;
|
|
144
147
|
}
|
|
145
148
|
if (window.innerWidth < 592) {
|
|
146
|
-
scrollDirection = innerSlider.current.offsetWidth - tileSize *
|
|
149
|
+
scrollDirection = innerSlider.current.offsetWidth - tileSize * numOfTiles[3] - 24;
|
|
147
150
|
}
|
|
148
151
|
}
|
|
149
152
|
}
|
|
@@ -351,7 +354,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
351
354
|
React__default.createElement(
|
|
352
355
|
'style',
|
|
353
356
|
{ jsx: 'true' },
|
|
354
|
-
'\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:
|
|
357
|
+
'\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 '
|
|
355
358
|
)
|
|
356
359
|
);
|
|
357
360
|
};
|