Skip to content

Commit a52877a

Browse files
blackazarublackazaru
committed
-New and simplified description of EnjoyHint steps
-Auto scroll to the element -Can be installed -Possibility to hide or display the buttons showNext, showSkip. -HTML usage allowed in description - Destructor - Simplified property names - Grunt to compress and merge files - New examples
1 parent f9f6af0 commit a52877a

File tree

5 files changed

+229
-37
lines changed

5 files changed

+229
-37
lines changed

‎Gruntfile.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,21 @@ module.exports = function(grunt){
2727
module: true
2828
}
2929
}
30+
},
31+
cssmin: {
32+
combine: {
33+
files: {
34+
'enjoyhint.css': ['src/jquery.enjoyhint.css']
35+
}
36+
}
3037
}
3138
});
3239

3340
grunt.loadNpmTasks('grunt-contrib-uglify');
3441
grunt.loadNpmTasks('grunt-contrib-jshint');
3542
grunt.loadNpmTasks('grunt-contrib-concat');
43+
grunt.loadNpmTasks('grunt-contrib-cssmin');
3644

37-
grunt.registerTask("default", ["concat", "uglify"])
45+
grunt.registerTask("default", ["concat", "uglify", "cssmin"])
3846

3947
};

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,8 @@
2121
"bugs": {
2222
"url": "https://github.com/xbsoftware/enjoyhint/issues"
2323
},
24-
"homepage": "https://github.com/xbsoftware/enjoyhint"
24+
"homepage": "https://github.com/xbsoftware/enjoyhint",
25+
"devDependencies": {
26+
"grunt-contrib-cssmin": "^0.11.0"
27+
}
2528
}

