Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Clipboard Support (gallery-clipboard) on cdn

Last Updated: 09/10/11

+ 3 -

Subramanyan Murali

YUI Contributor

Created: 08/23/11
Last CDN Push: 09/14/11
Build Tag: gallery-2011.09.14-20-40
Project: YUI 3
License: YUI BSD
YUI Version: 3.4.0
Free for use.

About

The ClipBoard class is designed to be a node plugin and a wrapper over the flash movie to copy text contents to the OS clipboard. The class will place the flash movie below the given node so that a user action can trigger the copy of contents to the OS clip board using Flash's 'System.setClipboard' method. Starting from flash 10, the clipboard can be set only off a user initiated event. So the JS class shall only set the string to be copied and will allow the flash movie's event to capture the user action and set the clipboard contents.

Note

The swf file will NOT be hosted part of the YUI CDN. Please download the .as file and generate the swf file on your own and place it in your web root or you can download the swf file from https://github.com/rmsguhan/gallery-clipboard/tree/master/assets and point your scripts to it

Known Issues

For the 'enter' event to work, we need to explicitly set focus on the overlay flash movie. Need to find a better focus mechanism for this

Future Enhancements

Use 'on' method to attach events on the flash movie instead of setEvent. Flash movie events need to be prefixed with "clipboard:", e.g mouseOver event on flash movie should be attachable using node.on("clipboard:mouseOver", function() {});

Setting up the Plugin



    

       node.plug(Y.ClipBoard, {

            page : Y.one(".container"),

            moviepath : "../assets/"

        }).on("clipboard:load", function(e){

              /* Clipboard ready, your code goes in here */    

        });

In the above code snippet, moviepath is the path to the ClipBoardCopy.swf file on your server. This can be a URL or a relative path. Since swf files are not allowed on the YUI CDN, please download the .as file and generate the swf movie or download the movie from github.com/rmsguhan/gallery-clipboard/tree/master/assets

Code Sample

<script src="http://yui.yahooapis.com/3.4.0/build/yui/yui-min.js"></script>

    var MOVIE_PATH = '../../../build/gallery-clipboard/assets/';
    YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.09.14-20-40'
}).use('gallery-clipboard', function(Y) {
 
        var logit = function(str) {
            var log = Y.one("#log"),
                m   = Y.Node.create("<div>"+str+"</div>");
            log.appendChild(m);
            log.set("scrollTop", log.get("offsetHeight")+10)
        };
 
        var node1 = Y.one(".b1"),
            node2 = Y.one(".b2");
 
        /* Make sure that the flash interface callback is within a known global name space */
        window.My = {
            Global : {
                foo : "bar"
            }
        };
        Y.ClipBoard.setCallBackGlobal( "My.Global" );            
 
        /* Set up Copy on Node 1 */
        node1.plug(Y.ClipBoard, {
            page : Y.one(".container"),
            moviepath : MOVIE_PATH
        }).on("clipboard:load", function(e){
            logit("Flash Movie Loaded for :"+e.currentTarget.get("className"));
            this.on("mouseover", function(ev) {
                this.setAttribute("copy", this.get("innerHTML"));
                logit("String set for copy " + this.getAttribute("copy"));
            });
            this.clipboard.setEvent("enter", function(ev) {
                logit("Clipboard set for : "+this.get("className")+":'"+ev.clipboard+"'");
                this.clipboard.hide();
            }, true);
        });
        Y.on("clipboard:error", function(e) {
            logit("ERROR :"+e.error);
        });
        /* Set up Copy on Node 2 */
        node2.plug(Y.ClipBoard, {
            page : Y.one(".container"),
            moviepath : MOVIE_PATH
        }).on("clipboard:load", function(e){
            logit("Flash Movie Loaded for :"+e.currentTarget.get("className"));
            this.on("mouseover", function(ev) {
                this.setAttribute("copy", this.get("innerHTML"));
                logit("String set for copy " + this.getAttribute("copy"));
            });
            this.clipboard.setEvent("click", function(ev) {
                this.clipboard.hide();
                logit("Clipboard set for : "+this.get("className")+":'"+ev.clipboard+"'");
            }, true);
        });
 
        /* Set up actions */
        Y.all(".control input").on("click", function(e) {
            var tr = e.target,nd,cl,event;
            if(tr.get("type") === "button") {
                nd = Y.one("."+tr.getAttribute("node"));
                cl = tr.get("className");
                if(cl === "set-text") {
                    nd.set("innerHTML", Y.one("#copy-text").get("value"));
                } else if(cl === "clear") {
                    Y.one("#log").set("innerHTML", "");
                } else if(cl.indexOf("-") < 0) {
                    nd.clipboard.setEvent(cl, function(ev) {
                        logit("Flash '"+ev.event+"' fired for node "+
                              Y.one("#"+ev.transaction).get("className"));
                    });
                } else {
                    /* Remove case */
                    event = cl.substring(cl.indexOf("-")+1);
                    nd.clipboard.removeEvent(event);
                    logit("Flash '"+event+"' removed for "+nd.get("className"));
                }
 
            }
        });
    });

