Fossil SCM

Additional simplification of the tooltip javascript.

drh 2019-05-22 14:34 UTC tooltip-experiments
Commit c0f8f57835fe368e80fa2987ed1c35b717afa4ff0bdbde3aa5f7a55146eb5ad0
Parent 2189edcd572747a…
1 file changed +34 -29
~ src/graph.js
M src/graph.js
+34 -29
--- src/graph.js
+++ src/graph.js
@@ -1,6 +1,9 @@
11
 /* This module contains javascript needed to render timeline graphs in Fossil.
2
+**
3
+** There can be multiple graphs on a single webpage, but this script is only
4
+** loaded once.
25
 **
36
 ** Prior to sourcing this script, there should be a separate
47
 ** <script type='application/json' id='timeline-data-NN'> for each graph,
58
 ** each containing JSON like this:
69
 **
@@ -57,10 +60,15 @@
5760
 ** merges.
5861
 ** ci: "cherrypick-in". Like "mi" except for cherrypick merges.
5962
 ** omitted if there are no cherrypick merges.
6063
 ** h: The artifact hash of the object being graphed
6164
 */
65
+
66
+/* The amendCss() function does a one-time change to the CSS to account
67
+** for the "circleNodes" and "showArrowheads" settings. Do this change
68
+** only once, even if there are multiple graphs being rendered.
69
+*/
6270
 var amendCssOnce = 1; // Only change the CSS one time
6371
 function amendCss(circleNodes,showArrowheads){
6472
 if( !amendCssOnce ) return;
6573
 var css = "";
6674
 if( circleNodes ){
@@ -74,26 +82,22 @@
7482
 style.textContent = css;
7583
 document.querySelector("head").appendChild(style);
7684
 }
7785
 amendCssOnce = 0;
7886
 }
87
+
88
+/* The <span> object that holds the tooltip */
7989
 var tooltipObj = document.createElement("span");
8090
 tooltipObj.className = "tl-tooltip";
8191
 tooltipObj.style.display = "none";
8292
 document.getElementsByClassName("content")[0].appendChild(tooltipObj);
83
-/* Clear the close timer if the mouse is over the tooltip. */
84
-tooltipObj.onmouseenter = function(e) {
85
- stopCloseTimer();
86
-};
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();
93
+tooltipObj.onmouseenter = function(){stopCloseTimer();}
94
+tooltipObj.onmouseleave = function(){
95
+ if (tooltipInfo.ixActive != -1) resumeCloseTimer();
9196
 };
9297
93
-/* This object must be in the global scope, so that (non-shadowed) access is
94
-** possible from within a setTimeout() closure. */
98
+/* State information for the tooltip popup and its timers */
9599
 window.tooltipInfo = {
96100
 dwellTimeout: 250, /* The tooltip dwell timeout. */
97101
 closeTimeout: 3000, /* The tooltip close timeout. */
98102
 idTimer: 0, /* The tooltip dwell timer id. */
99103
 idTimerClose: 0, /* The tooltip close timer id. */
@@ -100,11 +104,11 @@
100104
 ixHover: -1, /* The id of the element with the mouse. */
101105
 ixActive: -1, /* The id of the element with the tooltip. */
102106
 posX: 0, posY: 0 /* The last mouse position. */
103107
 };
104108
105
-
109
+/* Functions used to control the tooltip popup and its timer */
106110
 function hideGraphTooltip(){
107111
 stopCloseTimer();
108112
 tooltipObj.style.display = "none";
109113
 tooltipInfo.ixActive = -1;
110114
 }
@@ -128,11 +132,12 @@
128132
 clearTimeout(tooltipInfo.idTimerClose);
129133
 tooltipInfo.idTimerClose = 0;
130134
 }
131135
 }
