The Live Clipboard web control is a DHTML control that provides copy/paste functionality for data associated with a web page using the Live Clipboard XML data format. It consists of the following components:
It is designed to use standard Javascript and CSS techniques to “bring the clipboard to the web” and to work in as many browsers as possible. Currently, it is verified to work in IE 6, IE 7 Beta 2 Preview and in Mozilla Firefox for PC and Mac. We are working to bring support to other browsers as soon as possible. The control does not depend on installation of any client side applications or browser plug-ins, and it never gains access to the contents of the clipboard without explicit user action to paste.
The control positions a transparent (opacity = 0) input element in a containing div element with a background .png image of the clipboard icon. When the user gives focus to the input by left or right clicking it, tabbing etc. the control script gets the data that should be copied by calling the registered copyCallback function. This callback function is implemented by the page developer and returns a LiveClipboardContent object containing the data that should be copied to the clipboard. Next, the control script serializes this data to the Live Clipboard XML format, which it sets as the value of the input element and selects.
At this point if the user issues a "copy" commmand via the context menu, browser edit menu, ctl-c command etc. the selected contents of the input are put on the clipboard. Alternately, if the user issues a "paste" command, the value of the input is replaced with the current data on the clipboard. In this case the control script detects that the input value has changed, de-serializes the value from Live Clipboard XML format to a LiveClipboardContent object and passes the object to the pasteCallback function.
The pasteCallback function is implemented by the page developer and responds to the pasted data as desired. Specifically, it might iterate through the present data formats, apply data in any recognized format(s) to the page, make an async call to the web server to persist state, setup a new feed subscription etc. It is also valid to do nothing, such as when none of the formats in the pasted data are valid for the associated data.
The onControlSelected and onControlDeSelected callback functions are called by the control script when the input receives and loses focus, respectively. The page developer might implement these functions to visually highlight the data to be copied / pasted over. It is also valid to not implement these.
1) Download the script, CSS style sheet and icon images for the control. You can get these files from the following links:
http://spaces.msn.com/editorial/rayozzie/demo/liveclip/liveclipsample/control/script.js http://spaces.msn.com/editorial/rayozzie/demo/liveclip/liveclipsample/control/webClipControl.css http://spaces.msn.com/editorial/rayozzie/demo/liveclip/liveclipsample/control/liveClipIconSelected.png http://spaces.msn.com/editorial/rayozzie/demo/liveclip/liveclipsample/control/liveClipIconUnselected.pngIf you would like to use our example objects for the hCard and hCal microformats, also get these files:
http://spaces.msn.com/editorial/rayozzie/demo/liveclip/liveclipsample/microformats/hCard.js http://spaces.msn.com/editorial/rayozzie/demo/liveclip/liveclipsample/microformats/hCal.js2) Place these files on your server in an accessible location.
3) Update the .png image URL's in the webClipControl.css style sheet to point to their locations on your server.
4) On the page you want to add the Live Clipboard control, add the control scripts and stylesheet:
<link href="http://localhost/control/webClipControl.css" type="text/css" rel="stylesheet" />
<script src="http://localhost/control/script.js" type="text/javascript"></script>
<script src="http://localhost/microformats/hCard.js" type="text/javascript"></script>
<script src="http://localhost/microformats/hCal.js" type="text/javascript"></script>
5) Define a container element on your page to place the control. This element must have a unique id attribute and must use relative positioning.
6) Define the callback functions that will be used by the control. You might use a closure for this purpose to facilitate binding multiple controls to different sets of data on the page:
function MicroFormatObjectBinding(displayDiv, microFormatObject, inactiveStyleClassName, activeStyleClassName)
{
var webClip;
var self = this;
this.updateDisplayAndWebClipData = function()
{
webClip = new LiveClipboardContent();
displayDiv.innerHTML = microFormatObject.HTML;
webClip.data.formats[0] = new DataFormat();
webClip.data.formats[0].type = microFormatObject.formatType;
webClip.data.formats[0].contentType = "application/xhtml+xml";
webClip.data.formats[0].items = new Array(1);
webClip.data.formats[0].items[0] = new DataItem();
webClip.data.formats[0].items[0].xmlData = microFormatObject.xmlData;
}
this.onActive = function()
{
if (displayDiv.childNodes[0] && (displayDiv.childNodes[0].className == microFormatObject.formatRootClassName))
displayDiv.className = activeStyleClassName;
}
this.onInactive = function()
{
displayDiv.className = inactiveStyleClassName;
}
this.onCopy = function()
{
return webClip;
}
this.onPaste = function(clipData)
{
for (var i = 0; i < clipData.data.formats.length; i++)
{
if ((clipData.data.formats[i].contentType = "application/xhtml+xml") && (clipData.data.formats[i].type == microFormatObject.formatType) && (clipData.data.formats[i].items.length > 0) && (clipData.data.formats[i].items[0].xmlData))
{
microFormatObject.initFromXml(clipData.data.formats[i].items[0].xmlData);
self.updateDisplayAndWebClipData();
// For now, just look at the first microFormatObject found.
return;
}
}
// No matching formats found -- this could mean cut/delete -- so clear the associated data.
microFormatObject.clearProps();
self.updateDisplayAndWebClipData();
}
self.updateDisplayAndWebClipData();
}
7) Instantiate the Live Clipboard control, passing it your containing element, where it will render, and your callback functions:
var hCard1 = new HCard("Matt", "Augustine", "matta@microsoft.com", "425 707 7716", null, null, null, null, null, null, null, null, null, null, null, null, null, null, "1 Microsoft Way", "Redmond", "WA", "98052", "USA", "Microsoft");
var contactBinding1 = new MicroFormatObjectBinding(document.getElementById("contactHcard1"), hCard1, "hcardContainer", "hcardContainer selected");
var clipBoardControl1 = new WebClip(document.getElementById("webClipControl1"), contactBinding1.onCopy, contactBinding1.onPaste, contactBinding1.onActive, contactBinding1.onInactive);
A preliminary specification for the Live Clipboard XML data format is available here. Please keep in mind that the data format used by the control in the example will change somewhat by the time we release the specification. When this happens, we will update the control here, so if you are already using it on your page you will have to update it with the new version. Also, if you write code that uses the LiveClipboardContent object, you might have to modify it slightly.