Item Selector example

The mark up is a simple ul:

<ul id="selectable-container">
    <li><a href="#">dog</a></li>
    <li><a href="#">cat</a></li>
    <li><a href="#">bird</a></li>
    <li><a href="#">whale</a></li>
    <li><a href="#">frog</a></li>
    <li><a href="#">monkey</a></li>
    <li><a href="#">mouse</a></li>
</ul>

The reason for the “<a>” tags is to keep the browser from selecting the text during a shift+click.

To create an instance of ItemSelector:

var selectContainer = new ItemSelector.selectList('selectable-container',{css:{selectedClass: 'selected-item'}});

The first argument to the selectList method is the id of the ul and the second argument is a config object containing a class to apply to the selected li’s.

Here are a few events which can be subscribed to:

• hasSelection – fires whenever the selection is modified and there is still a selection
• noSelection – fires when the selection is cleared or the selection length becomes zero
• noItems – fires when all list elements have been removed
• lengthChanged – fires whenever the selection length changes
• itemDoubleClick – fires if an item has been double clicked

Here’s the outcome.

[flv width="480" height="360" image="http://treyruncie.com/wp-content/uploads/2008/12/fresh-prince-of-dollar.jpg"]http://www.youtube.com/watch?v=rk3ow2A5c-s[/flv]

You will need to be able to rsync to the remote computer without using a password. For this you will need to set up an ssh key.

Add the following shell script to Textmate as a command with input is set to none, output is set to Show as tooltip and my key equivalent is set to control+command+s (or whatever you like)

RSYNC_USER=${RSYNC_USER:-defaultUsername}
RSYNC_HOST=${RSYNC_HOST:-defaultHost}
if [ "${RSYNC_DIR}"  ]; then
	rsync -av --exclude "CVS*" --exclude "*.kpf" --exclude ".DS_Store" $RSYNC_DIR $RSYNC_USER@$RSYNC_HOST:$RSYNC_REMOTE
fi

Textmate can accept variables for this script on a per project basis. To do this open your project, make sure no files are hi-lighted in the project drawer then click on the “i” info icon at the bottom of the project drawer. Here you can add your required variables.
RSYNC_USER The user
RSYNC_DIR The local directory from which the rsync will be made. eg. “/User/me/Sites/myProject/”
RSYNC_REMOTE The remote directory in which to rsync. eg. “/var/www/myProject”
RSYNC_HOST The host name of the remote server.

Tip: It is always a good idea to echo out the rsync command and have a look at what it is doing before you let it run.

There are four public functions.

1. contentTag: a function for creating html elements with child nodes.
2. tag: a function for creating self closing html elements like img, input or br.
3. write: a function for rendering the html elements to the DOM.
4. addEvent: a function that adds an event to an element and returns that element for rendering in the Dom.

HTML Builder Demo

Sample Usage

var HTML = YAHOO.treyruncie.html;
HTML.write(HTML.contentTag('a',{'href':'somelink'},'text node'));

var HTML = YAHOO.treyruncie.html;
HTML.write(
    HTML.contentTag('div',{'class':'divFromScript'},
        'DIV and input from script',
        HTML.tag('br'),
        HTML.contentTag('label',{'for':'sample'},
            'label for sample',
            HTML.tag('input',{'value':'hello world','name':'sample'})
        ),
        HTML.tag('br'),
        'DIV and input from script'
    ),
    'targetID','insertAfter'
);