Changeset 483 for trunk

Timestamp:

May 27, 2010, 10:55:53 AM (13 years ago)

Author:

roberth

Message:

Improved flexibility of the publication chooser and added comments

Location:

trunk

Files:

• grails-app/views/publication/add.gsp (modified) (2 diffs)
• web-app/js/publication-chooser.js (modified) (5 diffs)
• web-app/js/publication-chooser.pubmed.js (modified) (3 diffs)

trunk/grails-app/views/publication/add.gsp

@@ -21 +21 @@
   <script type="text/javascript" src="${resource(dir: 'js', file: 'publication-chooser.js')}"></script>
   <script type="text/javascript" src="${resource(dir: 'js', file: 'publication-chooser.pubmed.js')}"></script>
+  <script type="text/javascript" src="${resource(dir: 'js', file: 'publication-chooser.programminglanguages.js')}"></script>
 
  </head>
@@ -26 +27 @@
 
  <g:form action="createFromPubmed">
-  <g:textField name="publication" rel="publication-pubmed" />
+  <g:textField name="publication" rel="publication-pubmed" style="width:300px;"/>
   <g:submitButton name="add" value="Add publication" />
  </g:form>
- 
+
+
+
  ${errors}
  ${message}
 
  <script type="text/javascript">
-        $(document).ready(function() {
-          // initialize the ontology chooser
-          var chooser = new PublicationChooser();
-
-          chooser.init();
-        });
+$(document).ready(function() {
+  // initialize the ontology chooser
+  PublicationChooser.init();
+});
  </script>
  </body>

trunk/web-app/js/publication-chooser.js

@@ -14 +14 @@
  *
  * Where the 'rel' value has the name 'publication' in the beginning. The text
- * after the dash is used for selecting the database to use. Currently, only
- * Pubmed is supported, that is also the default.
+ * after the dash is used for selecting the database to use. Multiple textboxes
+ * can be used on one page, also textboxes that search different databases.
+ * 
+ * To initialize the textboxes, put the following javascript on the page. 
+ * 
+ *    PublicationChooser.init();
+ * 
+ * The script must be executed AFTER all textboxes have been loaded. A good way
+ * to achieve that is to run the init function in the document.ready event:
+ * 
+ *    $(document).ready(function() {
+ *        // initialize the publication chooser(s)
+ *        PublicationChooser.init();
+ *    });
+ * 
+ * Supporting different databases:
+ * ---------------------------
+ * The databases that can be used are stored in the availableDBs arraymap. This 
+ * map consists of a key that describes the database to be used, and a value that
+ * points to a function to be called when searching for the publications.
+ * 
+ * As such, this class is not able to search any database. In order to make an
+ * interface for a database, a new method has to be created that searches for 
+ * publications, and calls another method with  an array with strings or an 
+ * object array with label/value properties. This is described on 
+ * http://jqueryui.com/demos/autocomplete/#option-source
+ * 
+ * The function for searching has the following form:
+ * 
+ *     sourceExample = function( chooserObject, searchterm, response ) {
+ *          response( [ 'result1', 'result2' ] );
+ *     }
+ *
+ * The method takes the following parameters
+ *
+ *     chooserObject:  reference to the publicationChooser object itself
+ *     searchterm:     string with the text that is entered in the textfield
+ *     response:       reference to the function to be called when the results
+ *                     have been fetched. The parameters are described above
+ *
+ * After the function has been created, it must be told to the publicationChooser
+ * class.
+ *
+ *     PublicationChooser.prototype.availableDBs[ "example" ] = {
+ *         'source': sourceExample
+ *     };
+ *
+ * This line will provide the PublicationChooser class with the possibility to
+ * search in the example database (<input rel="publication-example">), using the
+ * function sourceExample. N.B. You can't use a dash in the name of the database
+ * since that is used to separate different parts of the rel="" value.
+ *
+ * In order to do something with the selected result, two other methods can be
+ * written;
+ *
+ *     selectExample = function( chooserObject, inputElement, event, ui ) {}
+ *     closeExample = function( chooserObject, inputElement, event, ui ) {}
+ *
+ * The select method is calles when a user selects an item. The close method is
+ * called when a user closes the dropdown, but did not select an item. The parameters
+ * are:
+ *
+ *     chooserObject:  reference to the publicationChooser object itself
+ *     inputElement:   reference to the input element
+ *     event:          the event that has triggered the call. See http://docs.jquery.com/UI/Autocomplete#events
+ *     ui:             the ui reference from jquery. If an item is selected,
+ *                     ui.item contains a reference to that item. See http://docs.jquery.com/UI/Autocomplete#events
+ *
+ * In order to show the elements in the list, there is a render method. This method
+ * accepts the item to be rendered, and returns an HTML string to be shown in the list
+ *
+ *     renderExample = function( item ) {}
+ *
+ * Of course, these methods must also be presented to the PublicationChooser object.
+ *
+ *     PublicationChooser.prototype.availableDBs[ "example" ] = {
+ *         'source': sourceExample,
+ *         'select': selectExample,
+ *         'close':  closeExample,
+ *         'render': renderExample
+ *     };
+ *
+ * Example:
+ * --------
+ *
+ *    sourceProgrammingLanguages = function( chooserObject, searchterm, response ) {
+ *        var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
+ *        var foundTags = $.grep( availableTags, function( tag, i ){
+ *            return ( tag.indexOf( searchterm ) !=-1 );
+ *        } );
+ *
+ *        response( foundTags );
+ *    }
+ *
+ *    selectProgrammingLanguages = function( chooserObject, inputElement, event, ui ) {
+ *        alert( "Selected item: " + ui.item.value );
+ *    }
+ *
+ *    closeProgrammingLanguages = function( chooserObject, inputElement, event, ui ) {
+ *       alert( "No selected item" );
+ *    }
+ *
+ *    renderProgrammingLanguages = function( item ) {
+ *        return item.value;
+ *    };
+ *
+ *    PublicationChooser.prototype.availableDBs[ "programminglanguages" ] = {
+ *        'source': sourceProgrammingLanguages,
+ *         'close' : closeProgrammingLanguages,
+ *         'select': selectProgrammingLanguages,
+ *        'render': renderProgrammingLanguages
+ *     };
+ *
+ * Currently, only Pubmed is supported using publication-chooser.pubmed.js.
  * Other database can easily be supported. See for example
  * http://www.ncbi.nlm.nih.gov/bookshelf/br.fcgi?book=helpeutils&part=chapter2&rendertype=table&id=chapter2.chapter2_table1
