Skip to content
This repository was archived by the owner on Feb 4, 2021. It is now read-only.

Commit bcf349b

Browse files
afshinmafshinm
committed
Adding RTL version of introduction
1 parent 53268fb commit bcf349b

File tree

5 files changed

+118
-1
lines changed

5 files changed

+118
-1
lines changed

‎BUILD/BUILD.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,17 @@ new compressor.minify({
2727
console.log("Main CSS minified successfully.");
2828
}
2929
}
30+
});
31+
32+
new compressor.minify({
33+
type: 'yui-css',
34+
fileIn: '../introjs-rtl.css',
35+
fileOut: '../minified/introjs-rtl.min.css',
36+
callback: function (err) {
37+
if (err) {
38+
console.log(err);
39+
} else {
40+
console.log("RTL CSS minified successfully.");
41+
}
42+
}
3043
});

‎example/RTL/index.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>RTL</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
8+
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
9+
10+
<!-- styles -->
11+
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
12+
<link href="../assets/css/demo.css" rel="stylesheet">
13+
14+
<!-- Add IntroJs styles -->
15+
<link href="../../introjs.css" rel="stylesheet">
16+
<!-- Add IntroJs RTL styles -->
17+
<link href="../../introjs-rtl.css" rel="stylesheet">
18+
19+
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
20+
21+
<style type="text/css">
22+
a, .introjs-tooltiptext {
23+
font-family: 'tahoma' !important;
24+
}
25+
</style>
26+
27+
</head>
28+
29+
<body>
30+
31+
<div class="container-narrow">
32+
33+
<div class="masthead">
34+
<ul class="nav nav-pills pull-right" data-step="5" data-intro="دانلود کن">
35+
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
36+
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
37+
<li><a href="https://twitter.com/usablica">@usablica</a></li>
38+
</ul>
39+
<h3 class="muted">Intro.js</h3>
40+
</div>
41+
42+
<hr>
43+
44+
<div class="jumbotron">
45+
<h1 data-step="1" data-intro="متن توضیح">RTL Style</span></h1>
46+
<p class="lead" data-step="4" data-intro="یک مرحله دیگه">This is the RTL version of IntroJs which include an addition CSS file to perform the RTL style.</p>
47+
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOptions({ 'nextLabel': 'بعد', 'prevLabel': 'قبل', 'skipLabel': 'خروج', 'doneLabel': 'اتمام' }).start();">Show me how</a>
48+
</div>
49+
50+
<hr>
51+
52+
<div class="row-fluid marketing">
53+
<div class="span6" data-step="2" data-intro="باحال نیست؟" data-position='right'>
54+
<h4>Section One</h4>
55+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
56+
57+
<h4>Section Two</h4>
58+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
59+
60+
<h4>Section Three</h4>
61+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
62+
</div>
63+
64+
<div class="span6" data-step="3" data-intro="امکانات بیشتر" data-position='left'>
65+
<h4>Section Four</h4>
66+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
67+
68+
<h4>Section Five</h4>
69+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
70+
71+
<h4>Section Six</h4>
72+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
73+
74+
</div>
75+
</div>
76+
77+
<hr>
78+
</div>
79+
<script type="text/javascript" src="../../intro.js"></script>
80+
</body>
81+
</html>

‎introjs-rtl.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.introjs-tooltipbuttons {
2+
text-align: left;
3+
}
4+
.introjs-skipbutton {
5+
margin-left: 5px;
6+
}
7+
.introjs-tooltip {
8+
direction: rtl;
9+
}
10+
.introjs-prevbutton {
11+
border: 1px solid #d4d4d4;
12+
border-left: none;
13+
-webkit-border-radius: 0 0.2em 0.2em 0;
14+
-moz-border-radius: 0 0.2em 0.2em 0;
15+
border-radius: 0 0.2em 0.2em 0;
16+
}
17+
.introjs-nextbutton {
18+
border: 1px solid #d4d4d4;
19+
-webkit-border-radius: 0.2em 0 0 0.2em;
20+
-moz-border-radius: 0.2em 0 0 0.2em;
21+
border-radius: 0.2em 0 0 0.2em;
22+
}

‎minified/introjs-rtl.min.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎minified/introjs.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.

0 commit comments

Comments
 (0)