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

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

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