holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add "toggle" as an option for taglist multiple attribute

Browse Source
This commit is contained in:
Nathan Gray 2016-03-04 15:36:05 +00:00
parent 4fe5378bd9
commit 7b42308df2
8 changed files with 202 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
etemplate/js/et2_widget_taglist.js
View File

@ -98,7 +98,11 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend(
"description": "The maximum number of items the user can select if multiple selection is allowed."
},
// Selectbox attributes that are not applicable
"multiple": { ignore: true},
"multiple": {
type: 'any', // boolean or 'toggle'
default: true,
description: "True, false or 'toggle'"
},
"rows": { ignore: true},
"tags": { ignore: true},
useCommaKey: {
@ -122,6 +126,13 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend(
// jQuery wrapped DOM node
this.div = jQuery("<div></div>").addClass('et2_taglist');
this.multiple_toggle = jQuery("<div></div>")
.addClass('toggle')
.on('click', jQuery.proxy(function() {
this._set_multiple(!this._multiple);
},this))
.appendTo(this.div);
// magicSuggest object
this.taglist = null;
@ -152,6 +163,11 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend(
this.egw().debug('warn', 'Invalid autocomplete_params: '+_attrs.autocomplete_params );
}
}
if(_attrs.multiple !== 'toggle')
{
_attrs.multiple = et2_evalBool(_attrs.multiple);
}
},
doLoadingFinished: function() {
@ -167,7 +183,7 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend(
}
// MagicSuggest would replaces our div, so add a wrapper instead
this.taglist = $j('<div/>').appendTo(this.div);
this.taglist = $j('<div/>').prependTo(this.div);
this.taglist_options = jQuery.extend( {
// magisuggest can NOT work setting an empty autocomplete url, it will then call page url!
@ -179,7 +195,7 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend(
displayField: "label",
invalidCls: 'invalid ui-state-error',
placeholder: this.options.empty_label,
hideTrigger: true,
hideTrigger: this.options.multiple === true ? true : false,
noSuggestionText: this.egw().lang("No suggestions"),
required: this.options.required,
allowFreeEntries: this.options.allowFreeEntries,
@ -189,7 +205,7 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend(
editable: !(this.options.disabled || this.options.readonly),
selectionRenderer: jQuery.proxy(this.options.tagRenderer || this.selectionRenderer,this),
renderer: jQuery.proxy(this.options.listRenderer || this.selectionRenderer,this),
maxSelection: this.options.maxSelection,
maxSelection: this.options.multiple ? this.options.maxSelection : 1,
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
@ -208,6 +224,8 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend(
this.taglist.addToSelection(this.options.value,true);
}
this._set_multiple(this.options.multiple);
// AJAX _and_ select options - use custom function
if(this.options.autocomplete_url && !jQuery.isEmptyObject(this.options.select_options))
{
@ -418,6 +436,34 @@ var et2_taglist = (function(){ "use strict"; return et2_selectbox.extend(
disabled ? this.taglist.disable() : this.taglist.enable();
},
/**
* Set whether the widget accepts only 1 value, many, or allows the user
* to toggle between the two.
*
* @param {boolean|string} multiple true, false, or 'toggle'
*/
set_multiple: function set_multiple(multiple) {
if(multiple != this.options.multiple)
{
this.options.multiple = multiple;
if(this.taglist !== null)
{
this._set_multiple(multiple);
}
}
},
_set_multiple: function(multiple) {
this._multiple = multiple === true ? true : false;
this.div.toggleClass('et2_taglist_single', !this._multiple);
this.div.toggleClass('et2_taglist_toggle', this.options.multiple === 'toggle');
this.taglist.setMaxSelection(this._multiple ? this.options.maxSelection : 1);
if(!this._multiple && this.taglist.getValue().length > 1)
{
this.set_value(this.taglist.getValue()[0]);
}
},
/**
* Set value(s) of taglist, add them automatic to select-options, if allowFreeEntries
*
@ -513,10 +559,11 @@ var et2_taglist_account = (function(){ "use strict"; return et2_taglist.extend(
'default': 'accounts',
type: 'string',
description: 'Limit type of accounts. One of {accounts,groups,both,owngroups}.'
}
},
},
lib_options: {
minChars: 2
minChars: 2,
toggleOnClick: true
},
init:function ()

55
etemplate/templates/default/etemplate2.css
View File

@ -905,6 +905,9 @@ ul.et2_link_string {
content: "\2212";
}
/**
* Tag list
*/
.et2_taglist_ro ul {
margin: 0px;
padding: 0px;
@ -921,6 +924,54 @@ ul.et2_link_string {
.et2_taglist > div {
min-height: 2em;
}
/* Toggle single / multiple */
.et2_taglist_toggle {
white-space: nowrap;
}
.et2_taglist_toggle > div.ms-ctn {
display: inline-block;
width: calc(100% - 40px);
padding-right: 2px
}
.et2_taglist_toggle.et2_taglist_single > div.ms-ctn {
padding-right: 7px
}
.et2_taglist_toggle > div:last-child {
margin-left: -1px;
float: right;
width: 23px;
height: 23px;
position: relative;
border: 1px solid #BBB;
background-repeat: no-repeat;
background-position: center center;
background-image: url("../../../phpgwapi/templates/default/images/foldertree_nolines_minus.gif");
}
.et2_taglist_toggle.et2_taglist_single > div:last-child {
background-image: url("../../../phpgwapi/templates/default/images/foldertree_nolines_plus.gif");
}
.et2_taglist_toggle:not(.et2_taglist_single) .ms-trigger {
display: none;
}
/* Single select */
.et2_taglist_single .ms-ctn {
padding: 0px 7px;
}
.et2_taglist_single div.ms-ctn .ms-sel-item + input {
display: none;
}
.et2_taglist_single .ms-ctn .ms-trigger .ms-trigger-ico {
margin-top: 9px;
}
div .et2_taglist_single div.ms-sel-ctn div.ms-sel-item {
border: none;
background: inherit;
width: calc(100% - 43px);
margin-bottom: 0px;
padding-bottom: 6px;
}
/* Taglist category */
.et2_taglist_category span[class*="cat_"] {
@ -929,6 +980,10 @@ ul.et2_link_string {
margin: -3px -6px;
float: left;
}
.et2_taglist_category.et2_taglist_single span[class*="cat_"] {
height: 2em;
margin-bottom: -6px
}
.et2_taglist_category .ms-res-item > span {
margin-left: 3px;
}

9
phpgwapi/js/jquery/magicsuggest/magicsuggest.js vendored
View File

@ -568,6 +568,15 @@
self._processSuggestions();
};
/**
* Set the maximum allowed selections
* @param {integer} name
*/
this.setMaxSelection = function(max)
{
cfg.maxSelection = max;
};
/**
* Sets the name for the input field so it can be fetched in the form
* @param name

8
pixelegg/css/mobile.css
View File

@ -996,6 +996,14 @@
/**
* et2_taglist
*/
.et2_taglist_toggle > div:last-child {
background-image: url("../images/minus.svg");
background-size: 50%;
}
.et2_taglist_toggle.et2_taglist_single > div:last-child {
background-image: url("../images/plus.svg");
background-size: 50%;
}
/**
* et2_toolbar
*/

8
pixelegg/css/pixelegg.css
View File

@ -985,6 +985,14 @@
/**
* et2_taglist
*/
.et2_taglist_toggle > div:last-child {
background-image: url("../images/minus.svg");
background-size: 50%;
}
.et2_taglist_toggle.et2_taglist_single > div:last-child {
background-image: url("../images/plus.svg");
background-size: 50%;
}
/**
* et2_toolbar
*/

53
pixelegg/images/minus.svg Normal file
View File

@ -0,0 +1,53 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<?xml-stylesheet type="text/css" href="../less/svg.css" ?><svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="pixelegg_plus"
x="0px"
y="0px"
width="32px"
height="32px"
viewBox="0 0 32 32"
enable-background="new 0 0 32 32"
xml:space="preserve"
inkscape:version="0.48.4 r9939"
sodipodi:docname="plus.svg"><metadata
id="metadata13"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs11" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1056"
id="namedview9"
showgrid="false"
inkscape:zoom="26.763184"
inkscape:cx="16"
inkscape:cy="16"
inkscape:window-x="0"
inkscape:window-y="85"
inkscape:window-maximized="1"
inkscape:current-layer="g5" /><g
id="g3"><g
id="g5"><path
stroke-miterlimit="10"
d="m 31.31,19.861 -11.351,0 c -15.1202596,0 7.513399,0 -7.562,0 l -11.345,0 0,-7.562 c 0,0 7.5633333,0 11.345,0 2.520667,0 5.041333,0 7.562,0 3.783667,0 11.351,0 11.351,0 z"
id="path7"
inkscape:connector-curvature="0"
style="fill:#696969;stroke:#e6e6e6;stroke-miterlimit:10"
sodipodi:nodetypes="cssccaacc" /></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

9
pixelegg/less/etemplate2.less
View File

@ -924,7 +924,14 @@ textarea.description {
/**
* et2_taglist
*/
.et2_taglist_toggle > div:last-child {
background-image: url("../images/minus.svg");
background-size: 50%;
}
.et2_taglist_toggle.et2_taglist_single > div:last-child {
background-image: url("../images/plus.svg");
background-size: 50%;
}
/**
* et2_toolbar

8
pixelegg/mobile/fw_mobile.css
View File

@ -1007,6 +1007,14 @@
/**
* et2_taglist
*/
.et2_taglist_toggle > div:last-child {
background-image: url("../images/minus.svg");
background-size: 50%;
}
.et2_taglist_toggle.et2_taglist_single > div:last-child {
background-image: url("../images/plus.svg");
background-size: 50%;
}
/**
* et2_toolbar
*/