‎src/enjoyhint.js‎

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ var EnjoyHint = function (_options) {
2121
var init = function () {
2222
if ($('.enjoyhint'))
2323
$('.enjoyhint').remove();
24+
$('body').css({'overflow':'hidden'});
25+
$(document).on("touchmove",lockTouch);
26+
2427
$body.enjoyhint({
2528
onNextClick: function () {
2629
current_step++;
@@ -36,14 +39,31 @@ var EnjoyHint = function (_options) {
3639
});
3740
};
3841

42+
var lockTouch = function(e) {
43+
e.preventDefault();
44+
};
45+
3946
var destroyEnjoy = function () {
4047
$body = $('body');
4148
$('.enjoyhint').remove();
49+
$("body").css({'overflow':'auto'});
50+
$(document).off("touchmove", lockTouch);
51+
4252
};
4353

54+
that.clear = function(){
55+
//Remove userClass and set default text
56+
$(".enjoyhint_next_btn").removeClass(that.nextUserClass);
57+
$(".enjoyhint_next_btn").text("Next");
58+
$(".enjoyhint_skip_btn").removeClass(that.skipUserClass);
59+
$(".enjoyhint_skip_btn").text("Skip");
60+
}
61+
4462
var $body = $('body');
4563
var stepAction = function () {
4664
if (data && data[current_step]) {
65+
$(".enjoyhint").removeClass("enjoyhint-step-"+current_step);
66+
$(".enjoyhint").addClass("enjoyhint-step-"+(current_step+1));
4767
var step_data = data[current_step];
4868
if (step_data.onBeforeStart && typeof step_data.onBeforeStart === 'function') {
4969
step_data.onBeforeStart();
@@ -62,7 +82,9 @@ var EnjoyHint = function (_options) {
6282
}
6383
}
6484
}
65-
85+
setTimeout(function(){
86+
that.clear();
87+
}, 250);
6688
$(document.body).scrollTo(step_data.selector, step_data.scrollAnimationSpeed || 250, {offset: -100});
6789
setTimeout(function () {
6890
var $element = $(step_data.selector);
@@ -82,6 +104,31 @@ var EnjoyHint = function (_options) {
82104
}
83105
});
84106
}
107+
if (step_data.showNext == true){
108+
$body.enjoyhint('show_next');
109+
}
110+
if (step_data.showSkip == false){
111+
$body.enjoyhint('hide_skip');
112+
}else{
113+
$body.enjoyhint('show_skip');
114+
}
115+
if (step_data.showSkip == true){
116+
117+
}
118+
119+
120+
if (step_data.nextButton){
121+
$(".enjoyhint_next_btn").addClass(step_data.nextButton.className || "");
122+
$(".enjoyhint_next_btn").text(step_data.nextButton.text || "Next");
123+
that.nextUserClass = step_data.nextButton.className
124+
}
125+
126+
if (step_data.skipButton){
127+
$(".enjoyhint_skip_btn").addClass(step_data.skipButton.className || "");
128+
$(".enjoyhint_skip_btn").text(step_data.skipButton.text || "Skip");
129+
that.skipUserClass = step_data.skipButton.className
130+
}
131+
85132
if (step_data.event_type) {
86133
switch (step_data.event_type) {
87134
case 'auto':
@@ -127,7 +174,7 @@ var EnjoyHint = function (_options) {
127174
var shape_margin = (step_data.margin !== undefined) ? step_data.margin : 10;
128175
var coords = {
129176
x: offset.left + Math.round(w / 2) ,
130-
y: offset.top + Math.round(h / 2) - $("body").scrollTop()
177+
y: offset.top + Math.round(h / 2) - $(document).scrollTop()
131178
};
132179
var shape_data = {
133180
center_x: coords.x,

‎src/jquery.enjoyhint.css‎

Lines changed: 126 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -34,33 +34,6 @@
3434
pointer-events: all;
3535
}
3636

37-
.enjoyhint_skip_btn{
38-
position:absolute;
39-
z-index: 1012;
40-
/*display: none;*/
41-
pointer-events: all;
42-
-webkit-box-sizing: content-box;
43-
-moz-box-sizing: content-box;
44-
box-sizing: content-box;
45-
width: 100px;
46-
height: 40px;
47-
cursor: pointer;
48-
margin: 0 auto;
49-
border: 2px solid rgb(30,205,151);
50-
-webkit-border-radius: 40px;
51-
border-radius: 40px;
52-
font: normal normal normal 17px/40px "Advent Pro", Helvetica, sans-serif;
53-
color: rgb(30, 205, 151);
54-
text-align: center;
55-
-o-text-overflow: clip;
56-
text-overflow: clip;
57-
letter-spacing: 1px;
58-
background: rgba(0,0,0,0);
59-
-webkit-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
60-
-moz-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
61-
-o-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
62-
transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
63-
}
6437
.enjoyhint_next_btn{
6538
position:absolute;
6639
z-index: 1012;
@@ -103,6 +76,129 @@
10376
transition: none;
10477
}
10578

79+
.enjoyhint_skip_btn{
80+
position:absolute;
81+
z-index: 1012;
82+
/*display: none;*/
83+
pointer-events: all;
84+
-webkit-box-sizing: content-box;
85+
-moz-box-sizing: content-box;
86+
box-sizing: content-box;
87+
width: 100px;
88+
height: 40px;
89+
cursor: pointer;
90+
margin: 0 auto;
91+
border: 2px solid rgb(30,205,151);
92+
-webkit-border-radius: 40px;
93+
border-radius: 40px;
94+
font: normal normal normal 17px/40px "Advent Pro", Helvetica, sans-serif;
95+
color: rgb(30, 205, 151);
96+
text-align: center;
97+
-o-text-overflow: clip;
98+
text-overflow: clip;
99+
letter-spacing: 1px;
100+
background: rgba(0,0,0,0);
101+
-webkit-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
102+
-moz-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
103+
-o-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
104+
transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
105+
}
106+
107+
.enjoyhint_skip_btn:hover{
108+
color: rgba(255,255,255,1);
109+
background: rgb(30, 205, 151);
110+
}
111+
112+
.enjoyhint_skip_btn:active{
113+
border: 2px solid rgba(33,224,163,1);
114+
background: rgba(33,224,163,1);
115+
-webkit-transition: none;
116+
-moz-transition: none;
117+
-o-transition: none;
118+
transition: none;
119+
}
120+
121+
.enjoyhint_close_btn {
122+
display: inline-block;
123+
position: absolute;
124+
z-index: 1012;
125+
pointer-events: all;
126+
-webkit-box-sizing: content-box;
127+
-moz-box-sizing: content-box;
128+
box-sizing: content-box;
129+
width: .3em;
130+
height: .3em;
131+
border: none;
132+
-webkit-border-radius: 1em;
133+
border-radius: 1em;
134+
font: 400 8em/normal Arial,Helvetica,sans-serif;
135+
color: rgba(0,0,0,1);
136+
-o-text-overflow: clip;
137+
text-overflow: clip;
138+
background: rgba(0,0,0,0);
139+
border: 2px solid rgba(33,224,163,1);
140+
}
141+
142+
.enjoyhint_close_btn::before {
143+
display: inline-block;
144+
-webkit-box-sizing: content-box;
145+
-moz-box-sizing: content-box;
146+
box-sizing: content-box;
147+
width: 29px;
148+
height: 2px;
149+
position: absolute;
150+
content: "";
151+
top: 16px;
152+
left: 3px;
153+
border: none;
154+
font: normal 100%/normal Arial,Helvetica,sans-serif;
155+
color: rgba(0,0,0,1);
156+
-o-text-overflow: clip;
157+
text-overflow: clip;
158+
background: #fff;
159+
text-shadow: none;
160+
-webkit-transform: rotateZ(45deg);
161+
transform: rotateZ(45deg);
162+
}
163+
164+
.enjoyhint_close_btn::after {
165+
display: inline-block;
166+
-webkit-box-sizing: content-box;
167+
-moz-box-sizing: content-box;
168+
box-sizing: content-box;
169+
width: 29px;
170+
height: 2px;
171+
position: absolute;
172+
content: "";
173+
top: 16px;
174+
left: 3px;
175+
border: none;
176+
font: normal 100%/normal Arial,Helvetica,sans-serif;
177+
color: rgba(0,0,0,1);
178+
-o-text-overflow: clip;
179+
text-overflow: clip;
180+
background: #fff;
181+
text-shadow: none;
182+
-webkit-transform: rotateZ(-45deg);
183+
transform: rotateZ(-45deg);
184+
}
185+
186+
187+
.enjoyhint_close_btn:hover{
188+
color: rgba(255,255,255,1);
189+
background: rgb(30, 205, 151);
190+
cursor: pointer;
191+
}
192+
193+
.enjoyhint_close_btn:active{
194+
border: 2px solid rgba(33,224,163,1);
195+
background: rgba(33,224,163,1);
196+
-webkit-transition: none;
197+
-moz-transition: none;
198+
-o-transition: none;
199+
transition: none;
200+
}
201+
106202
.enjoyhint_btn{
107203
-webkit-box-sizing: content-box;
108204
-moz-box-sizing: content-box;
@@ -194,12 +290,14 @@
194290
color: white;
195291
z-index: 107;
196292
font-size: 22px;
197-
font-family: 'casino_handregular';
293+
font-family: 'casino_handregular', 'Arial';
198294
-webkit-transition: opacity 400ms cubic-bezier(0.42, 0, 0.58, 1);
199295
-moz-transition: opacity 400ms cubic-bezier(0.42, 0, 0.58, 1);
200296
transition: opacity 400ms cubic-bezier(0.42, 0, 0.58, 1);
201297
}
202298

299+
300+
203301
div.kineticjs-content{
204302
position: absolute !important;
205303
}

0 commit comments

Comments
 (0)