Skip to content

Commit ca3a1f6

Browse files
mikejacobsonmikejacobson
committed
Finish adding RTL support
1 parent 15a2e33 commit ca3a1f6

16 files changed

+66
-26
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: 14 additions & 4 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

@@ -419,6 +425,10 @@
419425

420426
stc.isNavPills = false;
421427

428+
if (stc.rtl) {
429+
$tabsContainer.addClass(CONSTANTS.CSS_CLASSES.RTL);
430+
}
431+
422432
stc.$fixedContainer = $tabsContainer.find('.scrtabs-tabs-fixed-container');
423433
$leftArrow = stc.$fixedContainer.prev();
424434
$rightArrow = stc.$fixedContainer.next();
@@ -967,10 +977,10 @@
967977
elementsHandler = stc.elementsHandler,
968978
num;
969979

970-
if (options.rtl) {
980+
if (options.enableRtlSupport && $('html').attr('dir') === 'rtl') {
971981
stc.rtl = true;
972982
}
973-
983+
974984
if (options.scrollToTabEdge) {
975985
stc.scrollToTabEdge = true;
976986
}
@@ -1800,7 +1810,7 @@
18001810
leftArrowContent: '',
18011811
rightArrowContent: '',
18021812
enableSwiping: false,
1803-
rtl: false
1813+
enableRtlSupport: false
18041814
};
18051815

18061816

‎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",

‎run/data-driven-rtl.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,8 @@
104104
scrollToTabEdge: false, // optional - pass in default value for demo purposes
105105
disableScrollArrowsOnFullyScrolled: true,
106106
enableSwiping: true,
107-
rtl: true,
107+
enableRtlSupport: true,
108+
reverseScroll: true,
108109
//widthMultiplier: 0.7,
109110
tabClickHandler: function () {
110111
console.log("click!! ", Date.now());

‎run/markup-only-rtl.html

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,6 @@
2727
color: black;
2828
font-size: 12px;
2929
}
30-
31-
32-
/* RTL customizing */
33-
.nav-tabs {
34-
padding-right: 0;
35-
}
3630
</style>
3731
</head>
3832

@@ -43,7 +37,6 @@
4337
<button type="button" id="btn-refresh">Refresh</button>
4438
</div>
4539

46-
4740
<!-- Nav tabs -->
4841
<ul class="nav nav-tabs" role="tablist" style="display: none">
4942
<li role="presentation" class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab Number 1</a></li>
@@ -122,7 +115,7 @@
122115

123116
function activate() {
124117
$('.nav-tabs').scrollingTabs({
125-
rtl: true,
118+
enableRtlSupport: true,
126119
reverseScroll: true,
127120
enableSwiping: true,
128121
scrollToTabEdge: true,

‎src/js/api.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,5 +153,5 @@ $.fn.scrollingTabs.defaults = {
153153
leftArrowContent: '',
154154
rightArrowContent: '',
155155
enableSwiping: false,
156-
rtl: false
156+
enableRtlSupport: false
157157
};

0 commit comments

Comments
 (0)