Skip to content

Commit 7aca363

Browse files
AndVikVinAndVikVin
committed
feat:add previuos step option
1 parent d560420 commit 7aca363

File tree

3 files changed

+150
-32
lines changed

3 files changed

+150
-32
lines changed

‎src/enjoyhint.js‎

Lines changed: 41 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,9 @@
5555
onNextClick: function() {
5656
nextStep();
5757
},
58-
58+
onPrevClick: function(){
59+
prevStep();
60+
},
5961
onSkipClick: function() {
6062
options.onSkip();
6163
skipAll();
@@ -85,30 +87,34 @@
8587
};
8688

8789
function hideCurrentHint(){
88-
$body.enjoyhint('render_circle', []);
89-
$('#enjoyhint_label').remove();
90-
$('#enjoyhint_arrpw_line').remove();
91-
$body.enjoyhint('hide_next');
92-
$body.enjoyhint('hide_skip');
90+
$body.enjoyhint("render_circle", []);
91+
$("#enjoyhint_label").remove();
92+
$("#enjoyhint_arrpw_line").remove();
93+
$body.enjoyhint("hide_prev");
94+
$body.enjoyhint("hide_next");
95+
$body.enjoyhint("hide_skip");
9396
};
94-
97+
9598
var stepAction = function() {
9699
if (!(data && data[current_step])) {
97100
$body.enjoyhint("hide");
98101
options.onEnd();
99102
destroyEnjoy();
100103
return;
101104
}
102-
105+
103106
options.onNext();
104107

105108
var $enjoyhint = $(".enjoyhint");
106109

107110
$enjoyhint.removeClass("enjoyhint-step-" + current_step);
108111
$enjoyhint.removeClass("enjoyhint-step-" + (current_step + 1));
112+
$enjoyhint.removeClass("enjoyhint-step-" + (current_step + 2));
109113
$enjoyhint.addClass("enjoyhint-step-" + (current_step + 1));
110114

111115
var step_data = data[current_step];
116+
117+
var scrollSpeed = step_data.scrollAnimationSpeed;
112118

113119
if (
114120
step_data.onBeforeStart &&
@@ -142,25 +148,30 @@
142148
setTimeout(function() {
143149
that.clear();
144150
}, 250);
145-
151+
146152
var isHintInViewport = $(step_data.selector).get(0).getBoundingClientRect();
147153
if(isHintInViewport.top < 0 || isHintInViewport.bottom > (window.innerHeight || document.documentElement.clientHeight)){
148154
hideCurrentHint();
149155
$(document.body).scrollTo(step_data.selector, step_data.scrollAnimationSpeed || 250, {offset: -200});
150156
}
157+
else {
158+
// if previous button has been clicked and element are in viewport to prevent custom step scrollAnimationSpeed set scrollSpeed to default
159+
scrollSpeed = 250;
160+
}
151161

152162
setTimeout(function() {
153163
var $element = $(step_data.selector);
154164
var event = makeEventName(step_data.event);
155-
156165
$body.enjoyhint("show");
157-
$body.enjoyhint("hide_next");
158166
$event_element = $element;
159167

160168
if (step_data.event_selector) {
161169
$event_element = $(step_data.event_selector);
162170
}
163-
171+
172+
$event_element.off(event)
173+
$element.off("keydown");
174+
164175
if (!step_data.event_type && step_data.event == "key") {
165176
$element.keydown(function(event) {
166177
if (event.which == step_data.keyCode) {
@@ -170,18 +181,23 @@
170181
});
171182
}
172183

173-
if (step_data.showNext == true) {
174-
$body.enjoyhint("show_next");
184+
if (step_data.showNext !== true) {
185+
$body.enjoyhint("hide_next");
175186
}
176-
187+
188+
$body.enjoyhint("hide_prev");
189+
190+
if(current_step !== 0) {
191+
$body.enjoyhint("show_prev");
192+
}
193+
194+
177195
if (step_data.showSkip == false) {
178196
$body.enjoyhint("hide_skip");
179197
} else {
180198
$body.enjoyhint("show_skip");
181199
}
182200

183-
if (step_data.showSkip == true) {
184-
}
185201

186202
if (step_data.nextButton) {
187203
var $nextBtn = $(".enjoyhint_next_btn");
@@ -208,12 +224,9 @@
208224
case "click":
209225
break;
210226
}
211-
212227
current_step++;
213228
stepAction();
214-
215229
return;
216-
break;
217230

218231
case "custom":
219232
on(step_data.event, function() {
@@ -235,12 +248,10 @@
235248
}
236249

237250
current_step++;
238-
$(this).off(event);
239-
240251
stepAction(); // clicked
241252
});
242253
}
243-
254+
244255
var max_habarites = Math.max(
245256
$element.outerWidth(),
246257
$element.outerHeight()
@@ -280,14 +291,20 @@
280291
}
281292

282293
$body.enjoyhint("render_label_with_shape", shape_data, that.stop);
283-
}, step_data.scrollAnimationSpeed + 20 || 270);
294+
295+
}, scrollSpeed + 20 || 270);
284296
}, timeout);
285297
};
286298

