mirror of
https://github.com/owncloudarchive/contacts.git
synced 2024-12-01 13:24:10 +01:00
Added custom combobox widget.
This commit is contained in:
Thomas Tanghus
parent
bcd1470ea9
commit
8576d978e2
@ -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');
|
||||
|
||||
|
||||
3
css/jquery.combobox.css
Normal file
3
css/jquery.combobox.css
Normal file
@ -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; }
|
||||
@ -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);
|
||||
|
||||
148
js/jquery.combobox.js
Normal file
148
js/jquery.combobox.js
Normal file
@ -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 );
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user