132136
133
-/* Construct that graph corresponding to the timeline-data-N object */
137
+/* Construct that graph corresponding to the timeline-data-N object that
138
+** is passed in by the tx parameter */
134139
 function TimelineGraph(tx){
135140
 var topObj = document.getElementById("timelineTable"+tx.iTableId);
136141
 amendCss(tx.circleNodes, tx.showArrowheads);
137142
 tooltipInfo.dwellTimeout = tx.dwellTimeout
138143
 tooltipInfo.closeTimeout = tx.closeTimeout
@@ -151,33 +156,29 @@
151156
 /* The tooltip is either not visible, or the mouse is over a different
152157
 ** element, so clear the dwell timer, and record the new element id and
153158
 ** mouse position. */
154159
 stopDwellTimer();
155160
 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();
161
+ if(!isReentry){
162
+ /* Close existing tooltip only if the mouse is over a different element */
163
+ hideGraphTooltip();
164
+ }
159165
 tooltipInfo.ixHover = ix;
160166
 tooltipInfo.posX = e.x;
161167
 tooltipInfo.posY = e.y;
162
- /* Clear the close timer, if not already cleared by hideGraphTooltip(). */
163168
 stopCloseTimer();
164169
 if (!isReentry && tooltipInfo.dwellTimeout>0) {
165170
 tooltipInfo.idTimer = setTimeout(function() {
166171
 tooltipInfo.idTimer = 0;
167
- /* Clear the timer to hide the tooltip. */
168172
 stopCloseTimer();
169
- showGraphTooltip(tooltipInfo.ixHover,
170
- tooltipInfo.posX,tooltipInfo.posY);
171
- tooltipInfo.ixActive = tooltipInfo.ixHover;
173
+ showGraphTooltip();
172174
 },tooltipInfo.dwellTimeout);
173175
 }
174176
 }
175177
 else {
178
+ /* The mouse is not over an element with a tooltip */
176179
 tooltipInfo.ixHover = -1;
177
- /* The mouse is not over an element with a tooltip, init the hide
178
- ** timer. */
179180
 resumeCloseTimer();
180181
 }
181182
 };
182183
 topObj.onmouseleave = function(e) {
183184
 /* Hide the tooltip if the mouse is outside the "timelineTableN" element,
@@ -569,17 +570,20 @@
569570
 dest += tx.fileDiff ? "&m&cf=" : "&m&c="
570571
 dest += encodeURIComponent(tx.rowinfo[ix].h)
571572
 return dest
572573
 }
573574
 function clickOnGraph(e){
574
- var ix = findTxIndex(e);
575
- showGraphTooltip(ix,e.x,e.y);
575
+ tooltipInfo.ixHover = findTxIndex(e);
576
+ tooltipInfo.posX = e.x;
577
+ tooltipInfo.posY = e.y;
578
+ showGraphTooltip();
576579
 }
577
- function showGraphTooltip(ix,posX,posY){
578
- if( ix<0 ){
580
+ function showGraphTooltip(){
581
+ if( tooltipInfo.ixHoever<0 ){
579582
 hideGraphTooltip()
580
- }else{
583
+ }else{
584
+ var ix = tooltipInfo.ixHover
581585
 var br = tx.rowinfo[ix].br
582586
 var dest = branchHyperlink(ix)
583587
 var hbr = br.replace(/&/g, "&amp;")
584588
 .replace(/</g, "&lt;")
585589
 .replace(/>/g, "&gt;")
@@ -588,15 +592,16 @@
588592
 /* Setup while hidden, to ensure proper dimensions. */
589593
 tooltipObj.style.visibility = "hidden"
590594
 tooltipObj.innerHTML = "<a href=\""+dest+"\">"+hbr+"</a>"
591595
 tooltipObj.style.display = "inline"
592596
 tooltipObj.style.position = "absolute"
593
- var x = posX + 4 + window.pageXOffset
597
+ var x = tooltipInfo.posX + 4 + window.pageXOffset
594598
 tooltipObj.style.left = x+"px"
595
- var y = posY + window.pageYOffset - tooltipObj.clientHeight - 4
599
+ var y = tooltipInfo.posY + window.pageYOffset - tooltipObj.clientHeight - 4
596600
 tooltipObj.style.top = y+"px"
597601
 tooltipObj.style.visibility = "visible"
602
+ tooltipInfo.ixActive = ix;
598603
 }
599604
 }
