DigitalSandbox

So you have Coda and you’re thinking, “this is a great program and I love how productive I am now. But I really wish that the Javascript mode would autocomplete my jQuery stuff.” Yeah, I’ve been there. I couldn’t find one either, so I made one. And now you can have it too. You’re welcome.

What’s New in 2.0

I have most of the functions for jQuery 1.6.2 included in here now. I tried adding nested hints, like the CSS mode where you enter an attribute and then get a list of possible values. The goal was that you could do something like $.support. and get a list of the possible options to select from. I wasn’t able to make that work, but I decided that I needed to get an update out for jQuery 1.6 since it’s been a while. I’ll keep working on it. Hopefully the next update I’ll be able to crack the code.

Installation Instructions

For starters you need to click that download link and unzip the archive. Inside you’ll see three folders called jQuery.mode, HTML-jQuery.mode, and PHP-HTML-jQuery.mode and another file called jQuery.clips. You can install the syntax modes by copying those .mode folders to your ~/Library/Application Support/Coda/Modes/ folder. Technically, you only need the jQuery.mode, but I’ll explain why the others are there later and you can choose if you want them or not.

To install the Clips (I know, hard to figure out what that .clips file is for with that cryptic file extension) you need to open the Clips palette (⌃⌘C) and then right click in the left sidebar and choose ‘Import Group…’ find the jQuery.clips file and import that bad boy. You can learn more about what this does in the Clips section.

Usage Instructions

Of course, installing is only half the battle. Now that it’s available what you really want to do is use it. You can use it manually by selecting if from the menu: Text > Syntax Mode > jQuery. Start coding and marvel as jQuery functions are now available in the autocomplete suggestions. But manually is only gonna be fun for so long. It would be great if you could use it wherever you use Javascript. So I stole all the stuff in the Javascript mode and mixed in the jQuery stuff. Now the jQuery mode is safe to use everywhere you use your Javascript.

To make it the default mode for any Javascript file you need to tweak your preferences. In the Editor tab you can set some overrides for particular file extensions. Down near the bottom of the tab is the Custom Syntax Modes area. Click the ‘+’ and type js in the File Extension field and select jQuery from the Syntax Mode dropdown. Now every .js file will use the jQuery syntax mode.

There’s still one small problem, you won’t get the jQuery mode when you’re coding Javascript inside of an HTML or PHP file. Don’t worry, I thought of that too. Remember those other modes (PHP-HTML-jQuery and HTML-jQuery)? I have modified the stock PHP-HTML and HTML modes to use the jQuery mode instead of the Javascript mode when doing inline Javascript stuff. Users of previous versions will recall that you needed to modify these yourself before. Well I learned that that works fine until Panic pushes out an update and then you had to reapply those modifications. These modes are independent of the standard modes and therefore won’t be overwritten during an update.

Creating a Custom Mode That Uses the jQuery Mode

If you’re an ASP developer or really anyone that doesn’t use HTML or PHP these modes don’t really help you. So here’s how you create your own custom modes that use the jQuery mode when editing inline.

First you’ll need to make a copy of your mode. If it’s one of the standard modes you can find that by right-clicking the Coda application and choosing ‘Show Package Contents’. Then navigate to Contents > Resources > Modes. Copy that (make sure that you copy it and not just move it) to the same folder you copied the jQuery.mode folder. Change the name to something original like MyMode-jQuery (clever ain’t it?).

Now, open the Info.plist file inside the Contents folder and change the Bundle Identifier and the Bundle Name to whatever you just named that folder. Save and close that file and open the SyntaxDefinition.xml file in the Resources folder. Right at the top change the name to match what you named the mode. Now do a search for ‘Javascript’, if the result is in the context of usesymbolsfrommode= or useautocompletefrommode= or import mode= then change Javascript to jQuery. Save and close that file and restart Coda and you are ready to go. You can test it by switching to that Syntax Mode in the Text menu.

To make your new mode the default for those files just open your preferences and do like we did for the .js files. I set .php files to use that PHP-HTML-jQuery mode I bundled.

Hints

From the very beginning I wanted to make this mode behave the way that the PHP mode does, where it will insert hints inside the parentheses for functions to remind you of what you need to pass in. The PHP mode is really nice in that it does this all inline and pre-selects the hint text so they can be typed over after you’ve refreshed your memory. Well, I can’t do that due to some limitations in Coda (PHP is a special case that they programmed to behave that way), but I’ve added hints anyway.

Hints won’t appear inline, but you can see the hints in the Hints bar at the bottom of the editor window (turn that on by clicking the button that says Hints). Now whenever you have the autocomplete popup showing, you can cycle through the available functions and see the hints for that function. Note: if you select a function that doesn’t have any hints the hint bar will show the last function that did have hints associated with it — so don’t think it isn’t working if things don’t always change. Those hints will stay shown after you select the function as well to help remind you.

I’ve tried to format the hints to help you know what the different options are. The conventions should be familiar to most that have visited coding sites like PHP.net. Anything that is wrapped in [ ... ] is optional. If there are multiple configurations of options I have separated those options using the pipe ( | ) character. So something that has two options would be along these lines: value | string, meaning you can pass in either a value or a string.

I think that most of the hints are self-explanatory. values are numbers, selector means a jQuery selector, function is, you guessed it, a function. There are some functions that allow you to pass in a certain keyword to modify the behavior, so if the hint isn’t asking for something generic like a value or name, then you can probably just use the text of the hint as is. An example would be the noConflict() function whose hint consists of [extreme].

Clips

All the clips that I included in the bundle have tab-triggers. Below is a list of what they are and what they do.

ready+tab:
$(function() {
/*place jQuery actions here*/

});

$+tab:
$(’‘)

this+tab:
$(this)

func+tab:
function() {

}

SEEStyles

If you are using a custom SEEStyle for Javascript you will notice that your new jQuery mode is not looking so hot. This is easily remedied with a few steps. In Coda, open your Preferences and go to the Colors tab. Export the Javascript theme, open that file in Coda, and replace Javascript with jQuery (blind find/replace is okay on this one).

For your custom modes (like PHP-HTML-jQuery) you need to do the changes as outlined above and you need to update the name to your new name. So, for example, for the PHP-HTML-jQuery SEEStyle you need to change the ‘SEEStyle.PHP-HTML’ to ‘SEEStyle.PHP-HTML-jQuery’. Also you will need to change each ‘id’ from ‘PHP-HTML’ to (yep, you guessed it) ‘PHP-HTML-jQuery’. Now, the term Javascript with jQuery, but replace only those instances where it looks something like /Javascript/Keywords (e.g. in the PHP-HTML mode there is one reference that says ‘Inline Javascript’ that is okay to leave as is).

Save your new SEEStyles and then import them back into Coda. Things should be looking a lot better now.

Upcoming Features

I’m still working on making it a little more intelligent so that if there functions that are tied to each other they can only be used together. For example, the $.support function has a bunch of additional functions (boxModel, cssFloat, etc.) that only work in conjunction with that function. I want to make those secondary functions appear only after you’ve entered $.support.