Skip to content

Commit 0d5b59a

Browse files
dev-javascriptdev-javascript
committed
consider tablist margin and padding via getSpacing method
1 parent 499d332 commit 0d5b59a

File tree

4 files changed

+74
-59
lines changed

4 files changed

+74
-59
lines changed

‎src/api.factory.js

Lines changed: 53 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const Api = function (options) {
1111
const arg = arguments;
1212
this._setOptions(arg[1]);
1313
this._tablistEl = null;
14-
const {getElManagementIns} = arg[0]();
14+
const { getElManagementIns } = arg[0]();
1515
this._getElManagementIns = getElManagementIns;
1616
this._tabs = null;
1717
this._tabsCount = null;
@@ -63,11 +63,11 @@ Api.prototype = {
6363
_hideTabs: function (firstHiddenTabIndex, selectedTabInfo, includeSelectedTab) {
6464
const hiddenTabs = [];
6565
this._options.containerElement.style.display = 'none';
66-
const {index: selectedTabIndex} = selectedTabInfo;
66+
const { index: selectedTabIndex } = selectedTabInfo;
6767
for (let i = firstHiddenTabIndex, tabsCount = this._tabsCount; i < tabsCount; i++) {
6868
if (includeSelectedTab || i !== selectedTabIndex) {
6969
this._tabs[i].style.display = 'none';
70-
hiddenTabs.push({el: this._tabs[i], index: i});
70+
hiddenTabs.push({ el: this._tabs[i], index: i });
7171
}
7272
}
7373
this._showBtn();
@@ -78,10 +78,13 @@ Api.prototype = {
7878
const index = selectedTabIndex;
7979
const el = index >= 0 ? tabs[index] : null;
8080
const overflow = el
81-
? this.els.getDistance(el).sub(this.els.getEl(this._options.buttonElement).getFullSize()).value <= 0
81+
? this.els
82+
.getDistance(el)
83+
.sub(this.els.getEl(this._options.tablistElement).getSpacing(this._btnPositionRelativeToTablist))
84+
.sub(this.els.getEl(this._options.buttonElement).getFullSize()).value <= 0
8285
: false;
8386
const overflowFullSize = overflow ? this.els.getEl(el).getFullSize() : 0;
84-
return {index, overflowFullSize};
87+
return { index, overflowFullSize };
8588
},
8689
_validateTabsCount: function () {
8790
this._tabs = this._tablistEl.children;
@@ -109,32 +112,34 @@ Api.prototype = {
109112
if (this._checkOverflow(_lastTab) === false) {
110113
return [];
111114
}
112-
const selectedTabInfo = this._getSelectedTabInfo(this._tabs, selectedTabIndex);
115+
const selectedTabInfo = this._setBtnPositionRelativeToTablist(isVertical, direction)._getSelectedTabInfo(this._tabs, selectedTabIndex);
113116
return this._validateSliderMinSize(selectedTabInfo)
114117
? this._hideTabs(
115-
this._findFirstHiddenTabIndexFactory(
116-
selectedTabInfo,
117-
this._getSearchBoundries(selectedTabInfo),
118-
this._getOrder(_lastTab),
119-
),
118+
this._findFirstHiddenTabIndexFactory(
120119
selectedTabInfo,
121-
)
120+
this._getSearchBoundries(selectedTabInfo),
121+
this._getOrder(this._tabs[0], _lastTab),
122+
),
123+
selectedTabInfo,
124+
)
122125
: this._hideTabs(0, selectedTabInfo, true);
123126
},
124127
_validateSliderMinSize: function (selectedTabInfo) {
125-
//available and visiable space in the tablist element should be greater than size of selected tab + more button
126-
return selectedTabInfo.overflowFullSize + this.els.getEl(this._options.buttonElement).getFullSize() >=
127-
this.els.getVisibleSize(this._options.tablistElement).value
128+
return this.els.getEl(this._options.tablistElement).getSpacing(this._btnReversePositionRelativeToTablist) +
129+
selectedTabInfo.overflowFullSize +
130+
this.els.getEl(this._options.tablistElement).getSpacing(this._btnPositionRelativeToTablist) +
131+
this.els.getEl(this._options.buttonElement).getFullSize() >=
132+
this.els.getEl(this._options.containerElement).getSize()
128133
? false
129134
: true;
130135
},
131-
_getOrder: function (lastTab) {
132-
return Math.abs(this.els.getDistance(lastTab).value) > this.els.getVisibleSize(this._options.tablistElement).value
136+
_getOrder: function (firstTab, lastTab) {
137+
return Math.abs(this.els.getDistance(lastTab).value) > Math.abs(this.els.getDistance(firstTab).value)
133138
? 'asc'
134139
: 'desc';
135140
},
136141
_getSearchBoundries: function (selectedTabInfo) {
137-
const {overflowFullSize, index: pivotIndex} = selectedTabInfo;
142+
const { overflowFullSize, index: pivotIndex } = selectedTabInfo;
138143
//if selected tab is not existed
139144
if (pivotIndex < 0) {
140145
return [0, this._tabsCount - 2];
@@ -146,6 +151,7 @@ Api.prototype = {
146151
return this.els
147152
.getDistance(el)
148153
.sub(selectedTabInfo.overflowFullSize)
154+
.sub(this.els.getEl(this._options.tablistElement).getSpacing(this._btnPositionRelativeToTablist))
149155
.sub(this.els.getEl(this._options.buttonElement).getFullSize());
150156
},
151157
_findFirstHiddenTabIndexDSCE: function (selectedTabInfo, start, stop) {
@@ -172,4 +178,33 @@ Api.prototype = {
172178
? this._findFirstHiddenTabIndexASC(selectedTabInfo, start, stop)
173179
: this._findFirstHiddenTabIndexDSCE(selectedTabInfo, start, stop);
174180
},
181+
/** set _btnPositionRelativeToTablist and _btnReversePositionRelativeToTablist */
182+
_setBtnPositionRelativeToTablist: function (isVertical, dir) {
183+
if (!this._btnPositionRelativeToTablist) {
184+
let pos = '', reversePos = '';
185+
if (isVertical == true) {
186+
pos = 'Bottom'; //the Button is rendered below the Tablist
187+
reversePos = 'Top';
188+
} else {
189+
if (dir === 'ltr') {
190+
pos = 'Right'; //the Button is rendered in left-side of the Tablist
191+
reversePos = 'Left';
192+
} else {
193+
pos = 'Left'; //the Button is rendered in right-side of the Tablist
194+
reversePos = 'Right';
195+
}
196+
}
197+
/**
198+
* specifics where Button is relative to Tablist
199+
* @type {"Right"|"Bottom"|"Left"}
200+
*/
201+
this._btnPositionRelativeToTablist = pos;
202+
/**
203+
* reverse Button position relative to Tablist
204+
* @type {"Right"|"Top"|"Left"}
205+
*/
206+
this._btnReversePositionRelativeToTablist = reversePos;
207+
}
208+
return this;
209+
},
175210
};

‎src/distanceFrom.js

Lines changed: 3 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
1-
export const constructor = function DistanceFrom(deps, {baseEl, isVertical, dir}) {
2-
deps.Base.call(this, {isVertical});
1+
export const constructor = function DistanceFrom(deps, { baseEl, isVertical, dir }) {
2+
deps.Base.call(this, { isVertical });
33
this.baseEl = baseEl;
4-
this._distanceFactory(isVertical, dir)._getVisibleSizeFactory(isVertical, dir);
4+
this._distanceFactory(isVertical, dir);
55
};
66
export const methods = {
7-
_getVisibleSizeFactory: function (isVertical, dir) {
8-
if (isVertical == true) this.getVisibleSize = this._getVisibleSizeInVerticalMode;
9-
else if (dir === 'ltr') this.getVisibleSize = this._getVisibleSizeInLtrMode;
10-
else this.getVisibleSize = this._getVisibleSizeInRtlMode;
11-
},
127
_distanceFactory: function (isVertical, dir) {
138
if (isVertical == true) this.getDistance = this._getVerticalDistance;
149
else if (dir === 'ltr') this.getDistance = this._getLtrDistance;
@@ -33,36 +28,6 @@ export const methods = {
3328
baseElIns.getPos().right - this.getEl(el).getPos().right - parseFloat(baseElIns.getStyle().paddingRight),
3429
);
3530
},
36-
_getVisibleSizeInLtrMode: function (el) {
37-
const baseElIns = this.getEl(this.baseEl);
38-
const elIns = this.getEl(el);
39-
return this._getResult(
40-
baseElIns.getPos().right -
41-
elIns.getPos().left -
42-
parseFloat(baseElIns.getStyle().paddingRight) -
43-
parseFloat(elIns.getStyle().paddingLeft),
44-
);
45-
},
46-
_getVisibleSizeInRtlMode: function (el) {
47-
const baseElIns = this.getEl(this.baseEl);
48-
const elIns = this.getEl(el);
49-
return this._getResult(
50-
elIns.getPos().right -
51-
baseElIns.getPos().left -
52-
parseFloat(elIns.getStyle().paddingRight) -
53-
parseFloat(baseElIns.getStyle().paddingLeft),
54-
);
55-
},
56-
_getVisibleSizeInVerticalMode: function (el) {
57-
const baseElIns = this.getEl(this.baseEl);
58-
const elIns = this.getEl(el);
59-
return this._getResult(
60-
baseElIns.getPos().bottom -
61-
elIns.getPos().top -
62-
parseFloat(baseElIns.getStyle().paddingBottom) -
63-
parseFloat(elIns.getStyle().paddingTop),
64-
);
65-
},
6631
_getResult: function (value) {
6732
const obj = Object.create({
6833
sub: function (value) {

‎src/el.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
export default function El({el, sizeDimension, sizeDirections}) {
1+
export default function El({ el, sizeDimension, sizeDirections }) {
22
this._el = el;
33
/**would be width|height */
44
this._sizeDimension = sizeDimension;
5-
/**would be "rtl"|"ltr" */
5+
/**would be "right"|"left"|"top"|"bottom" */
66
this._sizeDirections = sizeDirections;
77
}
88
El.prototype = {
@@ -12,6 +12,17 @@ El.prototype = {
1212
getPos: function () {
1313
return (this._pos = this._pos || this._el.getBoundingClientRect());
1414
},
15+
/**
16+
* including padding, border and margin
17+
* @param {"Right"|"Bottom"|"Left"|"Top"} dir
18+
* @returns {Number}
19+
*/
20+
getSpacing: function (dir) {
21+
const style = this.getStyle();
22+
return (
23+
parseFloat(style[`margin${dir}`]) + parseFloat(style[`padding${dir}`]) + parseFloat(style[`border${dir}Width`])
24+
);
25+
},
1526
/**not include padding and borders */
1627
getSize: function () {
1728
return (this.size =

‎src/els.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,11 @@ Els.prototype = {
1717
this.els.has(el) ||
1818
this.els.set(
1919
el,
20-
this._geElInstance({el, sizeDimension: this._sizeDimension, sizeDirections: this._sizeDirections}),
20+
this._geElInstance({
21+
el,
22+
sizeDimension: this._sizeDimension,
23+
sizeDirections: this._sizeDirections,
24+
}),
2125
);
2226
return this.els.get(el);
2327
},

0 commit comments

Comments
 (0)