Skip to content

Commit f722800

Browse files
mikejacobsonmikejacobson
authored
Merge pull request #40 from mikejacobson/rtl-scrollspy
Fix scrollToActiveTab for RTL mode
2 parents 131043b + 71b1ee8 commit f722800

11 files changed

+102
-32
lines changed

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jquery-bootstrap-scrolling-tabs",
3-
"version": "2.1.0",
3+
"version": "2.1.1",
44
"main": [
55
"./dist/jquery.scrolling-tabs.js",
66
"./dist/jquery.scrolling-tabs.css"

‎dist/jquery.scrolling-tabs.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* jquery-bootstrap-scrolling-tabs
3-
* @version v2.1.0
3+
* @version v2.1.1
44
* @link https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs
55
* @author Mike Jacobson <michaeljjacobson1@gmail.com>
66
* @license MIT License, http://www.opensource.org/licenses/MIT

‎dist/jquery.scrolling-tabs.js‎

Lines changed: 48 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* jquery-bootstrap-scrolling-tabs
3-
* @version v2.1.0
3+
* @version v2.1.1
44
* @link https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs
55
* @author Mike Jacobson <michaeljjacobson1@gmail.com>
66
* @license MIT License, http://www.opensource.org/licenses/MIT
@@ -152,6 +152,11 @@
152152
* right-to-left languages. If true, the plugin will
153153
* check the page's <html> tag for attribute dir="rtl"
154154
* and will adjust its behavior accordingly.
155+
* bootstrapVersion:
156+
* set to 4 if you're using Boostrap 4. Default is 3.
157+
* Bootstrap 4 handles some things differently than 3
158+
* (e.g., the 'active' class gets applied to the tab's
159+
* 'li > a' element rather than the 'li' itself).
155160
*
156161
*
157162
* On tabs data change:
@@ -842,6 +847,7 @@
842847
stc = smv.stc,
843848
RIGHT_OFFSET_BUFFER = 20,
844849
$activeTab,
850+
$activeTabAnchor,
845851
activeTabLeftPos,
846852
activeTabRightPos,
847853
rightArrowLeftPos,
@@ -852,9 +858,16 @@
852858
return;
853859
}
854860

855-
$activeTab = stc.$tabsUl.find('li.active');
861+
if (stc.usingBootstrap4) {
862+
$activeTabAnchor = stc.$tabsUl.find('li > .nav-link.active');
863+
if ($activeTabAnchor.length) {
864+
$activeTab = $activeTabAnchor.parent();
865+
}
866+
} else {
867+
$activeTab = stc.$tabsUl.find('li.active');
868+
}
856869

857-
if (!$activeTab.length) {
870+
if (!$activeTab || !$activeTab.length) {
858871
return;
859872
}
860873

@@ -867,17 +880,34 @@
867880

868881
rightArrowLeftPos = stc.fixedContainerWidth - RIGHT_OFFSET_BUFFER;
869882

870-
if (activeTabRightPos > rightArrowLeftPos) { // active tab off right side
871-
rightScrollArrowWidth = stc.$slideRightArrow.outerWidth();
872-
stc.movableContainerLeftPos -= (activeTabRightPos - rightArrowLeftPos + rightScrollArrowWidth);
873-
smv.slideMovableContainerToLeftPos();
874-
return true;
875-
} else {
883+
if (stc.rtl) {
876884
leftScrollArrowWidth = stc.$slideLeftArrow.outerWidth();
877-
if (activeTabLeftPos < leftScrollArrowWidth) { // active tab off left side
878-
stc.movableContainerLeftPos += leftScrollArrowWidth - activeTabLeftPos;
885+
886+
if (activeTabLeftPos < 0) { // active tab off left side
887+
stc.movableContainerLeftPos += activeTabLeftPos;
879888
smv.slideMovableContainerToLeftPos();
880889
return true;
890+
} else { // active tab off right side
891+
rightScrollArrowWidth = stc.$slideRightArrow.outerWidth();
892+
if (activeTabRightPos > rightArrowLeftPos) {
893+
stc.movableContainerLeftPos += (activeTabRightPos - rightArrowLeftPos) + rightScrollArrowWidth + RIGHT_OFFSET_BUFFER;
894+
smv.slideMovableContainerToLeftPos();
895+
return true;
896+
}
897+
}
898+
} else {
899+
if (activeTabRightPos > rightArrowLeftPos) { // active tab off right side
900+
rightScrollArrowWidth = stc.$slideRightArrow.outerWidth();
901+
stc.movableContainerLeftPos -= (activeTabRightPos - rightArrowLeftPos + rightScrollArrowWidth);
902+
smv.slideMovableContainerToLeftPos();
903+
return true;
904+
} else {
905+
leftScrollArrowWidth = stc.$slideLeftArrow.outerWidth();
906+
if (activeTabLeftPos < leftScrollArrowWidth) { // active tab off left side
907+
stc.movableContainerLeftPos += leftScrollArrowWidth - activeTabLeftPos;
908+
smv.slideMovableContainerToLeftPos();
909+
return true;
910+
}
881911
}
882912
}
883913

@@ -925,7 +955,7 @@
925955
smv.performingSlideAnim = true;
926956

927957
var targetPos = stc.rtl ? { right: leftOrRightVal } : { left: leftOrRightVal };
928-
958+
929959
stc.$movableContainer.stop().animate(targetPos, 'slow', function __slideAnimComplete() {
930960
var newMinPos = smv.getMinPos();
931961

@@ -1001,6 +1031,10 @@
10011031
}
10021032
}
10031033

1034+
if (options.bootstrapVersion.toString().charAt(0) === '4') {
1035+
stc.usingBootstrap4 = true;
1036+
}
1037+
10041038
setTimeout(initTabsAfterTimeout, 100);
10051039

10061040
function initTabsAfterTimeout() {
@@ -1810,7 +1844,8 @@
18101844
leftArrowContent: '',
18111845
rightArrowContent: '',
18121846
enableSwiping: false,
1813-
enableRtlSupport: false
1847+
enableRtlSupport: false,
1848+
bootstrapVersion: 3
18141849
};
18151850

18161851

‎dist/jquery.scrolling-tabs.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/jquery.scrolling-tabs.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jquery-bootstrap-scrolling-tabs",
3-
"version": "2.1.0",
3+
"version": "2.1.1",
44
"description": "jQuery plugin for scrollable Bootstrap Tabs",
55
"homepage": "https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs",
66
"bugs": "https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs/issues",

‎src/js/api.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,5 +153,6 @@ $.fn.scrollingTabs.defaults = {
153153
leftArrowContent: '',
154154
rightArrowContent: '',
155155
enableSwiping: false,
156-
enableRtlSupport: false
156+
enableRtlSupport: false,
157+
bootstrapVersion: 3
157158
};

‎src/js/header.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* jquery-bootstrap-scrolling-tabs
3-
* @version v2.1.0
3+
* @version v2.1.1
44
* @link https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs
55
* @author Mike Jacobson <michaeljjacobson1@gmail.com>
66
* @license MIT License, http://www.opensource.org/licenses/MIT

‎src/js/scrollMovement.js‎

Lines changed: 36 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@ function ScrollMovement(scrollingTabsControl) {
183183
stc = smv.stc,
184184
RIGHT_OFFSET_BUFFER = 20,
185185
$activeTab,
186+
$activeTabAnchor,
186187
activeTabLeftPos,
187188
activeTabRightPos,
188189
rightArrowLeftPos,
@@ -193,9 +194,16 @@ function ScrollMovement(scrollingTabsControl) {
193194
return;
194195
}
195196

196-
$activeTab = stc.$tabsUl.find('li.active');
197+
if (stc.usingBootstrap4) {
198+
$activeTabAnchor = stc.$tabsUl.find('li > .nav-link.active');
199+
if ($activeTabAnchor.length) {
200+
$activeTab = $activeTabAnchor.parent();
201+
}
202+
} else {
203+
$activeTab = stc.$tabsUl.find('li.active');
204+
}
197205

198-
if (!$activeTab.length) {
206+
if (!$activeTab || !$activeTab.length) {
199207
return;
200208
}
201209

@@ -208,17 +216,34 @@ function ScrollMovement(scrollingTabsControl) {
208216

209217
rightArrowLeftPos = stc.fixedContainerWidth - RIGHT_OFFSET_BUFFER;
210218

211-
if (activeTabRightPos > rightArrowLeftPos) { // active tab off right side
212-
rightScrollArrowWidth = stc.$slideRightArrow.outerWidth();
213-
stc.movableContainerLeftPos -= (activeTabRightPos - rightArrowLeftPos + rightScrollArrowWidth);
214-
smv.slideMovableContainerToLeftPos();
215-
return true;
216-
} else {
219+
if (stc.rtl) {
217220
leftScrollArrowWidth = stc.$slideLeftArrow.outerWidth();
218-
if (activeTabLeftPos < leftScrollArrowWidth) { // active tab off left side
219-
stc.movableContainerLeftPos += leftScrollArrowWidth - activeTabLeftPos;
221+
222+
if (activeTabLeftPos < 0) { // active tab off left side
223+
stc.movableContainerLeftPos += activeTabLeftPos;
220224
smv.slideMovableContainerToLeftPos();
221225
return true;
226+
} else { // active tab off right side
227+
rightScrollArrowWidth = stc.$slideRightArrow.outerWidth();
228+
if (activeTabRightPos > rightArrowLeftPos) {
229+
stc.movableContainerLeftPos += (activeTabRightPos - rightArrowLeftPos) + rightScrollArrowWidth + RIGHT_OFFSET_BUFFER;
230+
smv.slideMovableContainerToLeftPos();
231+
return true;
232+
}
233+
}
234+
} else {
235+
if (activeTabRightPos > rightArrowLeftPos) { // active tab off right side
236+
rightScrollArrowWidth = stc.$slideRightArrow.outerWidth();
237+
stc.movableContainerLeftPos -= (activeTabRightPos - rightArrowLeftPos + rightScrollArrowWidth);
238+
smv.slideMovableContainerToLeftPos();
239+
return true;
240+
} else {
241+
leftScrollArrowWidth = stc.$slideLeftArrow.outerWidth();
242+
if (activeTabLeftPos < leftScrollArrowWidth) { // active tab off left side
243+
stc.movableContainerLeftPos += leftScrollArrowWidth - activeTabLeftPos;
244+
smv.slideMovableContainerToLeftPos();
245+
return true;
246+
}
222247
}
223248
}
224249

@@ -266,7 +291,7 @@ function ScrollMovement(scrollingTabsControl) {
266291
smv.performingSlideAnim = true;
267292

268293
var targetPos = stc.rtl ? { right: leftOrRightVal } : { left: leftOrRightVal };
269-
294+
270295
stc.$movableContainer.stop().animate(targetPos, 'slow', function __slideAnimComplete() {
271296
var newMinPos = smv.getMinPos();
272297

‎src/js/scrollingTabsControl.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,10 @@ function ScrollingTabsControl($tabsContainer) {
5050
}
5151
}
5252

53+
if (options.bootstrapVersion.toString().charAt(0) === '4') {
54+
stc.usingBootstrap4 = true;
55+
}
56+
5357
setTimeout(initTabsAfterTimeout, 100);
5458

5559
function initTabsAfterTimeout() {

0 commit comments

Comments
 (0)