Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Clipboard support on Y! mail

3.365 visualizaciones

Publicado el

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

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/

×