Fossil SCM
Give a visual feedback when the copy icon is clicked.
Commit
3783706f674ae78079c9aa4a954e8de1eda6cb30480acd8727f67023bcf9327b
Parent
b0795ff6209e474…
1 file changed
+13
-2
+13
-2
| --- src/graph.js | ||
| +++ src/graph.js | ||
| @@ -625,11 +625,11 @@ | ||
| 625 | 625 | tooltipObj.style.borderColor = |
| 626 | 626 | tooltipObj.style.color = s.getPropertyValue('color') |
| 627 | 627 | tooltipObj.style.visibility = "hidden" |
| 628 | 628 | tooltipObj.innerHTML = html |
| 629 | 629 | tooltipObj.appendChild(document.createTextNode(' ')); |
| 630 | - tooltipObj.appendChild(makeCopyButton(null,"tooltip-link")); | |
| 630 | + tooltipObj.appendChild(makeCopyButton("tooltip-copybtn","tooltip-link")); | |
| 631 | 631 | tooltipObj.style.display = "inline" |
| 632 | 632 | tooltipObj.style.position = "absolute" |
| 633 | 633 | var x = tooltipInfo.posX + 4 + window.pageXOffset |
| 634 | 634 | - absoluteX(tooltipObj.offsetParent) |
| 635 | 635 | tooltipObj.style.left = x+"px" |
| @@ -763,10 +763,12 @@ | ||
| 763 | 763 | if( !button ){ |
| 764 | 764 | button = document.createElement("span"); |
| 765 | 765 | button.className = "copy-button"; |
| 766 | 766 | button.id = idButton; |
| 767 | 767 | } |
| 768 | + button.style.transition = ""; | |
| 769 | + button.style.opacity = 1; | |
| 768 | 770 | if( idTarget ) button.setAttribute("data-copytarget",idTarget); |
| 769 | 771 | button.onclick = clickCopyButton; |
| 770 | 772 | return button; |
| 771 | 773 | } |
| 772 | 774 | /* The onclick handler for the "Copy Text" button. */ |
| @@ -774,17 +776,26 @@ | ||
| 774 | 776 | function clickCopyButton(e){ |
| 775 | 777 | e.preventDefault(); /* Mandatory for <a> and <button>. */ |
| 776 | 778 | e.stopPropagation(); |
| 777 | 779 | if( lockCopyText ) return; |
| 778 | 780 | lockCopyText = true; |
| 781 | + this.style.transition = "opacity 400ms ease-in-out"; | |
| 782 | + this.style.opacity = 0; | |
| 779 | 783 | var idTarget = this.getAttribute("data-copytarget"); |
| 780 | 784 | var elTarget = document.getElementById(idTarget); |
| 781 | 785 | if( elTarget ){ |
| 782 | 786 | var text = elTarget.innerText; |
| 783 | 787 | copyTextToClipboard(text); |
| 784 | 788 | } |
| 785 | - lockCopyText = false; | |
| 789 | + setTimeout(function(id){ | |
| 790 | + var elButton = document.getElementById(id); | |
| 791 | + if( elButton ){ | |
| 792 | + elButton.style.transition = ""; | |
| 793 | + elButton.style.opacity = 1; | |
| 794 | + } | |
| 795 | + lockCopyText = false; | |
| 796 | + }.bind(null,this.id),400); | |
| 786 | 797 | } |
| 787 | 798 | /* Create a temporary <textarea> element and copy the contents to clipboard. */ |
| 788 | 799 | function copyTextToClipboard(text){ |
| 789 | 800 | var textArea = document.createElement("textarea"); |
| 790 | 801 | textArea.style.position = 'fixed'; |
| 791 | 802 |
| --- src/graph.js | |
| +++ src/graph.js | |
| @@ -625,11 +625,11 @@ | |
| 625 | tooltipObj.style.borderColor = |
| 626 | tooltipObj.style.color = s.getPropertyValue('color') |
| 627 | tooltipObj.style.visibility = "hidden" |
| 628 | tooltipObj.innerHTML = html |
| 629 | tooltipObj.appendChild(document.createTextNode(' ')); |
| 630 | tooltipObj.appendChild(makeCopyButton(null,"tooltip-link")); |
| 631 | tooltipObj.style.display = "inline" |
| 632 | tooltipObj.style.position = "absolute" |
| 633 | var x = tooltipInfo.posX + 4 + window.pageXOffset |
| 634 | - absoluteX(tooltipObj.offsetParent) |
| 635 | tooltipObj.style.left = x+"px" |
| @@ -763,10 +763,12 @@ | |
| 763 | if( !button ){ |
| 764 | button = document.createElement("span"); |
| 765 | button.className = "copy-button"; |
| 766 | button.id = idButton; |
| 767 | } |
| 768 | if( idTarget ) button.setAttribute("data-copytarget",idTarget); |
| 769 | button.onclick = clickCopyButton; |
| 770 | return button; |
| 771 | } |
| 772 | /* The onclick handler for the "Copy Text" button. */ |
| @@ -774,17 +776,26 @@ | |
| 774 | function clickCopyButton(e){ |
| 775 | e.preventDefault(); /* Mandatory for <a> and <button>. */ |
| 776 | e.stopPropagation(); |
| 777 | if( lockCopyText ) return; |
| 778 | lockCopyText = true; |
| 779 | var idTarget = this.getAttribute("data-copytarget"); |
| 780 | var elTarget = document.getElementById(idTarget); |
| 781 | if( elTarget ){ |
| 782 | var text = elTarget.innerText; |
| 783 | copyTextToClipboard(text); |
| 784 | } |
| 785 | lockCopyText = false; |
| 786 | } |
| 787 | /* Create a temporary <textarea> element and copy the contents to clipboard. */ |
| 788 | function copyTextToClipboard(text){ |
| 789 | var textArea = document.createElement("textarea"); |
| 790 | textArea.style.position = 'fixed'; |
| 791 |
| --- src/graph.js | |
| +++ src/graph.js | |
| @@ -625,11 +625,11 @@ | |
| 625 | tooltipObj.style.borderColor = |
| 626 | tooltipObj.style.color = s.getPropertyValue('color') |
| 627 | tooltipObj.style.visibility = "hidden" |
| 628 | tooltipObj.innerHTML = html |
| 629 | tooltipObj.appendChild(document.createTextNode(' ')); |
| 630 | tooltipObj.appendChild(makeCopyButton("tooltip-copybtn","tooltip-link")); |
| 631 | tooltipObj.style.display = "inline" |
| 632 | tooltipObj.style.position = "absolute" |
| 633 | var x = tooltipInfo.posX + 4 + window.pageXOffset |
| 634 | - absoluteX(tooltipObj.offsetParent) |
| 635 | tooltipObj.style.left = x+"px" |
| @@ -763,10 +763,12 @@ | |
| 763 | if( !button ){ |
| 764 | button = document.createElement("span"); |
| 765 | button.className = "copy-button"; |
| 766 | button.id = idButton; |
| 767 | } |
| 768 | button.style.transition = ""; |
| 769 | button.style.opacity = 1; |
| 770 | if( idTarget ) button.setAttribute("data-copytarget",idTarget); |
| 771 | button.onclick = clickCopyButton; |
| 772 | return button; |
| 773 | } |
| 774 | /* The onclick handler for the "Copy Text" button. */ |
| @@ -774,17 +776,26 @@ | |
| 776 | function clickCopyButton(e){ |
| 777 | e.preventDefault(); /* Mandatory for <a> and <button>. */ |
| 778 | e.stopPropagation(); |
| 779 | if( lockCopyText ) return; |
| 780 | lockCopyText = true; |
| 781 | this.style.transition = "opacity 400ms ease-in-out"; |
| 782 | this.style.opacity = 0; |
| 783 | var idTarget = this.getAttribute("data-copytarget"); |
| 784 | var elTarget = document.getElementById(idTarget); |
| 785 | if( elTarget ){ |
| 786 | var text = elTarget.innerText; |
| 787 | copyTextToClipboard(text); |
| 788 | } |
| 789 | setTimeout(function(id){ |
| 790 | var elButton = document.getElementById(id); |
| 791 | if( elButton ){ |
| 792 | elButton.style.transition = ""; |
| 793 | elButton.style.opacity = 1; |
| 794 | } |
| 795 | lockCopyText = false; |
| 796 | }.bind(null,this.id),400); |
| 797 | } |
| 798 | /* Create a temporary <textarea> element and copy the contents to clipboard. */ |
| 799 | function copyTextToClipboard(text){ |
| 800 | var textArea = document.createElement("textarea"); |
| 801 | textArea.style.position = 'fixed'; |
| 802 |