mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

Redesign clipboard-js to use icons

Browse Source 
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
This commit is contained in:
Mark Otto
2022-02-10 16:32:28 -08:00
parent b20bec5601
commit 0a87bd0e95
1 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/assets/js/application.js
+11 -1
View File
@@ -134,7 +134,7 @@
// Insert copy to clipboard button before .highlight // Insert copy to clipboard button before .highlight
var btnTitle = 'Copy to clipboard' 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') document.querySelectorAll('div.highlight')
.forEach(function (element) { .forEach(function (element) {
@@ -160,13 +160,23 @@
}) })
clipboard.on('success', function (event) { clipboard.on('success', function (event) {
var iconFirstChild = event.trigger.querySelector('.bi').firstChild
var tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger) 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!' }) tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
event.trigger.addEventListener('hidden.bs.tooltip', function () { event.trigger.addEventListener('hidden.bs.tooltip', function () {
tooltipBtn.setContent({ '.tooltip-inner': btnTitle }) tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
}, { once: true }) }, { once: true })
event.clearSelection() 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) { clipboard.on('error', function (event) {