Fossil SCM

Simplifications to the javascript for tooltip handling.

drh 2019-05-22 11:37 UTC tooltip-experiments
Commit 2189edcd572747a938247973bfcacaa4adb4ab12db4c41fe790a81665eddc54f
Parent 980adfa6bdc917f…
1 file changed +37 -47
~ src/graph.js
M src/graph.js
+37 -47
--- src/graph.js
+++ src/graph.js
@@ -87,10 +87,11 @@
8787
 /* Init the close timer if the mouse is no longer over the tooltip. */
8888
 tooltipObj.onmouseleave = function(e) {
8989
 if (tooltipInfo.ixActive != -1)
9090
 resumeCloseTimer();
9191
 };
92
+
9293
 /* This object must be in the global scope, so that (non-shadowed) access is
9394
 ** possible from within a setTimeout() closure. */
9495
 window.tooltipInfo = {
9596
 dwellTimeout: 250, /* The tooltip dwell timeout. */
9697
 closeTimeout: 3000, /* The tooltip close timeout. */
@@ -98,39 +99,38 @@
9899
 idTimerClose: 0, /* The tooltip close timer id. */
99100
 ixHover: -1, /* The id of the element with the mouse. */
100101
 ixActive: -1, /* The id of the element with the tooltip. */
101102
 posX: 0, posY: 0 /* The last mouse position. */
102103
 };
103
-/* These functions must be in the global scope, so that access is possible from
104
-** within (non-local) event handlers. */
105
-var hideGraphTooltip = function() {
104
+
105
+
106
+function hideGraphTooltip(){
106107
 stopCloseTimer();
107108
 tooltipObj.style.display = "none";
108
- this.tooltipInfo.ixActive = -1;
109
-}.bind(window);
110
-var stopDwellTimer = function() {
111
- if (this.tooltipInfo.idTimer != 0) {
112
- clearTimeout(this.tooltipInfo.idTimer);
113
- this.tooltipInfo.idTimer = 0;
114
- }
115
-}.bind(window);
116
-var resumeCloseTimer = function() {
109
+ tooltipInfo.ixActive = -1;
110
+}
111
+function stopDwellTimer(){
112
+ if (tooltipInfo.idTimer != 0) {
113
+ clearTimeout(tooltipInfo.idTimer);
114
+ tooltipInfo.idTimer = 0;
115
+ }
116
+}
117
+function resumeCloseTimer(){
117118
 /* This timer must be stopped explicitly to reset the elapsed timeout. */
118
- if (this.tooltipInfo.idTimerClose == 0 &&
119
- this.tooltipInfo.closeTimeout>0) {
120
- this.tooltipInfo.idTimerClose = setTimeout(function() {
121
- this.tooltipInfo.idTimerClose = 0;
119
+ if(tooltipInfo.idTimerClose == 0 && tooltipInfo.closeTimeout>0) {
120
+ tooltipInfo.idTimerClose = setTimeout(function(){
121
+ tooltipInfo.idTimerClose = 0;
122122
 hideGraphTooltip();
123
- }.bind(window),this.tooltipInfo.closeTimeout);
124
- }
125
-}.bind(window);
126
-var stopCloseTimer = function() {
127
- if (this.tooltipInfo.idTimerClose != 0) {
128
- clearTimeout(this.tooltipInfo.idTimerClose);
129
- this.tooltipInfo.idTimerClose = 0;
130
- }
131
-}.bind(window);
123
+ },tooltipInfo.closeTimeout);
124
+ }
125
+}
126
+function stopCloseTimer(){
127
+ if (tooltipInfo.idTimerClose != 0) {
128
+ clearTimeout(tooltipInfo.idTimerClose);
129
+ tooltipInfo.idTimerClose = 0;
130
+ }
131
+}
132132
133133
 /* Construct that graph corresponding to the timeline-data-N object */
