Subversion Repositories cheapmusic

/**
 * jQuery Editable Select
 * Indri Muska <indrimuska@gmail.com>
 *
 * Source on GitHub @ https://github.com/indrimuska/jquery-editable-select
 */

+(function ($) {
        // jQuery Editable Select
        EditableSelect = function (select, options) {
                var that     = this;

                this.options = options;
                this.$select = $(select);
                this.$input  = $('<input type="text" autocomplete="off">');
                this.$list   = $('<ul class="es-list">');
                this.utility = new EditableSelectUtility(this);

                if (['focus', 'manual'].indexOf(this.options.trigger) < 0) this.options.trigger = 'focus';
                if (['default', 'fade', 'slide'].indexOf(this.options.effects) < 0) this.options.effects = 'default';
                if (isNaN(this.options.duration) && ['fast', 'slow'].indexOf(this.options.duration) < 0) this.options.duration = 'fast';

                // create text input
                this.$select.replaceWith(this.$input);
                this.$list.appendTo(this.options.appendTo || this.$input.parent());

                // initalization
                this.utility.initialize();
                this.utility.initializeList();
                this.utility.initializeInput();
                this.utility.trigger('created');
        }
        EditableSelect.DEFAULTS = { filter: true, effects: 'default', duration: 'fast', trigger: 'focus' };
        EditableSelect.prototype.filter = function () {
                var hiddens = 0;
                var search  = this.$input.val().toLowerCase().trim();

                this.$list.find('li').addClass('es-visible').show();
                if (this.options.filter) {
                        hiddens = this.$list.find('li').filter(function (i, li) { return $(li).text().toLowerCase().indexOf(search) < 0; }).hide().removeClass('es-visible').length;
                        if (this.$list.find('li').length == hiddens) this.hide();
                }
        };
        EditableSelect.prototype.show = function () {
                this.$list.css({
                        top:   this.$input.position().top + this.$input.outerHeight() - 1,
                        left:  this.$input.position().left,
                        width: this.$input.outerWidth()
                });

                if (!this.$list.is(':visible') && this.$list.find('li.es-visible').length > 0) {
                        var fns = { default: 'show', fade: 'fadeIn', slide: 'slideDown' };
                        var fn  = fns[this.options.effects];

                        this.utility.trigger('show');
                        this.$input.addClass('open');
                        this.$list[fn](this.options.duration, $.proxy(this.utility.trigger, this.utility, 'shown'));
                }
        };
        EditableSelect.prototype.hide = function () {
                var fns = { default: 'hide', fade: 'fadeOut', slide: 'slideUp' };
                var fn  = fns[this.options.effects];

                this.utility.trigger('hide');
                this.$input.removeClass('open');
                this.$list[fn](this.options.duration, $.proxy(this.utility.trigger, this.utility, 'hidden'));
        };
        EditableSelect.prototype.select = function ($li) {
                if (!this.$list.has($li) || !$li.is('li.es-visible:not([disabled])')) return;
                this.$input.val($li.text());
                if (this.options.filter) this.hide();
                this.filter();
                this.utility.trigger('select', $li);
        };
        EditableSelect.prototype.add = function (text, index, attrs, data) {
                var $li     = $('<li>').html(text);
                var $option = $('<option>').text(text);
                var last    = this.$list.find('li').length;

                if (isNaN(index)) index = last;
                else index = Math.min(Math.max(0, index), last);
                if (index == 0) {
                  this.$list.prepend($li);
                  this.$select.prepend($option);
                } else {
                  this.$list.find('li').eq(index - 1).after($li);
                  this.$select.find('option').eq(index - 1).after($option);
                }
                this.utility.setAttributes($li, attrs, data);
                this.utility.setAttributes($option, attrs, data);
                this.filter();
        };
        EditableSelect.prototype.remove = function (index) {
                var last = this.$list.find('li').length;

                if (isNaN(index)) index = last;
                else index = Math.min(Math.max(0, index), last - 1);
                this.$list.find('li').eq(index).remove();
                this.$select.find('option').eq(index).remove();
                this.filter();
        };
        EditableSelect.prototype.clear = function () {
                this.$list.find('li').remove();
                this.$select.find('option').remove();
                this.filter();
        };
        EditableSelect.prototype.destroy = function () {
                this.$list.off('mousemove mousedown mouseup');
                this.$input.off('focus blur input keydown');
                this.$input.replaceWith(this.$select);
                this.$list.remove();
                this.$select.removeData('editable-select');
        };

        // Utility
        EditableSelectUtility = function (es) {
                this.es = es;
        }
        EditableSelectUtility.prototype.initialize = function () {
                var that = this;
                that.setAttributes(that.es.$input, that.es.$select[0].attributes, that.es.$select.data());
                that.es.$input.addClass('es-input').data('editable-select', that.es);
                that.es.$select.find('option').each(function (i, option) {
                        var $option = $(option).remove();
                        that.es.add($option.text(), i, option.attributes, $option.data());
                        if ($option.attr('selected')) that.es.$input.val($option.text());
                });
                that.es.filter();
        };
        EditableSelectUtility.prototype.initializeList = function () {
                var that = this;
                that.es.$list
                        .on('mousemove', 'li:not([disabled])', function () {
                                that.es.$list.find('.selected').removeClass('selected');
                                $(this).addClass('selected');
                        })
                        .on('mousedown', 'li', function (e) {
                                if ($(this).is('[disabled]')) e.preventDefault();
                                else that.es.select($(this));
                        })
                        .on('mouseup', function () {
                                that.es.$list.find('li.selected').removeClass('selected');
                        });
        };
        EditableSelectUtility.prototype.initializeInput = function () {
                var that = this;
                switch (this.es.options.trigger) {
                        default:
                        case 'focus':
                                that.es.$input
                                        .on('focus', $.proxy(that.es.show, that.es))
                                        .on('blur', $.proxy(that.es.hide, that.es));
                                break;
                        case 'manual':
                                break;
                }
                that.es.$input.on('input keydown', function (e) {
                        switch (e.keyCode) {
                                case 38: // Up
                                        var visibles = that.es.$list.find('li.es-visible:not([disabled])');
                                        var selectedIndex = visibles.index(visibles.filter('li.selected'));
                                        that.highlight(selectedIndex - 1);
                                        e.preventDefault();
                                        break;
                                case 40: // Down
                                        var visibles = that.es.$list.find('li.es-visible:not([disabled])');
                                        var selectedIndex = visibles.index(visibles.filter('li.selected'));
                                        that.highlight(selectedIndex + 1);
                                        e.preventDefault();
                                        break;
                                case 13: // Enter
                                        if (that.es.$list.is(':visible')) {
                                                that.es.select(that.es.$list.find('li.selected'));
                                                e.preventDefault();
                                        }
                                        break;
                                case 9:  // Tab
                                case 27: // Esc
                                        that.es.hide();
                                        break;
                                default:
                                        that.es.filter();
                                        that.highlight(0);
                                        break;
                        }
                });
        };
        EditableSelectUtility.prototype.highlight = function (index) {
                var that = this;
                that.es.show();
                setTimeout(function () {
                        var visibles         = that.es.$list.find('li.es-visible');
                        var oldSelected      = that.es.$list.find('li.selected').removeClass('selected');
                        var oldSelectedIndex = visibles.index(oldSelected);

                        if (visibles.length > 0) {
                                var selectedIndex = (visibles.length + index) % visibles.length;
                                var selected      = visibles.eq(selectedIndex);
                                var top           = selected.position().top;

                                selected.addClass('selected');
                                if (selectedIndex < oldSelectedIndex && top < 0)
                                        that.es.$list.scrollTop(that.es.$list.scrollTop() + top);
                                if (selectedIndex > oldSelectedIndex && top + selected.outerHeight() > that.es.$list.outerHeight())
                                        that.es.$list.scrollTop(that.es.$list.scrollTop() + selected.outerHeight() + 2 * (top - that.es.$list.outerHeight()));
                        }
                });
        };
        EditableSelectUtility.prototype.setAttributes = function ($element, attrs, data) {
                $.each(attrs || {}, function (i, attr) { $element.attr(attr.name, attr.value); });
                $element.data(data);
        };
        EditableSelectUtility.prototype.trigger = function (event) {
                var params = Array.prototype.slice.call(arguments, 1);
                var args   = [event + '.editable-select'];
                args.push(params);
                this.es.$select.trigger.apply(this.es.$select, args);
                this.es.$input.trigger.apply(this.es.$input, args);
        };

        // Plugin
        Plugin = function (option) {
                var args = Array.prototype.slice.call(arguments, 1);
                return this.each(function () {
                        var $this   = $(this);
                        var data    = $this.data('editable-select');
                        var options = $.extend({}, EditableSelect.DEFAULTS, $this.data(), typeof option == 'object' && option);

                        if (!data) data = new EditableSelect(this, options);
                        if (typeof option == 'string') data[option].apply(data, args);
                });
        }
        $.fn.editableSelect             = Plugin;
        $.fn.editableSelect.Constructor = EditableSelect;

})(jQuery);