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/