• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Clipboard support on Y! mail

Clipboard support on Y! mail






Total Views
Views on SlideShare
Embed Views



2 Embeds 58

https://twitter.com 57
http://www.linkedin.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Clipboard support on Y! mail Clipboard support on Y! mail Presentation Transcript

    • 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 exceptions in most browsers
    • 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(); });
    • Keyboard shortcutHidden text field trick
    • 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(); }}
    • 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 transactions flash movie
    • Initializing the clipboardnode.plug(Y.ClipBoard, { page : Y.one(".container"), moviepath : "../assets/"}).on("clipboard:load", function(e){ /* Clipboard ready, code goes in here */});
    • 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”);}
    • Setting up copy for ‘enter’Tracking keydown in flashthis.clipboard.setEvent("enter”, function(ev){ this.clipboard.hide(); },true);
    • 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 event can trigger copy •  Any flash event can be trapped by JS
    • 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-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/