Fossil

Check-in [3783706f]
Login

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

Overview
Comment:Give a visual feedback when the copy icon is clicked.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | tooltip-copyhash
Files: files | file ages | folders
SHA3-256: 3783706f674ae78079c9aa4a954e8de1eda6cb30480acd8727f67023bcf9327b
User & Date: florian 2019-05-29 12:47:00
Wiki:tooltip-copyhash
Context
2019-05-29
12:55
More consistent naming of variables in the newly added Javascript part. check-in: c887a1bb user: florian tags: tooltip-copyhash
12:47
Give a visual feedback when the copy icon is clicked. check-in: 3783706f user: florian tags: tooltip-copyhash
12:39
Introduce the "copy-button" CSS class with the SVG icon as the background image, to simplify the Javascript part. check-in: b0795ff6 user: florian tags: tooltip-copyhash
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to src/graph.js.

623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
...
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
        tooltipObj.style.backgroundColor = s.getPropertyValue('background-color')
      }
      tooltipObj.style.borderColor =
         tooltipObj.style.color = s.getPropertyValue('color')
      tooltipObj.style.visibility = "hidden"
      tooltipObj.innerHTML = html
      tooltipObj.appendChild(document.createTextNode(' '));
      tooltipObj.appendChild(makeCopyButton(null,"tooltip-link"));
      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
................................................................................
function makeCopyButton(idButton,idTarget){
  var button = document.getElementById(idButton);
  if( !button ){
    button = document.createElement("span");
    button.className = "copy-button";
    button.id = idButton;
  }


  if( idTarget ) button.setAttribute("data-copytarget",idTarget);
  button.onclick = clickCopyButton;
  return button;
}
/* The onclick handler for the "Copy Text" button. */
var lockCopyText = false;
function clickCopyButton(e){
  e.preventDefault();   /* Mandatory for <a> and <button>. */
  e.stopPropagation();
  if( lockCopyText ) return;
  lockCopyText = true;


  var idTarget = this.getAttribute("data-copytarget");
  var elTarget = document.getElementById(idTarget);
  if( elTarget ){
    var text = elTarget.innerText;
    copyTextToClipboard(text);
  }






  lockCopyText = 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;







|







 







>
>











>
>






>
>
>
>
>
>
|
>







623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
...
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
801
802
803
        tooltipObj.style.backgroundColor = s.getPropertyValue('background-color')
      }
      tooltipObj.style.borderColor =
         tooltipObj.style.color = s.getPropertyValue('color')
      tooltipObj.style.visibility = "hidden"
      tooltipObj.innerHTML = html
      tooltipObj.appendChild(document.createTextNode(' '));
      tooltipObj.appendChild(makeCopyButton("tooltip-copybtn","tooltip-link"));
      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
................................................................................
function makeCopyButton(idButton,idTarget){
  var button = document.getElementById(idButton);
  if( !button ){
    button = document.createElement("span");
    button.className = "copy-button";
    button.id = idButton;
  }
  button.style.transition = "";
  button.style.opacity = 1;
  if( idTarget ) button.setAttribute("data-copytarget",idTarget);
  button.onclick = clickCopyButton;
  return button;
}
/* The onclick handler for the "Copy Text" button. */
var lockCopyText = false;
function clickCopyButton(e){
  e.preventDefault();   /* Mandatory for <a> and <button>. */
  e.stopPropagation();
  if( lockCopyText ) return;
  lockCopyText = true;
  this.style.transition = "opacity 400ms ease-in-out";
  this.style.opacity = 0;
  var idTarget = this.getAttribute("data-copytarget");
  var elTarget = document.getElementById(idTarget);
  if( elTarget ){
    var text = elTarget.innerText;
    copyTextToClipboard(text);
  }
  setTimeout(function(id){
    var elButton = document.getElementById(id);
    if( elButton ){
      elButton.style.transition = "";
      elButton.style.opacity = 1;
    }
    lockCopyText = false;
  }.bind(null,this.id),400);
}
/* 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;