287299
var nextStep = function() {
288300
current_step++;
289301
stepAction();
290302
};
303+
304+
var prevStep = function() {
305+
current_step--;
306+
stepAction();
307+
};
291308

292309
var skipAll = function() {
293310
var step_data = data[current_step];

‎src/jquery.enjoyhint.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,60 @@
7474
border-color 0.3s cubic-bezier(0, 0, 0, 0);
7575
}
7676

77+
.enjoyhint_prev_btn {
78+
min-width: 100px;
79+
position: absolute;
80+
z-index: 1012;
81+
/*display: none;*/
82+
pointer-events: all;
83+
-webkit-box-sizing: content-box;
84+
-moz-box-sizing: content-box;
85+
box-sizing: content-box;
86+
height: 40px;
87+
cursor: pointer;
88+
margin: 0 auto;
89+
border: 2px solid rgb(30, 205, 151);
90+
-webkit-border-radius: 40px;
91+
border-radius: 40px;
92+
font: normal normal normal 17px/40px "Advent Pro", Helvetica, sans-serif;
93+
color: rgb(30, 205, 151);
94+
text-align: center;
95+
-o-text-overflow: clip;
96+
text-overflow: clip;
97+
letter-spacing: 1px;
98+
background: rgba(0, 0, 0, 0);
99+
-webkit-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0),
100+
color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0),
101+
border-width 0.3s cubic-bezier(0, 0, 0, 0),
102+
border-color 0.3s cubic-bezier(0, 0, 0, 0);
103+
-moz-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0),
104+
color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0),
105+
border-width 0.3s cubic-bezier(0, 0, 0, 0),
106+
border-color 0.3s cubic-bezier(0, 0, 0, 0);
107+
-o-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0),
108+
color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0),
109+
border-width 0.3s cubic-bezier(0, 0, 0, 0),
110+
border-color 0.3s cubic-bezier(0, 0, 0, 0);
111+
transition: background-color 0.3s cubic-bezier(0, 0, 0, 0),
112+
color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0),
113+
border-width 0.3s cubic-bezier(0, 0, 0, 0),
114+
border-color 0.3s cubic-bezier(0, 0, 0, 0);
115+
}
116+
117+
.enjoyhint_prev_btn:hover {
118+
color: rgba(255, 255, 255, 1);
119+
background: rgb(30, 205, 151);
120+
}
121+
122+
.enjoyhint_prev_btn:active {
123+
border: 2px solid rgba(33, 224, 163, 1);
124+
background: rgba(33, 224, 163, 1);
125+
-webkit-transition: none;
126+
-moz-transition: none;
127+
-o-transition: none;
128+
transition: none;
129+
}
130+
77131
.enjoyhint_next_btn:hover {
78132
color: rgba(255, 255, 255, 1);
79133
background: rgb(30, 205, 151);

‎src/jquery.enjoyhint.js‎

Lines changed: 55 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
3939
var defaults = {
4040
onNextClick: function() {},
4141
onSkipClick: function() {},
42+
onPrevClick: function() {},
4243

4344
animation_time: 800
4445
};
@@ -78,6 +79,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
7879
skip_btn: "enjoyhint_skip_btn",
7980
close_btn: "enjoyhint_close_btn",
8081
next_btn: "enjoyhint_next_btn",
82+
previous_btn: "enjoyhint_prev_btn",
8183
main_canvas: "enjoyhint_canvas",
8284
main_svg: "enjoyhint_svg",
8385
svg_wrapper: "enjoyhint_svg_wrapper",
@@ -219,6 +221,14 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
219221
that.options.onSkipClick();
220222
});
221223

