Changeset 2003 for trunk


Ignore:
Timestamp:
Sep 8, 2011, 1:58:29 PM (8 years ago)
Author:
tjeerd@…
Message:

New awesome JavaScripts? that contains extra less errors and loads of fancy features. Changes to visualize/index.gsp, visualization.css and visualization.js

Location:
trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/grails-app/views/visualize/index.gsp

    r1996 r2003  
    1818        <g:javascript src="visualization.js" />
    1919        <link rel="stylesheet" type="text/css" href="<g:resource dir='css' file='visualization.css' />" />
     20    <style type="text/css">
     21        /** NEEDED FOR RESOURCES PLUGIN **/
     22        .menu_arrow {background-image: url('./images/visualization/down_arrow.png'); }
     23        .error { background: #ffe0e0 url(${fam.icon( name: 'exclamation' )}) 10px 10px no-repeat; }
     24        .warning{ background: #eee url(${fam.icon( name: 'information' )}) 10px 10px no-repeat; }
     25    </style>
    2026       
    2127        <script type="text/javascript">
     
    6066                <div class="menu_arrow"> </div>
    6167                <div class="menu_item" id="menu_go">
    62                     <input type="button" value="Visualize" onClick="visualize();"/><br /><input type="checkbox" name="autovis" id="autovis" CHECKED/><span style="font-size: small;">auto</span></div>
     68                    <div id="button_visualize" onClick="visualize();">Visualize</div>
     69                    <input type="checkbox" name="autovis" id="autovis" CHECKED/><span style="font-size: small;">auto</span></div>
    6370                <div class="menu_spacer"> </div>
    6471            </form>
     
    6976            <h1>Visualize your study</h1>
    7077
    71             <div id="messages">
     78            <div id="message" class="error">
    7279                <g:if test="${flash.error}">
    73                     <div class="errormessage">
    74                         ${flash.error.toString().encodeAsHTML()}
    75                     </div>
     80                    ${flash.error.toString().encodeAsHTML()}
    7681                </g:if>
    7782                <g:if test="${flash.message}">
    78                     <div class="message">
    79                         ${flash.message.toString().encodeAsHTML()}
    80                     </div>
     83                    ${flash.message.toString().encodeAsHTML()}
    8184                </g:if>
    82 
    83                 <div id="ajaxError">
    84                 </div>
    8585            </div>
    8686
  • trunk/web-app/css/visualization.css

    r1996 r2003  
    11/* #step2, #step3 { display: none; } */
    2 #ajaxError {
    3         display: none;
    4         border: 1px solid #f99; /* #006dba; */
    5         margin-bottom: 10px;
    6         margin-top: 10px;
    7 
    8         background: #ffe0e0 url(${fam.icon( name: 'error' )}) 10px 10px no-repeat;
    9         padding: 10px 10px 10px 33px;
    10 }
    11 
    122label { display: inline-block; zoom: 1; *display: inline; width: 110px; margin-top: 10px;  }
    133
     
    188}
    199
    20 #messages {
     10
     11/** START :: MESSAGES**/
     12
     13#message {
    2114    width: 840px;
    22     height: 60px;
     15    height: 40px;
    2316    overflow: hidden;
     17    display: none;
     18}
     19
     20.error {
     21        border: 1px solid #f99; /* #006dba; */
     22        margin-bottom: 10px;
     23        margin-top: 10px;
     24        padding: 10px 10px 10px 33px;
     25}
     26
     27.warning {
     28        border: 1px solid #06C; /* #006dba; */
     29        margin-bottom: 10px;
     30        margin-top: 10px;
     31    padding: 10px 10px 10px 33px;
    2432}
    2533
     
    6573
    6674.menu_arrow {
    67     background-image: url('../images/visualization/down_arrow.png');
    6875    background-repeat: no-repeat;
    6976    margin: 6px;
     
    113120}
    114121
     122#menu_go {
     123    background-color: white;
     124    width: 120px;
     125}
     126
    115127.formulier {
    116128    position: absolute;
     
    129141.spinner {
    130142    display: none;
     143    width: 16px;
     144    height: 16px;
    131145}
     146
     147#button_visualize {
     148    border-style: outset;
     149    border-width: 2px;
     150    border-color: gray;
     151    margin: 4px;
     152    padding: 10px;
     153    text-align: center;
     154    background-color: #DD0a0a;
     155    color: white;
     156    font-weight: bold;
     157}
  • trunk/web-app/js/visualization.js

    r1999 r2003  
    1616                }
    1717    );
     18    $("#menu_go").unbind('mouseover').unbind('mouseout');
    1819});
    1920
     
    2324function changeStudy() {
    2425    $( "#menu_study" ).find("div.formulier").hide();
    25     $( "#menu_study" ).find("img.spinner").show();
    26     $( "#menu_study" ).find("div.menu_item_info").html("<br />"+$( '#study option:selected' ).text());
    27 
    28         executeAjaxCall( "getFields", {
    29                 "errorMessage": "An error occurred while retrieving variables from the server. Please try again or contact a system administrator.",
    30                 "success": function( data, textStatus, jqXHR ) {
    31                         // Remove all previous entries from the list
    32                         $( '#rows, #columns' ).empty();
    33             $( '#rows, #columns' ).append( $( "<option>" ).val( "" ).text( "[SELECT OPTION]" ) );
    34 
    35                         // Add all fields to the lists
    36             var returnData = data.returnData;
    37                         $.each( returnData, function( idx, field ) {
    38                                 $( '#rows, #columns' ).append( $( "<option>" ).val( field.id ).text( field.name ) );
    39                         });
    40                        
    41             $( "#menu_study" ).find("img.spinner").hide();
    42             $( "#menu_study" ).removeClass("menu_item_fill");
    43             $( "#menu_study" ).addClass("menu_item_done");
    44             $( "#menu_row" ).addClass("menu_item_fill");
    45             $( "#menu_column" ).addClass("menu_item_fill");
    46                 }
    47         });
     26
     27    if($( '#study option:selected' ).val()!="") {
     28        $( "#menu_study" ).find("img.spinner").show();
     29        $( "#menu_study" ).find("div.menu_item_info").html("<br />"+$( '#study option:selected' ).text());
     30
     31        executeAjaxCall( "getFields", {
     32            "errorMessage": "An error occurred while retrieving variables from the server. Please try again or contact a system administrator.",
     33            "success": function( data, textStatus, jqXHR ) {
     34                // Remove all previous entries from the list
     35                $( '#rows, #columns' ).empty();
     36                $( '#rows, #columns' ).append( $( "<option>" ).val( "" ).text( "[SELECT OPTION]" ) );
     37
     38                if(data.infoMessage) {
     39                    showError(data.infoMessage,"warning");
     40                }
     41
     42                // Add all fields to the lists
     43                var returnData = data.returnData;
     44                $.each( returnData, function( idx, field ) {
     45                    $( '#rows, #columns' ).append( $( "<option>" ).val( field.id ).text( field.name ) );
     46                });
     47
     48                $( "#menu_study" ).find("img.spinner").hide();
     49                $( "#menu_study" ).switchClass("menu_item_fill","menu_item_done",1000);
     50                $( "#menu_row, #menu_column" ).addClass("menu_item_fill");
     51            }
     52        },'menu_study');
     53    } else {
     54        $( '#rows, #columns' ).empty();
     55        $( ".menu_item" ).removeClass().addClass("menu_item");
     56        $( "#menu_study" ).addClass("menu_item_fill");
     57        $( '.menu_item' ).find(".menu_item_info").html("");
     58    }
    4859}
    4960
     
    5263 */
    5364function changeFields(divid) {
    54     $( "#"+divid ).find("img.spinner").show();
    5565    $( "#"+divid ).find("div.formulier").hide();
    5666
     
    5868    if(divid=="menu_column") type = "columns";
    5969
    60     $( "#"+divid ).find("div.menu_item_info").html("<br />"+$( '#'+type+' option:selected' ).text());
    61         executeAjaxCall( "getVisualizationTypes", {
    62                 "errorMessage": "An error occurred while retrieving visualization types from the server. Please try again or contact a system administrator.",
    63                 "success": function( data, textStatus, jqXHR ) {
    64                         // Remove all previous entries from the list
    65             var oldSelect = $( '#types option:selected' ).text();
    66             var intSelect = 0;
    67             var iOptionNum = 0;
    68                         $( '#types' ).empty();
    69 
    70             $( '#types' ).append( $( "<option>" ).val( "" ).text( "[SELECT OPTION]" ) );
    71                         // Add all fields to the lists
    72             var returnData = data.returnData;
    73 
    74                         $.each( returnData, function( idx, field ) {
    75                 if(field.name==oldSelect) {
    76                     intSelect = iOptionNum;
     70    if($( '#'+type+' option:selected' ).val()!="") {
     71
     72        $( "#"+divid ).find("img.spinner").show();
     73
     74        $( "#"+divid ).find("div.menu_item_info").html("<br />"+$( '#'+type+' option:selected' ).text());
     75        executeAjaxCall( "getVisualizationTypes", {
     76            "errorMessage": "An error occurred while retrieving visualization types from the server. Please try again or contact a system administrator.",
     77            "success": function( data, textStatus, jqXHR ) {
     78                // Remove all previous entries from the list
     79                $( '#types' ).empty();
     80
     81                if(data.infoMessage!=null) {
     82                    showError(data.infoMessage,"warning");
     83                } else {
     84
     85                    $( '#types' ).append( $( "<option>" ).val( "" ).text( "[SELECT OPTION]" ) );
     86                    // Add all fields to the lists
     87                    var returnData = data.returnData;
     88
     89                    $.each( returnData, function( idx, field ) {
     90                        $( '#types' ).append( $( "<option>" ).val( field.id ).text( field.name ) );
     91                    });
     92
     93                    $( '#menu_vis' ).removeClass().addClass("menu_item");
     94                    $( '#menu_vis' ).find(".menu_item_info").html("");
    7795                }
    78                 iOptionNum = iOptionNum + 1;
    79                                 $( '#types' ).append( $( "<option>" ).val( field.id ).text( field.name ) );
    80                         });
    81 
    82             $( '#types' ).selectedIndex = intSelect;
    83 
    84             $( "#"+divid ).find("img.spinner").hide();
    85             $( "#"+divid ).addClass("menu_item_done");
    86             $( "#"+divid ).removeClass("menu_item_fill");
    87             if(!$( "#menu_vis" ).hasClass("menu_item_done") && $( "#menu_row" ).hasClass("menu_item_done") && $( "#menu_column" ).hasClass("menu_item_done")) {
    88                 $( "#menu_vis" ).addClass("menu_item_fill");
     96
     97                $( "#"+divid ).find("img.spinner").hide();
     98                $( "#"+divid ).switchClass("menu_item_fill","menu_item_done",1000);
     99
     100                if((!$( "#menu_vis" ).hasClass("menu_item_done")) &&
     101                        ($( "#menu_row" ).hasClass("menu_item_done") || divid=="menu_row") &&
     102                        ($( "#menu_column" ).hasClass("menu_item_done") || divid=="menu_column")
     103                        ) {
     104                    $( "#menu_vis" ).addClass("menu_item_fill");
     105                }
    89106            }
    90                 }
    91         });
     107        },divid);
     108    } else {
     109        $( '#menu_vis' ).removeClass().addClass("menu_item");
     110        $( "#"+divid ).removeClass().addClass("menu_item menu_item_fill");
     111        $( "#"+divid ).find(".menu_item_info").html("");
     112        $( '#menu_vis' ).find(".menu_item_info").html("");
     113    }
    92114}
    93115
     
    97119function changeVis() {
    98120    $( "#menu_vis" ).find("div.formulier").hide();
    99     $( "#menu_vis" ).removeClass("menu_item_fill");
    100     $( "#menu_vis" ).addClass("menu_item_done");
    101     $( "#menu_vis" ).find("div.menu_item_info").html("<br />"+$( '#types option:selected' ).text());
     121    if($( '#types option:selected' ).val()!="") {
     122        $( "#menu_vis" ).switchClass("menu_item_fill","menu_item_done",1000);
     123        $( "#menu_vis" ).find("div.menu_item_info").html("<br />"+$( '#types option:selected' ).text());
     124    } else {
     125        $( "#menu_vis" ).find("div.menu_item_info").html("");
     126        $( "#menu_vis" ).removeClass().addClass("menu_item menu_item_fill");
     127    }
    102128    if($("#autovis").attr("checked")=="checked") {
    103129        visualize();
     
    119145                                visualization.destroy();
    120146
     147            if(data.infoMessage!=null) {
     148                showError(data.infoMessage,"warning");
     149            }
    121150                        // Handle erroneous data
    122151                        /*if( !checkCorrectData( data.returnData ) ) {
    123                                 showError( "Unfortunately the server returned data in a format that we did not expect." );
     152                                showError( "Unfortunately the server returned data in a format that we did not expect.", "error" );
    124153                                return;
    125154                        }*/
     
    165194                                        yaxis: {
    166195                                                label: ylabel,
    167                                                 labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
     196                                                labelRenderer: $.jqplot.CanvasAxisLabelRenderer
    168197                                        }
    169198                                }
     
    172201                       
    173202                        $( "#visualization" ).show();
    174                 },
    175         });
     203                }
     204        }, "menu_go");
    176205}
    177206
     
    180209 * @param message       String  Message to show
    181210 */
    182 function showError( message ) {
    183         $( '#ajaxError' ).text( message );
    184         $( '#ajaxError' ).show();
     211function showError( message, strClass ) {
     212        $( '#message' ).html( message );
     213    $( '#message' ).removeClass();
     214    $( '#message' ).addClass(strClass);
     215        $( '#message' ).fadeIn();
     216    $(document).bind('click',function() {
     217        $( '#message' ).removeClass();
     218        $( '#message' ).html("");
     219        $(document).unbind('click');
     220    });
    185221}
    186222
     
    260296 * @see jQuery.ajax
    261297 */
    262 function executeAjaxCall( action, ajaxParameters ) {
     298function executeAjaxCall( action, ajaxParameters, divid ) {
    263299        var data = gatherData( action );
    264300
     
    271307                ajaxParameters[ "error" ] = function( jqXHR, textStatus, errorThrown ) {
    272308                        // An error occurred while retrieving fields from the server
    273                         showError( "An error occurred while retrieving variables from the server. Please try again or contact a system administrator." );
     309                        showError( "An error occurred while retrieving variables from the server. Please try again or contact a system administrator.<br />"+textStatus, "error" );
     310            $( "#"+divid ).removeClass().addClass('menu_item menu_item_error');
     311            $( "#"+divid ).find("img.spinner").hide();
    274312                }
    275313
     
    283321                url: visualizationUrls[ action ],
    284322                data: "data=" + JSON.stringify( data ),
    285                 dataType: "json"
     323                dataType: "json",
    286324        }, ajaxParameters ) );
    287325}
Note: See TracChangeset for help on using the changeset viewer.