Changeset 260 for trunk/web-app/js

Timestamp:

Mar 12, 2010, 4:12:53 PM (11 years ago)

Author:

duh

Message:

• upgraded jquery-ui to latest version
• implemented ontology chooser using jquery-ui's autocomplete functionality. The NCBO ontology chooser was not properly implemented to be used with other functionality like the table editor, etcetera. Hence the rewritten version. Example usage: <input type="text" name="..." rel="ontology-all-name" />
• ontology chooser dynamically inserts three hidden fields if they are not present (concept_id, ontology_id and full_id) using the naming convention of inputname-ontology_id etc
• updated the jquery-ui style to the latest version
• added 'known issues' boxes to wizard pages
• updated CSS to format ontology chooser results
• updated wizard javascript
• some changes to the wizard controller

Location:

trunk/web-app/js

Files:

• jquery-ui-1.8rc3.custom.min.js (added)
• ontology-chooser.js (added)
• table-editor.js (modified) (9 diffs)
• wizard.js (modified) (1 diff)

trunk/web-app/js/table-editor.js

@@ -12 +12 @@
  * $Date$
  */
-function TableEditor() { }
+function TableEditor() {
+}
 TableEditor.prototype = {
     tableIdentifier:    null,
     rowIdentifier:      null,
     columnIdentifier:   null,
+    selected:           null,
 
     /**
@@ -51 +53 @@
             filter: this.rowIdentifier,
             stop: function() {
+                // remember selected rows
+                that.selected = $('.ui-selected', table);
+
                 // bind on change to columns in rows
-                $('.ui-selected', table).each(function() {
-                    that.attachColumnHandlers(this);
+                that.selected.each(function() {
+                    that.attachColumnHandlers(this,table);
                 })
             }
@@ -63 +68 @@
      * @param row
      */
-    attachColumnHandlers: function(row) {
+    attachColumnHandlers: function(row,table) {
         var that = this;
         var count = 0;
+
+        // define regular expressions
+        var regAutoComplete = new RegExp("ui-autocomplete-input");
+
         $(this.columnIdentifier, $(row)).each(function() {
             var input = $(':input', $(this));
             // does this column contain an input field
             if (input) {
-                var type = $(input).attr('type');
+                var inputElement = $(input)
+                var type = inputElement.attr('type');
 
                 switch (type) {
@@ -76 +86 @@
                         // text input
                         var columnNumber = count;
-                        $(input).bind('keyup', function() {
-                            that.updateSingleInputElements(input, columnNumber, 'input');
-                        })
+
+                        // handle special cases
+                        // if (inputElement.attr('rel') && regBp.test(inputElement.attr('rel'))) {
+                        if (regAutoComplete.test(inputElement.attr('class'))) {
+                            // this is a jquery-ui autocomplete field
+                            inputElement.bind('autocompleteclose', function() {
+                                // TODO: autocompletion deselects rows... which is what we don't want
+                                //       to happen of course...
+                                that.updateSingleInputElements(input, columnNumber, 'input');
+                            })
+                        } else {
+                            // regular text element
+                            inputElement.bind('keyup', function() {
+                                that.updateSingleInputElements(input, columnNumber, 'input');
+                            });
+                        }
                         break;
                     case 'select-one':
                         // single select
                         var columnNumber = count;
-                        $(input).bind('change', function() {
+                        inputElement.bind('change', function() {
                             that.updateSingleInputElements(input, columnNumber, 'select');
                         });
@@ -90 +113 @@
                         // checkbox
                         var columnNumber = count;
-                        $(input).bind('click', function() {
+                        inputElement.bind('click', function() {
                             that.updateSingleInputElements(input, columnNumber, 'input');
                         });
@@ -108 +131 @@
 
             count++;
-        })
+        });
     },
 
@@ -120 +143 @@
         var that = this;
         var e = $(element);
-        var c = e.parent();
-        var r = c.parent();
-        var t = r.parent();
+        var c = e.parent();     // column
+        var r = c.parent();     // row
+        var t = r.parent();     // table
         var v = this.getValue(e);
         // TODO for multiples...
@@ -132 +155 @@
                 var myVal = that.getValue(me);
                 if (myVal != v) {
-                    that.setValue(me,v);
+                    that.setValue(me, v);
                 }
             })
@@ -160 +183 @@
      * @param value
      */
-    setValue: function(input,value) {
+    setValue: function(input, value) {
         var i = $(input);
 
         switch (i.attr('type')) {
             case 'checkbox':
-                return i.attr('checked',value);
+                return i.attr('checked', value);
                 break;
             default:

trunk/web-app/js/wizard.js

@@ -38 +38 @@
     attachDateTimePickers();
 
-    // table handlers
+    // handle and initialize table(s)
     attachTableEvents();
     handleWizardTable();
     new TableEditor().init('div.table', 'div.row', 'div.column');
 
-    // accordeon(s)
+    // initialize the ontology chooser
+    new OntologyChooser().init();
+
+    // initialize accordeon(s)
     $("#accordion").accordion();
 }