Changeset 1305

Show
Ignore:
Timestamp:
21-12-10 14:22:33 (3 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)

Location:
trunk
Files:
3 modified

Legend:

Unmodified
Added
Removed
  • trunk/grails-app/views/importer/common/_missingproperties.gsp

    r1281 r1305  
    2626</g:else> 
    2727 
    28 <script> 
    29   $(document).ready(function() { 
    30  
    31 // handle term selects 
    32     new SelectAddMore().init({ 
    33         rel     : 'term', 
    34         url     : baseUrl + '/termEditor', 
    35         vars    : 'ontologies', 
    36         label   : 'add more...', 
    37         style   : 'addMore', 
    38         onClose : function(scope) { 
    39             refreshFlow();             
    40              //location.reload(); 
    41              /*updatefield = '<input type = "hidden" name="updatefield" value="true" / >'; 
    42              $('#missingpropertiesform').append(updatefield); 
    43              $('#missingpropertiesform').submit();*/ 
    44         } 
    45     }); 
    46  
    47   }); 
    48 </script> 
    49  
    5028<script type="text/javascript"> 
    51   $(document).ready(function() { 
     29 $(document).ready(function() { 
    5230        // mark error fields 
    53         <g:each in="${failedcells}" var="record"> 
     31        <g:each in="${importer_failedcells}" var="record"> 
    5432          <g:each in="${record.importcells}" var="cell"> 
    5533          var element = $("select[name=entity_${cell.entityidentifier}_${cell.mappingcolumn.property}]"); 
     
    6846 
    6947<div class="wizard" id="wizard"> 
    70     <div class="table"> 
     48    <div class="tableEditor"> 
    7149        <g:set var="showHeader" value="${true}"/> 
    7250            <g:each status="index" var="table" in="${datamatrix}"> 
  • trunk/grails-app/views/importer/index.gsp

    r1296 r1305  
    1414<html> 
    1515<head> 
    16         <meta name="layout" content="main"/> 
    17         <link rel="stylesheet" href="${resource(dir: 'css', file: 'ajaxflow.css')}"/> 
     16    <meta name="layout" content="main"/> 
     17    <link rel="stylesheet" href="${resource(dir: 'css', file: 'ajaxflow.css')}"/> 
    1818    <link rel="stylesheet" href="${resource(dir: 'css', file: 'importer.css')}"/> 
    1919    <link rel="stylesheet" href="${resource(dir: 'css', file: 'wizard.css')}"/> 
     20    <link rel="stylesheet" href="${resource(dir: 'css', file: 'table-editor.css')}"/> 
    2021 
    2122    <g:if env="production"> 
     
    2324      <script type="text/javascript" src="${resource(dir: 'js', file: 'ajaxupload.3.6.js')}"></script> 
    2425      <script type="text/javascript" src="${resource(dir: 'js', file: 'ontology-chooser.min.js')}"></script> 
     26      <script type="text/javascript" src="${resource(dir: 'js', file: 'table-editor.js')}"></script> 
     27      <script type="text/javascript" src="${resource(dir: 'js', file: 'importer.js')}"></script> 
     28      <script type="text/javascript" src="${resource(dir: 'js', file: 'tooltips.js')}"></script> 
    2529    </g:if><g:else> 
    2630      <script type="text/javascript" src="${resource(dir: 'js', file: 'SelectAddMore.js')}"></script> 
     
    2933      <script type="text/javascript" src="${resource(dir: 'js', file: 'table-editor.js')}"></script> 
    3034      <script type="text/javascript" src="${resource(dir: 'js', file: 'importer.js')}"></script> 
     35      <script type="text/javascript" src="${resource(dir: 'js', file: 'tooltips.js')}"></script> 
    3136    </g:else> 
    3237 
  • 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}