Fossil

Check-in [fde231b2]
Login

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

Overview
Comment:Resolve the fork.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | tooltip-experiments
Files: files | file ages | folders
SHA3-256: fde231b274e3b0e6abe3e17e2f587c913291ff7a7b0c2eec594dd397a121a10d
User & Date: florian 2019-05-21 08:27:00
Wiki:tooltip-experiments
Context
2019-05-21
09:12
Also add a configuration option to set the closeTimeout for tooltips. check-in: e45429d7 user: florian tags: tooltip-experiments
08:27
Resolve the fork. check-in: fde231b2 user: florian tags: tooltip-experiments
08:20
Deduplicate more code. check-in: 7fbad143 user: florian tags: tooltip-experiments
02:15
Add a configuration option under the Admin/Timeline setup menu to set the dwellTimeout for tooltips. check-in: 5fc142df user: drh tags: tooltip-experiments
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to src/graph.js.

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


123
124
125
126

127
128
129
130
131




132
133
134
135
136
137
138
139

140
141
142
143
144
145

146
147
148
149
150
151
152
...
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
...
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
    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);









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

  idTimer: 0,         /* The tooltip dwell timer. */
  ixElement: -1,      /* The id of the last hovered element. */



  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);
  tooltipInfo.dwellTimeout = tx.dwellTimeout
  topObj.onclick = clickOnGraph
................................................................................
  topObj.ondblclick = dblclickOnGraph
  topObj.onmousemove = function(e) {
    var ix = findTxIndex(e);
    var cursor = (ix<0) ? "" : "pointer"; /* Or: cursor = "help"? */
    document.getElementsByTagName('body')[0].style.cursor = cursor;
    /* Keep the already visible tooltip at a constant position, as long as the
    ** mouse is over the same element. */

    if (tooltipObj.style.display != "none" && ix == tooltipInfo.ixElement)

      return;



    /* 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. */
    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. */
      tooltipObj.style.display = "none";

      tooltipInfo.ixElement = ix;
      tooltipInfo.posX = e.x;
      tooltipInfo.posY = e.y;


      if( tooltipInfo.dwellTimeout>0 ){
        tooltipInfo.idTimer = setTimeout(function() {
          this.tooltipInfo.idTimer = 0;


          showGraphTooltip(
            this.tooltipInfo.ixElement,
            this.tooltipInfo.posX,
            this.tooltipInfo.posY);

        }.bind(window),tooltipInfo.dwellTimeout);
      }
    }
    else
      tooltipInfo.ixElement = -1;




  };
  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) {
      tooltipObj.style.display = "none";

      /* Clear the dwell timer. */
      if (tooltipInfo.idTimer != 0) {
        clearTimeout(tooltipInfo.idTimer);
        tooltipInfo.idTimer = 0;
      }
      tooltipInfo.ixElement = -1;

    }
  };
  var canvasDiv;
  var railPitch;
  var mergeOffset;
  var node, arrow, arrowSmall, line, mArrow, mLine, wArrow, wLine;

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







|

>
>
>
>
>
>
>
>
>




>
|
<
>
>
>


>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







 







>
|
>
|
>
>
>



|
<
<
<



|
>
|


>
>
|


>
>

|


>



|
|
>
>
>
>







|
>

<
|
|
<
<
>







 







|







 







|









<





|





|







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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
...
137
138
139
140
141
142
143
144
145
146
147
148
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
186
187
188
189
190
191
192
193

194
195


196
197
198
199
200
201
202
203
...
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
...
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
610
611
612
613
614
    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. */
};
/* These functions must be in the global scope, so that access is possible from
** within (non-local) event handlers. */
var hideGraphTooltip = function() {
  stopCloseTimer();
  tooltipObj.style.display = "none";
  this.tooltipInfo.ixActive = -1;
}.bind(window);
var stopDwellTimer = function() {
  if (this.tooltipInfo.idTimer != 0) {
    clearTimeout(this.tooltipInfo.idTimer);
    this.tooltipInfo.idTimer = 0;
  }
}.bind(window);
var resumeCloseTimer = function() {
  /* This timer must be stopped explicitly to reset the elapsed timeout. */
  if (this.tooltipInfo.idTimerClose == 0) {
    this.tooltipInfo.idTimerClose = setTimeout(function() {
      this.tooltipInfo.idTimerClose = 0;
      hideGraphTooltip();
    }.bind(window),this.tooltipInfo.closeTimeout);
  }
}.bind(window);
var stopCloseTimer = function() {
  if (this.tooltipInfo.idTimerClose != 0) {
    clearTimeout(this.tooltipInfo.idTimerClose);
    this.tooltipInfo.idTimerClose = 0;
  }
}.bind(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);
  tooltipInfo.dwellTimeout = tx.dwellTimeout
  topObj.onclick = clickOnGraph
................................................................................
  topObj.ondblclick = dblclickOnGraph
  topObj.onmousemove = function(e) {
    var ix = findTxIndex(e);
    var cursor = (ix<0) ? "" : "pointer"; /* Or: cursor = "help"? */
    document.getElementsByTagName('body')[0].style.cursor = cursor;
    /* Keep the already visible tooltip at a constant position, as long as the
    ** mouse is over the same element. */
    var isReentry = false;  // Detect mouse move back to same element.
    if (tooltipObj.style.display != "none") {
      if (ix == tooltipInfo.ixHover)
        return;
      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() {
          this.tooltipInfo.idTimer = 0;
          /* Clear the timer to hide the tooltip. */
          stopCloseTimer();
          showGraphTooltip(
            this.tooltipInfo.ixHover,
            this.tooltipInfo.posX,
            this.tooltipInfo.posY);
          this.tooltipInfo.ixActive = this.tooltipInfo.ixHover;
        }.bind(window),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 (tooltipObj.style.display != "none" &&
          e.relatedTarget &&
          e.relatedTarget != tooltipObj) {
      tooltipInfo.ixHover = -1;
      hideGraphTooltip();
      /* Clear the dwell timer. */

      stopDwellTimer();
      /* Clear the close timer. */


      stopCloseTimer();
    }
  };
  var canvasDiv;
  var railPitch;
  var mergeOffset;
  var node, arrow, arrowSmall, line, mArrow, mLine, wArrow, wLine;

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