mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added custom combobox widget.

This commit is contained in:
Thomas Tanghus 2012-02-10 16:40:40 +01:00
parent 25f1263c11
commit c95e8a1fc5
7 changed files with 278 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/contacts/contacts.php
View File

@ -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
apps/contacts/css/jquery.combobox.css Normal file
View 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; }

42
apps/contacts/js/contacts.js
View File

@ -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
apps/contacts/js/jquery.combobox.js Normal file
View 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'>&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 );

2
apps/contacts/templates/part.contact.php
View File

@ -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>

BIN
core/img/actions/triangle-s.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 526 B

92
core/img/actions/triangle-s.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB