Fossil

Check-in [c0f8f578]
Login

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

Overview
Comment:Additional simplification of the tooltip javascript.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | tooltip-experiments
Files: files | file ages | folders
SHA3-256: c0f8f57835fe368e80fa2987ed1c35b717afa4ff0bdbde3aa5f7a55146eb5ad0
User & Date: drh 2019-05-22 14:34:07
Wiki:tooltip-experiments
Context
2019-05-22
15:42
The tooltip over a graph node shows a link to the check-in or artifact that the node represents, not a link to the branch. check-in: fa811f95 user: drh tags: tooltip-experiments
14:34
Additional simplification of the tooltip javascript. check-in: c0f8f578 user: drh tags: tooltip-experiments
11:37
Simplifications to the javascript for tooltip handling. check-in: 2189edcd user: drh tags: tooltip-experiments
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to src/graph.js.

1



2
3
4
5
6
7
8
..
55
56
57
58
59
60
61





62
63
64
65
66
67
68
..
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
...
126
127
128
129
130
131
132
133

134
135
136
137
138
139
140
...
149
150
151
152
153
154
155

156
157
158

159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175

176
177
178
179
180
181
182
183
184
185
...
567
568
569
570
571
572
573
574


575
576
577
578

579
580

581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597

598
599
600
601
602
603
604
/* This module contains javascript needed to render timeline graphs in Fossil.



**
** Prior to sourcing this script, there should be a separate
** <script type='application/json' id='timeline-data-NN'> for each graph,
** each containing JSON like this:
**
**   { "iTableId": INTEGER,         // Table sequence number (NN)
**     "circleNodes": BOOLEAN,      // True for circle nodes. False for squares
................................................................................
**        and a thin merge-arrow descender is drawn to the bottom of
**        the screen. This array is omitted if there are no inbound
**        merges.
**   ci:  "cherrypick-in". Like "mi" except for cherrypick merges.
**        omitted if there are no cherrypick merges.
**    h:  The artifact hash of the object being graphed
*/





var amendCssOnce = 1; // Only change the CSS one time
function amendCss(circleNodes,showArrowheads){
  if( !amendCssOnce ) return;
  var css = "";
  if( circleNodes ){
    css += ".tl-node, .tl-node:after { border-radius: 50%; }";
  }
................................................................................
  if( css!=="" ){
    var style = document.createElement("style");
    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) {
  stopCloseTimer();
};
/* Init the close timer if the mouse is no longer over the tooltip. */
tooltipObj.onmouseleave = function(e) {
  if (tooltipInfo.ixActive != -1)
    resumeCloseTimer();
};

/* 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. */
};


function hideGraphTooltip(){
  stopCloseTimer();
  tooltipObj.style.display = "none";
  tooltipInfo.ixActive = -1;
}
function stopDwellTimer(){
  if (tooltipInfo.idTimer != 0) {
................................................................................
function stopCloseTimer(){
  if (tooltipInfo.idTimerClose != 0) {
    clearTimeout(tooltipInfo.idTimerClose);
    tooltipInfo.idTimerClose = 0;
  }
}

/* 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);
  tooltipInfo.dwellTimeout = tx.dwellTimeout
  tooltipInfo.closeTimeout = tx.closeTimeout
  topObj.onclick = clickOnGraph
  topObj.ondblclick = dblclickOnGraph
................................................................................
      if(-1==tooltipInfo.ixHover && ix==tooltipInfo.ixActive) isReentry = true;
    }
    /* The tooltip is either not visible, or the mouse is over a different
    ** element, so clear the dwell timer, and record the new element id and
    ** mouse position. */
    stopDwellTimer();
    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 not already cleared by hideGraphTooltip(). */
      stopCloseTimer();
      if (!isReentry && tooltipInfo.dwellTimeout>0) {
        tooltipInfo.idTimer = setTimeout(function() {
          tooltipInfo.idTimer = 0;
          /* Clear the timer to hide the tooltip. */
          stopCloseTimer();
          showGraphTooltip(tooltipInfo.ixHover,
                           tooltipInfo.posX,tooltipInfo.posY);
          tooltipInfo.ixActive = tooltipInfo.ixHover;
        },tooltipInfo.dwellTimeout);
      }
    }
    else {

      tooltipInfo.ixHover = -1;
      /* The mouse is not over an element with a tooltip, init the hide
      ** timer. */
      resumeCloseTimer();
    }
  };
  topObj.onmouseleave = function(e) {
    /* Hide the tooltip if the mouse is outside the "timelineTableN" element,
    ** and outside the tooltip. */
    if(e.relatedTarget && e.relatedTarget != tooltipObj){
................................................................................
    var br = tx.rowinfo[ix].br
    var dest = tx.baseUrl + "/timeline?r=" + encodeURIComponent(br)
    dest += tx.fileDiff ? "&m&cf=" : "&m&c="
    dest += encodeURIComponent(tx.rowinfo[ix].h)
    return dest
  }
  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;");
      /* Setup while hidden, to ensure proper dimensions. */
      tooltipObj.style.visibility = "hidden"
      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)
    hideGraphTooltip()
    window.location.href = dest

>
>
>







 







>
>
>
>
>







 







>
>




<
|
<
<
<
|
|
<


<
<
>










|







 







|
>







 







>
|
<
|
>



<




<

|
<
<




>

<
<







 







|
>
>
|

|
<
>

|
>












|

|


>







1
2
3
4
5
6
7
8
9
10
11
..
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
..
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
...
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
...
154
155
156
157
158
159
160
161
162

163
164
165
166
167

168
169
170
171

172
173


174
175
176
177
178
179


