Add copy button js logic

index.html

@@ -166,10 +166,10 @@ <h2 class="text-center title">Abstract</h1>
           <h2 class="text-center title">BibTeX</h1>
           <p class="text-start">If you wish to cite the ICDAR 2021 Competition on Integrated Circuit Text Spotting and Aesthetic
             Assessment paper:</p>
-            <div class="text-primary border border-primary rounded p-3">
+            <div class="text-primary border border-primary rounded p-3" id="bibtex_div">
               <p class="m-0">
-                <button class="btn btn-primary float-end ms-2" onclick="copy_text()">
-                  <i class="fa-solid fa-copy"></i>
+                <button class="btn btn-primary float-end ms-2" onclick="copy_text()" id="bibtex_btn">
+                  <div id="icon_div"><i class="fa-solid fa-copy"></i></div>
                 </button>
                 <span id="bibtex">
                 @inproceedings{icdar2021_ictext,<br/>

static/js/index.js

@@ -1,4 +1,55 @@
+function toggle_btn(btn) {
+  if(btn.classList.contains("btn-primary")){
+    btn.classList.add("btn-success")
+    btn.classList.remove("btn-primary");
+  }
+  else{
+    btn.classList.add("btn-primary")
+    btn.classList.remove("btn-success");
+  }
+}
+
+function toggle_div(div) {
+  if(div.classList.contains("border-primary")){
+    div.classList.add("border-success")
+    div.classList.remove("border-primary");
+    div.classList.add("text-success")
+    div.classList.remove("text-primary");
+  }
+  else{
+    div.classList.add("border-primary")
+    div.classList.remove("border-success");
+    div.classList.add("text-primary")
+    div.classList.remove("text-success");
+  }
+}
+
 function copy_text() {
   var copyText = document.getElementById("bibtex");
-  navigator.clipboard.writeText(copyText.innerText);
+  var btn = document.getElementById("bibtex_btn");
+  var icon_div = document.getElementById("icon_div");
+  var bibtex_div = document.getElementById("bibtex_div");
+
+  const check_icon = document.createElement('i');
+  check_icon.classList.add('fa-solid');
+  check_icon.classList.add('fa-check');
+
+  const copy_icon = document.createElement('i');
+  copy_icon.classList.add('fa-solid');
+  copy_icon.classList.add('fa-copy');
+
+  toggle_btn(btn)
+  toggle_div(bibtex_div)
+  icon_div.innerHTML = null
+  icon_div.appendChild(check_icon)
+
+  navigator.clipboard.writeText(copyText.innerText).then(
+    setTimeout(function() {
+      toggle_btn(btn)
+      icon_div.innerHTML = null
+      icon_div.appendChild(copy_icon)
+      toggle_div(bibtex_div)
+    }, 2000)
+  );
+
 }