Fossil

Check-in [e0198213f3]
Login
☰Home Timeline Docs Forum Download

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Deduplicate code, and consistently use "style.display" instead of "style.visibility" to show and hide the tooltip.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | tooltip-experiments
Files: files | file ages | folders
SHA3-256: e0198213f3e2a9572721aef63a725d894055fb53ef98101844c4ae9c40c35b62
User & Date: florian 2019-05-21 07:26:00.000
References
2019-05-21
09:40
Fix a bug introduced with [e0198213f3]: using "style.visibility" is essential to calculate the dimensions in the hidden state. ... (check-in: 3850b32cea user: florian tags: tooltip-experiments)
Context
2019-05-21
08:20
Deduplicate more code. ... (check-in: 7fbad143e6 user: florian tags: tooltip-experiments)
07:26
Deduplicate code, and consistently use "style.display" instead of "style.visibility" to show and hide the tooltip. ... (check-in: e0198213f3 user: florian tags: tooltip-experiments)
07:09
Auto-close the tooltip after a timeout, if the mouse pointer is no longer over the associated element. The auto-close timeout is elapsed (and the tooltip closed instantly) if the mouse pointer is over another element, paused (and reset) as long as the mouse pointer is over the tooltip, and cancelled (and the tooltip kept open) if the mouse pointer is moved back over the same element. ... (check-in: 3d5903ce0c user: florian tags: tooltip-experiments)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/graph.js.
︙︙
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108








109
110
111
112
113
114
115

    style.textContent = css;
    document.querySelector("head").appendChild(style);
  }
  amendCssOnce = 0;
}
var tooltipObj = document.createElement("span");
tooltipObj.className = "tl-tooltip";
tooltipObj.style.visibility = "hidden";
document.getElementsByClassName("content")[0].appendChild(tooltipObj);
/* Clear the close timer if the mouse is over the tooltip. */
tooltipObj.onmouseenter = function(e) {
  if (tooltipInfo.idTimerClose != 0) {
    clearTimeout(tooltipInfo.idTimerClose);
    tooltipInfo.idTimerClose = 0;
  }
};
/* Init the close timer if the mouse is no longer over the tooltip. */
tooltipObj.onmouseleave = function(e) {
  if (tooltipInfo.ixActive != -1 && tooltipInfo.idTimerClose == 0) {
    tooltipInfo.idTimerClose = setTimeout(function() {
      tooltipInfo.idTimerClose = 0;
      tooltipInfo.ixActive = -1;
      tooltipObj.style.display = "none";
    }.bind(window),tooltipInfo.closeTimeout);
  }
};
/* This object must be in the global scope, so that (non-shadowed) access is
** possible from within a setTimeout() closure. */
window.tooltipInfo = {
  dwellTimeout: 250,  /* The tooltip dwell timeout. */
  closeTimeout: 3000, /* The tooltip close timeout. */
  idTimer: 0,         /* The tooltip dwell timer id. */
  idTimerClose: 0,    /* The tooltip close timer id. */
  ixHover: -1,        /* The id of the element with the mouse. */
  ixActive: -1,       /* The id of the element with the tooltip. */
  posX: 0, posY: 0    /* The last mouse position. */
};









/* Construct that graph corresponding to the timeline-data-N object */
function TimelineGraph(tx){
  var topObj = document.getElementById("timelineTable"+tx.iTableId);
  amendCss(tx.circleNodes, tx.showArrowheads);
  topObj.onclick = clickOnGraph
  topObj.ondblclick = dblclickOnGraph








|













|
<














>
>
>
>
>
>
>
>








72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

    style.textContent = css;
    document.querySelector("head").appendChild(style);
  }
  amendCssOnce = 0;
}
var tooltipObj = document.createElement("span");
tooltipObj.className = "tl-tooltip";
tooltipObj.style.display = "none";
document.getElementsByClassName("content")[0].appendChild(tooltipObj);
/* Clear the close timer if the mouse is over the tooltip. */
tooltipObj.onmouseenter = function(e) {
  if (tooltipInfo.idTimerClose != 0) {
    clearTimeout(tooltipInfo.idTimerClose);
    tooltipInfo.idTimerClose = 0;
  }
};
/* Init the close timer if the mouse is no longer over the tooltip. */
tooltipObj.onmouseleave = function(e) {
  if (tooltipInfo.ixActive != -1 && tooltipInfo.idTimerClose == 0) {
    tooltipInfo.idTimerClose = setTimeout(function() {
      tooltipInfo.idTimerClose = 0;
      hideGraphTooltip();

    }.bind(window),tooltipInfo.closeTimeout);
  }
};
/* This object must be in the global scope, so that (non-shadowed) access is
** possible from within a setTimeout() closure. */
window.tooltipInfo = {
  dwellTimeout: 250,  /* The tooltip dwell timeout. */
  closeTimeout: 3000, /* The tooltip close timeout. */
  idTimer: 0,         /* The tooltip dwell timer id. */
  idTimerClose: 0,    /* The tooltip close timer id. */
  ixHover: -1,        /* The id of the element with the mouse. */
  ixActive: -1,       /* The id of the element with the tooltip. */
  posX: 0, posY: 0    /* The last mouse position. */
};
/* This function must be in the global scope, so that access is possible from
** within non-local event handlers. */
function hideGraphTooltip() {
  tooltipObj.style.display = "none";
  (function() {
    this.tooltipInfo.ixActive = -1;
  }).call(window);
}

