web/_javascript/utils/clipboard.js

81 lines
1.6 KiB
JavaScript
Raw Normal View History

2021-09-10 17:01:18 +03:00
/*
2021-09-15 09:36:37 +03:00
* Initial the clipboard.js object
2021-09-10 17:01:18 +03:00
*
* Dependencies:
* - popper.js (https://github.com/popperjs/popper-core)
* - clipboard.js (https://github.com/zenorocha/clipboard.js)
*/
2021-09-15 09:36:37 +03:00
2021-09-10 17:01:18 +03:00
$(function() {
const btnSelector = '.code-header>button';
2021-09-15 09:36:37 +03:00
const ICON_DEFAULT = getIcon(btnSelector);
const ICON_SUCCESS = 'fas fa-check';
const ATTR_LOCKED = 'locked';
const TIMEOUT = 2000; // in milliseconds
2021-09-10 17:01:18 +03:00
2021-09-15 09:36:37 +03:00
const clipboard = new ClipboardJS(btnSelector, {
2021-09-10 17:01:18 +03:00
target(trigger) {
return trigger.parentNode.nextElementSibling;
}
});
2021-09-15 09:36:37 +03:00
$(btnSelector).tooltip({
trigger: 'click',
placement: 'left'
});
function setTooltip(btn) {
2021-09-10 17:01:18 +03:00
$(btn).tooltip('hide')
.tooltip('show');
}
function hideTooltip(btn) {
setTimeout(function() {
$(btn).tooltip('hide');
2021-09-15 09:36:37 +03:00
}, TIMEOUT);
2021-09-10 17:01:18 +03:00
}
2021-09-15 09:36:37 +03:00
function getIcon(btn) {
let iconNode = $(btn).children();
return iconNode.attr('class');;
}
function setSuccessIcon(btn) {
let btnNode = $(btn);
let iconNode = btnNode.children();
btnNode.attr(ATTR_LOCKED, true);
iconNode.attr('class', ICON_SUCCESS);
}
function resumeIcon(btn) {
let btnNode = $(btn);
let iconNode = btnNode.children();
setTimeout(function() {
btnNode.removeAttr(ATTR_LOCKED);
iconNode.attr('class', ICON_DEFAULT);
}, TIMEOUT);
}
function isLocked(btn) {
let locked = $(btn).attr(ATTR_LOCKED);
return locked === 'true';
}
2021-09-10 17:01:18 +03:00
2021-09-15 09:36:37 +03:00
clipboard.on('success', (e) => {
2021-09-10 17:01:18 +03:00
e.clearSelection();
2021-09-15 09:36:37 +03:00
if (isLocked(e.trigger)) {
return;
}
setTooltip(e.trigger);
2021-09-10 17:01:18 +03:00
hideTooltip(e.trigger);
2021-09-15 09:36:37 +03:00
setSuccessIcon(e.trigger);
resumeIcon($(e.trigger));
2021-09-10 17:01:18 +03:00
});
});