]> source.dussan.org Git - nextcloud-server.git/commitdiff
Added custom combobox widget.
authorThomas Tanghus <thomas@tanghus.net>
Fri, 10 Feb 2012 15:40:40 +0000 (16:40 +0100)
committerThomas Tanghus <thomas@tanghus.net>
Fri, 10 Feb 2012 15:40:40 +0000 (16:40 +0100)
apps/contacts/contacts.php
apps/contacts/css/jquery.combobox.css [new file with mode: 0644]
apps/contacts/js/contacts.js
apps/contacts/js/jquery.combobox.js [new file with mode: 0644]
apps/contacts/templates/part.contact.php
core/img/actions/triangle-s.png [new file with mode: 0644]
core/img/actions/triangle-s.svg [new file with mode: 0644]

index fded839fed86e5750f21b9c607844028de09ac53..938a6b13a04e1e793d68d7e5b6543953178149ad 100644 (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');
 
diff --git a/apps/contacts/css/jquery.combobox.css b/apps/contacts/css/jquery.combobox.css
new file mode 100644 (file)
index 0000000..5929423
--- /dev/null
@@ -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; }
index 7f4e938c48af807d53e680d5e4ffac69759aea45..c0cea7917f144d5e3343692d34bddd1325c794da 100644 (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);
diff --git a/apps/contacts/js/jquery.combobox.js b/apps/contacts/js/jquery.combobox.js
new file mode 100644 (file)
index 0000000..6da4ecb
--- /dev/null
@@ -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 );
index a56999dbf39bd86761d0687fdd80d7dd0bb7d4d8..19e34fd3bb191a595cb6d9cbaadd2fb4eeb22005 100644 (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>
diff --git a/core/img/actions/triangle-s.png b/core/img/actions/triangle-s.png
new file mode 100644 (file)
index 0000000..d77d5db
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 (file)
index 0000000..f899300
--- /dev/null
@@ -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>