Skip to content

Commit 15a2e33

Browse files
mikejacobsonmikejacobson
committed
Add support for rtl
Working for markup-only, not for data-driven
1 parent 8ba93bf commit 15a2e33

File tree

8 files changed

+394
-17
lines changed

8 files changed

+394
-17
lines changed

‎dist/jquery.scrolling-tabs.js

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -336,6 +336,9 @@
336336

337337
var touchPageX = e.originalEvent.changedTouches[0].pageX;
338338
var diff = touchPageX - touchStartX;
339+
if (stc.rtl) {
340+
diff = -diff;
341+
}
339342
var minPos;
340343

341344
newLeftPos = startingContainerLeftPos + diff;
@@ -348,7 +351,9 @@
348351
}
349352
}
350353
stc.movableContainerLeftPos = newLeftPos;
351-
stc.$movableContainer.css('left', smv.getMovableContainerCssLeftVal());
354+
355+
var leftOrRight = stc.rtl ? 'right' : 'left';
356+
stc.$movableContainer.css(leftOrRight, smv.getMovableContainerCssLeftVal());
352357
smv.refreshScrollArrowsDisabledState();
353358
});
354359
};
@@ -383,8 +388,14 @@
383388
if (!isPerformingSlideAnim) {
384389
smv.refreshScrollArrowsDisabledState();
385390

386-
if (stc.movableContainerLeftPos < minPos) {
387-
smv.incrementMovableContainerRight(minPos);
391+
if (stc.rtl) {
392+
if (stc.movableContainerRightPos < minPos) {
393+
smv.incrementMovableContainerLeft(minPos);
394+
}
395+
} else {
396+
if (stc.movableContainerLeftPos < minPos) {
397+
smv.incrementMovableContainerRight(minPos);
398+
}
388399
}
389400
}
390401

@@ -888,7 +899,9 @@
888899
var smv = this,
889900
stc = smv.stc,
890901
minPos = smv.getMinPos(),
891-
leftVal;
902+
leftOrRightVal;
903+
904+
var leftOrRight = stc.rtl ? 'right' : 'left';
892905

893906
if (stc.movableContainerLeftPos > 0) {
894907
stc.movableContainerLeftPos = 0;
@@ -897,11 +910,13 @@
897910
}
898911

899912
stc.movableContainerLeftPos = stc.movableContainerLeftPos / 1;
900-
leftVal = smv.getMovableContainerCssLeftVal();
913+
leftOrRightVal = smv.getMovableContainerCssLeftVal();
901914

902915
smv.performingSlideAnim = true;
903916

904-
stc.$movableContainer.stop().animate({ left: leftVal }, 'slow', function __slideAnimComplete() {
917+
var targetPos = stc.rtl ? { right: leftOrRightVal } : { left: leftOrRightVal };
918+
919+
stc.$movableContainer.stop().animate(targetPos, 'slow', function __slideAnimComplete() {
905920
var newMinPos = smv.getMinPos();
906921

907922
smv.performingSlideAnim = false;
@@ -910,7 +925,10 @@
910925
// quickly--move back into position
911926
if (stc.movableContainerLeftPos < newMinPos) {
912927
smv.decrementMovableContainerLeftPos(newMinPos);
913-
stc.$movableContainer.stop().animate({ left: smv.getMovableContainerCssLeftVal() }, 'fast', function() {
928+
929+
targetPos = stc.rtl ? { right: smv.getMovableContainerCssLeftVal() } : { left: smv.getMovableContainerCssLeftVal() };
930+
931+
stc.$movableContainer.stop().animate(targetPos, 'fast', function() {
914932
smv.refreshScrollArrowsDisabledState();
915933
});
916934
} else {
@@ -949,6 +967,10 @@
949967
elementsHandler = stc.elementsHandler,
950968
num;
951969

970+
if (options.rtl) {
971+
stc.rtl = true;
972+
}
973+
952974
if (options.scrollToTabEdge) {
953975
stc.scrollToTabEdge = true;
954976
}
@@ -1777,7 +1799,8 @@
17771799
cssClassRightArrow: 'glyphicon glyphicon-chevron-right',
17781800
leftArrowContent: '',
17791801
rightArrowContent: '',
1780-
enableSwiping: false
1802+
enableSwiping: false,
1803+
rtl: false
17811804
};
17821805

17831806

‎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/data-driven-rtl.html

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<!DOCTYPE html>
2+
<html lang="fa" dir="rtl">
3+
4+
<head>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="../dist/jquery.scrolling-tabs.css">
8+
9+
<style>
10+
.left-side {
11+
width: 50%;
12+
}
13+
14+
.right-side {
15+
width: 50%;
16+
}
17+
18+
.st-demo-header {
19+
background-color: #666666;
20+
color: white;
21+
font-size: 24px;
22+
padding: 8px 24px;
23+
}
24+
25+
.st-demo-header button {
26+
color: black;
27+
font-size: 12px;
28+
}
29+
30+
.st-demo-subheader {
31+
background-color: #f0f0f0;
32+
color: #333;
33+
font-size: 16px;
34+
height: 65px;
35+
margin-top: 50px;
36+
padding: 8px 24px;
37+
}
38+
39+
.st-demo-subheader:first-child {
40+
margin-top: 0;
41+
}
42+
</style>
43+
</head>
44+
45+
<body>
46+
47+
<div class="st-demo-header">
48+
<div>jquery-bootstrap-scrolling-tabs Demo - Data Driven</div>
49+
<div>Using Tabs Array</div>
50+
<div>
51+
<button type="button" class="btn-add-tab">Add Tab</button>
52+
<button type="button" class="btn-remove-tab">Remove Tab</button>
53+
<button type="button" class="btn-update-tab">Update Tab</button>
54+
<button type="button" class="btn-move-tab">Move Tabs</button>
55+
<button type="button" class="btn-destroy">Destroy</button>
56+
</div>
57+
58+
</div>
59+
60+
<!-- build .nav-tabs and .tab-content in here -->
61+
<div class="tabs-inside-here"></div>
62+
63+
64+
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
65+
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
66+
67+
<script src="../dist/jquery.scrolling-tabs.js"></script>
68+
69+
<script>
70+
;(function() {
71+
'use strict';
72+
73+
74+
var tabs = [
75+
{ paneId: 'tab00', title: 'Tab Index 0', content: 'Tab Index 0 Content', active: true, disabled: false },
76+
{ paneId: 'tab01', title: 'Tab Index 1', content: 'Tab Index 1 Content', active: false, disabled: false },
77+
{ paneId: 'tab02', title: 'Tab Index 2', content: 'Tab Index 2 Content', active: false, disabled: false },
78+
{ paneId: 'tab03', title: 'Tab Index 3', content: 'Tab Index 3 Content', active: false, disabled: false },
79+
{ paneId: 'tab04', title: 'Tab Index 4', content: 'Tab Index 4 Content', active: false, disabled: true },
80+
{ paneId: 'tab05', title: 'Tab Index 5', content: 'Tab Index 5 Content', active: false, disabled: false },
81+
{ paneId: 'tab06', title: 'Tab Index 6', content: 'Tab Index 6 Content', active: false, disabled: false },
82+
{ paneId: 'tab07', title: 'Tab Index 7', content: 'Tab Index 7 Content', active: false, disabled: false },
83+
{ paneId: 'tab08', title: 'Tab Index 8', content: 'Tab Index 8 Content', active: false, disabled: false },
84+
{ paneId: 'tab09', title: 'Tab Index 9', content: 'Tab Index 9 Content', active: false, disabled: false },
85+
{ paneId: 'tab10', title: 'Tab Index 10', content: 'Tab Index 10 Content', active: false, disabled: false },
86+
{ paneId: 'tab11', title: 'Tab Index 11', content: 'Tab Index 11 Content', active: false, disabled: false }
87+
],
88+
lastTabId = 11;
89+
90+
91+
92+
$(activate);
93+
94+
95+
function activate() {
96+
97+
$('.tabs-inside-here').scrollingTabs({
98+
tabs: tabs, // required,
99+
propPaneId: 'paneId', // optional - pass in default value for demo purposes
100+
propTitle: 'title', // optional - pass in default value for demo purposes
101+
propActive: 'active', // optional - pass in default value for demo purposes
102+
propDisabled: 'disabled', // optional - pass in default value for demo purposes
103+
propContent: 'content', // optional - pass in default value for demo purposes
104+
scrollToTabEdge: false, // optional - pass in default value for demo purposes
105+
disableScrollArrowsOnFullyScrolled: true,
106+
enableSwiping: true,
107+
rtl: true,
108+
//widthMultiplier: 0.7,
109+
tabClickHandler: function () {
110+
console.log("click!! ", Date.now());
111+
}
112+
});
113+
114+
$('.btn-add-tab').click(addTab);
115+
$('.btn-remove-tab').click(removeTab);
116+
$('.btn-update-tab').click(updateTab);
117+
$('.btn-move-tab').click(moveTab);
118+
$('.btn-destroy').click(destroy);
119+
}
120+
121+
function destroy() {
122+
$('.tabs-inside-here').scrollingTabs('destroy');
123+
}
124+
125+
function updateTab() {
126+
console.log("update " + tabs[1].title);
127+
128+
tabs[1].title = 'UPDATED ' + tabs[1].title;
129+
tabs[1].content = 'UPDATED ' + tabs[1].content;
130+
131+
$('.tabs-inside-here').scrollingTabs('refresh');
132+
}
133+
134+
function moveTab() {
135+
console.log("move " + tabs[1].title + " to after " + tabs[4].title +
136+
", move " + tabs[9].title + " to before " + tabs[6].title);
137+
138+
tabs.splice(4, 0, tabs.splice(1, 1)[0]); // move 1 to right after 4
139+
tabs.splice(6, 0, tabs.splice(9, 1)[0]); // move 9 to right before 6
140+
141+
$('.tabs-inside-here').scrollingTabs('refresh');
142+
}
143+
144+
function addTab() {
145+
var newTab = {
146+
paneId: 'tab' + (++lastTabId),
147+
title: 'Tab Index ' + lastTabId,
148+
content: 'Tab Index ' + lastTabId + ' Content',
149+
active: true,
150+
disabled: false
151+
};
152+
153+
console.log("append new tab ", newTab.title);
154+
155+
// deactivate currently active tab
156+
tabs.some(function (tab) {
157+
if (tab.active) {
158+
tab.active = false;
159+
return true; // exit loop
160+
}
161+
});
162+
163+
tabs.push(newTab);
164+
165+
$('.tabs-inside-here').scrollingTabs('refresh', {
166+
forceActiveTab: true // make our new tab active
167+
});
168+
}
169+
170+
function removeTab() {
171+
console.log("remove tab ", tabs[2].title);
172+
173+
tabs.splice(2, 1);
174+
175+
$('.tabs-inside-here').scrollingTabs('refresh');
176+
}
177+
178+
}());
179+
180+
</script>
181+
</body>
182+
183+
</html>

0 commit comments

Comments
 (0)