_clipboard.swf artwork/copy_button.psd artwork/copy_message.psd images/copy_button.png images/copy_button_hover.png images/copy_message.png @@ -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() { application.js @@ -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 => "&#109;&#97;&#105;&#108;&#116;&#111;&#58;%73%74%61%66%66@%6c%6d%67%74%66%79.%63%6f%6d?body=Jim%20and%20Ryan%20are%20awesome%21&amp;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 - &copy; LMGTFY, 2008 | + &copy; 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."); index.haml @@ -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 />" } \ No newline at end of file lang/lmgtfy-en.json.example @@ -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&oacute;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&oacute;n buscar", pwnage: "&iquest;De verdad era tan dif&iacute;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&trade;.", - + translated_by: "Traducido por aditza121." } lang/lmgtfy-es.json c844ae4033c117e4d5936883b105cddbf45a3971 Ryan McGeary ryanongit@mcgeary.org http://github.com/coderifous/lmgtfy/commit/6c2dc0ddcdb27458ef789274cc42cc4e19be4558 6c2dc0ddcdb27458ef789274cc42cc4e19be4558 2008-11-23T20:57:28-08:00 2008-11-23T20:57:28-08:00 Better clipboard copy magic and improved tinyurl behavior a6060bf5b0d034849d54bd85b742fc510975e354 Ryan McGeary ryanongit@mcgeary.org