Your SlideShare is downloading. ×
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Clipboard support on Y! mail
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Clipboard support on Y! mail

2,255

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
2,255
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Clipboardsupport 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
  • 10. So what is the ideal view for a contact ?
  • 11. A contact is an object with many properties and functionality
  • 12. but the challenge is …
  • 13. Copy Paste
  • 14. Easiest way is to have an “edit” mode and allow copy to be handled by OS
  • 15. User friendly way is to haveDHTML widgets & paradigms for initiating a copy
  • 16. … but browser clipboard support is non standard and rocky.
  • 17. IE’s clipboardData object is good *New versions of IE prompt user
  • 18. Mozilla’s XUL Approach Not practical
  • 19. Making use of execCommand Good option to consider Document to be opened in Design-mode Throws security exceptions in most browsers
  • 20. 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(); });
  • 21. Keyboard shortcutHidden text field trick
  • 22. Create hidden field with copy textY.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(); }}
  • 23. User initiated actiongallery-clipboard node plugin
  • 24. http://yuilibrary.com/gallery/show/clipboard
  • 25. Based on the approach employed in ZeroClipboardhttp://code.google.com/p/zeroclipboard/
  • 26. Adobe Flash Player 10 added a number ofuser-initiated action (UIA) requirement
  • 27. function can be called ONLY in response to a user action / event
  • 28. clipboardnode plug ATTR “copy”ATTRS Flashevents interface transactions flash movie
  • 29. Initializing the clipboardnode.plug(Y.ClipBoard, { page : Y.one(".container"), moviepath : "../assets/"}).on("clipboard:load", function(e){ /* Clipboard ready, code goes in here */});
  • 30. 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”);}
  • 31. Setting up copy for ‘enter’Tracking keydown in flashthis.clipboard.setEvent("enter”, function(ev){ this.clipboard.hide(); },true);
  • 32. Demohttp://rmsguhan.github.com/gallery-clipboard/demo/demo_1.html
  • 33. 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
  • 34. Should we use it ? Non-sta ndard i s a sin !
  • 35. fir st ! comeUsers Thank you !
  • 36. 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/

×