mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
Better interface for selecting build/dbkey. Uses progressive javascript to replace select box with a search box + select list. Fixes #7.
This commit is contained in:
Jeremy Goecks
@@ -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 = $("<input id='dbkey-input' type='text'></input>");
|
||||
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()
|
||||
|
||||
@@ -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"), "<strong>$1</strong>");
|
||||
},
|
||||
scroll: true,
|
||||
|
||||
@@ -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){$("<div id='popup-helper'/>").css({background:"white",opacity:0,zIndex:15000,position:"absolute",top:0,left:0,width:"100%",height:"100%"}).appendTo("body").hide()}}function make_popupmenu(d,c){ensure_popup_helper();var a=$(d);var b=$("<ul id='"+d.attr("id")+"-menu'></ul>");$.each(c,function(g,f){if(f){$("<li/>").html(g).click(f).appendTo(b)}else{$("<li class='head'/>").html(g).appendTo(b)}});var e=$("<div class='popmenu-wrapper'>");e.append(b).append("<div class='overlay-border'>").css("position","absolute").appendTo("body").hide();attach_popupmenu(d,e)}function attach_popupmenu(b,d){var a=function(){d.unbind().hide();$("#popup-helper").unbind("click.popupmenu").hide()};var c=function(g){var h=$(b).offset();$("#popup-helper").bind("click.popupmenu",a).show();d.click(a).css({left:0,top:-1000}).show();var f=g.pageX-d.width()/2;f=Math.min(f,$(document).scrollLeft()+$(window).width()-$(d).width()-20);f=Math.max(f,$(document).scrollLeft()+20);d.css({top:g.pageY-5,left:f});return false};$(b).click(c)}var array_length=function(a){if(a.length){return a.length}var b=0;for(element in a){b++}return b};
|
||||
$.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){$("<div id='popup-helper'/>").css({background:"white",opacity:0,zIndex:15000,position:"absolute",top:0,left:0,width:"100%",height:"100%"}).appendTo("body").hide()}}function make_popupmenu(d,c){ensure_popup_helper();var a=$(d);var b=$("<ul id='"+d.attr("id")+"-menu'></ul>");$.each(c,function(g,f){if(f){$("<li/>").html(g).click(f).appendTo(b)}else{$("<li class='head'/>").html(g).appendTo(b)}});var e=$("<div class='popmenu-wrapper'>");e.append(b).append("<div class='overlay-border'>").css("position","absolute").appendTo("body").hide();attach_popupmenu(d,e)}function attach_popupmenu(b,d){var a=function(){d.unbind().hide();$("#popup-helper").unbind("click.popupmenu").hide()};var c=function(g){var h=$(b).offset();$("#popup-helper").bind("click.popupmenu",a).show();d.click(a).css({left:0,top:-1000}).show();var f=g.pageX-d.width()/2;f=Math.min(f,$(document).scrollLeft()+$(window).width()-$(d).width()-20);f=Math.max(f,$(document).scrollLeft()+20);d.css({top:g.pageY-5,left:f});return false};$(b).click(c)}var array_length=function(a){if(a.length){return a.length}var b=0;for(element in a){b++}return b};var replace_dbkey_select=function(){var c=$("select[name=dbkey]");var d=c.attr("value");if(c.length!=0){var e=$("<input id='dbkey-input' type='text'></input>");e.attr("size",40);e.attr("name",c.attr("name"));e.click(function(){var g=$(this).attr("value");$(this).attr("value","Loading...");$(this).showAllInCache();$(this).attr("value",g);$(this).select()});var b=new Array();var a=new Object();c.children("option").each(function(){var h=$(this).text();var g=$(this).attr("value");if(g=="?"){return}b.push(h);a[h]=g;if(g==d){e.attr("value",h)}});if(e.attr("value")==""){e.attr("value","Click to Search or Select Build")}var f={selectFirst:false,autoFill:false,mustMatch:false,matchContains:true,max:1000,minChars:0,hideForLessThanMinChars:false};e.autocomplete(b,f);c.replaceWith(e);$("form").submit(function(){var i=$("#dbkey-input");if(i.length!=0){var h=i.attr("value");var g=a[h];if(g!=null&&g!=undefined){i.attr("value",g)}else{if(d!=""){i.attr("value",d)}else{i.attr("value","?")}}}})}};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -10,7 +10,13 @@
|
||||
|
||||
<%def name="javascripts()">
|
||||
${parent.javascripts()}
|
||||
${h.js( "jquery.autocomplete", "autocomplete_tagging" )}
|
||||
${h.js( "galaxy.base", "jquery.autocomplete", "autocomplete_tagging" )}
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function()
|
||||
{
|
||||
replace_dbkey_select('${data.dbkey}');
|
||||
});
|
||||
</script>
|
||||
</%def>
|
||||
|
||||
<%def name="datatype( dataset, datatypes )">
|
||||
|
||||
@@ -10,8 +10,8 @@ from galaxy.util.expressions import ExpressionContext
|
||||
<head>
|
||||
<title>Galaxy</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<link href="${h.url_for('/static/style/base.css')}" rel="stylesheet" type="text/css" />
|
||||
<script type='text/javascript' src="${h.url_for('/static/scripts/jquery.js')}"> </script>
|
||||
${h.css( "base", "autocomplete_tagging" )}
|
||||
${h.js( "jquery", "galaxy.base", "jquery.autocomplete" )}
|
||||
<script type="text/javascript">
|
||||
$( function() {
|
||||
$( "select[refresh_on_change='true']").change( function() {
|
||||
@@ -49,6 +49,12 @@ $( function() {
|
||||
$( "#tool_form" ).submit();
|
||||
}
|
||||
});
|
||||
|
||||
var cur_value = null;
|
||||
var select_elt = $('select[name=dbkey]');
|
||||
if (select_elt.length != 0)
|
||||
cur_value = select_elt.attr('last_selected_value');
|
||||
replace_dbkey_select(cur_value);
|
||||
});
|
||||
%if not add_frame.debug:
|
||||
if( window.name != "galaxy_main" ) {
|
||||
|
||||
Reference in New Issue
Block a user