Changeset 2071


Ignore:
Timestamp:
Oct 27, 2011, 2:30:14 PM (5 years ago)
Author:
tjeerd@…
Message:

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

Location:
trunk
Files:
3 edited

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
Note: See TracChangeset for help on using the changeset viewer.