Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Clipboard support on Y! mail

3,190 views

Published on

Published in: Technology

Clipboard support on Y! mail

  1. 1. Clipboardsupport on Y! Mail contact YUI Conf 2011
  2. 2. Who am I•  Subramanyan Murali•  @rmsguhan•  Y! Mail user, engineer, hacker•  YUI fanboy
  3. 3. The best Yahoo! Mail ever !! •  Are you using it yet ?
  4. 4. And its completely built on YUI !!May even be the largest [ab]user of YUI 
  5. 5. “An email address identifies an machine/person to which email messages are delivered” - Wikipedia
  6. 6. “An email address is a string that needs a whole lot of weird regex ” - Mail engineer
  7. 7. Designed to be human readable yet machine understandable local-part@domain
  8. 8.  The first big idea ….“more readable name” <nickname@domain>“John Doe” <jst_bbr_fan_4u@wow.com>
  9. 9. Makes it longer and still NOT easily identifiable
  10. 10. So what is the ideal view for a contact ?
  11. 11. A contact is an object with many properties and functionality
  12. 12. but the challenge is …
  13. 13. Copy Paste
  14. 14. Easiest way is to have an “edit” mode and allow copy to be handled by OS
  15. 15. User friendly way is to haveDHTML widgets & paradigms for initiating a copy
  16. 16. … but browser clipboard support is non standard and rocky.
  17. 17. IE’s clipboardData object is good *New versions of IE prompt user
  18. 18. Mozilla’s XUL Approach Not practical
  19. 19. Making use of execCommand Good option to consider Document to be opened in Design-mode Throws security exceptions in most browsers
  20. 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. 21. Keyboard shortcutHidden text field trick
  22. 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. 23. User initiated actiongallery-clipboard node plugin
  24. 24. http://yuilibrary.com/gallery/show/clipboard
  25. 25. Based on the approach employed in ZeroClipboardhttp://code.google.com/p/zeroclipboard/
  26. 26. Adobe Flash Player 10 added a number ofuser-initiated action (UIA) requirement
  27. 27. function can be called ONLY in response to a user action / event
  28. 28. clipboardnode plug ATTR “copy”ATTRS Flashevents interface transactions flash movie
  29. 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. 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. 31. Setting up copy for ‘enter’Tracking keydown in flashthis.clipboard.setEvent("enter”, function(ev){ this.clipboard.hide(); },true);
  32. 32. Demohttp://rmsguhan.github.com/gallery-clipboard/demo/demo_1.html
  33. 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. 34. Should we use it ? Non-sta ndard i s a sin !
  35. 35. fir st ! comeUsers Thank you !
  36. 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/

×