Better clipboard copy magic and improved tinyurl behavior

application.js

@@ -32,6 +32,27 @@
   };
 })(jQuery);
 
+(function($) {
+  $.sendToClipboard = function(text) {
+    var copier = $("#flash_copier");
+    if (copier.size() == 0) {
+      copier = $('<div id="flash_copier"></div>').appendTo("body")
+    }
+    copier.html('<embed src="_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(text)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>')
+  };
+})(jQuery);
+
+(function($) {
+  $.fn.centerOver = function(element) {
+    var self = this;
+    self.css({
+      top: (element.position().top + element.outerHeight()/2 - self.height()/2).px(),
+      left: (element.position().left + element.outerWidth()/2 - self.width()/2).px()
+    });
+    return self;
+  };
+})(jQuery);
+
 // http://keith-wood.name/localisation.html
 // Localisation assistance for jQuery v1.0.2.
 // Written by Keith Wood (kbwood@iprimus.com.au) June 2007.
@@ -146,7 +167,12 @@ LMGTFY.lang = {
     step_1: "Step 1: Type in your question",
     step_2: "Step 2: Click the Search button",
     pwnage: "Was that so hard?"
-  }
+  },
+
+  url: {
+    copied:    "URL copied to clipboard",
+    shortened: "TinyURL copied to clipboard"
+  },
 }
 
 // app code