@@ -33 +145 @@
 function PublicationChooser() {
 }
+
+/**
+ * initialize object
+ */
+PublicationChooser.init = function() {
+    // find all ontology elements
+    $("input[rel*='publication']").each(function() {
+        new PublicationChooser().initAutocomplete(this);
+    });
+};
+
 PublicationChooser.prototype = {
     minLength       : 3,        // minimum input length before launching Ajax request
@@ -39 +162 @@
     database        : '',       // Default database to be used. As for now, also the only possible database
     availableDBs    : {},       // Available databases, filled by extensions. Key is databasename and value is reference to method to be called
-
-    /**
-     * initialize object
-     */
-    init: function() {
-        var that = this;
-
-        // find all ontology elements
-        $("input[rel*='publication']").each(function() {
-            that.initAutocomplete(this);
-        });
-    },
-
+    
     /**
      * initialize the ontology autocompleter
@@ -72 +183 @@
         }
 
+        // Initialize cache for this element
+        this.cache[ this.database ] = [];
+
         // Put the autocomplete function on the input field. See jquery-ui
         inputElement.autocomplete({
@@ -78 +192 @@
 
             source: function(request, response) {
-                        var q = $.trim(request.term);
-
-                        // Check the cache first
-                        if ( that.cache[ q ]) {
-                            // yeah, lucky us! ;-P
-                            response(that.cache[ q ]);
-                        } else {
-                            if( that.database != "" ) {
-                                that.availableDBs[ that.database ]( that, q, response );
-                            }
-                        }
+                var q = $.trim(request.term);
+
+                // Check the cache first
+                if ( that.cache[ that.database ][ q ]) {
+                    // yeah, lucky us! ;-P
+                    response(that.cache[ that.database ][ q ]);
+                } else {
+                    if( that.database != "" && that.availableDBs[ that.database ] && that.availableDBs[ that.database ][ 'source' ] ) {
+                        that.availableDBs[ that.database ][ 'source' ]( that, q, response );
+                    }
+                }
+            },
+            search: function(event, ui ) {
+                that.selected = false;
             },
             select: function(event, ui) {
                 // mark that the user selected a suggestion
-                selected = true;
-
-                // option selected, set hidden fields
-                var element = inputElement;
-
-                // set hidden fields
-                that.setInputValue(element, 'title', ui.item.title);
-                that.setInputValue(element, 'authorsList', ui.item.authors.join( ', ' ));
-                that.setInputValue(element, 'pubMedID', ui.item.id);
-                that.setInputValue(element, 'doi', ui.item.doi);
-
-                // remove error class (if present)
-                element.removeClass('error');
+                that.selected = true;
+
+                if( that.database != "" && that.availableDBs[ that.database ] && that.availableDBs[ that.database ][ 'select' ] ) {
+                    that.availableDBs[ that.database ][ 'select' ]( that, inputElement, event, ui );
+                }
             },
             close: function(event, ui) {
-                // check if the user picked something from the ontology suggestions
-                if (!selected) {
-                    // no he didn't, clear the field(s)
-                    var element = inputElement;
-
-                    // set fields
-                    inputElement.val('');
-                    that.setInputValue(element, 'title', '');
-                    that.setInputValue(element, 'authorsList', '');
-                    that.setInputValue(element, 'pubMedID', '');
-
-                    // add error class
-                    element.addClass('error');
+                if( !that.selected ) {
+                    if( that.database != "" && that.availableDBs[ that.database ] && that.availableDBs[ that.database ][ 'close' ] ) {
+                        that.availableDBs[ that.database ][ 'close' ]( that, inputElement, event, ui );
+                    }
                 }
             }
 
-        })
-        .data( "autocomplete" )._renderItem = this.renderPublication;
+        });
+
+        // Enable custom rendering if wanted. Otherwise use renderPublication method
+        var renderMethod;
+        if( this.database != "" && this.availableDBs[ that.database ] && this.availableDBs[ that.database ][ 'render' ] ) {
+            renderMethod = this.availableDBs[ that.database ][ 'render' ]; 
+        } else {
+            renderMethod = this.renderPublication;
+        }
+
+        inputElement.data( "autocomplete" )._renderItem = function( ul, item ) { 
+            return that.renderAutoCompleteText( ul, item, renderMethod( item ) );
+        };
+
     },
 
-    renderPublication: function( ul, item ) {
+    /**
+     * Renders a piece of text as a autocomplete menu item
+     */
+    renderAutoCompleteText: function( ul, item, text ) {
         return $( "<li></li>" )
                 .data( "item.autocomplete", item )
-                .append( "<a>" + item.title + "<br><span style='font-size: 7pt;' class='authors'>" + item.authors.join( ', ' )+ "</span></a>" )
+                .append( "<a>" + text + "</a>" )
                 .appendTo( ul );
+    },
+
+    /**
+     * Default rendering for publications in the autocomplete list
+     */
+    renderPublication: function( item ) {
+        return item.title + "<br><span style='font-size: 7pt;' class='authors'>" + item.authors.join( ', ' )+ "</span>";
     },
 

trunk/web-app/js/publication-chooser.pubmed.js

@@ -27 +27 @@
                         
                         // Save in cache
-                        chooserObject.cache[ searchterm ] = parsedData;
+                        chooserObject.cache[ chooserObject.database ][ searchterm ] = parsedData;
 
                         // Return it to jquery
@@ -37 +37 @@
 
 };
