@mjhls/mjh-framework 1.0.327 → 1.0.329
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/YoutubeGroup.js +31 -8
- package/dist/cjs/index.js +27 -2
- package/dist/esm/YoutubeGroup.js +31 -8
- package/dist/esm/index.js +27 -2
- package/package.json +1 -1
package/README.md
CHANGED
package/dist/cjs/YoutubeGroup.js
CHANGED
|
@@ -31,6 +31,16 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
31
31
|
tileSize = _useState2[0],
|
|
32
32
|
setTileSize = _useState2[1];
|
|
33
33
|
|
|
34
|
+
var _useState3 = React.useState(false),
|
|
35
|
+
_useState4 = slicedToArray._slicedToArray(_useState3, 2),
|
|
36
|
+
showScroller = _useState4[0],
|
|
37
|
+
setShowScroller = _useState4[1];
|
|
38
|
+
|
|
39
|
+
var _useState5 = React.useState(0),
|
|
40
|
+
_useState6 = slicedToArray._slicedToArray(_useState5, 2),
|
|
41
|
+
scrollPosition = _useState6[0],
|
|
42
|
+
setScrollPosition = _useState6[1];
|
|
43
|
+
|
|
34
44
|
React.useEffect(function () {
|
|
35
45
|
//IE11 Polyfill
|
|
36
46
|
smoothscroll.smoothscroll.polyfill();
|
|
@@ -45,17 +55,29 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
45
55
|
|
|
46
56
|
var setThumbSize = function setThumbSize() {
|
|
47
57
|
var thumbSize = void 0;
|
|
58
|
+
var scrollerVisible = false;
|
|
48
59
|
if (window.innerWidth > 1399) {
|
|
49
60
|
thumbSize = Math.floor(viewableWindow.current.clientWidth / 3 - 40);
|
|
61
|
+
if (props.dataset.length > 3) {
|
|
62
|
+
scrollerVisible = true;
|
|
63
|
+
}
|
|
50
64
|
}
|
|
51
65
|
if (window.innerWidth < 1399 && window.innerWidth > 592) {
|
|
52
66
|
thumbSize = Math.floor(viewableWindow.current.clientWidth / 2 - 48);
|
|
67
|
+
if (props.dataset.length > 2) {
|
|
68
|
+
scrollerVisible = true;
|
|
69
|
+
}
|
|
53
70
|
}
|
|
54
71
|
if (window.innerWidth < 592) {
|
|
55
72
|
thumbSize = Math.floor(viewableWindow.current.clientWidth / 1 - 64);
|
|
73
|
+
if (props.dataset.length > 1) {
|
|
74
|
+
scrollerVisible = true;
|
|
75
|
+
}
|
|
56
76
|
}
|
|
57
77
|
if (thumbSize !== tileSize) {
|
|
58
78
|
setTileSize(thumbSize);
|
|
79
|
+
setScrollPosition(0);
|
|
80
|
+
setShowScroller(scrollerVisible);
|
|
59
81
|
var videoRows = document.querySelectorAll('#vid-slider .row');
|
|
60
82
|
for (var i = 0; i < videoRows.length; i++) {
|
|
61
83
|
videoRows[i].scrollTo({
|
|
@@ -72,7 +94,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
72
94
|
|
|
73
95
|
function scrollSlider(e, direction) {
|
|
74
96
|
var slide = e.target.parentElement;
|
|
75
|
-
var scrollOffset =
|
|
97
|
+
var scrollOffset = scrollPosition;
|
|
76
98
|
var viewableWidth = slide.clientWidth;
|
|
77
99
|
|
|
78
100
|
//calculate viewable size / slide
|
|
@@ -106,6 +128,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
106
128
|
left: scrollDirection,
|
|
107
129
|
behavior: 'smooth'
|
|
108
130
|
});
|
|
131
|
+
setScrollPosition(scrollDirection);
|
|
109
132
|
}
|
|
110
133
|
|
|
111
134
|
function handleClick(url, vidIndex) {
|
|
@@ -122,19 +145,19 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
122
145
|
React__default.createElement(
|
|
123
146
|
'div',
|
|
124
147
|
{ className: 'row' },
|
|
125
|
-
React__default.createElement(
|
|
148
|
+
showScroller && showScroller && React__default.createElement(
|
|
126
149
|
'div',
|
|
127
150
|
{ onClick: function onClick(e) {
|
|
128
151
|
return scrollSlider(e, 'prev');
|
|
129
|
-
}, className: 'tile__slider-prev', style: { color:
|
|
130
|
-
React__default.createElement('i', { style: { border: 'solid '
|
|
152
|
+
}, className: 'tile__slider-prev', style: { color: '#fff', background: 'var(--primary)', paddingLeft: '19px' } },
|
|
153
|
+
React__default.createElement('i', { style: { border: 'solid #fff', borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
|
|
131
154
|
),
|
|
132
|
-
React__default.createElement(
|
|
155
|
+
showScroller && showScroller && React__default.createElement(
|
|
133
156
|
'div',
|
|
134
157
|
{ onClick: function onClick(e) {
|
|
135
158
|
return scrollSlider(e, 'next');
|
|
136
|
-
}, className: 'tile__slider-next', style: { color:
|
|
137
|
-
React__default.createElement('i', { style: { border: 'solid '
|
|
159
|
+
}, className: 'tile__slider-next', style: { color: '#fff', background: 'var(--primary)', paddingRight: '19px' } },
|
|
160
|
+
React__default.createElement('i', { style: { border: 'solid #fff', borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
|
|
138
161
|
),
|
|
139
162
|
React__default.createElement(
|
|
140
163
|
'div',
|
|
@@ -245,7 +268,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
245
268
|
React__default.createElement(
|
|
246
269
|
'style',
|
|
247
270
|
{ jsx: 'true' },
|
|
248
|
-
'\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: 805px;\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:
|
|
271
|
+
'\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: 805px;\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 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 55px -.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: -.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 '
|
|
249
272
|
)
|
|
250
273
|
);
|
|
251
274
|
};
|
package/dist/cjs/index.js
CHANGED
|
@@ -3220,16 +3220,41 @@ var ADSponsoredResources = function ADSponsoredResources(_ref) {
|
|
|
3220
3220
|
publication_url: targeting.publication_url
|
|
3221
3221
|
};
|
|
3222
3222
|
|
|
3223
|
+
var collapseAd = function collapseAd() {
|
|
3224
|
+
var parent = document.getElementById('sponsored-ad-wrapper');
|
|
3225
|
+
parent.style.height = '0%';
|
|
3226
|
+
parent.style.width = '0%';
|
|
3227
|
+
parent.style.display = 'none';
|
|
3228
|
+
};
|
|
3229
|
+
|
|
3230
|
+
var checkIsAdFound = function checkIsAdFound(isFound) {
|
|
3231
|
+
if (isFound) {
|
|
3232
|
+
var parent = document.getElementById('sponsored-ad-wrapper');
|
|
3233
|
+
parent.style.display = 'block';
|
|
3234
|
+
} else {
|
|
3235
|
+
collapseAd();
|
|
3236
|
+
}
|
|
3237
|
+
};
|
|
3238
|
+
|
|
3223
3239
|
return React__default.createElement(
|
|
3224
3240
|
React__default.Fragment,
|
|
3225
3241
|
null,
|
|
3226
3242
|
React__default.createElement(
|
|
3227
3243
|
'div',
|
|
3228
|
-
{ className: 'sponsored-ad-wrapper' },
|
|
3244
|
+
{ id: 'sponsored-ad-wrapper', className: 'sponsored-ad-wrapper' },
|
|
3229
3245
|
React__default.createElement(
|
|
3230
3246
|
'div',
|
|
3231
3247
|
{ className: 'sponsored-ad' },
|
|
3232
|
-
React__default.createElement(AdSlot.DFPAdSlot, {
|
|
3248
|
+
React__default.createElement(AdSlot.DFPAdSlot, {
|
|
3249
|
+
className: className,
|
|
3250
|
+
slotId: slotId,
|
|
3251
|
+
networkID: networkID,
|
|
3252
|
+
sizes: sizes,
|
|
3253
|
+
adUnit: adUnit,
|
|
3254
|
+
targeting: adTargeting,
|
|
3255
|
+
refreshFlag: false,
|
|
3256
|
+
checkIsAdFound: checkIsAdFound
|
|
3257
|
+
})
|
|
3233
3258
|
)
|
|
3234
3259
|
)
|
|
3235
3260
|
);
|
package/dist/esm/YoutubeGroup.js
CHANGED
|
@@ -26,6 +26,16 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
26
26
|
tileSize = _useState2[0],
|
|
27
27
|
setTileSize = _useState2[1];
|
|
28
28
|
|
|
29
|
+
var _useState3 = useState(false),
|
|
30
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
31
|
+
showScroller = _useState4[0],
|
|
32
|
+
setShowScroller = _useState4[1];
|
|
33
|
+
|
|
34
|
+
var _useState5 = useState(0),
|
|
35
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
36
|
+
scrollPosition = _useState6[0],
|
|
37
|
+
setScrollPosition = _useState6[1];
|
|
38
|
+
|
|
29
39
|
useEffect(function () {
|
|
30
40
|
//IE11 Polyfill
|
|
31
41
|
smoothscroll.polyfill();
|
|
@@ -40,17 +50,29 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
40
50
|
|
|
41
51
|
var setThumbSize = function setThumbSize() {
|
|
42
52
|
var thumbSize = void 0;
|
|
53
|
+
var scrollerVisible = false;
|
|
43
54
|
if (window.innerWidth > 1399) {
|
|
44
55
|
thumbSize = Math.floor(viewableWindow.current.clientWidth / 3 - 40);
|
|
56
|
+
if (props.dataset.length > 3) {
|
|
57
|
+
scrollerVisible = true;
|
|
58
|
+
}
|
|
45
59
|
}
|
|
46
60
|
if (window.innerWidth < 1399 && window.innerWidth > 592) {
|
|
47
61
|
thumbSize = Math.floor(viewableWindow.current.clientWidth / 2 - 48);
|
|
62
|
+
if (props.dataset.length > 2) {
|
|
63
|
+
scrollerVisible = true;
|
|
64
|
+
}
|
|
48
65
|
}
|
|
49
66
|
if (window.innerWidth < 592) {
|
|
50
67
|
thumbSize = Math.floor(viewableWindow.current.clientWidth / 1 - 64);
|
|
68
|
+
if (props.dataset.length > 1) {
|
|
69
|
+
scrollerVisible = true;
|
|
70
|
+
}
|
|
51
71
|
}
|
|
52
72
|
if (thumbSize !== tileSize) {
|
|
53
73
|
setTileSize(thumbSize);
|
|
74
|
+
setScrollPosition(0);
|
|
75
|
+
setShowScroller(scrollerVisible);
|
|
54
76
|
var videoRows = document.querySelectorAll('#vid-slider .row');
|
|
55
77
|
for (var i = 0; i < videoRows.length; i++) {
|
|
56
78
|
videoRows[i].scrollTo({
|
|
@@ -67,7 +89,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
67
89
|
|
|
68
90
|
function scrollSlider(e, direction) {
|
|
69
91
|
var slide = e.target.parentElement;
|
|
70
|
-
var scrollOffset =
|
|
92
|
+
var scrollOffset = scrollPosition;
|
|
71
93
|
var viewableWidth = slide.clientWidth;
|
|
72
94
|
|
|
73
95
|
//calculate viewable size / slide
|
|
@@ -101,6 +123,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
101
123
|
left: scrollDirection,
|
|
102
124
|
behavior: 'smooth'
|
|
103
125
|
});
|
|
126
|
+
setScrollPosition(scrollDirection);
|
|
104
127
|
}
|
|
105
128
|
|
|
106
129
|
function handleClick(url, vidIndex) {
|
|
@@ -117,19 +140,19 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
117
140
|
React__default.createElement(
|
|
118
141
|
'div',
|
|
119
142
|
{ className: 'row' },
|
|
120
|
-
React__default.createElement(
|
|
143
|
+
showScroller && showScroller && React__default.createElement(
|
|
121
144
|
'div',
|
|
122
145
|
{ onClick: function onClick(e) {
|
|
123
146
|
return scrollSlider(e, 'prev');
|
|
124
|
-
}, className: 'tile__slider-prev', style: { color:
|
|
125
|
-
React__default.createElement('i', { style: { border: 'solid '
|
|
147
|
+
}, className: 'tile__slider-prev', style: { color: '#fff', background: 'var(--primary)', paddingLeft: '19px' } },
|
|
148
|
+
React__default.createElement('i', { style: { border: 'solid #fff', borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
|
|
126
149
|
),
|
|
127
|
-
React__default.createElement(
|
|
150
|
+
showScroller && showScroller && React__default.createElement(
|
|
128
151
|
'div',
|
|
129
152
|
{ onClick: function onClick(e) {
|
|
130
153
|
return scrollSlider(e, 'next');
|
|
131
|
-
}, className: 'tile__slider-next', style: { color:
|
|
132
|
-
React__default.createElement('i', { style: { border: 'solid '
|
|
154
|
+
}, className: 'tile__slider-next', style: { color: '#fff', background: 'var(--primary)', paddingRight: '19px' } },
|
|
155
|
+
React__default.createElement('i', { style: { border: 'solid #fff', borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
|
|
133
156
|
),
|
|
134
157
|
React__default.createElement(
|
|
135
158
|
'div',
|
|
@@ -240,7 +263,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
240
263
|
React__default.createElement(
|
|
241
264
|
'style',
|
|
242
265
|
{ jsx: 'true' },
|
|
243
|
-
'\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: 805px;\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:
|
|
266
|
+
'\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: 805px;\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 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 55px -.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: -.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 '
|
|
244
267
|
)
|
|
245
268
|
);
|
|
246
269
|
};
|
package/dist/esm/index.js
CHANGED
|
@@ -3217,16 +3217,41 @@ var ADSponsoredResources = function ADSponsoredResources(_ref) {
|
|
|
3217
3217
|
publication_url: targeting.publication_url
|
|
3218
3218
|
};
|
|
3219
3219
|
|
|
3220
|
+
var collapseAd = function collapseAd() {
|
|
3221
|
+
var parent = document.getElementById('sponsored-ad-wrapper');
|
|
3222
|
+
parent.style.height = '0%';
|
|
3223
|
+
parent.style.width = '0%';
|
|
3224
|
+
parent.style.display = 'none';
|
|
3225
|
+
};
|
|
3226
|
+
|
|
3227
|
+
var checkIsAdFound = function checkIsAdFound(isFound) {
|
|
3228
|
+
if (isFound) {
|
|
3229
|
+
var parent = document.getElementById('sponsored-ad-wrapper');
|
|
3230
|
+
parent.style.display = 'block';
|
|
3231
|
+
} else {
|
|
3232
|
+
collapseAd();
|
|
3233
|
+
}
|
|
3234
|
+
};
|
|
3235
|
+
|
|
3220
3236
|
return React__default.createElement(
|
|
3221
3237
|
React__default.Fragment,
|
|
3222
3238
|
null,
|
|
3223
3239
|
React__default.createElement(
|
|
3224
3240
|
'div',
|
|
3225
|
-
{ className: 'sponsored-ad-wrapper' },
|
|
3241
|
+
{ id: 'sponsored-ad-wrapper', className: 'sponsored-ad-wrapper' },
|
|
3226
3242
|
React__default.createElement(
|
|
3227
3243
|
'div',
|
|
3228
3244
|
{ className: 'sponsored-ad' },
|
|
3229
|
-
React__default.createElement(DFPAdSlot, {
|
|
3245
|
+
React__default.createElement(DFPAdSlot, {
|
|
3246
|
+
className: className,
|
|
3247
|
+
slotId: slotId,
|
|
3248
|
+
networkID: networkID,
|
|
3249
|
+
sizes: sizes,
|
|
3250
|
+
adUnit: adUnit,
|
|
3251
|
+
targeting: adTargeting,
|
|
3252
|
+
refreshFlag: false,
|
|
3253
|
+
checkIsAdFound: checkIsAdFound
|
|
3254
|
+
})
|
|
3230
3255
|
)
|
|
3231
3256
|
)
|
|
3232
3257
|
);
|