@@ -158,6 +184,9 @@ $(function(){
   var fakeMouse    = $("#fake_mouse")
   var instructions = $("#instructions > div")
   var button       = ($.getQueryString({ id: "l" }) == "1") ? $("#lucky") : $("#search")
+  var inputLink    = $("#link input.link")
+  var copyButtons  = $("#copy_buttons")
+  var copyMessage  = $("#copy_message")
 
   if (searchString && searchString.length > 0) googleItForThem()
   else getTheSearchTerms()
@@ -190,14 +219,22 @@ $(function(){
 
   function linkifyAbout() {
     $("#about p").each(function() {
-      $(this).html($(this).text().replace(/(@([a-zA-Z0-9]+))/g, '<a href="http://twitter.com/$2">$1</a>'))
-    })
+      $(this).html($(this).text().replace(/(@([a-zA-Z0-9]+))/g, '<a href="http://twitter.com/$2">$1</a>'));
+    });
   }
 
   function instruct(langkey) {
-    var keys = langkey.split(/\./)
-    var value = keys.length == 1 ? LMGTFY.lang[keys[0]] : LMGTFY.lang[keys[0]][keys[1]]
-    instructions.html(value)
+    instructions.html(langString(langkey));
+  }
+
+  function copyStatus(langkey) {
+    copyMessage.html(langString(langkey)).show().centerOver(inputLink);
+    setTimeout(function(){ copyMessage.fadeOut(1500) }, 1000);
+  }
+
+  function langString(langkey) {
+    var keys = langkey.split(/\./);
+    return keys.length == 1 ? LMGTFY.lang[keys[0]] : LMGTFY.lang[keys[0]][keys[1]];
   }
 
   function getTheSearchTerms() {
@@ -216,14 +253,40 @@ $(function(){
 
       url += strings.join("&")
 
-      $("#link").show()
-      $("#link input.link").val(url).focus().select()
+      showTheUrl(url)
+    })
+  }
 
-      $.getJSON("http://json-tinyurl.appspot.com/?callback=?&url=" + gentlyEncode(url), function(data) {
-        $("#tiny input.link").val(data.tinyurl)
-        $("#tiny").show()
+  function showTheUrl(url) {
+    $("#link").show();
+    inputLink.val(url).focus().select();
+    copyButtons.centerOver(inputLink);
+    $("#link").hover(function(){
+      inputLink.fadeTo("fast", 0.5);
+      copyButtons.fadeIn("fast");
+    }, function(){
+      inputLink.fadeTo("fast", 1.0);
+      copyButtons.fadeOut("fast");
+    });
+    $.sendToClipboard(inputLink.val());
+    copyStatus("url.copied");
+
+    $("#copy_url").click(function(){
+      $.sendToClipboard(inputLink.val());
+      copyStatus("url.copied");
+      return false;
+    });
+    $("#copy_tiny").click(function(){
+      $.getJSON("http://json-tinyurl.appspot.com/?callback=?&url=" + gentlyEncode(inputLink.val()), function(data) {
+        $.sendToClipboard(data.tinyurl)
+        copyStatus("url.shortened");
       });
-    })
+      return false;
+    });
+    $("#copy_go").click(function(){
+      window.location = inputLink.val();
+      return false;
+    });
   }
 
   function googleItForThem() {

index.haml

@@ -18,14 +18,16 @@
         #instructions { margin-top: 50px; font-size: 1.1em; color: #999; width: 334px; height: 84px; background-image: url(images/instructions_bg.png); }
         #instructions div { line-height: 84px; }
         #link { display: none; margin-top: 25px; }
-        #tiny { display: none; }
-        #tiny .or { color: #999; line-height: 1.5em; }
         input.link { width: 312px; font-size: 1.2em; text-align: center; border: 1px solid #c2c9ff; color: #555; background-color: #f4fbff; cursor: pointer; }
         #footer { color: #999; margin-top: 50px; border-top: solid 1px #ddd; padding-top: 0.5em; }
         #footer a { color: #999; text-decoration: none; padding: 0 1em; }
         #footer a:hover { text-decoration: underline; }
         #about { margin-top: 0.5em; color: #666; }
         #copyright { position: fixed; bottom: 0; width: 100%; padding: 0.25em; text-align: center; font-size: 0.75em; color: #bbb; background-color: #fff; }
+        #copy_buttons, #copy_message { position: absolute; display: none; }
+        a.copy_button { display: block; float: left; width: 60px; height: 20px; margin: 0 2px; background: url(images/copy_button.png); color: #fff; line-height: 20px; text-align: center; font-size: 0.8em; text-decoration: none; }
+        a.copy_button:hover { background: url(images/copy_button_hover.png) }
+        #copy_message { z-index: 99; width: 332px; height: 32px; background: url(images/copy_message.png); color: #fff; line-height: 32px; text-align: center; font-size: 1em; }
   %body
     %center
       .logo
@@ -47,14 +49,16 @@
 
       #link
         %input.link.copyable{ :type => "text", :readonly => true }
-      #tiny
-        .or{:rel => "localize.setup.or" } or
-        %input.link.copyable{ :type => "text", :size => 40, :readonly => true }
+        #copy_message
+        #copy_buttons
+          %a#copy_url.copy_button{ :href => "#", :rel => "localize.url.copy" } copy
+          %a#copy_tiny.copy_button{ :href => "#", :rel => "localize.url.shorten" } shorten
+          %a#copy_go.copy_button{ :href => "#", :rel => "localize.url.go" } go
 
       #footer
         %a.about{ :href => "#", :name => "about", :rel => "localize.about" } About
         %a{ :rel => "localize.contact", :href => "mailto:%73%74%61%66%66@%6c%6d%67%74%66%79.%63%6f%6d?body=Jim%20and%20Ryan%20are%20awesome%21&subject=I%20love%20LMGTFY%21" } Contact
-        
+
       #about{ :style => "display: none" }
         %p{ :rel => "localize.credit" }        Created by @coderifous, contributions by @rmm5t.
         %p{ :rel => "localize.genesis" }       Inspired during a lunch conversation with @coderifous, @tmassing, @rmm5t, @EricStratton, and @methodvon.
@@ -64,11 +68,11 @@
         %br
 
     #copyright
-      © LMGTFY, 2008 | 
+      © LMGTFY, 2008 |
       %span{ :rel => "localize.google_owns_google" } GOOGLE is a trademark of Google Inc.
 
     %img#fake_mouse{ :src => "images/mouse_arrow.png", :style => "display: none" }
-    
+
     :plain
       <script type="text/javascript">
       var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

lang/lmgtfy-en.json.example

@@ -10,19 +10,26 @@
   setup: {
     type_question: "Type a question, click a button.",
     share_link:    "Share the link below.",
-    or:            "or"
   },
-  
+
   play: {
     step_1: "Step 1: Type in your question",
     step_2: "Step 2: Click the Search button",
     pwnage: "Was that so hard?"
   },
-
+
+  url: {
+    copy:      "copy",
+    shorten:   "shorten",
+    go:        "go",
+    copied:    "URL copied to clipboard",
+    shortened: "TinyURL copied to clipboard"
+  },
+
   credit:     "Created by @coderifous, contributions by @rmm5t.",
   genesis:    "Inspired during a lunch conversation with @coderifous, @tmassing, @rmm5t, @EricStratton, and @methodvon.",
   pitch:      "This is for all those people that find it more convenient to bother you with their question rather than google it for themselves.",
   disclaimer: "Not associated with Google™ in any way.",
-  
+
   translated_by: "<Translated by Your Name Goes Here />"
 }

lang/lmgtfy-es.json

@@ -6,23 +6,30 @@
   about:              "Acerca de",
   contact:            "Contacto",
   google_owns_google: "GOOGLE es una marca registrada de Google Inc.",
-  
+
   setup: {
     type_question: "Escribe una pregunta y pulsa un botón.",
     share_link:    "Comparte el enlace de abajo.",
-    or:            "o"
   },
-  
+
   play: {
     step_1: "Paso 1: Escribe tu pregunta",
     step_2: "Paso 2: Pulsa el botón buscar",
     pwnage: "¿De verdad era tan difícil?"
   },
-
+
+  url: {
+    copy:      "copia",
+    shorten:   "acortar",
+    go:        "ir",
+    copied:    "URL copiado al portapapeles",
+    shortened: "TinyURL copiado al portapapeles"
+  },
+
   credit:     "Creado por @coderifous, con contribuciones de @rmm5t.",
   genesis:    "Ideado en una comida con @coderifous, @tmassing, @rmm5t, @EricStratton, y @methodvon.",
   pitch:      "Esto es para todas las personas que piensan que es mejor molestarte a ti antes que buscar en Google.",
   disclaimer: "No tenemos nada que ver con Google™.",
-  
+
   translated_by: "Traducido por aditza121."
 }