180
181
182
183
184
185
186
...
568
569
570
571
572
573
574
575
576
577
578
579
580

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
/* This module contains javascript needed to render timeline graphs in Fossil.
**
** There can be multiple graphs on a single webpage, but this script is only
** loaded once.  
**
** Prior to sourcing this script, there should be a separate
** <script type='application/json' id='timeline-data-NN'> for each graph,
** each containing JSON like this:
**
**   { "iTableId": INTEGER,         // Table sequence number (NN)
**     "circleNodes": BOOLEAN,      // True for circle nodes. False for squares
................................................................................
**        and a thin merge-arrow descender is drawn to the bottom of
**        the screen. This array is omitted if there are no inbound
**        merges.
**   ci:  "cherrypick-in". Like "mi" except for cherrypick merges.
**        omitted if there are no cherrypick merges.
**    h:  The artifact hash of the object being graphed
*/

/* The amendCss() function does a one-time change to the CSS to account
** for the "circleNodes" and "showArrowheads" settings.  Do this change
** only once, even if there are multiple graphs being rendered.
*/
var amendCssOnce = 1; // Only change the CSS one time
function amendCss(circleNodes,showArrowheads){
  if( !amendCssOnce ) return;
  var css = "";
  if( circleNodes ){
    css += ".tl-node, .tl-node:after { border-radius: 50%; }";
  }
................................................................................
  if( css!=="" ){
    var style = document.createElement("style");
    style.textContent = css;
    document.querySelector("head").appendChild(style);
  }
  amendCssOnce = 0;
}

/* The <span> object that holds the tooltip */
var tooltipObj = document.createElement("span");
tooltipObj.className = "tl-tooltip";
tooltipObj.style.display = "none";
document.getElementsByClassName("content")[0].appendChild(tooltipObj);

tooltipObj.onmouseenter = function(){stopCloseTimer();}



tooltipObj.onmouseleave = function(){
  if (tooltipInfo.ixActive != -1) resumeCloseTimer();

};



/* State information for the tooltip popup and its timers */
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. */
};

/* Functions used to control the tooltip popup and its timer */
function hideGraphTooltip(){
  stopCloseTimer();
  tooltipObj.style.display = "none";
  tooltipInfo.ixActive = -1;
}
function stopDwellTimer(){
  if (tooltipInfo.idTimer != 0) {
................................................................................
function stopCloseTimer(){
  if (tooltipInfo.idTimerClose != 0) {
    clearTimeout(tooltipInfo.idTimerClose);
    tooltipInfo.idTimerClose = 0;
  }
}

/* Construct that graph corresponding to the timeline-data-N object that
** is passed in by the tx parameter */
function TimelineGraph(tx){
  var topObj = document.getElementById("timelineTable"+tx.iTableId);
  amendCss(tx.circleNodes, tx.showArrowheads);
  tooltipInfo.dwellTimeout = tx.dwellTimeout
  tooltipInfo.closeTimeout = tx.closeTimeout
  topObj.onclick = clickOnGraph
  topObj.ondblclick = dblclickOnGraph
................................................................................
      if(-1==tooltipInfo.ixHover && ix==tooltipInfo.ixActive) isReentry = true;
    }
    /* The tooltip is either not visible, or the mouse is over a different
    ** element, so clear the dwell timer, and record the new element id and
    ** mouse position. */
    stopDwellTimer();
    if(ix >= 0){
      if(!isReentry){
        /* Close existing tooltip only if the mouse is over a different element */

        hideGraphTooltip();
      }
      tooltipInfo.ixHover = ix;
      tooltipInfo.posX = e.x;
      tooltipInfo.posY = e.y;

      stopCloseTimer();
      if (!isReentry && tooltipInfo.dwellTimeout>0) {
        tooltipInfo.idTimer = setTimeout(function() {
          tooltipInfo.idTimer = 0;

          stopCloseTimer();
          showGraphTooltip();


        },tooltipInfo.dwellTimeout);
      }
    }
    else {
      /* The mouse is not over an element with a tooltip */
      tooltipInfo.ixHover = -1;


      resumeCloseTimer();
    }
  };
  topObj.onmouseleave = function(e) {
    /* Hide the tooltip if the mouse is outside the "timelineTableN" element,
    ** and outside the tooltip. */
    if(e.relatedTarget && e.relatedTarget != tooltipObj){
................................................................................
    var br = tx.rowinfo[ix].br
    var dest = tx.baseUrl + "/timeline?r=" + encodeURIComponent(br)
    dest += tx.fileDiff ? "&m&cf=" : "&m&c="
    dest += encodeURIComponent(tx.rowinfo[ix].h)
    return dest
  }
  function clickOnGraph(e){
    tooltipInfo.ixHover = findTxIndex(e);
    tooltipInfo.posX = e.x;
    tooltipInfo.posY = e.y;
    showGraphTooltip();
  }
  function showGraphTooltip(){

    if( tooltipInfo.ixHoever<0 ){
      hideGraphTooltip()
    }else{
      var ix = tooltipInfo.ixHover
      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;");
      /* Setup while hidden, to ensure proper dimensions. */
      tooltipObj.style.visibility = "hidden"
      tooltipObj.innerHTML = "<a href=\""+dest+"\">"+hbr+"</a>"
      tooltipObj.style.display = "inline"
      tooltipObj.style.position = "absolute"
      var x = tooltipInfo.posX + 4 + window.pageXOffset
      tooltipObj.style.left = x+"px"
      var y = tooltipInfo.posY + window.pageYOffset - tooltipObj.clientHeight - 4
      tooltipObj.style.top = y+"px"
      tooltipObj.style.visibility = "visible"
      tooltipInfo.ixActive = ix;
    }
  }
  function dblclickOnGraph(e){
    var ix = findTxIndex(e);
    var dest = branchHyperlink(ix)
    hideGraphTooltip()
    window.location.href = dest