From c95e8a1fc556fc34caf5f3b5ead9f0e29c8ce4c7 Mon Sep 17 00:00:00 2001 From: Thomas Tanghus Date: Fri, 10 Feb 2012 16:40:40 +0100 Subject: [PATCH] Added custom combobox widget. --- apps/contacts/contacts.php | 2 + apps/contacts/css/jquery.combobox.css | 3 + apps/contacts/js/contacts.js | 42 +++++-- apps/contacts/js/jquery.combobox.js | 148 +++++++++++++++++++++++ apps/contacts/templates/part.contact.php | 2 +- core/img/actions/triangle-s.png | Bin 0 -> 526 bytes core/img/actions/triangle-s.svg | 92 ++++++++++++++ 7 files changed, 278 insertions(+), 11 deletions(-) create mode 100644 apps/contacts/css/jquery.combobox.css create mode 100644 apps/contacts/js/jquery.combobox.js create mode 100644 core/img/actions/triangle-s.png create mode 100644 core/img/actions/triangle-s.svg diff --git a/apps/contacts/contacts.php b/apps/contacts/contacts.php index fded839fed..938a6b13a0 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 0000000000..59294235d2 --- /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 7f4e938c48..c0cea7917f 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($('') + .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($('') + .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 0000000000..6da4ecb514 --- /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 = $('') + .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" + ), "$1" ), + 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 $( "
  • " ) + .data( "item.autocomplete", item ) + .append( "" + item.label + "" ) + .appendTo( ul ); + }; + + this.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 a56999dbf3..19e34fd3bb 100644 --- a/apps/contacts/templates/part.contact.php +++ b/apps/contacts/templates/part.contact.php @@ -45,7 +45,7 @@ $id = isset($_['id']) ? $_['id'] : '';
    - diff --git a/core/img/actions/triangle-s.png b/core/img/actions/triangle-s.png new file mode 100644 index 0000000000000000000000000000000000000000..d77d5db2caa3a3810e42d69b81a262d17b59d117 GIT binary patch literal 526 zcmV+p0`dKcP)e{We?%OF}=C;yj6o>{ zKopD2vaGdI>Ks69R@k4<=f8d5Ka4tuVfevot+&&7p7(Dyn;ip7YXe<&I-Nx(lX>}S z=UguL;(6X5UylyNU~i!n)V%`M_fm z0ASJY_iuIq#^dn~uy`Mf1JKyX8?eMjlbR5<-70v1|0FY!Z1t= QQvd(}07*qoM6N<$f@AI7jQ{`u literal 0 HcmV?d00001 diff --git a/core/img/actions/triangle-s.svg b/core/img/actions/triangle-s.svg new file mode 100644 index 0000000000..f899300bbc --- /dev/null +++ b/core/img/actions/triangle-s.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + +