open-dsi
/
nextcloud-server
mirror of https://github.com/nextcloud/server
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'fix_multiSelect' of github.com:owncloud/core into enhanced_multiSelect

Browse Source
remotes/origin/stable5
Thomas Tanghus 12 years ago
parent 5fb4ed2d92 6d643f9e74
commit 73b186cc60
2 changed files with 164 additions and 55 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 27
      core/css/multiselect.css
  2. 192
      core/js/multiselect.js

27
core/css/multiselect.css
Unescape View File

@ -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 {

192
core/js/multiselect.js
Unescape View File

@ -1,20 +1,42 @@
/**
* @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,
'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=$('<div class="multiselect button"><span>'+settings.title+'</span><span>▾</span></div>');
@ -24,24 +46,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');
});
} else {
button.parent().children('ul').fadeOut(400,function() {
button.parent().children('ul').remove();
button.removeClass('active').removeClass('up');
});
}
return;
}
var lists=$('ul.multiselectoptions');
@ -54,49 +88,67 @@
event.stopPropagation();
var options=$(this).parent().next().children();
var list=$('<ul class="multiselectoptions"/>').hide().appendTo($(this).parent());
function createItem(element,checked){
var inputType = settings.singleSelect ? 'radio' : 'checkbox';
function createItem(element, checked){
element=$(element);
var item=element.val();
var id='ms'+multiSelectId+'-option-'+item;
var input=$('<input type="checkbox"/>');
var input=$('<input type="' + inputType + '"/>');
input.attr('id',id);
if(settings.singleSelect) {
input.attr('name', 'ms'+multiSelectId+'-option');
}
var label=$('<label/>');
label.attr('for',id);
label.text(item);
if(settings.checked.indexOf(item)!=-1 || checked){
input.attr('checked',true);
label.text(element.text() || item);
if(settings.checked.indexOf(item)!=-1 || checked) {
input.attr('checked', true);
}
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(){
var groupname=$(this).next().text();
if($(this).is(':checked')){
var value = $(this).attr('id').substring(String('ms'+multiSelectId+'-option').length+1);
var label = $(this).next().text().trim();
if($(this).is(':checked')) {
if(settings.singleSelect) {
settings.checked = [];
settings.labels = [];
$.each(self.find('option'), function() {
$(this).removeAttr('selected');
});
}
element.attr('selected','selected');
if(settings.oncheck){
if(settings.oncheck(groupname)===false){
if(typeof settings.oncheck === 'function') {
if(settings.oncheck(value)===false) {
$(this).attr('checked', false);
return;
}
}
settings.checked.push(groupname);
}else{
var index=settings.checked.indexOf(groupname);
settings.checked.push(value);
settings.labels.push(label);
} else {
var index=settings.checked.indexOf(value);
element.attr('selected',null);
if(settings.onuncheck){
if(settings.onuncheck(groupname)===false){
if(typeof settings.onuncheck === 'function') {
if(settings.onuncheck(value)===false) {
$(this).attr('checked',true);
return;
}
}
settings.checked.splice(index,1);
settings.labels.splice(index,1);
}
var oldWidth=button.width();
if(settings.checked.length>0){
button.children('span').first().text(settings.checked.join(', '));
}else{
button.children('span').first().text(settings.title);
}
button.children('span').first().text(settings.labels.length > 0
? settings.labels.join(', ')
: settings.title);
var newOuterWidth=Math.max((button.outerWidth()-2),settings.minOuterWidth)+'px';
var newWidth=Math.max(button.width(),settings.minWidth);
var pos=button.position();
@ -123,7 +175,7 @@
var input=$('<input class="new">');
li.append(input);
input.focus();
input.css('width',button.width());
input.css('width',button.innerWidth());
button.parent().data('preventHide',true);
input.keypress(function(event) {
if(event.keyCode == 13) {
@ -132,7 +184,7 @@
var value = $(this).val();
var exists = false;
$.each(options,function(index, item) {
if ($(item).val() == value) {
if ($(item).val() == value || $(item).text() == value) {
exists = true;
return false;
}
@ -141,22 +193,39 @@
return false;
}
var li=$(this).parent();
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');
});
}
$(this).remove();
li.text('+ '+settings.createText);
li.before(createItem(this));
var select=button.parent().next();
var option=$('<option selected="selected"/>');
option.attr('value',value);
option.text($(this).val());
option.text($(this).val()).val(val).attr('selected', 'selected');
select.append(option);
li.prev().children('input').trigger('click');
li.prev().children('input').prop('checked', true).trigger('change');
button.parent().data('preventHide',false);
if(settings.createCallback){
settings.createCallback($(this).val());
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());
}
}
});
input.blur(function(){
input.blur(function() {
event.preventDefault();
event.stopPropagation();
$(this).remove();
@ -169,20 +238,41 @@
list.append(li);
}
var pos=button.position();
list.css('top',pos.top+button.outerHeight()-5);
list.css('left',pos.left+3);
list.css('width',(button.outerWidth()-2)+'px');
list.slideDown();
list.click(function(event){
if($(document).height() > button.offset().top+button.outerHeight() + list.children().length * button.height()) {
list.css('top',pos.top+button.outerHeight()-5);
list.css('left',pos.left+3);
list.css('width',(button.outerWidth()-2)+'px');
list.addClass('down');
button.addClass('down');
list.slideDown();
} else {
list.css('top', pos.top - list.height());
list.css('left', pos.left+3);
list.css('width',(button.outerWidth()-2)+'px');
list.detach().insertBefore($(this));
list.addClass('up');
button.addClass('up');
list.fadeIn();
self.menuDirection = 'up';
}
list.click(function(event) {
event.stopPropagation();
});
});
$(window).click(function(){
if(!button.parent().data('preventHide')){
button.parent().children('ul').slideUp(400,function(){
button.parent().children('ul').remove();
button.removeClass('active');
});
$(window).click(function() {
if(!button.parent().data('preventHide')) {
// How can I save the effect in a var?
if(self.menuDirection === 'down') {
button.parent().children('ul').slideUp(400,function() {
button.parent().children('ul').remove();
button.removeClass('active').removeClass('down');
});
} else {
button.parent().children('ul').fadeOut(400,function() {
button.parent().children('ul').remove();
button.removeClass('active').removeClass('up');
});
}
}
});

Write Preview
Loading…
Cancel
Save