@@ -9,11 +9,13 @@ const confirmationHTML = `<div id="tooltip-helper-confirmation" class="tooltip-h
9
9
</div>
10
10
</div>` ;
11
11
12
- const prevButtonHTML = `<button id="tooltip-helper-prev-sequence" class="tooltip-helper-prev-sequence mt-2">Previous</button>` ;
13
-
14
- const nextButtonHTML = `<button id="tooltip-helper-next-sequence" class="tooltip-helper-next-sequence mt-2 ml-2">Next</button>` ;
15
-
16
- const closeButtonHTML = `<button id="tooltip-helper-end-sequence" class="tooltip-helper-end-sequence">Quit</button>` ; const offset = 10 ;
12
+ const footerHTML = `<div class="tooltip-helper-footer mt-2">
13
+ <button id="tooltip-helper-end-sequence" class="tooltip-helper-end-sequence">Quit</button>
14
+ <div>
15
+ <button id="tooltip-helper-prev-sequence" class="tooltip-helper-prev-sequence">Previous</button>
16
+ <button id="tooltip-helper-next-sequence" class="tooltip-helper-next-sequence ml-2">Next</button>
17
+ </div>
18
+ </div>` ; const offset = 10 ;
17
19
var sequenceIndex = 0 ;
18
20
19
21
const createStage = ( sequence , originalSequence ) => {
@@ -27,8 +29,8 @@ const createStage = (sequence, originalSequence) => {
27
29
let styles = getComputedStyle ( elem ) ;
28
30
let elemBoundaries = elem . getBoundingClientRect ( ) ;
29
31
let position = {
30
- x : elemBoundaries . left ,
31
- y : elemBoundaries . top + elemBoundaries . height + offset
32
+ x : elemBoundaries . left < offset ? offset : Math . round ( elemBoundaries . left ) ,
33
+ y : Math . round ( elemBoundaries . top + elemBoundaries . height + offset )
32
34
} ;
33
35
34
36
let activeElement = getElement ( "#tooltip-helper-backdrop .tooltip-helper-active" ) ;
@@ -37,20 +39,19 @@ const createStage = (sequence, originalSequence) => {
37
39
activeElement . classList . add ( "tooltip-helper-active" ) ;
38
40
backdrop . append ( activeElement ) ;
39
41
}
40
- activeElement . style . top = elemBoundaries . top + "px" ;
41
- activeElement . style . left = elemBoundaries . left + "px" ;
42
+ activeElement . style . top = Math . round ( elemBoundaries . top ) + "px" ;
43
+ activeElement . style . left = Math . round ( elemBoundaries . left ) + "px" ;
42
44
activeElement . style . height = elemBoundaries . height + "px" ;
43
45
activeElement . style . width = elemBoundaries . width + "px" ;
44
46
activeElement . style . borderRadius = styles . borderRadius ;
45
47
46
48
let descriptionElement = getElement ( "#tooltip-helper-backdrop .tooltip-helper-active-description" ) ;
47
49
if ( ! descriptionElement ) {
48
50
descriptionElement = document . createElement ( "div" ) ;
51
+ descriptionElement . style . willChange = "transform" ;
49
52
descriptionElement . classList . add ( "tooltip-helper-active-description" ) ;
50
- descriptionElement . innerHTML += closeButtonHTML ;
51
- descriptionElement . innerHTML += "<p id='tooltip-helper-active-description-text' class='mt-2 mb-2'>" + description + "</p>" ;
52
- descriptionElement . innerHTML += prevButtonHTML ;
53
- descriptionElement . innerHTML += nextButtonHTML ;
53
+ descriptionElement . innerHTML += "<p id='tooltip-helper-active-description-text' class='mt-2 mb-2'></p>" ;
54
+ descriptionElement . innerHTML += footerHTML ;
54
55
backdrop . append ( descriptionElement ) ;
55
56
}
56
57
const prevBtn = getElementById ( "tooltip-helper-prev-sequence" ) ;
@@ -68,8 +69,19 @@ const createStage = (sequence, originalSequence) => {
68
69
nextBtn . innerText = "Next" ;
69
70
}
70
71
}
71
- descriptionElement . style . transform = "translateX(" + position . x + "px) translateY(" + position . y + "px)" ;
72
72
getElementById ( "tooltip-helper-active-description-text" ) . innerHTML = description ;
73
+ if ( descriptionElement . offsetWidth <= window . innerWidth ) {
74
+ descriptionElement . style . width = Math . round ( window . innerWidth - ( position . x * 2 ) ) + "px" ;
75
+ }
76
+ if ( descriptionElement . offsetWidth + position . x > window . innerWidth ) {
77
+ let offset = Math . round ( window . innerWidth - Math . round ( elemBoundaries . right ) ) ;
78
+ let right = Math . round ( ( ( descriptionElement . offsetWidth + position . x ) - window . innerWidth ) + offset ) ;
79
+ position . x -= right ;
80
+ }
81
+ if ( descriptionElement . offsetHeight + position . y > window . innerHeight ) {
82
+ position . y = Math . round ( ( elemBoundaries . top - descriptionElement . offsetHeight ) - offset ) ;
83
+ }
84
+ descriptionElement . style . transform = "translate3d(" + position . x + "px, " + position . y + "px, 0px)" ;
73
85
} ;
74
86
75
87
const startSequence = ( sequence ) => {
@@ -82,9 +94,11 @@ const startSequence = (sequence) => {
82
94
83
95
const endSequence = ( ) => {
84
96
getElement ( 'body' ) . classList . remove ( 'stop-scroll' ) ;
85
- getElementById ( "tooltip-helper-backdrop" ) . style . background = "transparent" ;
86
97
const element = getElementById ( "tooltip-helper-backdrop" ) ;
98
+ element . removeEventListener ( 'click' , function ( ) { } ) ;
99
+ element . style . background = "transparent" ;
87
100
element . parentNode . removeChild ( element ) ;
101
+ sequenceIndex = 0 ;
88
102
} ;
89
103
90
104
const next = ( sequence ) => {
0 commit comments