Skip to content

Commit 775bc34

Browse files
author
SoorajSNBlaze333
committed
quit button
1 parent 7067de5 commit 775bc34

File tree

9 files changed

+104
-16
lines changed

9 files changed

+104
-16
lines changed

‎README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,40 @@
22

33
A Sequential tooltip generator, that guides your users to new or existing features, by taking them on a tour across the features that you want them to see and be helped on.
44

5+
6+
# unpkg
7+
8+
In your `base.html` add the unpkg to the head tag
9+
```html
10+
<link rel="stylesheet" href="https://unpkg.com/tooltip-sequence@latest/dist/index.css">
11+
<script src="https://unpkg.com/tooltip-sequence@latest/dist/index.min.js"></script>
12+
13+
<script>
14+
const options = {
15+
welcomeText: "Let us take you on a quick tour of the page!",
16+
confirmText: "Let's start",
17+
cancelText: "Maybe later",
18+
sequence: [
19+
{
20+
element: "#brand-name",
21+
description: "This is the brand name of the App.",
22+
},
23+
{
24+
element: "#home-nav",
25+
description: "Click here to go to Home page",
26+
},
27+
{
28+
element: "#edit-profile",
29+
description: "This is the edit profile button",
30+
},
31+
],
32+
};
33+
createSequence(options);
34+
</script>
35+
```
36+
37+
# npm
38+
539
## Installation
640

741
Install the package using

‎dist/index.css

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -105,20 +105,36 @@
105105
color: #fff;
106106
}
107107

108+
.tooltip-helper-end-sequence {
109+
background-color: rgb(131, 131, 131);
110+
border: none;
111+
border-radius: 2px;
112+
outline: none;
113+
padding: 3px 10px;
114+
color: #fff;
115+
display: flex;
116+
justify-content: center;
117+
align-items: center;
118+
}
119+
108120
.tooltip-disabled-btn {
109-
background-color: rgb(78, 78, 78) !important;
121+
background-color: rgb(92, 92, 92) !important;
110122
user-select: none !important;
111123
color: rgba(255, 255, 255, 0.671);
112124
}
113125

114-
.mt-1 {
115-
margin-top: 5px;
116-
}
117-
118126
.mt-2 {
119127
margin-top: 10px;
120128
}
121129

130+
.mb-2 {
131+
margin-bottom: 10px;
132+
}
133+
122134
.ml-2 {
123135
margin-left: 10px;
136+
}
137+
138+
.stop-scroll {
139+
overflow: hidden;
124140
}

