Use ZeroClipboard library to copy URL to clipboard when clicked

oliversong · Oct 19, 2013 · 1d95a97 · 1d95a97
1 parent 8849d61
commit 1d95a97
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 8 deletions.
diff --git a/client/lib/ZeroClipboard.min.js b/client/lib/ZeroClipboard.min.js
diff --git a/client/stylesheets/style.css b/client/stylesheets/style.css
@@ -126,9 +126,38 @@ h3 {
 .space-below2 {
   margin-bottom: 60px;
 }
-.myUrl {
-  width: 100%;
+#myUrl {
+  width: 60%;
   height: 100%;
+  -webkit-border-radius: 4px 0 0 4px;
+  -moz-border-radius: 4px 0 0 4px;
+  border-radius: 4px 0 0 4px;
+}
+.copyUrl {
+  background-image: none !important;
+  box-shadow: none !important;
+  display: inline-block;
+  padding: 4px 6px;
+  margin-bottom: 10px;
+  line-height: 20px;
+  color: #333333;
+  text-align: center;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: #f5f5f5;
+  border: 1px solid #cccccc;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  -webkit-border-radius: 0 4px 4px 0;
+  -moz-border-radius: 0 4px 4px 0;
+  border-radius: 0 4px 4px 0;
+  margin-left: -9px;
+}
+.copyUrl.zeroclipboard-is-hover {
+  background-color: #FAFAFA !important;
+}
+.copyUrl.zeroclipboard-is-active {
+  background-color: #EEE !important;
 }
 .float-in {
   opacity: 0;

diff --git a/client/stylesheets/style.less b/client/stylesheets/style.less
@@ -123,9 +123,38 @@ h1, h2, h3{
 .space-below2{
   margin-bottom: 60px;
 }
-.myUrl{
-  width: 100%;
+#myUrl{
+  width: 60%;
   height: 100%;
+  -webkit-border-radius: 4px 0 0 4px;
+  -moz-border-radius: 4px 0 0 4px;
+  border-radius: 4px 0 0 4px;
+}
+.copyUrl{
+  background-image: none !important;
+  box-shadow: none !important;
+  display: inline-block;
+  padding: 4px 6px;
+  margin-bottom: 10px;
+  line-height: 20px;
+  color: #333333;
+  text-align: center;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: #f5f5f5;
+  border: 1px solid #cccccc;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  -webkit-border-radius: 0 4px 4px 0;
+  -moz-border-radius: 0 4px 4px 0;
+  border-radius: 0 4px 4px 0;
+  margin-left: -9px;
+}
+.copyUrl.zeroclipboard-is-hover{
+  background-color: #FAFAFA !important;
+}
+.copyUrl.zeroclipboard-is-active{
+  background-color: #EEE !important;
 }
 .float-in{
   opacity: 0;

diff --git a/client/views/pages/box.coffee b/client/views/pages/box.coffee
@@ -29,8 +29,11 @@ Template.boxPage.events(
 Template.boxPage.dropPaneSet = false
 
 Template.boxPage.rendered = ()->
+  clip = new ZeroClipboard( $('.copyUrl'),
+    moviePath: "/ZeroClipboard.swf"
+  )
+
   unless Template.boxPage.dropPaneSet
-    debugger
     filepicker.setKey(Template.boxPage.filepickerKey)
 
     # create a drop pane
@@ -60,10 +63,9 @@ Template.boxPage.rendered = ()->
           Meteor.call 'makeFile', file, (error, id)->
             if error
               Errors.throw(error.reason)
-        $('.myUrl').val(document.URL)
+        $('#myUrl').val(document.URL)
         $(".float-in").addClass('float')
 
-
       onError: (type, message) ->
         Errors.throw("(" + type + ") " + message)
 

diff --git a/client/views/pages/box.html b/client/views/pages/box.html
@@ -20,7 +20,8 @@
   </div>
   <div class="row-fluid float-in space-above proxima text-center space-below">
     <div class="span6 offset3">
-      <input type="text" class="myUrl"></input>
+      <input type="text" id="myUrl"></input>
+      <button class="copyUrl" data-clipboard-target="myUrl"><i class="icon-paste"></i></button>
     </div>
   </div>
 </template>
diff --git a/public/ZeroClipboard.swf b/public/ZeroClipboard.swf