From c466bca32d79dcea6c013f1dd65dc459541402d1 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <jschorr@gmail.com>
Date: Fri, 27 Sep 2013 16:12:51 -0400
Subject: [PATCH] Add clipboard copy support for the pull command

---
 static/css/quay.css            |  20 +++++++++++++++++---
 static/js/ZeroClipboard.min.js |   8 ++++++++
 static/js/ZeroClipboard.swf    | Bin 0 -> 1635 bytes
 static/js/app.js               |   2 +-
 static/js/controllers.js       |   2 ++
 static/partials/view-repo.html |  12 +++++++++++-
 templates/index.html           |   2 ++
 7 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100755 static/js/ZeroClipboard.min.js
 create mode 100755 static/js/ZeroClipboard.swf

diff --git a/static/css/quay.css b/static/css/quay.css
index 153351ffe..409ebad1c 100644
--- a/static/css/quay.css
+++ b/static/css/quay.css
@@ -11,6 +11,10 @@
     display: none;
 }
 
+p.editable {
+  display: inline-block;
+}
+
 p.editable .content:empty:after {
   display: inline-block;
   content: "(Click to add)";
@@ -67,19 +71,29 @@ p.editable:hover i {
 .repo .pull-command {
   float: right;
   display: inline-block;
-}
-
-.repo .pull-command {
   font-size: 1.2em;
 }
 
+.repo .pull-command .pull-container {
+    display: inline-block;
+    width: 300px;
+    margin-right: 10px;
+    vertical-align: middle;
+}
+
 .repo .pull-command input {
+  cursor: default;
+  background: white;
   color: #666;
   padding: 4px;
   border: 1px solid #ddd;
   width: 300px;
 }
 
+.repo #copyClipboard {
+  cursor: pointer;
+}
+
 .repo .settings-cog {
   margin-left: 20px;
 }
diff --git a/static/js/ZeroClipboard.min.js b/static/js/ZeroClipboard.min.js
new file mode 100755
index 000000000..32535fddf
--- /dev/null
+++ b/static/js/ZeroClipboard.min.js
@@ -0,0 +1,8 @@
+/*!
+ * zeroclipboard
+ * The Zero Clipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie, and a JavaScript interface.
+ * Copyright 2012 Jon Rohan, James M. Greene, .
+ * Released under the MIT license
+ * http://jonrohan.github.com/ZeroClipboard/
+ * v1.1.7
+ */(function(){"use strict";var a=function(a,b){var c=a.style[b];a.currentStyle?c=a.currentStyle[b]:window.getComputedStyle&&(c=document.defaultView.getComputedStyle(a,null).getPropertyValue(b));if(c=="auto"&&b=="cursor"){var d=["a"];for(var e=0;e<d.length;e++)if(a.tagName.toLowerCase()==d[e])return"pointer"}return c},b=function(a){if(!l.prototype._singleton)return;a||(a=window.event);var b;this!==window?b=this:a.target?b=a.target:a.srcElement&&(b=a.srcElement),l.prototype._singleton.setCurrent(b)},c=function(a,b,c){a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent&&a.attachEvent("on"+b,c)},d=function(a,b,c){a.removeEventListener?a.removeEventListener(b,c,!1):a.detachEvent&&a.detachEvent("on"+b,c)},e=function(a,b){if(a.addClass)return a.addClass(b),a;if(b&&typeof b=="string"){var c=(b||"").split(/\s+/);if(a.nodeType===1)if(!a.className)a.className=b;else{var d=" "+a.className+" ",e=a.className;for(var f=0,g=c.length;f<g;f++)d.indexOf(" "+c[f]+" ")<0&&(e+=" "+c[f]);a.className=e.replace(/^\s+|\s+$/g,"")}}return a},f=function(a,b){if(a.removeClass)return a.removeClass(b),a;if(b&&typeof b=="string"||b===undefined){var c=(b||"").split(/\s+/);if(a.nodeType===1&&a.className)if(b){var d=(" "+a.className+" ").replace(/[\n\t]/g," ");for(var e=0,f=c.length;e<f;e++)d=d.replace(" "+c[e]+" "," ");a.className=d.replace(/^\s+|\s+$/g,"")}else a.className=""}return a},g=function(b){var c={left:0,top:0,width:b.width||b.offsetWidth||0,height:b.height||b.offsetHeight||0,zIndex:9999},d=a(b,"zIndex");d&&d!="auto"&&(c.zIndex=parseInt(d,10));while(b){var e=parseInt(a(b,"borderLeftWidth"),10),f=parseInt(a(b,"borderTopWidth"),10);c.left+=isNaN(b.offsetLeft)?0:b.offsetLeft,c.left+=isNaN(e)?0:e,c.top+=isNaN(b.offsetTop)?0:b.offsetTop,c.top+=isNaN(f)?0:f,b=b.offsetParent}return c},h=function(a){return(a.indexOf("?")>=0?"&":"?")+"nocache="+(new Date).getTime()},i=function(a){var b=[];return a.trustedDomains&&(typeof a.trustedDomains=="string"?b.push("trustedDomain="+a.trustedDomains):b.push("trustedDomain="+a.trustedDomains.join(","))),b.join("&")},j=function(a,b){if(b.indexOf)return b.indexOf(a);for(var c=0,d=b.length;c<d;c++)if(b[c]===a)return c;return-1},k=function(a){if(typeof a=="string")throw new TypeError("ZeroClipboard doesn't accept query strings.");return a.length?a:[a]},l=function(a,b){a&&(l.prototype._singleton||this).glue(a);if(l.prototype._singleton)return l.prototype._singleton;l.prototype._singleton=this,this.options={};for(var c in o)this.options[c]=o[c];for(var d in b)this.options[d]=b[d];this.handlers={},l.detectFlashSupport()&&p()},m,n=[];l.prototype.setCurrent=function(b){m=b,this.reposition(),b.getAttribute("title")&&this.setTitle(b.getAttribute("title")),this.setHandCursor(a(b,"cursor")=="pointer")},l.prototype.setText=function(a){a&&a!==""&&(this.options.text=a,this.ready()&&this.flashBridge.setText(a))},l.prototype.setTitle=function(a){a&&a!==""&&this.htmlBridge.setAttribute("title",a)},l.prototype.setSize=function(a,b){this.ready()&&this.flashBridge.setSize(a,b)},l.prototype.setHandCursor=function(a){this.ready()&&this.flashBridge.setHandCursor(a)},l.version="1.1.7";var o={moviePath:"ZeroClipboard.swf",trustedDomains:null,text:null,hoverClass:"zeroclipboard-is-hover",activeClass:"zeroclipboard-is-active",allowScriptAccess:"sameDomain"};l.setDefaults=function(a){for(var b in a)o[b]=a[b]},l.destroy=function(){l.prototype._singleton.unglue(n);var a=l.prototype._singleton.htmlBridge;a.parentNode.removeChild(a),delete l.prototype._singleton},l.detectFlashSupport=function(){var a=!1;try{new ActiveXObject("ShockwaveFlash.ShockwaveFlash")&&(a=!0)}catch(b){navigator.mimeTypes["application/x-shockwave-flash"]&&(a=!0)}return a};var p=function(){var a=l.prototype._singleton,b=document.getElementById("global-zeroclipboard-html-bridge");if(!b){var c='      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="global-zeroclipboard-flash-bridge" width="100%" height="100%">         <param name="movie" value="'+a.options.moviePath+h(a.options.moviePath)+'"/>         <param name="allowScriptAccess" value="'+a.options.allowScriptAccess+'"/>         <param name="scale" value="exactfit"/>         <param name="loop" value="false"/>         <param name="menu" value="false"/>         <param name="quality" value="best" />         <param name="bgcolor" value="#ffffff"/>         <param name="wmode" value="transparent"/>         <param name="flashvars" value="'+i(a.options)+'"/>         <embed src="'+a.options.moviePath+h(a.options.moviePath)+'"           loop="false" menu="false"           quality="best" bgcolor="#ffffff"           width="100%" height="100%"           name="global-zeroclipboard-flash-bridge"           allowScriptAccess="always"           allowFullScreen="false"           type="application/x-shockwave-flash"           wmode="transparent"           pluginspage="http://www.macromedia.com/go/getflashplayer"           flashvars="'+i(a.options)+'"           scale="exactfit">         </embed>       </object>';b=document.createElement("div"),b.id="global-zeroclipboard-html-bridge",b.setAttribute("class","global-zeroclipboard-container"),b.setAttribute("data-clipboard-ready",!1),b.style.position="absolute",b.style.left="-9999px",b.style.top="-9999px",b.style.width="15px",b.style.height="15px",b.style.zIndex="9999",b.innerHTML=c,document.body.appendChild(b)}a.htmlBridge=b,a.flashBridge=document["global-zeroclipboard-flash-bridge"]||b.children[0].lastElementChild};l.prototype.resetBridge=function(){this.htmlBridge.style.left="-9999px",this.htmlBridge.style.top="-9999px",this.htmlBridge.removeAttribute("title"),this.htmlBridge.removeAttribute("data-clipboard-text"),f(m,this.options.activeClass),m=null,this.options.text=null},l.prototype.ready=function(){var a=this.htmlBridge.getAttribute("data-clipboard-ready");return a==="true"||a===!0},l.prototype.reposition=function(){if(!m)return!1;var a=g(m);this.htmlBridge.style.top=a.top+"px",this.htmlBridge.style.left=a.left+"px",this.htmlBridge.style.width=a.width+"px",this.htmlBridge.style.height=a.height+"px",this.htmlBridge.style.zIndex=a.zIndex+1,this.setSize(a.width,a.height)},l.dispatch=function(a,b){l.prototype._singleton.receiveEvent(a,b)},l.prototype.on=function(a,b){var c=a.toString().split(/\s/g);for(var d=0;d<c.length;d++)a=c[d].toLowerCase().replace(/^on/,""),this.handlers[a]||(this.handlers[a]=b);this.handlers.noflash&&!l.detectFlashSupport()&&this.receiveEvent("onNoFlash",null)},l.prototype.addEventListener=l.prototype.on,l.prototype.off=function(a,b){var c=a.toString().split(/\s/g);for(var d=0;d<c.length;d++){a=c[d].toLowerCase().replace(/^on/,"");for(var e in this.handlers)e===a&&this.handlers[e]===b&&delete this.handlers[e]}},l.prototype.removeEventListener=l.prototype.off,l.prototype.receiveEvent=function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");var c=m;switch(a){case"load":if(b&&parseFloat(b.flashVersion.replace(",",".").replace(/[^0-9\.]/gi,""))<10){this.receiveEvent("onWrongFlash",{flashVersion:b.flashVersion});return}this.htmlBridge.setAttribute("data-clipboard-ready",!0);break;case"mouseover":e(c,this.options.hoverClass);break;case"mouseout":f(c,this.options.hoverClass),this.resetBridge();break;case"mousedown":e(c,this.options.activeClass);break;case"mouseup":f(c,this.options.activeClass);break;case"datarequested":var d=c.getAttribute("data-clipboard-target"),g=d?document.getElementById(d):null;if(g){var h=g.value||g.textContent||g.innerText;h&&this.setText(h)}else{var i=c.getAttribute("data-clipboard-text");i&&this.setText(i)}break;case"complete":this.options.text=null}if(this.handlers[a]){var j=this.handlers[a];typeof j=="function"?j.call(c,this,b):typeof j=="string"&&window[j].call(c,this,b)}},l.prototype.glue=function(a){a=k(a);for(var d=0;d<a.length;d++)j(a[d],n)==-1&&(n.push(a[d]),c(a[d],"mouseover",b))},l.prototype.unglue=function(a){a=k(a);for(var c=0;c<a.length;c++){d(a[c],"mouseover",b);var e=j(a[c],n);e!=-1&&n.splice(e,1)}},typeof module!="undefined"?module.exports=l:typeof define=="function"&&define.amd?define(function(){return l}):window.ZeroClipboard=l})();
\ No newline at end of file
diff --git a/static/js/ZeroClipboard.swf b/static/js/ZeroClipboard.swf
new file mode 100755
index 0000000000000000000000000000000000000000..880e64ee7614e224660c6616b4bbb1ee5fab8ec9
GIT binary patch
literal 1635
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

literal 0
HcmV?d00001

diff --git a/static/js/app.js b/static/js/app.js
index 6b3679f55..195c47a6c 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -45,4 +45,4 @@ quayApp.run(['$location', '$rootScope', function($location, $rootScope) {
       $rootScope.title = current.$$route.title;
     }
   });
-}]);
\ No newline at end of file
+}]);
diff --git a/static/js/controllers.js b/static/js/controllers.js
index 2b6d73aef..f99c4fb9c 100644
--- a/static/js/controllers.js
+++ b/static/js/controllers.js
@@ -43,6 +43,8 @@ function RepoCtrl($scope, Restangular, $routeParams, $rootScope) {
     $rootScope.title = namespace + '/' + name;
     $scope.repo = repo;
     $scope.currentTag = repo.tags[tag] || repo.tags['latest'];
+
+      var clip = new ZeroClipboard($('#copyClipboard'),  { 'moviePath': 'static/js/ZeroClipboard.swf' });
   }, function() {
     $scope.repo = null;
     $rootScope.title = 'Unknown Repository';
diff --git a/static/partials/view-repo.html b/static/partials/view-repo.html
index e9c5c2eb2..4b4932bd5 100644
--- a/static/partials/view-repo.html
+++ b/static/partials/view-repo.html
@@ -17,10 +17,20 @@
 
     <!-- Pull command -->
     <div class="pull-command">
-      Get this repository: <input type="text" value="{{ 'docker pull quay.io/' + repo.namespace + '/' + repo.name }}" readonly>
+      Get this repository: 
+
+      <div class="pull-container">
+	  <div class="input-group">
+	    <input id="pull-text" type="text" class="form-control" value="{{ 'docker pull quay.io/' + repo.namespace + '/' + repo.name }}" readonly>
+	    <span id="copyClipboard" class="input-group-addon" title="Copy to Clipboard" data-clipboard-target="pull-text">
+	      <i class="icon-copy"></i>
+	    </span>
+	  </div>
+      </div>
     </div>
   </div>
 
+
   <!-- Description -->
   <p ng-class="'description lead ' + (repo.can_write ? 'editable' : 'noteditable')" ng-click="editDescription()"><span class="content">{{repo.description}}</span><i class="icon-edit"></i></p>
 
diff --git a/templates/index.html b/templates/index.html
index 9c489601e..17b84f58a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -21,6 +21,8 @@
     <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script>
     <script src="static/lib/angular-moment.min.js"></script>
 
+    <script src="static/js/ZeroClipboard.min.js"></script>
+
     <script src="static/js/app.js"></script>
     <script src="static/js/controllers.js"></script>