Month: June 2011

Complete Example of Tracking Start and End of Drag Operations with jQuery and Table Rows

After writing my previous post about “Keeping track of indexes while dragging in jQuery UI Sortable” I received a question about how this would work for sortable table rows. The code I included in the previous post should actually be enough to make everything work (.. as long as I understood the question correctly). I’ve created a minimal example as a complete implementation of the code from the previous post, and I’ve also included it as a live demo here.

This is based on jQuery 1.5.1 and jQuery UI 1.8.13. I’ve simply used the distribution versions of this example (you probably want to build your own UI bundle using the interface on the jQuery UI website).

Here’s a live demo that you can play with.

Inline javascript and WordPress could possibly be better friends.

The complete source for the minimal (but complete) example is included here:



    
        
        jQuery UI Example Page
        
        
        
        
    
    
        

            

                Dragging from index
            

            

                None
            

            

                Hovering index
            

            

                None
            

        

    
        

            
                

                    
                        Keys
                    
                    
                        Values
                    
                

            
            
                

                    
                        Key 1
                    
                    
                        Value 1
                    
                

                

                    
                        Key 2
                    
                    
                        Value 2
                    
                

                

                    
                        Key 3
                    
                    
                        Value 3
                    
                

                

                    
                        Key 4
                    
                    
                        Value 4
                    
                

                

                    
                        Key 5
                    
                    
                        Value 5
                    
                

                

                    
                        Key 6
                    
                    
                        Value 6

Getting Mac OS X-fonts to Work on Windows (Through Ubuntu)

This will be a fairly technical post, so if you’re not in the mood or don’t know what a bash script or Ubuntu is, this might not be the post for you.

Useful Ubuntu packages: fontforge (install with apt-get install fontforge)
Useful PERL Libraries: Mac::AppleSingleDouble (install with cpan install Mac::AppleSingleDouble)

First; Mac OS X stores the actual font data as a secondary data stream / file that’s attached to the actual font that the user can see. This requires the user sending the font to zip the contents before sending, so that both files can be included. The interesting files will be located in the __MACOSX folder and not in the actual folder containing the font (this folder will only contain the files with a 0 byte size). These files in __MACOSX will be the ones we’re going to town with.

Doing “file” on any file from this directory will probably yield “AppleDouble encoded Macintosh file”.

You can extract the actual contents of these files with the following awesome PERL snippet from a post at superuser:

perl -MMac::AppleSingleDouble -e 'for(@ARGV) {
    $a = new Mac::AppleSingleDouble($_);
    if(open $f, ">", $_.".rsrc") {
        binmode $f;
        print $f $a->get_entry(2);
        close $f;
    }
}' FILENAME_HERE

This will create a FILENAME_HERE.rsrc file in the current directory. This is the actual file that were stored as side channel data, without the other metadata associated with it.

In my case the resulting file was indicated to be a “Mac OSX datafork font, PostScript” by “file”, and after this I tried two things – one worked, one failed.

The first that failed:
In the archive there was also two other small datafiles. I tried extracting these and renaming the files to .pfb and .pfm (to use them as PostScript Type 1 fonts on Windows). This did not work. I’m not really sure where this failed at the moment, as I didn’t really feel like digging myself further down into the Windows Font subsystem. I also tried running the files through fondu, but didn’t get anywhere (it seems I really should run this under Mac OS X to be able to generate the proper .pfb and .afm files).

The second that worked (sort of):
fontforge is able to import a PostScript/dfont file without the associated metadata file. This might break kerning and a few other issues (fontforge will guess, so it won’t be half-bad), but will give you a resulting TTF file that actually works and can be used for most of the things that you’d use the font for. It was good enough for our use. Simply start fontforge, open the file and select file -> Generate Font afterwards.

Hopefully I won’t have to do this any time soon again. Fonts. Prrffftttt.

Keeping track of indexes while dragging in jQuery ui.sortable

While you’re handling a drag operation in the jQuery UI Sortable handler, there’s a few small issues that might almost drive you insane. These two solutions are based on information from various places on the net (such as a few discussions on Stack Overflow).

If you want to keep track of which location the item you’re dragging originated from, you can attach to the ‘start’ event in the Sortable configuration constructor. Use this event to attach the origin index as a data element:

start: function(event, ui) {
    ui.item.data('originIndex', ui.item.index());
},

If you want to find out what index the user is currently hovering above (to change the numbering of a list instantly), you can use the same method on the placeholder element (available as ui.placeholder, so to fetch the current index the user is hovering over, call ui.placeholder.index()). There is however a gotcha’ here, as the original element is still present in the list – just allow to float freely around (the dragging action). We handle this by fetching the origin index and subtracting one if we’re after the location we started at.

You can handle these events in the ‘change’ event handler:

change: function (event, ui) {
    var originIndex = ui.item.data('originIndex');
    var currentIndex = ui.placeholder.index();

    if (currentIndex > originIndex)
    {
        currentIndex -= 1;
    }

    // do magic
}