@mjhls/mjh-framework 1.0.721 → 1.0.722

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 (4) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/YoutubeGroup.js +10 -8
  3. package/dist/esm/YoutubeGroup.js +10 -8
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # mjh-framework v. 1.0.721
1
+ # mjh-framework v. 1.0.722
2
2
 
3
3
  [![NPM](https://img.shields.io/npm/v/mjh-framework.svg)](https://www.npmjs.com/package/mjh-framework) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
4
4
 
package/dist/cjs/YoutubeGroup.js CHANGED
@@ -34,6 +34,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
34
34
  var innerSlider = React.useRef(null);
35
35
  var tileArray = React.useRef([]);
36
36
  var viewableWindow = React.useRef(null);
37
+ var viewableArea = React.useRef(null);
37
38
 
38
39
  var _useState = React.useState(0),
39
40
  _useState2 = slicedToArray._slicedToArray(_useState, 2),
@@ -77,46 +78,47 @@ var YoutubeGroup = function YoutubeGroup(props) {
77
78
  var setThumbSize = function setThumbSize() {
78
79
  var thumbSize = void 0;
79
80
  var scrollerVisible = false;
81
+ var tileDividerWidth = parseInt(getComputedStyle(document.documentElement).fontSize) / 2 || 8;
80
82
 
81
83
  if (viewableWindow.current.offsetWidth > 1399) {
82
- thumbSize = Math.floor(viewableWindow.current.clientWidth / 6);
84
+ thumbSize = Math.floor((viewableArea.current.clientWidth - tileDividerWidth * 5) / 6);
83
85
  if (props.dataset.length > 5) {
84
86
  scrollerVisible = true;
85
87
  }
86
88
  }
87
89
  if (viewableWindow.current.offsetWidth < 1399 && viewableWindow.current.offsetWidth > 992) {
88
- thumbSize = Math.floor((viewableWindow.current.clientWidth + 50) / 6);
90
+ thumbSize = Math.floor((viewableArea.current.clientWidth - tileDividerWidth * 5) / 6);
89
91
  if (props.dataset.length > 5) {
90
92
  scrollerVisible = true;
91
93
  }
92
94
  }
93
95
  if (viewableWindow.current.offsetWidth < 992 && viewableWindow.current.offsetWidth > 768) {
94
- thumbSize = Math.floor((viewableWindow.current.clientWidth + 50) / 4);
96
+ thumbSize = Math.floor((viewableArea.current.clientWidth - tileDividerWidth * 3) / 4);
95
97
  if (props.dataset.length > 4) {
96
98
  scrollerVisible = true;
97
99
  }
98
100
  }
99
101
  if (viewableWindow.current.offsetWidth < 768 && viewableWindow.current.offsetWidth > 604) {
100
- thumbSize = Math.floor((viewableWindow.current.clientWidth + 50) / 3);
102
+ thumbSize = Math.floor((viewableArea.current.clientWidth - tileDividerWidth * 2) / 3);
101
103
  if (props.dataset.length > 3) {
102
104
  scrollerVisible = true;
103
105
  }
104
106
  }
105
107
  if (viewableWindow.current.offsetWidth < 604) {
106
- thumbSize = Math.floor(viewableWindow.current.clientWidth / 3);
108
+ thumbSize = Math.floor((viewableArea.current.clientWidth - tileDividerWidth * 2) / 3);
107
109
  if (props.dataset.length > 3) {
108
110
  scrollerVisible = true;
109
111
  }
110
112
  }
111
113
 
112
114
  if (main.main_40) {
113
- thumbSize = Math.floor(viewableWindow.current.clientWidth / 2);
115
+ thumbSize = Math.floor((viewableArea.current.clientWidth - tileDividerWidth) / 2);
114
116
  if (props.dataset.length > 2) {
115
117
  scrollerVisible = true;
116
118
  }
117
119
  }
118
120
  if (main.main_45) {
119
- thumbSize = Math.floor((viewableWindow.current.clientWidth + 50) / 3);
121
+ thumbSize = Math.floor((viewableArea.current.clientWidth - tileDividerWidth * 2) / 3);
120
122
  if (props.dataset.length > 3) {
121
123
  scrollerVisible = true;
122
124
  }
@@ -208,7 +210,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
208
210
  { ref: viewableWindow, id: 'vid-slider', style: { maxWidth: '100%' }, className: 'col' },
209
211
  React__default['default'].createElement(
210
212
  'div',
211
- { className: 'row', style: { display: 'flex', alignItems: 'center' } },
213
+ { ref: viewableArea, className: 'row', style: { display: 'flex', alignItems: 'center' } },
212
214
  showScroller && showScroller && React__default['default'].createElement(
213
215
  'div',
214
216
  {
package/dist/esm/YoutubeGroup.js CHANGED
@@ -28,6 +28,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
28
28
  var innerSlider = useRef(null);
29
29
  var tileArray = useRef([]);
30
30
  var viewableWindow = useRef(null);
31
+ var viewableArea = useRef(null);
31
32
 
32
33
  var _useState = useState(0),
33
34
  _useState2 = _slicedToArray(_useState, 2),
@@ -71,46 +72,47 @@ var YoutubeGroup = function YoutubeGroup(props) {
71
72
  var setThumbSize = function setThumbSize() {
72
73
  var thumbSize = void 0;
73
74
  var scrollerVisible = false;
75
+ var tileDividerWidth = parseInt(getComputedStyle(document.documentElement).fontSize) / 2 || 8;
74
76
 
75
77
  if (viewableWindow.current.offsetWidth > 1399) {
76
- thumbSize = Math.floor(viewableWindow.current.clientWidth / 6);
78
+ thumbSize = Math.floor((viewableArea.current.clientWidth - tileDividerWidth * 5) / 6);
77
79
  if (props.dataset.length > 5) {
78
80
  scrollerVisible = true;
79
81
  }
80
82
  }
81
83
  if (viewableWindow.current.offsetWidth < 1399 && viewableWindow.current.offsetWidth > 992) {
82
- thumbSize = Math.floor((viewableWindow.current.clientWidth + 50) / 6);
84
+ thumbSize = Math.floor((viewableArea.current.clientWidth - tileDividerWidth * 5) / 6);
83
85
  if (props.dataset.length > 5) {
84
86
  scrollerVisible = true;
85
87
  }
86
88
  }
87
89
  if (viewableWindow.current.offsetWidth < 992 && viewableWindow.current.offsetWidth > 768) {
88
- thumbSize = Math.floor((viewableWindow.current.clientWidth + 50) / 4);
90
+ thumbSize = Math.floor((viewableArea.current.clientWidth - tileDividerWidth * 3) / 4);
89
91
  if (props.dataset.length > 4) {
90
92
  scrollerVisible = true;
91
93
  }
92
94
  }
93
95
  if (viewableWindow.current.offsetWidth < 768 && viewableWindow.current.offsetWidth > 604) {
94
- thumbSize = Math.floor((viewableWindow.current.clientWidth + 50) / 3);
96
+ thumbSize = Math.floor((viewableArea.current.clientWidth - tileDividerWidth * 2) / 3);
95
97
  if (props.dataset.length > 3) {
96
98
  scrollerVisible = true;
97
99
  }
98
100
  }
99
101
  if (viewableWindow.current.offsetWidth < 604) {
100
- thumbSize = Math.floor(viewableWindow.current.clientWidth / 3);
102
+ thumbSize = Math.floor((viewableArea.current.clientWidth - tileDividerWidth * 2) / 3);
101
103
  if (props.dataset.length > 3) {
102
104
  scrollerVisible = true;
103
105
  }
104
106
  }
105
107
 
106
108
  if (main_40) {
107
- thumbSize = Math.floor(viewableWindow.current.clientWidth / 2);
109
+ thumbSize = Math.floor((viewableArea.current.clientWidth - tileDividerWidth) / 2);
108
110
  if (props.dataset.length > 2) {
109
111
  scrollerVisible = true;
110
112
  }
111
113
  }
112
114
  if (main_45) {
113
- thumbSize = Math.floor((viewableWindow.current.clientWidth + 50) / 3);
115
+ thumbSize = Math.floor((viewableArea.current.clientWidth - tileDividerWidth * 2) / 3);
114
116
  if (props.dataset.length > 3) {
115
117
  scrollerVisible = true;
116
118
  }
@@ -202,7 +204,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
202
204
  { ref: viewableWindow, id: 'vid-slider', style: { maxWidth: '100%' }, className: 'col' },
203
205
  React.createElement(
204
206
  'div',
205
- { className: 'row', style: { display: 'flex', alignItems: 'center' } },
207
+ { ref: viewableArea, className: 'row', style: { display: 'flex', alignItems: 'center' } },
206
208
  showScroller && showScroller && React.createElement(
207
209
  'div',
208
210
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mjhls/mjh-framework",
3
- "version": "1.0.721",
3
+ "version": "1.0.722",
4
4
  "description": "Foundation Framework",
5
5
  "author": "mjh-framework",
6
6
  "license": "MIT",