Changeset 588 for trunk/web-app/js


Ignore:
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:
1 added
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/web-app/js/ontology-chooser.js

    r393 r588  
    3535}
    3636OntologyChooser.prototype = {
    37     minLength   : 3,    // minimum input length before launching Ajax request
    38     cache       : [],   // ontology cache
     37    cache   : [],           // ontology cache
     38    options : {
     39        minLength   : 3,    // minimum input length before launching Ajax request
     40        showHide    : null, // show / hide this DOM element on select/deselect autocomplete results
     41        spinner     : '../../images/spinner.gif'
     42    },
    3943
    4044    /**
    4145     * initialize object
    4246     */
    43     init: function() {
     47    init: function(options) {
    4448        var that = this;
     49
     50        // set class parameters
     51        if (options) {
     52            $.each(options, function(key,value) {
     53                that.options[key] = value;
     54            });
     55        }
     56
     57        // hide showHide div?
     58        if (this.options.showHide) {
     59            this.options.showHide.hide();
     60        }
    4561
    4662        // find all ontology elements
     
    6783        // http://bioportal.bioontology.org/search/json_search/?q=musculus
    6884        inputElement.autocomplete({
    69             minLength: that.minLength,
     85            minLength: that.options.minLength,
    7086            delay: 300,
    7187            search: function(event, ui) {
     88                if (that.options.spinner) {
     89                    inputElement.css({ 'background': 'url(' + that.options.spinner + ') no-repeat right top' });
     90                }
    7291                selected = false;
    7392            },
     
    7897                // got cache?
    7998                if (that.cache[ q ]) {
     99                    // hide spinner
     100                    inputElement.css({ 'background': 'none' });
     101
    80102                    // yeah, lucky us! ;-P
    81103                    response(that.cache[ q ]);
     
    89111                        that.cache[ q ] = result;
    90112
     113                        // hide spinner
     114                        inputElement.css({ 'background': 'none' });
     115
    91116                        // response callback
    92117                        response(that.parseData(data.data));
     
    108133                // remove error class (if present)
    109134                element.removeClass('error');
     135
     136                // show showHide element if set
     137                if (that.options.showHide) {
     138                    that.options.showHide.show();
     139                }
    110140            },
    111141            close: function(event, ui) {
  • trunk/web-app/js/ontology-chooser.min.js

    r359 r588  
    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}};
     1function 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}};
Note: See TracChangeset for help on using the changeset viewer.