mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

multiSelect: Make sure last added entry is selected and some code cleanup.

This commit is contained in:
Thomas Tanghus 2012-12-04 16:03:02 +01:00
parent b62542f74c
commit fefb6aca1a
1 changed files with 44 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
core/js/multiselect.js
View File

@ -10,7 +10,7 @@
*/ */
(function( $ ){ (function( $ ){
var multiSelectId=-1; var multiSelectId=-1;
$.fn.multiSelect=function(options){ $.fn.multiSelect=function(options) {
multiSelectId++; multiSelectId++;
var settings = { var settings = {
'createCallback':false, 'createCallback':false,
@ -24,14 +24,14 @@
'minWidth': 'default;', 'minWidth': 'default;',
}; };
$.extend(settings,options); $.extend(settings,options);
$.each(this.children(),function(i,option){ $.each(this.children(),function(i,option) {
// If the option is selected, but not in the checked array, add it. // If the option is selected, but not in the checked array, add it.
if($(option).attr('selected') && settings.checked.indexOf($(option).val()) == -1){ if($(option).attr('selected') && settings.checked.indexOf($(option).val()) === -1) {
settings.checked.push($(option).val()); settings.checked.push($(option).val());
settings.labels.push($(option).text().trim()); settings.labels.push($(option).text().trim());
} }
// If the option is in the checked array but not selected, select it. // If the option is in the checked array but not selected, select it.
else if(settings.checked.indexOf($(option).val()) !== -1 && !$(option).attr('selected')){ else if(settings.checked.indexOf($(option).val()) !== -1 && !$(option).attr('selected')) {
$(option).attr('selected', 'selected'); $(option).attr('selected', 'selected');
settings.labels.push($(option).text().trim()); settings.labels.push($(option).text().trim());
} }
@ -43,15 +43,14 @@
button.selectedItems=[]; button.selectedItems=[];
this.hide(); this.hide();
this.before(span); this.before(span);
if(settings.minWidth=='default'){ if(settings.minWidth=='default') {
settings.minWidth=button.width(); settings.minWidth=button.width();
} }
button.css('min-width',settings.minWidth); button.css('min-width',settings.minWidth);
settings.minOuterWidth=button.outerWidth()-2; settings.minOuterWidth=button.outerWidth()-2;
button.data('settings',settings); button.data('settings',settings);
if(!settings.singleSelect && settings.checked.length>0){ if(!settings.singleSelect && settings.checked.length>0) {
//button.children('span').first().text(settings.checked.join(', '));
button.children('span').first().text(settings.labels.join(', ')); button.children('span').first().text(settings.labels.join(', '));
} else if(settings.singleSelect) { } else if(settings.singleSelect) {
button.children('span').first().text(this.find(':selected').text()); button.children('span').first().text(this.find(':selected').text());
@ -62,14 +61,14 @@
button.click(function(event){ button.click(function(event){
var button=$(this); var button=$(this);
if(button.parent().children('ul').length>0){ if(button.parent().children('ul').length>0) {
if(self.menuDirection === 'down') { if(self.menuDirection === 'down') {
button.parent().children('ul').slideUp(400,function(){ button.parent().children('ul').slideUp(400,function() {
button.parent().children('ul').remove(); button.parent().children('ul').remove();
button.removeClass('active'); button.removeClass('active');
}); });
} else { } else {
button.parent().children('ul').fadeOut(400,function(){ button.parent().children('ul').fadeOut(400,function() {
button.parent().children('ul').remove(); button.parent().children('ul').remove();
button.removeClass('active').removeClass('up'); button.removeClass('active').removeClass('up');
}); });
@ -87,7 +86,7 @@
var options=$(this).parent().next().children(); var options=$(this).parent().next().children();
var list=$('<ul class="multiselectoptions"/>').hide().appendTo($(this).parent()); var list=$('<ul class="multiselectoptions"/>').hide().appendTo($(this).parent());
var inputType = settings.singleSelect ? 'radio' : 'checkbox'; var inputType = settings.singleSelect ? 'radio' : 'checkbox';
function createItem(element,checked){ function createItem(element, checked){
element=$(element); element=$(element);
var item=element.val(); var item=element.val();
var id='ms'+multiSelectId+'-option-'+item; var id='ms'+multiSelectId+'-option-'+item;
@ -99,16 +98,22 @@
var label=$('<label/>'); var label=$('<label/>');
label.attr('for',id); label.attr('for',id);
label.text(element.text() || item); label.text(element.text() || item);
if(settings.checked.indexOf(item)!=-1 || checked){ if(settings.checked.indexOf(item)!=-1 || checked) {
input.attr('checked',true); input.attr('checked', true);
} }
if(checked){ if(checked){
settings.checked.push(item); if(settings.singleSelect) {
settings.checked = [item];
settings.labels = [item];
} else {
settings.checked.push(item);
settings.labels.push(item);
}
} }
input.change(function(){ input.change(function(){
var value = $(this).attr('id').substring(String('ms'+multiSelectId+'-option').length+1); var value = $(this).attr('id').substring(String('ms'+multiSelectId+'-option').length+1);
var label = $(this).next().text().trim(); var label = $(this).next().text().trim();
if($(this).is(':checked')){ if($(this).is(':checked')) {
if(settings.singleSelect) { if(settings.singleSelect) {
settings.checked = []; settings.checked = [];
settings.labels = []; settings.labels = [];
@ -117,19 +122,19 @@
}); });
} }
element.attr('selected','selected'); element.attr('selected','selected');
if(typeof settings.oncheck === 'function'){ if(typeof settings.oncheck === 'function') {
if(settings.oncheck(value)===false){ if(settings.oncheck(value)===false) {
$(this).attr('checked', false); $(this).attr('checked', false);
return; return;
} }
} }
settings.checked.push(value); settings.checked.push(value);
settings.labels.push(label); settings.labels.push(label);
}else{ } else {
var index=settings.checked.indexOf(value); var index=settings.checked.indexOf(value);
element.attr('selected',null); element.attr('selected',null);
if(typeof settings.onuncheck === 'function'){ if(typeof settings.onuncheck === 'function') {
if(settings.onuncheck(value)===false){ if(settings.onuncheck(value)===false) {
$(this).attr('checked',true); $(this).attr('checked',true);
return; return;
} }
@ -184,26 +189,34 @@
if (exists) { if (exists) {
return false; return false;
} }
if(settings.singleSelect) {
$.each(select.find('option:selected'), function() {
$(this).removeAttr('selected');
});
}
var li=$(this).parent(); var li=$(this).parent();
$(this).remove(); $(this).remove();
li.text('+ '+settings.createText); li.text('+ '+settings.createText);
li.before(createItem(this, true)); li.before(createItem(this));
if(self.menuDirection === 'up') { if(self.menuDirection === 'up') {
var list = li.parent(); var list = li.parent();
list.css('top', list.position().top-li.outerHeight()); list.css('top', list.position().top-li.outerHeight());
} }
var select=button.parent().next(); var select=button.parent().next();
var option=$('<option selected="selected"/>'); var option=$('<option selected="selected"/>');
select.append(option); select.append(option);
option.text($(this).val()); option.text($(this).val()).val($(this).val()).attr('selected', 'selected');
li.prev().children('input').trigger('click'); li.prev().children('input').prop('checked', true).trigger('change');
button.parent().data('preventHide',false); button.parent().data('preventHide',false);
if(typeof settings.createCallback === 'function'){ button.children('span').first().text(settings.labels.length > 0
? settings.labels.join(', ')
: settings.title);
if(typeof settings.createCallback === 'function') {
settings.createCallback($(this).val()); settings.createCallback($(this).val());
} }
} }
}); });
input.blur(function(){ input.blur(function() {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
$(this).remove(); $(this).remove();
@ -233,20 +246,20 @@
list.fadeIn(); list.fadeIn();
self.menuDirection = 'up'; self.menuDirection = 'up';
} }
list.click(function(event){ list.click(function(event) {
event.stopPropagation(); event.stopPropagation();
}); });
}); });
$(window).click(function(){ $(window).click(function() {
if(!button.parent().data('preventHide')){ if(!button.parent().data('preventHide')) {
// How can I save the effect in a var? // How can I save the effect in a var?
if(self.menuDirection === 'down') { if(self.menuDirection === 'down') {
button.parent().children('ul').slideUp(400,function(){ button.parent().children('ul').slideUp(400,function() {
button.parent().children('ul').remove(); button.parent().children('ul').remove();
button.removeClass('active').removeClass('down'); button.removeClass('active').removeClass('down');
}); });
} else { } else {
button.parent().children('ul').fadeOut(400,function(){ button.parent().children('ul').fadeOut(400,function() {
button.parent().children('ul').remove(); button.parent().children('ul').remove();
button.removeClass('active').removeClass('up'); button.removeClass('active').removeClass('up');
}); });