600605
 function dblclickOnGraph(e){
601606
 var ix = findTxIndex(e);
602607
 var dest = branchHyperlink(ix)
603608
--- src/graph.js
+++ src/graph.js
@@ -1,6 +1,9 @@
1 /* This module contains javascript needed to render timeline graphs in Fossil.
 
 
 
2 **
3 ** Prior to sourcing this script, there should be a separate
4 ** <script type='application/json' id='timeline-data-NN'> for each graph,
5 ** each containing JSON like this:
6 **
@@ -57,10 +60,15 @@
57 ** merges.
58 ** ci: "cherrypick-in". Like "mi" except for cherrypick merges.
59 ** omitted if there are no cherrypick merges.
60 ** h: The artifact hash of the object being graphed
61 */
 
 
 
 
 
62 var amendCssOnce = 1; // Only change the CSS one time
63 function amendCss(circleNodes,showArrowheads){
64 if( !amendCssOnce ) return;
65 var css = "";
66 if( circleNodes ){
@@ -74,26 +82,22 @@
74 style.textContent = css;
75 document.querySelector("head").appendChild(style);
76 }
77 amendCssOnce = 0;
78 }
 
 
79 var tooltipObj = document.createElement("span");
80 tooltipObj.className = "tl-tooltip";
81 tooltipObj.style.display = "none";
82 document.getElementsByClassName("content")[0].appendChild(tooltipObj);
83 /* Clear the close timer if the mouse is over the tooltip. */
84 tooltipObj.onmouseenter = function(e) {
85 stopCloseTimer();
86 };
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 idTimer: 0, /* The tooltip dwell timer id. */
99 idTimerClose: 0, /* The tooltip close timer id. */
@@ -100,11 +104,11 @@
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 }
@@ -128,11 +132,12 @@
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);
137 tooltipInfo.dwellTimeout = tx.dwellTimeout
138 tooltipInfo.closeTimeout = tx.closeTimeout
@@ -151,33 +156,29 @@
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
178 ** timer. */
179 resumeCloseTimer();
180 }
181 };
182 topObj.onmouseleave = function(e) {
183 /* Hide the tooltip if the mouse is outside the "timelineTableN" element,
@@ -569,17 +570,20 @@
569 dest += tx.fileDiff ? "&m&cf=" : "&m&c="
570 dest += encodeURIComponent(tx.rowinfo[ix].h)
571 return dest
572 }
573 function clickOnGraph(e){
574 var ix = findTxIndex(e);
575 showGraphTooltip(ix,e.x,e.y);
 
 
576 }
577 function showGraphTooltip(ix,posX,posY){
578 if( ix<0 ){
579 hideGraphTooltip()
580 }else{
 
581 var br = tx.rowinfo[ix].br
582 var dest = branchHyperlink(ix)
583 var hbr = br.replace(/&/g, "&amp;")
584 .replace(/</g, "&lt;")
585 .replace(/>/g, "&gt;")
@@ -588,15 +592,16 @@
588 /* Setup while hidden, to ensure proper dimensions. */
589 tooltipObj.style.visibility = "hidden"
590 tooltipObj.innerHTML = "<a href=\""+dest+"\">"+hbr+"</a>"
591 tooltipObj.style.display = "inline"
592 tooltipObj.style.position = "absolute"
593 var x = posX + 4 + window.pageXOffset
594 tooltipObj.style.left = x+"px"
595 var y = posY + window.pageYOffset - tooltipObj.clientHeight - 4
596 tooltipObj.style.top = y+"px"
597 tooltipObj.style.visibility = "visible"
 
598 }
599 }
600 function dblclickOnGraph(e){
601 var ix = findTxIndex(e);
602 var dest = branchHyperlink(ix)
603
--- src/graph.js
+++ src/graph.js
@@ -1,6 +1,9 @@
1 /* This module contains javascript needed to render timeline graphs in Fossil.
2 **
3 ** There can be multiple graphs on a single webpage, but this script is only
4 ** loaded once.
5 **
6 ** Prior to sourcing this script, there should be a separate
7 ** <script type='application/json' id='timeline-data-NN'> for each graph,
8 ** each containing JSON like this:
9 **
@@ -57,10 +60,15 @@
60 ** merges.
61 ** ci: "cherrypick-in". Like "mi" except for cherrypick merges.
62 ** omitted if there are no cherrypick merges.
63 ** h: The artifact hash of the object being graphed
64 */
65
66 /* The amendCss() function does a one-time change to the CSS to account
67 ** for the "circleNodes" and "showArrowheads" settings. Do this change
68 ** only once, even if there are multiple graphs being rendered.
69 */
70 var amendCssOnce = 1; // Only change the CSS one time
71 function amendCss(circleNodes,showArrowheads){
72 if( !amendCssOnce ) return;
73 var css = "";
74 if( circleNodes ){
@@ -74,26 +82,22 @@
82 style.textContent = css;
83 document.querySelector("head").appendChild(style);
84 }
85 amendCssOnce = 0;
86 }
87
88 /* The <span> object that holds the tooltip */
89 var tooltipObj = document.createElement("span");
90 tooltipObj.className = "tl-tooltip";
91 tooltipObj.style.display = "none";
92 document.getElementsByClassName("content")[0].appendChild(tooltipObj);
93 tooltipObj.onmouseenter = function(){stopCloseTimer();}
94 tooltipObj.onmouseleave = function(){
95 if (tooltipInfo.ixActive != -1) resumeCloseTimer();
 
 
 
 
 
96 };
97
98 /* State information for the tooltip popup and its timers */
 
99 window.tooltipInfo = {
100 dwellTimeout: 250, /* The tooltip dwell timeout. */
101 closeTimeout: 3000, /* The tooltip close timeout. */
102 idTimer: 0, /* The tooltip dwell timer id. */
103 idTimerClose: 0, /* The tooltip close timer id. */
@@ -100,11 +104,11 @@
104 ixHover: -1, /* The id of the element with the mouse. */
105 ixActive: -1, /* The id of the element with the tooltip. */
106 posX: 0, posY: 0 /* The last mouse position. */
107 };
108
109 /* Functions used to control the tooltip popup and its timer */
110 function hideGraphTooltip(){
111 stopCloseTimer();
112 tooltipObj.style.display = "none";
113 tooltipInfo.ixActive = -1;
114 }
@@ -128,11 +132,12 @@
132 clearTimeout(tooltipInfo.idTimerClose);
133 tooltipInfo.idTimerClose = 0;
134 }
135 }
136
137 /* Construct that graph corresponding to the timeline-data-N object that
138 ** is passed in by the tx parameter */
139 function TimelineGraph(tx){
140 var topObj = document.getElementById("timelineTable"+tx.iTableId);
141 amendCss(tx.circleNodes, tx.showArrowheads);
142 tooltipInfo.dwellTimeout = tx.dwellTimeout
143 tooltipInfo.closeTimeout = tx.closeTimeout
@@ -151,33 +156,29 @@
156 /* The tooltip is either not visible, or the mouse is over a different
157 ** element, so clear the dwell timer, and record the new element id and
158 ** mouse position. */
159 stopDwellTimer();
160 if(ix >= 0){
161 if(!isReentry){
162 /* Close existing tooltip only if the mouse is over a different element */
163 hideGraphTooltip();
164 }
165 tooltipInfo.ixHover = ix;
166 tooltipInfo.posX = e.x;
167 tooltipInfo.posY = e.y;
 
168 stopCloseTimer();
169 if (!isReentry && tooltipInfo.dwellTimeout>0) {
170 tooltipInfo.idTimer = setTimeout(function() {
171 tooltipInfo.idTimer = 0;
 
172 stopCloseTimer();
173 showGraphTooltip();
 
 
174 },tooltipInfo.dwellTimeout);
175 }
176 }
177 else {
178 /* The mouse is not over an element with a tooltip */
179 tooltipInfo.ixHover = -1;
 
 
180 resumeCloseTimer();
181 }
182 };
183 topObj.onmouseleave = function(e) {
184 /* Hide the tooltip if the mouse is outside the "timelineTableN" element,
@@ -569,17 +570,20 @@
570 dest += tx.fileDiff ? "&m&cf=" : "&m&c="
571 dest += encodeURIComponent(tx.rowinfo[ix].h)
572 return dest
573 }
574 function clickOnGraph(e){
575 tooltipInfo.ixHover = findTxIndex(e);
576 tooltipInfo.posX = e.x;
577 tooltipInfo.posY = e.y;
578 showGraphTooltip();
579 }
580 function showGraphTooltip(){
581 if( tooltipInfo.ixHoever<0 ){
582 hideGraphTooltip()
583 }else{
584 var ix = tooltipInfo.ixHover
585 var br = tx.rowinfo[ix].br
586 var dest = branchHyperlink(ix)
587 var hbr = br.replace(/&/g, "&amp;")
588 .replace(/</g, "&lt;")
589 .replace(/>/g, "&gt;")
@@ -588,15 +592,16 @@
592 /* Setup while hidden, to ensure proper dimensions. */
593 tooltipObj.style.visibility = "hidden"
594 tooltipObj.innerHTML = "<a href=\""+dest+"\">"+hbr+"</a>"
595 tooltipObj.style.display = "inline"
596 tooltipObj.style.position = "absolute"
597 var x = tooltipInfo.posX + 4 + window.pageXOffset
598 tooltipObj.style.left = x+"px"
599 var y = tooltipInfo.posY + window.pageYOffset - tooltipObj.clientHeight - 4
600 tooltipObj.style.top = y+"px"
601 tooltipObj.style.visibility = "visible"
602 tooltipInfo.ixActive = ix;
603 }
604 }
605 function dblclickOnGraph(e){
606 var ix = findTxIndex(e);
607 var dest = branchHyperlink(ix)
608

Keyboard Shortcuts

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