Yii 1.1: ezclipboard

Widget to easily add ZeroClipboard copy functionality to a view
6 followers

Description

This is basically an updated version of EZClip originally written by dasgarza. This widget is used to add a link or button to a view for easy copying. This widget uses jQuery plugin ZeroClipboard (https://github.com/jonrohan/ZeroClipboard).

Installing

  • Download the EZClipboard.zip file to the right
  • Unzip the file and copy it to the /protected/extensions/ directory in your Yii app
  • Insert widget code into a view

Usage

$this->widget('ext.EZClipboard.EZClipboard', array(
    'tag' => 'a',
    'tagHtmlOptions' => array('class'=>'copy-class'),
    'tagId' => 'copy_button',
    'clipboardText' => 'This is the text that will be copied'
));

Example

<html>
    <head>
        <script type="text/javascript">
            function onLoad() {
                console.log('Movie Loaded');
            }
 
            function onComplete(client, args) {
                console.log("Copied text to clipboard: " + args.text );
            }
        </script>
    </head>
    <body>
        <? 
            $this->widget('ext.zClipboard.zClipboard, array(
                'tagHtmlOptions'    => array('class'=>'copy-class'),
                'tagId'             => 'copy_button',
                'tagContent'        => "Copy Text",
                'clipboardText'     => 'This is the text that will be copied',
                'zcEvents'          => array('load'=>'onLoad', 'complete'=>'onComplete'),
                'scriptPos'         => 'HEAD'
            ));
        ?>          
    </body>
</html>

Would produce the following code:

<html>
    <head>
        <script type="text/javascript">
            function onLoad() {
                console.log('Movie Loaded');
            }
 
            function onComplete(client, args) {
                console.log("Copied text to clipboard: " + args.text );
            }
        </script>
        <script type="text/javascript" src="/assets/5fdfd183/js/ZeroClipboard.js"></script>
    </head>
    <body>
        <button class="copy-class" id="copy" data-clipboard-text="This is the text that will be copied">Copy Text</button>
        <script type="text/javascript">
            /*<![CDATA[*/
            jQuery(function($) {var clip = new ZeroClipboard($('#copy'), {"moviePath":"\/assets\/5fdfd183\/swf\/ZeroClipboard.swf"});clip.on('load', 'onLoad');clip.on('complete', 'onComplete');});
            /*]]>*/
            </script>   
    </body>
</html>

Options

tag - the type of tag to use (Default: 'button')

"tag" => "a"

tagHtmlOptions - the htmlOptions for the tag (i.e. 'id', 'class', etc.)

"tagHtmlOptions" => array(
    "class" => "copy_class"
)

tagContent - the content between the tags

"tagContent" => "Copy Text"

closeTag - whether or not to use a closing tag

"tagContent" => false

tagId - shortcut for the tag ID, could also use tagHtmlOptions

"tagId" => "copy_button"

zcOptions - ZeroClipboard options

"zcOptions" => array('moviePath'=>'....')

zcEvents - ZeroClipboard events in an array

"zcEvents" => array('load'=>'onLoad')

clipboardText - the text that will be copied when the user clicks the movie

"tagContent" => "This is the text that will be copied"

scriptPos - the position of the ZeroClipboard.js script tag (Default: 'END')

"scriptPos" => "HEAD"

Resources

Total 2 comments

#18110 report it
Gregurco at 2014/09/11 06:17am
Composer

Hi! Please, make it possible to download via composer without problems. Connect your repo to packagist.

#17881 report it
Pluk at 2014/08/05 10:18am
Problem with extension. Doesn't work.

Hi Steve, I've upgrade your extension to the new ZeroClipboard.js version (2.1.6) (the version you have in git got a very old version and it gives errors) but it don't work. Maybe it is because the .swf registration? Any advice? thanks in regards.

Leave a comment

Please to leave your comment.

Create extension