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: | 371943c936e649b62e4af5f8e6f8d5e9 |
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: 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 | |
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: d57c1a797c user: florian tags: tooltip-experiments | |
Changes
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, "&") .replace(/</g, "<") .replace(/>/g, ">") .replace(/"/g, """) .replace(/'/g, "'"); 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, "&") .replace(/</g, "<") .replace(/>/g, ">") .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 ................................................................................ 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); } |