curben
/
blog
mirror of https://gitlab.com/curben/blog
1
0
Fork 0
Code Issues Releases Wiki Activity

Add 'Copy' button to code snippet 

https://webdesign.tutsplus.com/tutorials/copy-to-clipboard-made-easy-with-clipboardjs--cms-25086
https://davidwalsh.name/clipboard
This commit is contained in:
curben 2018-09-29 18:37:34 +09:30
parent 45b555f745
commit 4fb0adb24a
1 changed files with 32 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
themes/typing/source/js/typing.js
View File

@ -24,48 +24,46 @@
$(document).ready(function() { $(document).ready(function() {
var QRBox = $('#QRBox');
var MainBox = $('.MainBox');
var BTCQR = $('#BTCQR');
var AliPayQR = $('#AliPayQR');
var WeChatQR = $('#WeChatQR');
var currentQR;
function showQR(QR) { // Add "Copy" button to code snippet
$('#DonateText,#donateBox,#github').addClass('blur'); var pre = document.getElementsByTagName('pre');
currentQR = QR;
QRBox.fadeIn(300,function(argument) { for (var i = 0; i < pre.length; i++) {
QR.addClass('showQR'); var button = document.createElement('button');
}); button.className = 'copy-button';
button.textContent = 'Copy';
pre[i].appendChild(button);
} }
$('#donateBox>li').click(function(event) { var copyCode = new ClipboardJS('.copy-button', {
var thisID = $(this).attr('id'); target: function(trigger) {
if (thisID === 'BTC') { return trigger.previousElementSibling;
showQR(BTCQR);
new Clipboard('#BTCBn');
} else if (thisID === 'AliPay') {
showQR(AliPayQR);
} else if (thisID === 'WeChat') {
showQR(WeChatQR);
} }
}); });
MainBox.click(function(event) { copyCode.on('success', function(event) {
if (currentQR) currentQR.removeClass('showQR').addClass('hideQR'); event.clearSelection();
setTimeout (function(a) { event.trigger.textContent = 'Copied';
QRBox.fadeOut(300,function(argument) { window.setTimeout(function() {
MainBox.removeClass('hideQR'); event.trigger.textContent = 'Copy';
}); }, 2000);
$('#DonateText,#donateBox,#github').removeClass('blur');
},600);
}); });
copyCode.on('error', function(event) {
event.trigger.textContent = 'Press "Ctrl + C" to copy';
window.setTimeout(function() {
event.trigger.textContent = 'Copy';
}, 2000);
});
// Navigation menu
$('#menu').click(function (event) { $('#menu').click(function (event) {
var nav = $('#main-nav'); var nav = $('#main-nav');
nav.toggle('fast'); nav.toggle('fast');
}); });
// Show navigation button for smaller screen
$(window).resize(function () { $(window).resize(function () {
var viewportWidth = $(window).width(); var viewportWidth = $(window).width();
if (viewportWidth > 468) { if (viewportWidth > 468) {
@ -76,3 +74,4 @@
}); });
}); });
})(jQuery) })(jQuery)