提交 a5a663a5 编写于 作者: K Kamran Ahmed

Add animated or non-animated tours

上级 1114a703
/* eslint-disable */
document.addEventListener("DOMContentLoaded", function () {
const tourDriver = new Driver({
animate: false,
opacity: 0.8,
padding: 5,
showButtons: true,
});
tourDriver.defineSteps([
const tourSteps = [
{
element: '#driver-demo-head',
popover: {
title: 'Before we start',
description: 'This is just one use-case, make sure to check out the rest of the docs below.',
nextBtnText: 'Okay, Start!',
},
},
{
nextBtnText: 'Okay, Start!'
}
}, {
element: '#logo_emoji',
popover: {
title: 'Focus Anything',
description: 'You can use it to highlight literally anything, images, text, div, span, li etc.',
position: 'bottom',
},
},
{
position: 'bottom'
}
}, {
element: '#name_driver',
popover: {
title: 'Why Driver?',
description: 'Because it lets you drive the user across the page',
position: 'bottom',
},
},
{
description: 'Because it let\'s you drive the user across the page',
position: 'bottom'
}
}, {
element: '#driver-demo-head',
popover: {
title: 'Lets talk features',
description: 'You may leave your mouse and use the <strong>arrow keys</strong> to move next and back or <strong>escape key</strong> anytime to close this',
position: 'bottom',
},
},
{
position: 'bottom'
}
}, {
element: '#highlight_feature',
popover: {
title: 'Highlight Feature',
description: 'You may use it to highlight single elements (with or without popover) e.g. like facebook does while creating posts'
}
},
{
}, {
element: '#feature_introductions_feature',
popover: {
title: 'Feature Introductions',
description: 'With it\'s powerful API you can use it to make programmatic or user driven feature introductions',
position: 'bottom',
position: 'bottom'
}
},
{
}, {
element: '#focus_shifters_feature',
popover: {
title: 'Focus Shifters',
description: 'If some element or part of the page needs user\'s interaction, you can just call the highlight method. Driver will take care of driving the user there',
position: 'bottom',
position: 'bottom'
}
},
{
}, {
element: '#customizable_feature',
popover: {
title: 'Highly Customizable',
description: 'Driver has a powerful API allowing you to customize the experience as much as you can.',
position: 'bottom',
position: 'bottom'
}
},
{
}, {
element: '#keyboard_feature',
popover: {
title: 'User Friendly',
description: 'Your users can control it with the arrow keys on keyboard, or escape to close it',
position: 'bottom',
position: 'bottom'
}
},
{
}, {
element: '#free_use_feature',
popover: {
title: 'MIT License',
description: 'I believe in open=source and thus Driver is completely free for both personal or commercial use'
description: 'I believe in open-source and thus Driver is completely free for both personal or commercial use'
}
},
{
}, {
element: '#lightweight_feature',
popover: {
title: 'Only ~4KB',
description: 'Driver is free of bloat and written in Vanilla JS. There is no external dependency at all, thus keeping it smaller in size.'
}
},
{
}, {
element: '#examples_section',
popover: {
title: 'Usage Examples',
description: 'Have a look at the usage examples and see how you can use it.'
}
},
{
}, {
element: '#driver-demo-head',
popover: {
title: 'Quick Tour Ends',
description: 'This was just a sneak peak, have a look at the API section and examples to learn more!',
},
},
]);
description: 'This was just a sneak peak, have a look at the API section and examples to learn more!'
}
}
];
const animatedTourDriver = new Driver({
animate: true,
opacity: 0.8,
padding: 5,
showButtons: true,
});
const boringTourDriver = new Driver({
animate: false,
opacity: 0.8,
padding: 5,
showButtons: true,
});
boringTourDriver.defineSteps(tourSteps);
animatedTourDriver.defineSteps(tourSteps);
document.querySelector('#animated-tour')
.addEventListener('click', () => {
animatedTourDriver.start();
});
document.querySelector('.btn__example')
document.querySelector('#boring-tour')
.addEventListener('click', () => {
tourDriver.start();
boringTourDriver.start();
});
......
......@@ -9,7 +9,7 @@ img.emoji {
}
.page-wrap {
width: 500px;
width: 725px;
margin: 50px auto;
background: white;
padding: 10px 30px;
......@@ -28,14 +28,24 @@ img.emoji {
padding: 0 18px;
height: 40px;
line-height: 40px;
border-radius: 20px;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
font-weight: 500;
width: 240px;
width: 195px;
font-size: 17px;
margin: auto;
display: block;
display: inline-block;
&.btn-right {
margin-left: -5px;
border-radius: 0 8px 8px 0;
filter: grayscale(2);
border-left: 1px solid #2e2e30;
}
&.btn-left {
border-radius: 8px 0 0 8px;
}
}
a.btn__run-demo {
......@@ -70,6 +80,12 @@ section {
position: relative;
}
}
.tagline {
width: 450px;
margin: 0 auto 25px;
text-align: center;
}
}
.section__examples {
......
......@@ -15,9 +15,11 @@
<div class="page-wrap">
<section class="section__header" id="driver-demo-head">
<h1><span id="logo_emoji" class="emoji">👨‍🔧️</span> <span id="name_driver">Driver</span></h1>
<p class="text-muted">A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the
<p class="text-muted tagline">Light-weight, no-dependency, vanilla JavaScript engine to drive user's focus across the
page</p>
<a href="javascript:void(0)" class="btn btn__example btn__dark">Quick Tour</a>
<a id="animated-tour" href="javascript:void(0)" class="btn btn__example btn__dark btn-left">With Animation</a>
<a id="boring-tour" href="javascript:void(0)" class="btn btn__example btn__dark btn-right">without Animation</a>
</section>
<blockquote>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册