In this blog I'll dive into the implementation detail of Live Clipboard, which was originally proposed by Ray Ozzie several months ago. But first, I developed a simple demo below:
Live Clipboard Demo
First, let's examine how the UI is implemented. The context menu you see when you do a right-click is, quite surprisingly, from a transparent TEXTAREA. The TEXTAREA, via CSS, has the cursor set to 'pointer', z-index set to positive, and opacity set to 0. When a right-click is detected via onMouseEvent (which is fired before the context menu is displayed), TEXTAREA's value is set to the content that should go to the clipboard, and the entire text is programatically selected (so that the context menu for text selection is displayed). When the user select "Copy", the desired text is indeed copied to the clipboard. As for Paste, onPaste event is simulated by calling a function every 50 millseconds that checks the value of the TEXTAREA. If it changes, then either delete, cut, or paste was performed by the user. They seem "hacky" at first, but this is one of few techniques that work well across browsers.
Next, let's examine the data that actually go to the clipboard. As you may have expected, XML is used for this purpose, and its schema is well documented here. As a reference, here's a sample XML for a vCard:
<?xml version="1.0" encoding="utf-8" ?>
<liveclipboard version="0.92"
source="http://localhost:2475/live/liveclipboard.htm"
xmlns:lc="http://www.microsoft.com/schemas/liveclipboard">
<lc:data>
<lc:format type="vcard" contenttype="application/xhtml+xml">
<lc:item>
<div class="vcard uid" title="undefined">
<div class="fn n"><span class="given-name">Keiji</span> <span class="family-name">Oenoki</span></div>
<a class="email" href="mailto:keijio@microsoft.com">keijio@microsoft.com</a>
<div class="tel"><span class="value">425-705-0742</span></div>
<div class="adr">
<span class="type">Work</span>:
<div class="street-address">1065 La Avenida St</div>
<span class="locality">Mountain View</span>
<span class="region">CA</span>
<span class="postal-code">94043</span>
<span class="country-name">USA</span></div></div>
</lc:item>
</lc:format>
</lc:data>
</liveclipboard>
It is important to note that microformat is used here. Micrformat is a way to encode semantic information using the class tag of HTML. This allows both human and machine to easily access the information. Here's an example of encoding "first name" and "last name" using the SPAN tag:
<p>This document was prepared by <span class="name">Keiji Oenoki</span>,
who lives in Mountain View...</p>
Next, let's talk about presentation using CSS. CSS controls how the data is displayed. For example, name can be displayed in a bold font, or address information can be made hidden.
Finally, JavaScript bridges the gap between the data and the presentation. In Live Clipboard, this is achieved by connecting three JavaScript objects - HCard, MicroFormatBindingObject, and WebClip. Consider this example:
var hCard1 = new HCard("Keiji", "Oenoki", "keijio@microsoft.com",
"425-705-0742", null, null, null, null, null, null,
null, null, null, null, null, null, null, null,
"1065 La Avenida St", "Mountain View", "CA", "94043","USA", "Microsoft");
var contactBinding1 = new MicroFormatObjectBinding(
document.getElementById("contactHcard1"),
hCard1, "ContactContainer unselected",
"ContactContainer selected");
var clipBoardControl1 = new WebClip(
document.getElementById("webClipControl1"), contactBinding1.onCopy,
contactBinding1.onPaste, contactBinding1.onActive, contactBinding1.onInactive);
The first line instantiates the raw data, the second line associates the data with a DIV element (for presentation purpose), and finally the last line connects the data and the presentation using events. There are four types of events in WebClip:
- onCopy: returns the data used during the Copy operation
- onPaste: invoked when delete/cut/paste is performed
- onActive: invoked when the data is selected
- onInactive: invoked when the data selection is cleared
That's it! The source code is open to anyone interested: