David Janes' Code Weblog

I’ve been playing with jQuery (in general) and jPicker (in particular) over the last few days. I’m using jPicker because it’s not only a color picker but it also supports alpha-levels.

One – major – issue I’ve had is that jPicker doesn’t make it very easy to display only one control at a time, making the screen a bit of a visual mess when multiple color fields are being used.

Here’s how I fixed this.

$(document).ready(function() {
    $('body').click(function(evt) {
        if ($('div.jPicker.Container:visible').length > 0) {
            if ($(evt.target).parents('span.jPicker').length > 0) {
                $('div.jPicker.Container').each(function() {
                    if ($(this).css('z-index') == '10') {
                        $(this).hide('fast');
                    }
                });
            } else if ($(evt.target).parents('div.jPicker.Container').length == 0) {
                $('div.jPicker.Container').hide('fast');
            }
        }
    });
});

Notes:

• this will dismiss the current jPicker if you click outside of one
• the first if makes sure there’s something to do first
• the second and third ifs take care of the case where the user clicks on the control to popup a jPicker. This takes advantage of the fact that the current jPicker is shown at z-index = 20 (which makes me wonder if we could do a lot of this with just a CSS selector for z-index = 10)
• the final if takes care of the case where we’ve clicked outside of all jPicker controls

Here’s a quick Christmas Eve recipe for sorting lists of strings that have numbers in them at some place.

import re
import string

numeric_rex = re.compile('(\d+)')

def numeric_sorter(a, b):
    av = filter(None, numeric_rex.split(a))
    bv = filter(None, numeric_rex.split(b))

    while av and bv:
        af = av.pop(0)
        bf = bv.pop(0)

        if af[0] in string.digits and bf[0] in string.digits:
            r = cmp(int(af), int(bf))
        else:
            r = cmp(af, bf)

        if r != 0:
            return  r

    if av:
        return  1
    elif bv:
        return  -1
    else:
        return  0

Here’s an example of it being used:

>>> items = [ "Item1", "Item10", "Item", "Item9", "Item100", "ItemLogo", ]
>>> items.sort()
>>> pprint.pprint(items)
['Item', 'Item1', 'Item10', 'Item100', 'Item9', 'ItemLogo']
>>> items.sort(numeric_sorter)
>>> pprint.pprint(items)
['Item', 'Item1', 'Item9', 'Item10', 'Item100', 'ItemLogo']

This documents how I installed Drupal on a brand new Macbook Air running Snow Leopard 10.6.5.

Web/Desktop/Shell: Install MySQL

• Go here (“Mysql Community Server”) and download the 64 bit version
• Double click on the DMG and Install
• Drag the .PREF file in the DMG to the System Preferences

Note – I’m still having trouble starting MySQL from the command line. Right now I’m doing:

• cd /usr/local/mysql/bin
• nohup ./mysqld_safe &
• disown %1

If you have advice, I’d appreciate it.

Web/Shell: Install Drupal

• Download Drupal
• Untar Drupal in ~/Sites/
• In Apple > System Preferences > Sharing, select Web Sharing
• In your browser go to http://localhost/~USERNAME/drupal-6.20/

In case it’s not clear what happened here:

• Snow Leopard has an Apache Server built in
• each user account gets it’s HTTP files in ~/Sites/
• you turn on Apache by turning on Web Sharing
• you browse by going to ~USERNAME/

You’ll notice at this stage we’re just seeing a directory listing, or if you’re a little more ambitious and click on “index.php”, PHP code. If you’re actually seeing a Drupal setup page, skip the next section.

Shell: Setup PHP

This is just following the excellent instructions from here.

• sudo vim /etc/apache2/httpd.conf
• uncomment LoadModule php5_module
• bash (to start a subshell)
• cd /etc
• sudo cp php.ini.default php.ini
• sudo chmod 666 php.ini
• sudo vi /etc/php.ini
• search for ;date.timezone
• uncomment and change to:
  date.timezone=America/Toronto
• restart apache: sudo apachectl restart
• end the subshell: exit

Note – if you see the error “/usr/sbin/apachectl: line 82: ulimit: open files: cannot modify limit: Invalid argument“, follow the instructions here:

• sudo vim /usr/sbin/apachectl
• comment out ULIMIT_MAX_FILES at line 64

Local Web/Shell: Set up Drupal

• go to the webpage install.php (on the URL figured out way above)
• click on Install Drupal in English
• if you get an error message about default.settings.php
  • cd ~/Sites/drupal-6.20/sites/default
  • cp default.settings.php settings.php
  • chmod a+w settings.php
• if you get an error message about sites/defaults/files
  • cd ~/Sites/drupal-6.20/sites/default
  • mkdir files
  • chmod 777 files

At this point you should be brought to a “Database Configuration Page” and we have to leave the browser and go back to the command line.

Shell: MySQL Database Configuration

These instructions create a MySQL database called “drupal_db” with access by “drupal_user” using the password “drupal_password“.

• /usr/local/mysql/bin/mysql -u root
  • create database drupal_db;
  • grant all privileges ON drupal_db.* TO "drupal_user"@"localhost" identified by "drupal_password";
  • grant all privileges ON drupal_db.* TO "drupal_user"@"127.0.0.1" identified by "drupal_password";
  • flush privileges;
  • exit;

Local Web: Enter MySQL information into Drupal

Back in the browser you should be on the Drupal Database Configuration page. Enter drupal_db, drupal_user and drupal_password (the values you created in the previous step)

Submit the form. If you get the following error message:

Failed to connect to your MySQL database server. MySQL reports the following message: No such file or directory.

Make sure you typed everything correctly. If necessary, click on Advanced Options and change the hostname from localhost to 127.0.0.1.

Local Web: Configure Site page for Drupal

• Site Information:
  • Site Name: localhost (why not)
  • Site e-mail address: your@email.com
• Administrator account:
  • Username: admin (why not)
  • E-mail address: your@email.com
  • Password:/Confirm password: your-favorite-password

Local Web: Drupal installation complete

After you hit submit, you should be finished installing Drupal, except for the next little cleanup step.

Shell: Clean up files

Drupal doesn’t like you leaving settings.php alterable by the web server around:

• cd ~/Sites/drupal-6.20/sites/default
• chmod go-w settings.php

The directory files must be left writable.