Merge branch 'tanghus_contacts'

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');
 

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

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();
+			//$('#fn').jec();
-			$('.jecEditableOption').attr('title', t('contacts','Custom'));
+			$('#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').attr('title', 'Custom');
-				$('.jecEditableOption').text(this.fn);
+				//$('.jecEditableOption').text(this.fn);
 				//$('.jecEditableOption').attr('value', 0);
-				$('#fn').val(0);
+				$('#fn_select option').remove();
-				$('#full').text(this.fullname);
+				$('#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']);
 			},
@@ -629,12 +641,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);

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 );

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>

core/img/actions/triangle-s.svg

@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<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:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16px"
+   height="16px"
+   id="svg6077"
+   version="1.1"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="triangle-s.svg"
+   inkscape:export-filename="/home/tol/tanghus-owncloud/core/img/actions/triangle-s.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs6079">
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3587-6-5-3-4-5-4-0-1"
+       id="linearGradient7308"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0,0.54681372,-0.39376081,0,14.87048,-9.6346)"
+       x1="34.992828"
+       y1="0.94087797"
+       x2="34.992828"
+       y2="33.955856" />
+    <linearGradient
+       id="linearGradient3587-6-5-3-4-5-4-0-1">
+      <stop
+         offset="0"
+         style="stop-color:#000000;stop-opacity:1"
+         id="stop3589-9-2-2-3-2-53-4-3" />
+      <stop
+         offset="1"
+         style="stop-color:#363636;stop-opacity:1"
+         id="stop3591-7-4-73-7-9-86-9-3" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.197802"
+     inkscape:cx="1.0398514"
+     inkscape:cy="8"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     inkscape:window-width="1600"
+     inkscape:window-height="845"
+     inkscape:window-x="-2"
+     inkscape:window-y="-3"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata6082">
+    <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>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer">
+    <path
+       inkscape:connector-curvature="0"
+       d="M 14.5,3 1.5,3 8,15 14.5,3 z"
+       id="path2843-0-1-6-6"
+       style="opacity:0.6;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+    <path
+       inkscape:connector-curvature="0"
+       d="m 14.5,1.49996 -13,0 6.49999,12 6.50001,-12 z"
+       id="path2843-39-5-5"
+       style="opacity:0.7;color:#000000;fill:url(#linearGradient7308);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+  </g>
+</svg>