Fossil

Check-in [371943c9]
Login

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

Overview
Comment:Add a "Copy Hash" icon to the tooltip, to copy the hash or branch name of the underlying element to the clipboard. See the wiki page linked to this branch for more information.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | tooltip-copyhash
Files: files | file ages | folders
SHA3-256: 371943c936e649b62e4af5f8e6f8d5e9323d30d18d5f487d3c218fd361d9f457
User & Date: florian 2019-05-27 09:19:00
Wiki:tooltip-copyhash
Context
2019-05-28
08:11
Move the code to setup the "Copy Hash" icon to a separate function, and link the icon to the target element through a "data-copytarget" attribute, so that "Copy Hash" icons could be added in other places than just tooltips. check-in: 54f0ae78 user: florian tags: tooltip-copyhash
2019-05-27
09:19
Add a "Copy Hash" icon to the tooltip, to copy the hash or branch name of the underlying element to the clipboard. See the wiki page linked to this branch for more information. check-in: 371943c9 user: florian tags: tooltip-copyhash
06:58
Ensure the close timer is started for tooltips belonging to nodes instead of rails, and prevent an out-of-bounds array access for double-clicks outside of rails. check-in: d57c1a79 user: florian tags: tooltip-experiments
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to src/graph.js.

100
101
102
103
104
105
106

107
108
109
110
111
112
113
...
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
620
621
622
623
624
625
626
627
628





629
630
631
632
633
634
635
...
742
743
744
745
746
747
748






































  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. */
  nodeHover: null,    /* Graph node under mouse when ixHover==-2 */

  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";
................................................................................
    var html = null
    var ix = -1
    if( tooltipInfo.ixHover==-2 ){
      ix = parseInt(tooltipInfo.nodeHover.id.match(/\d+$/)[0],10)-tx.iTopRow
      var h = tx.rowinfo[ix].h
      var dest = tx.baseUrl + "/info/" + h
      if( tx.fileDiff ){
        html = "artifact <a href=\""+dest+"\">"+h+"</a>"
      }else{
        html = "check-in <a href=\""+dest+"\">"+h+"</a>"
      }
      tooltipInfo.ixActive = -2;
    }else if( tooltipInfo.ixHover>=0 ){
      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;");
      html = "branch <a href=\""+dest+"\">"+hbr+"</a>"
      tooltipInfo.ixActive = ix;
    }
    if( html ){
      /* Setup while hidden, to ensure proper dimensions. */





















      var s = getComputedStyle(document.body)
      if( tx.rowinfo[ix].bg.length ){
        tooltipObj.style.backgroundColor = tx.rowinfo[ix].bg
      }else{
        tooltipObj.style.backgroundColor = s.getPropertyValue('background-color')
      }
      tooltipObj.style.borderColor =
         tooltipObj.style.color = s.getPropertyValue('color')
      tooltipObj.style.visibility = "hidden"
      tooltipObj.innerHTML = html





      tooltipObj.style.display = "inline"
      tooltipObj.style.position = "absolute"
      var x = tooltipInfo.posX + 4 + window.pageXOffset
                   - absoluteX(tooltipObj.offsetParent)
      tooltipObj.style.left = x+"px"
      var y = tooltipInfo.posY + window.pageYOffset
                   - tooltipObj.clientHeight - 4
................................................................................
    var dataObj = document.getElementById("timeline-data-"+i);
    if(!dataObj) break;
    var txJson = dataObj.textContent || dataObj.innerText;
    var tx = JSON.parse(txJson);
    TimelineGraph(tx);
  }
}())













































>







 







|

|











|




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










>
>
>
>
>







 







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
...
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
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
...
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
  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. */
  nodeHover: null,    /* Graph node under mouse when ixHover==-2 */
  imgCopy: null,      /* The image for the "Copy Hash" icon. */
  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";
