Fossil

Check-in [bba53370]
Login

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

Overview
Comment:Experimental change to have the tooltip appear automatically after a "dwell timeout", in addition to mouse clicks. See the wiki page linked to this branch for more information.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | tooltip-experiments
Files: files | file ages | folders
SHA3-256: bba5337010c0e5e3b12d83e244dddda79931d070116206f885c1ae4380c038fa
User & Date: florian 2019-05-20 08:32:00
Wiki:tooltip-experiments
Context
2019-05-20
09:45
Fix coding typos from the previous commit. check-in: b4f1eb90 user: florian tags: tooltip-experiments
08:32
Experimental change to have the tooltip appear automatically after a "dwell timeout", in addition to mouse clicks. See the wiki page linked to this branch for more information. check-in: bba53370 user: florian tags: tooltip-experiments
08:21
Classic styling for the tooltip (grey shadow, also works with dark backgrounds) and the hyperlink (blue and underlined, to indicate it can be clicked). check-in: cdb85ba9 user: florian tags: tooltip-experiments
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to src/graph.js.

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
...
478
479
480
481
482
483
484



485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
  }
  amendCssOnce = 0;
}
var tooltipObj = document.createElement("span");
tooltipObj.className = "tl-tooltip";
tooltipObj.style.visibility = "hidden";
document.getElementsByClassName("content")[0].appendChild(tooltipObj);









/* 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
  topObj.onmousemove = function(e) {
    var ix = findTxIndex(e);
    var cursor = (ix<0) ? "" : "pointer"; /* Or: cursor = "help"? */
    document.getElementsByTagName('body')[0].style.cursor = cursor;




























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






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

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



    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 = e.x + 4 + window.pageXOffset
      tooltipObj.style.left = x+"px"
      var y = e.y + 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)







>
>
>
>
>
>
>
>











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








>
>
>
>
>
>







 







>
>
>













|

|







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
...
520
521
522
523
524
525
526
527
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
  }
  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);
  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;
      tooltipInfo.idTimer = setTimeout(function() {
        this.tooltipInfo.idTimer = 0;
        showGraphTooltip(
          this.tooltipInfo.ixElement,
          this.tooltipInfo.posX,
          this.tooltipInfo.posY);
      }.bind(window),tooltipInfo.dwellTimeout);
    }
    else
      tooltipInfo.ix = -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.ix = -1;
    }
  };
  var canvasDiv;
  var railPitch;
  var mergeOffset;
  var node, arrow, arrowSmall, line, mArrow, mLine, wArrow, wLine;

................................................................................
    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 ){
      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)