Skip to content

Commit 609008f

Browse files
author
SoorajSNBlaze333
committed
v 0.2.3
1 parent 915eed8 commit 609008f

File tree

7 files changed

+113
-13
lines changed

7 files changed

+113
-13
lines changed

‎dist/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
left: 0;
88
overflow: hidden;
99
transition-duration: 300ms;
10-
z-index: 100;
10+
z-index: 9999;
1111
}
1212

1313
.tooltip-helper-confirmation {

‎docs/content/_index.md‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ title: "Tooltip Sequence"
1919

2020
<div class="mb-4 text-center">
2121
<div style="font-weight: 200;" class="mt-1 mb-2">To take a quick demo of the package/plugin, please click the button below</div>
22-
<button id="demo-btn" onclick="return handleClick()" class="btn btn-dark mt-1">Demo</button>
22+
<button id="demo-btn" onclick="return handleClick(event)" class="btn btn-dark mt-1">Demo</button>
2323
</div>
2424

2525
<div class="mt-3 mb-3">
@@ -79,6 +79,28 @@ createSequence(options);
7979
```
8080
<div style="font-weight: 200;">Infinite Customizations available. You can customize any element that is created by overriding the classes. Customizations are only limited by the creativity of the designer</div>
8181

82+
83+
<h1 class="display-4 mt-3">Version 0.2.3 ~ Events are here</h1>
84+
85+
<div class="dropdown" id="dropdown-trigger">
86+
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
87+
Dropdown button
88+
</button>
89+
<div id="dropdown-menu" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
90+
<a id="dropdown-item-action" class="dropdown-item" href="#">Action</a>
91+
<a class="dropdown-item" href="#">Another action</a>
92+
<a class="dropdown-item" href="#">Something else here</a>
93+
</div>
94+
</div>
95+
96+
<button class="btn btn-dark mt-3" onclick="return handleEventsBtnClick(event)">Events Demo</button>
97+
98+
99+
100+
101+
102+
103+
82104
## Development
83105

84106
You need [Hugo](https://gohugo.io/) to run the dev server. If you have [Homebrew](https://brew.sh/) you can do the following:

‎docs/layouts/_default/baseof.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,13 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
77
<title itemprop="name">{{ .Title }}</title>
88
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
9-
<!-- <link rel="stylesheet" href="/main.css" />
10-
<script src="/main.js"></script> -->
11-
<link rel="stylesheet" href="https://unpkg.com/tooltip-sequence@0.2.2/dist/index.css">
12-
<script src="https://unpkg.com/tooltip-sequence@0.2.2/dist/index.min.js"></script>
9+
<link rel="stylesheet" href="/main.css" />
10+
<script src="/main.js"></script>
11+
<!-- <link rel="stylesheet" href="https://unpkg.com/tooltip-sequence@0.2.2/dist/index.css">
12+
<script src="https://unpkg.com/tooltip-sequence@0.2.2/dist/index.min.js"></script> -->
13+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
14+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
15+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
1316
</head>
1417
<body class="bg-white" style="height: 100vh; width: 100vw; margin: 0; padding: 0">
1518
<main class="container-fluid h-100 w-100 p-0 m-0" id="main">

‎docs/layouts/index.html‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,37 @@
6565
description: "<div>Hope you like this package. If you do, please make sure to star this repo and share it with people who need something like this. Thank you ❤️</div>"
6666
}]
6767
};
68-
const handleClick = function() {
68+
const handleClick = function(event) {
69+
event.preventDefault();
6970
return createSequence(options);
7071
};
72+
73+
const eventOptions = {
74+
welcomeText: "This is a demo of the components in this page",
75+
confirmText: "Start",
76+
cancelText: "Later",
77+
sequence: [{
78+
element: '#dropdownMenuButton',
79+
description: '<div>This is a test</div>',
80+
events: {
81+
on: function(data) {
82+
$('#dropdown-trigger').dropdown('toggle')
83+
}
84+
}
85+
}, {
86+
element: '#dropdown-item-action',
87+
description: '<div>This is a test</div>',
88+
events: {
89+
on: function(data) {
90+
console.log(data)
91+
}
92+
}
93+
}]
94+
};
95+
const handleEventsBtnClick = function(event) {
96+
event.preventDefault();
97+
return createSequence(eventOptions);
98+
};
7199
</script>
72100

73101
{{ end }}

‎docs/static/main.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
left: 0;
88
overflow: hidden;
99
transition-duration: 300ms;
10-
z-index: 100;
10+
z-index: 9999;
1111
}
1212

1313
.tooltip-helper-confirmation {

‎docs/static/main.js‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ var createSequence = (function () {
2626
var sequenceIndex = 0;
2727

2828
const createStage = (sequence, originalSequence) => {
29-
const { element, description } = sequence;
29+
const { element, description, events } = sequence;
3030
const backdrop = getElementById("tooltip-helper-backdrop");
3131

3232
let elem = getElement(element);
@@ -39,6 +39,7 @@ var createSequence = (function () {
3939
x: elemBoundaries.left < offset ? offset : Math.round(elemBoundaries.left),
4040
y: Math.round(elemBoundaries.top + elemBoundaries.height + offset)
4141
};
42+
// eventBefore(sequence);
4243

4344
let activeElement = getElement("#tooltip-helper-backdrop .tooltip-helper-active");
4445
if (!activeElement) {
@@ -66,7 +67,11 @@ var createSequence = (function () {
6667
if (sequenceIndex === 0) {
6768
prevBtn.setAttribute('disabled', true);
6869
prevBtn.classList.add("tooltip-disabled-btn");
69-
nextBtn.innerText = "Next";
70+
if (originalSequence.length === 1) {
71+
nextBtn.innerText = "Finish";
72+
} else {
73+
nextBtn.innerText = "Next";
74+
}
7075
} else {
7176
prevBtn.removeAttribute('disabled', true);
7277
prevBtn.classList.remove("tooltip-disabled-btn");
@@ -89,7 +94,7 @@ var createSequence = (function () {
8994
position.y = Math.round((elemBoundaries.top - descriptionElement.offsetHeight) - offset);
9095
}
9196
descriptionElement.style.transform = "translate3d(" + position.x + "px, " + position.y + "px, 0px)";
92-
};
97+
if (events.hasOwnProperty('on')) { events.on(sequence); }};
9398

9499
const startSequence = (sequence) => {
95100
let currentSequence = sequence[sequenceIndex];
@@ -108,7 +113,24 @@ var createSequence = (function () {
108113
sequenceIndex = 0;
109114
};
110115

116+
// const eventBefore = (currentSequence) => {
117+
// const { element, events } = currentSequence;
118+
// let elem = getElement(element);
119+
// if (elem && events) {
120+
// if (events.hasOwnProperty('before')) events.before();
121+
// }
122+
// }
123+
124+
// const eventAfter = (prevSequence) => {
125+
// const { element, events } = prevSequence;
126+
// let elem = getElement(element);
127+
// if (elem && events) {
128+
// if (events.hasOwnProperty('after')) events.after();
129+
// }
130+
// }
131+
111132
const next = (sequence) => {
133+
// eventAfter(sequence[sequenceIndex]);
112134
sequenceIndex += 1;
113135
if (sequenceIndex <= sequence.length - 1) {
114136
return createStage(sequence[sequenceIndex], sequence);
@@ -122,6 +144,7 @@ var createSequence = (function () {
122144

123145
const prev = (sequence) => {
124146
sequenceIndex -= 1;
147+
// eventBefore(sequence[sequenceIndex]);
125148
if (sequenceIndex >= 0) {
126149
return createStage(sequence[sequenceIndex], sequence);
127150
} else {

‎index.js‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const offset = 10;
55
var sequenceIndex = 0;
66

77
const createStage = (sequence, originalSequence) => {
8-
const { element, description } = sequence;
8+
const { element, description, events } = sequence;
99
const backdrop = getElementById("tooltip-helper-backdrop");
1010

1111
let elem = getElement(element);
@@ -18,6 +18,7 @@ const createStage = (sequence, originalSequence) => {
1818
x: elemBoundaries.left < offset ? offset : Math.round(elemBoundaries.left),
1919
y: Math.round(elemBoundaries.top + elemBoundaries.height + offset)
2020
}
21+
// eventBefore(sequence);
2122

2223
let activeElement = getElement("#tooltip-helper-backdrop .tooltip-helper-active");
2324
if (!activeElement) {
@@ -45,7 +46,11 @@ const createStage = (sequence, originalSequence) => {
4546
if (sequenceIndex === 0) {
4647
prevBtn.setAttribute('disabled', true);
4748
prevBtn.classList.add("tooltip-disabled-btn");
48-
nextBtn.innerText = "Next";
49+
if (originalSequence.length === 1) {
50+
nextBtn.innerText = "Finish";
51+
} else {
52+
nextBtn.innerText = "Next";
53+
}
4954
} else {
5055
prevBtn.removeAttribute('disabled', true);
5156
prevBtn.classList.remove("tooltip-disabled-btn");
@@ -68,6 +73,7 @@ const createStage = (sequence, originalSequence) => {
6873
position.y = Math.round((elemBoundaries.top - descriptionElement.offsetHeight) - offset);
6974
}
7075
descriptionElement.style.transform = "translate3d(" + position.x + "px, " + position.y + "px, 0px)";
76+
if (events.hasOwnProperty('on')) { events.on(sequence) };
7177
};
7278

7379
const startSequence = (sequence) => {
@@ -87,7 +93,24 @@ const endSequence = () => {
8793
sequenceIndex = 0;
8894
};
8995

96+
// const eventBefore = (currentSequence) => {
97+
// const { element, events } = currentSequence;
98+
// let elem = getElement(element);
99+
// if (elem && events) {
100+
// if (events.hasOwnProperty('before')) events.before();
101+
// }
102+
// }
103+
104+
// const eventAfter = (prevSequence) => {
105+
// const { element, events } = prevSequence;
106+
// let elem = getElement(element);
107+
// if (elem && events) {
108+
// if (events.hasOwnProperty('after')) events.after();
109+
// }
110+
// }
111+
90112
const next = (sequence) => {
113+
// eventAfter(sequence[sequenceIndex]);
91114
sequenceIndex += 1;
92115
if (sequenceIndex <= sequence.length - 1) {
93116
return createStage(sequence[sequenceIndex], sequence);
@@ -101,6 +124,7 @@ const next = (sequence) => {
101124

102125
const prev = (sequence) => {
103126
sequenceIndex -= 1;
127+
// eventBefore(sequence[sequenceIndex]);
104128
if (sequenceIndex >= 0) {
105129
return createStage(sequence[sequenceIndex], sequence);
106130
} else {

0 commit comments

Comments
 (0)