-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
182 lines (173 loc) · 7.86 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chaperone</title>
<link rel="stylesheet" href="site/css/site.css">
<link rel="stylesheet" href="site/css/prism.css">
<link rel="stylesheet" href="site/css/chaperone.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="site/js/prism.js"></script>
<script type="text/javascript" src="dist/chaperone.js"></script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="x" viewBox="0 0 16 16"><title>x icon</title><path d="M10.276 8.015l5.693 5.704L13.69 16 8 10.296 2.306 16 .03 13.72l5.693-5.705L.03 2.312 2.307.03 8 5.734 13.69.03l2.277 2.282-5.694 5.703z" id="Line" fill-rule="evenodd"/></symbol></svg>
<header>
<button class="c-hamburger c-hamburger--htx" onclick="toggleNav();">
<span>toggle menu</span>
</button>
<h1 class="logo" data-hook="logo">chaperone</h1>
<nav>
<ul data-hook="nav">
<li><a href="#what" onclick="toggleNav();" data-hook="what">what</a></li>
<li><a href="#how" onclick="toggleNav();" data-hook="how">how</a></li>
<li><a href="#who" onclick="toggleNav();" data-hook="who">who</a></li>
</ul>
</nav>
</header>
<div class="container">
<section id="what" class="row">
<h3 class="tagline">Guided tours for responsive web sites and applications.</h3>
<p><button class="button-primary start-tour" data-hook="start-tour" onclick="startTour();">Tour this page!</button></p>
<p>We searched the web for a lightweight script that would allow us to provide our users with a simple guided tour of our app. Though there are some pretty nice tours out there we didn't see any that worked really well at any screen size.</p>
<p>Thus was born chaperone.js.</p>
<ul>
<li>Lightweight: 11kb minified</li>
<li>Responsive: you name the breakpoints</li>
<li>Flexible: bring your own markup</li>
</ul>
</section>
<section id="how" class="row">
<h2>Install</h2>
<h4>NPM</h4>
<pre class="language-javascript"><code>npm install chaperone</code></pre>
<h4>Bower</h4>
<pre class="language-javascript"><code>bower install chaperone</code></pre>
<h2 data-hook="usage">Usage</h2>
<h4>Create a tour object</h4>
<pre class="language-javascript"><code>tour = {
// set up your phone and tablet breakpoints, be as generic as possible.
// In the future it will except as many as you like and you may name them.. but for now.. just these two wil have to do
breakpoints: {
mobile: 640,
tablet: 1024
},
// If you want the tour to start as soon as the script is run, change this to true.
autoStart: false,
// If you don't like the standard throbber html you can put yours here
throbberHTML: 'your fancy html here',
// Again, don't like the standard? Replace it!
chaperoneHTML: 'more fanciness',
// What's the selector in the chaperoneHTML for adding the progress? ( 2 of 5 )
progressSelector: '[data-hook="chaperone-progress"]',
// and the text selector for the step message?
textSelector: '[data-hook="chaperone-text"]',
// how about the back button selector?
backSelector: '[data-hook="chaperone-back"]',
// don't forget the next button
nextSelector: '[data-hook="chaperone-next"]',
// and finally the finish button
finishSelector: '[data-hook="chaperone-finish"]',
// how fast should things move?
animationTime: 300,
// do you want it to repeat or just end?
cycle: false,
// Here's the meat. Add some steps to your tour!
steps: [
{
// if there isn't a target selector the default is 'body'
target:'[data-hook="nav-what"]',
// position can be none( absolute ), locked (absolute to the container of the target) or fixed (fixed to the window)
position: 'locked',
// when locked you can control the distance of the throbber from the target. This one controls the x axis.
lockedLeft: 100,
// and this one does the y
lockedTop: -30,
// This next one is required. It's gotta say something!
message: 'Well... it's where we tell you what this thing is.',
// If you need a callback when the throbber opens
openEvent: openMenu,
// or when it closes
closeEvent: closeMenu,
// here's where you decide what sizes to show this throbber on. It defaults to all of them
shownOn: [ 'mobile', 'tablet' ]
},
{
// another step
},
{
// and another
}
]
}</code></pre>
<h4>Lauch that tour!</h4>
<pre class="language-javascript"><code>if ( !chaperone.shownSteps ) {
chaperone.init( tour );
} else {
chaperone.placeSteps( chaperone.shownSteps );
}</code></pre>
</section>
<section id="who" class="row">
<h2 data-hook="responsible">Responsible parties</h2>
<p>chaperone is a product of the <a href="http://www.datuhealth.com">datu health</a> design process and was shepherded into existance by <a href="https://github.com/spacecowboyian">Ian</a> with much help from <a href="https://github.com/mike-engel">Mike</a></p>
</section>
</div>
<footer>
</footer>
<script>
var tour = {
steps: [
{
target:'[data-hook="logo"]',
position: 'fixed',
location: 'bottomMiddle',
title: 'Let\'s go!',
message: 'Look for these glowing "throbbers" all over the page or just use the next and back buttons below. The first stop on our tour is the chaperone logo.'
},
{
target:'[data-hook="nav"]',
position: 'fixed',
location: 'bottomMiddle',
title: 'Menu',
message: 'You click links and new sections scroll in to view. See how its centered on the bottom of the element. That\'s location: "bottomMiddle" at work!',
shownOn: [ 'tablet', 'desktop' ]
},
{
target:'[data-hook="usage"]',
position: 'locked',
lockedLeft: -25,
lockedTop: -53,
title: 'Implementation',
message: 'This is the section where we explain how to implement chaperone. Notice that you were (hopefully) scrolled to this location.'
},
{
target:'[data-hook="responsible"]',
position: 'locked',
lockedLeft: -26,
lockedTop: -55,
title: 'The end is near',
message: 'The last stop on our tour brings us to the "who-dun-it" section. Note that the "next" button has now changed to "finish". Click that to jump off the tour.'
}
]
}
function toggleNav() {
var header = document.body.querySelector( 'header' ),
navSwitch = document.body.querySelector( '.c-hamburger' );
if ( !header.classList.contains( 'nav-open' )) {
header.classList.add( 'nav-open' );
navSwitch.classList.add( 'is-active' );
} else {
header.classList.remove( 'nav-open' );
navSwitch.classList.remove( 'is-active' );
}
}
function startTour() {
if ( !chaperone.shownSteps ) {
chaperone.init( tour );
} else {
chaperone.placeSteps( chaperone.shownSteps );
}
}
</script>
</body>
</html>