Fossil: Check-in [54f0ae7813]

Fossil SCM

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

Overview
Comment: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.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | tooltip-copyhash
Files: files | file ages | folders
SHA3-256:54f0ae78130e7798bad5cfdf6d90c20c365b9a81aa02f52150792d2976a2e6f5
User & Date: florian 2019-05-28 08:11:00
Wiki:tooltip-copyhash
Context
2019-05-28
08:35
Tune the SVG image data URI for IE: remove the (invalid) encoding tag, and URL-encode the smaller than and greater than signs. check-in: c033389140 user: florian tags: tooltip-copyhash
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: 54f0ae7813 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: 371943c936 user: florian tags: tooltip-copyhash
Changes

Changes to src/graph.js.

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
...
770
771
772
773
774
775
776



























777
778
779
780
781
782
783

784
785

786
787
788
789
790
791
792
793
         .replace(/"/g, """)
         .replace(/'/g, "'");
      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
................................................................................
    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");







<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<













>

<







 







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







>
|
<
>
|







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
...
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
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
         .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. */





















      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(' '));
      tooltipInfo.imgCopy = createCopyHashImg(tooltipInfo.imgCopy,"copyhash");
      tooltipObj.appendChild(tooltipInfo.imgCopy);

      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
................................................................................
    if(!dataObj) break;
    var txJson = dataObj.textContent || dataObj.innerText;
    var tx = JSON.parse(txJson);
    TimelineGraph(tx);
  }
}())

/* Create the image for the "Copy Hash" icon. */
function createCopyHashImg(imgRecycled,idCopyTarget){
  var img = imgRecycled;
  if( img==null ){
    img = document.createElement("img");
    img.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>";
    img.width = 14;
    img.height = 16;
  }
  img.style.verticalAlign = "middle";
  img.style.cursor = "pointer";
  img.setAttribute("data-copytarget",idCopyTarget);
  img.onclick = clickCopyHash;
  return img;
}
/* 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 idCopyTarget = this.getAttribute("data-copytarget");
  var elCopyTarget = document.getElementById(idCopyTarget);

  if( elCopyTarget ){
    var hash = elCopyTarget.innerText;
    copyTextToClipboard(hash);
  }
  lockCopyHash = false;
}
/* Create a temporary <textarea> element and copy the contents to clipboard. */
function copyTextToClipboard(text){
  var textArea = document.createElement("textarea");