ComboBox/combobox.js

(function($) {
    $.fn.getHiddenDimensions = function(includeMargin) {
        var $item = this,
            props = { position: 'absolute', visibility: 'hidden', display: 'block' },
            dim = { width:0, height:0, innerWidth: 0, innerHeight: 0,outerWidth: 0,outerHeight: 0 },
            $hiddenParents = $item.parents().andSelf().not(':visible'),
            includeMargin = includeMargin || false;
     
        var oldProps = [];
        $hiddenParents.each(function() {
            var old = {};
     
            for ( var name in props ) {
                old[ name ] = this.style[ name ];
                this.style[ name ] = props[ name ];
            }
     
            oldProps.push(old);
        });
     
        dim.width = $item.width();
        dim.outerWidth = $item.outerWidth(includeMargin);
        dim.innerWidth = $item.innerWidth();
        dim.height = $item.height();
        dim.innerHeight = $item.innerHeight();
        dim.outerHeight = $item.outerHeight(includeMargin);
     
        $hiddenParents.each(function(i) {
            var old = oldProps[i];
            for ( var name in props ) {
                this.style[ name ] = old[ name ];
            }
        });
     
        return dim;
    };
    
    var buttonClickWithItems = function(e) {
        var parent = $(this).closest('.toggle-menu');
        var p = parent.position();
        var isVisible = parent.find('.dropdown').is(':visible');
        var dropdown = $(parent).find('.dropdown');
        
        $('.toggle-menu .dropdown').hide();
        $('.toggle-menu-selected').removeClass('toggle-menu-selected');
        if (!isVisible) {
            parent.addClass('toggle-menu-selected');
            dropdown.show().offset({
                top: p.top + 31,
                left: p.left + parseInt(parent.css('margin-left'))
            });
         }

        if (!e) var e = window.event;
        e.cancelBubble = true;
        e.stopPropagation();
    };
    
    var buttonMouseDown = function(e) {
        $(this).closest('.toggle-menu').addClass('toggle-menu-selected');
    };
    
    var buttonMouseUp = function(e) {
        $(this).closest('.toggle-menu').removeClass('toggle-menu-selected');
        
        // Call the "data-onclick" function
        var clickFunction = $(this).data('onclick');
        if (clickFunction)
            clickFunction();
    }

    var buttonDragStart = function(e) {
        $(this).closest('.toggle-menu').removeClass('toggle-menu-selected');
    }

    var buttonMethods = {
        construct: function(options) {
            var name = options.Name;
            var title = options.Title;
            var collateLeft = options.CollateLeft;
            var collateRight = options.CollateRight;
            var onClick = options.onClick;
            var firstTimeOpened = true;
            
            // Mouse events
            $(this).mousedown(buttonMouseDown);
            $(this).mouseup(buttonMouseUp);
            $(this).bind('dragstart', buttonDragStart);
            
            // Save the OnClick function
            if (onClick)
                $(this).data('onclick', onClick);
            
            // Input that will hold the value
            var input = $('<input type="hidden" name="' + name + '"/>');
            
            // Create the Button
            var button = $('<div class="button"></div>');
            button.append('<div class="title">' + title + '</div>',
                          '<div class="arrow"></div>');
            
            // This is the DropDown Box
            var dropdown = $('<div class="dropdown scroll-pane"></div>');
            
            // Run this code to hide the dropdown box when clicked anywhere on the screen
            var oldOnClick = $(document).onclick;
            $(document).click(function() {
                $('.toggle-menu .dropdown').hide();
                $('.toggle-menu-selected').removeClass('toggle-menu-selected');
                if (oldOnClick != null)
                    oldOnClick();
            });
            
            // Setup the border fade on hover (we need jQuery UI for this)
            $(this).mouseenter(function() {
                $(this).animate({borderTopColor: '#505050',
                                 borderLeftColor: '#505050',
                                 borderRightColor: '#505050',
                                 borderBottomColor: '#505050' }, 
                                'fast');
            });
            $(this).mouseleave(function() {
                $(this).animate({borderTopColor: '#989898',
                                 borderLeftColor: '#989898',
                                 borderRightColor: '#989898',
                                 borderBottomColor: '#989898' }, 
                                'fast');
            });
            
            // Add everything and call ourselfs as a 'toggle-menu' :)
            $(this).append(input, button, dropdown);
            $(this).addClass('toggle-menu');
            if (collateLeft == 'yes')
                $(this).addClass('toggle-menu-collate-left');
            if (collateRight == 'yes')
                $(this).addClass('toggle-menu-collate-right');
            
            return this;
        },
        
        // Add a new item to the dropdown menu
        add: function(options) {
            var dropdown = $(this).find('.dropdown');
            var items = dropdown.children('p');
            // ComboBoxItem class       
            function ComboBoxItem(itemOptions) {
                var text = itemOptions.Text;
                var onClick = itemOptions.onClick;
                var selectOnClick = itemOptions.selectOnClick;
                
                var item = $('<p>' + text + '</p>');
                item.click(function(e) {
                    if ($(this).hasClass('disabled')) return false;

                    // Call the "data-onclick" function if we have one
                    var clickFunction = $(this).data('onClick');
                    if (clickFunction) {
                        var parent = $(this).closest('.toggle-menu');
                        parent.children('.dropdown').hide();
                        parent.removeClass('toggle-menu-selected');
                        
                        if ($(this).data('selectOnClick')) {
                            var parent = $(this).closest('.toggle-menu');
                            parent.find('input').attr('value', $(this).text());
                            parent.find('.title').html($(this).text());
                        }
                        
                        clickFunction($(this).closest('p').html());
                        
                        return false;
                    } else {
                        var parent = $(this).closest('.toggle-menu');
                        parent.find('input').attr('value', $(this).text());
                        parent.find('.title').html($(this).text());
                    }
                });
                
                // Save the OnClick function
                if (onClick)
                    item.data('onClick', onClick);
                
                // Store the selectOnClick option
                if (selectOnClick)
                    item.data('selectOnClick', selectOnClick);

                return item;
            }
            // Add the arrow back if this is the first item
            if (items.length == 0) {
                $(this).find('.title').css('text-align', 'left');
                $(this).find('.arrow').css('display', 'inline-block');
                
                // And add the onclick event
                $(this).click(buttonClickWithItems);
                $(this).unbind('mousedown');
                $(this).unbind('mouseup');
                $(this).unbind('dragstart');
            }

            var item = new ComboBoxItem(options);
            dropdown.append(item);
            
            var minWidth = $(this).find('.title').width();
            dropdown.children('p').each(function() {
                if ($(this).getHiddenDimensions().width > minWidth)
                    minWidth = $(this).getHiddenDimensions().width;
            });
            $(this).find('.title').css('min-width', minWidth + 'px');
            dropdown.css('min-width', ($(this).width() + 20) + 'px');
        },
        
        // Deletes a option from the dropdown menu
        del: function(index) {
            var items = $(this).find('.dropdown p');
            var toDel = items.eq(index);
            var title = $(this).find('.title');
            
            if (title.html() == toDel.text()) {
                title.html('');
                $(this).find('input').attr('value', '');
            }
            
            // Remove the arrow and make this a simple button if no more items are available
            if (items.length == 1) {
                $(this).find('.title').css('text-align', 'center');
                $(this).find('.arrow').css('display', 'none');
                
                $(this).mousedown(buttonMouseDown);
                $(this).mouseup(buttonMouseUp);
                $(this).bind('dragstart', buttonDragStart);
                $(this).unbind('click');
            }

            toDel.remove();
        },

        // Clears any entries on the ComboBox
        clear: function() {
            var nItems = $(this).find('.dropdown').children('p').size();
            var i = 0;

            for (i = 0; i < nItems; i++) {
                $(this).ComboBox('del', 0);
            }
        },
            
        // Disables a menu item
        disable:  function(index) {
            var toDis = $(this).find('.dropdown p').eq(index);
            var title = $(this).find('.title');

            if (title.html() == toDis.text()) {
                title.html('');
                $(this).find('input').attr('value', '');
            }
            
            toDis.addClass('disabled');
        },

        // Enables a menu item
        enable: function(index) {
            var toEn = $(this).find('.dropdown p').eq(index);
            
            toEn.removeClass('disabled');
        },
    };
    
    $.fn.ComboBox = function(method) {
        if (buttonMethods[method]) {
            return buttonMethods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return buttonMethods['construct'].apply(this, arguments);
        } else {
            $.error('Method ' + method + ' doesn\'t exist in jQuery.ComboBox');
        }
    };
      

    $('#cb1').ComboBox({
        Name: 'cbo1',
        Title: 'Test 1',
        CollateLeft: 'no',
        CollateRight: 'yes'
    });
    $('#cb1').ComboBox('add', {
        Text: 'Item 1'
    });
    $('#cb1').ComboBox('add', {
        Text: 'Item 2'
    });
    $('#cb1').ComboBox('add', {
        Text: 'Item 3'
    });
    $('#cb2').ComboBox({
        Name: 'cbo2',
        Title: 'Test 2',
        CollateLeft: 'yes',
        CollateRight: 'no'
    });
    $('#cb2').ComboBox('add', {
        Text: 'Item 4'
    });
    $('#cb2').ComboBox('add', {
        Text: 'Item 5',
        onClick: test,
        selectOnClick: false
    });
    $('#cb2').ComboBox('add', {
        Text: 'Item 6',
        onClick: test,
        selectOnClick: true
    });
    $('#cb3').ComboBox({
        Name: 'cbo3',
        Title: '',
        CollateLeft: 'no',
        CollateRight: 'no',
        onClick: test
    });
    $('#cb3').ComboBox('add', {
        Text: 'Item 7'
    });
    $('#cb3').ComboBox('add', {
        Text: 'Item 8'
    });
    $('#cb3').ComboBox('add', {
        Text: 'Item 9'
    });
    $('#cb3').ComboBox('add', {
        Text: 'Item 9'
    });
    $('#cb3').ComboBox('add', {
        Text: 'Item 9'
    });
    $('#cb3').ComboBox('add', {
        Text: 'Item 9'
    });
    $('#cb3').ComboBox('add', {
        Text: 'Item 9'
    });
    $('#cb3').ComboBox('add', {
        Text: 'Item 9'
    });
    $('#cb3').ComboBox('add', {
        Text: 'Item 9'
    });
    $('#cb3').ComboBox('add', {
        Text: 'Item 9'
    });
    $('#cb3').ComboBox('add', {
        Text: 'Item 9'
    });
    $('#cb3').ComboBox('add', {
        Text: 'Item 9'
    });
    $('#cb3').ComboBox('add', {
        Text: 'Item 9'
    });
    $('#cb3').ComboBox('add', {
        Text: 'Item 9'
    });
    $('#cb3').ComboBox('add', {
        Text: 'Item 9'
    });
})(jQuery);

function test() {
    alert('clicked');
};