{"id":58336,"date":"2023-02-13T03:01:44","date_gmt":"2023-02-12T17:01:44","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=58336"},"modified":"2023-02-13T14:46:49","modified_gmt":"2023-02-13T04:46:49","slug":"wordpress-blog-code-element-clipboard-copy-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-code-element-clipboard-copy-primer-tutorial\/","title":{"rendered":"WordPress Blog Code Element Clipboard Copy Primer Tutorial"},"content":{"rendered":"
\"WordPress<\/a>

WordPress Blog Code Element Clipboard Copy Primer Tutorial<\/p><\/div>\n

In the WordPress Blog you are reading, we have “code”<\/a> HTML elements that work well, except for the larger ones, and the user trying to copy into the clipboard, the entire “code” element content.<\/p>\n

We wanted to help out here, by overlaying a new &#128203; clipboard 📋 emoji button to the top right of any “code” element, that when you click we copy into the user’s clipboard an unadorned (ie. no colour coding) version of the “code” element content.<\/p>\n

In conjunction to a new body onload event call<\/font> …<\/p>\n

<?php echo ”
\n
\n<body onload=\" setTimeout(frnx,2000); if (onlok) { ahashlook(); setInterval(prehideIt, 3000); pp_ref(('' + document.URL), ('' + document.referrer)); if (1 == 1) { lookforbincode(); } lookforhighlight(); postcalendar(); changeasfordownload(); if (cafd == cafd) { cafd=0; } else { cafd=true; } checkonl(); setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies(); cookie_fonts(); is_mentioned_by(); calendar_pass(); prejustshow(); details_summary(0); pre_last_email_check(); maybevp(); setTimeout(last_email_check,15000); } if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) { setTimeout(bylinedo,5000); } else { bylinedo(); } setTimeout(newlpcheck, 3000); codecopying('');<\/font> \" <?php body_class(); ?>>
\n<\/code>
\n“; ?><\/p>\n

… and new div element …<\/p>\n

<?php echo ”
\n
\n<div id=dcode><\/div>
\n<\/code>
\n“; ?><\/p>\n

… we have new TwentyTen theme header.php Javascript logic …<\/p>\n

<?php echo ”
\n
\nfunction fallbackCopyTextToClipboard(text) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/400212\/how-do-i-copy-to-the-clipboard-in-javascript<\/a>
\n var textArea = document.createElement(\"textarea\");
\n \/\/alert(text);
\n textArea.value = text;
\n
\n \/\/ Avoid scrolling to bottom
\n textArea.style.top = \"0\";
\n textArea.style.left = \"0\";
\n textArea.style.position = \"fixed\";
\n
\n document.body.appendChild(textArea);
\n textArea.focus();
\n textArea.select();
\n
\n try {
\n var successful = document.execCommand('copy');
\n var msg = successful ? 'successful' : 'unsuccessful';
\n console.log('Fallback: Copying text command was ' + msg);
\n } catch (err) {
\n console.error('Fallback: Oops, unable to copy', err);
\n }
\n
\n document.body.removeChild(textArea);
\n}
\n
\nfunction copyTextToClipboard(text) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/400212\/how-do-i-copy-to-the-clipboard-in-javascript<\/a>
\n \/\/alert('text=' + text);
\n if (!navigator.clipboard) {
\n fallbackCopyTextToClipboard(text);
\n return;
\n }
\n navigator.clipboard.writeText(text).then(function() {
\n console.log('Async: Copying to clipboard was successful!');
\n }, function(err) {
\n console.error('Async: Could not copy text: ', err);
\n });
\n}
\n
\nfunction ifotherthanfont(cii) {
\n var newcii=cii, allokay=true, ncs=[], incs=0;
\n if (cii.indexOf('<\/font>') != -1 || cii.indexOf('<\/FONT>') != -1) {
\n ncs=cii.split('<\/');
\n for (incs=1; incs<ncs.length; incs++) {
\n if (ncs[incs].toLowerCase().indexOf('font') != 0) { allokay=false; }
\n }
\n if (!allokay || 1 == 1) {
\n ncs=cii.split('<font');
\n for (incs=1; incs<ncs.length; incs++) {
\n newcii=newcii.replace('<font' + ncs[incs].split('>')[0] + '>', '');
\n newcii=newcii.replace('<\/font>', '');
\n }
\n ncs=cii.split('<FONT');
\n for (incs=1; incs<ncs.length; incs++) {
\n newcii=newcii.replace('<FONT' + ncs[incs].split('>')[0] + '>', '');
\n newcii=newcii.replace('<\/FONT>', '');
\n }
\n }
\n }
\n return newcii;
\n}
\n
\nfunction codecopying(mode) {
\n var rectcos=null, icn=0, okpast=false;
\n var cos=document.getElementsByTagName('code');
\n for (var ico=0; ico<cos.length; ico++) {
\n if (mode == '') {
\n rectcos=cos[ico].getBoundingClientRect();
\n document.getElementById('dcode').innerHTML+='<span data-fword=\"' + encodeURIComponent(ifotherthanfont(cos[ico].innerHTML).substring(0,100)) + '\" onclick=\"codecopying(this.id);\" title=\"Copy unadorned code to clipboard buffer\" id=scd' + ico + ' style=\"position:absolute;z-index:56;left:' + eval(-50 + eval('' + rectcos.right)) + 'px;top:' + eval(10 + eval('' + rectcos.top)) + 'px;font-size:24px;\">📋<\/span>';
\n } else if (okpast && encodeURIComponent(ifotherthanfont(cos[ico].innerHTML).substring(0,100)) == document.getElementById(mode).getAttribute('data-fword')) {
\n document.getElementById(mode).style.border='1px dashed pink';
\n copyTextToClipboard(ifotherthanfont(cos[ico].innerHTML).replace(\/\\&\\;nbsp\\;\/g, ' ').replace(\/\\&\\;\\#\/g, '&#').replace(\/ \\&\\;\\;\/g, ' &;').replace(\/\\<br\\>\/g, '').replace(\/\\<\\;\/g, '<').replace(\/\\>\\;\/g, '>').trim());
\n okpast=false;
\n } else if (mode == ('scd' + ico)) { \/\/ Thanks to https:\/\/www.freecodecamp.org\/news\/copy-text-to-clipboard-javascript\/
\n if (encodeURIComponent(ifotherthanfont(cos[ico].innerHTML).substring(0,100)) != document.getElementById(mode).getAttribute('data-fword')) {
\n okpast=true;
\n } else {
\n document.getElementById(mode).style.border='1px dashed pink';
\n copyTextToClipboard(ifotherthanfont(cos[ico].innerHTML).replace(\/\\&\\;nbsp\\;\/g, ' ').replace(\/\\&\\;\\#\/g, '&#').replace(\/ \\&\\;\\;\/g, ' &;').replace(\/\\<br\\>\/g, '').replace(\/\\<\\;\/g, '<').replace(\/\\>\\;\/g, '>').trim());
\n }
\n }
\n }
\n}
\n<\/code>
\n“; ?><\/p>\n

… you might want to try just above, here.<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n