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

65
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) {
QR.addClass('showQR');
});
}
$('#donateBox>li').click(function(event) { for (var i = 0; i < pre.length; i++) {
var thisID = $(this).attr('id'); var button = document.createElement('button');
if (thisID === 'BTC') { button.className = 'copy-button';
showQR(BTCQR); button.textContent = 'Copy';
new Clipboard('#BTCBn');
} else if (thisID === 'AliPay') {
showQR(AliPayQR);
} else if (thisID === 'WeChat') {
showQR(WeChatQR);
}
});
MainBox.click(function(event) { pre[i].appendChild(button);
if (currentQR) currentQR.removeClass('showQR').addClass('hideQR'); }
setTimeout (function(a) {
QRBox.fadeOut(300,function(argument) { var copyCode = new ClipboardJS('.copy-button', {
MainBox.removeClass('hideQR'); target: function(trigger) {
}); return trigger.previousElementSibling;
$('#DonateText,#donateBox,#github').removeClass('blur'); }
},600);
}); });
copyCode.on('success', function(event) {
event.clearSelection();
event.trigger.textContent = 'Copied';
window.setTimeout(function() {
event.trigger.textContent = 'Copy';
}, 2000);
});
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) {
@ -75,4 +73,5 @@
} }
}); });
}); });
})(jQuery) })(jQuery)