From b23c03c190b5159688f5da097a9b5eb86e113059 Mon Sep 17 00:00:00 2001 From: Thomas Tanghus Date: Mon, 3 Dec 2012 18:56:15 +0100 Subject: [PATCH 001/114] Enhanced multiSelect jquery plugin. --- core/css/multiselect.css | 25 ++++++-- core/js/multiselect.js | 134 +++++++++++++++++++++++++++++---------- 2 files changed, 122 insertions(+), 37 deletions(-) diff --git a/core/css/multiselect.css b/core/css/multiselect.css index 99f0e03933..8639577f0f 100644 --- a/core/css/multiselect.css +++ b/core/css/multiselect.css @@ -5,8 +5,6 @@ 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; @@ -14,6 +12,16 @@ 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 +38,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..bec9b5856c 100644 --- a/core/js/multiselect.js +++ b/core/js/multiselect.js @@ -1,3 +1,13 @@ +/** + * @param 'createCallback' A function to be called when a new entry is created. Only argument to the function is the value of the 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){ @@ -5,16 +15,25 @@ var settings = { 'createCallback':false, 'createText':false, + 'singleSelect':false, 'title':this.attr('title'), 'checked':[], + 'labels':[], 'oncheck':false, 'onuncheck':false, 'minWidth': 'default;', }; $.extend(settings,options); $.each(this.children(),function(i,option){ - if($(option).attr('selected') && settings.checked.indexOf($(option).val())==-1){ + // 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+'
'); @@ -30,18 +49,31 @@ 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.checked.join(', ')); + 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(self.menuDirection === 'down') { + button.parent().children('ul').slideUp(400,function(){ + button.parent().children('ul').remove(); + button.removeClass('active'); + }); + } else { + button.parent().children('ul').fadeOut(400,function(){ + button.parent().children('ul').remove(); + button.removeClass('active').removeClass('up'); + }); + } return; } var lists=$('ul.multiselectoptions'); @@ -54,15 +86,19 @@ event.stopPropagation(); var options=$(this).parent().next().children(); var list=$('