New Snippet Buttons

I’ve added two new buttons to all of the code snippets in the Snippets section of the site. Now a button to add directly to Snippets.app and a button to directly copy to the clipboard join the Coda and Textmate buttons.

Read on for some more details about them, and remember, you can help the Snippets section grow by submitting yours.

Snippets.app button

One-click adding to Snippets.app

Snippets.app supports a URL protocol thingy. That is, once the application installed, browsers on your system know that when a URL is entered that begins with “snippets:” (instead of like http://) that it should launch (or ask you to launch) Snippets.app and do something with that URL.

Their format is:

snippets:add?code=[ENCODED-CODE-HERE]&name=[SNIPPET-NAME]&relatedurl=[REFERENCE-URL]&author=[AUTHOR-NAME]

You’ll only see this once if you check the box.

Since all my code snippets are in <pre> elements, this is how I add the Snippets.app button to each code block (simplified):

$("pre").each(function() {
    $preblock = $(this);
    $codeblock = $preblock.find("code");
    $snippets_link = "snippet:add?code=" + encodeURIComponent($codeblock.text()) + "&name=" + $title + "&relatedurl=" + encodeURIComponent(document.location.href);
    $("<a class='snippet-button'>Add to Snippets.app</a>").attr("href",$snippets_link).appendTo($preblock);         
});

Copy to Clipboard

This button is powered by the awesome Zero Clipboard. For a while after Flash 10 came out, copying to clipboard from the web was borked as Flash 10 had some new security restrictions that blocked the previous methods (Yeah, apparently Flash is needed to have this work correctly). Zero Clipboard stepped it up and fixed it somehow.

One-click copying to clipboard

One particular challenge here was with the rollover technique I’m using to display the “tooltip” like text for each button. On the three other buttons, I do a simple thing where I append a span to the anchor link on hover, and remove it on the hover callback:

$(".snippet-button").hover(function() {
    $el = $(this);
    $el.append("<span>" + $el.text() + "</span>");
}, function() {
    $(this).find("span").remove();
});

The span is styled and positioned with CSS.

The problem is, Zero Clipboard works by positioning a completely transparent flash embed over top of the button. This means there is no traditional hover even fired when the mouse goes over this area. Fortunately, Zero Clipboard provides event listeners which you can have fire callback functions for you. See the last two lines:

ZeroClipboard.setMoviePath( '/path/to/ZeroClipboard.swf' );
    
$(".copy-clip").each(function(i) {

    clip = new ZeroClipboard.Client();
    
    $el = $(this);
    $parent = $el.parent();
    
    clip.glue($el[0], $parent[0]);
    
    txt = $el.parent().find("code").text();
    clip.setText(txt);
    
    clip.addEventListener('complete', function(client, text) {
      // provide some user feedback of success
    });
    
    clip.addEventListener('mouseOver', copyMouseOver);
    clip.addEventListener('mouseOut', copyMouseOut);     

});

Those two functions, copyMouseOver and copyMouseOut are used to do the same span-applying-and-removing business the other buttons use. The one tricky-dick thing left is that these functions need to know which parent element to deal with, in the case of multiple snippets on a single page. Fortunately they automatically pass the object to the function which is loaded with info about that element, including the ID, which I use to specify which code snippet button we are talking about:

function copyMouseOver(passed) {
    $("#copy-" + passed.id).append("<span>Copy to Clipboard</span>");
};

I wanted to make sure there was a bit of user feedback when a clip was successfully copied to the clipboard, so you’ll notice that the clip itself quickly fades down and back up after a successful copy. Somewhat subtle but I think it’s fairly satisfying.

Coda and TextMate

Not much has changed here. I covered how to add Coda buttons in a previous tutorial. David Walsh covered the TextMate button, which requires some fancy server side action.

Seem to work OK?

Give it a test and let me know… I’ve heard some musings of FAIL on Twitter but all the buttons seem to work OK for me. If you want to do a FAIL report, please attempt to be helpful and explain which button isn’t working, the browser/version/platform, and what actually happens.

Macity Mac Mac Mac

Yeah all the integrations are Mac software. Sorry about that, that’s just how I roll. If there was a PC program that supported a URL protocol thingy, I’d check it out and see what I could do about integrating it. For now, the copy to clipboard thing should be useful still.