diff --git a/apps/contacts/contacts.php b/apps/contacts/contacts.php
index fded839fed86e5750f21b9c607844028de09ac53..938a6b13a04e1e793d68d7e5b6543953178149ad 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 0000000000000000000000000000000000000000..59294235d29d6dbc41eb55533a1d5ad7d14473d6
--- /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 7f4e938c48af807d53e680d5e4ffac69759aea45..c0cea7917f144d5e3343692d34bddd1325c794da 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 0000000000000000000000000000000000000000..6da4ecb51477a7197f23d1c826e0b63735997beb
--- /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'> </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 a56999dbf39bd86761d0687fdd80d7dd0bb7d4d8..19e34fd3bb191a595cb6d9cbaadd2fb4eeb22005 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>
diff --git a/core/img/actions/triangle-s.png b/core/img/actions/triangle-s.png
new file mode 100644
index 0000000000000000000000000000000000000000..d77d5db2caa3a3810e42d69b81a262d17b59d117
Binary files /dev/null and b/core/img/actions/triangle-s.png differ
diff --git a/core/img/actions/triangle-s.svg b/core/img/actions/triangle-s.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f899300bbca0e7750ba729ad7ac3fced18b2ce1d
--- /dev/null
+++ b/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>