Friday, June 29, 2012

Javascript Copy To Clipboard (All Browser)

Script ini cukup jelas. Mengirimkan sebuah string ke fungsi copyToClipboard dan akan ditempatkan pada clipboard sehingga kita dapat menyisipkannya ke program lain. Bahasa yang lebih manusiawinya adalah, sekali klik content yang kita mau langsung di copy ke clipboard kita. Begini caranya:


function copyToClipboard(s)
{
 if( window.clipboardData && clipboardData.setData )
 {
  clipboardData.setData("Text", s);
 }
 else
 {
  // You have to sign the code to enable this or allow the action in about:config by changing
  user_pref("signed.applets.codebase_principal_support", true);
  netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');


  var clip Components.classes['@mozilla.org/widget/clipboard;[[[[1]]]]'].createInstance(Components.interfaces.nsIClipboard);
  if (!clip) return;

  // create a transferable
  var trans = Components.classes['@mozilla.org/widget/transferable;[[[[1]]]]'].createInstance(Components.interfaces.nsITransferable);
  if (!trans) return;


  // specify the data we wish to handle. Plaintext in this case.
  trans.addDataFlavor('text/unicode');


  // To get the data from the transferable we need two new objects
  var str = new Object();
  var len = new Object();


  var str = Components.classes["@mozilla.org/supports-string;[[[[1]]]]"].createInstance(Components.interfaces.nsISupportsString);


  var copytext=meintext;


  str.data=copytext;


  trans.setTransferData("text/unicode",str,copytext.length*[[[[2]]]]);


  var clipid=Components.interfaces.nsIClipboard;


  if (!clip) return false;


  clip.setData(trans,null,clipid.kGlobalClipboard);    
 }
}
Codenya:


<textarea id='testText'>#COPYTOCLIPBOARD CODE#</textarea><br> <button onclick='copyToClipboard(document.getElementById('testText').value);'>
Bagaimana kalau kita mau pake function itu di browser selain IE?
Kita butuh Flash untuk ngebaca library si Javascript tadi.
Ini contohnya: File Test.Html


<html>
       <head>
               <style type="text/css">
                      #d_clip_button {
                              text-align:center; 
                              border:1px solid black; 
                              background-color:#ccc; 
                              margin:10px; padding:10px; 
                       }
                       #d_clip_button.hover { background-color:#eee; }
                       #d_clip_button.active { background-color:#aaa; }
               </style>
       </head>
       <body>
               <script type="text/javascript" src="ZeroClipboard.js"></script>
               Copy to Clipboard: 
             <input type="text" id="clip_text" size="40" value="Copy me!"/><br/><br/> 
        
               <div id="d_clip_button">Copy To Clipboard</div>
        
               <script language="JavaScript">
                       var clip = new ZeroClipboard.Client();
                       
                       clip.setText( '' ); // will be set later on mouseDown
                       clip.setHandCursor( true );
                       clip.setCSSEffects( true );
                       
                       clip.addEventListener( 'load', function(client) {
                               // alert( "movie is loaded" );
                       } );
                        
                        clip.addEventListener( 'complete', function(client, text) {
                                alert("Copied text to clipboard: " + text );
                        } );
                        
                        clip.addEventListener( 'mouseOver', function(client) {
                                // alert("mouse over"); 
                        } );
                        
                        clip.addEventListener( 'mouseOut', function(client) { 
                                // alert("mouse out"); 
                        } );
                        
                        clip.addEventListener( 'mouseDown', function(client) { 
                                // set text to copy here
                        clip.setText( document.getElementById('clip_text').value );
                               
                                // alert("mouse down"); 
                        } );
                        
                        clip.addEventListener( 'mouseUp', function(client) { 
                                // alert("mouse up"); 
                        } );
                        
                        clip.glue( 'd_clip_button' );
                </script>
        </body>
        </html>
