Fossil SCM

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.

florian 2019-05-28 08:10 tooltip-copyhash
Commit 54f0ae78130e7798bad5cfdf6d90c20c365b9a81aa02f52150792d2976a2e6f5
Parent 371943c936e649b…
1 file changed +32 -25
~ src/graph.js
M src/graph.js
+32 -25
--- src/graph.js
+++ src/graph.js
@@ -615,31 +615,10 @@
615615
 html = "branch <a id=\"copyhash\" href=\""+dest+"\">"+hbr+"</a>"
616616
 tooltipInfo.ixActive = ix;
617617
 }
618618
 if( html ){
619619
 /* Setup while hidden, to ensure proper dimensions. */
620
- if( tooltipInfo.imgCopy==null ){
621
- /* Create the image for the "Copy Hash" icon. */
622
- tooltipInfo.imgCopy = document.createElement("img");
623
- tooltipInfo.imgCopy.src =
624
-"data:image/svg+xml;utf8,"+
625
-"<svg xmlns='http:"+"/"+"/www.w3.org/2000/svg' viewBox='0 0 14 16'>"+
626
-"<path style='fill: black; opacity:0' d='M 14 16 H 0 V 0 h 14 v 16 z'/> <path "+
627
-"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 "+
628
-"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 "+
629
-"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 "+
630
-"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 "+
631
-"h -4 z'/><path style='fill:rgb(64,64,64)' d='M 5 3 h 5 l 3 3 v 7 h -8 "+
632
-"z'/><path style='fill:rgb(248,248,248)' d='M 10 4.4 v 1.6 h 1.6 z m -4 -0.6 "+
633
-"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)' "+
634
-"d='M 7 8 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z'/> "+
635
-"</svg>";
636
- tooltipInfo.imgCopy.width = 14;
637
- tooltipInfo.imgCopy.height = 16;
638
- tooltipInfo.imgCopy.style.verticalAlign = "middle";
639
- tooltipInfo.imgCopy.style.cursor = "pointer";
640
- }
641620
 var s = getComputedStyle(document.body)
642621
 if( tx.rowinfo[ix].bg.length ){
643622
 tooltipObj.style.backgroundColor = tx.rowinfo[ix].bg
644623
 }else{
645624
 tooltipObj.style.backgroundColor = s.getPropertyValue('background-color')
@@ -649,12 +628,12 @@
649628
 tooltipObj.style.visibility = "hidden"
650629
 tooltipObj.innerHTML = html
651630
 /* The "Copy Hash" icon is not added via tooltipObj.innerHTML, to allow
652631
 ** for the image to be cached during the lifetime of the current page. */
653632
 tooltipObj.appendChild(document.createTextNode(' '));
633
+ tooltipInfo.imgCopy = createCopyHashImg(tooltipInfo.imgCopy,"copyhash");
654634
 tooltipObj.appendChild(tooltipInfo.imgCopy);
655
- tooltipInfo.imgCopy.onclick = clickCopyHash;
656635
 tooltipObj.style.display = "inline"
657636
 tooltipObj.style.position = "absolute"
658637
 var x = tooltipInfo.posX + 4 + window.pageXOffset
659638
 - absoluteX(tooltipObj.offsetParent)
660639
 tooltipObj.style.left = x+"px"
@@ -772,20 +751,48 @@
772751
 var tx = JSON.parse(txJson);
773752
 TimelineGraph(tx);
774753
 }
775754
 }())
776755
756
+/* Create the image for the "Copy Hash" icon. */
757
+function createCopyHashImg(imgRecycled,idCopyTarget){
758
+ var img = imgRecycled;
759
+ if( img==null ){
760
+ img = document.createElement("img");
761
+ img.src =
762
+"data:image/svg+xml;utf8,"+
763
+"<svg xmlns='http:"+"/"+"/www.w3.org/2000/svg' viewBox='0 0 14 16'>"+
764
+"<path style='fill: black; opacity:0' d='M 14 16 H 0 V 0 h 14 v 16 z'/> <path "+
765
+"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 "+
766
+"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 "+
767
+"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 "+
768
+"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 "+
769
+"h -4 z'/><path style='fill:rgb(64,64,64)' d='M 5 3 h 5 l 3 3 v 7 h -8 "+
770
+"z'/><path style='fill:rgb(248,248,248)' d='M 10 4.4 v 1.6 h 1.6 z m -4 -0.6 "+
771
+"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)' "+
772
+"d='M 7 8 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z'/> "+
773
+"</svg>";
774
+ img.width = 14;
775
+ img.height = 16;
776
+ }
777
+ img.style.verticalAlign = "middle";
778
+ img.style.cursor = "pointer";
779
+ img.setAttribute("data-copytarget",idCopyTarget);
780
+ img.onclick = clickCopyHash;
781
+ return img;
782
+}
777783
 /* The onclick handler for the "Copy Hash" icon on the tooltip. */
