From 0a87bd0e9556e84ed154de75b9e744d837ea931a Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 10 Feb 2022 16:32:28 -0800
Subject: [PATCH] Redesign clipboard-js to use icons

Co-Authored-By: GeoSot <geo.sotis@gmail.com>
---
 site/assets/js/application.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index 0756b3687..8ee92d528 100644
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -134,7 +134,7 @@
 
   // Insert copy to clipboard button before .highlight
   var btnTitle = 'Copy to clipboard'
-  var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" ><svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg></button></div>'
+  var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard"><svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg></button></div>'
 
   document.querySelectorAll('div.highlight')
     .forEach(function (element) {
@@ -160,13 +160,23 @@
   })
 
   clipboard.on('success', function (event) {
+    var iconFirstChild = event.trigger.querySelector('.bi').firstChild
     var tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
+    var namespace = 'http://www.w3.org/1999/xlink'
+    var originalXhref = iconFirstChild.getAttributeNS(namespace, 'href')
+    var originalTitle = event.trigger.title
 
     tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
     event.trigger.addEventListener('hidden.bs.tooltip', function () {
       tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
     }, { once: true })
     event.clearSelection()
+    iconFirstChild.setAttributeNS(namespace, 'href', originalXhref.replace('clipboard', 'check2'))
+
+    setTimeout(function () {
+      iconFirstChild.setAttributeNS(namespace, 'href', originalXhref)
+      event.trigger.title = originalTitle
+    }, 2000)
   })
 
   clipboard.on('error', function (event) {