nextcloud/core/js/multiselect.js

336 lines
11 KiB
JavaScript
Raw Normal View History

2012-12-03 21:56:15 +04:00
/**
2014-03-01 05:46:27 +04:00
* @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.
2012-12-03 21:56:15 +04:00
* @param 'createText' The placeholder text for the create action.
* @param 'title' The title to show if no options are selected.
2014-03-01 05:46:27 +04:00
* @param 'checked' An array containing values for options that should be
* checked. Any options which are already selected will be added to this array.
2012-12-03 21:56:15 +04:00
* @param 'labels' The corresponding labels to show for the checked items.
2014-03-01 05:46:27 +04:00
* @param 'oncheck' Callback function which will be called when a
* checkbox/radiobutton is selected. If the function returns false the input will be unchecked.
2012-12-03 21:56:15 +04:00
* @param 'onuncheck' @see 'oncheck'.
2014-03-01 05:46:27 +04:00
* @param 'singleSelect' If true radiobuttons will be used instead of
* checkboxes.
2012-12-03 21:56:15 +04:00
*/
2011-08-10 22:51:35 +04:00
(function( $ ){
var multiSelectId=-1;
$.fn.multiSelect=function(options) {
2011-08-10 22:51:35 +04:00
multiSelectId++;
var settings = {
'createCallback':false,
'createText':false,
2012-12-03 21:56:15 +04:00
'singleSelect':false,
2012-12-21 09:18:10 +04:00
'selectedFirst':false,
'sort':true,
2011-08-10 22:51:35 +04:00
'title':this.attr('title'),
'checked':[],
2012-12-03 21:56:15 +04:00
'labels':[],
2011-08-10 22:51:35 +04:00
'oncheck':false,
'onuncheck':false,
2013-07-31 23:21:02 +04:00
'minWidth': 'default;'
2011-08-10 22:51:35 +04:00
};
var slideDuration = 200;
$(this).attr('data-msid', multiSelectId);
$.extend(settings,options);
$.each(this.children(),function(i,option) {
2012-12-03 21:56:15 +04:00
// If the option is selected, but not in the checked array, add it.
2014-03-01 05:46:27 +04:00
if (
$(option).attr('selected') &&
settings.checked.indexOf($(option).val()) === -1
) {
2012-02-23 00:38:15 +04:00
settings.checked.push($(option).val());
2012-12-03 21:56:15 +04:00
settings.labels.push($(option).text().trim());
}
// If the option is in the checked array but not selected, select it.
2014-03-01 05:46:27 +04:00
else if (
settings.checked.indexOf($(option).val()) !== -1 &&
!$(option).attr('selected')
) {
2012-12-03 21:56:15 +04:00
$(option).attr('selected', 'selected');
settings.labels.push($(option).text().trim());
2012-02-23 00:38:15 +04:00
}
});
2011-08-10 22:51:35 +04:00
var button=$('<div class="multiselect button"><span>'+settings.title+'</span><span>▾</span></div>');
var span=$('<span/>');
span.append(button);
button.data('id',multiSelectId);
button.selectedItems=[];
this.hide();
this.before(span);
if(settings.minWidth=='default') {
settings.minWidth=button.width();
}
2011-08-10 22:51:35 +04:00
button.css('min-width',settings.minWidth);
settings.minOuterWidth=button.outerWidth()-2;
button.data('settings',settings);
2012-12-03 21:56:15 +04:00
if(!settings.singleSelect && settings.checked.length>0) {
2012-12-03 21:56:15 +04:00
button.children('span').first().text(settings.labels.join(', '));
} else if(settings.singleSelect) {
button.children('span').first().text(this.find(':selected').text());
}
2012-12-03 21:56:15 +04:00
var self = this;
self.menuDirection = 'down';
2011-08-10 22:51:35 +04:00
button.click(function(event){
2011-08-10 22:51:35 +04:00
var button=$(this);
if(button.parent().children('ul').length>0) {
2012-12-03 21:56:15 +04:00
if(self.menuDirection === 'down') {
button.parent().children('ul').slideUp(slideDuration,function() {
2012-12-03 21:56:15 +04:00
button.parent().children('ul').remove();
button.removeClass('active down');
2012-12-03 21:56:15 +04:00
});
} else {
button.parent().children('ul').fadeOut(slideDuration,function() {
2012-12-03 21:56:15 +04:00
button.parent().children('ul').remove();
button.removeClass('active up');
2012-12-03 21:56:15 +04:00
});
}
2011-08-10 22:51:35 +04:00
return;
}
var lists=$('ul.multiselectoptions');
lists.slideUp(slideDuration,function(){
2011-08-10 22:51:35 +04:00
lists.remove();
$('div.multiselect').removeClass('active');
button.addClass('active');
});
button.addClass('active');
event.stopPropagation();
2012-02-23 00:38:15 +04:00
var options=$(this).parent().next().children();
2011-08-10 22:51:35 +04:00
var list=$('<ul class="multiselectoptions"/>').hide().appendTo($(this).parent());
2012-12-03 21:56:15 +04:00
var inputType = settings.singleSelect ? 'radio' : 'checkbox';
function createItem(element, checked){
2012-02-23 00:38:15 +04:00
element=$(element);
var item=element.val();
2011-08-10 22:51:35 +04:00
var id='ms'+multiSelectId+'-option-'+item;
2012-12-03 21:56:15 +04:00
var input=$('<input type="' + inputType + '"/>');
2012-06-09 17:07:09 +04:00
input.attr('id',id);
2012-12-03 21:56:15 +04:00
if(settings.singleSelect) {
input.attr('name', 'ms'+multiSelectId+'-option');
}
2012-06-09 17:07:09 +04:00
var label=$('<label/>');
label.attr('for', id);
2012-12-03 21:56:15 +04:00
label.text(element.text() || item);
label.attr('title', element.text() || item);
2014-03-01 05:46:27 +04:00
if(settings.checked.indexOf(item) !== -1 || checked) {
input.attr('checked', true);
2011-08-10 22:51:35 +04:00
}
if(checked){
if(settings.singleSelect) {
settings.checked = [item];
settings.labels = [item];
} else {
settings.checked.push(item);
settings.labels.push(item);
}
2011-08-10 22:51:35 +04:00
}
input.change(function(){
2012-12-03 21:56:15 +04:00
var value = $(this).attr('id').substring(String('ms'+multiSelectId+'-option').length+1);
var label = $(this).next().text().trim();
if($(this).is(':checked')) {
2012-12-03 21:56:15 +04:00
if(settings.singleSelect) {
settings.checked = [];
settings.labels = [];
$.each(self.find('option'), function() {
$(this).removeAttr('selected');
});
}
2012-02-23 00:38:15 +04:00
element.attr('selected','selected');
if(typeof settings.oncheck === 'function') {
if(settings.oncheck(value)===false) {
$(this).attr('checked', false);
2011-08-10 22:51:35 +04:00
return;
}
}
2012-12-03 21:56:15 +04:00
settings.checked.push(value);
settings.labels.push(label);
2012-12-21 09:18:10 +04:00
$(this).parent().addClass('checked');
} else {
2012-12-03 21:56:15 +04:00
var index=settings.checked.indexOf(value);
2012-02-23 00:38:15 +04:00
element.attr('selected',null);
if(typeof settings.onuncheck === 'function') {
if(settings.onuncheck(value)===false) {
$(this).attr('checked',true);
2011-08-10 22:51:35 +04:00
return;
}
}
2012-12-21 09:18:10 +04:00
$(this).parent().removeClass('checked');
settings.checked.splice(index,1);
2012-12-03 21:56:15 +04:00
settings.labels.splice(index,1);
2011-08-10 22:51:35 +04:00
}
var oldWidth=button.width();
2014-03-01 05:46:27 +04:00
button.children('span').first().text(settings.labels.length > 0
2012-12-03 21:56:15 +04:00
? settings.labels.join(', ')
: settings.title);
2014-03-07 12:46:08 +04:00
var newOuterWidth = Math.max(
(button.outerWidth() - 2),
2014-03-01 05:46:27 +04:00
settings.minOuterWidth
2014-03-07 12:46:08 +04:00
) + 'px';
2011-08-10 22:51:35 +04:00
var newWidth=Math.max(button.width(),settings.minWidth);
var pos=button.position();
2011-08-10 22:51:35 +04:00
button.css('width',oldWidth);
button.animate({'width':newWidth},undefined,undefined,function(){
button.css('width','');
});
2014-05-19 23:27:09 +04:00
list.animate({'width':newOuterWidth,'left':pos.left});
self.change();
2011-08-10 22:51:35 +04:00
});
var li=$('<li></li>');
li.append(input).append(label);
2012-12-21 09:18:10 +04:00
if(input.is(':checked')) {
li.addClass('checked');
}
2011-08-10 22:51:35 +04:00
return li;
}
$.each(options,function(index,item){
list.append(createItem(item));
});
button.parent().data('preventHide',false);
if(settings.createText){
var li=$('<li class="creator" title="' + settings.createText +
'">+ ' + settings.createText + '</li>');
2011-08-10 22:51:35 +04:00
li.click(function(event){
li.empty();
var input=$('<input type="text" class="new">');
2011-08-10 22:51:35 +04:00
li.append(input);
input.focus();
2012-12-03 21:56:15 +04:00
input.css('width',button.innerWidth());
2011-08-10 22:51:35 +04:00
button.parent().data('preventHide',true);
input.keypress(function(event) {
2014-03-01 05:46:27 +04:00
if(event.keyCode === 13) {
2011-08-10 22:51:35 +04:00
event.preventDefault();
event.stopPropagation();
var value = $(this).val();
var exists = false;
$.each(options,function(index, item) {
2012-12-03 21:56:15 +04:00
if ($(item).val() == value || $(item).text() == value) {
exists = true;
return false;
}
});
if (exists) {
return false;
}
var li=$(this).parent();
2013-07-31 23:21:02 +04:00
var val = $(this).val();
var select=button.parent().next();
if(typeof settings.createCallback === 'function') {
var response = settings.createCallback(select, val);
if(response === false) {
return false;
} else if(typeof response !== 'undefined') {
val = response;
}
}
if(settings.singleSelect) {
$.each(select.find('option:selected'), function() {
$(this).removeAttr('selected');
});
}
2011-08-10 22:51:35 +04:00
$(this).remove();
li.text('+ '+settings.createText);
li.before(createItem(this));
2012-06-09 17:07:09 +04:00
var option=$('<option selected="selected"/>');
option.text($(this).val()).val(val).attr('selected', 'selected');
select.append(option);
li.prev().children('input').prop('checked', true).trigger('change');
2011-08-10 22:51:35 +04:00
button.parent().data('preventHide',false);
2014-03-01 05:46:27 +04:00
button.children('span').first().text(settings.labels.length > 0
? settings.labels.join(', ')
: settings.title);
if(self.menuDirection === 'up') {
var list = li.parent();
list.css('top', list.position().top-li.outerHeight());
2011-08-10 22:51:35 +04:00
}
}
});
input.blur(function() {
2011-08-10 22:51:35 +04:00
event.preventDefault();
event.stopPropagation();
$(this).remove();
li.text('+ '+settings.createText);
setTimeout(function(){
button.parent().data('preventHide',false);
},100);
});
});
list.append(li);
}
2012-12-21 09:18:10 +04:00
var doSort = function(list, selector) {
var rows = list.find('li'+selector).get();
if(settings.sort) {
rows.sort(function(a, b) {
return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
});
}
$.each(rows, function(index, row) {
list.append(row);
});
};
if(settings.sort && settings.selectedFirst) {
doSort(list, '.checked');
doSort(list, ':not(.checked)');
} else if(settings.sort && !settings.selectedFirst) {
doSort(list, '');
}
list.append(list.find('li.creator'));
2011-08-10 22:51:35 +04:00
var pos=button.position();
2014-03-03 20:11:23 +04:00
if(($(document).height() > (button.offset().top + button.outerHeight() + list.children().length * button.height()) &&
2014-03-01 05:46:27 +04:00
$(document).height() - button.offset().top > (button.offset().top+button.outerHeight() + list.children().length * button.height())) ||
2014-03-07 12:46:08 +04:00
$(document).height() / 2 > button.offset().top
) {
2012-12-21 09:18:10 +04:00
list.css({
top:pos.top+button.outerHeight()-5,
2014-05-19 23:27:09 +04:00
left:pos.left,
2012-12-21 09:18:10 +04:00
width:(button.outerWidth()-2)+'px',
'max-height':($(document).height()-(button.offset().top+button.outerHeight()+10))+'px'
});
2012-12-03 21:56:15 +04:00
list.addClass('down');
button.addClass('down');
list.slideDown(slideDuration);
2012-12-03 21:56:15 +04:00
} else {
2012-12-21 09:18:10 +04:00
list.css('max-height', $(document).height()-($(document).height()-(pos.top)+50)+'px');
list.css({
top:pos.top - list.height(),
2014-05-19 23:27:09 +04:00
left:pos.left,
2012-12-21 09:18:10 +04:00
width:(button.outerWidth()-2)+'px'
2012-12-21 09:18:10 +04:00
});
2012-12-03 21:56:15 +04:00
list.detach().insertBefore($(this));
list.addClass('up');
button.addClass('up');
list.fadeIn();
self.menuDirection = 'up';
}
list.click(function(event) {
2011-08-10 22:51:35 +04:00
event.stopPropagation();
});
});
$(window).click(function() {
if(!button.parent().data('preventHide')) {
2012-12-03 21:56:15 +04:00
// How can I save the effect in a var?
if(self.menuDirection === 'down') {
button.parent().children('ul').slideUp(slideDuration,function() {
2012-12-03 21:56:15 +04:00
button.parent().children('ul').remove();
button.removeClass('active down');
2012-12-03 21:56:15 +04:00
});
} else {
button.parent().children('ul').fadeOut(slideDuration,function() {
2012-12-03 21:56:15 +04:00
button.parent().children('ul').remove();
button.removeClass('active up');
2012-12-03 21:56:15 +04:00
});
}
2011-08-10 22:51:35 +04:00
}
});
2011-08-10 22:51:35 +04:00
return span;
};
2013-04-23 17:34:16 +04:00
})( jQuery );