Add "toggle" as an option for taglist multiple attribute

etemplate/js/et2_widget_taglist.js

@@ -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 ()

etemplate/templates/default/etemplate2.css

@@ -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;
 }

phpgwapi/js/jquery/magicsuggest/magicsuggest.js

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

pixelegg/css/mobile.css

@@ -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
 */

pixelegg/css/pixelegg.css

@@ -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
 */

pixelegg/images/minus.svg

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

pixelegg/less/etemplate2.less

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

pixelegg/mobile/fw_mobile.css

@@ -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
 */