Implement new taglist widget to represent list of regions of a selected country

addressbook/js/app.js

@@ -564,6 +564,13 @@ app.classes.addressbook = AppJS.extend(
 				custom_field.style.display = "none";
 			}
 		}
+		var region = this.et2.getWidgetById(selectbox.name.replace('countrycode', 'region'));
+		if (region)
+		{
+			region.set_country_code(selectbox.value);
+			region.options.select_options = {};
+			region.transformAttributes(region.options);
+		}
 	},
 
 	/**

addressbook/templates/default/edit.xet

@@ -84,7 +84,7 @@
 					<description for="adr_one_countryname" value="country"/>
 					<vbox width="100%">
 						<menulist class="et2_fullWidth">
-							<menupopup type="select-country" tags="true" width="100%" class="countrySelect et2_fullWidth" id="adr_one_countrycode" tabindex="15" onchange="app.addressbook.show_custom_country(this);" options="Select one,0,1" autocomplete="country"/>
+							<menupopup type="select-country" submit="1" tags="true" width="100%" class="countrySelect et2_fullWidth" id="adr_one_countrycode" tabindex="15" onchange="app.addressbook.show_custom_country(this);" options="Select one,0,1" autocomplete="country"/>
 						</menulist>
 						<textbox id="adr_one_countryname" class="custom_country et2_fullWidth" autocomplete="country-name"/>
 					</vbox>
@@ -95,7 +95,7 @@
 					<url-phone id="tel_other" tabindex="25" class="et2_fullWidth"  autocomplete="tel" />
 					<radio statustext="select phone number as prefered way of contact" id="tel_prefer" options="tel_other,&amp;hearts;"/>
 					<description value="Region"/>
-					<textbox statustext="State" id="adr_one_region" tabindex="16" maxlength="64" class="et2_fullWidth" autocomplete="address-level1"/>
+					<taglist-state statustext="State" maxSelection="1" country_code="$cont[adr_one_countrycode]" id="adr_one_region" tabindex="16" maxlength="64" class="et2_fullWidth" autocomplete="address-level1"/>
 					<description/>
 				</row>
 				<row disabled="!@addr_format=city_state_postcode">
@@ -251,7 +251,7 @@
 					<date id="bday" tabindex="31" options="Y-m-d"  year_range="c-90:c+2" class="et2_fullWidth"/>
 					<description/>
 					<description value="Region"/>
-					<textbox statustext="State" id="adr_two_region" tabindex="38" maxlength="64" class="et2_fullWidth" autocomplete="section-two address-level1" />
+					<taglist-state statustext="State" maxSelection="1" country_code="$cont[adr_two_region]" id="adr_two_region" tabindex="38" maxlength="64" class="et2_fullWidth" autocomplete="section-two address-level1" />
 					<description/>
 				</row>
 				<row disabled="!@addr_format=city_state_postcode">

api/js/etemplate/et2_widget_selectbox.js

@@ -1317,6 +1317,10 @@ jQuery.extend(et2_selectbox, //(function(){ "use strict"; return
 		var options = ',';
 		return this.cached_server_side_options(widget, options, attrs);
 	},
+	state_options: function(widget, attrs) {
+		var options = attrs.country_code ? attrs.country_code : 'de';
+		return this.cached_server_side_options(widget, options, attrs);
+	},
 	dow_options: function(widget,attrs) {
 		var options = ','+(attrs.other||[]).join(',');
 		return this.cached_server_side_options(widget, options, attrs);

api/js/etemplate/et2_widget_taglist.js

@@ -1369,6 +1369,86 @@ var et2_taglist_thumbnail = (function(){ "use strict"; return et2_taglist.extend
 et2_register_widget(et2_taglist_thumbnail, ["taglist-thumbnail"]);
 
 
+/**
+ * Taglist represents list of states of a country,
+ *
+ */
+var et2_taglist_state = (function(){ "use strict"; return et2_taglist.extend(
+{
+	attributes: {
+		"minChars": {
+			default: 0
+		},
+		"autocomplete_url": {
+			"default": ""
+		},
+		"autocomplete_params": {
+			"default": {}
+		},
+		"country_code": {
+			name: "country code to fetch states for",
+			default: "de",
+			type: "string",
+			description: "Defines country code to fetch list of states for it"
+		}
+	},
+	/**
+	 *
+	 * @returns {undefined}
+	 */
+	init:function ()
+	{
+		this._super.apply(this, arguments);
+		this.div.addClass('et2_taglist_state');
+	},
+
+	/**
+	 * Get options automatically from select option cache
+	 * @param {type} _attrs
+	 */
+	transformAttributes: function(_attrs) {
+		// Pretend to be a select box so it works
+		var type = this._type;
+		this._type = 'select-state';
+		this._super.apply(this, arguments);
+		this._type = type;
+	},
+	/**
+	 * convert selectbox options from the cache 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, ...
+	 *
+	 * @return {Object[]} Returns an array of objects with ID and label
+	 */
+	_options2data: function(_options)
+	{
+		var options = jQuery.isArray(_options) ? jQuery.extend({}, _options) : _options;
+		var data = [];
+		for(var id in options)
+		{
+			var option = {};
+			if (typeof options[id] == 'object')
+			{
+				jQuery.extend(option, options[id]);
+				if(option.value) option.id = option.value;
+			}
+			else
+			{
+				option.label = options[id];
+			}
+			data.push(option);
+		}
+		return data;
+	},
+	set_country_code: function (_country_code)
+	{
+		var country_code = _country_code || '';
+		this.country_code = country_code;
+		this.options.country_code = country_code;
+	}
+});}).call(this);
+et2_register_widget(et2_taglist_state, ["taglist-state"]);
+
 /**
  * et2_taglist_ro is the readonly implementation of the taglist.
  *

api/src/Country.php

@@ -434,13 +434,10 @@ class Country
 		{
 			case 'us':
 				return self::$us_states_array;
-				break;
 			case 'de':
 				return self::$de_states_array;
-				break;
 			case 'at':
 				return self::$at_states_array;
-				break;
 			case 'ch':
 				return self::$ch_states_array;
 		}

api/src/Etemplate/Widget/Select.php

@@ -576,7 +576,7 @@ class Select extends Etemplate\Widget
 				break;
 
 			case 'select-state':
-				$options = Api\Country::us_states();
+				$options = (array)Api\Country::get_states($field);
 				$no_lang = True;
 				break;