Changeset 588 for trunk/web-app/js

Timestamp:

Jun 18, 2010, 4:41:55 PM (11 years ago)

Author:

duh

Message:

• general improvements to the termEditor

-- feedback is more clear (resolves feature request #120)
-- separated info / error and feedback info boxes
-- improved the layout
-- ontology-chooser now allows instance options to
--- show/hide a div element (usefull for buttons to show only when an autocomplete option was selected)
--- show a spinner when searching

• general web application improvement to capture F4 page refreshes, backspace browser navigation events and accidental submits when pressing 'enter' in an input box

Location:

trunk/web-app/js

Files:

• disableKeys.js (added)
• ontology-chooser.js (modified) (5 diffs)
• ontology-chooser.min.js (modified) (1 diff)

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

@@ -35 +35 @@
 }
 OntologyChooser.prototype = {
-    minLength   : 3,    // minimum input length before launching Ajax request
-    cache       : [],   // ontology cache
+    cache   : [],           // ontology cache
+    options : {
+        minLength   : 3,    // minimum input length before launching Ajax request
+        showHide    : null, // show / hide this DOM element on select/deselect autocomplete results
+        spinner     : '../../images/spinner.gif'
+    },
 
     /**
      * initialize object
      */
-    init: function() {
+    init: function(options) {
         var that = this;
+
+        // set class parameters
+        if (options) {
+            $.each(options, function(key,value) {
+                that.options[key] = value;
+            });
+        }
+
+        // hide showHide div?
+        if (this.options.showHide) {
+            this.options.showHide.hide();
+        }
 
         // find all ontology elements
@@ -67 +83 @@
         // http://bioportal.bioontology.org/search/json_search/?q=musculus
         inputElement.autocomplete({
-            minLength: that.minLength,
+            minLength: that.options.minLength,
             delay: 300,
             search: function(event, ui) {
+                if (that.options.spinner) {
+                    inputElement.css({ 'background': 'url(' + that.options.spinner + ') no-repeat right top' });
+                }
                 selected = false;
             },
@@ -78 +97 @@
                 // got cache?
                 if (that.cache[ q ]) {
+                    // hide spinner
+                    inputElement.css({ 'background': 'none' });
+
                     // yeah, lucky us! ;-P
                     response(that.cache[ q ]);
@@ -89 +111 @@
                         that.cache[ q ] = result;
 
+                        // hide spinner
+                        inputElement.css({ 'background': 'none' });
+
                         // response callback
                         response(that.parseData(data.data));
@@ -108 +133 @@
                 // remove error class (if present)
                 element.removeClass('error');
+
+                // show showHide element if set
+                if (that.options.showHide) {
+                    that.options.showHide.show();
+                }
             },
             close: function(event, ui) {

trunk/web-app/js/ontology-chooser.min.js

@@ -1 @@
-function OntologyChooser(){}OntologyChooser.prototype={minLength:3,cache:[],init:function(){var a=this;$("input[rel*='ontology']").each(function(){a.initAutocomplete(this)})},initAutocomplete:function(d){var f=this;var g=$(d);var e=false;var c=g.attr("rel").split("-");var b=c[1];var a=c[2];if(b=="all"){b=""}g.autocomplete({minLength:f.minLength,delay:300,search:function(h,i){e=false},source:function(j,h){var k=$.trim(j.term);var i="http://bioportal.bioontology.org/search/json_search/"+b+"?q="+j.term+"&response=json&callback=?";if(f.cache[k]){h(f.cache[k])}else{$.getJSON(i,function(m){var l=f.parseData(m.data);f.cache[k]=l;h(f.parseData(m.data))})}},select:function(i,j){e=true;var h=g;f.setInputValue(h,"concept_id",j.item.concept_id);f.setInputValue(h,"ontology_id",j.item.ontology_id);f.setInputValue(h,"full_id",j.item.full_id);h.removeClass("error")},close:function(i,j){if(!e){var h=g;g.val("");f.setInputValue(h,"concept_id","");f.setInputValue(h,"ontology_id","");f.setInputValue(h,"full_id","");h.addClass("error")}}})},setInputValue:function(e,c,d){var a=e.attr("name")+"-"+c;var b=e.parent().find("input[name='"+a+"']");if(b.size()>0){$(b[0]).val(d)}else{e.after('<input type="hidden" name="'+a+'" value="'+d+'"/>')}},parseData:function(d){var a=[];var c=d.split("~!~");for(var b=0;b<c.length;b++){var f=$.trim(c[b]);if(f){var e=f.split("|");a[a.length]={value:e[0],label:e[0]+' <span class="about">('+e[2]+')</span> <span class="from">from: '+e[(e.length-1)]+"</span>",preferred_name:e[0],concept_id:e[1],ontology_id:e[3],full_id:e[4]}}}return a}};
+function OntologyChooser(){}OntologyChooser.prototype={cache:[],options:{minLength:3,showHide:null,spinner:"../../images/spinner.gif"},init:function(a){var b=this;if(a){$.each(a,function(c,d){b.options[c]=d})}if(this.options.showHide){this.options.showHide.hide()}$("input[rel*='ontology']").each(function(){b.initAutocomplete(this)})},initAutocomplete:function(d){var f=this;var g=$(d);var e=false;var c=g.attr("rel").split("-");var b=c[1];var a=c[2];if(b=="all"){b=""}g.autocomplete({minLength:f.options.minLength,delay:300,search:function(h,i){if(f.options.spinner){g.css({background:"url("+f.options.spinner+") no-repeat right top"})}e=false},source:function(j,h){var k=$.trim(j.term);var i="http://bioportal.bioontology.org/search/json_search/"+b+"?q="+j.term+"&response=json&callback=?";if(f.cache[k]){g.css({background:"none"});h(f.cache[k])}else{$.getJSON(i,function(m){var l=f.parseData(m.data);f.cache[k]=l;g.css({background:"none"});h(f.parseData(m.data))})}},select:function(i,j){e=true;var h=g;f.setInputValue(h,"concept_id",j.item.concept_id);f.setInputValue(h,"ontology_id",j.item.ontology_id);f.setInputValue(h,"full_id",j.item.full_id);h.removeClass("error");if(f.options.showHide){f.options.showHide.show()}},close:function(i,j){if(!e){var h=g;g.val("");f.setInputValue(h,"concept_id","");f.setInputValue(h,"ontology_id","");f.setInputValue(h,"full_id","");h.addClass("error")}}})},setInputValue:function(e,c,d){var a=e.attr("name")+"-"+c;var b=e.parent().find("input[name='"+a+"']");if(b.size()>0){$(b[0]).val(d)}else{e.after('<input type="hidden" name="'+a+'" value="'+d+'"/>')}},parseData:function(d){var a=[];var c=d.split("~!~");for(var b=0;b<c.length;b++){var f=$.trim(c[b]);if(f){var e=f.split("|");a[a.length]={value:e[0],label:e[0]+' <span class="about">('+e[2]+')</span> <span class="from">from: '+e[(e.length-1)]+"</span>",preferred_name:e[0],concept_id:e[1],ontology_id:e[3],full_id:e[4]}}}return a}};