Skip to content

Commit 9f78cfe

Browse files
AndVikVinAndVikVin
committed
fix: fix resize bug EN-5
1 parent 1688e15 commit 9f78cfe

File tree

1 file changed

+31
-162
lines changed

1 file changed

+31
-162
lines changed

‎src/jquery.enjoyhint.js‎

Lines changed: 31 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -267,20 +267,24 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
267267
that.layer.add(that.shape);
268268
that.kinetic_stage.add(that.layer);
269269

270+
var doit;
271+
270272
$(window).on("resize", function() {
273+
clearTimeout(doit);
274+
$('.enjoyhint_next_btn').css('visibility', 'hidden');
275+
$('.enjoyhint_skip_btn').css('visibility', 'hidden');
276+
$('.enjoy_hint_label').remove()
277+
$("#enjoyhint_arrpw_line").remove()
271278
if (!$(that.stepData.enjoyHintElementSelector).is(":visible")) {
272279
that.stopFunction();
273280
$(window).off("resize");
274281
return;
275282
}
276283

277-
prevWindowWidth = window.innerWidth;
278-
prevWindowHeight = window.innerHeight;
279-
280284
var boundingClientRect = $(
281285
that.stepData.enjoyHintElementSelector
282286
)[0].getBoundingClientRect();
283-
287+
284288
that.shape.attrs.center_x = Math.round(
285289
boundingClientRect.left + boundingClientRect.width / 2
286290
);
@@ -290,170 +294,34 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
290294
that.shape.attrs.width = boundingClientRect.width + 11;
291295
that.shape.attrs.height = boundingClientRect.height + 11;
292296

293-
var newWidth = window.innerWidth;
294-
var newHeight = window.innerHeight;
295-
var scaleX = newWidth / originalWidth;
296-
var scaleY = newHeight / originalHeight;
297-
298-
that.kinetic_stage.setAttr("width", originalWidth * scaleX);
299-
that.kinetic_stage.setAttr("height", originalHeight * scaleY);
300-
301-
if (that.stepData != null) {
302-
prevWindowWidth = window.innerWidth;
303-
prevWindowHeight = window.innerHeight;
304-
305-
/* Init */
306-
307-
if (!originalCenterX) {
308-
originalCenterX = that.shape.attrs.center_x;
309-
originalCenterY = that.shape.attrs.center_y;
310-
}
297+
function renderAfterResize(){
298+
var newDataCoords = $(that.stepData.enjoyHintElementSelector).get(0).getBoundingClientRect();
311299

312-
if (!originalArrowLeft) {
313-
originalArrowLeft = [];
314-
var attr = $("#enjoyhint_arrpw_line").attr("d");
315-
316-
if (attr) {
317-
originalArrowLeft.push(attr.substr(1).split(",")[0]);
318-
originalArrowLeft.push(
319-
attr.substr(attr.indexOf("Q") + 1).split(",")[0]
320-
);
321-
originalArrowLeft.push(attr.split(" ")[2].split(",")[0]);
322-
originalArrowTop = [];
323-
originalArrowTop.push(attr.split(",")[1].split(" ")[0]);
324-
originalArrowTop.push(attr.split(",")[2].split(" ")[0]);
325-
originalArrowTop.push(attr.split(",")[3]);
326-
}
327-
}
300+
that.stepData.center_x = newDataCoords.left + newDataCoords.width/2;
301+
that.stepData.center_y = newDataCoords.top + newDataCoords.height/2;
302+
that.stepData.width = newDataCoords.width + 11;
303+
that.stepData.height = newDataCoords.height + 11;
328304

329-
var labelElement = $(".enjoy_hint_label");
330-
331-
if (!originalLabelLeft) {
332-
originalLabelLeft = labelElement[0].getBoundingClientRect().left;
333-
originalLabelTop = labelElement[0].getBoundingClientRect().top;
334-
}
335-
336-
var skipButton = $(".enjoyhint_skip_btn");
305+
that.renderLabelWithShape(that.stepData);
306+
$('.enjoyhint_next_btn').css('visibility', 'visible');
307+
$('.enjoyhint_skip_btn').css('visibility', 'visible');
308+
}
337309

338-
if (!originalSkipbuttonLeft) {
339-
originalSkipbuttonLeft = skipButton[0].getBoundingClientRect()
340-
.left;
341-
originalSkipbuttonTop = skipButton[0].getBoundingClientRect().top;
310+
doit = setTimeout(function() {
311+
if(boundingClientRect.top < 0 || boundingClientRect.bottom > (window.innerHeight || document.documentElement.clientHeight)){
312+
$(document.body).scrollTo(that.stepData.enjoyHintElementSelector, 150, {offset: -200, onAfter:renderAfterResize});
342313
}
314+
else renderAfterResize();
315+
}, 150);
343316

344-
/* Resizing label */
345-
346-
labelElement.css(
347-
"left",
348-
window.innerWidth / 2 - labelElement.outerWidth() / 2
349-
);
350-
351-
/* Resizing arrow */
352-
353-
var labelRect = labelElement[0].getBoundingClientRect();
354-
355-
if (window.innerWidth < 640) {
356-
$("#enjoyhint_arrpw_line").hide();
357-
labelElement.css(
358-
"top",
359-
window.innerHeight / 2 - labelElement.outerHeight() / 2
360-
);
361-
} else {
362-
$("#enjoyhint_arrpw_line").show();
363-
364-
labelElement.css("top", originalLabelTop);
365-
366-
var x1, x2, y1, y2;
367-
368-
var labelLeftOfShape =
369-
labelRect.left + labelRect.width / 2 <
370-
that.shape.attrs.center_x;
371-
var labelAboveShape =
372-
labelRect.top + labelRect.height / 2 <
373-
that.shape.attrs.center_y;
374-
375-
if (window.innerWidth < 900) {
376-
x1 = Math.round(
377-
labelRect.left +
378-
(labelRect.width / 2 + 15) *
379-
(labelRect.left + labelRect.width / 2 <
380-
that.shape.attrs.center_x
381-
? 1
382-
: -1)
383-
);
384-
y1 = Math.round(
385-
labelRect.top +
386-
labelRect.height *
387-
(labelRect.top + labelRect.height / 2 <
388-
that.shape.attrs.center_y
389-
? 1
390-
: -1)
391-
);
392-
x2 = Math.round(
393-
that.shape.attrs.center_x +
394-
(that.shape.attrs.radius + 15) * (labelLeftOfShape ? -1 : 1)
395-
);
396-
y2 = Math.round(that.shape.attrs.center_y);
397-
} else {
398-
x1 = Math.round(
399-
labelRect.left +
400-
labelRect.width / 2 +
401-
(labelRect.width / 2 + 15) * (labelLeftOfShape ? 1 : -1)
402-
);
403-
y1 = Math.round(labelRect.top + labelRect.height / 2);
404-
x2 = Math.round(that.shape.attrs.center_x);
405-
y2 = Math.round(
406-
that.shape.attrs.center_y +
407-
(that.shape.attrs.height / 2 + 15) *
408-
(labelAboveShape ? -1 : 1)
409-
);
410-
}
411-
412-
var midX = x1 + (x2 - x1) / 2;
413-
var midY = y1 + (y2 - y1) / 2;
414-
415-
var bezX = x1 < x2 ? x2 : x1;
416-
var bezY = y1 < y2 ? y1 : y2;
417-
418-
if (
419-
Math.abs(
420-
labelRect.left +
421-
labelRect.width / 2 -
422-
that.shape.attrs.center_x
423-
) < 200
424-
) {
425-
x1 = x2 = labelRect.left + labelRect.width / 2;
426-
y1 = labelRect.top;
427-
bezX = x1;
428-
bezY = y1;
429-
}
430-
431-
if (window.innerWidth < 900) {
432-
bezX = x1 < x2 ? x1 : x2;
433-
bezY = y1 < y2 ? y2 : y1;
434-
}
435-
436-
var newCoordsLine = "M%d1,%d2 Q%d3,%d4 %d5,%d6"
437-
.replace("%d1", x1)
438-
.replace("%d2", y1)
439-
.replace("%d3", bezX)
440-
.replace("%d4", bezY)
441-
.replace("%d5", x2)
442-
.replace("%d6", y2);
443-
$("#enjoyhint_arrpw_line")[0].setAttribute("d", newCoordsLine);
444-
}
445317

446-
/* Resizing skip button */
318+
var newWidth = window.innerWidth;
319+
var newHeight = window.innerHeight;
320+
var scaleX = newWidth / originalWidth;
321+
var scaleY = newHeight / originalHeight;
447322

448-
var newSkipbuttonLeft =
449-
+originalSkipbuttonLeft +
450-
(that.shape.attrs.center_x - originalCenterX) / 2;
451-
skipButton.css(
452-
"left",
453-
newSkipbuttonLeft < 15 ? 15 : newSkipbuttonLeft
454-
);
455-
skipButton.css("top", labelRect.top + labelRect.height + 20);
456-
}
323+
that.kinetic_stage.setAttr("width", originalWidth * scaleX);
324+
that.kinetic_stage.setAttr("height", originalHeight * scaleY);
457325

458326
that.rect = new Kinetic.Rect({
459327
fill: options.fill,
@@ -464,7 +332,6 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
464332
that.layer.removeChildren();
465333
that.layer.add(that.rect);
466334
that.layer.add(that.shape);
467-
that.layer.draw();
468335
that.kinetic_stage.draw();
469336
});
470337

@@ -973,6 +840,8 @@ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
973840
'transition': 'background-color ease-out 0.5s'
974841
})
975842
}, 500)
843+
x_to = 0;
844+
x_from = 0;
976845
label_x = window.innerWidth / 2 - label_width / 2
977846
}
978847

0 commit comments

Comments
 (0)