Copy func

snipt/media/css/style.less

@@ -13,11 +13,6 @@
 
 }
 
-// Focus
-*:focus {
-    .box-shadow(0, 0, 10px, #46CD46);
-}
-
 // Mixins
 .border-radius(@radius: 5px) {
     -webkit-background-clip: padding-box;
@@ -499,7 +494,7 @@ article.snipt {
                     padding: 7px 10px 7px 35px;
                     position: relative;
 
-                    &:hover {
+                    &:hover, &.hover {
                         background-color: rgba(128, 128, 128, .18);
                         opacity: 1;
                         text-decoration: none;
@@ -521,6 +516,10 @@ article.snipt {
                     }
                     &.copy {
                         background-image: url('/media/images/copy-icon.png');
+
+                        span.done {
+                            display: none;
+                        }
                     }
                 }
             }

snipt/media/js/src/modules/snipt.js

@@ -7,10 +7,17 @@
         initialize: function() {
             this.model = new Snipt.SniptModel();
             this.model.view = this;
+
             this.$el = $(this.el);
-            this.$container = $('div.container', this.$el);
             this.$aside = $('aside', this.$el);
-            this.$expand_button = $('a.expand', this.$el);
+            this.$container = $('div.container', this.$el);
+            this.$copy_button = $('a.copy', this.$aside);
+            this.$copy_do = $('span.do', this.$copy_button);
+            this.$copy_done = $('span.done', this.$copy_button);
+            this.$expand_button = $('a.expand', this.$aside);
+            this.$raw = $('div.raw', this.$container);
+
+            this.setupCopy();
         },
         events: {
             'click a.expand': 'expand'
@@ -19,6 +26,23 @@
             this.$container.toggleClass('expanded', 100);
             this.$aside.toggleClass('expanded');
             return false;
+        },
+        setupCopy: function() {
+            var copy_do = this.$copy_do;
+            var copy_done = this.$copy_done;
+
+            this.$copy_button.zclip({
+                afterCopy: function() {
+                    copy_do.hide();
+                    copy_done.fadeIn(500);
+                    setTimeout(function() {
+                        copy_done.hide();
+                        copy_do.fadeIn(500);
+                    }, 1500);
+                },
+                copy: this.$raw.text(),
+                path: '/media/swfs/zero-clipboard.swf'
+            });
         }
     });
 

snipt/snipts/templates/snipts/snipt-list.html

@@ -17,6 +17,7 @@
                         <span class="lines">({{ snipt.get_line_count }} lines)</span>
                     </a>
                 {% endif %}
+                <div class="raw">{{ snipt.code }}</div>
             </section>
             <div class="ruler top-x"></div>
             <div class="ruler bottom-x"></div>
@@ -32,7 +33,7 @@
                     <a class="embed" href="#">Embed</a>
                 </li>
                 <li>
-                    <a class="copy" href="#">Copy</a>
+                    <a class="copy" href="#"><span class="do">Copy</span><span class="done">Copied!</span></a>
                 </li>
             </ul>
             <section class="tags">

snipt/templates/base.html

@@ -18,6 +18,7 @@
     <script type="text/javascript" src="{{ STATIC_URL }}js/plugins/jquery.infieldlabel.js"></script>
     <script type="text/javascript" src="{{ STATIC_URL }}js/plugins/jquery.hotkeys.js"></script>
     <script type="text/javascript" src="{{ STATIC_URL }}js/plugins/jquery.ui.js"></script>
+    <script type="text/javascript" src="{{ STATIC_URL }}js/plugins/jquery.zclip.js"></script>
     <script type="text/javascript" src="{{ STATIC_URL }}js/src/application.js"></script>
     <script type="text/javascript" src="{{ STATIC_URL }}js/src/modules/site.js"></script>
     <script type="text/javascript" src="{{ STATIC_URL }}js/src/modules/snipt.js"></script>