From 84987300171451265c7f62f82e4a485f34c96f5c Mon Sep 17 00:00:00 2001
From: Hager Eldakroury <hagerdakroury@gmail.com>
Date: Mon, 7 Jun 2021 16:39:27 +0200
Subject: [PATCH] feat: Add a copy URI icon (#211)

* feat: Add a copy URI icon

* Fix build issues with semicolons

* Add a missing semicolon

* Link n btn to cpy (#212)

* Warping the link in a btn-group so copy functionality can be appended after

* Reducing text length of the URI when not translated

* Remove duplicate copy icon

* Make copyToClipboard reusable

* Fix the html string format

* Enable toggling back to the copy icon with timeout

* Add missing semicolon

* Language update

* Remove unused styling

Co-authored-by: bryan brancotte <bryan.brancotte@pasteur.fr>
---
 js/tree-edam-stand-alone.js | 38 +++++++++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/js/tree-edam-stand-alone.js b/js/tree-edam-stand-alone.js
index 94687e21..46b4ef6b 100644
--- a/js/tree-edam-stand-alone.js
+++ b/js/tree-edam-stand-alone.js
@@ -434,20 +434,26 @@ function interactive_edam_browser(){
             text=value;
             }
         }else{
-            text=value;
+            text=value.substring(value.lastIndexOf('/')+1);
         }
         /* jshint -W014 */
-        return "<a "+
+        return '<div class="btn-group btn-group-xs"><a '+
+        'role="button" '+
+        'style="font-size: 1em;" '+
         "href=\"#"+ value + (current_branch=="deprecated"?"&deprecated":"")+"\" "+
         (
             current_branch.startsWith("edam")
             ?"onclick=\"browser.interactive_tree().cmd().clearSelectedElements(false);browser.interactive_tree().cmd().selectElement('"+value+"',true)\""
             :"onclick=\"setCookie('edam_browser_'+'"+current_branch+"','"+value+"');browser.current_branch('"+branch_of_term+"');browser.interactive_tree().cmd().clearSelectedElements(false);browser.interactive_tree().cmd().selectElement('"+value+"',true)\""
         )+
-        "class=\"label bg-edam-"+branch_of_term+"-light fg-edam-"+branch_of_term+" border-one-solid border-edam-"+branch_of_term+"\" "+
+        "class=\"btn bg-edam-"+branch_of_term+"-light fg-edam-"+branch_of_term+" border-one-solid border-edam-"+branch_of_term+"\" "+
         ">"+
         text+
-        "</a>"
+        "</a>"+
+        '<button class="btn bg-edam-'+branch_of_term+' fg-edam-'+branch_of_term+'-light" type="button" style="font-size: 1em;">'+
+        '<i class="fas fa-copy"  onClick="cpyToClipboard(\'' + value + '\')" ></i> ' +
+        '</button>'+
+        '</div>'
         //+' <i class="glyphicon glyphicon-stop bg-edam-'+branch_of_term+' fg-edam-'+branch_of_term+'"></i></a>'
         //+'<span class="badge bg-edam-'+branch_of_term+'">'+branch_of_term+'</span>'
         //+'<span class="label label-default bg-edam-'+branch_of_term+'-light fg-edam-'+branch_of_term+' border-edam-'+branch_of_term+'">'+branch_of_term+'</span>'
@@ -768,3 +774,27 @@ function toggleFullscreen(){
         $('#go-fullscreen').show();
     }
 }
+
+/**
+ * 
+ * @param {string} value Copies the value of the passed uri to the clipboard 
+ */
+function cpyToClipboard(value){
+    //copying the uri value to the clipboard
+    navigator.clipboard.writeText(value);
+
+    const element = event.srcElement;
+
+    //showing a tooltip indicating the value is copied
+    $(element).attr('title', "URI copied!")
+    .tooltip('show');
+
+    //changing the icon to a check shape indicating success
+    $(element).addClass("fa-check").removeClass("fa-copy");
+
+    //toggling back the icon and removing the copied tooltip
+    setTimeout(function(){
+        $(element).addClass("fa-copy").removeClass("fa-check");
+        $(element).tooltip('destroy');
+    }, 1000);
+}