Skip to content

Commit edfe967

Browse files
author
Yaron Nachshon
committed
bug fixes
1 parent 25d6065 commit edfe967

File tree

3 files changed

+110
-78
lines changed

3 files changed

+110
-78
lines changed

‎intro.js

Lines changed: 40 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* global jQuery,setInterval, clearInterval*/
1+
/* global jQuery,setInterval, clearInterval, window*/
22
'use strict';
33

44
(function($){
@@ -15,15 +15,28 @@
1515
base.options = $.extend({},$.introJs.defaultOptions, options);
1616
};
1717

18-
function trackElementChange(element){
19-
var boundingClientRectOld = $(element).get(0).getBoundingClientRect();
18+
function round(boundingClientRect){
19+
var boundingClientRectNew = {};
20+
boundingClientRectNew.left = Number(boundingClientRect.left.toFixed(0));
21+
boundingClientRectNew.right = Number(boundingClientRect.right.toFixed(0));
22+
boundingClientRectNew.top = Number(boundingClientRect.top.toFixed(0));
23+
boundingClientRectNew.bottom = Number(boundingClientRect.bottom.toFixed(0));
24+
boundingClientRectNew.width = Number(boundingClientRect.width.toFixed(0));
25+
boundingClientRectNew.height = Number(boundingClientRect.height.toFixed(0));
26+
return boundingClientRectNew;
27+
}
28+
29+
function trackElementChange(element, time){
30+
var boundingClientRectOld = round($(element).get(0).getBoundingClientRect());
2031
var interval = setInterval(function _checkForChange(){
21-
var boundingClientRectNew = $(element).get(0).getBoundingClientRect();
22-
if(!angular.equals(boundingClientRectOld, boundingClientRectNew)){
23-
$(element).trigger('changed.introjs');
24-
}
25-
boundingClientRectOld = boundingClientRectNew;
26-
}, 1000);
32+
window.requestAnimationFrame(function(){
33+
var boundingClientRectNew = round($(element).get(0).getBoundingClientRect());
34+
if(!angular.equals(boundingClientRectOld, boundingClientRectNew)){
35+
$(element).trigger('changed.introjs');
36+
}
37+
boundingClientRectOld = boundingClientRectNew;
38+
});
39+
}, time || 500);
2740
$(element).data('introjsInterval', interval);
2841

2942
return (function(interval){
@@ -73,7 +86,7 @@
7386
}
7487

7588
var durationInSecs = duration / 1000;
76-
element.css('transition', 'left ' + durationInSecs + 's ease-in-out, top ' + durationInSecs + 's ease-in-out');
89+
element.css('transition', 'left ' + durationInSecs + 's linear, top ' + durationInSecs + 's linear');
7790
element.offset(newOffset);
7891

7992
return defer.promise();
@@ -112,11 +125,20 @@
112125
return offset;
113126
}
114127

128+
// refactor
115129
function outerPositionElement(element, target, position, offsetX, offsetY){
116130
var offset = convertOuterPositionToOffset(element, target, position);
131+
var temp = element.clone(false, false);
132+
temp.css({left: 0, opacity: 0, zIndex: -1}).appendTo('body');
133+
temp.show();
134+
var width = temp.outerWidth();
135+
element.css({width: width});
136+
117137
offset.left += Number(offsetX || 0);
118138
offset.top += Number(offsetY || 0);
119139
offset = fitOffsetToScreen(offset, element.outerWidth());
140+
element.css({width: ''});
141+
$(temp).remove();
120142
return element.offset(offset);
121143
}
122144

@@ -139,7 +161,7 @@
139161
tooltip.hide();
140162

141163
$('body').append(tooltip);
142-
trackElementChange(tooltip);
164+
trackElementChange(tooltip, 100);
143165
$(tooltip).on('changed.introjs', repositionTooltip);
144166
return tooltip;
145167
}
@@ -196,7 +218,7 @@
196218
}
197219
hint.hide();
198220
$('body').append(hint);
199-
trackElementChange(hint);
221+
trackElementChange(hint, 1000);
200222
$(hint).on('changed.introjs', that.render);
201223
return hint;
202224
}
@@ -232,7 +254,7 @@
232254
this.setTarget = function(element){
233255
untrackElementChange(targetElement);
234256
targetElement = $(element);
235-
trackElementChange(targetElement);
257+
trackElementChange(targetElement, 1000);
236258
};
237259

238260
this.setPosition = function(position){
@@ -352,7 +374,9 @@
352374
function cleanup(){
353375
hint.destroy();
354376
backdrop.remove();
355-
377+
if(base.currentStep.element){
378+
unhighlighElement(base.currentStep.element);
379+
}
356380
hint = null;
357381
backdrop = null;
358382
}
@@ -385,7 +409,7 @@
385409
if(step.calculatedElementSelector){
386410
selectedElement = $(step.calculatedElementSelector);
387411
}
388-
412+
console.log('selectedElement: ', selectedElement);
389413
$(selectedElement).get(0).scrollIntoView(false);
390414

391415
hint.setTarget(selectedElement || $('body'));
@@ -446,8 +470,8 @@
446470
};
447471

448472
base.stop = function(){
449-
currentStepIndex = 0;
450473
cleanup();
474+
currentStepIndex = 0;
451475
};
452476

453477
// Run initializer

‎introjs.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎introjs.scss

