Changeset 1374


Ignore:
Timestamp:
Jan 12, 2011, 2:48:07 PM (12 years ago)
Author:
work@…
Message:

workaround for #267

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/web-app/js/studywizard.js

    r1286 r1374  
    1313var warnOnRedirect = true;
    1414$(document).ready(function() {
    15     insertOnRedirectWarning();
    16     onStudyWizardPage();
     15        insertOnRedirectWarning();
     16        onStudyWizardPage();
    1717});
    1818
    1919function onStudyWizardPage() {
    20     // GENERAL
    21     attachHelpTooltips();
    22     attachDatePickers();
    23     attachDateTimePickers();
    24 
    25     // handle and initialize table(s)
    26     handleWizardTable();
    27     new TableEditor().init({
    28         tableIdentifier : 'div.tableEditor',
    29         rowIdentifier   : 'div.row',
    30         columnIdentifier: 'div.column',
    31         headerIdentifier: 'div.header'
    32     });
    33 
    34     // initialize the ontology chooser
    35     new OntologyChooser().init();
    36 
    37     // handle term selects
    38     new SelectAddMore().init({
    39         rel    : 'term',
    40         url    : baseUrl + '/termEditor',
    41         vars    : 'ontologies',
    42         label   : 'add more...',
    43         style   : 'addMore',
    44         onClose : function(scope) {
    45             refreshFlow();
    46         }
    47     });
    48 
    49     // handle template selects
    50     new SelectAddMore().init({
    51         rel    : 'template',
    52         url    : baseUrl + '/templateEditor',
    53         vars    : 'entity,ontologies',
    54         label   : 'add / modify..',
    55         style   : 'modify',
    56         onClose : function(scope) {
    57             refreshFlow();
    58         }
    59     });
    60 
    61     // Handle person selects
    62     new SelectAddMore().init({
    63         rel    : 'person',
    64         url    : baseUrl + '/person/list?dialog=true',
    65         vars    : 'person',
    66         label   : 'add / modify persons...',
    67         style   : 'modify',
    68         onClose : function(scope) {
    69             refreshFlow();
    70         }
    71     });
    72 
    73     // Handle personRole selects
    74     new SelectAddMore().init({
    75         rel    : 'role',
    76         url    : baseUrl + '/personRole/list?dialog=true',
    77         vars    : 'role',
    78         label   : 'add / modify roles...',
    79         style   : 'modify',
    80         onClose : function(scope) {
    81             refreshFlow();
    82         }
    83     });
    84 
    85     // initialize accordeon(s)
    86     $("#accordion").accordion({autoHeight: false});
     20        // GENERAL
     21        attachHelpTooltips();
     22        attachDatePickers();
     23        attachDateTimePickers();
     24
     25        // handle and initialize table(s)
     26        handleWizardTable();
     27        new TableEditor().init({
     28                tableIdentifier : 'div.tableEditor',
     29                rowIdentifier   : 'div.row',
     30                columnIdentifier: 'div.column',
     31                headerIdentifier: 'div.header'
     32        });
     33
     34        // initialize the ontology chooser
     35        new OntologyChooser().init();
     36
     37        // handle term selects
     38        new SelectAddMore().init({
     39                rel      : 'term',
     40                url      : baseUrl + '/termEditor',
     41                vars    : 'ontologies',
     42                label   : 'add more...',
     43                style   : 'addMore',
     44                onClose : function(scope) {
     45                        refreshFlow();
     46                }
     47        });
     48
     49        // handle template selects
     50        new SelectAddMore().init({
     51                rel      : 'template',
     52                url      : baseUrl + '/templateEditor',
     53                vars    : 'entity,ontologies',
     54                label   : 'add / modify..',
     55                style   : 'modify',
     56                onClose : function(scope) {
     57                        refreshFlow();
     58                }
     59        });
     60
     61        // Handle person selects
     62        new SelectAddMore().init({
     63                rel      : 'person',
     64                url      : baseUrl + '/person/list?dialog=true',
     65                vars    : 'person',
     66                label   : 'add / modify persons...',
     67                style   : 'modify',
     68                onClose : function(scope) {
     69                        refreshFlow();
     70                }
     71        });
     72
     73        // Handle personRole selects
     74        new SelectAddMore().init({
     75                rel      : 'role',
     76                url      : baseUrl + '/personRole/list?dialog=true',
     77                vars    : 'role',
     78                label   : 'add / modify roles...',
     79                style   : 'modify',
     80                onClose : function(scope) {
     81                        refreshFlow();
     82                }
     83        });
     84
     85        // initialize accordeon(s)
     86        $("#accordion").accordion({autoHeight: false});
    8787}
    8888
    … …  
    9090// user away from the wizard
    9191function insertOnRedirectWarning() {
    92     // find all anchors that lie outside the wizard
    93     $('a').each(function() {
    94         var element = $(this);
    95         var re = /^#/gi;
    96 
    97         // bind to the anchor?
    98         if (!element.attr('href').match(/^#/gi) && !element.attr('href').match(/\/([^\/]+)\/wizard\/pages/gi)) {
    99             // bind a warning to the onclick event
    100             element.bind('click',function() {
    101                 if (warnOnRedirect) {
    102                     return onDirectWarning();
    103                 }
    104             });
    105         }
    106     });
     92        // find all anchors that lie outside the wizard
     93        $('a').each(function() {
     94                var element = $(this);
     95                var re = /^#/gi;
     96
     97                // bind to the anchor?
     98                if (!element.attr('href').match(/^#/gi) && !element.attr('href').match(/\/([^\/]+)\/wizard\/pages/gi)) {
     99                        // bind a warning to the onclick event
     100                        element.bind('click', function() {
     101                                if (warnOnRedirect) {
     102                                        return onDirectWarning();
     103                                }
     104                        });
     105                }
     106        });
    107107}
    108108
    109109function onDirectWarning() {
    110     return confirm('Warning: navigating away from the wizard causes loss of work and unsaved data. Are you sure you want to continue?');
     110        return confirm('Warning: navigating away from the wizard causes loss of work and unsaved data. Are you sure you want to continue?');
    111111}
    112112
    113113// add datepickers to date fields
    114114function attachDatePickers() {
    115     $("input[type=text][rel$='date']").each(function() {
    116         $(this).datepicker({
    117             numberOfMonths: 3,
    118             showButtonPanel: true,
    119             changeMonth : true,
    120             changeYear  : true,
    121             dateFormat  : 'dd/mm/yy',
    122             yearRange   : 'c-80:c+20',
    123             altField    : '#' + $(this).attr('name') + 'Example',
    124             altFormat   : 'DD, d MM, yy'
    125         });
    126     });
     115        $("input[type=text][rel$='date']").each(function() {
     116                $(this).datepicker({
     117                        changeMonth : true,
     118                        changeYear  : true,
     119                        /*numberOfMonths: 3,*/
     120                        showButtonPanel: true,
     121                        dateFormat  : 'dd/mm/yy',
     122                        yearRange   : 'c-80:c+20',
     123                        altField        : '#' + $(this).attr('name') + 'Example',
     124                        altFormat   : 'DD, d MM, yy'
     125                });
     126        });
    127127}
    128128
    129129// add datetimepickers to date fields
    130130function attachDateTimePickers() {
    131     $("input[type=text][rel$='datetime']").each(function() {
    132         $(this).datepicker({
    133             changeMonth    : true,
    134             changeYear      : true,
    135             dateFormat      : 'dd/mm/yy',
    136             altField        : '#' + $(this).attr('name') + 'Example',
    137             altTimeField    : '#' + $(this).attr('name') + 'Example2',
    138             altFormat       : 'DD, d MM, yy',
    139             showTime        : true,
    140             time24h        : true
    141         });
    142     });
     131        $("input[type=text][rel$='datetime']").each(function() {
     132                $(this).datepicker({
     133                        changeMonth      : true,
     134                        changeYear        : true,
     135                        dateFormat        : 'dd/mm/yy',
     136                        altField                : '#' + $(this).attr('name') + 'Example',
     137                        altTimeField    : '#' + $(this).attr('name') + 'Example2',
     138                        altFormat          : 'DD, d MM, yy',
     139                        showTime                : true,
     140                        time24h          : true
     141                });
     142        });
    143143}
    144144
    … …  
    147147// the cummalative width of the columns in the header
    148148function handleWizardTable() {
    149     var that = this;
    150     var wizardTables = $(".ajaxFlow").find('div.tableEditor');
    151 
    152     wizardTables.each(function() {
    153         var wizardTable = $(this);
    154         var sliderContainer = (wizardTable.next().attr('class') == 'sliderContainer') ? wizardTable.next() : null;
    155         var header = wizardTable.find('div.header');
    156         var width = 20;
    157         var column = 0;
    158         var columns = [];
    159         var resized = [];
    160 
    161         // calculate total width of elements in header
    162         header.children().each(function() {
    163             // calculate width per column
    164             var c = $(this);
    165             var columnWidth    = c.width();
    166             var paddingWidth    = parseInt(c.css("padding-left"), 10) + parseInt(c.css("padding-right"), 10);
    167             var marginWidth    = parseInt(c.css("margin-left"), 10) + parseInt(c.css("margin-right"), 10);
    168             var borderWidth    = parseInt(c.css("borderLeftWidth"), 10) + parseInt(c.css("borderRightWidth"), 10);
    169 
    170             // add width...
    171             if (paddingWidth) columnWidth += paddingWidth;
    172             if (marginWidth) columnWidth += marginWidth;
    173             if (borderWidth) columnWidth += borderWidth;
    174             width += columnWidth;
    175 
    176             // remember column
    177             resized[ column ] = (c.attr('rel') == 'resized');
    178             columns[ column ] = c.width();
    179             column++;
    180         });
    181 
    182         // resize the header
    183         header.css({ width: width + 'px' });
    184 
    185         // set table row width and assume column widths are
    186         // identical to those in the header (css!)
    187         wizardTable.find('div.row').each(function() {
    188             var row = $(this);
    189             var column = 0;
    190             row.children().each(function() {
    191                 var child = $(this);
    192                 child.css({ width: columns[ column] + 'px' });
    193                 if (resized[ column ]) {
    194                     $(':input',child).each(function() {
    195                         $(this).css({width: (columns[ column ] - 10) + 'px'});
    196                     });
    197                 }
    198                 column++;
    199             });
    200             row.css({ width: width + 'px' });
    201         });
    202 
    203         // got a slider for this table?
    204         if (sliderContainer) {
    205             // handle slider
    206             if (header.width() < wizardTable.width()) {
    207                 // no, so hide it
    208                 sliderContainer.hide();
    209             } else {
    210                 sliderContainer.slider({
    211                     value   : 1,
    212                     min    : 1,
    213                     max    : header.width() - wizardTable.width(),
    214                     step    : 1,
    215                     slide: function(event, ui) {
    216                         wizardTable.find('div.header, div.row').css({ 'margin-left': ( 1 - ui.value ) + 'px' });
    217                     }
    218                 });
    219             }
    220         }
    221     });
     149        var that = this;
     150        var wizardTables = $(".ajaxFlow").find('div.tableEditor');
     151
     152        wizardTables.each(function() {
     153                var wizardTable = $(this);
     154                var sliderContainer = (wizardTable.next().attr('class') == 'sliderContainer') ? wizardTable.next() : null;
     155                var header = wizardTable.find('div.header');
     156                var width = 20;
     157                var column = 0;
     158                var columns = [];
     159                var resized = [];
     160
     161                // calculate total width of elements in header
     162                header.children().each(function() {
     163                        // calculate width per column
     164                        var c = $(this);
     165                        var columnWidth = c.width();
     166                        var paddingWidth = parseInt(c.css("padding-left"), 10) + parseInt(c.css("padding-right"), 10);
     167                        var marginWidth = parseInt(c.css("margin-left"), 10) + parseInt(c.css("margin-right"), 10);
     168                        var borderWidth = parseInt(c.css("borderLeftWidth"), 10) + parseInt(c.css("borderRightWidth"), 10);
     169
     170                        // add width...
     171                        if (paddingWidth) columnWidth += paddingWidth;
     172                        if (marginWidth) columnWidth += marginWidth;
     173                        if (borderWidth) columnWidth += borderWidth;
     174                        width += columnWidth;
     175
     176                        // remember column
     177                        resized[ column ] = (c.attr('rel') == 'resized');
     178                        columns[ column ] = c.width();
     179                        column++;
     180                });
     181
     182                // resize the header
     183                header.css({ width: width + 'px' });
     184
     185                // set table row width and assume column widths are
     186                // identical to those in the header (css!)
     187                wizardTable.find('div.row').each(function() {
     188                        var row = $(this);
     189                        var column = 0;
     190                        row.children().each(function() {
     191                                var child = $(this);
     192                                child.css({ width: columns[ column] + 'px' });
     193                                if (resized[ column ]) {
     194                                        $(':input', child).each(function() {
     195                                                $(this).css({width: (columns[ column ] - 10) + 'px'});
     196                                        });
     197                                }
     198                                column++;
     199                        });
     200                        row.css({ width: width + 'px' });
     201                });
     202
     203                // got a slider for this table?
     204                if (sliderContainer) {
     205                        // handle slider
     206                        if (header.width() < wizardTable.width()) {
     207                                // no, so hide it
     208                                sliderContainer.hide();
     209                        } else {
     210                                sliderContainer.slider({
     211                                        value   : 1,
     212                                        min      : 1,
     213                                        max      : header.width() - wizardTable.width(),
     214                                        step    : 1,
     215                                        slide: function(event, ui) {
     216                                                wizardTable.find('div.header, div.row').css({ 'margin-left': ( 1 - ui.value ) + 'px' });
     217                                        }
     218                                });
     219                        }
     220                }
     221        });
    222222}
    223223
    … …  
    231231// Show example of parsed data next to RelTime fields
    232232function showExampleReltime(inputfield) {
    233     var fieldName = inputfield.name;
    234 
    235     var successFunc = function(data, textStatus, request) {
    236                 var exampleField = document.getElementById( fieldName + "Example" );
    237 
    238         if( request.status == 200 && exampleField) {
    239             document.getElementById( fieldName + "Example" ).value = data;
    240         }
    241     };
    242 
    243     var errorFunc = function( request, textStatus, errorThrown ) {
    244                 var exampleField = document.getElementById( fieldName + "Example" );
    245 
    246         if(exampleField) {
    247                 // On error, clear the example field
    248                 document.getElementById( fieldName + "Example" ).value = "";
     233        var fieldName = inputfield.name;
     234
     235        var successFunc = function(data, textStatus, request) {
     236                var exampleField = document.getElementById(fieldName + "Example");
     237
     238                if (request.status == 200 && exampleField) {
     239                        document.getElementById(fieldName + "Example").value = data;
    249240                }
    250241        };
    251242
    252     $.ajax({
    253         url     : baseUrl + '/wizard/ajaxParseRelTime?reltime=' + inputfield.value,
    254         success : successFunc,
    255         error   : errorFunc
    256     });
     243        var errorFunc = function(request, textStatus, errorThrown) {
     244                var exampleField = document.getElementById(fieldName + "Example");
     245
     246                if (exampleField) {
     247                        // On error, clear the example field
     248                        document.getElementById(fieldName + "Example").value = "";
     249                }
     250        };
     251
     252        $.ajax({
     253                url      : baseUrl + '/wizard/ajaxParseRelTime?reltime=' + inputfield.value,
     254                success : successFunc,
     255                error   : errorFunc
     256        });
    257257}
    258258
    … …  
    270270                action: baseUrl + '/file/upload', // I disabled uploads in this example for security reaaons
    271271                data : {},
    272                 name : field_id,
    273                 autoSubmit: true,
    274                 onChange : function(file, ext){
    275                     oldFile = $('#' + field_id).val();
    276                     if( oldFile != '' ) {
    277                         if( !confirm( 'The old file is deleted when uploading a new file. Do you want to continue?') ) {
    278                             return false;
    279                         }
    280                     }
    281 
    282                     this.setData({
    283                             'field':   field_id,
    284                             'oldFile': oldFile
    285                     });
    286 
    287                     // Give feedback to the user
    288                     $('#' + field_id + 'Example').html('Uploading ' + createFileHTML( file ));
    289                     $('#' + field_id + 'Delete').hide();
     272                name : field_id,
     273                autoSubmit: true,
     274                onChange : function(file, ext) {
     275                        oldFile = $('#' + field_id).val();
     276                        if (oldFile != '') {
     277                                if (!confirm('The old file is deleted when uploading a new file. Do you want to continue?')) {
     278                                        return false;
     279                                }
     280                        }
     281
     282                        this.setData({
     283                                'field':   field_id,
     284                                'oldFile': oldFile
     285                        });
     286
     287                        // Give feedback to the user
     288                        $('#' + field_id + 'Example').html('Uploading ' + createFileHTML(file));
     289                        $('#' + field_id + 'Delete').hide();
    290290
    291291                },
    292                 onComplete : function(file, response){
    293                     if( response == "" ) {
    294                         $('#' + field_id).val( '' );
    295                         $('#' + field_id + 'Example').html('<span class="error">Error uploading ' + createFileHTML( file ) + '</span>' );
    296                             $('#' + field_id + 'Delete').hide();
    297                     } else {
    298                         $('#' + field_id).val( response );
    299                         $('#' + field_id + 'Example').html('Uploaded ' + createFileHTML( file ) );
    300                             $('#' + field_id + 'Delete').show();
    301                     }
    302                 }
    303         });
    304 }
    305 
    306 function deleteFile( field_id ) {
    307         $('#' + field_id).val( '*deleted*' );
    308         $('#' + field_id + 'Example').html('File deleted' );
     292                onComplete : function(file, response) {
     293                        if (response == "") {
     294                                $('#' + field_id).val('');
     295                                $('#' + field_id + 'Example').html('<span class="error">Error uploading ' + createFileHTML(file) + '</span>');
     296                                $('#' + field_id + 'Delete').hide();
     297                        } else {
     298                                $('#' + field_id).val(response);
     299                                $('#' + field_id + 'Example').html('Uploaded ' + createFileHTML(file));
     300                                $('#' + field_id + 'Delete').show();
     301                        }
     302                }
     303        });
     304}
     305
     306function deleteFile(field_id) {
     307        $('#' + field_id).val('*deleted*');
     308        $('#' + field_id + 'Example').html('File deleted');
    309309        $('#' + field_id + 'Delete').hide();
    310310}
    311311
    312 function createFileHTML( filename ) {
    313     return '<a target="_blank" href="' + baseUrl + '/file/get/' + filename + '">' + filename + '</a>';
     312function createFileHTML(filename) {
     313        return '<a target="_blank" href="' + baseUrl + '/file/get/' + filename + '">' + filename + '</a>';
    314314}
    315315
    … …  
    324324 * N.B. The publication must be added in grails when the form is submitted
    325325 */
    326 function addPublication( element_id ) {
    327   /* Find publication ID and add to form */
    328   jQuery.ajax({
    329     type:"GET",
    330     url: baseUrl + "/publication/getID?" +  $("#" + element_id + "_form").serialize(),
    331     success: function(data,textStatus){
    332         var id = parseInt( data );
    333 
    334         // Put the ID in the array, but only if it does not yet exist
    335         var ids = getPublicationIds( element_id );
    336 
    337         if( $.inArray(id, ids ) == -1 ) {
    338             ids[ ids.length ] = id;
    339             $( '#' + element_id + '_ids' ).val( ids.join( ',' ) );
    340 
    341             // Show the title and a remove button
    342             showPublication( element_id, id, $("#" + element_id + "_form").find( '[name=publication-title]' ).val(), $("#" + element_id + "_form").find( '[name=publication-authorsList]' ).val(), ids.length - 1 );
    343 
    344             // Hide the 'none box'
    345             $( '#' + element_id + '_none' ).css( 'display', 'none' );
    346         }
    347     },
    348     error:function(XMLHttpRequest,textStatus,errorThrown){ alert( "Publication could not be added." ) }
    349   }); return false;
     326function addPublication(element_id) {
     327        /* Find publication ID and add to form */
     328        jQuery.ajax({
     329                type:"GET",
     330                url: baseUrl + "/publication/getID?" + $("#" + element_id + "_form").serialize(),
     331                success: function(data, textStatus) {
     332                        var id = parseInt(data);
     333
     334                        // Put the ID in the array, but only if it does not yet exist
     335                        var ids = getPublicationIds(element_id);
     336
     337                        if ($.inArray(id, ids) == -1) {
     338                                ids[ ids.length ] = id;
     339                                $('#' + element_id + '_ids').val(ids.join(','));
     340
     341                                // Show the title and a remove button
     342                                showPublication(element_id, id, $("#" + element_id + "_form").find('[name=publication-title]').val(), $("#" + element_id + "_form").find('[name=publication-authorsList]').val(), ids.length - 1);
     343
     344                                // Hide the 'none box'
     345                                $('#' + element_id + '_none').css('display', 'none');
     346                        }
     347                },
     348                error:function(XMLHttpRequest, textStatus, errorThrown) {
     349                        alert("Publication could not be added.")
     350                }
     351        });
     352        return false;
    350353}
    351354
    … …  
    354357 * N.B. The deletion must be handled in grails when the form is submitted
    355358 */
    356 function removePublication( element_id, id ) {
    357     var ids = getPublicationIds( element_id );
    358     if( $.inArray(id, ids ) != -1 ) {
    359         // Remove the ID
    360         ids.splice($.inArray(id, ids ), 1);
    361         $( '#' + element_id + '_ids' ).val( ids.join( ',' ) );
    362 
    363         // Remove the title from the list
    364         var li = $( "#" + element_id + '_item_' + id );
    365         if( li ) {
    366             li.remove();
    367         }
    368 
    369         // Show the 'none box' if needed
    370         if( ids.length == 0 ) {
    371             $( '#' + element_id + '_none' ).css( 'display', 'inline' );
    372         }
    373 
    374     }
     359function removePublication(element_id, id) {
     360        var ids = getPublicationIds(element_id);
     361        if ($.inArray(id, ids) != -1) {
     362                // Remove the ID
     363                ids.splice($.inArray(id, ids), 1);
     364                $('#' + element_id + '_ids').val(ids.join(','));
     365
     366                // Remove the title from the list
     367                var li = $("#" + element_id + '_item_' + id);
     368                if (li) {
     369                        li.remove();
     370                }
     371
     372                // Show the 'none box' if needed
     373                if (ids.length == 0) {
     374                        $('#' + element_id + '_none').css('display', 'inline');
     375                }
     376
     377        }
    375378}
    376379
    … …  
    379382 * The array contains integers
    380383 */
    381 function getPublicationIds( element_id ) {
    382     var ids = $( '#' + element_id + '_ids' ).val();
    383     if( ids == "" ) {
    384         return new Array();
    385     } else {
    386         ids_array = ids.split( ',' );
    387         for( var i = 0; i < ids_array.length; i++ ) {
    388             ids_array[ i ] = parseInt( ids_array[ i ] );
    389         }
    390 
    391         return ids_array;
    392     }
     384function getPublicationIds(element_id) {
     385        var ids = $('#' + element_id + '_ids').val();
     386        if (ids == "") {
     387                return new Array();
     388        } else {
     389                ids_array = ids.split(',');
     390                for (var i = 0; i < ids_array.length; i++) {
     391                        ids_array[ i ] = parseInt(ids_array[ i ]);
     392                }
     393
     394                return ids_array;
     395        }
    393396}
    394397
    … …  
    396399 * Shows a publication on the screen
    397400 */
    398 function showPublication( element_id, id, title, authors, nr ) {
    399     var deletebutton = document.createElement( 'img' );
    400     deletebutton.className = 'famfamfam delete_button';
    401     deletebutton.setAttribute( 'alt', 'remove this publication' );
    402     deletebutton.setAttribute( 'src', baseUrl + '/plugins/famfamfam-1.0.1/images/icons/delete.png' );
    403     deletebutton.onclick = function() { removePublication(  element_id, id ); return false; };
    404 
    405     var titleDiv = document.createElement( 'div' );
    406     titleDiv.className = 'title' ;
    407     titleDiv.appendChild( document.createTextNode( title ) );
    408 
    409     var authorsDiv = document.createElement( 'div' );
    410     authorsDiv.className = 'authors';
    411     authorsDiv.appendChild( document.createTextNode( authors ) );
    412 
    413     var li = document.createElement( 'li' );
    414     li.setAttribute( 'id', element_id + '_item_' + id );
    415     li.className = nr % 2 == 0 ? 'even' : 'odd';
    416     li.appendChild( deletebutton );
    417     li.appendChild( titleDiv );
    418     li.appendChild( authorsDiv );
    419 
    420     $( '#' + element_id + '_list' ).append( li );
     401function showPublication(element_id, id, title, authors, nr) {
     402        var deletebutton = document.createElement('img');
     403        deletebutton.className = 'famfamfam delete_button';
     404        deletebutton.setAttribute('alt', 'remove this publication');
     405        deletebutton.setAttribute('src', baseUrl + '/plugins/famfamfam-1.0.1/images/icons/delete.png');
     406        deletebutton.onclick = function() {
     407                removePublication(element_id, id);
     408                return false;
     409        };
     410
     411        var titleDiv = document.createElement('div');
     412        titleDiv.className = 'title';
     413        titleDiv.appendChild(document.createTextNode(title));
     414
     415        var authorsDiv = document.createElement('div');
     416        authorsDiv.className = 'authors';
     417        authorsDiv.appendChild(document.createTextNode(authors));
     418
     419        var li = document.createElement('li');
     420        li.setAttribute('id', element_id + '_item_' + id);
     421        li.className = nr % 2 == 0 ? 'even' : 'odd';
     422        li.appendChild(deletebutton);
     423        li.appendChild(titleDiv);
     424        li.appendChild(authorsDiv);
     425
     426        $('#' + element_id + '_list').append(li);
    421427}
    422428
    … …  
    424430 * Creates the dialog for searching a publication
    425431 */
    426 function createPublicationDialog( element_id ) {
    427     /* Because of the AJAX loading of this page, the dialog will be created
    428      * again, when the page is reloaded. This raises problems when reading the
    429      * values of the selected publication. For that reason we check whether the
    430      * dialog already exists
    431      */
    432     if( $( "." + element_id + "_publication_dialog" ).length == 0 ) {
    433         $("#" + element_id + "_dialog").dialog({
    434             title   : "Add publication",
    435             autoOpen: false,
    436             width   : 800,
    437             height  : 400,
    438             modal   : true,
    439             dialogClass : element_id + "_publication_dialog",
    440             position: "center",
    441             buttons : {
    442                Add  : function() { addPublication( element_id ); $(this).dialog("close"); },
    443                Close  : function() { $(this).dialog("close"); }
    444             },
    445             close   : function() {
    446                 /* closeFunc(this); */
    447             }
    448         }).width(790).height(400);
    449     } else {
    450        /* If a dialog already exists, remove the new div */
    451        $("#" + element_id + "_dialog").remove();
    452     }
     432function createPublicationDialog(element_id) {
     433        /* Because of the AJAX loading of this page, the dialog will be created
     434         * again, when the page is reloaded. This raises problems when reading the
     435         * values of the selected publication. For that reason we check whether the
     436         * dialog already exists
     437         */
     438        if ($("." + element_id + "_publication_dialog").length == 0) {
     439                $("#" + element_id + "_dialog").dialog({
     440                        title   : "Add publication",
     441                        autoOpen: false,
     442                        width   : 800,
     443                        height  : 400,
     444                        modal   : true,
     445                        dialogClass : element_id + "_publication_dialog",
     446                        position: "center",
     447                        buttons : {
     448                                Add  : function() {
     449                                        addPublication(element_id);
     450                                        $(this).dialog("close");
     451                                },
     452                                Close  : function() {
     453                                        $(this).dialog("close");
     454                                }
     455                        },
     456                        close   : function() {
     457                                /* closeFunc(this); */
     458                        }
     459                }).width(790).height(400);
     460        } else {
     461                /* If a dialog already exists, remove the new div */
     462                $("#" + element_id + "_dialog").remove();
     463        }
    453464}
    454465
    … …  
    456467 * Opens the dialog for searching a publication
    457468 */
    458 function openPublicationDialog( element_id ) {
    459     // Empty input field
    460     var field = $( '#' + element_id );
    461     field.autocomplete( 'close' );
    462     field.val( '' );
    463 
    464     // Show the dialog
    465     $( '#' + element_id + '_dialog' ).dialog( 'open' );
    466     field.focus();
    467 
    468     // Disable 'Add' button
    469     enableButton( '.' + element_id + '_publication_dialog', 'Add', false );
     469function openPublicationDialog(element_id) {
     470        // Empty input field
     471        var field = $('#' + element_id);
     472        field.autocomplete('close');
     473        field.val('');
     474
     475        // Show the dialog
     476        $('#' + element_id + '_dialog').dialog('open');
     477        field.focus();
     478
     479        // Disable 'Add' button
     480        enableButton('.' + element_id + '_publication_dialog', 'Add', false);
    470481}
    471482
    … …  
    473484 * Finds a button in a jquery dialog by name
    474485 */
    475 function getDialogButton( dialog_selector, button_name )
    476 {
    477   var buttons = $( dialog_selector + ' .ui-dialog-buttonpane button' );
    478   for ( var i = 0; i < buttons.length; ++i )
    479   {
    480      var jButton = $( buttons[i] );
    481      if ( jButton.text() == button_name )
    482      {
    483          return jButton;
    484      }
    485   }
    486 
    487   return null;
     486function getDialogButton(dialog_selector, button_name) {
     487        var buttons = $(dialog_selector + ' .ui-dialog-buttonpane button');
     488        for (var i = 0; i < buttons.length; ++i) {
     489                var jButton = $(buttons[i]);
     490                if (jButton.text() == button_name) {
     491                        return jButton;
     492                }
     493        }
     494
     495        return null;
    488496}
    489497
    … …  
    491499 * Enables or disables a button in a selected dialog
    492500 */
    493 function enableButton(dialog_selector, button_name, enable)
    494 {
    495     var dlgButton = getDialogButton( dialog_selector, button_name );
    496 
    497     if( dlgButton ) {
    498         if (enable) {
    499             dlgButton.attr('disabled', '');
    500             dlgButton.removeClass('ui-state-disabled');
    501         } else {
    502             dlgButton.attr('disabled', 'disabled');
    503             dlgButton.addClass('ui-state-disabled');
    504         }
    505     }
     501function enableButton(dialog_selector, button_name, enable) {
     502        var dlgButton = getDialogButton(dialog_selector, button_name);
     503
     504        if (dlgButton) {
     505                if (enable) {
     506                        dlgButton.attr('disabled', '');
     507                        dlgButton.removeClass('ui-state-disabled');
     508                } else {
     509                        dlgButton.attr('disabled', 'disabled');
     510                        dlgButton.addClass('ui-state-disabled');
     511                }
     512        }
    506513}
    507514
    … …  
    516523 * N.B. The contact must be added in grails when the form is submitted
    517524 */
    518 function addContact( element_id ) {
    519   // FInd person and role IDs
    520   var person_id = $( '#' + element_id + '_person' ).val();
    521   var role_id = $( '#' + element_id + '_role' ).val();
    522 
    523   if( person_id == "" || person_id == 0 || role_id == "" || role_id == 0 ) {
    524         alert( "Please select both a person and a role." );
    525         return false;
    526   }
    527 
    528   var combination = person_id + '-' + role_id;
    529 
    530     // Put the ID in the array, but only if it does not yet exist
    531     var ids = getContactIds( element_id );
    532     if( $.inArray(combination, ids ) == -1 ) {
    533         ids[ ids.length ] = combination;
    534         $( '#' + element_id + '_ids' ).val( ids.join( ',' ) );
    535 
    536         // Show the title and a remove button
    537         showContact( element_id, combination, $("#" + element_id + "_person  :selected").text(), $("#" + element_id + "_role :selected").text(), ids.length - 1 );
    538 
    539         // Hide the 'none box'
    540         $( '#' + element_id + '_none' ).css( 'display', 'none' );
    541     }
     525function addContact(element_id) {
     526        // FInd person and role IDs
     527        var person_id = $('#' + element_id + '_person').val();
     528        var role_id = $('#' + element_id + '_role').val();
     529
     530        if (person_id == "" || person_id == 0 || role_id == "" || role_id == 0) {
     531                alert("Please select both a person and a role.");
     532                return false;
     533        }
     534
     535        var combination = person_id + '-' + role_id;
     536
     537        // Put the ID in the array, but only if it does not yet exist
     538        var ids = getContactIds(element_id);
     539        if ($.inArray(combination, ids) == -1) {
     540                ids[ ids.length ] = combination;
     541                $('#' + element_id + '_ids').val(ids.join(','));
     542
     543                // Show the title and a remove button
     544                showContact(element_id, combination, $("#" + element_id + "_person  :selected").text(), $("#" + element_id + "_role :selected").text(), ids.length - 1);
     545
     546                // Hide the 'none box'
     547                $('#' + element_id + '_none').css('display', 'none');
     548        }
    542549
    543550        return true;
    … …  
    548555 * N.B. The deletion must be handled in grails when the form is submitted
    549556 */
    550 function removeContact( element_id, combination ) {
    551     var ids = getContactIds( element_id );
    552     if( $.inArray(combination, ids ) != -1 ) {
    553         // Remove the ID
    554         ids.splice($.inArray(combination, ids ), 1);
    555         $( '#' + element_id + '_ids' ).val( ids.join( ',' ) );
    556 
    557         // Remove the title from the list
    558         var li = $( "#" + element_id + '_item_' + combination );
    559         if( li ) {
    560             li.remove();
    561         }
    562 
    563         // Show the 'none box' if needed
    564         if( ids.length == 0 ) {
    565             $( '#' + element_id + '_none' ).css( 'display', 'inline' );
    566         }
    567 
    568     }
     557function removeContact(element_id, combination) {
     558        var ids = getContactIds(element_id);
     559        if ($.inArray(combination, ids) != -1) {
     560                // Remove the ID
     561                ids.splice($.inArray(combination, ids), 1);
     562                $('#' + element_id + '_ids').val(ids.join(','));
     563
     564                // Remove the title from the list
     565                var li = $("#" + element_id + '_item_' + combination);
     566                if (li) {
     567                        li.remove();
     568                }
     569
     570                // Show the 'none box' if needed
     571                if (ids.length == 0) {
     572                        $('#' + element_id + '_none').css('display', 'inline');
     573                }
     574
     575        }
    569576}
    570577
    … …  
    573580 * The array contains string formatted like '[person_id]-[role_id]'
    574581 */
    575 function getContactIds( element_id ) {
    576     var ids = $( '#' + element_id + '_ids' ).val();
    577     if( ids == "" ) {
    578         return new Array();
    579     } else {
    580         ids_array = ids.split( ',' );
    581 
    582         return ids_array;
    583     }
     582function getContactIds(element_id) {
     583        var ids = $('#' + element_id + '_ids').val();
     584        if (ids == "") {
     585                return new Array();
     586        } else {
     587                ids_array = ids.split(',');
     588
     589                return ids_array;
     590        }
    584591}
    585592
    … …  
    587594 * Shows a contact on the screen
    588595 */
    589 function showContact( element_id, id, fullName, role, nr ) {
    590     var deletebutton = document.createElement( 'img' );
    591     deletebutton.className = 'famfamfam delete_button';
    592     deletebutton.setAttribute( 'alt', 'remove this person' );
    593     deletebutton.setAttribute( 'src', baseUrl + '/plugins/famfamfam-1.0.1/images/icons/delete.png' );
    594     deletebutton.onclick = function() { removeContact(  element_id, id ); return false; };
    595 
    596     var titleDiv = document.createElement( 'div' );
    597     titleDiv.className = 'person' ;
    598     titleDiv.appendChild( document.createTextNode( fullName ) );
    599 
    600     var authorsDiv = document.createElement( 'div' );
    601     authorsDiv.className = 'role';
    602     authorsDiv.appendChild( document.createTextNode( role ) );
    603 
    604     var li = document.createElement( 'li' );
    605     li.setAttribute( 'id', element_id + '_item_' + id );
    606     li.className = nr % 2 == 0 ? 'even' : 'odd';
    607     li.appendChild( deletebutton );
    608     li.appendChild( titleDiv );
    609     li.appendChild( authorsDiv );
    610 
    611     $( '#' + element_id + '_list' ).append( li );
     596function showContact(element_id, id, fullName, role, nr) {
     597        var deletebutton = document.createElement('img');
     598        deletebutton.className = 'famfamfam delete_button';
     599        deletebutton.setAttribute('alt', 'remove this person');
     600        deletebutton.setAttribute('src', baseUrl + '/plugins/famfamfam-1.0.1/images/icons/delete.png');
     601        deletebutton.onclick = function() {
     602                removeContact(element_id, id);
     603                return false;
     604        };
     605
     606        var titleDiv = document.createElement('div');
     607        titleDiv.className = 'person';
     608        titleDiv.appendChild(document.createTextNode(fullName));
     609
     610        var authorsDiv = document.createElement('div');
     611        authorsDiv.className = 'role';
     612        authorsDiv.appendChild(document.createTextNode(role));
     613
     614        var li = document.createElement('li');
     615        li.setAttribute('id', element_id + '_item_' + id);
     616        li.className = nr % 2 == 0 ? 'even' : 'odd';
     617        li.appendChild(deletebutton);
     618        li.appendChild(titleDiv);
     619        li.appendChild(authorsDiv);
     620
     621        $('#' + element_id + '_list').append(li);
    612622}
    613623
    … …  
    621631 * Adds a user to the study using javascript
    622632 */
    623 function addUser( element_id ) {
    624     /* Find publication ID and add to form */
    625     id = parseInt( $("#" + element_id + "_form select").val() );
    626 
    627     // Put the ID in the array, but only if it does not yet exist
    628     var ids = getUserIds( element_id );
    629 
    630     if( $.inArray (id, ids ) == -1 ) {
    631         ids[ ids.length ] = id;
    632         $( '#' + element_id + '_ids' ).val( ids.join( ',' ) );
    633 
    634         // Show the title and a remove button
    635         showUser( element_id, id, $("#" + element_id + "_form select option:selected").text(), ids.length - 1 );
    636 
    637         // Hide the 'none box'
    638         $( '#' + element_id + '_none' ).css( 'display', 'none' );
    639     }
    640 
    641     return false;
     633function addUser(element_id) {
     634        /* Find publication ID and add to form */
     635        id = parseInt($("#" + element_id + "_form select").val());
     636
     637        // Put the ID in the array, but only if it does not yet exist
     638        var ids = getUserIds(element_id);
     639
     640        if ($.inArray(id, ids) == -1) {
     641                ids[ ids.length ] = id;
     642                $('#' + element_id + '_ids').val(ids.join(','));
     643
     644                // Show the title and a remove button
     645                showUser(element_id, id, $("#" + element_id + "_form select option:selected").text(), ids.length - 1);
     646
     647                // Hide the 'none box'
     648                $('#' + element_id + '_none').css('display', 'none');
     649        }
     650
     651        return false;
    642652}
    643653
    … …  
    646656 * N.B. The deletion must be handled in grails when the form is submitted
    647657 */
    648 function removeUser( element_id, id ) {
    649     var ids = getUserIds( element_id );
    650     if( $.inArray(id, ids ) != -1 ) {
    651         // Remove the ID
    652         ids.splice($.inArray(id, ids ), 1);
    653         $( '#' + element_id + '_ids' ).val( ids.join( ',' ) );
    654 
    655         // Remove the title from the list
    656         var li = $( "#" + element_id + '_item_' + id );
    657         if( li ) {
    658             li.remove();
    659         }
    660 
    661         // Show the 'none box' if needed
    662         if( ids.length == 0 ) {
    663             $( '#' + element_id + '_none' ).css( 'display', 'inline' );
    664         }
    665 
    666     }
     658function removeUser(element_id, id) {
     659        var ids = getUserIds(element_id);
     660        if ($.inArray(id, ids) != -1) {
     661                // Remove the ID
     662                ids.splice($.inArray(id, ids), 1);
     663                $('#' + element_id + '_ids').val(ids.join(','));
     664
     665                // Remove the title from the list
     666                var li = $("#" + element_id + '_item_' + id);
     667                if (li) {
     668                        li.remove();
     669                }
     670
     671                // Show the 'none box' if needed
     672                if (ids.length == 0) {
     673                        $('#' + element_id + '_none').css('display', 'inline');
     674                }
     675
     676        }
    667677}
    668678
    … …  
    671681 * The array contains integers
    672682 */
    673 function getUserIds( element_id ) {
    674     var ids = $( '#' + element_id + '_ids' ).val();
    675     if( ids == "" ) {
    676         return new Array();
    677     } else {
    678         ids_array = ids.split( ',' );
    679         for( var i = 0; i < ids_array.length; i++ ) {
    680             ids_array[ i ] = parseInt( ids_array[ i ] );
    681         }
    682 
    683         return ids_array;
    684     }
     683function getUserIds(element_id) {
     684        var ids = $('#' + element_id + '_ids').val();
     685        if (ids == "") {
     686                return new Array();
     687        } else {
     688                ids_array = ids.split(',');
     689                for (var i = 0; i < ids_array.length; i++) {
     690                        ids_array[ i ] = parseInt(ids_array[ i ]);
     691                }
     692
     693                return ids_array;
     694        }
    685695}
    686696
    … …  
    688698 * Shows a publication on the screen
    689699 */
    690 function showUser( element_id, id, username, nr ) {
    691     var deletebutton = document.createElement( 'img' );
    692     deletebutton.className = 'famfamfam delete_button';
    693     deletebutton.setAttribute( 'alt', 'remove this user' );
    694     deletebutton.setAttribute( 'src', baseUrl + '/plugins/famfamfam-1.0.1/images/icons/delete.png' );
    695     deletebutton.onclick = function() { removeUser(  element_id, id ); return false; };
    696 
    697     var titleDiv = document.createElement( 'div' );
    698     titleDiv.className = 'username' ;
    699     titleDiv.appendChild( document.createTextNode( username ) );
    700 
    701     var li = document.createElement( 'li' );
    702     li.setAttribute( 'id', element_id + '_item_' + id );
    703     li.className = nr % 2 == 0 ? 'even' : 'odd';
    704     li.appendChild( deletebutton );
    705     li.appendChild( titleDiv );
    706 
    707     $( '#' + element_id + '_list' ).append( li );
     700function showUser(element_id, id, username, nr) {
     701        var deletebutton = document.createElement('img');
     702        deletebutton.className = 'famfamfam delete_button';
     703        deletebutton.setAttribute('alt', 'remove this user');
     704        deletebutton.setAttribute('src', baseUrl + '/plugins/famfamfam-1.0.1/images/icons/delete.png');
     705        deletebutton.onclick = function() {
     706                removeUser(element_id, id);
     707                return false;
     708        };
     709
     710        var titleDiv = document.createElement('div');
     711        titleDiv.className = 'username';
     712        titleDiv.appendChild(document.createTextNode(username));
     713
     714        var li = document.createElement('li');
     715        li.setAttribute('id', element_id + '_item_' + id);
     716        li.className = nr % 2 == 0 ? 'even' : 'odd';
     717        li.appendChild(deletebutton);
     718        li.appendChild(titleDiv);
     719
     720        $('#' + element_id + '_list').append(li);
    708721}
    709722
    … …  
    711724 * Creates the dialog for searching a publication
    712725 */
    713 function createUserDialog( element_id ) {
    714     /* Because of the AJAX loading of this page, the dialog will be created
    715      * again, when the page is reloaded. This raises problems when reading the
    716      * values of the selected publication. For that reason we check whether the
    717      * dialog already exists
    718      */
    719     if( $( "." + element_id + "_user_dialog" ).length == 0 ) {
    720         $("#" + element_id + "_dialog").dialog({
    721             title   : "Add user",
    722             autoOpen: false,
    723             width   : 800,
    724             height  : 400,
    725             modal   : true,
    726             dialogClass : element_id + "_user_dialog",
    727             position: "center",
    728             buttons : {
    729                Add  : function() { addUser( element_id ); $(this).dialog("close"); },
    730                Close  : function() { $(this).dialog("close"); }
    731             },
    732             close   : function() {
    733                 /* closeFunc(this); */
    734             }
    735         }).width(790).height(400);
    736     } else {
    737        /* If a dialog already exists, remove the new div */
    738        $("#" + element_id + "_dialog").remove();
    739     }
     726function createUserDialog(element_id) {
     727        /* Because of the AJAX loading of this page, the dialog will be created
     728         * again, when the page is reloaded. This raises problems when reading the
     729         * values of the selected publication. For that reason we check whether the
     730         * dialog already exists
     731         */
     732        if ($("." + element_id + "_user_dialog").length == 0) {
     733                $("#" + element_id + "_dialog").dialog({
     734                        title   : "Add user",
     735                        autoOpen: false,
     736                        width   : 800,
     737                        height  : 400,
     738                        modal   : true,
     739                        dialogClass : element_id + "_user_dialog",
     740                        position: "center",
     741                        buttons : {
     742                                Add  : function() {
     743                                        addUser(element_id);
     744                                        $(this).dialog("close");
     745                                },
     746                                Close  : function() {
     747                                        $(this).dialog("close");
     748                                }
     749                        },
     750                        close   : function() {
     751                                /* closeFunc(this); */
     752                        }
     753                }).width(790).height(400);
     754        } else {
     755                /* If a dialog already exists, remove the new div */
     756                $("#" + element_id + "_dialog").remove();
     757        }
    740758}
    741759
    … …  
    743761 * Opens the dialog for searching a publication
    744762 */
    745 function openUserDialog( element_id ) {
    746     // Empty input field
    747     var field = $( '#' + element_id );
    748     field.val( '' );
    749 
    750     // Show the dialog
    751     $( '#' + element_id + '_dialog' ).dialog( 'open' );
    752     field.focus();
    753 
    754     // Disable 'Add' button
    755     //enableButton( '.' + element_id + '_user_dialog', 'Add', false );
    756 }
     763function openUserDialog(element_id) {
     764        // Empty input field
     765        var field = $('#' + element_id);
     766        field.val('');
     767
     768        // Show the dialog
     769        $('#' + element_id + '_dialog').dialog('open');
     770        field.focus();
     771
     772        // Disable 'Add' button
     773        //enableButton( '.' + element_id + '_user_dialog', 'Add', false );
     774}
Note: See TracChangeset for help on using the changeset viewer.