var MOVIE_PATH = '../../../build/gallery-clipboard/assets/';
    YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.09.14-20-40'
}).use('gallery-clipboard', function(Y) {
        
        var logit = function(str) {
            var log = Y.one("#log"),
                m   = Y.Node.create("<div>"+str+"</div>");
            log.appendChild(m);
            log.set("scrollTop", log.get("offsetHeight")+10)
        };
        
        var node1 = Y.one(".b1"),
            node2 = Y.one(".b2");

/* Make sure that the flash interface callback is within a known global name space */
        window.My = {
            Global : {
                foo : "bar"
            }
        };
        Y.ClipBoard.setCallBackGlobal( "My.Global" );

/* Set up Copy on Node 1 */
        node1.plug(Y.ClipBoard, {
            page : Y.one(".container"),
            moviepath : MOVIE_PATH
        }).on("clipboard:load", function(e){
            logit("Flash Movie Loaded for :"+e.currentTarget.get("className"));
            this.on("mouseover", function(ev) {
                this.setAttribute("copy", this.get("innerHTML"));
                logit("String set for copy " + this.getAttribute("copy"));
            });
            this.clipboard.setEvent("enter", function(ev) {
                logit("Clipboard set for : "+this.get("className")+":'"+ev.clipboard+"'");
                this.clipboard.hide();
            }, true);
        });
        Y.on("clipboard:error", function(e) {
            logit("ERROR :"+e.error);
        });
        /* Set up Copy on Node 2 */
        node2.plug(Y.ClipBoard, {
            page : Y.one(".container"),
            moviepath : MOVIE_PATH
        }).on("clipboard:load", function(e){
            logit("Flash Movie Loaded for :"+e.currentTarget.get("className"));
            this.on("mouseover", function(ev) {
                this.setAttribute("copy", this.get("innerHTML"));
                logit("String set for copy " + this.getAttribute("copy"));
            });
            this.clipboard.setEvent("click", function(ev) {
                this.clipboard.hide();
                logit("Clipboard set for : "+this.get("className")+":'"+ev.clipboard+"'");
            }, true);
        });
        
        /* Set up actions */
        Y.all(".control input").on("click", function(e) {
            var tr = e.target,nd,cl,event;
            if(tr.get("type") === "button") {
                nd = Y.one("."+tr.getAttribute("node"));
                cl = tr.get("className");
                if(cl === "set-text") {
                    nd.set("innerHTML", Y.one("#copy-text").get("value"));
                } else if(cl === "clear") {
                    Y.one("#log").set("innerHTML", "");
                } else if(cl.indexOf("-") < 0) {
                    nd.clipboard.setEvent(cl, function(ev) {
                        logit("Flash '"+ev.event+"' fired for node "+
                              Y.one("#"+ev.transaction).get("className"));
                    });
                } else {
                    /* Remove case */
                    event = cl.substring(cl.indexOf("-")+1);
                    nd.clipboard.removeEvent(event);
                    logit("Flash '"+event+"' removed for "+nd.get("className"));
                }
                
            }
        });
    });