1) The document discusses various approaches for implementing copy and paste functionality for contacts in email applications using the Yahoo! UI library (YUI). 2) Key challenges include inconsistent browser clipboard APIs and security restrictions that require user-initiated actions for copying content. 3) The proposed solution is a YUI node plugin called "gallery-clipboard" that provides a normalized event interface between JavaScript and Flash to allow copying in response to user events like mouse clicks or key presses.

1. Clipboard
support on Y!
Mail contact
YUI Conf 2011

2. Who am I
• Subramanyan Murali
• @rmsguhan
• Y! Mail user, engineer, hacker
• YUI fanboy

3. The best Yahoo! Mail ever !!
• Are you using it yet ?

4. And its completely
built on YUI !!
May even be the largest
[ab]user of YUI 

5. “An email address identifies
an machine/person to which
email messages are delivered”
- Wikipedia

6. “An email address is a string
that needs a whole lot of weird
regex ”
- Mail engineer

7. Designed to be human readable
yet machine understandable
local-part@domain

8. 
The first big idea ….
“more readable name” <nickname@domain>
“John Doe” <jst_bbr_fan_4u@wow.com>

9. Makes it longer and still NOT
easily identifiable

11. So what is the ideal view for
a contact ?

12. A contact is an object with many
properties and functionality

14. but the challenge is …

15. Copy Paste

16. Easiest way is to have an “edit”
mode and allow copy to be
handled by OS

17. User friendly way is to have
DHTML widgets & paradigms
for initiating a copy

18. … but browser clipboard support
is non standard and rocky.

19. IE’s clipboardData object is
good
*New versions of IE prompt user

20. Mozilla’s XUL Approach
Not practical

21. Making use of execCommand
Good option to consider
Document to be opened in Design-mode
Throws security exceptions in most browsers

22. In an ideal world !
Y.on(“copy”, function(e) {
window.clipboard.copy(e.target.get(“innerHTML”);
e.preventDefault();
});
Y.on(“paste”, function(e) {
var d = window.clipboard.getData();
e.preventDefault();
});

23. Keyboard shortcut
Hidden text field trick

25. Create hidden field with copy text
Y.on('keydown', function(event) {
var specialKey =event.ctrlKey, textNode, text;
if (event.keyCode == 67 && specialKey) {
textNode = Y.one('#copyText’);
/* Copy the contents of the contact bubble /
lozenge */
text = ‘Foo Bar <foobar@yahoo.com>’;
textNode.set('value’, text);
textNode.focus();
textNode.select();
}
}

26. User initiated action
gallery-clipboard node plugin

27. http://yuilibrary.com/gallery/show/clipboard

28. Based on the approach employed
in ZeroClipboard
http://code.google.com/p/zeroclipboard/

29. Adobe Flash Player 10 added a
number of
user-initiated action (UIA)
requirement

30. function can be called ONLY in
response to a user action /
event

32. clipboard
node
plug ATTR “copy”
ATTRS
Flash
events interface
transactions
flash movie

33. Initializing the clipboard
node.plug(Y.ClipBoard, {
page : Y.one(".container"),
moviepath : "../assets/"
}).on("clipboard:load", function(e){
/* Clipboard ready, code goes in here */
});

34. Setting up copy for ‘click’
this.on(“mouseover”, function(ev){
var str = this.get(“innerHTML”);
this.setAttribute(“copy”, str));
});
this.clipboard.setEvent(“click”, function(ev){
this.clipboard.hide();
},
true);
this.on(“mouseout”, function(ev) {
Y.log(this.getAttribute(“copy”);
}

35. Setting up copy for ‘enter’
Tracking keydown in flash
this.clipboard.setEvent("enter”,
function(ev){
this.clipboard.hide();
},
true);

36. Demo
http://rmsguhan.github.com/gallery-clipboard/demo/demo_1.html

37. Different from ZeroClipboard ?
• YUI Node infrastructure
• Normalizes event interface between the
flash and JS
• So any event can trigger copy
• Any flash event can be trapped by JS

38. Should we use it ?
Non-sta
ndard i
s a sin !

39. fir st !
come
Users
Thank you !

40. Links
• http://yuilibrary.com/gallery/show/clipboard
• http://developer.yahoo.com/blogs/ydn/posts/
2011/08/copy-feature-for-yahoo-mail-contact/
• http://developer.yahoo.com/blogs/ydn/posts/
2011/10/copy-to-clipboard-for-user-initiated-
actions/
• Photos : http://flickr.com/photos/rmsguhan/