Skip to content

Commit d7741f6

Browse files
mikejacobsonmikejacobson
committed
Fix scroll arrow styling when click target present
1 parent 3ae5268 commit d7741f6

9 files changed

+59
-28
lines changed

‎dist/jquery.scrolling-tabs.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,17 @@
4747
.scrtabs-tab-scroll-arrow:hover {
4848
background-color: #eeeeee; }
4949

50-
.scrtabs-tab-scroll-arrow.scrtabs-disable {
50+
.scrtabs-tab-scroll-arrow.scrtabs-with-click-target {
51+
cursor: default; }
52+
53+
.scrtabs-tab-scroll-arrow.scrtabs-disable,
54+
.scrtabs-tab-scroll-arrow.scrtabs-disable [scrtabs-click-target],
55+
.scrtabs-tab-scroll-arrow.scrtabs-disable [data-scrtabs-click-target] {
5156
color: #ddd;
5257
cursor: default; }
5358

59+
.scrtabs-tab-scroll-arrow.scrtabs-disable:hover {
60+
background-color: initial; }
61+
5462
.scrtabs-tabs-fixed-container ul.nav-tabs > li {
5563
white-space: nowrap; }

‎dist/jquery.scrolling-tabs.js‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -279,7 +279,8 @@
279279
CSS_CLASSES: {
280280
BOOTSTRAP4: 'scrtabs-bootstrap4',
281281
RTL: 'scrtabs-rtl',
282-
SCROLL_ARROW_DISABLE: 'scrtabs-disable'
282+
SCROLL_ARROW_DISABLE: 'scrtabs-disable',
283+
SCROLL_ARROW_WITH_CLICK_TARGET: 'scrtabs-with-click-target'
283284
},
284285

285286
SLIDE_DIRECTION: {
@@ -475,19 +476,23 @@
475476
$rightArrow = stc.$fixedContainer.next();
476477

477478
// if we have custom arrow content, we might have a click target defined
478-
$leftArrowClickTarget = settings.leftArrowContent ?
479-
$leftArrow.find('[scrtabs-click-target],[data-scrtabs-click-target]') :
480-
$leftArrow;
479+
if (settings.leftArrowContent) {
480+
$leftArrowClickTarget = $leftArrow.find('[scrtabs-click-target],[data-scrtabs-click-target]');
481+
}
481482

482-
$rightArrowClickTarget = settings.rightArrowContent ?
483-
$rightArrow.find('[scrtabs-click-target],[data-scrtabs-click-target]') :
484-
$rightArrow;
483+
if (settings.rightArrowContent) {
484+
$rightArrowClickTarget = $rightArrow.find('[scrtabs-click-target],[data-scrtabs-click-target]');
485+
}
485486

486-
if (!$leftArrowClickTarget.length) {
487+
if ($leftArrowClickTarget && $leftArrowClickTarget.length) {
488+
$leftArrow.addClass(CONSTANTS.CSS_CLASSES.SCROLL_ARROW_WITH_CLICK_TARGET);
489+
} else {
487490
$leftArrowClickTarget = $leftArrow;
488491
}
489492

490-
if (!$rightArrowClickTarget.length) {
493+
if ($rightArrowClickTarget && $rightArrowClickTarget.length) {
494+
$rightArrow.addClass(CONSTANTS.CSS_CLASSES.SCROLL_ARROW_WITH_CLICK_TARGET);
495+
} else {
491496
$rightArrowClickTarget = $rightArrow;
492497
}
493498

@@ -1158,7 +1163,7 @@
11581163
$movableContainer = $('<div class="scrtabs-tabs-movable-container"></div>');
11591164

11601165
if (settings.disableScrollArrowsOnFullyScrolled) {
1161-
$leftArrow.add($rightArrow).addClass('scrtabs-disable');
1166+
$leftArrow.add($rightArrow).addClass(CONSTANTS.CSS_CLASSES.SCROLL_ARROW_DISABLE);
11621167
}
11631168

11641169
return $tabsContainer

‎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: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎run/markup-only.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -106,8 +106,11 @@
106106
<script src="../dist/jquery.scrolling-tabs.js"></script>
107107

108108
<style>
109+
.scrtabs-tab-scroll-arrow {
110+
width: 60px;
111+
}
109112
.scrtabs-tab-scroll-arrow:hover {
110-
113+
background-color: #fff;
111114
}
112115
</style>
113116
<script>
@@ -131,13 +134,13 @@
131134
leftArrowContent: `
132135
<div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-left">
133136
<button data-scrtabs-click-target type="button">
134-
<i class="mdi mdi-chevron-left mdi-24px"></i>
137+
<i class="mdi mdi-chevron-left mdi-24px">LFT</i>
135138
</button>
136139
</div>`,
137140
rightArrowContent: `
138141
<div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-right">
139142
<button data-scrtabs-click-target type="button">
140-
<i class="mdi mdi-chevron-left mdi-24px"></i>
143+
<i class="mdi mdi-chevron-left mdi-24px">RGT</i>
141144
</button>
142145
</div>`
143146
})

‎src/js/buildTabs.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ var tabElements = (function () {
3434
$movableContainer = $('<div class="scrtabs-tabs-movable-container"></div>');
3535

3636
if (settings.disableScrollArrowsOnFullyScrolled) {
37-
$leftArrow.add($rightArrow).addClass('scrtabs-disable');
37+
$leftArrow.add($rightArrow).addClass(CONSTANTS.CSS_CLASSES.SCROLL_ARROW_DISABLE);
3838
}
3939

4040
return $tabsContainer

‎src/js/constants.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ var CONSTANTS = {
1212
CSS_CLASSES: {
1313
BOOTSTRAP4: 'scrtabs-bootstrap4',
1414
RTL: 'scrtabs-rtl',
15-
SCROLL_ARROW_DISABLE: 'scrtabs-disable'
15+
SCROLL_ARROW_DISABLE: 'scrtabs-disable',
16+
SCROLL_ARROW_WITH_CLICK_TARGET: 'scrtabs-with-click-target'
1617
},
1718

1819
SLIDE_DIRECTION: {

‎src/js/elementsHandler.js‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -141,19 +141,23 @@ function ElementsHandler(scrollingTabsControl) {
141141
$rightArrow = stc.$fixedContainer.next();
142142

143143
// if we have custom arrow content, we might have a click target defined
144-
$leftArrowClickTarget = settings.leftArrowContent ?
145-
$leftArrow.find('[scrtabs-click-target],[data-scrtabs-click-target]') :
146-
$leftArrow;
144+
if (settings.leftArrowContent) {
145+
$leftArrowClickTarget = $leftArrow.find('[scrtabs-click-target],[data-scrtabs-click-target]');
146+
}
147147

148-
$rightArrowClickTarget = settings.rightArrowContent ?
149-
$rightArrow.find('[scrtabs-click-target],[data-scrtabs-click-target]') :
150-
$rightArrow;
148+
if (settings.rightArrowContent) {
149+
$rightArrowClickTarget = $rightArrow.find('[scrtabs-click-target],[data-scrtabs-click-target]');
150+
}
151151

152-
if (!$leftArrowClickTarget.length) {
152+
if ($leftArrowClickTarget && $leftArrowClickTarget.length) {
153+
$leftArrow.addClass(CONSTANTS.CSS_CLASSES.SCROLL_ARROW_WITH_CLICK_TARGET);
154+
} else {
153155
$leftArrowClickTarget = $leftArrow;
154156
}
155157

156-
if (!$rightArrowClickTarget.length) {
158+
if ($rightArrowClickTarget && $rightArrowClickTarget.length) {
159+
$rightArrow.addClass(CONSTANTS.CSS_CLASSES.SCROLL_ARROW_WITH_CLICK_TARGET);
160+
} else {
157161
$rightArrowClickTarget = $rightArrow;
158162
}
159163

‎src/scss/jquery.scrolling-tabs.scss‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,19 @@ $scrtabs-background-color-hover: rgb(238, 238, 238) !default;
6565
}
6666
}
6767

68-
.scrtabs-tab-scroll-arrow.scrtabs-disable {
68+
.scrtabs-tab-scroll-arrow.scrtabs-with-click-target {
69+
cursor: default;
70+
}
71+
72+
.scrtabs-tab-scroll-arrow.scrtabs-disable,
73+
.scrtabs-tab-scroll-arrow.scrtabs-disable [scrtabs-click-target],
74+
.scrtabs-tab-scroll-arrow.scrtabs-disable [data-scrtabs-click-target] {
6975
color: #ddd;
70-
cursor: default
76+
cursor: default;
77+
}
78+
79+
.scrtabs-tab-scroll-arrow.scrtabs-disable:hover {
80+
background-color: initial;
7181
}
7282

7383
.scrtabs-tabs-fixed-container ul.nav-tabs > li {

0 commit comments

Comments
 (0)