‎dist/index.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ const confirmationHTML = `<div id="tooltip-helper-confirmation" class="tooltip-h
1111

1212
const prevButtonHTML = `<button id="tooltip-helper-prev-sequence" class="tooltip-helper-prev-sequence mt-2">Previous</button>`;
1313

14-
const nextButtonHTML = `<button id="tooltip-helper-next-sequence" class="tooltip-helper-next-sequence mt-2 ml-2">Next</button>`;const offset = 10;
14+
const nextButtonHTML = `<button id="tooltip-helper-next-sequence" class="tooltip-helper-next-sequence mt-2 ml-2">Next</button>`;
15+
16+
const closeButtonHTML = `<button id="tooltip-helper-end-sequence" class="tooltip-helper-end-sequence">Quit</button>`;const offset = 10;
1517
var sequenceIndex = 0;
1618

1719
const createStage = (sequence, originalSequence) => {
@@ -20,6 +22,7 @@ const createStage = (sequence, originalSequence) => {
2022

2123
let elem = getElement(element);
2224
if (!elem) return endSequence();
25+
getElement('body').classList.add('stop-scroll');
2326
elem.scrollIntoView({ behaviour: 'smooth', block: 'center' });
2427
let styles = getComputedStyle(elem);
2528
let elemBoundaries = elem.getBoundingClientRect();
@@ -44,7 +47,8 @@ const createStage = (sequence, originalSequence) => {
4447
if (!descriptionElement) {
4548
descriptionElement = document.createElement("div");
4649
descriptionElement.classList.add("tooltip-helper-active-description");
47-
descriptionElement.innerHTML += "<p id='tooltip-helper-active-description-text' class='m-0'>" + description + "</p>";
50+
descriptionElement.innerHTML += closeButtonHTML;
51+
descriptionElement.innerHTML += "<p id='tooltip-helper-active-description-text' class='mt-2 mb-2'>" + description + "</p>";
4852
descriptionElement.innerHTML += prevButtonHTML;
4953
descriptionElement.innerHTML += nextButtonHTML;
5054
backdrop.append(descriptionElement);
@@ -77,6 +81,7 @@ const startSequence = (sequence) => {
7781
};
7882

7983
const endSequence = () => {
84+
getElement('body').classList.remove('stop-scroll');
8085
getElementById("tooltip-helper-backdrop").style.background = "transparent";
8186
const element = getElementById("tooltip-helper-backdrop");
8287
element.parentNode.removeChild(element);
@@ -119,6 +124,7 @@ const createSequence = (data) => {
119124
case 'tooltip-helper-confirmation-yes': return startSequence(sequence);
120125
case 'tooltip-helper-next-sequence': return next(sequence);
121126
case 'tooltip-helper-prev-sequence': return prev(sequence);
127+
case 'tooltip-helper-end-sequence': return endSequence();
122128
case 'tooltip-helper-confirmation-no': return endSequence();
123129
default: return;
124130
}

‎dist/index.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.

‎docs/layouts/_default/baseof.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,11 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
66
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
77
<title itemprop="name">{{ .Title }}</title>
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
89
<link rel="stylesheet" href="/main.css" />
910
<script src="/main.js"></script>
11+
<!-- <link rel="stylesheet" href="https://unpkg.com/tooltip-sequence@0.2.0/dist/index.css">
12+
<script src="https://unpkg.com/tooltip-sequence@0.2.0/dist/index.min.js"></script> -->
1013
</head>
1114
<body class="bg-white">
1215
<main class="container mx-auto my-12 px-3 md:px-1" id="main">

‎docs/static/main.css

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -105,20 +105,36 @@
105105
color: #fff;
106106
}
107107

108+
.tooltip-helper-end-sequence {
109+
background-color: rgb(131, 131, 131);
110+
border: none;
111+
border-radius: 2px;
112+
outline: none;
113+
padding: 3px 10px;
114+
color: #fff;
115+
display: flex;
116+
justify-content: center;
117+
align-items: center;
118+
}
119+
108120
.tooltip-disabled-btn {
109-
background-color: rgb(78, 78, 78) !important;
121+
background-color: rgb(92, 92, 92) !important;
110122
user-select: none !important;
111123
color: rgba(255, 255, 255, 0.671);
112124
}
113125

114-
.mt-1 {
115-
margin-top: 5px;
116-
}
117-
118126
.mt-2 {
119127
margin-top: 10px;
120128
}
121129

130+
.mb-2 {
131+
margin-bottom: 10px;
132+
}
133+
122134
.ml-2 {
123135
margin-left: 10px;
136+
}
137+
138+
.stop-scroll {
139+
overflow: hidden;
124140
}

‎docs/static/main.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ var createSequence = (function () {
1818

1919
const nextButtonHTML = `<button id="tooltip-helper-next-sequence" class="tooltip-helper-next-sequence mt-2 ml-2">Next</button>`;
2020

21+
const closeButtonHTML = `<button id="tooltip-helper-end-sequence" class="tooltip-helper-end-sequence">Quit</button>`;
22+
2123
const offset = 10;
2224
var sequenceIndex = 0;
2325

@@ -27,6 +29,7 @@ var createSequence = (function () {
2729

2830
let elem = getElement(element);
2931
if (!elem) return endSequence();
32+
getElement('body').classList.add('stop-scroll');
3033
elem.scrollIntoView({ behaviour: 'smooth', block: 'center' });
3134
let styles = getComputedStyle(elem);
3235
let elemBoundaries = elem.getBoundingClientRect();
@@ -51,7 +54,8 @@ var createSequence = (function () {
5154
if (!descriptionElement) {
5255
descriptionElement = document.createElement("div");
5356
descriptionElement.classList.add("tooltip-helper-active-description");
54-
descriptionElement.innerHTML += "<p id='tooltip-helper-active-description-text' class='m-0'>" + description + "</p>";
57+
descriptionElement.innerHTML += closeButtonHTML;
58+
descriptionElement.innerHTML += "<p id='tooltip-helper-active-description-text' class='mt-2 mb-2'>" + description + "</p>";
5559
descriptionElement.innerHTML += prevButtonHTML;
5660
descriptionElement.innerHTML += nextButtonHTML;
5761
backdrop.append(descriptionElement);
@@ -84,6 +88,7 @@ var createSequence = (function () {
8488
};
8589

8690
const endSequence = () => {
91+
getElement('body').classList.remove('stop-scroll');
8792
getElementById("tooltip-helper-backdrop").style.background = "transparent";
8893
const element = getElementById("tooltip-helper-backdrop");
8994
element.parentNode.removeChild(element);
@@ -126,6 +131,7 @@ var createSequence = (function () {
126131
case 'tooltip-helper-confirmation-yes': return startSequence(sequence);
127132
case 'tooltip-helper-next-sequence': return next(sequence);
128133
case 'tooltip-helper-prev-sequence': return prev(sequence);
134+
case 'tooltip-helper-end-sequence': return endSequence();
129135
case 'tooltip-helper-confirmation-no': return endSequence();
130136
default: return;
131137
}

‎index.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { getElementById, getElement } from './src/utils/helpers';
2-
import { backdropHTML, nextButtonHTML, prevButtonHTML, confirmationHTML } from './src/utils/constants';
2+
import { backdropHTML, nextButtonHTML, prevButtonHTML, confirmationHTML, closeButtonHTML } from './src/utils/constants';
33

44
const offset = 10;
55
var sequenceIndex = 0;
@@ -10,6 +10,7 @@ const createStage = (sequence, originalSequence) => {
1010

1111
let elem = getElement(element);
1212
if (!elem) return endSequence();
13+
getElement('body').classList.add('stop-scroll');
1314
elem.scrollIntoView({ behaviour: 'smooth', block: 'center' });
1415
let styles = getComputedStyle(elem);
1516
let elemBoundaries = elem.getBoundingClientRect();
@@ -34,7 +35,8 @@ const createStage = (sequence, originalSequence) => {
3435
if (!descriptionElement) {
3536
descriptionElement = document.createElement("div");
3637
descriptionElement.classList.add("tooltip-helper-active-description");
37-
descriptionElement.innerHTML += "<p id='tooltip-helper-active-description-text' class='m-0'>" + description + "</p>";
38+
descriptionElement.innerHTML += closeButtonHTML;
39+
descriptionElement.innerHTML += "<p id='tooltip-helper-active-description-text' class='mt-2 mb-2'>" + description + "</p>";
3840
descriptionElement.innerHTML += prevButtonHTML;
3941
descriptionElement.innerHTML += nextButtonHTML;
4042
backdrop.append(descriptionElement);
@@ -67,6 +69,7 @@ const startSequence = (sequence) => {
6769
};
6870

6971
const endSequence = () => {
72+
getElement('body').classList.remove('stop-scroll');
7073
getElementById("tooltip-helper-backdrop").style.background = "transparent";
7174
const element = getElementById("tooltip-helper-backdrop");
7275
element.parentNode.removeChild(element);
@@ -109,6 +112,7 @@ const createSequence = (data) => {
109112
case 'tooltip-helper-confirmation-yes': return startSequence(sequence);
110113
case 'tooltip-helper-next-sequence': return next(sequence);
111114
case 'tooltip-helper-prev-sequence': return prev(sequence);
115+
case 'tooltip-helper-end-sequence': return endSequence();
112116
case 'tooltip-helper-confirmation-no': return endSequence();
113117
default: return;
114118
}

‎src/utils/constants.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,12 @@ const prevButtonHTML = `<button id="tooltip-helper-prev-sequence" class="tooltip
1212

1313
const nextButtonHTML = `<button id="tooltip-helper-next-sequence" class="tooltip-helper-next-sequence mt-2 ml-2">Next</button>`;
1414

15+
const closeButtonHTML = `<button id="tooltip-helper-end-sequence" class="tooltip-helper-end-sequence">Quit</button>`;
16+
1517
export {
1618
backdropHTML,
1719
confirmationHTML,
20+
closeButtonHTML,
1821
prevButtonHTML,
1922
nextButtonHTML
2023
}

0 commit comments

Comments
 (0)