Added custom combobox widget.

5 files changed, 186 insertions, 11 deletions

diff --git a/apps/contacts/contacts.php b/apps/contacts/contacts.php
index fded839fed8..938a6b13a04 100644
--- a/apps/contacts/contacts.php
+++ b/apps/contacts/contacts.php
@@ -38,11 +38,13 @@ $maxUploadFilesize = min($maxUploadFilesize ,$freeSpace);
 OC_Util::addScript('','jquery.multiselect');
 //OC_Util::addScript('contacts','interface');
 OC_Util::addScript('contacts','contacts');
+OC_Util::addScript('contacts','jquery.combobox');
 OC_Util::addScript('contacts','jquery.inview');
 OC_Util::addScript('contacts','jquery.Jcrop');
 OC_Util::addScript('contacts','jquery.jec-1.3.3');
 OC_Util::addStyle('','jquery.multiselect');
 //OC_Util::addStyle('contacts','styles');
+OC_Util::addStyle('contacts','jquery.combobox');
 OC_Util::addStyle('contacts','jquery.Jcrop');
 OC_Util::addStyle('contacts','contacts');
 
diff --git a/apps/contacts/css/jquery.combobox.css b/apps/contacts/css/jquery.combobox.css
new file mode 100644
index 00000000000..59294235d29
--- /dev/null
+++ b/apps/contacts/css/jquery.combobox.css
@@ -0,0 +1,3 @@
+.combo-button { background:url('../../../core/img/actions/triangle-s.svg') no-repeat center; margin-left: -1px; float: left; border: none; }
+.ui-button-icon-only .ui-button-text { padding: 0.35em; } 
+.ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
diff --git a/apps/contacts/js/contacts.js b/apps/contacts/js/contacts.js
index 7f4e938c48a..c0cea7917f1 100644
--- a/apps/contacts/js/contacts.js
+++ b/apps/contacts/js/contacts.js
@@ -167,8 +167,13 @@ Contacts={
 			$('.button,.action').tipsy();
 			$('#contacts_deletecard').tipsy({gravity: 'ne'});
 			$('#contacts_downloadcard').tipsy({gravity: 'ne'});
-			$('#fn').jec();
-			$('.jecEditableOption').attr('title', t('contacts','Custom'));
+			//$('#fn').jec();
+			$('#fn_select').combobox({
+				'id': 'fn',
+				'name': 'value',
+				'classes': ['contacts_property'],
+				'title': t('contacts', 'Format custom, Short name, Full name, Reverse or Reverse with comma')});
+			//$('.jecEditableOption').attr('title', t('contacts','Custom'));
 			$('#fn').tipsy();
 			$('#contacts_details_photo_wrapper').tipsy();
 			$('#bday').datepicker({
@@ -348,14 +353,21 @@ Contacts={
 					this.fullname += ', ' + this.honsuf;
 				}
 				$('#n').html(this.fullname);
-				$('.jecEditableOption').attr('title', 'Custom');
-				$('.jecEditableOption').text(this.fn);
+				//$('.jecEditableOption').attr('title', 'Custom');
+				//$('.jecEditableOption').text(this.fn);
 				//$('.jecEditableOption').attr('value', 0);
-				$('#fn').val(0);
-				$('#full').text(this.fullname);
+				$('#fn_select option').remove();
+				$('#fn_select').combobox('value', this.fn);
+				var names = [this.fullname, this.givname + ' ' + this.famname, this.famname + ' ' + this.givname, this.famname + ', ' + this.givname];
+				$.each(names, function(key, value) {
+					$('#fn_select')
+						.append($('<option></option>')
+						.text(value)); 
+				});
+				/*$('#full').text(this.fullname);
 				$('#short').text(this.givname + ' ' + this.famname);
 				$('#reverse').text(this.famname + ' ' + this.givname);
-				$('#reverse_comma').text(this.famname + ', ' + this.givname);
+				$('#reverse_comma').text(this.famname + ', ' + this.givname);*/
 				$('#contact_identity').find('*[data-element="N"]').data('checksum', this.data.N[0]['checksum']);
 				$('#contact_identity').find('*[data-element="FN"]').data('checksum', this.data.FN[0]['checksum']);
 			},
@@ -628,12 +640,22 @@ Contacts={
 				if(n[4].length > 0) {
 					this.fullname += ', ' + n[4];
 				}
-				$('#short').text(n[1] + ' ' + n[0]);
+
+				$('#fn_select option').remove();
+				//$('#fn_select').combobox('value', this.fn);
+				var names = [this.fullname, this.givname + ' ' + this.famname, this.famname + ' ' + this.givname, this.famname + ', ' + this.givname];
+				$.each(names, function(key, value) {
+					$('#fn_select')
+						.append($('<option></option>')
+						.text(value)); 
+				});
+				
+				/*$('#short').text(n[1] + ' ' + n[0]);
 				$('#full').text(this.fullname);
 				$('#reverse').text(n[0] + ' ' + n[1]);
-				$('#reverse_comma').text(n[0] + ', ' + n[1]);
+				$('#reverse_comma').text(n[0] + ', ' + n[1]);*/
 				//$('#n').html(full);
-				$('#fn').val(0);
+				//$('#fn').val(0);
 				if(this.id == '') {
 					var aid = $(dlg).find('#aid').val();
 					Contacts.UI.Card.add(n.join(';'), $('#short').text(), aid);
diff --git a/apps/contacts/js/jquery.combobox.js b/apps/contacts/js/jquery.combobox.js
new file mode 100644
index 00000000000..6da4ecb5147
--- /dev/null
+++ b/apps/contacts/js/jquery.combobox.js
@@ -0,0 +1,148 @@
+/**
+ * Inspired by http://jqueryui.com/demos/autocomplete/#combobox
+ */
+
+(function( $ ) {
+	$.widget('ui.combobox', {
+		_create: function() {
+			//console.log('_create: ' + this.options['id']);
+			var self = this,
+				select = this.element.hide(),
+				selected = select.children(':selected'),
+				value = selected.val() ? selected.text() : '';
+			var input = this.input = $('<input type="text">')
+				.insertAfter( select )
+				.val( value )
+				.autocomplete({
+					delay: 0,
+					minLength: 0,
+					source: function( request, response ) {
+						var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
+						response( select.children( "option" ).map(function() {
+							var text = $( this ).text();
+							if ( this.value && ( !request.term || matcher.test(text) ) )
+								return {
+									label: text.replace(
+										new RegExp(
+											"(?![^&;]+;)(?!<[^<>]*)(" +
+											$.ui.autocomplete.escapeRegex(request.term) +
+											")(?![^<>]*>)(?![^&;]+;)", "gi"
+										), "<strong>$1</strong>" ),
+									value: text,
+									option: this
+								};
+						}) );
+					},
+					select: function( event, ui ) {
+						self.input.val($(ui.item.option).text());
+						self.input.trigger('change');
+						ui.item.option.selected = true;
+						self._trigger( "selected", event, {
+							item: ui.item.option
+						});
+					},
+					change: function( event, ui ) {
+						if ( !ui.item ) {
+							var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
+								valid = false;
+							self.input.val($(this).val());
+							//self.input.trigger('change');
+							select.children( "option" ).each(function() {
+								if ( $( this ).text().match( matcher ) ) {
+									this.selected = valid = true;
+									return false;
+								}
+							});
+							/*if ( !valid ) {
+								// remove invalid value, as it didn't match anything
+								$( this ).val( "" );
+								select.val( "" );
+								input.data( "autocomplete" ).term = "";
+								return false;
+							}*/
+						}
+					}
+				})
+				.addClass( "ui-widget ui-widget-content ui-corner-left" );
+
+			input.data( "autocomplete" )._renderItem = function( ul, item ) {
+				return $( "<li></li>" )
+					.data( "item.autocomplete", item )
+					.append( "<a>" + item.label + "</a>" )
+					.appendTo( ul );
+			};
+
+			this.button = $( "<button type='button'>&nbsp;</button>" )
+				.attr( "tabIndex", -1 )
+				.attr( "title", "Show All Items" )
+				.insertAfter( input )
+				/*.button({
+					icons: {
+						primary: "ui-icon-triangle-1-s"
+					},
+					text: false
+				})
+				.removeClass( "ui-corner-all" )*/
+				.addClass('svg')
+				.addClass('action')
+				.addClass('combo-button')
+				.click(function() {
+					// close if already visible
+					if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
+						input.autocomplete( "close" );
+						return;
+					}
+
+					// work around a bug (likely same cause as #5265)
+					$( this ).blur();
+
+					// pass empty string as value to search for, displaying all results
+					input.autocomplete( "search", "" );
+					input.focus();
+				});
+			$.each(this.options, function(key, value) {
+				self._setOption(key, value);
+			});
+		},
+		destroy: function() {
+			this.input.remove();
+			this.button.remove();
+			this.element.show();
+			$.Widget.prototype.destroy.call( this );
+		},
+		value: function(val) {
+			console.log('combobox.value: ' + val);
+			if(val != undefined) {
+				this.input.val(val);
+			} else {
+				return this.input.val();
+			}
+		},
+		_setOption: function( key, value ) {
+			switch( key ) {
+				case "id":
+					this.options['id'] = value;
+					this.input.attr('id', value);
+				break;
+				case "name":
+					this.options['name'] = value;
+					this.input.attr('name', value);
+				break;
+				case "classes":
+					var input = this.input;
+					$.each(this.options['classes'], function(key, value) {
+						input.addClass(value);
+					});
+				break;
+			}
+			// In jQuery UI 1.8, you have to manually invoke the _setOption method from the base widget
+			$.Widget.prototype._setOption.apply( this, arguments );
+			// In jQuery UI 1.9 and above, you use the _super method instead
+			//this._super( "_setOption", key, value );
+		},
+		options: { 
+			id: null,
+			name: null
+		},
+	});
+})( jQuery );
diff --git a/apps/contacts/templates/part.contact.php b/apps/contacts/templates/part.contact.php
index a56999dbf39..19e34fd3bb1 100644
--- a/apps/contacts/templates/part.contact.php
+++ b/apps/contacts/templates/part.contact.php
@@ -45,7 +45,7 @@ $id = isset($_['id']) ? $_['id'] : '';
 		<dd style="padding-top: 0.8em;vertical-align: text-bottom;"><span id="n" type="text"></span></dd -->
 		<dt><label for="fn"><?php echo $l->t('Display name'); ?></label></dt>
 		<dd class="propertycontainer" data-element="FN">
-		<select id="fn" name="value" required="required" class="contacts_property" title="<?php echo $l->t('Format custom, Short name, Full name, Reverse or Reverse with comma'); ?>" style="width:16em;">
+		<select id="fn_select" title="<?php echo $l->t('Format custom, Short name, Full name, Reverse or Reverse with comma'); ?>" style="width:16em;">
 			<option id="short" title="Short name"></option>
 			<option id="full" title="Full name"></option>
 			<option id="reverse" title="Reverse"></option>