web/_javascript/utils/clipboard.js

131 lines
2.6 KiB
JavaScript
Raw Normal View History

2021-09-10 17:01:18 +03:00
/*
* Clipboard functions
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_SUCCESS = 'fas fa-check';
const ATTR_TIMEOUT = 'timeout';
2021-09-15 09:36:37 +03:00
const TIMEOUT = 2000; // in milliseconds
2021-09-10 17:01:18 +03:00
function isLocked(node) {
if ($(node)[0].hasAttribute(ATTR_TIMEOUT)) {
let timeout = $(node).attr(ATTR_TIMEOUT);
if (Number(timeout) > Date.now()) {
return true;
}
}
return false;
}
function lock(node) {
$(node).attr(ATTR_TIMEOUT, Date.now() + TIMEOUT);
}
function unlock(node) {
$(node).removeAttr(ATTR_TIMEOUT);
}
/* --- Copy code block --- */
// Initial the clipboard.js object
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'
});
2021-09-15 19:33:53 +03:00
function getIcon(btn) {
let iconNode = $(btn).children();
return iconNode.attr('class');
}
const ICON_DEFAULT = getIcon(btnSelector);
function showTooltip(btn) {
$(btn).tooltip('show');
2021-09-10 17:01:18 +03:00
}
function hideTooltip(btn) {
$(btn).tooltip('hide');
unlock(btn);
2021-09-10 17:01:18 +03:00
}
2021-09-15 09:36:37 +03:00
function setSuccessIcon(btn) {
let btnNode = $(btn);
let iconNode = btnNode.children();
iconNode.attr('class', ICON_SUCCESS);
lock(btn);
2021-09-15 09:36:37 +03:00
}
function resumeIcon(btn) {
let btnNode = $(btn);
let iconNode = btnNode.children();
iconNode.attr('class', ICON_DEFAULT);
unlock(btn);
2021-09-15 09:36:37 +03:00
}
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
const trigger = e.trigger;
if (isLocked(trigger)) {
return;
}
setSuccessIcon(trigger);
showTooltip(trigger);
setTimeout(() => {
hideTooltip(trigger);
resumeIcon(trigger);
}, TIMEOUT);
});
/* --- Post link sharing --- */
$('#copy-link').click((e) => {
let target = $(e.target);
if (isLocked(target)) {
2021-09-15 09:36:37 +03:00
return;
}
// Copy URL to clipboard
const url = window.location.href;
const $temp = $("<input>");
$("body").append($temp);
$temp.val(url).select();
document.execCommand("copy");
$temp.remove();
// Switch tooltip title
2021-09-15 09:36:37 +03:00
const defaultTitle = target.attr('data-original-title');
const succeedTitle = target.attr('title-succeed');
target.attr('data-original-title', succeedTitle).tooltip('show');
lock(target);
setTimeout(() => {
target.attr('data-original-title', defaultTitle);
unlock(target);
}, TIMEOUT);
2021-09-15 09:36:37 +03:00
2021-09-10 17:01:18 +03:00
});
});