Current state
This commit is contained in:
81
public/assets/plugins/intro/example/RTL/index.html
Normal file
81
public/assets/plugins/intro/example/RTL/index.html
Normal file
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Handling "Right To Left" languages</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
<!-- Add IntroJs RTL styles -->
|
||||
<link href="../../introjs-rtl.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
|
||||
<style type="text/css">
|
||||
a, .introjs-tooltiptext {
|
||||
font-family: 'tahoma' !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-narrow">
|
||||
|
||||
<div class="masthead">
|
||||
<ul class="nav nav-pills pull-right" data-step="5" data-intro="دانلود کن">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 data-step="1" data-intro="متن توضیح">RTL Style</span></h1>
|
||||
<p class="lead" data-step="4" data-intro="یک مرحله دیگه">This is the <abbr lang="en" title="Right To Left">RTL</abbr> version of IntroJs which includes an addition CSS file to perform the RTL style.</p>
|
||||
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOptions({ 'nextLabel': 'بعد', 'prevLabel': 'قبل', 'skipLabel': 'خروج', 'doneLabel': 'اتمام' }).start();">Show me how</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div class="span6" data-step="2" data-intro="باحال نیست؟" data-position='right'>
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div class="span6" data-step="3" data-intro="امکانات بیشتر" data-position='left'>
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
9
public/assets/plugins/intro/example/assets/css/bootstrap-responsive.min.css
vendored
Normal file
9
public/assets/plugins/intro/example/assets/css/bootstrap-responsive.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
9
public/assets/plugins/intro/example/assets/css/bootstrap.min.css
vendored
Normal file
9
public/assets/plugins/intro/example/assets/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
36
public/assets/plugins/intro/example/assets/css/demo.css
Normal file
36
public/assets/plugins/intro/example/assets/css/demo.css
Normal file
@@ -0,0 +1,36 @@
|
||||
body {
|
||||
padding-top: 20px;
|
||||
font-family: "Myriad Pro", Verdana, Arial, Tahoma;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
/* Custom container */
|
||||
.container-narrow {
|
||||
margin: 0 auto;
|
||||
max-width: 700px;
|
||||
}
|
||||
.container-narrow > hr {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
/* Main marketing message and sign up button */
|
||||
.jumbotron {
|
||||
margin: 60px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.jumbotron h1 {
|
||||
font-size: 72px;
|
||||
line-height: 1;
|
||||
}
|
||||
.jumbotron .btn {
|
||||
font-size: 21px;
|
||||
padding: 14px 24px;
|
||||
}
|
||||
|
||||
/* Supporting marketing content */
|
||||
.marketing {
|
||||
margin: 60px 0;
|
||||
}
|
||||
.marketing p + h4 {
|
||||
margin-top: 28px;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
84
public/assets/plugins/intro/example/custom-class/index.html
Normal file
84
public/assets/plugins/intro/example/custom-class/index.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Custom CSS Class</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
<style>
|
||||
.forLastStep {
|
||||
font-weight: bold;
|
||||
}
|
||||
.customDefault {
|
||||
color: gray;
|
||||
}
|
||||
.customDefault .introjs-skipbutton {
|
||||
border-radius: 0;
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-narrow">
|
||||
|
||||
<div class="masthead">
|
||||
<ul class="nav nav-pills pull-right" data-step="5" data-tooltipClass='forLastStep' data-intro="Get it, use it.">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 data-step="1" data-intro="This is a tooltip!">Custom Class</h1>
|
||||
<p class="lead" data-step="4" data-intro="Another step.">Add custom CSS class to tooltip boxes using <code>data-tooltipClass</code> attribute and <code>tooltipClass</code> option.</p>
|
||||
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOption('tooltipClass', 'customDefault').start();">Show me how</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'>
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div class="span6" data-step="3" data-intro="More features, more fun." data-position='left'>
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
72
public/assets/plugins/intro/example/hello-world/index.html
Normal file
72
public/assets/plugins/intro/example/hello-world/index.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Basic usage</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-narrow">
|
||||
|
||||
<div class="masthead">
|
||||
<ul class="nav nav-pills pull-right" data-step="5" data-intro="Get it, use it.">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 data-step="1" data-intro="This is a tooltip!">Basic Usage</h1>
|
||||
<p class="lead" data-step="4" data-intro="Another step.">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
|
||||
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'>
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div class="span6" data-step="3" data-intro="More features, more fun." data-position='left'>
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Without Bullets</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-narrow">
|
||||
|
||||
<div class="masthead">
|
||||
<ul class="nav nav-pills pull-right" data-step="5" data-intro="Get it, use it.">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 data-step="1" data-intro="This is a tooltip!">Without Bullets</h1>
|
||||
<p class="lead" data-step="4" data-intro="Another step.">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
|
||||
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOption('showBullets', false).start();">Show me how</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'>
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div class="span6" data-step="3" data-intro="More features, more fun." data-position='left'>
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Without Buttons</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-narrow">
|
||||
|
||||
<div class="masthead">
|
||||
<ul class="nav nav-pills pull-right" data-step="5" data-intro="Get it, use it.">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 data-step="1" data-intro="This is a tooltip!">Without Buttons</h1>
|
||||
<p class="lead" data-step="4" data-intro="Another step.">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
|
||||
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOption('showButtons', false).start();">Show me how</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'>
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div class="span6" data-step="3" data-intro="More features, more fun." data-position='left'>
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
108
public/assets/plugins/intro/example/html-tooltip/index.html
Normal file
108
public/assets/plugins/intro/example/html-tooltip/index.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>HTML in tooltip</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-narrow">
|
||||
|
||||
<div class="masthead">
|
||||
<ul id="step5" class="nav nav-pills pull-right">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 id="step1">HTML in tooltip</h1>
|
||||
<p id="step4" class="lead">We're going to use HTML codes in tooltips via Programmatic API</p>
|
||||
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="startIntro();">Show me how</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div id="step2" class="span6">
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div id="step3" class="span6">
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
<script type="text/javascript">
|
||||
function startIntro(){
|
||||
var intro = introJs();
|
||||
intro.setOptions({
|
||||
steps: [
|
||||
{
|
||||
element: '#step1',
|
||||
intro: "This is a <b>bold</b> tooltip."
|
||||
},
|
||||
{
|
||||
element: '#step2',
|
||||
intro: "Ok, <i>wasn't</i> that fun?",
|
||||
position: 'right'
|
||||
},
|
||||
{
|
||||
element: '#step3',
|
||||
intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',
|
||||
position: 'left'
|
||||
},
|
||||
{
|
||||
element: '#step4',
|
||||
intro: "<span style='font-family: Tahoma'>Another step with new font!</span>",
|
||||
position: 'bottom'
|
||||
},
|
||||
{
|
||||
element: '#step5',
|
||||
intro: '<strong>Get</strong> it, <strong>use</strong> it.'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
intro.start();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
36
public/assets/plugins/intro/example/index.html
Normal file
36
public/assets/plugins/intro/example/index.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Examples, Table of Contents</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="assets/css/demo.css" rel="stylesheet">
|
||||
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-narrow">
|
||||
<div class="masthead">
|
||||
<h3 class="muted">Examples</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<ul>
|
||||
<li><a href="hello-world/index.html" title='Basic usage'>Basic usage</a></li>
|
||||
<li><a href="hello-world/withoutBullets.html" title='Basic usage with buttons'>Basic usage with buttons</a></li>
|
||||
<li><a href="hello-world/withoutButtons.html" title='Basic usage with bullets'>Basic usage with bullets</a></li>
|
||||
<li><a href="programmatic/index.html" title='Programmatic defining using JSON'>Programmatic defining using JSON</a></li>
|
||||
<li><a href="multi-page/index.html" title='Multi-Page introduction'>Multi-Page introduction</a></li>
|
||||
<li><a href="RTL/index.html" title='RTL version'>RTL version</a></li>
|
||||
<li><a href="html-tooltip/index.html" title='HTML in tooltip'>HTML in tooltip</a></li>
|
||||
<li><a href="custom-class/index.html" title='Custom CSS Class'>Custom CSS Class</a></li>
|
||||
<li><a href="withoutElement/index.html" title='Introduction without focusing on elements'>Introduction without focusing on elements</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
73
public/assets/plugins/intro/example/multi-page/index.html
Normal file
73
public/assets/plugins/intro/example/multi-page/index.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Multi-page introduction, Page 1</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-narrow">
|
||||
<div class="masthead">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 data-step="1" data-intro="This is a tooltip!">Multi-Page</span></h1>
|
||||
<p class="lead">Multi-page introduction, you will see three steps of introduction in this page.</p>
|
||||
<a id="startButton" class="btn btn-large btn-success" href="javascript:void(0);">Show me how</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'>
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div class="span6" data-step="3" data-intro="More features, more fun." data-position='left'>
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
<script type="text/javascript">
|
||||
document.getElementById('startButton').onclick = function() {
|
||||
introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {
|
||||
window.location.href = 'second.html?multipage=true';
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
75
public/assets/plugins/intro/example/multi-page/second.html
Normal file
75
public/assets/plugins/intro/example/multi-page/second.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Multi-page introduction, Page 2</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-narrow">
|
||||
|
||||
<div class="masthead">
|
||||
<ul class="nav nav-pills pull-right" data-step="5" data-intro="Get it, use it.">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1>Second Page</span></h1>
|
||||
<p class="lead" data-step="4" data-intro="Another step.">Next page of introduction!</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div class="span6">
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div class="span6">
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
<script type="text/javascript">
|
||||
if (RegExp('multipage', 'gi').test(window.location.search)) {
|
||||
introJs().start();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
110
public/assets/plugins/intro/example/programmatic/index.html
Normal file
110
public/assets/plugins/intro/example/programmatic/index.html
Normal file
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Defining with JSON configuration</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-narrow">
|
||||
|
||||
<div class="masthead">
|
||||
<ul id="step5" class="nav nav-pills pull-right">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 id="step1">Programmatic</h1>
|
||||
<p id="step4" class="lead">In this example we are going to define steps with JSON configuration.</p>
|
||||
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="startIntro();">Show me how</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div id="step2" class="span6">
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div id="step3" class="span6">
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
<script type="text/javascript">
|
||||
function startIntro(){
|
||||
var intro = introJs();
|
||||
intro.setOptions({
|
||||
steps: [
|
||||
{
|
||||
intro: "Hello world!"
|
||||
},
|
||||
{
|
||||
element: document.querySelector('#step1'),
|
||||
intro: "This is a tooltip."
|
||||
},
|
||||
{
|
||||
element: document.querySelectorAll('#step2')[0],
|
||||
intro: "Ok, wasn't that fun?",
|
||||
position: 'right'
|
||||
},
|
||||
{
|
||||
element: '#step3',
|
||||
intro: 'More features, more fun.',
|
||||
position: 'left'
|
||||
},
|
||||
{
|
||||
element: '#step4',
|
||||
intro: "Another step.",
|
||||
position: 'bottom'
|
||||
},
|
||||
{
|
||||
element: '#step5',
|
||||
intro: 'Get it, use it.'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
intro.start();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
113
public/assets/plugins/intro/example/withoutElement/index.html
Normal file
113
public/assets/plugins/intro/example/withoutElement/index.html
Normal file
@@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Intro without focusing on elements</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
|
||||
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
|
||||
|
||||
<!-- styles -->
|
||||
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/demo.css" rel="stylesheet">
|
||||
|
||||
<!-- Add IntroJs styles -->
|
||||
<link href="../../introjs.css" rel="stylesheet">
|
||||
|
||||
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-narrow">
|
||||
|
||||
<div class="masthead">
|
||||
<ul id="step5" class="nav nav-pills pull-right">
|
||||
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
|
||||
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
|
||||
<li><a href="https://twitter.com/usablica">@usablica</a></li>
|
||||
</ul>
|
||||
<h3 class="muted">Intro.js</h3>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="jumbotron">
|
||||
<h1 id="step1">Without Element</h1>
|
||||
<p id="step4" class="lead">This example shows the introductions without focusing on elements.</p>
|
||||
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="startIntro();">Show me how</a>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row-fluid marketing">
|
||||
<div id="step2" class="span6">
|
||||
<h4>Section One</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Two</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Three</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
|
||||
<div id="step3" class="span6">
|
||||
<h4>Section Four</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
|
||||
<h4>Section Five</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
|
||||
<h4>Section Six</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
</div>
|
||||
<script type="text/javascript" src="../../intro.js"></script>
|
||||
<script type="text/javascript">
|
||||
function startIntro(){
|
||||
var intro = introJs();
|
||||
intro.setOptions({
|
||||
steps: [
|
||||
{
|
||||
intro: "Hello world!"
|
||||
},
|
||||
{
|
||||
intro: "You <b>don't need</b> to define element to focus, this is a floating tooltip."
|
||||
},
|
||||
{
|
||||
element: document.querySelector('#step1'),
|
||||
intro: "This is a tooltip."
|
||||
},
|
||||
{
|
||||
element: document.querySelectorAll('#step2')[0],
|
||||
intro: "Ok, wasn't that fun?",
|
||||
position: 'right'
|
||||
},
|
||||
{
|
||||
element: '#step3',
|
||||
intro: 'More features, more fun.',
|
||||
position: 'left'
|
||||
},
|
||||
{
|
||||
element: '#step4',
|
||||
intro: "Another step.",
|
||||
position: 'bottom'
|
||||
},
|
||||
{
|
||||
element: '#step5',
|
||||
intro: 'Get it, use it.'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
intro.start();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1013
public/assets/plugins/intro/intro.js
Normal file
1013
public/assets/plugins/intro/intro.js
Normal file
File diff suppressed because it is too large
Load Diff
22
public/assets/plugins/intro/introjs-rtl.css
Normal file
22
public/assets/plugins/intro/introjs-rtl.css
Normal file
@@ -0,0 +1,22 @@
|
||||
.introjs-tooltipbuttons {
|
||||
text-align: left;
|
||||
}
|
||||
.introjs-skipbutton {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.introjs-tooltip {
|
||||
direction: rtl;
|
||||
}
|
||||
.introjs-prevbutton {
|
||||
border: 1px solid #d4d4d4;
|
||||
border-left: none;
|
||||
-webkit-border-radius: 0 0.2em 0.2em 0;
|
||||
-moz-border-radius: 0 0.2em 0.2em 0;
|
||||
border-radius: 0 0.2em 0.2em 0;
|
||||
}
|
||||
.introjs-nextbutton {
|
||||
border: 1px solid #d4d4d4;
|
||||
-webkit-border-radius: 0.2em 0 0 0.2em;
|
||||
-moz-border-radius: 0.2em 0 0 0.2em;
|
||||
border-radius: 0.2em 0 0 0.2em;
|
||||
}
|
||||
274
public/assets/plugins/intro/introjs.css
Normal file
274
public/assets/plugins/intro/introjs.css
Normal file
@@ -0,0 +1,274 @@
|
||||
.introjs-overlay {
|
||||
position: absolute;
|
||||
z-index: 999999;
|
||||
background-color: #000;
|
||||
opacity: 0;
|
||||
background: -moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
|
||||
background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));
|
||||
background: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
|
||||
background: -o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
|
||||
background: -ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
|
||||
background: radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
||||
filter: alpha(opacity=50);
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
-moz-transition: all 0.3s ease-out;
|
||||
-ms-transition: all 0.3s ease-out;
|
||||
-o-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.introjs-fixParent {
|
||||
z-index: auto !important;
|
||||
opacity: 1.0 !important;
|
||||
}
|
||||
|
||||
.introjs-showElement {
|
||||
z-index: 9999999 !important;
|
||||
}
|
||||
|
||||
.introjs-relativePosition {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.introjs-helperLayer {
|
||||
position: absolute;
|
||||
z-index: 9999998;
|
||||
background-color: #FFF;
|
||||
background-color: rgba(255,255,255,.9);
|
||||
border: 1px solid #777;
|
||||
border: 1px solid rgba(0,0,0,.5);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 15px rgba(0,0,0,.4);
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
-moz-transition: all 0.3s ease-out;
|
||||
-ms-transition: all 0.3s ease-out;
|
||||
-o-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.introjs-helperNumberLayer {
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
right: -16px;
|
||||
z-index: 9999999999 !important;
|
||||
padding: 2px;
|
||||
font-family: Arial, verdana, tahoma;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 1px rgba(0,0,0,.3);
|
||||
background: #C75757; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #C75757 0%, #cf0404 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C75757), color-stop(100%, #cf0404)); /* Chrome,Safari4+ */
|
||||
background: -moz-linear-gradient(top, #C75757 0%, #cf0404 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient(top, #C75757 0%, #cf0404 100%); /* IE10+ */
|
||||
background: -o-linear-gradient(top, #C75757 0%, #cf0404 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient(to bottom, #C75757 0%, #cf0404 100%); /* W3C */
|
||||
width: 24px;
|
||||
height:24px;
|
||||
line-height: 16px;
|
||||
border: 3px solid white;
|
||||
border-radius: 50%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C75757', endColorstr='#cf0404', GradientType=0); /* IE6-9 */
|
||||
filter: progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000); /* IE10 text shadows */
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,.4);
|
||||
}
|
||||
|
||||
.introjs-arrow {
|
||||
border: 5px solid white;
|
||||
content:'';
|
||||
position: absolute;
|
||||
}
|
||||
.introjs-arrow.top {
|
||||
top: -10px;
|
||||
border-top-color:transparent;
|
||||
border-right-color:transparent;
|
||||
border-bottom-color:white;
|
||||
border-left-color:transparent;
|
||||
}
|
||||
.introjs-arrow.right {
|
||||
right: -10px;
|
||||
top: 10px;
|
||||
border-top-color:transparent;
|
||||
border-right-color:transparent;
|
||||
border-bottom-color:transparent;
|
||||
border-left-color:white;
|
||||
}
|
||||
.introjs-arrow.bottom {
|
||||
bottom: -10px;
|
||||
border-top-color:white;
|
||||
border-right-color:transparent;
|
||||
border-bottom-color:transparent;
|
||||
border-left-color:transparent;
|
||||
}
|
||||
.introjs-arrow.left {
|
||||
left: -10px;
|
||||
top: 10px;
|
||||
border-top-color:transparent;
|
||||
border-right-color:white;
|
||||
border-bottom-color:transparent;
|
||||
border-left-color:transparent;
|
||||
}
|
||||
|
||||
.introjs-tooltip {
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
background-color: white;
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 10px rgba(0,0,0,.4);
|
||||
-webkit-transition: opacity 0.1s ease-out;
|
||||
-moz-transition: opacity 0.1s ease-out;
|
||||
-ms-transition: opacity 0.1s ease-out;
|
||||
-o-transition: opacity 0.1s ease-out;
|
||||
transition: opacity 0.1s ease-out;
|
||||
}
|
||||
|
||||
.introjs-tooltipbuttons {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/*
|
||||
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
|
||||
Changed by Afshin Mehrabani
|
||||
*/
|
||||
.introjs-button {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
display: inline-block;
|
||||
padding: 0.3em 0.8em;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
font-size: 11px;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
-webkit-background-clip: padding;
|
||||
-moz-background-clip: padding;
|
||||
-o-background-clip: padding-box;
|
||||
/*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */
|
||||
-webkit-border-radius: 0.2em;
|
||||
-moz-border-radius: 0.2em;
|
||||
border-radius: 0.2em;
|
||||
/* IE hacks */
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
margin-top: 10px;
|
||||
background-color: #18A689;
|
||||
border-color: #18A689;
|
||||
}
|
||||
|
||||
.introjs-button:hover {
|
||||
border-color: #bcbcbc;
|
||||
text-decoration: none;
|
||||
box-shadow: 0px 1px 1px #e3e3e3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.introjs-button:focus,
|
||||
.introjs-button:active {
|
||||
background-color: #18A689!important;
|
||||
border-color: #18A689!important;
|
||||
color:#fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* overrides extra padding on button elements in Firefox */
|
||||
.introjs-button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.introjs-skipbutton {
|
||||
margin-right: 5px;
|
||||
color: #eaeaea;
|
||||
background-color: #2B2E33;
|
||||
border-color: #2B2E33;
|
||||
}
|
||||
|
||||
.introjs-skipbutton:hover {
|
||||
color: #eaeaea !important;
|
||||
}
|
||||
|
||||
.introjs-prevbutton {
|
||||
-webkit-border-radius: 0.2em 0 0 0.2em;
|
||||
-moz-border-radius: 0.2em 0 0 0.2em;
|
||||
border-radius: 0.2em 0 0 0.2em;
|
||||
border-right: none;
|
||||
background-color: #18A689!important;
|
||||
border-color: #18A689!important;
|
||||
}
|
||||
|
||||
.introjs-nextbutton {
|
||||
-webkit-border-radius: 0 0.2em 0.2em 0;
|
||||
-moz-border-radius: 0 0.2em 0.2em 0;
|
||||
border-radius: 0 0.2em 0.2em 0;
|
||||
background-color: #18A689 !important;
|
||||
border-color: #18A689!important;
|
||||
margin-left: 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.introjs-prevbutton:hover {
|
||||
color:#fff !important;
|
||||
background-color: #159077 !important;
|
||||
border-color: #159077!important;
|
||||
}
|
||||
|
||||
.introjs-nextbutton:hover {
|
||||
color:#fff !important;
|
||||
background-color: #159077 !important;
|
||||
border-color: #159077!important;
|
||||
}
|
||||
|
||||
.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus {
|
||||
color: #9a9a9a !important;
|
||||
border-color: #d4d4d4 !important;
|
||||
box-shadow: none;
|
||||
cursor: default;
|
||||
background-color: #f4f4f4 !important;
|
||||
background-image: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.introjs-bullets {
|
||||
text-align: center;
|
||||
}
|
||||
.introjs-bullets ul {
|
||||
clear: both;
|
||||
margin: 15px auto 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.introjs-bullets ul li {
|
||||
list-style: none;
|
||||
float: left;
|
||||
margin: 0 2px;
|
||||
}
|
||||
.introjs-bullets ul li a {
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #ccc;
|
||||
border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.introjs-bullets ul li a:hover {
|
||||
background: #999;
|
||||
}
|
||||
.introjs-bullets ul li a.active {
|
||||
background: #999;
|
||||
}
|
||||
.introjsFloatingElement {
|
||||
position: absolute;
|
||||
height: 0;
|
||||
width: 0;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
26
public/assets/plugins/intro/minified/intro.min.js
vendored
Normal file
26
public/assets/plugins/intro/minified/intro.min.js
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
(function(q,f){"object"===typeof exports?f(exports):"function"===typeof define&&define.amd?define(["exports"],f):f(q)})(this,function(q){function f(a){this._targetElement=a;this._options={nextLabel:"Next →",prevLabel:"← Back",skipLabel:"Skip",doneLabel:"Done",tooltipPosition:"bottom",tooltipClass:"",exitOnEsc:!0,exitOnOverlayClick:!0,showStepNumbers:!0,keyboardNavigation:!0,showButtons:!0,showBullets:!0,scrollToElement:!0}}function s(a){if(null==a||"object"!=typeof a||"undefined"!=typeof a.nodeType)return a;
|
||||
var b={},c;for(c in a)b[c]=s(a[c]);return b}function t(){this._direction="forward";"undefined"===typeof this._currentStep?this._currentStep=0:++this._currentStep;if(this._introItems.length<=this._currentStep)"function"===typeof this._introCompleteCallback&&this._introCompleteCallback.call(this),u.call(this,this._targetElement);else{var a=this._introItems[this._currentStep];"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,a.element);A.call(this,a)}}function y(){this._direction=
|
||||
"backward";if(0===this._currentStep)return!1;var a=this._introItems[--this._currentStep];"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,a.element);A.call(this,a)}function u(a){var b=a.querySelector(".introjs-overlay");if(null!=b){b.style.opacity=0;setTimeout(function(){b.parentNode&&b.parentNode.removeChild(b)},500);(a=a.querySelector(".introjs-helperLayer"))&&a.parentNode.removeChild(a);(a=document.querySelector(".introjsFloatingElement"))&&a.parentNode.removeChild(a);
|
||||
if(a=document.querySelector(".introjs-showElement"))a.className=a.className.replace(/introjs-[a-zA-Z]+/g,"").replace(/^\s+|\s+$/g,"");if((a=document.querySelectorAll(".introjs-fixParent"))&&0<a.length)for(var c=a.length-1;0<=c;c--)a[c].className=a[c].className.replace(/introjs-fixParent/g,"").replace(/^\s+|\s+$/g,"");window.removeEventListener?window.removeEventListener("keydown",this._onKeyDown,!0):document.detachEvent&&document.detachEvent("onkeydown",this._onKeyDown);this._currentStep=void 0}}
|
||||
function B(a,b,c,d){b.style.top=null;b.style.right=null;b.style.bottom=null;b.style.left=null;b.style.marginLeft=null;b.style.marginTop=null;c.style.display="inherit";"undefined"!=typeof d&&null!=d&&(d.style.top=null,d.style.left=null);if(this._introItems[this._currentStep]){var e="",e=this._introItems[this._currentStep],e="string"===typeof e.tooltipClass?e.tooltipClass:this._options.tooltipClass;b.className=("introjs-tooltip "+e).replace(/^\s+|\s+$/g,"");switch(this._introItems[this._currentStep].position){case "top":b.style.left=
|
||||
"15px";b.style.top="-"+(p(b).height+10)+"px";c.className="introjs-arrow bottom";break;case "right":b.style.left=p(a).width+20+"px";c.className="introjs-arrow left";break;case "left":!0==this._options.showStepNumbers&&(b.style.top="15px");b.style.right=p(a).width+20+"px";c.className="introjs-arrow right";break;case "floating":c.style.display="none";a=p(b);b.style.left="50%";b.style.top="50%";b.style.marginLeft="-"+a.width/2+"px";b.style.marginTop="-"+a.height/2+"px";"undefined"!=typeof d&&null!=d&&
|
||||
(d.style.left="-"+(a.width/2+18)+"px",d.style.top="-"+(a.height/2+18)+"px");break;default:b.style.bottom="-"+(p(b).height+10)+"px",c.className="introjs-arrow top"}}}function w(a){if(a&&this._introItems[this._currentStep]){var b=this._introItems[this._currentStep],c=p(b.element),d=10;"floating"==b.position&&(d=0);a.setAttribute("style","width: "+(c.width+d)+"px; height:"+(c.height+d)+"px; top:"+(c.top-5)+"px;left: "+(c.left-5)+"px;")}}function A(a){var b;"undefined"!==typeof this._introChangeCallback&&
|
||||
this._introChangeCallback.call(this,a.element);var c=this,d=document.querySelector(".introjs-helperLayer");p(a.element);if(null!=d){var e=d.querySelector(".introjs-helperNumberLayer"),C=d.querySelector(".introjs-tooltiptext"),g=d.querySelector(".introjs-arrow"),n=d.querySelector(".introjs-tooltip"),j=d.querySelector(".introjs-skipbutton"),m=d.querySelector(".introjs-prevbutton"),k=d.querySelector(".introjs-nextbutton");n.style.opacity=0;if(null!=e&&(b=this._introItems[0<=a.step-2?a.step-2:0],null!=
|
||||
b&&"forward"==this._direction&&"floating"==b.position||"backward"==this._direction&&"floating"==a.position))e.style.opacity=0;w.call(c,d);var l=document.querySelectorAll(".introjs-fixParent");if(l&&0<l.length)for(b=l.length-1;0<=b;b--)l[b].className=l[b].className.replace(/introjs-fixParent/g,"").replace(/^\s+|\s+$/g,"");b=document.querySelector(".introjs-showElement");b.className=b.className.replace(/introjs-[a-zA-Z]+/g,"").replace(/^\s+|\s+$/g,"");c._lastShowElementTimer&&clearTimeout(c._lastShowElementTimer);
|
||||
c._lastShowElementTimer=setTimeout(function(){null!=e&&(e.innerHTML=a.step);C.innerHTML=a.intro;B.call(c,a.element,n,g,e);d.querySelector(".introjs-bullets li > a.active").className="";d.querySelector('.introjs-bullets li > a[data-stepnumber="'+a.step+'"]').className="active";n.style.opacity=1;e.style.opacity=1},350)}else{var j=document.createElement("div"),l=document.createElement("div"),h=document.createElement("div"),m=document.createElement("div"),k=document.createElement("div"),f=document.createElement("div");
|
||||
j.className="introjs-helperLayer";w.call(c,j);this._targetElement.appendChild(j);l.className="introjs-arrow";m.className="introjs-tooltiptext";m.innerHTML=a.intro;k.className="introjs-bullets";!1===this._options.showBullets&&(k.style.display="none");var q=document.createElement("ul");b=0;for(var v=this._introItems.length;b<v;b++){var s=document.createElement("li"),r=document.createElement("a");r.onclick=function(){c.goToStep(this.getAttribute("data-stepnumber"))};0===b&&(r.className="active");r.href=
|
||||
"javascript:void(0);";r.innerHTML=" ";r.setAttribute("data-stepnumber",this._introItems[b].step);s.appendChild(r);q.appendChild(s)}k.appendChild(q);f.className="introjs-tooltipbuttons";!1===this._options.showButtons&&(f.style.display="none");h.className="introjs-tooltip";h.appendChild(m);h.appendChild(k);if(!0==this._options.showStepNumbers){var x=document.createElement("span");x.className="introjs-helperNumberLayer";x.innerHTML=a.step;j.appendChild(x)}h.appendChild(l);j.appendChild(h);k=document.createElement("a");
|
||||
k.onclick=function(){c._introItems.length-1!=c._currentStep&&t.call(c)};k.href="javascript:void(0);";k.innerHTML=this._options.nextLabel;m=document.createElement("a");m.onclick=function(){0!=c._currentStep&&y.call(c)};m.href="javascript:void(0);";m.innerHTML=this._options.prevLabel;j=document.createElement("a");j.className="introjs-button introjs-skipbutton";j.href="javascript:void(0);";j.innerHTML=this._options.skipLabel;j.onclick=function(){c._introItems.length-1==c._currentStep&&"function"===typeof c._introCompleteCallback&&
|
||||
c._introCompleteCallback.call(c);c._introItems.length-1!=c._currentStep&&"function"===typeof c._introExitCallback&&c._introExitCallback.call(c);u.call(c,c._targetElement)};f.appendChild(j);1<this._introItems.length&&(f.appendChild(m),f.appendChild(k));h.appendChild(f);B.call(c,a.element,h,l,x)}0==this._currentStep&&1<this._introItems.length?(m.className="introjs-button introjs-prevbutton introjs-disabled",k.className="introjs-button introjs-nextbutton",j.innerHTML=this._options.skipLabel):this._introItems.length-
|
||||
1==this._currentStep||1==this._introItems.length?(j.innerHTML=this._options.doneLabel,m.className="introjs-button introjs-prevbutton",k.className="introjs-button introjs-nextbutton introjs-disabled"):(m.className="introjs-button introjs-prevbutton",k.className="introjs-button introjs-nextbutton",j.innerHTML=this._options.skipLabel);k.focus();a.element.className+=" introjs-showElement";b=z(a.element,"position");"absolute"!==b&&"relative"!==b&&(a.element.className+=" introjs-relativePosition");for(b=
|
||||
a.element.parentNode;null!=b&&"body"!==b.tagName.toLowerCase();){l=z(b,"z-index");h=parseFloat(z(b,"opacity"));if(/[0-9]+/.test(l)||1>h)b.className+=" introjs-fixParent";b=b.parentNode}b=a.element.getBoundingClientRect();!(0<=b.top&&0<=b.left&&b.bottom+80<=window.innerHeight&&b.right<=window.innerWidth)&&!0===this._options.scrollToElement&&(h=a.element.getBoundingClientRect(),b=void 0!=window.innerWidth?window.innerHeight:document.documentElement.clientHeight,l=h.bottom-(h.bottom-h.top),h=h.bottom-
|
||||
b,0>l||a.element.clientHeight>b?window.scrollBy(0,l-30):window.scrollBy(0,h+100));"undefined"!==typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this,a.element)}function z(a,b){var c="";a.currentStyle?c=a.currentStyle[b]:document.defaultView&&document.defaultView.getComputedStyle&&(c=document.defaultView.getComputedStyle(a,null).getPropertyValue(b));return c&&c.toLowerCase?c.toLowerCase():c}function D(a){var b=document.createElement("div"),c="",d=this;b.className="introjs-overlay";
|
||||
if("body"===a.tagName.toLowerCase())c+="top: 0;bottom: 0; left: 0;right: 0;position: fixed;",b.setAttribute("style",c);else{var e=p(a);e&&(c+="width: "+e.width+"px; height:"+e.height+"px; top:"+e.top+"px;left: "+e.left+"px;",b.setAttribute("style",c))}a.appendChild(b);b.onclick=function(){!0==d._options.exitOnOverlayClick&&(u.call(d,a),void 0!=d._introExitCallback&&d._introExitCallback.call(d))};setTimeout(function(){c+="opacity: .8;";b.setAttribute("style",c)},10);return!0}function p(a){var b={};
|
||||
b.width=a.offsetWidth;b.height=a.offsetHeight;for(var c=0,d=0;a&&!isNaN(a.offsetLeft)&&!isNaN(a.offsetTop);)c+=a.offsetLeft,d+=a.offsetTop,a=a.offsetParent;b.top=d;b.left=c;return b}var v=function(a){if("object"===typeof a)return new f(a);if("string"===typeof a){if(a=document.querySelector(a))return new f(a);throw Error("There is no element with given selector.");}return new f(document.body)};v.version="0.8.0";v.fn=f.prototype={clone:function(){return new f(this)},setOption:function(a,b){this._options[a]=
|
||||
b;return this},setOptions:function(a){var b=this._options,c={},d;for(d in b)c[d]=b[d];for(d in a)c[d]=a[d];this._options=c;return this},start:function(){a:{var a=this._targetElement,b=[],c=this;if(this._options.steps)for(var d=[],e=0,d=this._options.steps.length;e<d;e++){var f=s(this._options.steps[e]);f.step=b.length+1;"string"===typeof f.element&&(f.element=document.querySelector(f.element));if("undefined"===typeof f.element||null==f.element){var g=document.querySelector(".introjsFloatingElement");
|
||||
null==g&&(g=document.createElement("div"),g.className="introjsFloatingElement",document.body.appendChild(g));f.element=g;f.position="floating"}null!=f.element&&b.push(f)}else{d=a.querySelectorAll("*[data-intro]");if(1>d.length)break a;e=0;for(f=d.length;e<f;e++){var g=d[e],n=parseInt(g.getAttribute("data-step"),10);0<n&&(b[n-1]={element:g,intro:g.getAttribute("data-intro"),step:parseInt(g.getAttribute("data-step"),10),tooltipClass:g.getAttribute("data-tooltipClass"),position:g.getAttribute("data-position")||
|
||||
this._options.tooltipPosition})}e=n=0;for(f=d.length;e<f;e++)if(g=d[e],null==g.getAttribute("data-step")){for(;"undefined"!=typeof b[n];)n++;b[n]={element:g,intro:g.getAttribute("data-intro"),step:n+1,tooltipClass:g.getAttribute("data-tooltipClass"),position:g.getAttribute("data-position")||this._options.tooltipPosition}}}e=[];for(d=0;d<b.length;d++)b[d]&&e.push(b[d]);b=e;b.sort(function(a,b){return a.step-b.step});c._introItems=b;D.call(c,a)&&(t.call(c),a.querySelector(".introjs-skipbutton"),a.querySelector(".introjs-nextbutton"),
|
||||
c._onKeyDown=function(b){if(27===b.keyCode&&!0==c._options.exitOnEsc)u.call(c,a),void 0!=c._introExitCallback&&c._introExitCallback.call(c);else if(37===b.keyCode)y.call(c);else if(39===b.keyCode||13===b.keyCode)t.call(c),b.preventDefault?b.preventDefault():b.returnValue=!1},c._onResize=function(){w.call(c,document.querySelector(".introjs-helperLayer"))},window.addEventListener?(this._options.keyboardNavigation&&window.addEventListener("keydown",c._onKeyDown,!0),window.addEventListener("resize",c._onResize,
|
||||
!0)):document.attachEvent&&(this._options.keyboardNavigation&&document.attachEvent("onkeydown",c._onKeyDown),document.attachEvent("onresize",c._onResize)))}return this},goToStep:function(a){this._currentStep=a-2;"undefined"!==typeof this._introItems&&t.call(this);return this},nextStep:function(){t.call(this);return this},previousStep:function(){y.call(this);return this},exit:function(){u.call(this,this._targetElement)},refresh:function(){w.call(this,document.querySelector(".introjs-helperLayer"));
|
||||
return this},onbeforechange:function(a){if("function"===typeof a)this._introBeforeChangeCallback=a;else throw Error("Provided callback for onbeforechange was not a function");return this},onchange:function(a){if("function"===typeof a)this._introChangeCallback=a;else throw Error("Provided callback for onchange was not a function.");return this},onafterchange:function(a){if("function"===typeof a)this._introAfterChangeCallback=a;else throw Error("Provided callback for onafterchange was not a function");
|
||||
return this},oncomplete:function(a){if("function"===typeof a)this._introCompleteCallback=a;else throw Error("Provided callback for oncomplete was not a function.");return this},onexit:function(a){if("function"===typeof a)this._introExitCallback=a;else throw Error("Provided callback for onexit was not a function.");return this}};return q.introJs=v});
|
||||
1
public/assets/plugins/intro/minified/introjs-rtl.min.css
vendored
Normal file
1
public/assets/plugins/intro/minified/introjs-rtl.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.introjs-tooltipbuttons{text-align:left}.introjs-skipbutton{margin-left:5px}.introjs-tooltip{direction:rtl}.introjs-prevbutton{border:1px solid #d4d4d4;border-left:0;-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .2em 0}.introjs-nextbutton{border:1px solid #d4d4d4;-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em}
|
||||
1
public/assets/plugins/intro/minified/introjs.min.css
vendored
Normal file
1
public/assets/plugins/intro/minified/introjs.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user