134134
 function TimelineGraph(tx){
135135
 var topObj = document.getElementById("timelineTable"+tx.iTableId);
136136
 amendCss(tx.circleNodes, tx.showArrowheads);
@@ -138,46 +138,40 @@
138138
 tooltipInfo.closeTimeout = tx.closeTimeout
139139
 topObj.onclick = clickOnGraph
140140
 topObj.ondblclick = dblclickOnGraph
141141
 topObj.onmousemove = function(e) {
142142
 var ix = findTxIndex(e);
143
- var cursor = (ix<0) ? "" : "pointer"; /* Or: cursor = "help"? */
144
- document.getElementsByTagName('body')[0].style.cursor = cursor;
143
+ topObj.style.cursor = (ix<0) ? "" : "pointer"
145144
 /* Keep the already visible tooltip at a constant position, as long as the
146145
 ** mouse is over the same element. */
147146
 var isReentry = false; // Detect mouse move back to same element.
148
- if (tooltipObj.style.display != "none") {
149
- if (ix == tooltipInfo.ixHover)
150
- return;
151
- if (-1 == tooltipInfo.ixHover && ix == tooltipInfo.ixActive)
152
- isReentry = true;
147
+ if(tooltipObj.style.display != "none"){
148
+ if(ix == tooltipInfo.ixHover) return;
149
+ if(-1==tooltipInfo.ixHover && ix==tooltipInfo.ixActive) isReentry = true;
153150
 }
154151
 /* The tooltip is either not visible, or the mouse is over a different
155152
 ** element, so clear the dwell timer, and record the new element id and
156153
 ** mouse position. */
157154
 stopDwellTimer();
158
- if (ix >= 0) {
155
+ if(ix >= 0){
159156
 /* Close the tooltip only if the mouse is over another element, and init
160157
 ** the dwell timer again. */
161
- if (!isReentry)
162
- hideGraphTooltip();
158
+ if(!isReentry) hideGraphTooltip();
163159
 tooltipInfo.ixHover = ix;
164160
 tooltipInfo.posX = e.x;
165161
 tooltipInfo.posY = e.y;
166162
 /* Clear the close timer, if not already cleared by hideGraphTooltip(). */
167163
 stopCloseTimer();
168164
 if (!isReentry && tooltipInfo.dwellTimeout>0) {
169165
 tooltipInfo.idTimer = setTimeout(function() {
170
- this.tooltipInfo.idTimer = 0;
166
+ tooltipInfo.idTimer = 0;
171167
 /* Clear the timer to hide the tooltip. */
172168
 stopCloseTimer();
173
- showGraphTooltip(
174
- this.tooltipInfo.ixHover,
175
- this.tooltipInfo.posX,
176
- this.tooltipInfo.posY);
177
- this.tooltipInfo.ixActive = this.tooltipInfo.ixHover;
178
- }.bind(window),tooltipInfo.dwellTimeout);
169
+ showGraphTooltip(tooltipInfo.ixHover,
170
+ tooltipInfo.posX,tooltipInfo.posY);
171
+ tooltipInfo.ixActive = tooltipInfo.ixHover;
172
+ },tooltipInfo.dwellTimeout);
179173
 }
180174
 }
181175
 else {
182176
 tooltipInfo.ixHover = -1;
183177
 /* The mouse is not over an element with a tooltip, init the hide
@@ -186,18 +180,14 @@
186180
 }
187181
 };
188182
 topObj.onmouseleave = function(e) {
189183
 /* Hide the tooltip if the mouse is outside the "timelineTableN" element,
190184
 ** and outside the tooltip. */
191
- if (tooltipObj.style.display != "none" &&
192
- e.relatedTarget &&
193
- e.relatedTarget != tooltipObj) {
185
+ if(e.relatedTarget && e.relatedTarget != tooltipObj){
194186
 tooltipInfo.ixHover = -1;
195187
 hideGraphTooltip();
196
- /* Clear the dwell timer. */
197188
 stopDwellTimer();
198
- /* Clear the close timer. */
199189
 stopCloseTimer();
200190
 }
201191
 };
202192
 var canvasDiv;
203193
 var railPitch;
204194
--- src/graph.js
+++ src/graph.js
@@ -87,10 +87,11 @@
87 /* Init the close timer if the mouse is no longer over the tooltip. */
88 tooltipObj.onmouseleave = function(e) {
89 if (tooltipInfo.ixActive != -1)
90 resumeCloseTimer();
91 };
 
92 /* This object must be in the global scope, so that (non-shadowed) access is
93 ** possible from within a setTimeout() closure. */
94 window.tooltipInfo = {
95 dwellTimeout: 250, /* The tooltip dwell timeout. */
96 closeTimeout: 3000, /* The tooltip close timeout. */
@@ -98,39 +99,38 @@
98 idTimerClose: 0, /* The tooltip close timer id. */
99 ixHover: -1, /* The id of the element with the mouse. */
100 ixActive: -1, /* The id of the element with the tooltip. */
101 posX: 0, posY: 0 /* The last mouse position. */
102 };
103 /* These functions must be in the global scope, so that access is possible from
104 ** within (non-local) event handlers. */
105 var hideGraphTooltip = function() {
106 stopCloseTimer();
107 tooltipObj.style.display = "none";
108 this.tooltipInfo.ixActive = -1;
109 }.bind(window);
110 var stopDwellTimer = function() {
111 if (this.tooltipInfo.idTimer != 0) {
112 clearTimeout(this.tooltipInfo.idTimer);
113 this.tooltipInfo.idTimer = 0;
114 }
115 }.bind(window);
116 var resumeCloseTimer = function() {
117 /* This timer must be stopped explicitly to reset the elapsed timeout. */
118 if (this.tooltipInfo.idTimerClose == 0 &&
119 this.tooltipInfo.closeTimeout>0) {
120 this.tooltipInfo.idTimerClose = setTimeout(function() {
121 this.tooltipInfo.idTimerClose = 0;
122 hideGraphTooltip();
123 }.bind(window),this.tooltipInfo.closeTimeout);
124 }
125 }.bind(window);
126 var stopCloseTimer = function() {
127 if (this.tooltipInfo.idTimerClose != 0) {
128 clearTimeout(this.tooltipInfo.idTimerClose);
129 this.tooltipInfo.idTimerClose = 0;
130 }
131 }.bind(window);
132
133 /* Construct that graph corresponding to the timeline-data-N object */
134 function TimelineGraph(tx){
135 var topObj = document.getElementById("timelineTable"+tx.iTableId);
136 amendCss(tx.circleNodes, tx.showArrowheads);
@@ -138,46 +138,40 @@
138 tooltipInfo.closeTimeout = tx.closeTimeout
139 topObj.onclick = clickOnGraph
140 topObj.ondblclick = dblclickOnGraph
141 topObj.onmousemove = function(e) {
142 var ix = findTxIndex(e);
143 var cursor = (ix<0) ? "" : "pointer"; /* Or: cursor = "help"? */
144 document.getElementsByTagName('body')[0].style.cursor = cursor;
145 /* Keep the already visible tooltip at a constant position, as long as the
146 ** mouse is over the same element. */
147 var isReentry = false; // Detect mouse move back to same element.
148 if (tooltipObj.style.display != "none") {
149 if (ix == tooltipInfo.ixHover)
150 return;
151 if (-1 == tooltipInfo.ixHover && ix == tooltipInfo.ixActive)
152 isReentry = true;
153 }
154 /* The tooltip is either not visible, or the mouse is over a different
155 ** element, so clear the dwell timer, and record the new element id and
156 ** mouse position. */
157 stopDwellTimer();
158 if (ix >= 0) {
159 /* Close the tooltip only if the mouse is over another element, and init
160 ** the dwell timer again. */
161 if (!isReentry)
162 hideGraphTooltip();
163 tooltipInfo.ixHover = ix;
164 tooltipInfo.posX = e.x;
165 tooltipInfo.posY = e.y;
166 /* Clear the close timer, if not already cleared by hideGraphTooltip(). */
167 stopCloseTimer();
168 if (!isReentry && tooltipInfo.dwellTimeout>0) {
169 tooltipInfo.idTimer = setTimeout(function() {
170 this.tooltipInfo.idTimer = 0;
171 /* Clear the timer to hide the tooltip. */
172 stopCloseTimer();
173 showGraphTooltip(
174 this.tooltipInfo.ixHover,
175 this.tooltipInfo.posX,
176 this.tooltipInfo.posY);
177 this.tooltipInfo.ixActive = this.tooltipInfo.ixHover;
178 }.bind(window),tooltipInfo.dwellTimeout);
179 }
180 }
181 else {
182 tooltipInfo.ixHover = -1;
183 /* The mouse is not over an element with a tooltip, init the hide
@@ -186,18 +180,14 @@
186 }
187 };
188 topObj.onmouseleave = function(e) {
189 /* Hide the tooltip if the mouse is outside the "timelineTableN" element,
190 ** and outside the tooltip. */
191 if (tooltipObj.style.display != "none" &&
192 e.relatedTarget &&
193 e.relatedTarget != tooltipObj) {
194 tooltipInfo.ixHover = -1;
195 hideGraphTooltip();
196 /* Clear the dwell timer. */
197 stopDwellTimer();
198 /* Clear the close timer. */
199 stopCloseTimer();
200 }
201 };
202 var canvasDiv;
203 var railPitch;
204
--- src/graph.js
+++ src/graph.js
@@ -87,10 +87,11 @@
87 /* Init the close timer if the mouse is no longer over the tooltip. */
88 tooltipObj.onmouseleave = function(e) {
89 if (tooltipInfo.ixActive != -1)
90 resumeCloseTimer();
91 };
92
93 /* This object must be in the global scope, so that (non-shadowed) access is
94 ** possible from within a setTimeout() closure. */
95 window.tooltipInfo = {
96 dwellTimeout: 250, /* The tooltip dwell timeout. */
97 closeTimeout: 3000, /* The tooltip close timeout. */
@@ -98,39 +99,38 @@
99 idTimerClose: 0, /* The tooltip close timer id. */
100 ixHover: -1, /* The id of the element with the mouse. */
101 ixActive: -1, /* The id of the element with the tooltip. */
102 posX: 0, posY: 0 /* The last mouse position. */
103 };
104
105
106 function hideGraphTooltip(){
107 stopCloseTimer();
108 tooltipObj.style.display = "none";
109 tooltipInfo.ixActive = -1;
110 }
111 function stopDwellTimer(){
112 if (tooltipInfo.idTimer != 0) {
113 clearTimeout(tooltipInfo.idTimer);
114 tooltipInfo.idTimer = 0;
115 }
116 }
117 function resumeCloseTimer(){
118 /* This timer must be stopped explicitly to reset the elapsed timeout. */
119 if(tooltipInfo.idTimerClose == 0 && tooltipInfo.closeTimeout>0) {
120 tooltipInfo.idTimerClose = setTimeout(function(){
121 tooltipInfo.idTimerClose = 0;
 
122 hideGraphTooltip();
123 },tooltipInfo.closeTimeout);
124 }
125 }
126 function stopCloseTimer(){
127 if (tooltipInfo.idTimerClose != 0) {
128 clearTimeout(tooltipInfo.idTimerClose);
129 tooltipInfo.idTimerClose = 0;
130 }
131 }
132
133 /* Construct that graph corresponding to the timeline-data-N object */
134 function TimelineGraph(tx){
135 var topObj = document.getElementById("timelineTable"+tx.iTableId);
136 amendCss(tx.circleNodes, tx.showArrowheads);
@@ -138,46 +138,40 @@
138 tooltipInfo.closeTimeout = tx.closeTimeout
139 topObj.onclick = clickOnGraph
140 topObj.ondblclick = dblclickOnGraph
141 topObj.onmousemove = function(e) {
142 var ix = findTxIndex(e);
143 topObj.style.cursor = (ix<0) ? "" : "pointer"
 
144 /* Keep the already visible tooltip at a constant position, as long as the
145 ** mouse is over the same element. */
146 var isReentry = false; // Detect mouse move back to same element.
147 if(tooltipObj.style.display != "none"){
148 if(ix == tooltipInfo.ixHover) return;
149 if(-1==tooltipInfo.ixHover && ix==tooltipInfo.ixActive) isReentry = true;
 
 
150 }
151 /* The tooltip is either not visible, or the mouse is over a different
152 ** element, so clear the dwell timer, and record the new element id and
153 ** mouse position. */
154 stopDwellTimer();
155 if(ix >= 0){
156 /* Close the tooltip only if the mouse is over another element, and init
157 ** the dwell timer again. */
158 if(!isReentry) hideGraphTooltip();
 
159 tooltipInfo.ixHover = ix;
160 tooltipInfo.posX = e.x;
161 tooltipInfo.posY = e.y;
162 /* Clear the close timer, if not already cleared by hideGraphTooltip(). */
163 stopCloseTimer();
164 if (!isReentry && tooltipInfo.dwellTimeout>0) {
165 tooltipInfo.idTimer = setTimeout(function() {
166 tooltipInfo.idTimer = 0;
167 /* Clear the timer to hide the tooltip. */
168 stopCloseTimer();
169 showGraphTooltip(tooltipInfo.ixHover,
170 tooltipInfo.posX,tooltipInfo.posY);
171 tooltipInfo.ixActive = tooltipInfo.ixHover;
172 },tooltipInfo.dwellTimeout);
 
 
173 }
174 }
175 else {
176 tooltipInfo.ixHover = -1;
177 /* The mouse is not over an element with a tooltip, init the hide
@@ -186,18 +180,14 @@
180 }
181 };
182 topObj.onmouseleave = function(e) {
183 /* Hide the tooltip if the mouse is outside the "timelineTableN" element,
184 ** and outside the tooltip. */
185 if(e.relatedTarget && e.relatedTarget != tooltipObj){
 
 
186 tooltipInfo.ixHover = -1;
187 hideGraphTooltip();
 
188 stopDwellTimer();
 
189 stopCloseTimer();
190 }
191 };
192 var canvasDiv;
193 var railPitch;
194

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button