Changeset 2071

Show
Ignore:
Timestamp:
27-10-11 14:30:14 (2 years ago)
Author:
tjeerd@…
Message:

VIS-44, added live search to study, x-axis and y-axis selects.

Location:
trunk
Files:
3 modified

Legend:

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

    r2070 r2071  
    5353                    <div class="formulier"> 
    5454                        <p class="info">Select a study from the list below.</p> 
    55                         <p> 
     55                        <p style="margin-bottom: 0px;"> 
    5656                            <g:select from="${studies}" size="10" optionKey="id" optionValue="title" name="study" onChange="changeStudy();"/> 
     57                            <div class="block_search"> 
     58                                <img src="${fam.icon( name: 'magnifier' )}" alt="search"/>: 
     59                                <input type="text" onKeyUp="doSearch('menu_study');" /> 
     60                                <img src="${fam.icon( name: 'cancel' )}" class="imgbutton" onClick="clearSearch('menu_study');" alt="clear search"/> 
     61                            </div> 
    5762                        </p> 
    5863                    </div> 
     
    137142                        <p> 
    138143                            <select id="columns" name="columns" size="6" onChange="changeFields('menu_column');"></select> 
     144                            <div class="block_search"> 
     145                                <img src="${fam.icon( name: 'magnifier' )}" alt="search"/>: 
     146                                <input type="text" onKeyUp="doSearch('menu_column');" /> 
     147                                <img src="${fam.icon( name: 'cancel' )}" class="imgbutton" onClick="clearSearch('menu_column');" alt="clear search"/> 
     148                            </div> 
    139149                        </p> 
    140150                    </div> 
     
    144154                        <p> 
    145155                            <select id="rows" name="rows" size="6" onChange="changeFields('menu_row');"></select> 
     156                            <div class="block_search"> 
     157                                <img src="${fam.icon( name: 'magnifier' )}" alt="search"/>: 
     158                                <input type="text" onKeyUp="doSearch('menu_row');" /> 
     159                                <img src="${fam.icon( name: 'cancel' )}" class="imgbutton" onClick="clearSearch('menu_row');" alt="clear search"/> 
     160                            </div> 
    146161                        </p> 
    147162                    </div> 
  • trunk/web-app/css/visualization.css

    r2061 r2071  
    140140.menu_item select { 
    141141    width: 100%; 
     142    height: 120px; 
    142143    font-size: 12px; 
    143144} 
     
    261262    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); 
    262263} 
     264 
     265/* START :: Block search */ 
     266.block_search { 
     267        position: relative; 
     268        width: 96%; 
     269        border: 1px solid gray; 
     270        border-top-style: none; 
     271        text-align: left; 
     272        padding: 3px 2%; 
     273} 
     274 
     275.block_search img { 
     276        vertical-align: text-bottom; 
     277        padding-left: 1px; 
     278} 
     279 
     280.imgbutton { 
     281        cursor: pointer; 
     282} 
     283 
     284.block_search input { 
     285    background-color: inherit; 
     286        border-style: none; 
     287        border-bottom: 1px solid gray; 
     288        width: 80%; 
     289} 
  • trunk/web-app/js/visualization.js

    r2070 r2071  
    55var visType = null; 
    66var openForm = null; 
     7 
     8jQuery.expr[':'].Contains = function(a, i, m) { 
     9  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
     10}; 
    711 
    812$(document).ready(function() { 
     
    486490} 
    487491 
     492function doSearch(menuId) { 
     493    var searchVal = $('#'+menuId).find('.block_search').children('input').val(); 
     494    $('#'+menuId).find('option').hide(); 
     495    $('#'+menuId).find('option:Contains("'+searchVal+'")').show(); 
     496} 
     497 
     498function clearSearch(menuId) { 
     499    $('#'+menuId).find('option').show(); 
     500    $('#'+menuId).find('.block_search').children('input').val(''); 
     501} 
     502 
    488503/** 
    489504 * Clears one or multiple steps