Changeset 588 for trunk/web-app


Ignore:
Timestamp:
Jun 18, 2010, 4:41:55 PM (10 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
Files:
2 added
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/web-app/css/dialog.css

    r527 r588  
    261261}
    262262/* END :: special select option styles */
     263
     264/* START :: info boxes */
     265.info {
     266    display: block;
     267    border: 1px solid #006DBA;
     268    background-color: #f8feff;
     269    padding: 10px;
     270    font-size: 10px;
     271    margin: 10px 0px 10px 0px;
     272}
     273
     274.info .title {
     275    color:#006DBA;
     276    font-size:14px;
     277    font-weight:normal;
     278    display: block;
     279    margin-bottom: 5px;
     280    padding-left: 20px;
     281    background: url(../images/icons/famfamfam/information.png) no-repeat center left;
     282}
     283
     284.info .todo {
     285    color:#006DBA;
     286    font-size:14px;
     287    font-weight:normal;
     288    display: block;
     289    margin-bottom: 5px;
     290    padding-left: 20px;
     291    background: url(../images/icons/famfamfam/wrench.png) no-repeat center left;
     292}
     293
     294.info .known {
     295    color:#006DBA;
     296    font-size:14px;
     297    font-weight:normal;
     298    display: block;
     299    margin-bottom: 5px;
     300    padding-left: 20px;
     301    background: url(../images/icons/famfamfam/eye.png) no-repeat center left;
     302}
     303
     304.info .error {
     305    color:#006DBA;
     306    font-size:14px;
     307    font-weight:normal;
     308    display: block;
     309    margin-bottom: 5px;
     310    padding-left: 20px;
     311    background: url(../images/icons/famfamfam/exclamation.png) no-repeat center left;
     312}
     313
     314.famfamfam {
     315    width: 16px;
     316    height: 16px;
     317}
     318
     319.spinner {
     320    background: url(../images/spinner.gif) no-repeat left top;
     321    width: 16px;
     322    height: 16px;
     323    display: none;
     324}
     325
     326/* END : info boxes */
  • trunk/web-app/css/wizard.css

    r527 r588  
    2121    padding-left: 20px;
    2222    background: url(../images/icons/famfamfam/information.png) no-repeat center left;
     23}
     24
     25.wizard .info .error {
     26    color:#006DBA;
     27    font-size:14px;
     28    font-weight:normal;
     29    display: block;
     30    margin-bottom: 5px;
     31    padding-left: 20px;
     32    background: url(../images/icons/famfamfam/exclamation.png) no-repeat center left;
    2333}
    2434
  • trunk/web-app/css/wizard.min.css

    r528 r588  
    1 .wizard{display:block;padding-top:10px;}.wizard .info{display:block;border:1px solid #006DBA;background-color:#f8feff;padding:10px;font-size:10px;margin:10px 0 10px 0;}.wizard .info .title{color:#006DBA;font-size:14px;font-weight:normal;display:block;margin-bottom:5px;padding-left:20px;background:url(../images/icons/famfamfam/information.png) no-repeat center left;}.wizard .info .todo{color:#006DBA;font-size:14px;font-weight:normal;display:block;margin-bottom:5px;padding-left:20px;background:url(../images/icons/famfamfam/wrench.png) no-repeat center left;}.wizard .info .known{color:#006DBA;font-size:14px;font-weight:normal;display:block;margin-bottom:5px;padding-left:20px;background:url(../images/icons/famfamfam/eye.png) no-repeat center left;}.wizard .famfamfam{width:16px;height:16px;}.wizard .spinner{background:url(../images/spinner.gif) no-repeat left top;width:16px;height:16px;display:none;}.wizard .sliderContainer{display:block;margin-top:10px;width:150px;}.wizard .tabs{display:block;padding-bottom:2px;border-bottom:2px solid #006DBA;width:100%;}.wizard .tabs ul{list-style-type:none;padding:0;font-size:10px;margin:0;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;height:20px;width:100%;}.wizard .tabs img{border:0;}.wizard .tabs li{float:left;margin:0;height:20px;float:left;display:block;text-align:center;text-decoration:none;color:#006DBA;background:#CCC;font-weight:bold;}.wizard .tabs .content{padding:0 10px 0 10px;display:inline;border:0;}.wizard .tabs .active{background-color:#006DBA!important;color:#fff!important;text-shadow:0 0 1px #333;}.wizard .tabs .arrow{position:inherit;margin-top:0;margin-bottom:0;display:inline;}.wizard .content{display:block;padding-bottom:10px;border-bottom:2px solid #006DBA;}.wizard .navigation{display:block;color:#666;font-size:10px;}.wizard .prevnext{cursor:pointer;color:#006DBA;background-color:transparent;border:none;}.wizard .element .input .isExample{color:#006DBA;background-color:transparent;border:0;input:disabled;}.wizard .element{display:block;}.wizard .element .description{display:inline-block;font-size:11px;width:250px;word-wrap:break-word;zoom:1;*display:inline;}.wizard .element .input{display:inline;font-size:11px;word-wrap:break-word;}.wizard .element .input input[type="radio"]{margin-top:10px;margin-right:5px;}.wizard .error{background:url(../images/icons/famfamfam/exclamation.png) no-repeat 230px 4px;}.wizard .element .input input,textarea{vertical-align:top;border:1px solid #CCC;margin:2px 0;padding:2px 4px;}.wizard .element .input input:focus,select:focus,textarea:focus{border:1px solid #B2D1FF;}.wizard .element .helpIcon{display:inline-block;margin-top:4px;background:url(../images/icons/famfamfam/help.png) no-repeat left top;width:16px;height:16px;zoom:1;*display:inline;}.wizard .element .helpContent{display:none;}.wizard .table{display:block;border:1px solid #575a5d;background-color:#ebf7fc;margin-top:10px;font-size:11px;overflow:hidden;white-space:nowrap;}.wizard .table b{color:#006dba;font-weight:bold;}.wizard .table .header{display:block;background-color:#006DBA;color:#fff;font-weight:bold;width:auto;height:32px;line-height:32px;text-shadow:0 0 1px #333;}.wizard .column .helpIcon{display:inline-block;margin-top:4px;background:url(../images/icons/famfamfam/help.png) no-repeat left top;width:16px;height:16px;zoom:1;*display:inline;}.wizard .column{display:inline-block;padding:2px 4px;min-width:120px;zoom:1;*display:inline;}.wizard .firstColumn{display:inline-block;padding:2px 4px;width:20px;zoom:1;*display:inline;}.wizard .table .row{display:block;height:32px;border-top:1px solid #8e908f;width:auto;}.wizard .table .row input,.wizard .table .row select{background-color:#fff;}.wizard .table .ui-selected{background-color:#ffab7b;}.wizard .table .ui-selecting{background-color:#f2e3bc;}.wizard .table .row .warning{color:red;font-size:8px;height:10px;}.wizard .table .row .error{background-color:#ffb0b7;}.wizard .table input[type=text],.wizard .table select{border:1px solid #8e908f;margin:2px 0;padding:2px 4px;background-color:transparent;width:100px;}.wizard .table .header input[type=text],.wizard .table .header select,.wizard .table .header button{border:1px solid #8e908f;margin:2px 0;padding:2px 4px;background-color:#fff;width:75px;}.wizard .table .highlight,.wizard .table .highlight input,.wizard .table .highlight select,.wizard .table .highlight b{background-color:#006DBA;color:#fff;}.wizard .table .highlight input,.wizard .table .highlight select{background-color:#6e99d4;color:#fff;}.wizard .bigbutton{background:url(../images/wizard/big-button.jpg) no-repeat left top;border:0;width:454px;height:53px;color:#fff;font-size:18pt;}.wizard .bigbutton:hover{color:#000;}.wizard .bigtext{color:#006dba;font-weight:normal;font-size:24px;margin:.8em 0 .3em 0;display:block;width:100%;text-align:center;}.vertical{writing-mode:tb-rl;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);white-space:nowrap;display:block;bottom:0;width:20px;height:100px;text-shadow:0 0 1px #333;border:1px solid red;}.wizard .upload_button{display:inline;border:1px solid #006dba;padding:4px 8px;cursor:pointer;line-height:26px;}.wizard .upload_info{display:inline;color:#006dba;margin-left:5px;}.wizard .upload_info .error{color:red;}.wizard ul.publication_list,.wizard ul.contact_list{list-style-type:none;margin:-10px 0 0 255px;padding:0;}.wizard ul.publication_list li,.wizard ul.contact_list li{margin-left:0;padding:4px 6px;}.wizard li.even{background-color:#F3F3F3;}.wizard li.odd{background-color:#FAFAFA;}.wizard li .delete_button{float:right;margin-left:10px;cursor:pointer;}.wizard ul.publication_list li .authors{font-size:10px;margin-top:3px;color:#333;}.wizard ul.contact_list li .person{display:inline;}.wizard ul.contact_list li .role{color:#009;display:inline;margin-left:5px;}.wizard ul.contact_list li .role:before{content:' / ';color:#009;}.wizard .contacts_dialog{margin:5px 0;}
     1.wizard{display:block;padding-top:10px;}.wizard .info{display:block;border:1px solid #006DBA;background-color:#f8feff;padding:10px;font-size:10px;margin:10px 0 10px 0;}.wizard .info .title{color:#006DBA;font-size:14px;font-weight:normal;display:block;margin-bottom:5px;padding-left:20px;background:url(../images/icons/famfamfam/information.png) no-repeat center left;}.wizard .info .error{color:#006DBA;font-size:14px;font-weight:normal;display:block;margin-bottom:5px;padding-left:20px;background:url(../images/icons/famfamfam/exclamation.png) no-repeat center left;}.wizard .info .todo{color:#006DBA;font-size:14px;font-weight:normal;display:block;margin-bottom:5px;padding-left:20px;background:url(../images/icons/famfamfam/wrench.png) no-repeat center left;}.wizard .info .known{color:#006DBA;font-size:14px;font-weight:normal;display:block;margin-bottom:5px;padding-left:20px;background:url(../images/icons/famfamfam/eye.png) no-repeat center left;}.wizard .famfamfam{width:16px;height:16px;}.wizard .spinner{background:url(../images/spinner.gif) no-repeat left top;width:16px;height:16px;display:none;}.wizard .sliderContainer{display:block;margin-top:10px;width:150px;}.wizard .tabs{display:block;padding-bottom:2px;border-bottom:2px solid #006DBA;width:100%;}.wizard .tabs ul{list-style-type:none;padding:0;font-size:10px;margin:0;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;height:20px;width:100%;}.wizard .tabs img{border:0;}.wizard .tabs li{float:left;margin:0;height:20px;float:left;display:block;text-align:center;text-decoration:none;color:#006DBA;background:#CCC;font-weight:bold;}.wizard .tabs .content{padding:0 10px 0 10px;display:inline;border:0;}.wizard .tabs .active{background-color:#006DBA!important;color:#fff!important;text-shadow:0 0 1px #333;}.wizard .tabs .arrow{position:inherit;margin-top:0;margin-bottom:0;display:inline;}.wizard .content{display:block;padding-bottom:10px;border-bottom:2px solid #006DBA;}.wizard .navigation{display:block;color:#666;font-size:10px;}.wizard .prevnext{cursor:pointer;color:#006DBA;background-color:transparent;border:none;}.wizard .element .input .isExample{color:#006DBA;background-color:transparent;border:0;input:disabled;}.wizard .element{display:block;}.wizard .element .description{display:inline-block;font-size:11px;width:250px;word-wrap:break-word;zoom:1;*display:inline;}.wizard .element .input{display:inline;font-size:11px;word-wrap:break-word;}.wizard .element .input input[type="radio"]{margin-top:10px;margin-right:5px;}.wizard .error{background:url(../images/icons/famfamfam/exclamation.png) no-repeat 230px 4px;}.wizard .element .input input,textarea{vertical-align:top;border:1px solid #CCC;margin:2px 0;padding:2px 4px;}.wizard .element .input input:focus,select:focus,textarea:focus{border:1px solid #B2D1FF;}.wizard .element .helpIcon{display:inline-block;margin-top:4px;background:url(../images/icons/famfamfam/help.png) no-repeat left top;width:16px;height:16px;zoom:1;*display:inline;}.wizard .element .helpContent{display:none;}.wizard .table{display:block;border:1px solid #575a5d;background-color:#ebf7fc;margin-top:10px;font-size:11px;overflow:hidden;white-space:nowrap;}.wizard .table b{color:#006dba;font-weight:bold;}.wizard .table .header{display:block;background-color:#006DBA;color:#fff;font-weight:bold;width:auto;height:32px;line-height:32px;text-shadow:0 0 1px #333;}.wizard .column .helpIcon{display:inline-block;margin-top:4px;background:url(../images/icons/famfamfam/help.png) no-repeat left top;width:16px;height:16px;zoom:1;*display:inline;}.wizard .column{display:inline-block;padding:2px 4px;min-width:120px;zoom:1;*display:inline;}.wizard .firstColumn{display:inline-block;padding:2px 4px;width:20px;zoom:1;*display:inline;}.wizard .table .row{display:block;height:32px;border-top:1px solid #8e908f;width:auto;}.wizard .table .row input,.wizard .table .row select{background-color:#fff;}.wizard .table .ui-selected{background-color:#ffab7b;}.wizard .table .ui-selecting{background-color:#f2e3bc;}.wizard .table .row .warning{color:red;font-size:8px;height:10px;}.wizard .table .row .error{background-color:#ffb0b7;}.wizard .table input[type=text],.wizard .table select{border:1px solid #8e908f;margin:2px 0;padding:2px 4px;background-color:transparent;width:100px;}.wizard .table .header input[type=text],.wizard .table .header select,.wizard .table .header button{border:1px solid #8e908f;margin:2px 0;padding:2px 4px;background-color:#fff;width:75px;}.wizard .table .highlight,.wizard .table .highlight input,.wizard .table .highlight select,.wizard .table .highlight b{background-color:#006DBA;color:#fff;}.wizard .table .highlight input,.wizard .table .highlight select{background-color:#6e99d4;color:#fff;}.wizard .bigbutton{background:url(../images/wizard/big-button.jpg) no-repeat left top;border:0;width:454px;height:53px;color:#fff;font-size:18pt;}.wizard .bigbutton:hover{color:#000;}.wizard .bigtext{color:#006dba;font-weight:normal;font-size:24px;margin:.8em 0 .3em 0;display:block;width:100%;text-align:center;}.vertical{writing-mode:tb-rl;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);white-space:nowrap;display:block;bottom:0;width:20px;height:100px;text-shadow:0 0 1px #333;border:1px solid red;}.wizard .upload_button{display:inline;border:1px solid #006dba;padding:4px 8px;cursor:pointer;line-height:26px;}.wizard .upload_info{display:inline;color:#006dba;margin-left:5px;}.wizard .upload_info .error{color:red;}.wizard ul.publication_list,.wizard ul.contact_list{list-style-type:none;margin:-10px 0 0 255px;padding:0;}.wizard ul.publication_list li,.wizard ul.contact_list li{margin-left:0;padding:4px 6px;}.wizard li.even{background-color:#F3F3F3;}.wizard li.odd{background-color:#FAFAFA;}.wizard li .delete_button{float:right;margin-left:10px;cursor:pointer;}.wizard ul.publication_list li .authors{font-size:10px;margin-top:3px;color:#333;}.wizard ul.contact_list li .person{display:inline;}.wizard ul.contact_list li .role{color:#009;display:inline;margin-left:5px;}.wizard ul.contact_list li .role:before{content:' / ';color:#009;}.wizard .contacts_dialog{margin:5px 0;}
  • 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.