778784
 var lockCopyHash = false;
779785
 function clickCopyHash(e){
780786
 //e.preventDefault();
781787
 e.stopPropagation();
782788
 if( lockCopyHash ) return;
783789
 lockCopyHash = true;
784
- var link = document.getElementById("copyhash");
785
- if( link ){
786
- var hash = link.innerText;
790
+ var idCopyTarget = this.getAttribute("data-copytarget");
791
+ var elCopyTarget = document.getElementById(idCopyTarget);
792
+ if( elCopyTarget ){
793
+ var hash = elCopyTarget.innerText;
787794
 copyTextToClipboard(hash);
788795
 }
789796
 lockCopyHash = false;
790797
 }
791798
 /* Create a temporary <textarea> element and copy the contents to clipboard. */
792799
--- src/graph.js
+++ src/graph.js
@@ -615,31 +615,10 @@
615 html = "branch <a id=\"copyhash\" href=\""+dest+"\">"+hbr+"</a>"
616 tooltipInfo.ixActive = ix;
617 }
618 if( html ){
619 /* Setup while hidden, to ensure proper dimensions. */
620 if( tooltipInfo.imgCopy==null ){
621 /* Create the image for the "Copy Hash" icon. */
622 tooltipInfo.imgCopy = document.createElement("img");
623 tooltipInfo.imgCopy.src =
624 "data:image/svg+xml;utf8,"+
625 "<svg xmlns='http:"+"/"+"/www.w3.org/2000/svg' viewBox='0 0 14 16'>"+
626 "<path style='fill: black; opacity:0' d='M 14 16 H 0 V 0 h 14 v 16 z'/> <path "+
627 "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 "+
628 "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 "+
629 "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 "+
630 "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 "+
631 "h -4 z'/><path style='fill:rgb(64,64,64)' d='M 5 3 h 5 l 3 3 v 7 h -8 "+
632 "z'/><path style='fill:rgb(248,248,248)' d='M 10 4.4 v 1.6 h 1.6 z m -4 -0.6 "+
633 "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)' "+
634 "d='M 7 8 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z'/> "+
635 "</svg>";
636 tooltipInfo.imgCopy.width = 14;
637 tooltipInfo.imgCopy.height = 16;
638 tooltipInfo.imgCopy.style.verticalAlign = "middle";
639 tooltipInfo.imgCopy.style.cursor = "pointer";
640 }
641 var s = getComputedStyle(document.body)
642 if( tx.rowinfo[ix].bg.length ){
643 tooltipObj.style.backgroundColor = tx.rowinfo[ix].bg
644 }else{
645 tooltipObj.style.backgroundColor = s.getPropertyValue('background-color')
@@ -649,12 +628,12 @@
649 tooltipObj.style.visibility = "hidden"
650 tooltipObj.innerHTML = html
651 /* The "Copy Hash" icon is not added via tooltipObj.innerHTML, to allow
652 ** for the image to be cached during the lifetime of the current page. */
653 tooltipObj.appendChild(document.createTextNode(' '));
 
654 tooltipObj.appendChild(tooltipInfo.imgCopy);
655 tooltipInfo.imgCopy.onclick = clickCopyHash;
656 tooltipObj.style.display = "inline"
657 tooltipObj.style.position = "absolute"
658 var x = tooltipInfo.posX + 4 + window.pageXOffset
659 - absoluteX(tooltipObj.offsetParent)
660 tooltipObj.style.left = x+"px"
@@ -772,20 +751,48 @@
772 var tx = JSON.parse(txJson);
773 TimelineGraph(tx);
774 }
775 }())
776
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
777 /* The onclick handler for the "Copy Hash" icon on the tooltip. */
778 var lockCopyHash = false;
779 function clickCopyHash(e){
780 //e.preventDefault();
781 e.stopPropagation();
782 if( lockCopyHash ) return;
783 lockCopyHash = true;
784 var link = document.getElementById("copyhash");
785 if( link ){
786 var hash = link.innerText;
 
787 copyTextToClipboard(hash);
788 }
789 lockCopyHash = false;
790 }
791 /* Create a temporary <textarea> element and copy the contents to clipboard. */
792
--- src/graph.js
+++ src/graph.js
@@ -615,31 +615,10 @@
615 html = "branch <a id=\"copyhash\" href=\""+dest+"\">"+hbr+"</a>"
616 tooltipInfo.ixActive = ix;
617 }
618 if( html ){
619 /* Setup while hidden, to ensure proper dimensions. */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
620 var s = getComputedStyle(document.body)
621 if( tx.rowinfo[ix].bg.length ){
622 tooltipObj.style.backgroundColor = tx.rowinfo[ix].bg
623 }else{
624 tooltipObj.style.backgroundColor = s.getPropertyValue('background-color')
@@ -649,12 +628,12 @@
628 tooltipObj.style.visibility = "hidden"
629 tooltipObj.innerHTML = html
630 /* The "Copy Hash" icon is not added via tooltipObj.innerHTML, to allow
631 ** for the image to be cached during the lifetime of the current page. */
632 tooltipObj.appendChild(document.createTextNode(' '));
633 tooltipInfo.imgCopy = createCopyHashImg(tooltipInfo.imgCopy,"copyhash");
634 tooltipObj.appendChild(tooltipInfo.imgCopy);
 
635 tooltipObj.style.display = "inline"
636 tooltipObj.style.position = "absolute"
637 var x = tooltipInfo.posX + 4 + window.pageXOffset
638 - absoluteX(tooltipObj.offsetParent)
639 tooltipObj.style.left = x+"px"
@@ -772,20 +751,48 @@
751 var tx = JSON.parse(txJson);
752 TimelineGraph(tx);
753 }
754 }())
755
756 /* Create the image for the "Copy Hash" icon. */
757 function createCopyHashImg(imgRecycled,idCopyTarget){
758 var img = imgRecycled;
759 if( img==null ){
760 img = document.createElement("img");
761 img.src =
762 "data:image/svg+xml;utf8,"+
763 "<svg xmlns='http:"+"/"+"/www.w3.org/2000/svg' viewBox='0 0 14 16'>"+
764 "<path style='fill: black; opacity:0' d='M 14 16 H 0 V 0 h 14 v 16 z'/> <path "+
765 "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 "+
766 "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 "+
767 "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 "+
768 "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 "+
769 "h -4 z'/><path style='fill:rgb(64,64,64)' d='M 5 3 h 5 l 3 3 v 7 h -8 "+
770 "z'/><path style='fill:rgb(248,248,248)' d='M 10 4.4 v 1.6 h 1.6 z m -4 -0.6 "+
771 "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)' "+
772 "d='M 7 8 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z'/> "+
773 "</svg>";
774 img.width = 14;
775 img.height = 16;
776 }
777 img.style.verticalAlign = "middle";
778 img.style.cursor = "pointer";
779 img.setAttribute("data-copytarget",idCopyTarget);
780 img.onclick = clickCopyHash;
781 return img;
782 }
783 /* The onclick handler for the "Copy Hash" icon on the tooltip. */
784 var lockCopyHash = false;
785 function clickCopyHash(e){
786 //e.preventDefault();
787 e.stopPropagation();
788 if( lockCopyHash ) return;
789 lockCopyHash = true;
790 var idCopyTarget = this.getAttribute("data-copytarget");
791 var elCopyTarget = document.getElementById(idCopyTarget);
792 if( elCopyTarget ){
793 var hash = elCopyTarget.innerText;
794 copyTextToClipboard(hash);
795 }
796 lockCopyHash = false;
797 }
798 /* Create a temporary <textarea> element and copy the contents to clipboard. */
799

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button