GitHub Copy Path Widget using ZeroClipboard

Sep 03, 2016

In this article, we will be creating the Clone Widget on GitHub that allows you to copy a Repo URL by clicking a button. It works natively in Chrome and falls back to Flash in Firefox & Safari. If Flash is not installed, the Copy button is not shown, but the user can still select the path and copy it manually.

Here is how the widget looks natively in Chrome (Copy button enabled)

Here is how the widget looks natively in Safari (Copy button disabled since Flash is not installed)

We are going to be creating a similar widget with just the input text box and the copy button. Let’s see how it’s done.

Step 2

Let’s start writing some JavaScript. Begin by checking if Flash is installed or not.

// Check if Flash is installed or notvar_isFlashInstalled=function(){varhasFlash=false;try{varfo=newActiveXObject('ShockwaveFlash.ShockwaveFlash');if(fo){hasFlash=true;}}catch(e){if(navigator.mimeTypes&&navigator.mimeTypes['application/x-shockwave-flash']!=undefined&&navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin){hasFlash=true;}}returnhasFlash;};

Step 3

If Flash is installed:

// Fires when Flash is installedvar_initFlash=function(){// Create a client to work on. In our case, we've created// a client out of all the copy buttonsvarclient=newZeroClipboard($('.btn-copy'));// Fires when the client is readyclient.on('ready',function(e){// Create a tooltip that says "Copy to Cliboard"// when you hover over the Copy button$('.btn-copy').tooltip({placement:'bottom',title:'Copy to clipboard',container:'body',trigger:'manual'});// Enable the tooltip$('.btn-copy').hover(function(){$(this).tooltip('toggle');});});// Fires when the button has been clicked and the content// of the input box is being copiedclient.on('copy',function(e){// Find the nearest input box and copy it's contentsvarval=$(e.target).closest('.input-group').find('.copy-text').val();e.clipboardData.setData('text/plain',val);});// Fires when the contents of the Input box have been copiedclient.on('aftercopy',function(e){// Change the tooltip to say "Copied!"$(e.target).attr('data-original-title','Copied!').tooltip('fixTitle').tooltip('show');// Reset the tooltip back to the original textsetTimeout(function(){$(e.target).attr('data-original-title','Copy to clipboard').tooltip('fixTitle');},2000);});};

If Flash is not insalled:

// Fires when Flash is not installed.var_initNoFlash=function(){// Hide the Copy Button$('.input-group-btn').hide();// Make the input text boxes full width$('.input-group').css({'width':'100%'});// Fix their border-radius properties$('.copy-text').css({'border-radius':'4px'});};

Finally, it all comes together in a single file:

(function(){'use strict';varApp=function(){// Check if Flash is installed or notvar_isFlashInstalled=function(){varhasFlash=false;try{varfo=newActiveXObject('ShockwaveFlash.ShockwaveFlash');if(fo){hasFlash=true;}}catch(e){if(navigator.mimeTypes&&navigator.mimeTypes['application/x-shockwave-flash']!=undefined&&navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin){hasFlash=true;}}returnhasFlash;};// Fires when Flash is installedvar_initFlash=function(){// Create a client to work on. In our case, we've created// a client out of all the copy buttonsvarclient=newZeroClipboard($('.btn-copy'));// Fires when the client is readyclient.on('ready',function(e){// Create a tooltip that says "Copy to Cliboard"// when you hover over the Copy button$('.btn-copy').tooltip({placement:'bottom',title:'Copy to clipboard',container:'body',trigger:'manual'});// Enable the tooltip$('.btn-copy').hover(function(){$(this).tooltip('toggle');});});// Fires when the button has been clicked and the content// of the input box is being copiedclient.on('copy',function(e){// Find the nearest input box and copy it's contentsvarval=$(e.target).closest('.input-group').find('.copy-text').val();e.clipboardData.setData('text/plain',val);});// Fires when the contents of the Input box have been copiedclient.on('aftercopy',function(e){// Change the tooltip to say "Copied!"$(e.target).attr('data-original-title','Copied!').tooltip('fixTitle').tooltip('show');// Reset the tooltip back to the original textsetTimeout(function(){$(e.target).attr('data-original-title','Copy to clipboard').tooltip('fixTitle');},2000);});};// Fires when Flash is not installedvar_initNoFlash=function(){// Hide the Copy Button$('.input-group-btn').hide();// Make the input text boxes full width$('.input-group').css({'width':'100%'});// Fix their border-radius properties$('.copy-text').css({'border-radius':'4px'});};// Main initvar_init=function(){if(_isFlashInstalled){_initFlash();}else{_initNoFlash();}};return{init:_init}};$(function(){varapp=newApp();app.init();});})();

Download & Demo

The code is readily available for your perusal on GitHub. Please note that I would have given a CodePen/JSFiddle link, but their sandboxing policies don’t allow ZeroClipboard to function at full capacity in all browsers while editing code.