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 <[email protected]>
edamontology · Jun 7, 2021 · 8498730 · 8498730
1 parent acbff24
commit 8498730
Showing 1 changed file with 34 additions and 4 deletions.
diff --git 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);
+}