Added copy button to link field (#216)

Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #216
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>

Frontend/assets/css/tools/mock/r11tool.css

@@ -187,6 +187,11 @@ body {
     font-size: 20px;
 }
 
+.transparent-button {
+    background-color: #00000000;
+    border: #00000000;
+}
+
 .action-button.active {
     background: #2A93B0;
     border: 1px solid #7ed0eb;

Frontend/assets/scripts/frame.js

@@ -119,5 +119,5 @@ function loadLastPage() {
     if (lastPage == null) {
         lastPage = "xpath";
     }
-    changeTool(lastPage);
+    changeTool(lastPage, false);
 }

Frontend/assets/scripts/tools/mock/datatransfer.js

@@ -40,6 +40,13 @@ $('#btn-newRow').click(
     }   
     );
 
+$('#btn-copy').click(
+    ()=> {
+        var link = $("#messageLink").html();
+        navigator.clipboard.writeText(link);
+    }   
+    );
+
 /*
     Functions segment
 */
@@ -146,8 +153,8 @@ function loadFetchedMessage(){
 
 function fillStaticFields(uuid, contentType, body, httpStatus){
     let link = createLink(uuid);
-    let linkHtml = '<a class="hyperlink" target="_blank" href="'+link+'">'+link+'</a>';
-    $('#messageLink').html(linkHtml);
+    $('#messageLink').attr("href", link);
+    $('#messageLink').html(link);
     $('#httpStatus').val(httpStatus);
     $('#typeSelector').val(contentType);
     $('#bodyEditor').val(body);

Frontend/tools/mock.html

@@ -50,7 +50,7 @@
                     <!-- link -->
                     <div>
                         <label for="messageLink" class="block-display">Link</label>
-                        <div id="messageLink" class="bordered-field max-width with-padding disabled-background tooltipped"><a class="hyperlink" href="www.google.com" target="_blank">www.google.com</a></div>
+                        <div class="display-space-between bordered-field max-width with-padding disabled-background tooltipped"><a id="messageLink" class="hyperlink" href="www.google.com" target="_blank">www.google.com</a><button id="btn-copy" class="transparent-button">Copy</button></div>
                         <!-- <input id="messageLink" disabled class="bordered-field max-width with-padding" value="http://yourlink.com/r/api/mock/blablabla"> -->
                     </div>
                     <div class="display-space-between max-width">