DCScript© Copy Master
A script that uses the W3C and Microsoft DOMs for useful effects.
About
This script will work wonders for people with code examples on their webpages. It automatically puts a "Copy All" button right before every pre in the document. Clicking the button will copy the code inside the PRE to the user's clipboard.
Example
I have some PREs below. There is no code for a button before them, look at the source code if you don't believe me!
function askTitle() {
if (confirm("Do you wanna change the title?"))
parent.document.title="It's changed";
}
But the most important part of the script is that asks the user. What if the user says no?
else {
alert("Ok");
parent.location="http://dcscript.vze.com";
}
How to Install
If you want to use this script simply download copy.js and put this in the head (oh and the pre below has an attribute buttonbefore="false"; I'll explain this later on):
<script type="text/javascript" src="copy.js"></script>
The Copy Master only works on IE 5.0 or above. That's the only bad thing. However the buttons are only a nice extra, not something the page depends on (besides IE browsers are 95% of all visitors anyway).
How it works
First this script gets all PRE tags in the document and loops through them. It creates two elements, a button and a textarea. The textarea is simply to transfer text. I don't know why, but it's required. Since the textarea only exists for holding data, we give it display: none so it's completely hidden from the user. The button is assigned an onclick property for handling the code that copies the text, and a text node ("Copy All"). The textarea and button are inserted before every PRE with the attribute buttonbefore="true" in the document.
Now the copy function. First the function finds which button was clicked on. Then we call nextSibling to find the PRE. So now the text from the nextSibling (the PRE) is put into the hidden textarea; the textarea text goes through two IE only commands (createTextRange and execCommand) and poof! The text is copied to the clipboard! Here's the code:
function makeIt() {
//Only works in very advanced IE browsers.
var pres = document.getElementsByTagName("pre");
for (var i=0;i<pres.length;i++) {
var pre = pres[i];
var link = document.createElement("button");
var hide = document.createElement("textarea");
hide.style.display='none';
link.style.display='block';
link.onclick = copyText;
link.appendChild(document.createTextNode("Copy All"));
// or make it a link or something
pre.parentNode.insertBefore(hide,pre);
pre.parentNode.insertBefore(link,pre);
}
}
//Borrowed in part from PPK
function copyText(e) {
if (!e) var e = window.event;
if (e.target) var tg = e.target;
else if (e.srcElement) var tg = e.srcElement;
var data = tg.nextSibling;
//You can use document.getElementById if you have another textarea on the page.
var text = document.getElementsByTagName("TEXTAREA")[0];
text.innerText = data.firstChild.nodeValue;
Copied = text.createTextRange();
Copied.execCommand("Copy");
}
Special thanks to Lasse Reichstein Nielsen, Peter-Paul Koch and Joe Burns for helping me with this with this script.