extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-24 17:04:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

propagate width to magic suggest

Browse Source
This commit is contained in:
Ralf Becker 2013-11-17 20:36:35 +00:00
parent 670598a783
commit a4f5ea0b00
1 changed files with 46 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
etemplate/js/et2_widget_taglist.js
View File

@ -19,9 +19,9 @@
/** /**
* Tag list widget * Tag list widget
* *
* A cross between auto complete, selectbox and chosen multiselect * A cross between auto complete, selectbox and chosen multiselect
* *
* Uses MagicSuggest library * Uses MagicSuggest library
* @see http://nicolasbize.github.io/magicsuggest/ * @see http://nicolasbize.github.io/magicsuggest/
* @augments et2_selectbox * @augments et2_selectbox
@ -46,7 +46,7 @@ var et2_taglist = et2_selectbox.extend(
"value": { "value": {
"type": "any" "type": "any"
}, },
// These default parameters set it to read the addressbook via the link system // These default parameters set it to read the addressbook via the link system
"autocomplete_url": { "autocomplete_url": {
"name": "Autocomplete source", "name": "Autocomplete source",
@ -60,14 +60,14 @@ var et2_taglist = et2_selectbox.extend(
"default": {app:"addressbook"}, "default": {app:"addressbook"},
"description": "Extra parameters passed to autocomplete URL" "description": "Extra parameters passed to autocomplete URL"
}, },
allowFreeEntries: { allowFreeEntries: {
"name": "Allow free entries", "name": "Allow free entries",
"type": "boolean", "type": "boolean",
"default": true, "default": true,
"description": "Restricts or allows the user to type in arbitrary entries" "description": "Restricts or allows the user to type in arbitrary entries"
}, },
"onchange": { "onchange": {
"description": "Callback when tags are changed. Argument is the new selection.", "description": "Callback when tags are changed. Argument is the new selection.",
}, },
@ -100,26 +100,26 @@ var et2_taglist = et2_selectbox.extend(
"rows": { ignore: true}, "rows": { ignore: true},
"tags": { ignore: true} "tags": { ignore: true}
}, },
// Allows sub-widgets to override options to the library // Allows sub-widgets to override options to the library
lib_options: {}, lib_options: {},
/** /**
* Construtor * Construtor
* *
* @memberOf et2_selectbox * @memberOf et2_selectbox
*/ */
init: function() { init: function() {
this._super.apply(this, arguments); this._super.apply(this, arguments);
// jQuery wrapped DOM node // jQuery wrapped DOM node
this.div = jQuery("<div></div>"); this.div = jQuery("<div></div>");
// magicSuggest object // magicSuggest object
this.taglist = null; this.taglist = null;
this.setDOMNode(this.div[0]); this.setDOMNode(this.div[0]);
}, },
destroy: function() { destroy: function() {
if(this.div != null) if(this.div != null)
{ {
@ -128,17 +128,17 @@ var et2_taglist = et2_selectbox.extend(
this._super.apply(this, arguments); this._super.apply(this, arguments);
}, },
doLoadingFinished: function() { doLoadingFinished: function() {
this._super.apply(this, arguments); this._super.apply(this, arguments);
// Initialize magicSuggest here // Initialize magicSuggest here
if(this.taglist != null) return; if(this.taglist != null) return;
// MagicSuggest would replaces our div, so add a wrapper instead // MagicSuggest would replaces our div, so add a wrapper instead
this.taglist = $j('<div/>').appendTo(this.div); this.taglist = $j('<div/>').appendTo(this.div);
var options = jQuery.extend( { var options = jQuery.extend( {
data: this.options.select_options && !jQuery.isEmptyObject(this.options.select_options) ? this._options2data(this.options.select_options) : this.options.autocomplete_url, data: this.options.select_options && !jQuery.isEmptyObject(this.options.select_options) ? this._options2data(this.options.select_options) : this.options.autocomplete_url,
dataUrlParams: this.options.autocomplete_params, dataUrlParams: this.options.autocomplete_params,
@ -155,12 +155,14 @@ var et2_taglist = et2_selectbox.extend(
selectionRenderer: jQuery.proxy(this.options.tagRenderer || this.selectionRenderer,this), selectionRenderer: jQuery.proxy(this.options.tagRenderer || this.selectionRenderer,this),
renderer: jQuery.proxy(this.options.listRenderer || this.selectionRenderer,this), renderer: jQuery.proxy(this.options.listRenderer || this.selectionRenderer,this),
maxSelection: this.options.maxSelection, maxSelection: this.options.maxSelection,
maxSelectionRenderer: jQuery.proxy(function(v) { this.egw().lang('You can not choose more then %1 item(s)!', v); }, this),
width: this.options.width, // propagate width
highlight: false // otherwise renderer have to return strings highlight: false // otherwise renderer have to return strings
}, this.lib_options); }, this.lib_options);
this.taglist = this.taglist.magicSuggest(options); this.taglist = this.taglist.magicSuggest(options);
this.set_value(this.options.value); this.set_value(this.options.value);
// Display / hide a loading icon while fetching // Display / hide a loading icon while fetching
$j(this.taglist) $j(this.taglist)
.on("beforeload", function() {this.container.prepend('<div class="ui-icon loading"/>');}) .on("beforeload", function() {this.container.prepend('<div class="ui-icon loading"/>');})
@ -171,17 +173,17 @@ var et2_taglist = et2_selectbox.extend(
{ {
$j(this.taglist).on("selectionchange", jQuery.proxy(this.change,this)); $j(this.taglist).on("selectionchange", jQuery.proxy(this.change,this));
} }
// onClick - pass more than baseWidget, so unbind it to avoid double callback // onClick - pass more than baseWidget, so unbind it to avoid double callback
if(typeof this.onclick == 'function') if(typeof this.onclick == 'function')
{ {
this.div.unbind("click.et2_baseWidget") this.div.unbind("click.et2_baseWidget")
.on("click.et2_baseWidget", '.ms-sel-item', jQuery.proxy(function(event) { .on("click.et2_baseWidget", '.ms-sel-item', jQuery.proxy(function(event) {
// Pass the target as expected, but also the data for that tag // Pass the target as expected, but also the data for that tag
this.click(/*event.target,*/ $j(event.target).parent().data("json")); this.click(/*event.target,*/ $j(event.target).parent().data("json"));
},this)); },this));
} }
// onFocus // onFocus
if (typeof this.onfocus == 'function') if (typeof this.onfocus == 'function')
{ {
@ -192,10 +194,10 @@ var et2_taglist = et2_selectbox.extend(
} }
return true; return true;
}, },
/** /**
* convert _options to taglist data [{id:...,label:...},...] format * convert _options to taglist data [{id:...,label:...},...] format
* *
* @param object|array _options id: label or id: {label: ..., title: ...} pairs, or array if id's are 0, 1, ... * @param object|array _options id: label or id: {label: ..., title: ...} pairs, or array if id's are 0, 1, ...
*/ */
_options2data: function(_options) _options2data: function(_options)
@ -217,7 +219,7 @@ var et2_taglist = et2_selectbox.extend(
} }
return data; return data;
}, },
/** /**
* Set all options from current static select_options list * Set all options from current static select_options list
*/ */
@ -230,7 +232,7 @@ var et2_taglist = et2_selectbox.extend(
/** /**
* Render a single item, taking care of correctly escaping html special chars * Render a single item, taking care of correctly escaping html special chars
* *
* @param item * @param item
* @returns {String} * @returns {String}
*/ */
@ -249,45 +251,45 @@ var et2_taglist = et2_selectbox.extend(
source = this.egw().ajaxUrl(source); source = this.egw().ajaxUrl(source);
} }
this.options.autocomplete_url = source; this.options.autocomplete_url = source;
if(this.taglist == null) return; if(this.taglist == null) return;
this.taglist.setData(source); this.taglist.setData(source);
}, },
/** /**
* Set the list of suggested options to a static list. * Set the list of suggested options to a static list.
* *
* $param Array _options usual format see _options2data * $param Array _options usual format see _options2data
*/ */
set_select_options: function(_options) set_select_options: function(_options)
{ {
this.options.select_options = _options; this.options.select_options = _options;
if(this.taglist == null) return; if(this.taglist == null) return;
this.taglist.setData(this._options2data(this.options.select_options)); this.taglist.setData(this._options2data(this.options.select_options));
}, },
set_disabled: function(disabled) set_disabled: function(disabled)
{ {
this.options.disabled = disabled; this.options.disabled = disabled;
if(this.taglist == null) return; if(this.taglist == null) return;
disabled ? this.taglist.disable() : this.taglist.enable(); disabled ? this.taglist.disable() : this.taglist.enable();
}, },
/** /**
* Set value(s) of taglist, add them automatic to select-options, if allowFreeEntries * Set value(s) of taglist, add them automatic to select-options, if allowFreeEntries
* *
* @param value (array of) ids * @param value (array of) ids
*/ */
set_value: function(value) set_value: function(value)
{ {
this.options.value = value; this.options.value = value;
if(this.taglist == null) return; if(this.taglist == null) return;
this.taglist.clear(true); this.taglist.clear(true);
if(!value) return; if(!value) return;
var values = jQuery.isArray(value) ? value : [value]; var values = jQuery.isArray(value) ? value : [value];
for(var i=0; i < values.length; ++i) for(var i=0; i < values.length; ++i)
{ {
@ -307,15 +309,15 @@ var et2_taglist = et2_selectbox.extend(
id: v, id: v,
label: this.options.select_options[v] label: this.options.select_options[v]
} }
} }
} }
} }
this.taglist.addToSelection(values); this.taglist.addToSelection(values);
}, },
getValue: function() getValue: function()
{ {
if(this.taglist == null) return null; if(this.taglist == null) return null;
return this.taglist.getValue(); return this.taglist.getValue();
@ -348,15 +350,15 @@ var et2_taglist_email = et2_taglist.extend(
// Search function limits to 3 anyway // Search function limits to 3 anyway
minChars: 3 minChars: 3
}, },
// PREG for validation comes from et2_url // PREG for validation comes from et2_url
//EMAIL_PREG: new RegExp(/^[^\x00-\x20()<>@,;:\".\[\]]+@([a-z0-9ÄÖÜäöüß](|[a-z0-9ÄÖÜäöüß_-]*[a-z0-9ÄÖÜäöüß])\.)+[a-z]{2,6}/), //EMAIL_PREG: new RegExp(/^[^\x00-\x20()<>@,;:\".\[\]]+@([a-z0-9ÄÖÜäöüß](|[a-z0-9ÄÖÜäöüß_-]*[a-z0-9ÄÖÜäöüß])\.)+[a-z]{2,6}/),
selectionRenderer: function(item) selectionRenderer: function(item)
{ {
// We check free entries for valid email, and render as invalid if it's not. // We check free entries for valid email, and render as invalid if it's not.
var valid = item.id != item.label || et2_url.prototype.EMAIL_PREG.test(item.id || ''); var valid = item.id != item.label || et2_url.prototype.EMAIL_PREG.test(item.id || '');
var label = jQuery('<span>').text(item.label); var label = jQuery('<span>').text(item.label);
if (typeof item.title != 'undefined') label.attr('title', item.title); if (typeof item.title != 'undefined') label.attr('title', item.title);
if (!valid) label.addClass('ui-state-error'); if (!valid) label.addClass('ui-state-error');