Clipboardsupport on Y! Mail contact    YUI Conf 2011
Who am I•  Subramanyan Murali•  @rmsguhan•  Y! Mail user, engineer, hacker•  YUI fanboy
The best Yahoo! Mail ever !! •  Are you using it yet ?
And its completely  built on YUI !!May even be the largest  [ab]user of YUI 
“An email address identifies  an machine/person to which email messages are delivered”                   - Wikipedia
“An email address is a string that needs a whole lot of weird             regex ”                - Mail engineer
Designed to be human readable  yet machine understandable       local-part@domain
       The first big idea ….“more readable name” <nickname@domain>“John Doe” <jst_bbr_fan_4u@wow.com>
Makes it longer and still NOT      easily identifiable
So what is the ideal view for         a contact ?
A contact is an object with many   properties and functionality
but the challenge is …
Copy   Paste
Easiest way is to have an “edit”   mode and allow copy to be         handled by OS
User friendly way is to haveDHTML widgets & paradigms     for initiating a copy
… but browser clipboard support   is non standard and rocky.
IE’s clipboardData object is            good    *New versions of IE prompt user
Mozilla’s XUL Approach       Not practical
Making use of execCommand           Good option to consider   Document to be opened in Design-mode Throws security excepti...
In an ideal world ! Y.on(“copy”, function(e) {     window.clipboard.copy(e.target.get(“innerHTML”);     e.preventDefault()...
Keyboard shortcutHidden text field trick
Create hidden field with copy textY.on(keydown, function(event) {   var specialKey =event.ctrlKey, textNode, text;    if (...
User initiated actiongallery-clipboard node plugin
http://yuilibrary.com/gallery/show/clipboard
Based on the approach employed       in ZeroClipboardhttp://code.google.com/p/zeroclipboard/
Adobe Flash Player 10 added a          number ofuser-initiated action (UIA)        requirement
function can be called ONLY in   response to a user action /              event
clipboardnode         plug    ATTR “copy”ATTRS                     Flashevents             interface                transa...
Initializing the clipboardnode.plug(Y.ClipBoard, {    page      : Y.one(".container"),    moviepath : "../assets/"}).on("c...
Setting up copy for ‘click’this.on(“mouseover”, function(ev){    var str = this.get(“innerHTML”);    this.setAttribute(“co...
Setting up copy for ‘enter’Tracking keydown in flashthis.clipboard.setEvent("enter”,    function(ev){        this.clipboar...
Demohttp://rmsguhan.github.com/gallery-clipboard/demo/demo_1.html
Different from ZeroClipboard ?•  YUI Node infrastructure•  Normalizes event interface between the  flash and JS  •  So any...
Should we use it ?     Non-sta            ndard i                   s   a sin !
fir st !      comeUsers    Thank you !
Links•  http://yuilibrary.com/gallery/show/clipboard•  http://developer.yahoo.com/blogs/ydn/posts/  2011/08/copy-feature-f...
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
×

Clipboard support on Y! mail

2,595
-1

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
2,595
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

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/

×