Skip to content

Commit 6909317

Browse files
mikejacobsonmikejacobson
authored
Merge pull request #36 from mikejacobson/rtl
Rtl
2 parents 4e055e1 + ca3a1f6 commit 6909317

17 files changed

+444
-27
lines changed

‎README.md‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ There are also optional features available:
3030
* [Tab Click Handler](#tabClickHandler)
3131
* [Custom Scroll Arrow classes](#cssClassArrows)
3232
* [Custom Scroll Arrow content](#customArrowsContent)
33-
* [Enable Horizontal Swiping for Touch Screens](#allowScrollbar)
33+
* [Enable Horizontal Swiping for Touch Screens](#enableSwiping)
34+
* [Enable Right-to-Left Language Support](#enableRtlSupport)
3435

3536

3637
Usage
@@ -435,7 +436,7 @@ http://plnkr.co/edit/2MdZCAnLyeU40shxaol3?p=preview
435436

436437

437438

438-
#### <a id="allowScrollbar"></a>Enable Horizontal Swiping for Touch Screens
439+
#### <a id="enableSwiping"></a>Enable Horizontal Swiping for Touch Screens
439440

440441
To enable horizontal swiping for touch screens, pass in option `enableSwiping: true` when initializing the plugin:
441442
```javascript
@@ -445,6 +446,18 @@ $('.nav-tabs').scrollingTabs({
445446
```
446447
This will enable swiping for any browser that supports [touch events](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events).
447448

449+
#### <a id="enableRtlSupport"></a>Enable Right-to-Left Language Support
450+
451+
To enable support for right-to-left languages, pass in option `enableRtlSupport: true` when initializing the plugin:
452+
```javascript
453+
$('.nav-tabs').scrollingTabs({
454+
enableRtlSupport: true
455+
});
456+
```
457+
458+
With this option enabled, the plugin will check the page's `<html>` tag for attribute `dir="rtl"` and will adjust its behavior accordingly.
459+
460+
448461

449462
#### Setting Defaults
450463
Any options that can be passed into the plugin can also be set on the plugin's `defaults` object:
@@ -456,8 +469,11 @@ $.fn.scrollingTabs.defaults.disableScrollArrowsOnFullyScrolled = true;
456469
$.fn.scrollingTabs.defaults.reverseScroll = true;
457470
$.fn.scrollingTabs.defaults.widthMultiplier = 0.5;
458471
$.fn.scrollingTabs.defaults.enableSwiping = true;
472+
$.fn.scrollingTabs.defaults.enableRtlSupport = true;
459473
```
460474

475+
476+
461477
#### <a id="events"></a>Events
462478
The plugin triggers event `ready.scrtabs` when the tabs have been wrapped in
463479
the scroller and are ready for viewing:

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

‎dist/jquery.scrolling-tabs.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* jquery-bootstrap-scrolling-tabs
3-
* @version v2.0.1
3+
* @version v2.1.0
44
* @link https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs
55
* @author Mike Jacobson <[email protected]>
66
* @license MIT License, http://www.opensource.org/licenses/MIT
@@ -24,6 +24,9 @@
2424
.scrtabs-tabs-movable-container .tab-content {
2525
display: none; }
2626

27+
.scrtabs-tab-container.scrtabs-rtl .scrtabs-tabs-movable-container > ul.nav-tabs {
28+
padding-right: 0; }
29+
2730
.scrtabs-tab-scroll-arrow {
2831
border: 1px solid #dddddd;
2932
border-top: none;

‎dist/jquery.scrolling-tabs.js‎

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* jquery-bootstrap-scrolling-tabs
3-
* @version v2.0.1
3+
* @version v2.1.0
44
* @link https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs
55
* @author Mike Jacobson <[email protected]>
66
* @license MIT License, http://www.opensource.org/licenses/MIT
@@ -147,6 +147,11 @@
147147
* default scrtabs-tab-scroll-arrow classes.
148148
* This plunk shows it working with svg icons:
149149
* http://plnkr.co/edit/2MdZCAnLyeU40shxaol3?p=preview
150+
* enableRtlSupport:
151+
* set to true if you want your site to support
152+
* right-to-left languages. If true, the plugin will
153+
* check the page's <html> tag for attribute dir="rtl"
154+
* and will adjust its behavior accordingly.
150155
*
151156
*
152157
* On tabs data change:
@@ -238,6 +243,7 @@
238243
DATA_KEY_IS_MOUSEDOWN: 'scrtabsismousedown',
239244

240245
CSS_CLASSES: {
246+
RTL: 'scrtabs-rtl',
241247
SCROLL_ARROW_DISABLE: 'scrtabs-disable'
242248
},
243249

@@ -336,6 +342,9 @@
336342

337343
var touchPageX = e.originalEvent.changedTouches[0].pageX;
338344
var diff = touchPageX - touchStartX;
345+
if (stc.rtl) {
346+
diff = -diff;
347+
}
339348
var minPos;
340349

341350
newLeftPos = startingContainerLeftPos + diff;
@@ -348,7 +357,9 @@
348357
}
349358
}
350359
stc.movableContainerLeftPos = newLeftPos;
351-
stc.$movableContainer.css('left', smv.getMovableContainerCssLeftVal());
360+
361+
var leftOrRight = stc.rtl ? 'right' : 'left';
362+
stc.$movableContainer.css(leftOrRight, smv.getMovableContainerCssLeftVal());
352363
smv.refreshScrollArrowsDisabledState();
353364
});
354365
};
@@ -383,8 +394,14 @@
383394
if (!isPerformingSlideAnim) {
384395
smv.refreshScrollArrowsDisabledState();
385396

386-
if (stc.movableContainerLeftPos < minPos) {
387-
smv.incrementMovableContainerRight(minPos);
397+
if (stc.rtl) {
398+
if (stc.movableContainerRightPos < minPos) {
399+
smv.incrementMovableContainerLeft(minPos);
400+
}
401+
} else {
402+
if (stc.movableContainerLeftPos < minPos) {
403+
smv.incrementMovableContainerRight(minPos);
404+
}
388405
}
389406
}
390407

@@ -408,6 +425,10 @@
408425

409426
stc.isNavPills = false;
410427

428+
if (stc.rtl) {
429+
$tabsContainer.addClass(CONSTANTS.CSS_CLASSES.RTL);
430+
}
431+
411432
stc.$fixedContainer = $tabsContainer.find('.scrtabs-tabs-fixed-container');
412433
$leftArrow = stc.$fixedContainer.prev();
413434
$rightArrow = stc.$fixedContainer.next();
@@ -888,7 +909,9 @@
888909
var smv = this,
889910
stc = smv.stc,
890911
minPos = smv.getMinPos(),
891-
leftVal;
912+
leftOrRightVal;
913+
914+
var leftOrRight = stc.rtl ? 'right' : 'left';
892915

893916
if (stc.movableContainerLeftPos > 0) {
894917
stc.movableContainerLeftPos = 0;
@@ -897,11 +920,13 @@
897920
}
898921

899922
stc.movableContainerLeftPos = stc.movableContainerLeftPos / 1;
900-
leftVal = smv.getMovableContainerCssLeftVal();
923+
leftOrRightVal = smv.getMovableContainerCssLeftVal();
901924

902925
smv.performingSlideAnim = true;
903926

904-
stc.$movableContainer.stop().animate({ left: leftVal }, 'slow', function __slideAnimComplete() {
927+
var targetPos = stc.rtl ? { right: leftOrRightVal } : { left: leftOrRightVal };
928+
929+
stc.$movableContainer.stop().animate(targetPos, 'slow', function __slideAnimComplete() {
905930
var newMinPos = smv.getMinPos();
906931

907932
smv.performingSlideAnim = false;
@@ -910,7 +935,10 @@
910935
// quickly--move back into position
911936
if (stc.movableContainerLeftPos < newMinPos) {
912937
smv.decrementMovableContainerLeftPos(newMinPos);
913-
stc.$movableContainer.stop().animate({ left: smv.getMovableContainerCssLeftVal() }, 'fast', function() {
938+
939+
targetPos = stc.rtl ? { right: smv.getMovableContainerCssLeftVal() } : { left: smv.getMovableContainerCssLeftVal() };
940+
941+
stc.$movableContainer.stop().animate(targetPos, 'fast', function() {
914942
smv.refreshScrollArrowsDisabledState();
915943
});
916944
} else {
@@ -949,6 +977,10 @@
949977
elementsHandler = stc.elementsHandler,
950978
num;
951979

980+
if (options.enableRtlSupport && $('html').attr('dir') === 'rtl') {
981+
stc.rtl = true;
982+
}
983+
952984
if (options.scrollToTabEdge) {
953985
stc.scrollToTabEdge = true;
954986
}
@@ -1777,7 +1809,8 @@
17771809
cssClassRightArrow: 'glyphicon glyphicon-chevron-right',
17781810
leftArrowContent: '',
17791811
rightArrowContent: '',
1780-
enableSwiping: false
1812+
enableSwiping: false,
1813+
enableRtlSupport: false
17811814
};
17821815

17831816

‎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.0.1",
3+
"version": "2.1.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)