{"id":61990,"date":"2023-12-16T03:01:19","date_gmt":"2023-12-15T17:01:19","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=61990"},"modified":"2023-12-16T08:57:31","modified_gmt":"2023-12-15T22:57:31","slug":"angled-text-tool-clipboard-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/angled-text-tool-clipboard-tutorial\/","title":{"rendered":"Angled Text Tool Clipboard Tutorial"},"content":{"rendered":"
\"Angled<\/a>

Angled Text Tool Clipboard Tutorial<\/p><\/div>\n

We started feeling that yesterday’s Angled Text Tool Context Tutorial<\/a>‘s progress was starting to feel like a web application that was a “tool”. But something was missing. It wasn’t friendly enough to a serious user, the ones tempted to try it out and persevere, to see whether it could help them out … ie. being used as a “tool”. And so we added some new Javascript …<\/p>\n


\nfunction fallbackCopyTextToClipboard(text) { \/\/ thanks to <a target=\"_blank\" title=\"https:\/\/stackoverflow.com\/questions\/400212\/how-do-i-copy-to-the-clipboard-in-javascript\" href=\"https:\/\/stackoverflow.com\/questions\/400212\/how-do-i-copy-to-the-clipboard-in-javascript\">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 <a target=\"_blank\" title=\"https:\/\/stackoverflow.com\/questions\/400212\/how-do-i-copy-to-the-clipboard-in-javascript\" href=\"https:\/\/stackoverflow.com\/questions\/400212\/how-do-i-copy-to-the-clipboard-in-javascript\">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 nifotherthanfont(cii) {
\n return decodeURIComponent(cii);
\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 eletype='td';
\n if (mode != '') {
\n eletype=document.getElementById(mode).outerHTML.substring(1).split(' ')[0].split('>')[0];
\n }
\n var cos=document.getElementsByTagName(eletype); \/\/'code'
\n for (var ico=0; ico<cos.length; ico++) {
\n if (cos[ico].id == 'is' || cos[ico].id == 'was' || (cos[ico].id == mode && mode != '')) {
\n if (mode == '') {
\n rectcos=cos[ico].getBoundingClientRect();
\n document.getElementById('dcode').innerHTML+='<span data-fword=\"' + encodeURIComponent(ifotherthanfont(cos[ico].innerHTML.replace(\/\\&lt\\;\/g,'<').replace(\/\\&gt\\;\/g,'>')).substring(0)) + '\" onclick=\"codecopying(this.id);\" title=\"Copy unadorned HTML 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 (1 == 1) {
\n document.getElementById(mode).style.border='1px dashed pink';
\n copyTextToClipboard(nifotherthanfont(document.getElementById(mode).getAttribute('data-fword')).replace(\/\\&amp\\;nbsp\\;\/g, '&nbsp;').replace(\/\\&amp\\;\\#\/g, '&#').replace(\/ \\&amp\\;\\;\/g, ' &;').replace(\/\\<br\\>\/g, '').replace(\/\\&amp;lt\\;\/g, '<').replace(\/\\&amp;gt\\;\/g, '>').trim());
\n okpast=false;
\n }
\n }
\n }
\n}
\n<\/code><\/p>\n

Does this code seem familiar to you? It might be because we tried this “Being able to Copy Code to the Clipboard Here with the Blog You are Reading” when we published WordPress Blog Code Element Clipboard Copy Primer Tutorial<\/a> back in February. The code above is very similar, but some differences are …<\/p>\n