forked from extern/egroupware
Respect rows attribute to restrict how big the taglist is allowed to get
This commit is contained in:
Nathan Gray
parent
e902c32d9f
commit
b9fc5e26df
@ -103,7 +103,12 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
|
||||
default: true,
|
||||
description: "True, false or 'toggle'"
|
||||
},
|
||||
"rows": { ignore: true},
|
||||
"rows": {
|
||||
"name": "Rows",
|
||||
"type": "integer",
|
||||
"default": et2_no_init,
|
||||
"description": "Number of rows to display"
|
||||
},
|
||||
"tags": { ignore: true},
|
||||
useCommaKey: {
|
||||
name: "comma will start validation",
|
||||
@ -120,9 +125,12 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
|
||||
*
|
||||
* @memberOf et2_selectbox
|
||||
*/
|
||||
init: function() {
|
||||
init: function(_parent, _attrs) {
|
||||
this._super.apply(this, arguments);
|
||||
|
||||
// Parent sets multiple based on rows, we just re-set it
|
||||
this.options.multiple = _attrs.multiple;
|
||||
|
||||
// jQuery wrapped DOM node
|
||||
this.div = jQuery("<div></div>").addClass('et2_taglist');
|
||||
|
||||
@ -132,6 +140,7 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
|
||||
this._set_multiple(!this._multiple);
|
||||
},this))
|
||||
.appendTo(this.div);
|
||||
this._multiple = false;
|
||||
|
||||
// magicSuggest object
|
||||
this.taglist = null;
|
||||
@ -247,18 +256,26 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
|
||||
});
|
||||
}
|
||||
|
||||
// Display / hide a loading icon while fetching
|
||||
var widget = this;
|
||||
this.$taglist
|
||||
// Display / hide a loading icon while fetching
|
||||
.on("beforeload", function() {this.container.prepend('<div class="ui-icon loading"/>');})
|
||||
.on("load", function() {$j('.loading',this.container).remove();})
|
||||
// Keep focus when selecting from the list
|
||||
.on("selectionchange", function() { $j('input',this.container).focus();})
|
||||
.on("selectionchange", function() {
|
||||
$j('input',this.container).focus();
|
||||
widget.resize();
|
||||
})
|
||||
// Bind keyup so we can start ajax search when we like
|
||||
.on('keyup.start_search', jQuery.proxy(this._keyup, this))
|
||||
.on('blur', jQuery.proxy(this.resize, this))
|
||||
.on('blur', jQuery.proxy(function() {
|
||||
this.div.removeClass('ui-state-active');
|
||||
this.resize();
|
||||
}, this))
|
||||
// Hide tooltip when you're editing, it can get annoying otherwise
|
||||
.on('focus', function() {
|
||||
$j('.egw_tooltip').hide();
|
||||
widget.div.addClass('ui-state-active');
|
||||
})
|
||||
// Position absolute to break out of containers
|
||||
.on('expand', jQuery.proxy(function(c) {
|
||||
@ -268,14 +285,25 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
|
||||
// Keep any additional classes
|
||||
.addClass(this.div.attr('class'))
|
||||
|
||||
.css('position','absolute')
|
||||
.css({
|
||||
'position': 'absolute',
|
||||
'width': 'auto'
|
||||
})
|
||||
.appendTo('body')
|
||||
.position({my: 'left top', at: 'left bottom', of: this.taglist.container})
|
||||
.position({my: 'left top', at: 'left bottom', of: this.taglist.container});
|
||||
|
||||
this.taglist.combobox
|
||||
.width(this.taglist.container.innerWidth())
|
||||
.appendTo(wrapper)
|
||||
.css('background', background);
|
||||
|
||||
// Make sure it doesn't go out of the window
|
||||
var bottom = (wrapper.offset().top + this.taglist.combobox.outerHeight(true));
|
||||
if(bottom > $j(window).height())
|
||||
{
|
||||
this.taglist.combobox.height(this.taglist.combobox.height() - (bottom - $j(window).height()) - 5);
|
||||
}
|
||||
|
||||
// Close dropdown if click elsewhere, but wait until after or it
|
||||
// will close immediately
|
||||
window.setTimeout(function() {
|
||||
@ -320,7 +348,7 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
|
||||
|
||||
// Do size limit checks
|
||||
this.resize();
|
||||
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
@ -484,6 +512,39 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
|
||||
disabled ? this.taglist.disable() : this.taglist.enable();
|
||||
},
|
||||
|
||||
/**
|
||||
* Normally the widget will display 1 row (multiple off) or expand as needed
|
||||
* based on selected entries. Setting row will limit the max height.
|
||||
* @param {number} _rows
|
||||
*/
|
||||
set_rows: function(_rows)
|
||||
{
|
||||
_rows = parseInt(_rows);
|
||||
var css = {
|
||||
'max-height': '',
|
||||
'height': 'auto'
|
||||
}
|
||||
if(_rows)
|
||||
{
|
||||
var max = (25 * _rows) + _rows;
|
||||
css['max-height'] = max+'px';
|
||||
if(this._multiple)
|
||||
{
|
||||
css.height = max+'px';
|
||||
}
|
||||
this.div.addClass('et2_taglist_small');
|
||||
}
|
||||
this.div.css(css);
|
||||
if(this.options.rows != _rows)
|
||||
{
|
||||
if(this.taglist !== null)
|
||||
{
|
||||
this.resize();
|
||||
}
|
||||
this.options.rows = _rows;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Set whether the widget accepts only 1 value, many, or allows the user
|
||||
* to toggle between the two.
|
||||
@ -494,6 +555,7 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
|
||||
if(multiple != this.options.multiple)
|
||||
{
|
||||
this.options.multiple = multiple;
|
||||
this._multiple = multiple === true ? true : false;
|
||||
if(this.taglist !== null)
|
||||
{
|
||||
this._set_multiple(multiple);
|
||||
@ -513,6 +575,7 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
|
||||
}
|
||||
|
||||
// This changes sizes, so
|
||||
this.set_rows(this.options.rows);
|
||||
this.resize();
|
||||
},
|
||||
|
||||
@ -532,7 +595,7 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
|
||||
this.div.attr('data-content','');
|
||||
}
|
||||
|
||||
this.div.css('height','')
|
||||
this.div
|
||||
// Listen to hover on size restricted taglists
|
||||
.on('mouseenter.small_size', jQuery.proxy(function() {
|
||||
this.div.addClass('ui-state-hover');
|
||||
@ -554,6 +617,7 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
|
||||
this._hide_timeout = window.setTimeout(
|
||||
jQuery.proxy(function() {
|
||||
this.div.removeClass('ui-state-hover');
|
||||
this.taglist.container[0].scrollIntoView();
|
||||
// Re-enable tooltip
|
||||
this.set_statustext(this.options.statustext);
|
||||
this._hide_timeout = null;
|
||||
@ -562,8 +626,8 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
|
||||
);
|
||||
this.$taglist
|
||||
.on('blur.small_size', jQuery.proxy(function() {
|
||||
this.div.removeClass('ui-state-active');
|
||||
this.div.trigger('mouseleave');
|
||||
this.taglist.container[0].scrollIntoView();
|
||||
},this))
|
||||
.on('focus.small_size', jQuery.proxy(function() {
|
||||
this.div.addClass('ui-state-active');
|
||||
@ -573,6 +637,7 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
|
||||
window.clearTimeout(this._hide_timeout);
|
||||
}
|
||||
},this))
|
||||
this.taglist.container[0].scrollIntoView();
|
||||
},
|
||||
|
||||
/**
|
||||
@ -654,7 +719,7 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend([et2_IR
|
||||
resize: function() {
|
||||
|
||||
this.div.off('.small_size');
|
||||
|
||||
|
||||
this.div.removeClass('et2_taglist_small');
|
||||
|
||||
// How much space is needed for first one?
|
||||
|
||||
@ -1000,7 +1000,7 @@ ul.et2_link_string {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* min-height to fix calculations done while hidden */
|
||||
.et2_taglist > div:first-child {
|
||||
.et2_taglist, .et2_taglist > div:first-child {
|
||||
min-height: 23px;
|
||||
}
|
||||
/* Toggle single / multiple */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user