Lines changed: 69 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -8,48 +8,59 @@
88
// .element{
99
// @include arrow(top, #000, 50px);
1010
// }
11-
1211
$arrow-size-border: 8px;
1312
$arrow-size: $arrow-size-border * 2;
1413
$intro-element-z-index: 10000000;
1514
$intro-backdrop-z-index: $intro-element-z-index - 100;
15+
@mixin arrow($direction, $color, $size) {
16+
display: block;
17+
height: 0;
18+
width: 0;
1619

17-
@mixin arrow($direction, $color, $size){
18-
display: block;
19-
height: 0;
20-
width: 0;
21-
22-
@if $direction == 'top' {
23-
border-left: $size solid transparent;
24-
border-right: $size solid transparent;
25-
border-bottom: $size solid $color;
26-
} @else if $direction == 'right' {
27-
border-top: $size solid transparent;
28-
border-bottom: $size solid transparent;
29-
border-left: $size solid $color;
30-
} @else if $direction == 'bottom' {
31-
border-top: $size solid $color;
32-
border-right: $size solid transparent;
33-
border-left: $size solid transparent;
34-
} @else if $direction == 'left' {
35-
border-top: $size solid transparent;
36-
border-right: $size solid $color;
37-
border-bottom: $size solid transparent;
38-
} @else if $direction == 'top-left' {
39-
border-top: $size solid $color;
40-
border-right: $size solid transparent;
41-
} @else if $direction == 'top-right' {
42-
border-top: $size solid $color;
43-
border-left: $size solid transparent;
44-
} @else if $direction == 'bottom-left' {
45-
border-bottom: $size solid $color;
46-
border-right: $size solid transparent;
47-
} @else if $direction == 'bottom-right' {
48-
border-bottom: $size solid $color;
49-
border-left: $size solid transparent;
50-
}
51-
}
20+
@if $direction == 'top' {
21+
border-left: $size solid transparent;
22+
border-right: $size solid transparent;
23+
border-bottom: $size solid $color;
24+
}
25+
26+
@else if $direction == 'right' {
27+
border-top: $size solid transparent;
28+
border-bottom: $size solid transparent;
29+
border-left: $size solid $color;
30+
}
31+
32+
@else if $direction == 'bottom' {
33+
border-top: $size solid $color;
34+
border-right: $size solid transparent;
35+
border-left: $size solid transparent;
36+
}
37+
38+
@else if $direction == 'left' {
39+
border-top: $size solid transparent;
40+
border-right: $size solid $color;
41+
border-bottom: $size solid transparent;
42+
}
43+
44+
@else if $direction == 'top-left' {
45+
border-top: $size solid $color;
46+
border-right: $size solid transparent;
47+
}
48+
49+
@else if $direction == 'top-right' {
50+
border-top: $size solid $color;
51+
border-left: $size solid transparent;
52+
}
5253

54+
@else if $direction == 'bottom-left' {
55+
border-bottom: $size solid $color;
56+
border-right: $size solid transparent;
57+
}
58+
59+
@else if $direction == 'bottom-right' {
60+
border-bottom: $size solid $color;
61+
border-left: $size solid transparent;
62+
}
63+
}
5364
/* intro */
5465
.intro-hint {
5566
$hint-size: 52px;
@@ -60,61 +71,63 @@ $intro-backdrop-z-index: $intro-element-z-index - 100;
6071
pointer-events: none;
6172
position: absolute !important;
6273
}
74+
6375
.intro-tooltip {
6476
position: absolute;
65-
min-width: 400px;
66-
min-height: 200px;
67-
background: rgba(#5F2D4A, .8);
68-
color: #FFF;
69-
border: solid 2px blue;
7077
z-index: $intro-element-z-index;
7178

72-
.intro-tooltip-arrow{
79+
.intro-tooltip-arrow {
7380
display: block;
7481
position: absolute;
7582
}
7683

7784
.intro-tooltip-arrow {
78-
&[position=right]{
79-
@include arrow('left', blue, $arrow-size-border);
85+
&[position=right] {
86+
@include arrow( 'left', blue, $arrow-size-border);
8087
}
81-
&[position=left]{
82-
@include arrow('right', blue, $arrow-size-border);
88+
89+
&[position=left] {
90+
@include arrow( 'right', blue, $arrow-size-border);
8391
}
84-
&[position=bottom]{
85-
@include arrow('top', blue, $arrow-size-border);
92+
93+
&[position=bottom] {
94+
@include arrow( 'top', blue, $arrow-size-border);
8695
}
87-
&[position=top]{
88-
@include arrow('bottom', blue, $arrow-size-border);
96+
97+
&[position=top] {
98+
@include arrow( 'bottom', blue, $arrow-size-border);
8999
top: 0;
90100
}
91101
}
92102
}
103+
93104
.intro-element {
94105
z-index: $intro-element-z-index !important;
95-
box-shadow: 0 0 1px 1px red;
96106
opacity: 1 !important;
107+
background-color: #FFF;
97108

98-
&.intro-element-disabled{
109+
&.intro-element-disabled {
99110
pointer-events: none;
100-
*{
111+
112+
* {
101113
pointer-events: none;
102114
}
103115
}
104-
&.intro-element-disabled:before{
116+
117+
&.intro-element-disabled:before {
105118
content: ' ';
106119
left: 0;
107120
top: 0;
108121
bottom: 0;
109122
right: 0;
110123
z-index: 1;
111-
background: rgba(blue, 0.3);
124+
background: transparent;
112125
width: 100%;
113126
height: 100%;
114127
position: absolute;
115128
}
116129

117-
&.intro-element-relative{
130+
&.intro-element-relative {
118131
position: relative;
119132
}
120133
}
@@ -136,8 +149,3 @@ $intro-backdrop-z-index: $intro-element-z-index - 100;
136149
opacity: 1.0 !important;
137150
transform: none !important;
138151
}
139-
140-
.intro-tooltip-content{
141-
height: 270px;
142-
overflow: auto;
143-
}

0 commit comments

Comments
 (0)