@mjhls/mjh-framework 1.0.668 → 1.0.669
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 +2 -0
- package/dist/cjs/ArticleSeriesListing.js +4 -2
- package/dist/cjs/VideoSeriesListing.js +2 -0
- package/dist/cjs/YoutubeGroup.js +39 -9
- package/dist/esm/ArticleCarousel.js +2 -0
- package/dist/esm/ArticleSeriesListing.js +4 -2
- package/dist/esm/VideoSeriesListing.js +2 -0
- package/dist/esm/YoutubeGroup.js +39 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,6 +6,8 @@ require('./_commonjsHelpers-06173234.js');
|
|
|
6
6
|
require('./_to-object-329a650b.js');
|
|
7
7
|
require('./es6.string.iterator-cc0bbaa4.js');
|
|
8
8
|
require('./_library-dd23b178.js');
|
|
9
|
+
require('./_iter-detect-60b2f026.js');
|
|
10
|
+
require('./toConsumableArray-9a3476fe.js');
|
|
9
11
|
require('./core.get-iterator-method-f62321d4.js');
|
|
10
12
|
require('./_object-pie-68c5bcbc.js');
|
|
11
13
|
var _extends = require('./extends-60837c34.js');
|
|
@@ -6,6 +6,8 @@ require('./_commonjsHelpers-06173234.js');
|
|
|
6
6
|
require('./_to-object-329a650b.js');
|
|
7
7
|
require('./es6.string.iterator-cc0bbaa4.js');
|
|
8
8
|
require('./_library-dd23b178.js');
|
|
9
|
+
require('./_iter-detect-60b2f026.js');
|
|
10
|
+
require('./toConsumableArray-9a3476fe.js');
|
|
9
11
|
require('./core.get-iterator-method-f62321d4.js');
|
|
10
12
|
require('./_object-pie-68c5bcbc.js');
|
|
11
13
|
var _extends = require('./extends-60837c34.js');
|
|
@@ -50,14 +52,14 @@ var ArticleSeriesListing = function (_React$Component) {
|
|
|
50
52
|
args[_key] = arguments[_key];
|
|
51
53
|
}
|
|
52
54
|
|
|
53
|
-
return _ret = (_temp = (_this = inherits._possibleConstructorReturn(this, (_ref = ArticleSeriesListing.__proto__ || inherits._Object$getPrototypeOf(ArticleSeriesListing)).call.apply(_ref, [this].concat(args))), _this), _this.page = _this.props.page, _this.mapping = _this.props.mapping, _this.data = _this.props.dataRecord, _this.query = _this.props.query, _this.params = _this.props.params, _this.dataArr = [_this.data], _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.state = {
|
|
55
|
+
return _ret = (_temp = (_this = inherits._possibleConstructorReturn(this, (_ref = ArticleSeriesListing.__proto__ || inherits._Object$getPrototypeOf(ArticleSeriesListing)).call.apply(_ref, [this].concat(args))), _this), _this.page = _this.props.page, _this.mapping = _this.props.mapping, _this.data = _this.props.dataRecord, _this.query = _this.props.query, _this.params = _this.props.params, _this.autoScroll = _this.props.autoScroll ? _this.props.autoScroll : false, _this.dataArr = [_this.data], _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.state = {
|
|
54
56
|
data: _this.dataArr,
|
|
55
57
|
per: _this.params ? _this.params.to : 2,
|
|
56
58
|
page: _this.props.currentPage || 1,
|
|
57
59
|
from: _this.params ? _this.params.from : 0,
|
|
58
60
|
to: _this.params ? _this.params.to : 2,
|
|
59
61
|
total_pages: null,
|
|
60
|
-
scrolling:
|
|
62
|
+
scrolling: _this.autoScroll,
|
|
61
63
|
query: _this.query,
|
|
62
64
|
currentPage: _this.props.currentPage || 1
|
|
63
65
|
}, _this.loadMore = debounce.debounce_1(function () {
|
|
@@ -6,6 +6,8 @@ require('./_commonjsHelpers-06173234.js');
|
|
|
6
6
|
require('./_to-object-329a650b.js');
|
|
7
7
|
require('./es6.string.iterator-cc0bbaa4.js');
|
|
8
8
|
require('./_library-dd23b178.js');
|
|
9
|
+
require('./_iter-detect-60b2f026.js');
|
|
10
|
+
require('./toConsumableArray-9a3476fe.js');
|
|
9
11
|
require('./core.get-iterator-method-f62321d4.js');
|
|
10
12
|
require('./_object-pie-68c5bcbc.js');
|
|
11
13
|
var _extends = require('./extends-60837c34.js');
|
package/dist/cjs/YoutubeGroup.js
CHANGED
|
@@ -6,6 +6,8 @@ require('./_commonjsHelpers-06173234.js');
|
|
|
6
6
|
require('./_to-object-329a650b.js');
|
|
7
7
|
require('./es6.string.iterator-cc0bbaa4.js');
|
|
8
8
|
require('./_library-dd23b178.js');
|
|
9
|
+
require('./_iter-detect-60b2f026.js');
|
|
10
|
+
var toConsumableArray = require('./toConsumableArray-9a3476fe.js');
|
|
9
11
|
require('./core.get-iterator-method-f62321d4.js');
|
|
10
12
|
require('./_object-pie-68c5bcbc.js');
|
|
11
13
|
require('./web.dom.iterable-a0e279c1.js');
|
|
@@ -29,7 +31,7 @@ GROQ query -
|
|
|
29
31
|
var YoutubeGroup = function YoutubeGroup(props) {
|
|
30
32
|
// Props should be an array of objects containing Thumbnail, title, and URL
|
|
31
33
|
var innerSlider = React.useRef(null);
|
|
32
|
-
var
|
|
34
|
+
var tileArray = React.useRef([]);
|
|
33
35
|
var viewableWindow = React.useRef(null);
|
|
34
36
|
|
|
35
37
|
var _useState = React.useState(0),
|
|
@@ -47,6 +49,11 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
47
49
|
scrollPosition = _useState6[0],
|
|
48
50
|
setScrollPosition = _useState6[1];
|
|
49
51
|
|
|
52
|
+
var _useState7 = React.useState([]),
|
|
53
|
+
_useState8 = slicedToArray._slicedToArray(_useState7, 2),
|
|
54
|
+
tilesHeight = _useState8[0],
|
|
55
|
+
setTilesHeight = _useState8[1];
|
|
56
|
+
|
|
50
57
|
var urlFor = function urlFor(source, client) {
|
|
51
58
|
var builder = index$1.imageUrlBuilder(client);
|
|
52
59
|
return builder.image(source).auto('format');
|
|
@@ -59,11 +66,24 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
59
66
|
|
|
60
67
|
window.addEventListener('resize', setThumbSize);
|
|
61
68
|
|
|
69
|
+
setTilesHeight([].concat(toConsumableArray._toConsumableArray(document.querySelectorAll('.tile'))));
|
|
70
|
+
|
|
62
71
|
return function () {
|
|
63
72
|
return window.removeEventListener('resize', setThumbSize);
|
|
64
73
|
};
|
|
65
74
|
}, []);
|
|
66
75
|
|
|
76
|
+
//Set tile height to avoid titles being cut off
|
|
77
|
+
React.useEffect(function () {
|
|
78
|
+
var height = tilesHeight.map(function (tile) {
|
|
79
|
+
return tile.scrollHeight;
|
|
80
|
+
});
|
|
81
|
+
for (var ele in tileArray.current) {
|
|
82
|
+
var eleHeight = height[ele] < 150 ? 150 : height[ele];
|
|
83
|
+
tileArray.current[ele].style.height = eleHeight + 'px';
|
|
84
|
+
}
|
|
85
|
+
}, [tilesHeight]);
|
|
86
|
+
|
|
67
87
|
var setThumbSize = function setThumbSize() {
|
|
68
88
|
var thumbSize = void 0;
|
|
69
89
|
var scrollerVisible = false;
|
|
@@ -109,7 +129,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
109
129
|
var viewableWidth = slide.clientWidth;
|
|
110
130
|
|
|
111
131
|
//calculate viewable size / slide
|
|
112
|
-
var numberOfSlidesToScroll = Math.floor(
|
|
132
|
+
var numberOfSlidesToScroll = Math.floor(tileArray.current[0].clientWidth + 25); //width of the tile plus margin
|
|
113
133
|
|
|
114
134
|
var scrollDirection = void 0;
|
|
115
135
|
|
|
@@ -160,16 +180,22 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
160
180
|
{ className: 'row' },
|
|
161
181
|
showScroller && showScroller && React__default.createElement(
|
|
162
182
|
'div',
|
|
163
|
-
{
|
|
183
|
+
{
|
|
184
|
+
onClick: function onClick(e) {
|
|
164
185
|
return scrollSlider(e, 'prev');
|
|
165
|
-
},
|
|
186
|
+
},
|
|
187
|
+
className: 'tile__slider-prev',
|
|
188
|
+
style: { color: '#fff', background: 'var(--primary)', width: '35px', height: '35px', borderRadius: '50%', paddingLeft: '19px' } },
|
|
166
189
|
React__default.createElement('i', { style: { border: 'solid #fff', borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
|
|
167
190
|
),
|
|
168
191
|
showScroller && showScroller && React__default.createElement(
|
|
169
192
|
'div',
|
|
170
|
-
{
|
|
193
|
+
{
|
|
194
|
+
onClick: function onClick(e) {
|
|
171
195
|
return scrollSlider(e, 'next');
|
|
172
|
-
},
|
|
196
|
+
},
|
|
197
|
+
className: 'tile__slider-next',
|
|
198
|
+
style: { color: '#fff', background: 'var(--primary)', width: '35px', height: '35px', borderRadius: '50%', paddingRight: '19px' } },
|
|
173
199
|
React__default.createElement('i', { style: { border: 'solid #fff', borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
|
|
174
200
|
),
|
|
175
201
|
React__default.createElement(
|
|
@@ -190,7 +216,9 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
190
216
|
|
|
191
217
|
return React__default.createElement(
|
|
192
218
|
'div',
|
|
193
|
-
{ ref:
|
|
219
|
+
{ ref: function ref(ele) {
|
|
220
|
+
return tileArray.current[index] = ele;
|
|
221
|
+
}, key: index, className: 'tile', style: { width: tileSize + 'px' } },
|
|
194
222
|
current && current === url ? React__default.createElement(
|
|
195
223
|
'div',
|
|
196
224
|
{ className: 'now-playing' },
|
|
@@ -265,7 +293,9 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
265
293
|
}
|
|
266
294
|
return React__default.createElement(
|
|
267
295
|
'div',
|
|
268
|
-
{ ref:
|
|
296
|
+
{ ref: function ref(ele) {
|
|
297
|
+
return tileArray.current[index] = ele;
|
|
298
|
+
}, key: index, className: 'tile', style: { width: tileSize + 'px' } },
|
|
269
299
|
React__default.createElement(
|
|
270
300
|
'a',
|
|
271
301
|
{ href: _url },
|
|
@@ -329,7 +359,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
329
359
|
React__default.createElement(
|
|
330
360
|
'style',
|
|
331
361
|
{ jsx: 'true' },
|
|
332
|
-
'\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
|
|
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: 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 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 '
|
|
333
363
|
)
|
|
334
364
|
);
|
|
335
365
|
};
|
|
@@ -2,6 +2,8 @@ import './_commonjsHelpers-0c4b6f40.js';
|
|
|
2
2
|
import './_to-object-ded78eb9.js';
|
|
3
3
|
import './es6.string.iterator-9b2af4a5.js';
|
|
4
4
|
import './_library-528f1934.js';
|
|
5
|
+
import './_iter-detect-59409a32.js';
|
|
6
|
+
import './toConsumableArray-725434a0.js';
|
|
5
7
|
import './core.get-iterator-method-54d2e411.js';
|
|
6
8
|
import './_object-pie-71ac75a4.js';
|
|
7
9
|
import { _ as _extends } from './extends-cc5da797.js';
|
|
@@ -2,6 +2,8 @@ import './_commonjsHelpers-0c4b6f40.js';
|
|
|
2
2
|
import './_to-object-ded78eb9.js';
|
|
3
3
|
import './es6.string.iterator-9b2af4a5.js';
|
|
4
4
|
import './_library-528f1934.js';
|
|
5
|
+
import './_iter-detect-59409a32.js';
|
|
6
|
+
import './toConsumableArray-725434a0.js';
|
|
5
7
|
import './core.get-iterator-method-54d2e411.js';
|
|
6
8
|
import './_object-pie-71ac75a4.js';
|
|
7
9
|
import { _ as _extends } from './extends-cc5da797.js';
|
|
@@ -44,14 +46,14 @@ var ArticleSeriesListing = function (_React$Component) {
|
|
|
44
46
|
args[_key] = arguments[_key];
|
|
45
47
|
}
|
|
46
48
|
|
|
47
|
-
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ArticleSeriesListing.__proto__ || _Object$getPrototypeOf(ArticleSeriesListing)).call.apply(_ref, [this].concat(args))), _this), _this.page = _this.props.page, _this.mapping = _this.props.mapping, _this.data = _this.props.dataRecord, _this.query = _this.props.query, _this.params = _this.props.params, _this.dataArr = [_this.data], _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.state = {
|
|
49
|
+
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ArticleSeriesListing.__proto__ || _Object$getPrototypeOf(ArticleSeriesListing)).call.apply(_ref, [this].concat(args))), _this), _this.page = _this.props.page, _this.mapping = _this.props.mapping, _this.data = _this.props.dataRecord, _this.query = _this.props.query, _this.params = _this.props.params, _this.autoScroll = _this.props.autoScroll ? _this.props.autoScroll : false, _this.dataArr = [_this.data], _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.state = {
|
|
48
50
|
data: _this.dataArr,
|
|
49
51
|
per: _this.params ? _this.params.to : 2,
|
|
50
52
|
page: _this.props.currentPage || 1,
|
|
51
53
|
from: _this.params ? _this.params.from : 0,
|
|
52
54
|
to: _this.params ? _this.params.to : 2,
|
|
53
55
|
total_pages: null,
|
|
54
|
-
scrolling:
|
|
56
|
+
scrolling: _this.autoScroll,
|
|
55
57
|
query: _this.query,
|
|
56
58
|
currentPage: _this.props.currentPage || 1
|
|
57
59
|
}, _this.loadMore = debounce_1(function () {
|
|
@@ -2,6 +2,8 @@ import './_commonjsHelpers-0c4b6f40.js';
|
|
|
2
2
|
import './_to-object-ded78eb9.js';
|
|
3
3
|
import './es6.string.iterator-9b2af4a5.js';
|
|
4
4
|
import './_library-528f1934.js';
|
|
5
|
+
import './_iter-detect-59409a32.js';
|
|
6
|
+
import './toConsumableArray-725434a0.js';
|
|
5
7
|
import './core.get-iterator-method-54d2e411.js';
|
|
6
8
|
import './_object-pie-71ac75a4.js';
|
|
7
9
|
import { _ as _extends } from './extends-cc5da797.js';
|
package/dist/esm/YoutubeGroup.js
CHANGED
|
@@ -2,6 +2,8 @@ import './_commonjsHelpers-0c4b6f40.js';
|
|
|
2
2
|
import './_to-object-ded78eb9.js';
|
|
3
3
|
import './es6.string.iterator-9b2af4a5.js';
|
|
4
4
|
import './_library-528f1934.js';
|
|
5
|
+
import './_iter-detect-59409a32.js';
|
|
6
|
+
import { _ as _toConsumableArray } from './toConsumableArray-725434a0.js';
|
|
5
7
|
import './core.get-iterator-method-54d2e411.js';
|
|
6
8
|
import './_object-pie-71ac75a4.js';
|
|
7
9
|
import './web.dom.iterable-8956f9a5.js';
|
|
@@ -24,7 +26,7 @@ GROQ query -
|
|
|
24
26
|
var YoutubeGroup = function YoutubeGroup(props) {
|
|
25
27
|
// Props should be an array of objects containing Thumbnail, title, and URL
|
|
26
28
|
var innerSlider = useRef(null);
|
|
27
|
-
var
|
|
29
|
+
var tileArray = useRef([]);
|
|
28
30
|
var viewableWindow = useRef(null);
|
|
29
31
|
|
|
30
32
|
var _useState = useState(0),
|
|
@@ -42,6 +44,11 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
42
44
|
scrollPosition = _useState6[0],
|
|
43
45
|
setScrollPosition = _useState6[1];
|
|
44
46
|
|
|
47
|
+
var _useState7 = useState([]),
|
|
48
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
49
|
+
tilesHeight = _useState8[0],
|
|
50
|
+
setTilesHeight = _useState8[1];
|
|
51
|
+
|
|
45
52
|
var urlFor = function urlFor(source, client) {
|
|
46
53
|
var builder = imageUrlBuilder(client);
|
|
47
54
|
return builder.image(source).auto('format');
|
|
@@ -54,11 +61,24 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
54
61
|
|
|
55
62
|
window.addEventListener('resize', setThumbSize);
|
|
56
63
|
|
|
64
|
+
setTilesHeight([].concat(_toConsumableArray(document.querySelectorAll('.tile'))));
|
|
65
|
+
|
|
57
66
|
return function () {
|
|
58
67
|
return window.removeEventListener('resize', setThumbSize);
|
|
59
68
|
};
|
|
60
69
|
}, []);
|
|
61
70
|
|
|
71
|
+
//Set tile height to avoid titles being cut off
|
|
72
|
+
useEffect(function () {
|
|
73
|
+
var height = tilesHeight.map(function (tile) {
|
|
74
|
+
return tile.scrollHeight;
|
|
75
|
+
});
|
|
76
|
+
for (var ele in tileArray.current) {
|
|
77
|
+
var eleHeight = height[ele] < 150 ? 150 : height[ele];
|
|
78
|
+
tileArray.current[ele].style.height = eleHeight + 'px';
|
|
79
|
+
}
|
|
80
|
+
}, [tilesHeight]);
|
|
81
|
+
|
|
62
82
|
var setThumbSize = function setThumbSize() {
|
|
63
83
|
var thumbSize = void 0;
|
|
64
84
|
var scrollerVisible = false;
|
|
@@ -104,7 +124,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
104
124
|
var viewableWidth = slide.clientWidth;
|
|
105
125
|
|
|
106
126
|
//calculate viewable size / slide
|
|
107
|
-
var numberOfSlidesToScroll = Math.floor(
|
|
127
|
+
var numberOfSlidesToScroll = Math.floor(tileArray.current[0].clientWidth + 25); //width of the tile plus margin
|
|
108
128
|
|
|
109
129
|
var scrollDirection = void 0;
|
|
110
130
|
|
|
@@ -155,16 +175,22 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
155
175
|
{ className: 'row' },
|
|
156
176
|
showScroller && showScroller && React__default.createElement(
|
|
157
177
|
'div',
|
|
158
|
-
{
|
|
178
|
+
{
|
|
179
|
+
onClick: function onClick(e) {
|
|
159
180
|
return scrollSlider(e, 'prev');
|
|
160
|
-
},
|
|
181
|
+
},
|
|
182
|
+
className: 'tile__slider-prev',
|
|
183
|
+
style: { color: '#fff', background: 'var(--primary)', width: '35px', height: '35px', borderRadius: '50%', paddingLeft: '19px' } },
|
|
161
184
|
React__default.createElement('i', { style: { border: 'solid #fff', borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
|
|
162
185
|
),
|
|
163
186
|
showScroller && showScroller && React__default.createElement(
|
|
164
187
|
'div',
|
|
165
|
-
{
|
|
188
|
+
{
|
|
189
|
+
onClick: function onClick(e) {
|
|
166
190
|
return scrollSlider(e, 'next');
|
|
167
|
-
},
|
|
191
|
+
},
|
|
192
|
+
className: 'tile__slider-next',
|
|
193
|
+
style: { color: '#fff', background: 'var(--primary)', width: '35px', height: '35px', borderRadius: '50%', paddingRight: '19px' } },
|
|
168
194
|
React__default.createElement('i', { style: { border: 'solid #fff', borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
|
|
169
195
|
),
|
|
170
196
|
React__default.createElement(
|
|
@@ -185,7 +211,9 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
185
211
|
|
|
186
212
|
return React__default.createElement(
|
|
187
213
|
'div',
|
|
188
|
-
{ ref:
|
|
214
|
+
{ ref: function ref(ele) {
|
|
215
|
+
return tileArray.current[index] = ele;
|
|
216
|
+
}, key: index, className: 'tile', style: { width: tileSize + 'px' } },
|
|
189
217
|
current && current === url ? React__default.createElement(
|
|
190
218
|
'div',
|
|
191
219
|
{ className: 'now-playing' },
|
|
@@ -260,7 +288,9 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
260
288
|
}
|
|
261
289
|
return React__default.createElement(
|
|
262
290
|
'div',
|
|
263
|
-
{ ref:
|
|
291
|
+
{ ref: function ref(ele) {
|
|
292
|
+
return tileArray.current[index] = ele;
|
|
293
|
+
}, key: index, className: 'tile', style: { width: tileSize + 'px' } },
|
|
264
294
|
React__default.createElement(
|
|
265
295
|
'a',
|
|
266
296
|
{ href: _url },
|
|
@@ -324,7 +354,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
|
|
|
324
354
|
React__default.createElement(
|
|
325
355
|
'style',
|
|
326
356
|
{ jsx: 'true' },
|
|
327
|
-
'\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
|
|
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: 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 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 '
|
|
328
358
|
)
|
|
329
359
|
);
|
|
330
360
|
};
|