+
+selectPubMed = function( chooserObject, inputElement, event, ui ) {
+
+    // option selected, set hidden fields
+    var element = inputElement;
+
+    // set hidden fields
+    chooserObject.setInputValue(element, 'title', ui.item.title);
+    chooserObject.setInputValue(element, 'authorsList', ui.item.authors.join( ', ' ));
+    chooserObject.setInputValue(element, 'pubMedID', ui.item.id);
+    chooserObject.setInputValue(element, 'doi', ui.item.doi);
+
+    // remove error class (if present)
+    element.removeClass('error');
+};
+closePubMed  = function( chooserObject, inputElement, event, ui ) {
+    // no he didn't, clear the field(s)
+    var element = inputElement;
+
+    // set fields
+    inputElement.val('');
+    chooserObject.setInputValue(element, 'title', '');
+    chooserObject.setInputValue(element, 'authorsList', '');
+    chooserObject.setInputValue(element, 'pubMedID', '');
+    chooserObject.setInputValue(element, 'doi', '');
+
+    // add error class
+    element.addClass('error');
+};
+
+//renderPubMed = function( chooserObject, ul, item ) {};
 
 /**
@@ -85 +116 @@
 }
 
-PublicationChooser.prototype.availableDBs[ "pubmed" ] = sourcePubMed;
+PublicationChooser.prototype.availableDBs[ "pubmed" ] = { 
+    'source': sourcePubMed,
+    'select': selectPubMed,
+    'close':  closePubMed
+};