................................................................................
    var html = null
    var ix = -1
    if( tooltipInfo.ixHover==-2 ){
      ix = parseInt(tooltipInfo.nodeHover.id.match(/\d+$/)[0],10)-tx.iTopRow
      var h = tx.rowinfo[ix].h
      var dest = tx.baseUrl + "/info/" + h
      if( tx.fileDiff ){
        html = "artifact <a id=\"copyhash\" href=\""+dest+"\">"+h+"</a>"
      }else{
        html = "check-in <a id=\"copyhash\" href=\""+dest+"\">"+h+"</a>"
      }
      tooltipInfo.ixActive = -2;
    }else if( tooltipInfo.ixHover>=0 ){
      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;");
      html = "branch <a id=\"copyhash\" href=\""+dest+"\">"+hbr+"</a>"
      tooltipInfo.ixActive = ix;
    }
    if( html ){
      /* Setup while hidden, to ensure proper dimensions. */
      if( tooltipInfo.imgCopy==null ){
        /* Create the image for the "Copy Hash" icon. */
        tooltipInfo.imgCopy = document.createElement("img");
        tooltipInfo.imgCopy.src =
"data:image/svg+xml;utf8,"+
"<svg xmlns='http:"+"/"+"/www.w3.org/2000/svg' viewBox='0 0 14 16'>"+
"<path style='fill: black; opacity:0' d='M 14 16 H 0 V 0 h 14 v 16 z'/> <path "+
"style='fill:rgb(240,240,240)' d='M 1 0 h 6.6 l 2 2 h 1 l 3.4 3.4 v 8.6 h -10 "+
"v -2 h -3 z'/><path style='fill:rgb(64,64,64)' d='M 2 1 h 5 l 3 3 v 7 h -8 "+
"z'/><path style='fill:rgb(248,248,248)' d='M 3 2 h 3.6 l 2.4 2.4 v 5.6 h -6 "+
"z'/><path style='fill:rgb(80,128,208)' d='M 4 5 h 4 v 1 h -4 z m 0 2 h 4 v 1 "+
"h -4 z'/><path style='fill:rgb(64,64,64)' d='M 5 3 h 5 l 3 3 v 7 h -8 "+
"z'/><path style='fill:rgb(248,248,248)' d='M 10 4.4 v 1.6 h 1.6 z m -4 -0.6 "+
"h 3 v 3 h -3 z m 0 3 h 6 v 5.4 h -6 z'/><path style= 'fill:rgb(80,128,208)' "+
"d='M 7 8 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z'/> "+
"</svg>";
        tooltipInfo.imgCopy.width = 14;
        tooltipInfo.imgCopy.height = 16;
        tooltipInfo.imgCopy.style.verticalAlign = "middle";
        tooltipInfo.imgCopy.style.cursor = "pointer";
      }
      var s = getComputedStyle(document.body)
      if( tx.rowinfo[ix].bg.length ){
        tooltipObj.style.backgroundColor = tx.rowinfo[ix].bg
      }else{
        tooltipObj.style.backgroundColor = s.getPropertyValue('background-color')
      }
      tooltipObj.style.borderColor =
         tooltipObj.style.color = s.getPropertyValue('color')
      tooltipObj.style.visibility = "hidden"
      tooltipObj.innerHTML = html
      /* The "Copy Hash" icon is not added via tooltipObj.innerHTML, to allow
      ** for the image to be cached during the lifetime of the current page. */
      tooltipObj.appendChild(document.createTextNode(' '));
      tooltipObj.appendChild(tooltipInfo.imgCopy);
      tooltipInfo.imgCopy.onclick = clickCopyHash;
      tooltipObj.style.display = "inline"
      tooltipObj.style.position = "absolute"
      var x = tooltipInfo.posX + 4 + window.pageXOffset
                   - absoluteX(tooltipObj.offsetParent)
      tooltipObj.style.left = x+"px"
      var y = tooltipInfo.posY + window.pageYOffset
                   - tooltipObj.clientHeight - 4
................................................................................
    var dataObj = document.getElementById("timeline-data-"+i);
    if(!dataObj) break;
    var txJson = dataObj.textContent || dataObj.innerText;
    var tx = JSON.parse(txJson);
    TimelineGraph(tx);
  }
}())

/* The onclick handler for the "Copy Hash" icon on the tooltip. */
var lockCopyHash = false;
function clickCopyHash(e){
  //e.preventDefault();
  e.stopPropagation();
  if( lockCopyHash ) return;
  lockCopyHash = true;
  var link = document.getElementById("copyhash");
  if( link ){
    var hash = link.innerText;
    copyTextToClipboard(hash);
  }
  lockCopyHash = false;
}
/* Create a temporary <textarea> element and copy the contents to clipboard. */
function copyTextToClipboard(text){
  var textArea = document.createElement("textarea");
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;
  textArea.style.width = '2em';
  textArea.style.height = '2em';
  textArea.style.padding = 0;
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';
  textArea.style.background = 'transparent';
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();
  try{
    document.execCommand('copy');
  }catch(err){
  }
  document.body.removeChild(textArea);
}