224+
that.$prev_btn = $("<div>", { class: that.cl.previous_btn })
225+
.appendTo(that.enjoyhint)
226+
.html("Previous")
227+
.click(function(e) {
228+
that.options.onPrevClick();
229+
});
230+
231+
222232
that.$canvas.mousedown(function(e) {
223233
$("canvas").css({ left: "4000px" });
224234

@@ -500,6 +510,16 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
500510
that.nextBtn = "hide";
501511
};
502512

513+
that.hidePrevBtn = function() {
514+
that.$prev_btn.addClass(that.cl.hide);
515+
that.prevBtn = "hide";
516+
};
517+
518+
that.showPrevBtn = function() {
519+
that.$prev_btn.removeClass(that.cl.hide);
520+
that.prevBtn = "show";
521+
};
522+
503523
that.showNextBtn = function() {
504524
that.$next_btn.removeClass(that.cl.hide);
505525
that.nextBtn = "show";
@@ -1051,30 +1071,41 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
10511071
});
10521072

10531073
setTimeout(function(){
1054-
var summoryButtonWidth = that.$next_btn.width() + that.$skip_btn.width() + 20;
1055-
var distance = label_x - 20;
1074+
var summoryButtonWidth = that.$next_btn.width() + that.$skip_btn.width() + that.$prev_btn.width() + 30;
1075+
var distance = label_x - 100;
10561076
var ver_button_position = label_y + label_height + 40
10571077

10581078
if (summoryButtonWidth + label_x > x_to) {
10591079
distance = x_to >= x_from ? x_to + 20 : label_x + label_width/2
10601080
}
10611081

1062-
if (summoryButtonWidth + distance > window.innerWidth) {
1063-
distance = label_x;
1082+
if (summoryButtonWidth + distance > window.innerWidth || distance < 0) {
1083+
distance = 10;
10641084
ver_button_position = y_from < y_to ? label_y - 80 : label_y + label_height + 40
1065-
}
1085+
}
10661086

10671087
that.$next_btn.css({
10681088
left: distance,
10691089
top: ver_button_position
10701090
});
10711091

1072-
var left_skip = distance + that.$next_btn.width() + 10;
1092+
var prev_skip = distance + that.$next_btn.width() + 10;
1093+
var left_skip = distance + that.$next_btn.width() + that.$prev_btn.width() + 20;
10731094

1074-
if (that.nextBtn == "hide") {
1075-
left_skip = distance;
1095+
if (that.nextBtn === "hide") {
1096+
prev_skip = distance;
1097+
left_skip = distance + that.$prev_btn.width() + 10;
10761098
}
10771099

1100+
if(that.prevBtn === "hide") {
1101+
left_skip = distance + that.$next_btn.width() + 10
1102+
}
1103+
1104+
that.$prev_btn.css({
1105+
left: prev_skip,
1106+
top: ver_button_position
1107+
})
1108+
10781109
that.$skip_btn.css({
10791110
left: left_skip,
10801111
top: ver_button_position
@@ -1142,6 +1173,22 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
11421173
return this;
11431174
},
11441175

1176+
hide_prev: function() {
1177+
this.each(function() {
1178+
this.enjoyhint_obj.hidePrevBtn();
1179+
});
1180+
1181+
return this;
1182+
},
1183+
1184+
show_prev: function() {
1185+
this.each(function() {
1186+
this.enjoyhint_obj.showPrevBtn();
1187+
});
1188+
1189+
return this;
1190+
},
1191+
11451192
show_next: function() {
11461193
this.each(function() {
11471194
this.enjoyhint_obj.showNextBtn();

0 commit comments

Comments
 (0)