Jangan lupa buat juga script ZeroClipboard.js nya.. Script ZeroClipboard.js nya adalah:
var ZeroClipboard = {
       
   clients: {}, // registered upload clients on page, indexed by id
  moviePath: 'ZeroClipboard.swf', // URL to movie
        nextId: 1, // ID of next movie
       
        $: function(thingy) {
                // simple DOM lookup utility function
                if (typeof(thingy) == 'string') thingy = document.getElementById(thingy);
                if (!thingy.addClass) {
                        // extend element with a few useful methods
                        thingy.hide = function() { this.style.display = 'none'; };
                        thingy.show = function() { this.style.display = ''; };
                        thingy.addClass = function(name) { this.removeClass(name); this.className += ' ' + name; };
                        thingy.removeClass = function(name) {
                                this.className = this.className.replace( new RegExp("\\s*" + name + "\\s*"), " ").replace(/^\s+/, '').replace(/\s+$/, '');
                        };
                        thingy.hasClass = function(name) {
                                return !!this.className.match( new RegExp("\\s*" + name + "\\s*") );
                        }
                }
                return thingy;
        },
       
        setMoviePath: function(path) {
                // set path to ZeroClipboard.swf
                this.moviePath = path;
        },
       
        dispatch: function(id, eventName, args) {
                // receive event from flash movie, send to client              
                var client = this.clients[id];
                if (client) {
                        client.receiveEvent(eventName, args);
                }
        },
       
        register: function(id, client) {
                // register new client to receive events
                this.clients[id] = client;
        },
       
        getDOMObjectPosition: function(obj) {
                // get absolute coordinates for dom element
                var info = {
                        left: 0,
                        top: 0,
                        width: obj.width ? obj.width : obj.offsetWidth,
                        height: obj.height ? obj.height : obj.offsetHeight
                };
                while (obj) {
                        info.left += obj.offsetLeft;
                        info.top += obj.offsetTop;
                        obj = obj.offsetParent;
                }
                return info;
        },
       
        Client: function(elem) {
                // constructor for new simple upload client
               
                // unique ID
                this.id = ZeroClipboard.nextId++;
                this.movieId = 'ZeroClipboardMovie_' + this.id;
               
                // register client with singleton to receive flash events
                ZeroClipboard.register(this.id, this);
               
                // create movie
                if (elem) this.glue(elem);
        }
};
ZeroClipboard.Client.prototype = {
       
        id: 0, // unique ID for us
        ready: false, // whether movie is ready to receive events or not
        movie: null, // reference to movie object
        clipText: '', // text to copy to clipboard
        handCursorEnabled: true, // whether to show hand cursor, or default pointer cursor
        cssEffects: true, // enable CSS mouse effects on dom container
        handlers: {}, // user event handlers
       
        glue: function(elem) {
                // glue to DOM element
                // elem can be ID or actual DOM element object
                this.domElement = ZeroClipboard.$(elem);
               
                // float just above object, or zIndex 99 if dom element isn't set
                var zIndex = 99;
                if (this.domElement.style.zIndex) {
                        zIndex = parseInt(this.domElement.style.zIndex) + 1;
                }
               
                // find X/Y position of domElement
                var box = ZeroClipboard.getDOMObjectPosition(this.domElement);
               
                // create floating DIV above element
                this.div = document.createElement('div');
                var style = this.div.style;
                style.position = 'absolute';
                style.left = '' + box.left + 'px';
                style.top = '' + box.top + 'px';
                style.width = '' + box.width + 'px';
                style.height = '' + box.height + 'px';
                style.zIndex = zIndex;
               
                // style.backgroundColor = '#f00'; // debug
               
                var body = document.getElementsByTagName('body')[0];
                body.appendChild(this.div);
               
                this.div.innerHTML = this.getHTML( box.width, box.height );
        },
       
        getHTML: function(width, height) {
                // return HTML for movie
                var html = '';
                if (navigator.userAgent.match(/MSIE/)) {
                        // IE gets an OBJECT tag
var protocol = location.href.match(/^https/i) ? 'https://' : 'http://';
html += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+protocol+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+width+'" height="'+height+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="id='+this.id+'"/><param name="wmode" value="transparent"/></object>';
                }
                else {
                     
html += '<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+width+'" height="'+height+'" name="'+this.movieId+'" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id='+this.id+'" wmode="transparent" />';
                }
                return html;
        },
       
        hide: function() {
                // temporarily hide floater offscreen
                if (this.div) {
                        this.div.style.left = '-2000px';
                }
        },
       
        show: function() {
                // show ourselves after a call to hide()
                this.reposition();
        },
       
        destroy: function() {
                // destroy control and floater
                if (this.domElement && this.div) {
                        this.hide();
                        this.div.innerHTML = '';
                       
                        var body = document.getElementsByTagName('body')[0];
                        try { body.removeChild( this.div ); } catch(e) {;}
                       
                        this.domElement = null;
                        this.div = null;
                }
        },
       
        reposition: function(elem) {
                // reposition our floating div, optionally to new container
                // warning: container CANNOT change size, only position
                if (elem) {
                        this.domElement = ZeroClipboard.$(elem);
                        if (!this.domElement) this.hide();
                }
               
                if (this.domElement && this.div) {
                        var box = ZeroClipboard.getDOMObjectPosition(this.domElement);
                        var style = this.div.style;
                        style.left = '' + box.left + 'px';
                        style.top = '' + box.top + 'px';
                }
        },
       
        setText: function(newText) {
                // set text to be copied to clipboard
                this.clipText = newText;
                if (this.ready) this.movie.setText(newText);
        },
       
        addEventListener: function(eventName, func) {
                // add user event listener for event
                eventName = eventName.toString().toLowerCase().replace(/^on/, '');
                if (!this.handlers[eventName]) this.handlers[eventName] = [];
                this.handlers[eventName].push(func);
        },
       
        setHandCursor: function(enabled) {
                // enable hand cursor (true), or default arrow cursor (false)
                this.handCursorEnabled = enabled;
                if (this.ready) this.movie.setHandCursor(enabled);
        },
       
        setCSSEffects: function(enabled) {
                // enable or disable CSS effects on DOM container
                this.cssEffects = !!enabled;
        },
       
        receiveEvent: function(eventName, args) {
                // receive event from flash
                eventName = eventName.toString().toLowerCase().replace(/^on/, '');
                               
                // special behavior for certain events
                switch (eventName) {
                        case 'load':
                               
                     this.movie = document.getElementById(this.movieId);
                     if (!this.movie) {
                     var self = this;
                  setTimeout( function() { self.receiveEvent('load', null); }, 1 );
                                        return;
                                }
        if (!this.ready && navigator.userAgent.match(/Firefox/) && navigator.userAgent.match(/Windows/)) {
                var self = this;
                setTimeout( function() { self.receiveEvent('load', null); }, 100 );
                this.ready = true;
                return;
                                }
                               
                                this.ready = true;
                                this.movie.setText( this.clipText );
                                this.movie.setHandCursor( this.handCursorEnabled );
                                break;
                       
                        case 'mouseover':
                        if (this.domElement && this.cssEffects) {
                         this.domElement.addClass('hover');
                        if (this.recoverActive) this.domElement.addClass('active');
                                }
                                break;
                       
                        case 'mouseout':
                                if (this.domElement && this.cssEffects) {
                                        this.recoverActive = false;
                                        if (this.domElement.hasClass('active')) {
                                                this.domElement.removeClass('active');
                                                this.recoverActive = true;
                                        }
                                        this.domElement.removeClass('hover');
                                }
                                break;
                       
                        case 'mousedown':
                                if (this.domElement && this.cssEffects) {
                                        this.domElement.addClass('active');
                                }
                                break;
                       
                        case 'mouseup':
                                if (this.domElement && this.cssEffects) {
                                        this.domElement.removeClass('active');
                                        this.recoverActive = false;
                                }
                                break;
                } // switch eventName
               
        if (this.handlers[eventName]) {
        for (var idx = 0, len = this.handlers[eventName].length; idx < len; idx++) {
                  var func = this.handlers[eventName][idx];
                       
                  if (typeof(func) == 'function') {
                    // actual function reference
                    func(this, args);
                            }
                  else if ((typeof(func) == 'object') && (func.length == 2)) {
                    // PHP style object + method, i.e. [myObject, 'myMethod']
                    func[0][ func[1] ](this, args);
                                }
                  else if (typeof(func) == 'string') {
                    // name of function
                    window[func](this, args);
                                }
                        } // foreach event handler defined
                } // user defined handler for event
        }
       
};
Begitulah kira-kira, semoga bermanfaat.. Happy Coding :) God bless you!

0 komentar:

Post a Comment

 
Design by Frits Hendrico Tarihoran | Bloggerized by fritshendrico - Premium Blogger Themes | Revivalist, History Maker