Changeset 2071

Timestamp:

Oct 27, 2011, 2:30:14 PM (12 years ago)

Author:

tjeerd@…

Message:

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

Location:

trunk

Files:

• grails-app/views/visualize/index.gsp (modified) (3 diffs)
• web-app/css/visualization.css (modified) (2 diffs)
• web-app/js/visualization.js (modified) (2 diffs)

trunk/grails-app/views/visualize/index.gsp

@@ -53 +53 @@
                     <div class="formulier">
                         <p class="info">Select a study from the list below.</p>
-                        <p>
+                        <p style="margin-bottom: 0px;">
                             <g:select from="${studies}" size="10" optionKey="id" optionValue="title" name="study" onChange="changeStudy();"/>
+                            <div class="block_search">
+                                <img src="${fam.icon( name: 'magnifier' )}" alt="search"/>:
+                                <input type="text" onKeyUp="doSearch('menu_study');" />
+                                <img src="${fam.icon( name: 'cancel' )}" class="imgbutton" onClick="clearSearch('menu_study');" alt="clear search"/>
+                            </div>
                         </p>
                     </div>
@@ -137 +142 @@
                         <p>
                             <select id="columns" name="columns" size="6" onChange="changeFields('menu_column');"></select>
+                            <div class="block_search">
+                                <img src="${fam.icon( name: 'magnifier' )}" alt="search"/>:
+                                <input type="text" onKeyUp="doSearch('menu_column');" />
+                                <img src="${fam.icon( name: 'cancel' )}" class="imgbutton" onClick="clearSearch('menu_column');" alt="clear search"/>
+                            </div>
                         </p>
                     </div>
@@ -144 +154 @@
                         <p>
                             <select id="rows" name="rows" size="6" onChange="changeFields('menu_row');"></select>
+                            <div class="block_search">
+                                <img src="${fam.icon( name: 'magnifier' )}" alt="search"/>:
+                                <input type="text" onKeyUp="doSearch('menu_row');" />
+                                <img src="${fam.icon( name: 'cancel' )}" class="imgbutton" onClick="clearSearch('menu_row');" alt="clear search"/>
+                            </div>
                         </p>
                     </div>

trunk/web-app/css/visualization.css

@@ -140 +140 @@
 .menu_item select {
     width: 100%;
+    height: 120px;
     font-size: 12px;
 }
@@ -261 +262 @@
     filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
 }
+
+/* START :: Block search */
+.block_search {
+        position: relative;
+        width: 96%;
+        border: 1px solid gray;
+        border-top-style: none;
+        text-align: left;
+        padding: 3px 2%;
+}
+
+.block_search img {
+        vertical-align: text-bottom;
+        padding-left: 1px;
+}
+
+.imgbutton {
+        cursor: pointer;
+}
+
+.block_search input {
+    background-color: inherit;
+        border-style: none;
+        border-bottom: 1px solid gray;
+        width: 80%;
+}

trunk/web-app/js/visualization.js

@@ -5 +5 @@
 var visType = null;
 var openForm = null;
+
+jQuery.expr[':'].Contains = function(a, i, m) {
+  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
+};
 
 $(document).ready(function() {
@@ -486 +490 @@
 }
 
+function doSearch(menuId) {
+    var searchVal = $('#'+menuId).find('.block_search').children('input').val();
+    $('#'+menuId).find('option').hide();
+    $('#'+menuId).find('option:Contains("'+searchVal+'")').show();
+}
+
+function clearSearch(menuId) {
+    $('#'+menuId).find('option').show();
+    $('#'+menuId).find('.block_search').children('input').val('');
+}
+
 /**
  * Clears one or multiple steps