Changeset 1305 for trunk/web-app


Ignore:
Timestamp:
Dec 21, 2010, 2:22:33 PM (12 years ago)
Author:
t.w.abma@…
Message:
  • fixed minor bugs in the import wizard introduced by rewritten studywizard (JS/CSS code was still partly based on study wizard)
File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r1266 r1305  
    11/**
    2  * wizard javascript functions
     2 * study wizard javascript functions
    33 *
    44 * @author  Jeroen Wesbeek
    55 * @since   20100115
    66 * @package wizard
    7  * @see     dbnp.studycapturing.WizardTagLib
    8  * @see     dbnp.studycapturing.WizardController
    97 *
    108 * Revision information:
    … …  
    1614$(document).ready(function() {
    1715    insertOnRedirectWarning();
    18     onMissingPropertiesPage();
     16    onStudyWizardPage();
    1917});
    2018
    21 // runs when document is ready or a wizard action has been performs
    22 // @see _wizard.gsp, _navigation.gsp, _subjects.gsp
    23 function onMissingPropertiesPage() {
     19function onStudyWizardPage() {
    2420    // GENERAL
    2521    attachHelpTooltips();
    … …  
    2824
    2925    // handle and initialize table(s)
    30     attachTableEvents();
    3126    handleWizardTable();
    32     new TableEditor().init('div.table', 'div.row', 'div.column');
     27    new TableEditor().init({
     28        tableIdentifier : 'div.tableEditor',
     29        rowIdentifier   : 'div.row',
     30        columnIdentifier: 'div.column',
     31        headerIdentifier: 'div.header'
     32    });
    3333
    3434    // initialize the ontology chooser
    35    /* new OntologyChooser().init();
     35    new OntologyChooser().init();
    3636
    3737    // handle term selects
    … …  
    4343        style   : 'addMore',
    4444        onClose : function(scope) {
    45             refreshWebFlow();
     45            refreshFlow();
    4646        }
    4747    });
    … …  
    5555        style   : 'modify',
    5656        onClose : function(scope) {
    57             refreshWebFlow();
     57            refreshFlow();
    5858        }
    5959    });
    … …  
    6767        style   : 'modify',
    6868        onClose : function(scope) {
    69             refreshWebFlow();
     69            refreshFlow();
    7070        }
    7171    });
    … …  
    7979        style   : 'modify',
    8080        onClose : function(scope) {
    81             refreshWebFlow();
     81            refreshFlow();
    8282        }
    8383    });
    8484
    8585    // initialize accordeon(s)
    86     $("#accordion").accordion();
    87     */
     86    $("#accordion").accordion({autoHeight: false});
    8887}
    8988
    … …  
    112111}
    113112
    114 // attach help tooltips
    115 function attachHelpTooltips() {
    116     // attach help action on all wizard help icons
    117     $('div#wizard').find('div.helpIcon').each(function() {
    118         helpIcon = $(this);
    119         helpContent = helpIcon.parent().find('div.helpContent');
    120         if (!helpContent.html()) {
    121             helpContent = helpIcon.parent().parent().find('div.helpContent');
    122         }
    123 
    124         // handle special content
    125         var html = (helpContent.html()) ? helpContent.html() : '';
    126         if (html) {
    127             var specialContent = html.match(/\[([^:]+)\:([^\]]+)\]/);
    128             if (specialContent) {
    129                 // replace content by calling a helper function
    130                 eval(specialContent[1] + "('" + specialContent[2] + "',helpContent)");
    131             }
    132 
    133             // attach tooltip
    134             helpIcon.qtip({
    135                 content: 'leftMiddle',
    136                 position: {
    137                     corner: {
    138                         tooltip: 'leftMiddle',
    139                         target: 'rightMiddle'
    140                     }
    141                 },
    142                 style: {
    143                     border: {
    144                         width: 5,
    145                         radius: 10
    146                     },
    147                     padding: 10,
    148                     textAlign: 'center',
    149                     tip: true,
    150                     name: 'blue'
    151                 },
    152                 content: helpContent.html(),
    153                 show: 'mouseover',
    154                 hide: 'mouseout',
    155                 api: {
    156                     beforeShow: function() {
    157                         // not used at this moment
    158                     }
    159                 }
    160             });
    161 
    162             // remove helpcontent div as we don't need it anymore
    163             helpContent.remove();
    164         }
    165     });
    166 }
    167 
    168 // insert a youtube player in a certain element
    169 function youtube(video, element) {
    170     // insert a div we will replace with a youtube player
    171     element.html("<div id='" + video + "'></div>");
    172 
    173     // insert youtube player
    174     var params = { allowScriptAccess: "always" };
    175     var atts = { id: 'myytplayer_' + video };
    176     swfobject.embedSWF("http://www.youtube.com/v/" + video + "?enablejsapi=1&playerapiid=ytplayer_" + video,
    177             video, "200", "150", "8", null, null, params, atts);
    178 }
    179 
    180 // when a youtube player is ready, play the video
    181 function onYouTubePlayerReady(playerId) {
    182     ytplayer = document.getElementById("my" + playerId);
    183     ytplayer.playVideo();
    184 }
    185 
    186113// add datepickers to date fields
    187114function attachDatePickers() {
    188     $('div#wizard').find("input[type=text][rel$='date']").each(function() {
     115    $("input[type=text][rel$='date']").each(function() {
    189116        $(this).datepicker({
    190117            numberOfMonths: 3,
    … …  
    193120            changeYear  : true,
    194121            dateFormat  : 'dd/mm/yy',
     122            yearRange   : 'c-80:c+20',
    195123            altField    : '#' + $(this).attr('name') + 'Example',
    196124            altFormat   : 'DD, d MM, yy'
    … …  
    201129// add datetimepickers to date fields
    202130function attachDateTimePickers() {
    203     $('div#wizard').find("input[type=text][rel$='datetime']").each(function() {
     131    $("input[type=text][rel$='datetime']").each(function() {
    204132        $(this).datepicker({
    205133            changeMonth     : true,
    … …  
    215143}
    216144
    217 // attach subject events
    218 function attachTableEvents() {
    219         // This method handled the background hover color on table rows
    220         // Since this broke select boxes in IE7, this is now handled by css
    221         // See wizard.css and #234 and #237
    222 }
    223 
    224145// if the wizard page contains a table, the width of
    225146// the header and the rows is automatically scaled to
    … …  
    227148function handleWizardTable() {
    228149    var that = this;
    229     var wizardTables = $("div#wizard").find('div.table');
     150    var wizardTables = $(".ajaxFlow").find('div.tableEditor');
    230151
    231152    wizardTables.each(function() {
    … …  
    236157        var column = 0;
    237158        var columns = [];
     159        var resized = [];
    238160
    239161        // calculate total width of elements in header
    … …  
    253175
    254176            // remember column
     177            resized[ column ] = (c.attr('rel') == 'resized');
    255178            columns[ column ] = c.width();
    256179            column++;
    … …  
    266189            var column = 0;
    267190            row.children().each(function() {
    268                 $(this).css({ width: columns[ column] + 'px' });
     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                }
    269198                column++;
    270199            });
    … …  
    277206            if (header.width() < wizardTable.width()) {
    278207                // no, so hide it
    279                 sliderContainer.css({ 'display': 'none '});
     208                sliderContainer.hide();
    280209            } else {
    281210                sliderContainer.slider({
    … …  
    305234
    306235    var successFunc = function(data, textStatus, request) {
    307         if( request.status == 200 ) {
     236                var exampleField = document.getElementById( fieldName + "Example" );
     237
     238        if( request.status == 200 && exampleField) {
    308239            document.getElementById( fieldName + "Example" ).value = data;
    309240        }
    … …  
    311242
    312243    var errorFunc = function( request, textStatus, errorThrown ) {
    313         // On error, clear the example field
    314         document.getElementById( fieldName + "Example" ).value = "";
    315     };
    316        
     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
    317252    $.ajax({
    318253        url     : baseUrl + '/wizard/ajaxParseRelTime?reltime=' + inputfield.value,
    … …  
    352287                    // Give feedback to the user
    353288                    $('#' + field_id + 'Example').html('Uploading ' + createFileHTML( file ));
    354 
     289                    $('#' + field_id + 'Delete').hide();
    355290
    356291                },
    … …  
    359294                        $('#' + field_id).val( '' );
    360295                        $('#' + field_id + 'Example').html('<span class="error">Error uploading ' + createFileHTML( file ) + '</span>' );
     296                            $('#' + field_id + 'Delete').hide();
    361297                    } else {
    362298                        $('#' + field_id).val( response );
    363299                        $('#' + field_id + 'Example').html('Uploaded ' + createFileHTML( file ) );
     300                            $('#' + field_id + 'Delete').show();
    364301                    }
    365302                }
    … …  
    367304}
    368305
     306function deleteFile( field_id ) {
     307        $('#' + field_id).val( '*deleted*' );
     308        $('#' + field_id + 'Example').html('File deleted' );
     309        $('#' + field_id + 'Delete').hide();
     310}
     311
    369312function createFileHTML( filename ) {
    370313    return '<a target="_blank" href="' + baseUrl + '/file/get/' + filename + '">' + filename + '</a>';
    371314}
    372 
    373315
    374316/*************************************************
    … …  
    579521  var role_id = $( '#' + element_id + '_role' ).val();
    580522
     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
    581528  var combination = person_id + '-' + role_id;
    582529
    … …  
    586533        ids[ ids.length ] = combination;
    587534        $( '#' + element_id + '_ids' ).val( ids.join( ',' ) );
    588        
     535
    589536        // Show the title and a remove button
    590537        showContact( element_id, combination, $("#" + element_id + "_person  :selected").text(), $("#" + element_id + "_role :selected").text(), ids.length - 1 );
    … …  
    593540        $( '#' + element_id + '_none' ).css( 'display', 'none' );
    594541    }
     542
     543        return true;
    595544}
    596545
    … …  
    652601    authorsDiv.className = 'role';
    653602    authorsDiv.appendChild( document.createTextNode( role ) );
    654    
     603
    655604    var li = document.createElement( 'li' );
    656605    li.setAttribute( 'id', element_id + '_item_' + id );
    … …  
    663612}
    664613
     614/*************************************************
     615 *
     616 * Functions for adding users (readers or writers) to the study
     617 *
     618 ************************************************/
     619
     620/**
     621 * Adds a user to the study using javascript
     622 */
     623function 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;
     642}
     643
     644/**
     645 * Removes a user from the study using javascript
     646 * N.B. The deletion must be handled in grails when the form is submitted
     647 */
     648function 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    }
     667}
     668
     669/**
     670 * Returns an array of user IDs currently attached to the study
     671 * The array contains integers
     672 */
     673function 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    }
     685}
     686
     687/**
     688 * Shows a publication on the screen
     689 */
     690function 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 );
     708}
     709
     710/**
     711 * Creates the dialog for searching a publication
     712 */
     713function 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    }
     740}
     741
     742/**
     743 * Opens the dialog for searching a publication
     744 */
     745function 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}
Note: See TracChangeset for help on using the changeset viewer.