From 7bcfda8b9ccff0f49189541baafbc3344afd5f84 Mon Sep 17 00:00:00 2001 From: Jeremy Goecks Date: Wed, 9 Dec 2009 13:15:33 -0500 Subject: [PATCH] Better interface for selecting build/dbkey. Uses progressive javascript to replace select box with a search box + select list. Fixes #7. --- static/scripts/galaxy.base.js | 82 ++++++++++++++++++++ static/scripts/jquery.autocomplete.js | 13 +++- static/scripts/packed/galaxy.base.js | 2 +- static/scripts/packed/jquery.autocomplete.js | 2 +- static/scripts/packed/jquery.wymeditor.js | 2 +- templates/dataset/edit_attributes.mako | 8 +- templates/tool_form.mako | 10 ++- 7 files changed, 112 insertions(+), 7 deletions(-) diff --git a/static/scripts/galaxy.base.js b/static/scripts/galaxy.base.js index aaeca1a1329..05cb5b80c64 100644 --- a/static/scripts/galaxy.base.js +++ b/static/scripts/galaxy.base.js @@ -121,3 +121,85 @@ var array_length = function(an_array) count++; return count; }; + +// +// Replace dbkey select box with text input box & autocomplete. +// +var replace_dbkey_select = function() +{ + var select_elt = $('select[name=dbkey]'); + var start_value = select_elt.attr('value'); + if (select_elt.length != 0) + { + // + // Set up text input + autocomplete element. + // + var text_input_elt = $(""); + text_input_elt.attr('size', 40); + text_input_elt.attr('name', select_elt.attr('name')); + text_input_elt.click( function() + { + // Show all. Also provide note that load is happening since this can be slow. + var cur_value = $(this).attr('value'); + $(this).attr('value', 'Loading...'); + $(this).showAllInCache(); + $(this).attr('value', cur_value); + $(this).select(); + }); + + // Get options for dbkey for autocomplete. + var dbkey_options = new Array(); + var dbkey_mapping = new Object(); + select_elt.children('option').each( function() + { + // Get text, value for option. + var text = $(this).text(); + var value = $(this).attr('value'); + + // Ignore values that are '?' + if (value == '?') + return; + + // Set options and mapping. + dbkey_options.push( text ); + dbkey_mapping[ text ] = value; + + // If this is the start value, set value of input element. + if ( value == start_value ) + text_input_elt.attr('value', text); + }); + if ( text_input_elt.attr('value') == '' ) + text_input_elt.attr('value', 'Click to Search or Select Build'); + + // Do autocomplete. + var autocomplete_options = { selectFirst: false, autoFill: false, mustMatch: false, matchContains: true, max: 1000, minChars : 0, hideForLessThanMinChars : false }; + text_input_elt.autocomplete(dbkey_options, autocomplete_options); + + // Replace select with text input. + select_elt.replaceWith(text_input_elt); + + // + // When form is submitted, change the text entered into the input to the corresponding value. If text doesn't correspond to value, remove it. + // + $('form').submit( function() + { + var dbkey_text_input = $('#dbkey-input'); + if (dbkey_text_input.length != 0) + { + // Try to convert text to value. + var cur_value = dbkey_text_input.attr('value'); + var new_value = dbkey_mapping[cur_value]; + if (new_value != null && new_value != undefined) + dbkey_text_input.attr('value', new_value); + else + { + // If there is a non-empty start value, use that; otherwise unknown. + if (start_value != "") + dbkey_text_input.attr('value', start_value); + else + dbkey_text_input.attr('value', '?'); + } + } + }); + } +} // end replace_dbkey_select() diff --git a/static/scripts/jquery.autocomplete.js b/static/scripts/jquery.autocomplete.js index ec742549259..d645da4f98e 100644 --- a/static/scripts/jquery.autocomplete.js +++ b/static/scripts/jquery.autocomplete.js @@ -52,6 +52,10 @@ $.fn.extend({ }, unautocomplete: function() { return this.trigger("unautocomplete"); + }, + // JG: add method to show all data in cache. + showAllInCache: function() { + return this.trigger("showAllInCache"); } }); @@ -216,7 +220,11 @@ $.Autocompleter = function(input, options) { select.unbind(); $input.unbind(); $(input.form).unbind(".autocomplete"); - }); + }) + // JG: Show all data in cache. + .bind("showAllInCache", function() { + receiveData('', cache.load('')); + }); function selectCurrent() { @@ -431,6 +439,9 @@ $.Autocompleter.defaults = { multiple: false, multipleSeparator: ", ", highlight: function(value, term) { + // JG: short-circuit highlighting if term is empty string. + if (term == "") + return value; return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "$1"); }, scroll: true, diff --git a/static/scripts/packed/galaxy.base.js b/static/scripts/packed/galaxy.base.js index 44c6520185a..76f7b902190 100644 --- a/static/scripts/packed/galaxy.base.js +++ b/static/scripts/packed/galaxy.base.js @@ -1 +1 @@ -$.fn.makeAbsolute=function(a){return this.each(function(){var b=$(this);var c=b.position();b.css({position:"absolute",marginLeft:0,marginTop:0,top:c.top,left:c.left,right:$(window).width()-(c.left+b.width())});if(a){b.remove().appendTo("body")}})};jQuery(document).ready(function(){jQuery("a[confirm]").click(function(){return confirm(jQuery(this).attr("confirm"))});make_popup_menus()});function make_popup_menus(){jQuery("div[popupmenu]").each(function(){var c={};$(this).find("a").each(function(){var b=$(this).attr("confirm"),d=$(this).attr("href"),e=$(this).attr("target");c[$(this).text()]=function(){if(!b||confirm(b)){var g=window;if(e=="_parent"){g=window.parent}g.location=d}}});var a=$("#"+$(this).attr("popupmenu"));make_popupmenu(a,c);$(this).remove();a.show()})}function ensure_popup_helper(){if($("#popup-helper").length==0){$("