CiteDrag

[Sephr]

Firefox 3.1 beta 2 recently added support for the standard drag and drop model (https://developer.mozilla.org/En/DragDrop/Drag_and_Drop) (also with some extra Mozilla-only ones). I had an idea to automatically add citation info to text dragged from websites to plain and rich text editors using this newly supported API. I named the finished script CiteDrag, which requires no setup other than adding a single script tag anywhere in your website’s page. CiteDrag displays a enlarged gray (with black shadow) copy of the text you are dragging as the drag image instead of the default text drag image generated by Firefox. CiteDrag is licensed CC GNU LGPL (http://creativecommons.org/licenses/LGPL/2.1/) and comes in two flavors: CiteDrag and CiteDrag + Drag Image. CiteDrag + Drag Image is all of the normal CiteDrag code with some additional code to give a fancy canvas-generated drag image that shows the text content being dragged. You can customize this for your website if you want to. CiteDrag is mostly useful for when someone blogs about another person’s blog post. Having the text automatically go into a cited blockquote and having a link back is very useful. I have installed CiteDrag on this blog and I have a demo (http://code.eligrey.com/citedrag/test.html) of it and a rich text area (http://code.eligrey.com/citedrag/richtextarea.html) you can use to test out CiteDrag fully.
Here are some examples of what it does when you drag various data types to various input areas: (Note wherever it says title, it will be replaced with the host name of the source page if there is no page title)


Drag a link or image (or linked image) to a normal text input: { [link URI] or [image URI] } via {source title} ( {source URI} )

Example: http://example.com/ via Foobar ( http://foo.bar/post/example.com-ftw/ )


Drag a link or image (or linked image) to a rich text input: { [clickable link to link URI] or [image URI] or [clickable image linked to link URI] } via {clickable link to source page with title as text}

Example: Example Web Page (http://example.net/) via Elijah Grey (http://www.example.com/)


Drag formatted or non-formatted text to a normal text input: “{Text dragged}” ― {source title} ( {source URI} )

Example: “Lorem ipsum dolor sit amet.” ― Elijah Grey ( http://www.example.com/ )


Drag formatted or non-formatted text into a rich text input: The dragged text goes into a <blockquote cite=”{source URI}”> and after the blockquote is ― {clickable link to source page with title as text}

Example:Lorem ipsum dolor sit amet.
― Elijah Grey (http://www.example.com/)



CiteDrag:
/* License
CiteDrag - v1.0.0 - http://code.eligrey.com/citedrag/
Author: Elijah Grey - www.eligrey.com
Creative Commons GNU Lesser General Public License
http://creativecommons.org/licenses/LGPL/2.1/
*/

function CiteDrag(event) {
var dt = event.dataTransfer;
var originName = (document.title||location.hostname);
if (dt.getData("text/uri-list") != '') {
var uriList = dt.getData("text/uri-list")+'\n#via '+originName+'\n'+location.href;
dt.setData('text/uri-list', uriList);
dt.setData('text/x-moz-url', uriList);
dt.setData('text/html', dt.getData("text/html")+' via <a href="'+location.href+'" title="'+location.hostname+'">'+originName+'</a>');
dt.setData('text/plain', dt.getData("text/plain")+' via '+originName+' ( '+location.href+' )');
} else {
if (dt.getData("text/html") != '') dt.setData('text/html', '<blockquote cite="'+location.href+'">'+dt.getData("text/html")+'</blockquote> \u2015 <a title="'+location.host+'" href="'+location.href+'">'+originName+'</a>');
if (dt.getData("text/plain") != '') dt.setData('text/plain', '\u201C'+dt.getData("text/plain")+'\u201D \u2015 '+originName+' ( '+location.href+' )');
}
};

document.addEventListener('dragstart', CiteDrag, false);
CiteDrag + Drag Image:
/* License
CiteDrag + Drag Image - v1.0.0 - http://code.eligrey.com/citedrag/
Author: Elijah Grey - www.eligrey.com
Creative Commons GNU Lesser General Public License
http://creativecommons.org/licenses/LGPL/2.1/
*/

function CiteDrag(event) {
var dt = event.dataTransfer;
var cutoff = 55;
var cutoffText = dt.getData("text/plain").substr(0,cutoff)
var dragImageText = cutoffText+(dt.getData("text/plain").length <= cutoff?'':'\u2026');
var canvas = document.createElement("canvas");
canvas.height = 50;
canvas.width = 300;
var ctx = canvas.getContext("2d");
ctx.textBaseline = "top";
ctx.font = "20pt Arial";
ctx.fillStyle = "black";
ctx.fillText(dragImageText, 1, 1, canvas.width);
ctx.fillStyle = "gray";
ctx.fillText(dragImageText, 0, 0, canvas.width);
dt.setDragImage(canvas, 0, canvas.height/2);
var originName = (document.title||location.hostname);
if (dt.getData("text/uri-list") != '') {
var uriList = dt.getData("text/uri-list")+'\n#via '+originName+'\n'+location.href;
dt.setData('text/uri-list', uriList);
dt.setData('text/x-moz-url', uriList);
dt.setData('text/html', dt.getData("text/html")+' via <a href="'+location.href+'" title="'+location.hostname+'">'+originName+'</a>');
dt.setData('text/plain', dt.getData("text/plain")+' via '+originName+' ( '+location.href+' )');
} else {
if (dt.getData("text/html") != '') dt.setData('text/html', '<blockquote cite="'+location.href+'">'+dt.getData("text/html")+'</blockquote> \u2015 <a title="'+location.host+'" href="'+location.href+'">'+originName+'</a>');
if (dt.getData("text/plain") != '') dt.setData('text/plain', '\u201C'+dt.getData("text/plain")+'\u201D \u2015 '+originName+' ( '+location.href+' )');
}
};

document.addEventListener('dragstart', CiteDrag, false);