Skip to content

Commit 2f1e6f7

Browse files
mikejacobsonmikejacobson
authored
Merge pull request #54 from mikejacobson/issue52-arrow-offset-click-target
Fix Issue #52: add scroll arrow click target feature
2 parents 761cfc3 + 0189b28 commit 2f1e6f7

17 files changed

+357
-60
lines changed

‎README.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -445,6 +445,28 @@ $('#tabs-inside-here').scrollingTabs({
445445
You would then need to add some CSS to make them work correctly if you don't give them the default `scrtabs-tab-scroll-arrow` classes. This plunk shows it working with svg icons:
446446
http://plnkr.co/edit/2MdZCAnLyeU40shxaol3?p=preview
447447

448+
When using this option, you can also mark a child element within the arrow content as the click target if you don't want the entire content to be clickable. You do that my adding the CSS class `scrtabs-click-target` to the element that should be clickable, like so:
449+
450+
```javascript
451+
$('#tabs-inside-here').scrollingTabs({
452+
tabs: myTabs,
453+
leftArrowContent: [
454+
'<div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-left">',
455+
' <button class="scrtabs-click-target" type="button">',
456+
' <i class="custom-chevron-left"></i>',
457+
' </button>',
458+
'</div>'
459+
].join(''),
460+
rightArrowContent: [
461+
'<div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-right">',
462+
' <button class="scrtabs-click-target" type="button">',
463+
' <i class="custom-chevron-right"></i>',
464+
' </button>',
465+
'</div>'
466+
].join('')
467+
});
468+
```
469+
448470

449471
#### <a id="customTabLiContent"></a>Custom Tab LI content
450472

‎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.3.1",
3+
"version": "2.4.0",
44
"main": [
55
"./dist/jquery.scrolling-tabs.js",
66
"./dist/jquery.scrolling-tabs.css"

‎dist/jquery.scrolling-tabs.css‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* jquery-bootstrap-scrolling-tabs
3-
* @version v2.3.1
3+
* @version v2.4.0
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
@@ -35,7 +35,6 @@
3535
border: 1px solid #dddddd;
3636
border-top: none;
3737
color: #428bca;
38-
cursor: pointer;
3938
display: none;
4039
float: left;
4140
font-size: 12px;
@@ -47,9 +46,20 @@
4746
.scrtabs-tab-scroll-arrow:hover {
4847
background-color: #eeeeee; }
4948

50-
.scrtabs-tab-scroll-arrow.scrtabs-disable {
49+
.scrtabs-tab-scroll-arrow,
50+
.scrtabs-tab-scroll-arrow .scrtabs-click-target {
51+
cursor: pointer; }
52+
53+
.scrtabs-tab-scroll-arrow.scrtabs-with-click-target {
54+
cursor: default; }
55+
56+
.scrtabs-tab-scroll-arrow.scrtabs-disable,
57+
.scrtabs-tab-scroll-arrow.scrtabs-disable .scrtabs-click-target {
5158
color: #ddd;
5259
cursor: default; }
5360

61+
.scrtabs-tab-scroll-arrow.scrtabs-disable:hover {
62+
background-color: initial; }
63+
5464
.scrtabs-tabs-fixed-container ul.nav-tabs > li {
5565
white-space: nowrap; }

‎dist/jquery.scrolling-tabs.js‎

Lines changed: 68 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* jquery-bootstrap-scrolling-tabs
3-
* @version v2.3.1
3+
* @version v2.4.0
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
@@ -176,6 +176,29 @@
176176
* default scrtabs-tab-scroll-arrow classes.
177177
* This plunk shows it working with svg icons:
178178
* http://plnkr.co/edit/2MdZCAnLyeU40shxaol3?p=preview
179+
*
180+
* When using this option, you can also mark a child
181+
* element within the arrow content as the click target
182+
* if you don't want the entire content to be
183+
* clickable. You do that my adding the CSS class
184+
* 'scrtabs-click-target' to the element that should
185+
* be clickable, like so:
186+
*
187+
* leftArrowContent: [
188+
* '<div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-left">',
189+
* ' <button class="scrtabs-click-target" type="button">',
190+
* ' <i class="custom-chevron-left"></i>',
191+
* ' </button>',
192+
* '</div>'
193+
* ].join(''),
194+
* rightArrowContent: [
195+
* '<div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-right">',
196+
* ' <button class="scrtabs-click-target" type="button">',
197+
* ' <i class="custom-chevron-right"></i>',
198+
* ' </button>',
199+
* '</div>'
200+
* ].join('')
201+
*
179202
* enableRtlSupport:
180203
* set to true if you want your site to support
181204
* right-to-left languages. If true, the plugin will
@@ -279,7 +302,9 @@
279302
CSS_CLASSES: {
280303
BOOTSTRAP4: 'scrtabs-bootstrap4',
281304
RTL: 'scrtabs-rtl',
282-
SCROLL_ARROW_DISABLE: 'scrtabs-disable'
305+
SCROLL_ARROW_CLICK_TARGET: 'scrtabs-click-target',
306+
SCROLL_ARROW_DISABLE: 'scrtabs-disable',
307+
SCROLL_ARROW_WITH_CLICK_TARGET: 'scrtabs-with-click-target'
283308
},
284309

285310
SLIDE_DIRECTION: {
@@ -346,7 +371,7 @@
346371
p.initElements = function (options) {
347372
var ehd = this;
348373

349-
ehd.setElementReferences();
374+
ehd.setElementReferences(options);
350375
ehd.setEventListeners(options);
351376
};
352377

@@ -451,12 +476,14 @@
451476
return actionsTaken;
452477
};
453478

454-
p.setElementReferences = function () {
479+
p.setElementReferences = function (settings) {
455480
var ehd = this,
456481
stc = ehd.stc,
457482
$tabsContainer = stc.$tabsContainer,
458483
$leftArrow,
459-
$rightArrow;
484+
$rightArrow,
485+
$leftArrowClickTarget,
486+
$rightArrowClickTarget;
460487

461488
stc.isNavPills = false;
462489

@@ -472,6 +499,27 @@
472499
$leftArrow = stc.$fixedContainer.prev();
473500
$rightArrow = stc.$fixedContainer.next();
474501

502+
// if we have custom arrow content, we might have a click target defined
503+
if (settings.leftArrowContent) {
504+
$leftArrowClickTarget = $leftArrow.find('.' + CONSTANTS.CSS_CLASSES.SCROLL_ARROW_CLICK_TARGET);
505+
}
506+
507+
if (settings.rightArrowContent) {
508+
$rightArrowClickTarget = $rightArrow.find('.' + CONSTANTS.CSS_CLASSES.SCROLL_ARROW_CLICK_TARGET);
509+
}
510+
511+
if ($leftArrowClickTarget && $leftArrowClickTarget.length) {
512+
$leftArrow.addClass(CONSTANTS.CSS_CLASSES.SCROLL_ARROW_WITH_CLICK_TARGET);
513+
} else {
514+
$leftArrowClickTarget = $leftArrow;
515+
}
516+
517+
if ($rightArrowClickTarget && $rightArrowClickTarget.length) {
518+
$rightArrow.addClass(CONSTANTS.CSS_CLASSES.SCROLL_ARROW_WITH_CLICK_TARGET);
519+
} else {
520+
$rightArrowClickTarget = $rightArrow;
521+
}
522+
475523
stc.$movableContainer = $tabsContainer.find('.scrtabs-tabs-movable-container');
476524
stc.$tabsUl = $tabsContainer.find('.nav-tabs');
477525

@@ -487,7 +535,9 @@
487535
stc.$tabsLiCollection = stc.$tabsUl.find('> li');
488536

489537
stc.$slideLeftArrow = stc.reverseScroll ? $leftArrow : $rightArrow;
538+
stc.$slideLeftArrowClickTarget = stc.reverseScroll ? $leftArrowClickTarget : $rightArrowClickTarget;
490539
stc.$slideRightArrow = stc.reverseScroll ? $rightArrow : $leftArrow;
540+
stc.$slideRightArrowClickTarget = stc.reverseScroll ? $rightArrowClickTarget : $leftArrowClickTarget;
491541
stc.$scrollArrows = stc.$slideLeftArrow.add(stc.$slideRightArrow);
492542

493543
stc.$win = $(window);
@@ -515,13 +565,13 @@
515565
ehd.listenForTouchEvents();
516566
}
517567

518-
stc.$slideLeftArrow
568+
stc.$slideLeftArrowClickTarget
519569
.off('.scrtabs')
520570
.on(ev.MOUSEDOWN, function (e) { evh.handleMousedownOnSlideMovContainerLeftArrow.call(evh, e); })
521571
.on(ev.MOUSEUP, function (e) { evh.handleMouseupOnSlideMovContainerLeftArrow.call(evh, e); })
522572
.on(ev.CLICK, function (e) { evh.handleClickOnSlideMovContainerLeftArrow.call(evh, e); });
523573

524-
stc.$slideRightArrow
574+
stc.$slideRightArrowClickTarget
525575
.off('.scrtabs')
526576
.on(ev.MOUSEDOWN, function (e) { evh.handleMousedownOnSlideMovContainerRightArrow.call(evh, e); })
527577
.on(ev.MOUSEUP, function (e) { evh.handleMouseupOnSlideMovContainerRightArrow.call(evh, e); })
@@ -655,30 +705,30 @@
655705
var evh = this,
656706
stc = evh.stc;
657707

658-
stc.$slideLeftArrow.data(CONSTANTS.DATA_KEY_IS_MOUSEDOWN, true);
708+
stc.$slideLeftArrowClickTarget.data(CONSTANTS.DATA_KEY_IS_MOUSEDOWN, true);
659709
stc.scrollMovement.continueSlideMovableContainerLeft();
660710
};
661711

662712
p.handleMousedownOnSlideMovContainerRightArrow = function () {
663713
var evh = this,
664714
stc = evh.stc;
665715

666-
stc.$slideRightArrow.data(CONSTANTS.DATA_KEY_IS_MOUSEDOWN, true);
716+
stc.$slideRightArrowClickTarget.data(CONSTANTS.DATA_KEY_IS_MOUSEDOWN, true);
667717
stc.scrollMovement.continueSlideMovableContainerRight();
668718
};
669719

670720
p.handleMouseupOnSlideMovContainerLeftArrow = function () {
671721
var evh = this,
672722
stc = evh.stc;
673723

674-
stc.$slideLeftArrow.data(CONSTANTS.DATA_KEY_IS_MOUSEDOWN, false);
724+
stc.$slideLeftArrowClickTarget.data(CONSTANTS.DATA_KEY_IS_MOUSEDOWN, false);
675725
};
676726

677727
p.handleMouseupOnSlideMovContainerRightArrow = function () {
678728
var evh = this,
679729
stc = evh.stc;
680730

681-
stc.$slideRightArrow.data(CONSTANTS.DATA_KEY_IS_MOUSEDOWN, false);
731+
stc.$slideRightArrowClickTarget.data(CONSTANTS.DATA_KEY_IS_MOUSEDOWN, false);
682732
};
683733

684734
p.handleWindowResize = function () {
@@ -714,7 +764,7 @@
714764

715765
setTimeout(function() {
716766
if (stc.movableContainerLeftPos <= smv.getMinPos() ||
717-
!stc.$slideLeftArrow.data(CONSTANTS.DATA_KEY_IS_MOUSEDOWN)) {
767+
!stc.$slideLeftArrowClickTarget.data(CONSTANTS.DATA_KEY_IS_MOUSEDOWN)) {
718768
return;
719769
}
720770

@@ -730,7 +780,7 @@
730780

731781
setTimeout(function() {
732782
if (stc.movableContainerLeftPos >= 0 ||
733-
!stc.$slideRightArrow.data(CONSTANTS.DATA_KEY_IS_MOUSEDOWN)) {
783+
!stc.$slideRightArrowClickTarget.data(CONSTANTS.DATA_KEY_IS_MOUSEDOWN)) {
734784
return;
735785
}
736786

@@ -879,7 +929,6 @@
879929
p.scrollToActiveTab = function () {
880930
var smv = this,
881931
stc = smv.stc,
882-
RIGHT_OFFSET_BUFFER = 20,
883932
$activeTab,
884933
$activeTabAnchor,
885934
activeTabLeftPos,
@@ -905,14 +954,16 @@
905954
return;
906955
}
907956

957+
rightScrollArrowWidth = stc.$slideRightArrow.outerWidth();
958+
908959
/**
909960
* @author poletaew
910961
* We need relative offset (depends on $fixedContainer), don't absolute
911962
*/
912963
activeTabLeftPos = $activeTab.offset().left - stc.$fixedContainer.offset().left;
913964
activeTabRightPos = activeTabLeftPos + $activeTab.outerWidth();
914965

915-
rightArrowLeftPos = stc.fixedContainerWidth - RIGHT_OFFSET_BUFFER;
966+
rightArrowLeftPos = stc.fixedContainerWidth - rightScrollArrowWidth;
916967

917968
if (stc.rtl) {
918969
leftScrollArrowWidth = stc.$slideLeftArrow.outerWidth();
@@ -922,16 +973,14 @@
922973
smv.slideMovableContainerToLeftPos();
923974
return true;
924975
} else { // active tab off right side
925-
rightScrollArrowWidth = stc.$slideRightArrow.outerWidth();
926976
if (activeTabRightPos > rightArrowLeftPos) {
927-
stc.movableContainerLeftPos += (activeTabRightPos - rightArrowLeftPos) + rightScrollArrowWidth + RIGHT_OFFSET_BUFFER;
977+
stc.movableContainerLeftPos += (activeTabRightPos - rightArrowLeftPos) + (2 * rightScrollArrowWidth);
928978
smv.slideMovableContainerToLeftPos();
929979
return true;
930980
}
931981
}
932982
} else {
933983
if (activeTabRightPos > rightArrowLeftPos) { // active tab off right side
934-
rightScrollArrowWidth = stc.$slideRightArrow.outerWidth();
935984
stc.movableContainerLeftPos -= (activeTabRightPos - rightArrowLeftPos + rightScrollArrowWidth);
936985
smv.slideMovableContainerToLeftPos();
937986
return true;
@@ -1138,7 +1187,7 @@
11381187
$movableContainer = $('<div class="scrtabs-tabs-movable-container"></div>');
11391188

11401189
if (settings.disableScrollArrowsOnFullyScrolled) {
1141-
$leftArrow.add($rightArrow).addClass('scrtabs-disable');
1190+
$leftArrow.add($rightArrow).addClass(CONSTANTS.CSS_CLASSES.SCROLL_ARROW_DISABLE);
11421191
}
11431192

11441193
return $tabsContainer

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

Lines changed: 2 additions & 2 deletions
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.3.1",
3+
"version": "2.4.0",
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",

0 commit comments

Comments
 (0)