/* Construct that graph corresponding to the timeline-data-N object */
function TimelineGraph(tx){
  var topObj = document.getElementById("timelineTable"+tx.iTableId);
  amendCss(tx.circleNodes, tx.showArrowheads);
  topObj.onclick = clickOnGraph
  topObj.ondblclick = dblclickOnGraph
︙︙
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

    if (tooltipInfo.idTimer != 0) {
      clearTimeout(tooltipInfo.idTimer);
      tooltipInfo.idTimer = 0;
    }
    if (ix >= 0) {
      /* Close the tooltip only if the mouse is over another element, and init
      ** the dwell timer again. */
      if (!isReentry) {
        tooltipInfo.ixActive = -1;
        tooltipObj.style.display = "none";
      }
      tooltipInfo.ixHover = ix;
      tooltipInfo.posX = e.x;
      tooltipInfo.posY = e.y;
      /* Clear the close timer. */
      if (tooltipInfo.idTimerClose != 0) {
        clearTimeout(tooltipInfo.idTimerClose);
        tooltipInfo.idTimerClose = 0;








|
|
<
<








139
140
141
142
143
144
145
146
147


148
149
150
151
152
153
154

    if (tooltipInfo.idTimer != 0) {
      clearTimeout(tooltipInfo.idTimer);
      tooltipInfo.idTimer = 0;
    }
    if (ix >= 0) {
      /* Close the tooltip only if the mouse is over another element, and init
      ** the dwell timer again. */
      if (!isReentry)
        hideGraphTooltip();


      tooltipInfo.ixHover = ix;
      tooltipInfo.posX = e.x;
      tooltipInfo.posY = e.y;
      /* Clear the close timer. */
      if (tooltipInfo.idTimerClose != 0) {
        clearTimeout(tooltipInfo.idTimerClose);
        tooltipInfo.idTimerClose = 0;
︙︙
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195

    else {
      tooltipInfo.ixHover = -1;
      /* The mouse is not over an element with a tooltip, init the hide
      ** timer. */
      if (tooltipInfo.idTimerClose == 0) {
        tooltipInfo.idTimerClose = setTimeout(function() {
          this.tooltipInfo.idTimerClose = 0;
          this.tooltipInfo.ixActive = -1;
          tooltipObj.style.display = "none";
        }.bind(window),tooltipInfo.closeTimeout);
      }
    }
  };
  topObj.onmouseleave = function(e) {
    /* Hide the tooltip if the mouse is outside the "timelineTableN" element,
    ** and outside the tooltip. */
    if (tooltipObj.style.display != "none" &&
          e.relatedTarget &&
          e.relatedTarget != tooltipObj) {
      tooltipInfo.ixHover = -1;
      tooltipInfo.ixActive = -1;
      tooltipObj.style.display = "none";
      /* Clear the dwell timer. */
      if (tooltipInfo.idTimer != 0) {
        clearTimeout(tooltipInfo.idTimer);
        tooltipInfo.idTimer = 0;
      }
      /* Clear the close timer. */
      if (tooltipInfo.idTimerClose != 0) {








|
<











|
<








172
173
174
175
176
177
178
179

180
181
182
183
184
185
186
187
188
189
190
191

192
193
194
195
196
197
198

    else {
      tooltipInfo.ixHover = -1;
      /* The mouse is not over an element with a tooltip, init the hide
      ** timer. */
      if (tooltipInfo.idTimerClose == 0) {
        tooltipInfo.idTimerClose = setTimeout(function() {
          this.tooltipInfo.idTimerClose = 0;
          hideGraphTooltip();

        }.bind(window),tooltipInfo.closeTimeout);
      }
    }
  };
  topObj.onmouseleave = function(e) {
    /* Hide the tooltip if the mouse is outside the "timelineTableN" element,
    ** and outside the tooltip. */
    if (tooltipObj.style.display != "none" &&
          e.relatedTarget &&
          e.relatedTarget != tooltipObj) {
      tooltipInfo.ixHover = -1;
      hideGraphTooltip();

      /* Clear the dwell timer. */
      if (tooltipInfo.idTimer != 0) {
        clearTimeout(tooltipInfo.idTimer);
        tooltipInfo.idTimer = 0;
      }
      /* Clear the close timer. */
      if (tooltipInfo.idTimerClose != 0) {
︙︙
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537

    for( var i=0; i<tx.nrail; i++) mergeBtm[i] = btm;
    for( var i=tx.rowinfo.length-1; i>=0; i-- ){
      drawNode(tx.rowinfo[i], btm);
    }
  }
  var selRow;
  function clickOnNode(e){
    tooltipObj.style.display = "none"
    var p = tx.rowinfo[parseInt(this.id.match(/\d+$/)[0], 10)-tx.iTopRow];
    if( !selRow ){
      selRow = p;
      this.className += " sel";
      canvasDiv.className += " sel";
    }else if( selRow==p ){
      selRow = null;








|








526
527
528
529
530
531
532
533
534
535
536
537
538
539
540

    for( var i=0; i<tx.nrail; i++) mergeBtm[i] = btm;
    for( var i=tx.rowinfo.length-1; i>=0; i-- ){
      drawNode(tx.rowinfo[i], btm);
    }
  }
  var selRow;
  function clickOnNode(e){
    hideGraphTooltip()
    var p = tx.rowinfo[parseInt(this.id.match(/\d+$/)[0], 10)-tx.iTopRow];
    if( !selRow ){
      selRow = p;
      this.className += " sel";
      canvasDiv.className += " sel";
    }else if( selRow==p ){
      selRow = null;
︙︙
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617

  }
  function clickOnGraph(e){
    var ix = findTxIndex(e);
    showGraphTooltip(ix,e.x,e.y);
  }
  function showGraphTooltip(ix,posX,posY){
    if( ix<0 ){
      tooltipObj.style.display = "none"
    }else{  
      var br = tx.rowinfo[ix].br
      var dest = branchHyperlink(ix)
      var hbr = br.replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
      tooltipObj.innerHTML = "<a href=\""+dest+"\">"+hbr+"</a>"
      tooltipObj.style.display = "inline"
      tooltipObj.style.position = "absolute"
      var x = posX + 4 + window.pageXOffset
      tooltipObj.style.left = x+"px"
      var y = posY + window.pageYOffset - tooltipObj.clientHeight - 4
      tooltipObj.style.top = y+"px"
      tooltipObj.style.visibility = "visible"
    }
  }
  function dblclickOnGraph(e){
    var ix = findTxIndex(e);
    var dest = branchHyperlink(ix)
    tooltipObj.style.display = "none"
    window.location.href = dest
  }
  function changeDisplay(selector,value){
    var x = document.getElementsByClassName(selector);
    var n = x.length;
    for(var i=0; i<n; i++) {x[i].style.display = value;}
  }








|









<





|





|








584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600

601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619

  }
  function clickOnGraph(e){
    var ix = findTxIndex(e);
    showGraphTooltip(ix,e.x,e.y);
  }
  function showGraphTooltip(ix,posX,posY){
    if( ix<0 ){
      hideGraphTooltip()
    }else{  
      var br = tx.rowinfo[ix].br
      var dest = branchHyperlink(ix)
      var hbr = br.replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
      tooltipObj.innerHTML = "<a href=\""+dest+"\">"+hbr+"</a>"

      tooltipObj.style.position = "absolute"
      var x = posX + 4 + window.pageXOffset
      tooltipObj.style.left = x+"px"
      var y = posY + window.pageYOffset - tooltipObj.clientHeight - 4
      tooltipObj.style.top = y+"px"
      tooltipObj.style.display = "inline"
    }
  }
  function dblclickOnGraph(e){
    var ix = findTxIndex(e);
    var dest = branchHyperlink(ix)
    hideGraphTooltip()
    window.location.href = dest
  }
  function changeDisplay(selector,value){
    var x = document.getElementsByClassName(selector);
    var n = x.length;
    for(var i=0; i<n; i++) {x[i].style.display = value;}
  }
︙︙
This page was generated in about 0.016s by Fossil 2.26 [1205ec86cb] 2025-04-30 16:57:32