@mjhls/mjh-framework 1.0.668 → 1.0.670

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.
Files changed (6) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/ArticleSeriesListing.js +2 -2
  3. package/dist/cjs/YoutubeGroup.js +34 -9
  4. package/dist/esm/ArticleSeriesListing.js +2 -2
  5. package/dist/esm/YoutubeGroup.js +34 -9
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- # mjh-framework v. 1.0.668
2
+ # mjh-framework v. 1.0.670
3
3
 
4
4
  > Foundation Framework
5
5
 
package/dist/cjs/ArticleSeriesListing.js CHANGED
@@ -50,14 +50,14 @@ var ArticleSeriesListing = function (_React$Component) {
50
50
  args[_key] = arguments[_key];
51
51
  }
52
52
 
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 = {
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.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
54
  data: _this.dataArr,
55
55
  per: _this.params ? _this.params.to : 2,
56
56
  page: _this.props.currentPage || 1,
57
57
  from: _this.params ? _this.params.from : 0,
58
58
  to: _this.params ? _this.params.to : 2,
59
59
  total_pages: null,
60
- scrolling: true,
60
+ scrolling: _this.autoScroll,
61
61
  query: _this.query,
62
62
  currentPage: _this.props.currentPage || 1
63
63
  }, _this.loadMore = debounce.debounce_1(function () {
package/dist/cjs/YoutubeGroup.js CHANGED
@@ -29,7 +29,7 @@ GROQ query -
29
29
  var YoutubeGroup = function YoutubeGroup(props) {
30
30
  // Props should be an array of objects containing Thumbnail, title, and URL
31
31
  var innerSlider = React.useRef(null);
32
- var tile = React.useRef(null);
32
+ var tileArray = React.useRef([]);
33
33
  var viewableWindow = React.useRef(null);
34
34
 
35
35
  var _useState = React.useState(0),
@@ -59,11 +59,26 @@ var YoutubeGroup = function YoutubeGroup(props) {
59
59
 
60
60
  window.addEventListener('resize', setThumbSize);
61
61
 
62
+ setTimeout(function () {
63
+ adjustTileHeight();
64
+ }, 250);
65
+
62
66
  return function () {
63
67
  return window.removeEventListener('resize', setThumbSize);
64
68
  };
65
69
  }, []);
66
70
 
71
+ //Set tile height to avoid titles being cut off
72
+ var adjustTileHeight = function adjustTileHeight() {
73
+ var tileHeight = tileArray.current.map(function (tile) {
74
+ return tile.scrollHeight;
75
+ });
76
+ for (var ele in tileArray.current) {
77
+ var eleHeight = tileHeight[ele] < 150 ? 150 : tileHeight[ele];
78
+ tileArray.current[ele].style.height = eleHeight + 'px';
79
+ }
80
+ };
81
+
67
82
  var setThumbSize = function setThumbSize() {
68
83
  var thumbSize = void 0;
69
84
  var scrollerVisible = false;
@@ -109,7 +124,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
109
124
  var viewableWidth = slide.clientWidth;
110
125
 
111
126
  //calculate viewable size / slide
112
- var numberOfSlidesToScroll = Math.floor(tile.current.clientWidth + 25); //width of the tile plus margin
127
+ var numberOfSlidesToScroll = Math.floor(tileArray.current[0].clientWidth + 25); //width of the tile plus margin
113
128
 
114
129
  var scrollDirection = void 0;
115
130
 
@@ -160,16 +175,22 @@ var YoutubeGroup = function YoutubeGroup(props) {
160
175
  { className: 'row' },
161
176
  showScroller && showScroller && React__default.createElement(
162
177
  'div',
163
- { onClick: function onClick(e) {
178
+ {
179
+ onClick: function onClick(e) {
164
180
  return scrollSlider(e, 'prev');
165
- }, className: 'tile__slider-prev', style: { color: '#fff', background: 'var(--primary)', width: '35px', height: '35px', borderRadius: '50%', paddingLeft: '19px' } },
181
+ },
182
+ className: 'tile__slider-prev',
183
+ style: { color: '#fff', background: 'var(--primary)', width: '35px', height: '35px', borderRadius: '50%', paddingLeft: '19px' } },
166
184
  React__default.createElement('i', { style: { border: 'solid #fff', borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
167
185
  ),
168
186
  showScroller && showScroller && React__default.createElement(
169
187
  'div',
170
- { onClick: function onClick(e) {
188
+ {
189
+ onClick: function onClick(e) {
171
190
  return scrollSlider(e, 'next');
172
- }, className: 'tile__slider-next', style: { color: '#fff', background: 'var(--primary)', width: '35px', height: '35px', borderRadius: '50%', paddingRight: '19px' } },
191
+ },
192
+ className: 'tile__slider-next',
193
+ style: { color: '#fff', background: 'var(--primary)', width: '35px', height: '35px', borderRadius: '50%', paddingRight: '19px' } },
173
194
  React__default.createElement('i', { style: { border: 'solid #fff', borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
174
195
  ),
175
196
  React__default.createElement(
@@ -190,7 +211,9 @@ var YoutubeGroup = function YoutubeGroup(props) {
190
211
 
191
212
  return React__default.createElement(
192
213
  'div',
193
- { ref: tile, key: index, className: 'tile', style: { width: tileSize + 'px' } },
214
+ { ref: function ref(ele) {
215
+ return tileArray.current[index] = ele;
216
+ }, key: index, className: 'tile', style: { width: tileSize + 'px' } },
194
217
  current && current === url ? React__default.createElement(
195
218
  'div',
196
219
  { className: 'now-playing' },
@@ -265,7 +288,9 @@ var YoutubeGroup = function YoutubeGroup(props) {
265
288
  }
266
289
  return React__default.createElement(
267
290
  'div',
268
- { ref: tile, key: index, className: 'tile', style: { width: tileSize + 'px' } },
291
+ { ref: function ref(ele) {
292
+ return tileArray.current[index] = ele;
293
+ }, key: index, className: 'tile', style: { width: tileSize + 'px' } },
269
294
  React__default.createElement(
270
295
  'a',
271
296
  { href: _url },
@@ -329,7 +354,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
329
354
  React__default.createElement(
330
355
  'style',
331
356
  { 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 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 '
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 '
333
358
  )
334
359
  );
335
360
  };
package/dist/esm/ArticleSeriesListing.js CHANGED
@@ -44,14 +44,14 @@ var ArticleSeriesListing = function (_React$Component) {
44
44
  args[_key] = arguments[_key];
45
45
  }
46
46
 
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 = {
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.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
48
  data: _this.dataArr,
49
49
  per: _this.params ? _this.params.to : 2,
50
50
  page: _this.props.currentPage || 1,
51
51
  from: _this.params ? _this.params.from : 0,
52
52
  to: _this.params ? _this.params.to : 2,
53
53
  total_pages: null,
54
- scrolling: true,
54
+ scrolling: _this.autoScroll,
55
55
  query: _this.query,
56
56
  currentPage: _this.props.currentPage || 1
57
57
  }, _this.loadMore = debounce_1(function () {
package/dist/esm/YoutubeGroup.js CHANGED
@@ -24,7 +24,7 @@ GROQ query -
24
24
  var YoutubeGroup = function YoutubeGroup(props) {
25
25
  // Props should be an array of objects containing Thumbnail, title, and URL
26
26
  var innerSlider = useRef(null);
27
- var tile = useRef(null);
27
+ var tileArray = useRef([]);
28
28
  var viewableWindow = useRef(null);
29
29
 
30
30
  var _useState = useState(0),
@@ -54,11 +54,26 @@ var YoutubeGroup = function YoutubeGroup(props) {
54
54
 
55
55
  window.addEventListener('resize', setThumbSize);
56
56
 
57
+ setTimeout(function () {
58
+ adjustTileHeight();
59
+ }, 250);
60
+
57
61
  return function () {
58
62
  return window.removeEventListener('resize', setThumbSize);
59
63
  };
60
64
  }, []);
61
65
 
66
+ //Set tile height to avoid titles being cut off
67
+ var adjustTileHeight = function adjustTileHeight() {
68
+ var tileHeight = tileArray.current.map(function (tile) {
69
+ return tile.scrollHeight;
70
+ });
71
+ for (var ele in tileArray.current) {
72
+ var eleHeight = tileHeight[ele] < 150 ? 150 : tileHeight[ele];
73
+ tileArray.current[ele].style.height = eleHeight + 'px';
74
+ }
75
+ };
76
+
62
77
  var setThumbSize = function setThumbSize() {
63
78
  var thumbSize = void 0;
64
79
  var scrollerVisible = false;
@@ -104,7 +119,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
104
119
  var viewableWidth = slide.clientWidth;
105
120
 
106
121
  //calculate viewable size / slide
107
- var numberOfSlidesToScroll = Math.floor(tile.current.clientWidth + 25); //width of the tile plus margin
122
+ var numberOfSlidesToScroll = Math.floor(tileArray.current[0].clientWidth + 25); //width of the tile plus margin
108
123
 
109
124
  var scrollDirection = void 0;
110
125
 
@@ -155,16 +170,22 @@ var YoutubeGroup = function YoutubeGroup(props) {
155
170
  { className: 'row' },
156
171
  showScroller && showScroller && React__default.createElement(
157
172
  'div',
158
- { onClick: function onClick(e) {
173
+ {
174
+ onClick: function onClick(e) {
159
175
  return scrollSlider(e, 'prev');
160
- }, className: 'tile__slider-prev', style: { color: '#fff', background: 'var(--primary)', width: '35px', height: '35px', borderRadius: '50%', paddingLeft: '19px' } },
176
+ },
177
+ className: 'tile__slider-prev',
178
+ style: { color: '#fff', background: 'var(--primary)', width: '35px', height: '35px', borderRadius: '50%', paddingLeft: '19px' } },
161
179
  React__default.createElement('i', { style: { border: 'solid #fff', borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
162
180
  ),
163
181
  showScroller && showScroller && React__default.createElement(
164
182
  'div',
165
- { onClick: function onClick(e) {
183
+ {
184
+ onClick: function onClick(e) {
166
185
  return scrollSlider(e, 'next');
167
- }, className: 'tile__slider-next', style: { color: '#fff', background: 'var(--primary)', width: '35px', height: '35px', borderRadius: '50%', paddingRight: '19px' } },
186
+ },
187
+ className: 'tile__slider-next',
188
+ style: { color: '#fff', background: 'var(--primary)', width: '35px', height: '35px', borderRadius: '50%', paddingRight: '19px' } },
168
189
  React__default.createElement('i', { style: { border: 'solid #fff', borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
169
190
  ),
170
191
  React__default.createElement(
@@ -185,7 +206,9 @@ var YoutubeGroup = function YoutubeGroup(props) {
185
206
 
186
207
  return React__default.createElement(
187
208
  'div',
188
- { ref: tile, key: index, className: 'tile', style: { width: tileSize + 'px' } },
209
+ { ref: function ref(ele) {
210
+ return tileArray.current[index] = ele;
211
+ }, key: index, className: 'tile', style: { width: tileSize + 'px' } },
189
212
  current && current === url ? React__default.createElement(
190
213
  'div',
191
214
  { className: 'now-playing' },
@@ -260,7 +283,9 @@ var YoutubeGroup = function YoutubeGroup(props) {
260
283
  }
261
284
  return React__default.createElement(
262
285
  'div',
263
- { ref: tile, key: index, className: 'tile', style: { width: tileSize + 'px' } },
286
+ { ref: function ref(ele) {
287
+ return tileArray.current[index] = ele;
288
+ }, key: index, className: 'tile', style: { width: tileSize + 'px' } },
264
289
  React__default.createElement(
265
290
  'a',
266
291
  { href: _url },
@@ -324,7 +349,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
324
349
  React__default.createElement(
325
350
  'style',
326
351
  { 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 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 '
352
+ '\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
353
  )
329
354
  );
330
355
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mjhls/mjh-framework",
3
- "version": "1.0.668",
3
+ "version": "1.0.670",
4
4
  "description": "Foundation Framework",
5
5
  "author": "mjh-framework",
6
6
  "license": "MIT",