Custom Categories

I’m moving towards a more customizable interface with this application. Users may now enter their own custom categories into their logger database. Again, the logger has different benefits for different audiences. For the individual interpreter, the Logger data could easily become the beginnings of an automated invoicing system. For agencies, the combined time and geographic data from interpreters in the field might help the agency better plan future resources and account for such information vectors as travel time.

Screen to add and edit custom categories for the TerpLogger

Custom Categories shown in Logger's drop down menu

After a bit of research, I found the wonderful function which appends a new option to the original select menu and update the JQueryUI/Mobile widget.

$('select')
    .append('<option value="First-New-Item-Value">First New Item Label</option>')
    .append('<option value="Second-New-Item-Value">Second New Item Label</option>')
    .selectmenu('refresh', true);

So now, code which handles the drop downs looks like this below. For speed of rendering, I only refresh the select menu once after all of the new items have been appended.

// Extend the drop down
var dropDown = {

    target: {
        selector: "UL.ui-listbox-list",
        defaultLimit:{
			'0' : '-1',
			'1' : '4',
		}
    },

   add: function(stringToAdd, parentElementPosition){
	this.clearCustom(this.target['defaultLimit'][parentElementPosition], parentElementPosition);
        var selectItem = $(this.target['selector'])
			.eq(parseInt(parentElementPosition));
        var arrayToAdd = stringToAdd.split('\n');
		for (item in arrayToAdd) {
			if(arrayToAdd[item].length &gt; 0) {
				$('select')
					.eq(parentElementPosition)
					.append('' + arrayToAdd[item] + '');
			}
		}
		$('select').eq(parentElementPosition).selectmenu('refresh', true);

	},

    clearCustom: function(clearAfterThisPosition, parentElementPosition){
        var selectItem = $(this.target['selector']).eq(parseInt(parentElementPosition));
        selectItem.find('LI:gt(' + clearAfterThisPosition + ')').remove();
		$('select').eq(parentElementPosition).find('option:gt(' + clearAfterThisPosition + ')').remove();
    }
}
Advertisements