From 67175042f9817299479131337563f0cacdad851f Mon Sep 17 00:00:00 2001 From: Emanuel Schuetze Date: Sat, 31 Aug 2013 00:17:32 +0200 Subject: [PATCH] Fixed #857: Use jquery plugin 'bsmSelect' for ', { + 'class': o.selectClass, + name: o.selectClass + this.uid, + id: o.selectClass + this.uid, + change: $.proxy(this.selectChangeEvent, this), + click: $.proxy(this.selectClickEvent, this) + }); + + this.$list = $.isFunction(o.listType) + ? o.listType(this.$original) + : $('<' + o.listType + '>', { id: o.listClass + this.uid }); + + this.$list.addClass(o.listClass); + + this.$container = $('
', { 'class': o.containerClass, id: this.uid }); + + this.buildSelect(); + + this.$original.change($.proxy(this.originalChangeEvent, this)).wrap(this.$container).before(this.$select); + + // if the list isn't already in the document, add it (it might be inserted by a custom callback) + if (!this.$list.parent().length) { this.$original.before(this.$list); } + + if (this.$original.attr('id')) { + $('label[for=' + this.$original.attr('id') + ']').attr('for', this.$select.attr('id')); + } + + // set up remove event (may be a link, or the list item itself) + this.$list.delegate('.' + o.removeClass, 'click', function() { + self.dropListItem($(this).closest('li')); + return false; + }); + + $.each(o.plugins, function() { this.init(self); }); + }, + + /** + * Triggered when an item has been selected + * Check to make sure it's not an IE screwup, and add it to the list + */ + selectChangeEvent: function() { + if ($.browser && $.browser.msie && $.browser.version < 7 && !this.ieClick) { return; } + var bsmOpt = $('option:selected:eq(0)', this.$select); + if (bsmOpt.data('orig-option')) { + this.addListItem(bsmOpt); + this.triggerOriginalChange(bsmOpt.data('orig-option'), 'add'); + } + this.ieClick = false; + }, + + /** + * IE6 lets you scroll around in a select without it being pulled down + * making sure a click preceded the change() event reduces the chance + * if unintended items being added. there may be a better solution? + */ + selectClickEvent: function() { + this.ieClick = true; + }, + + /** + * Rebuild bsmSelect when the 'change' event is triggered on the original select + */ + originalChangeEvent: function() { + if (this.ignoreOriginalChangeEvent) { + // We don't want to rebuild everything when an item is added / droped + this.ignoreOriginalChangeEvent = false; + } else { + this.buildSelect(); + // opera has an issue where it needs a force redraw, otherwise + // the items won't appear until something else forces a redraw + if ($.browser && $.browser.opera) { this.$list.hide().show(); } + } + }, + + /** + * Build the DOM for the new select + */ + buildSelect: function() { + var self = this; + + this.buildingSelect = true; + + // add a first option to be the home option / default selectLabel + this.$select.empty().prepend($('').text(this.$original.attr('title') || this.options.title)); + this.$list.empty(); + + this.$original.children().each(function() { + if ($(this).is('option')) { + self.addSelectOption(self.$select, $(this)); + } else if ($(this).is('optgroup')) { + self.addSelectOptionGroup(self.$select, $(this)); + } + }); + + if (!this.options.debugMode) { this.$original.hide(); } + this.selectFirstItem(); + this.buildingSelect = false; + }, + + /** + * Append an option to the new select + * + * @param {jQuery} $parent Where to append the option + * @param {jQuery} $origOpt Option from the original select + */ + addSelectOption: function ($parent, $origOpt) { + var $bsmOpt = $('', { label: $group.attr('label')} ).appendTo($parent); + if ($group.is(':disabled')) { $G.attr('disabled', 'disabled'); } + $('option', $group).each(function() { self.addSelectOption($G, $(this)); }); + }, + + /** + * Select the first item of the new select + */ + selectFirstItem: function() { + $('option:eq(0)', this.$select).attr('selected', 'selected'); + }, + + /** + * Make an option disabled, indicating that it's already been selected + * because safari is the only browser that makes disabled items look 'disabled' + * we apply a class that reproduces the disabled look in other browsers + * + * @param {jQuery} $bsmOpt Option from the new select + */ + disableSelectOption: function($bsmOpt) { + $bsmOpt.addClass(this.options.optionDisabledClass) + .removeAttr('selected') + .attr('disabled', 'disabled') + .toggle(!this.options.hideWhenAdded); + if ($.browser && $.browser.msie && $.browser.version < 8) { this.$select.hide().show(); } // this forces IE to update display + }, + + /** + * Enable a select option + * + * @param {jQuery} $bsmOpt Option from the new select + */ + enableSelectOption: function($bsmOpt) { + $bsmOpt.removeClass(this.options.optionDisabledClass) + .removeAttr('disabled') + .toggle(!this.options.hideWhenAdded); + if ($.browser && $.browser.msie && $.browser.version < 8) { this.$select.hide().show(); } // this forces IE to update display + }, + + /** + * Append an item corresponding to the option to the list + * + * @param {jQuery} $bsmOpt Option from the new select + */ + addListItem: function($bsmOpt) { + var $item, + $origOpt = $bsmOpt.data('orig-option'), + o = this.options; + + if (!$origOpt) { return; } // this is the first item, selectLabel + + if (!this.buildingSelect) { + if ($origOpt.is(':selected')) { return; } // already have it + $origOpt.attr('selected', 'selected'); + } + + $item = $('
  • ', { 'class': o.listItemClass }) + .append($('', { 'class': o.listItemLabelClass, html: o.extractLabel($bsmOpt, o)})) + .append($('', { href: '#', 'class': o.removeClass, html: o.removeLabel })) + .data('bsm-option', $bsmOpt); + + this.disableSelectOption($bsmOpt.data('item', $item)); + + switch (o.addItemTarget) { + case 'bottom': + this.$list.append($item.hide()); + break; + case 'original': + var order = $origOpt.data('bsm-order'), inserted = false; + this.$list.children().each(function() { + if (order < $(this).data('bsm-option').data('orig-option').data('bsm-order')) { + $item.hide().insertBefore(this); + inserted = true; + return false; + } + }); + if (!inserted) { this.$list.append($item.hide()); } + break; + default: + this.$list.prepend($item.hide()); + } + + if (this.buildingSelect) { + $.bsmSelect.effects.show($item); + } else { + o.showEffect($item); + o.highlightEffect(this.$select, $item, o.highlightAddedLabel, this.options); + this.selectFirstItem(); + } + }, + + /** + * Remove an item from the list of selection + * + * @param {jQuey} $item A list item + */ + dropListItem: function($item) { + var $bsmOpt = $item.data('bsm-option'), o = this.options; + $bsmOpt.removeData('item').data('orig-option').removeAttr('selected'); + (this.buildingSelect ? $.bsmSelect.effects.remove : o.hideEffect)($item); + this.enableSelectOption($bsmOpt); + o.highlightEffect(this.$select, $item, o.highlightRemovedLabel, o); + this.triggerOriginalChange($bsmOpt.data('orig-option'), 'drop'); + }, + + /** + * Trigger a change event on the original select multiple + * so that other scripts can pick them up + * + * @param {jQuery} $origOpt The option from the original select + * @param {String} type Event type + */ + triggerOriginalChange: function($origOpt, type) { + this.ignoreOriginalChangeEvent = true; + this.$original.trigger('change', [{ + option: $origOpt, + value: $origOpt.val(), + item: $origOpt.data('bsm-option').data('item'), + type: type + }]); + } + }; + + $.fn.bsmSelect = function(customOptions) { + var options = $.extend({}, $.bsmSelect.conf, customOptions); + return this.each(function() { + var bsm = $(this).data("bsmSelect"); + if (!bsm) { + bsm = new BsmSelect($(this), options); + $(this).data("bsmSelect", bsm); + } + }); + }; + + $.bsmSelect = {}; + $.extend($.bsmSelect, { + effects: { + show: function($el) { $el.show(); }, + + remove: function($el) { $el.remove(); }, + + highlight: function ($select, $item, label, conf) { + var $highlight, + id = $select.attr('id') + conf.highlightClass; + $('#' + id).remove(); + $highlight = $('', { + 'class': conf.highlightClass, + id: id, + html: label + $item.children('.' + conf.listItemLabelClass).first().text() + }).hide(); + $select.after($highlight.fadeIn('fast').delay(50).fadeOut('slow', function() { $(this).remove(); })); + }, + + verticalListAdd: function ($el) { + $el.animate({ opacity: 'show', height: 'show' }, 100, function() { + $(this).animate({ height: '+=2px' }, 100, function() { + $(this).animate({ height: '-=2px' }, 100); + }); + }); + }, + + verticalListRemove: function($el) { + $el.animate({ opacity: 'hide', height: 'hide' }, 100, function() { + $(this).prev('li').animate({ height: '-=2px' }, 100, function() { + $(this).animate({ height: '+=2px' }, 100); + }); + $(this).remove(); + }); + } + }, + plugins: { + } + }); + + // Default configuration + $.bsmSelect.conf = { + listType: 'ol', // Ordered list 'ol', or unordered list 'ul' + + showEffect: $.bsmSelect.effects.show, + hideEffect: $.bsmSelect.effects.remove, + highlightEffect: $.noop, + + addItemTarget: 'bottom', // Where to place new selected items in list: top or bottom + hideWhenAdded: false, // Hide the option when added to the list? works only in FF + debugMode: false, // Debug mode keeps original select visible + + title: '---------', // Text used for the default select label + removeLabel: 'remove', // HTML used for the 'remove' link + highlightAddedLabel: 'Added: ', // Text that precedes highlight of added item + highlightRemovedLabel: 'Removed: ', // Text that precedes highlight of removed item + extractLabel: function($o) { return $o.html(); }, + + plugins: [], // An array of plugin objects to enable + + containerClass: 'bsmContainer', // Class for container that wraps this widget + selectClass: 'bsmSelect', // Class for the newly created