diff --git a/core/css/multiselect.css b/core/css/multiselect.css index 99f0e03933..31c8ef88eb 100644 --- a/core/css/multiselect.css +++ b/core/css/multiselect.css @@ -5,15 +5,25 @@ ul.multiselectoptions { background-color:#fff; border:1px solid #ddd; - border-bottom-left-radius:.5em; - border-bottom-right-radius:.5em; border-top:none; box-shadow:0 1px 1px #ddd; padding-top:.5em; position:absolute; + max-height: 20em; + overflow-y: auto; z-index:49; } + ul.multiselectoptions.down { + border-bottom-left-radius:.5em; + border-bottom-right-radius:.5em; + } + + ul.multiselectoptions.up { + border-top-left-radius:.5em; + border-top-right-radius:.5em; + } + ul.multiselectoptions>li { overflow:hidden; white-space:nowrap; @@ -30,11 +40,20 @@ div.multiselect.active { background-color:#fff; + position:relative; + z-index:50; + } + + div.multiselect.up { + border-top:0 none; + border-top-left-radius:0; + border-top-right-radius:0; + } + + div.multiselect.down { border-bottom:none; border-bottom-left-radius:0; border-bottom-right-radius:0; - position:relative; - z-index:50; } div.multiselect>span:first-child { diff --git a/core/js/multiselect.js b/core/js/multiselect.js index c4fd74b047..623c6e0f7e 100644 --- a/core/js/multiselect.js +++ b/core/js/multiselect.js @@ -1,20 +1,44 @@ +/** + * @param 'createCallback' A function to be called when a new entry is created. Two arguments are supplied to this function: + * The select element used and the value of the option. If the function returns false addition will be cancelled. If it returns + * anything else it will be used as the value of the newly added option. + * @param 'createText' The placeholder text for the create action. + * @param 'title' The title to show if no options are selected. + * @param 'checked' An array containing values for options that should be checked. Any options which are already selected will be added to this array. + * @param 'labels' The corresponding labels to show for the checked items. + * @param 'oncheck' Callback function which will be called when a checkbox/radiobutton is selected. If the function returns false the input will be unchecked. + * @param 'onuncheck' @see 'oncheck'. + * @param 'singleSelect' If true radiobuttons will be used instead of checkboxes. + */ (function( $ ){ var multiSelectId=-1; - $.fn.multiSelect=function(options){ + $.fn.multiSelect=function(options) { multiSelectId++; var settings = { 'createCallback':false, 'createText':false, + 'singleSelect':false, + 'selectedFirst':false, + 'sort':true, 'title':this.attr('title'), 'checked':[], + 'labels':[], 'oncheck':false, 'onuncheck':false, 'minWidth': 'default;', }; + $(this).attr('data-msid', multiSelectId); $.extend(settings,options); - $.each(this.children(),function(i,option){ - if($(option).attr('selected') && settings.checked.indexOf($(option).val())==-1){ + $.each(this.children(),function(i,option) { + // If the option is selected, but not in the checked array, add it. + if($(option).attr('selected') && settings.checked.indexOf($(option).val()) === -1) { settings.checked.push($(option).val()); + settings.labels.push($(option).text().trim()); + } + // If the option is in the checked array but not selected, select it. + else if(settings.checked.indexOf($(option).val()) !== -1 && !$(option).attr('selected')) { + $(option).attr('selected', 'selected'); + settings.labels.push($(option).text().trim()); } }); var button=$('
'+settings.title+'
'); @@ -24,24 +48,36 @@ button.selectedItems=[]; this.hide(); this.before(span); - if(settings.minWidth=='default'){ + if(settings.minWidth=='default') { settings.minWidth=button.width(); } button.css('min-width',settings.minWidth); settings.minOuterWidth=button.outerWidth()-2; button.data('settings',settings); - if(settings.checked.length>0){ - button.children('span').first().text(settings.checked.join(', ')); + + if(!settings.singleSelect && settings.checked.length>0) { + button.children('span').first().text(settings.labels.join(', ')); + } else if(settings.singleSelect) { + button.children('span').first().text(this.find(':selected').text()); } + var self = this; + self.menuDirection = 'down'; button.click(function(event){ var button=$(this); - if(button.parent().children('ul').length>0){ - button.parent().children('ul').slideUp(400,function(){ - button.parent().children('ul').remove(); - button.removeClass('active'); - }); + if(button.parent().children('ul').length>0) { + if(self.menuDirection === 'down') { + button.parent().children('ul').slideUp(400,function() { + button.parent().children('ul').remove(); + button.removeClass('active down'); + }); + } else { + button.parent().children('ul').fadeOut(400,function() { + button.parent().children('ul').remove(); + button.removeClass('active up'); + }); + } return; } var lists=$('ul.multiselectoptions'); @@ -54,49 +90,69 @@ event.stopPropagation(); var options=$(this).parent().next().children(); var list=$('