Skip to content

Commit bda23a2

Browse files
AndVikVinAndVikVin
committed
fix:EN-4 fix hint position bug, button position bug.
1 parent 4c43fd5 commit bda23a2

File tree

2 files changed

+78
-9
lines changed

2 files changed

+78
-9
lines changed

‎src/jquery.enjoyhint.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
font-weight: normal;
1010
font-style: normal;
1111
}
12+
1213
.enjoyhint {
1314
position: fixed;
1415
width: 100%;
@@ -321,6 +322,9 @@
321322

322323
.enjoy_hint_label {
323324
position: absolute;
325+
max-width: 90%;
326+
max-height: 90%;
327+
overflow: hidden;
324328
color: white;
325329
z-index: 107;
326330
font-size: 22px;

‎src/jquery.enjoyhint.js‎

Lines changed: 74 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
192192
that.hide();
193193
that.options.onSkipClick();
194194
});
195+
195196
that.$next_btn = $("<div>", { class: that.cl.next_btn })
196197
.appendTo(that.enjoyhint)
197198
.html("Next")
@@ -243,7 +244,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
243244
this.attrs.height,
244245
this.attrs.radius
245246
);
246-
ctx.fillStyle = "red";
247+
247248
ctx.fill();
248249

249250
ctx.globalCompositeOperation = def_comp;
@@ -624,7 +625,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
624625
var label_left = label.offset().left;
625626
var label_right = label.offset().left + label_w;
626627
var label_top = label.offset().top - $(document).scrollTop();
627-
var label_bottom = label.offset().top + label_h;
628+
var label_bottom = label.offset().top - $(document).scrollTop() + label_h;
628629

629630
var margin = 10;
630631

@@ -908,9 +909,28 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
908909
var bottom_offset = body_size.h - (data.center_y + half_h);
909910
var left_offset = data.center_x - half_w;
910911
var right_offset = body_size.w - (data.center_x + half_w);
912+
913+
var label_hor_side;
914+
// find out the biggest side for showing hint
915+
var offsetsObj = {
916+
'top_offset' : top_offset,
917+
'bottom_offset' : bottom_offset,
918+
'right_offset' : right_offset,
919+
'left_offset' : left_offset
920+
};
921+
var sortedOffsets = [];
922+
923+
for(var offset in offsetsObj) {
924+
sortedOffsets.push([offset, offsetsObj[offset]])
925+
}
926+
sortedOffsets.sort(function(a,b){
927+
return a[1] - b[1]
928+
});
929+
930+
(sortedOffsets[3][0] === 'bottom_offset' || sortedOffsets[3][0] === 'top_offset') ?
931+
label_hor_side = 'center' : (sortedOffsets[3][0] === 'right_offset') ?
932+
label_hor_side = 'right' : label_hor_side = 'left';
911933

912-
var label_hor_side =
913-
body_size.w - data.center_x < data.center_x ? "left" : "right";
914934
var label_ver_side =
915935
body_size.h - data.center_y < data.center_y ? "top" : "bottom";
916936
var label_shift = 150;
@@ -922,12 +942,57 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
922942
var label_hor_offset = half_w + label_shift;
923943
var label_ver_offset = half_h + label_shift;
924944

925-
//original: var label_x = (label_hor_side == 'left') ? data.center_x - label_hor_offset - label_width : data.center_x + label_hor_offset;
926945
var label_y =
927946
label_ver_side == "top"
928947
? data.center_y - label_ver_offset - label_height
929948
: data.center_y + label_ver_offset;
930-
var label_x = window.innerWidth / 2 - label_width / 2;
949+
950+
var label_x;
951+
// if hint body bigger than available space change hint styles and label position
952+
function changeHintStyles(){
953+
setTimeout(function(){
954+
$('.enjoy_hint_label').css({
955+
'border-radius': '40px',
956+
'-webkit-border-radius': '40px',
957+
'-moz-border-radius': '40px',
958+
'background-color': '#272A26',
959+
'-webkit-transition': 'background-color ease-out 0.5s',
960+
'-moz-transition': 'background-color ease-out 0.5s',
961+
'-o-transition': 'background-color ease-out 0.5s',
962+
'transition': 'background-color ease-out 0.5s'
963+
})
964+
}, 500)
965+
label_x = window.innerWidth / 2 - label_width / 2
966+
}
967+
968+
if(label_hor_side === 'center') {
969+
if(sortedOffsets[3][1] <= label_shift_with_label_height){
970+
changeHintStyles();
971+
}
972+
else {
973+
label_x = window.innerWidth / 2 - label_width / 2
974+
}
975+
}
976+
else if (label_hor_side === 'left') {
977+
if(sortedOffsets[3][1] <= label_width + label_margin){
978+
changeHintStyles();
979+
}
980+
else {
981+
data.width ?
982+
label_x = data.center_x - label_width - data.width/2 - 20 :
983+
label_x = data.center_x - label_width - data.radius/2 - 20;
984+
}
985+
}
986+
else {
987+
if(sortedOffsets[3][1] <= label_width + label_margin){
988+
changeHintStyles();
989+
}
990+
else {
991+
data.width ?
992+
label_x = data.center_x + data.width/2 + 20 :
993+
label_x = data.center_x + data.radius/2 + 20;
994+
}
995+
}
931996

932997
if (
933998
top_offset < label_shift_with_label_height &&
@@ -946,7 +1011,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
9461011
});
9471012

9481013
setTimeout(function(){
949-
var summoryButtonWidth = that.$next_btn.width() + that.$skip_btn.width() + 10;
1014+
var summoryButtonWidth = that.$next_btn.width() + that.$skip_btn.width() + 20;
9501015
var distance = label_x;
9511016

9521017
if (summoryButtonWidth + label_x > arrowFinishX) {
@@ -955,7 +1020,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
9551020

9561021
that.$next_btn.css({
9571022
left: distance,
958-
top: label_y + label_height + 20
1023+
top: label_y + label_height + 40
9591024
});
9601025

9611026
var left_skip = distance + that.$next_btn.width() + 10;
@@ -966,7 +1031,7 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
9661031

9671032
that.$skip_btn.css({
9681033
left: left_skip,
969-
top: label_y + label_height + 20
1034+
top: label_y + label_height + 40
9701035
});
9711036
}, 0)
9721037

0 commit comments

Comments
 (0)