Changeset 260 for trunk/web-app


Ignore:
Timestamp:
Mar 12, 2010, 4:12:53 PM (10 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
Files:
20 added
3 edited

Legend:

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

    r238 r260  
    241241    color: #fff;
    242242}
    243 
    244243/* END :: TABLE */
     244
     245/* START :: wizard autocomplete */
     246.ui-autocomplete .ui-menu-item {
     247    font-size: 10px;
     248}
     249.ui-autocomplete .about {
     250    font-size: 8px;
     251    color: #006DBA;
     252}
     253.ui-autocomplete .from {
     254    font-size: 8px;
     255    color: #666;
     256}
     257/* END :: wizard autocomplete */
  • trunk/web-app/js/table-editor.js

    r247 r260  
    1212 * $Date$
    1313 */
    14 function TableEditor() { }
     14function TableEditor() {
     15}
    1516TableEditor.prototype = {
    1617    tableIdentifier:    null,
    1718    rowIdentifier:      null,
    1819    columnIdentifier:   null,
     20    selected:           null,
    1921
    2022    /**
     
    5153            filter: this.rowIdentifier,
    5254            stop: function() {
     55                // remember selected rows
     56                that.selected = $('.ui-selected', table);
     57
    5358                // bind on change to columns in rows
    54                 $('.ui-selected', table).each(function() {
    55                     that.attachColumnHandlers(this);
     59                that.selected.each(function() {
     60                    that.attachColumnHandlers(this,table);
    5661                })
    5762            }
     
    6368     * @param row
    6469     */
    65     attachColumnHandlers: function(row) {
     70    attachColumnHandlers: function(row,table) {
    6671        var that = this;
    6772        var count = 0;
     73
     74        // define regular expressions
     75        var regAutoComplete = new RegExp("ui-autocomplete-input");
     76
    6877        $(this.columnIdentifier, $(row)).each(function() {
    6978            var input = $(':input', $(this));
    7079            // does this column contain an input field
    7180            if (input) {
    72                 var type = $(input).attr('type');
     81                var inputElement = $(input)
     82                var type = inputElement.attr('type');
    7383
    7484                switch (type) {
     
    7686                        // text input
    7787                        var columnNumber = count;
    78                         $(input).bind('keyup', function() {
    79                             that.updateSingleInputElements(input, columnNumber, 'input');
    80                         })
     88
     89                        // handle special cases
     90                        // if (inputElement.attr('rel') && regBp.test(inputElement.attr('rel'))) {
     91                        if (regAutoComplete.test(inputElement.attr('class'))) {
     92                            // this is a jquery-ui autocomplete field
     93                            inputElement.bind('autocompleteclose', function() {
     94                                // TODO: autocompletion deselects rows... which is what we don't want
     95                                //       to happen of course...
     96                                that.updateSingleInputElements(input, columnNumber, 'input');
     97                            })
     98                        } else {
     99                            // regular text element
     100                            inputElement.bind('keyup', function() {
     101                                that.updateSingleInputElements(input, columnNumber, 'input');
     102                            });
     103                        }
    81104                        break;
    82105                    case 'select-one':
    83106                        // single select
    84107                        var columnNumber = count;
    85                         $(input).bind('change', function() {
     108                        inputElement.bind('change', function() {
    86109                            that.updateSingleInputElements(input, columnNumber, 'select');
    87110                        });
     
    90113                        // checkbox
    91114                        var columnNumber = count;
    92                         $(input).bind('click', function() {
     115                        inputElement.bind('click', function() {
    93116                            that.updateSingleInputElements(input, columnNumber, 'input');
    94117                        });
     
    108131
    109132            count++;
    110         })
     133        });
    111134    },
    112135
     
    120143        var that = this;
    121144        var e = $(element);
    122         var c = e.parent();
    123         var r = c.parent();
    124         var t = r.parent();
     145        var c = e.parent();     // column
     146        var r = c.parent();     // row
     147        var t = r.parent();     // table
    125148        var v = this.getValue(e);
    126149        // TODO for multiples...
     
    132155                var myVal = that.getValue(me);
    133156                if (myVal != v) {
    134                     that.setValue(me,v);
     157                    that.setValue(me, v);
    135158                }
    136159            })
     
    160183     * @param value
    161184     */
    162     setValue: function(input,value) {
     185    setValue: function(input, value) {
    163186        var i = $(input);
    164187
    165188        switch (i.attr('type')) {
    166189            case 'checkbox':
    167                 return i.attr('checked',value);
     190                return i.attr('checked', value);
    168191                break;
    169192            default:
  • trunk/web-app/js/wizard.js

    r257 r260  
    3838    attachDateTimePickers();
    3939
    40     // table handlers
     40    // handle and initialize table(s)
    4141    attachTableEvents();
    4242    handleWizardTable();
    4343    new TableEditor().init('div.table', 'div.row', 'div.column');
    4444
    45     // accordeon(s)
     45    // initialize the ontology chooser
     46    new OntologyChooser().init();
     47
     48    // initialize accordeon(s)
    4649    $("#accordion").accordion();
    4750}
Note: See TracChangeset for help on using the changeset viewer.