details: http://www.bx.psu.edu/hg/galaxy/rev/59645595001f changeset: 3608:59645595001f user: jeremy goecks <jeremy.goecks@emory.edu> date: Fri Apr 02 17:29:15 2010 -0400 description: Generalize the dbkey text + autocomplete feature to work with any select box and replace all select boxes with >20 options--mostly the dbkey and dataset format selects--with text + autocomplete inputs. Also add icon to text + autocomplete inputs so that it's clearer that they're text + autocomplete, not just text. diffstat: static/images/fugue/plus-white.png | 0 static/june_2007_style/base.css.tmpl | 6 + static/june_2007_style/blue/base.css | 2 +- static/scripts/galaxy.base.js | 87 +++++++++++++++----------- static/scripts/packed/galaxy.base.js | 2 +- templates/dataset/edit_attributes.mako | 6 - templates/library/common/common.mako | 2 +- templates/library/common/ldda_edit_info.mako | 7 -- templates/tool_form.mako | 5 +- 9 files changed, 60 insertions(+), 57 deletions(-) diffs (227 lines): diff -r 2b6910fd7d93 -r 59645595001f static/images/fugue/plus-white.png Binary file static/images/fugue/plus-white.png has changed diff -r 2b6910fd7d93 -r 59645595001f static/june_2007_style/base.css.tmpl --- a/static/june_2007_style/base.css.tmpl Fri Apr 02 16:48:35 2010 -0400 +++ b/static/june_2007_style/base.css.tmpl Fri Apr 02 17:29:15 2010 -0400 @@ -838,4 +838,10 @@ .editable-text:hover { cursor: text; border: dotted #999999 1px; +} + +.text-and-autocomplete-select { + background-image:url(/static/images/fugue/plus-white.png); + background-repeat: no-repeat; + background-position:top right; } \ No newline at end of file diff -r 2b6910fd7d93 -r 59645595001f static/june_2007_style/blue/base.css --- a/static/june_2007_style/blue/base.css Fri Apr 02 16:48:35 2010 -0400 +++ b/static/june_2007_style/blue/base.css Fri Apr 02 17:29:15 2010 -0400 @@ -146,4 +146,4 @@ .tipsy-west{background-position:left center;} .editable-text{cursor:pointer;} .editable-text:hover{cursor: text;border: dotted #999999 1px;} - +.text-and-autocomplete-select{background-image:url(/static/images/fugue/plus-white.png);background-repeat: no-repeat;background-position:top right;} diff -r 2b6910fd7d93 -r 59645595001f static/scripts/galaxy.base.js --- a/static/scripts/galaxy.base.js Fri Apr 02 16:48:35 2010 -0400 +++ b/static/scripts/galaxy.base.js Fri Apr 02 17:29:15 2010 -0400 @@ -1,3 +1,7 @@ +$(document).ready(function() { + replace_big_select_inputs(); +}); + $.fn.makeAbsolute = function(rebase) { return this.each(function() { var el = $(this); @@ -115,13 +119,21 @@ return count; } -// Replace dbkey select box with text input box & autocomplete. -function replace_dbkey_select() { - var select_elt = $('select[name=dbkey]'); - var start_value = select_elt.attr('value'); - if (select_elt.length !== 0) { +// Replace any select box with 20+ options with a text input box + autocomplete. +// TODO: make this work _well_ on pages with multiple forms; currently, value is reverted when any form is submitted - +// value should be reverted when only the form that element is in is submitted. +function replace_big_select_inputs() { + $('select').each( function() { + var select_elt = $(this); + // Skip if there are < 20 options. + if (select_elt.find('option').length < 20) + return; + + // Replace select with text + autocomplete. + var start_value = select_elt.attr('value'); + // Set up text input + autocomplete element. - var text_input_elt = $("<input id='dbkey-input' type='text'></input>"); + var text_input_elt = $("<input type='text' class='text-and-autocomplete-select'></input>"); text_input_elt.attr('size', 40); text_input_elt.attr('name', select_elt.attr('name')); text_input_elt.click( function() { @@ -133,61 +145,62 @@ $(this).select(); }); - // Get options for dbkey for autocomplete. - var dbkey_options = []; - var dbkey_mapping = {}; + // Get options for select for autocomplete. + var select_options = []; + var select_mapping = {}; 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. Mapping is (i) [from text to value] AND (ii) [from value to value]. This // enables a user to type the value directly rather than select the text that represents the value. - dbkey_options.push( text ); - dbkey_mapping[ text ] = value; - dbkey_mapping[ value ] = value; - + select_options.push( text ); + select_mapping[ text ] = value; + select_mapping[ value ] = value; + // If this is the start value, set value of input element. if ( value == start_value ) { text_input_elt.attr('value', text); } }); + + // Set initial text if it's empty. if ( text_input_elt.attr('value') == '' ) { - text_input_elt.attr('value', 'Click to Search or Select Build'); + text_input_elt.attr('value', 'Click to Search or Select'); } - + // 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); + text_input_elt.autocomplete(select_options, autocomplete_options); + + // Replace select with text input. + select_elt.replaceWith(text_input_elt); - // 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); + // Set trigger to replace text with value when element's form is submitted. If text doesn't correspond to value, default to start value. + text_input_elt.parents('form').submit( function() { + // Try to convert text to value. + var cur_value = text_input_elt.attr('value'); + var new_value = select_mapping[cur_value]; + if (new_value !== null && new_value !== undefined) { + text_input_elt.attr('value', new_value); + } + else { + // If there is a non-empty start value, use that; otherwise unknown. + if (start_value != "") { + text_input_elt.attr('value', start_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', '?'); - } + // This is needed to make the DB key work. + text_input_elt.attr('value', '?'); } } }); - } + }); } // Edit and save text asynchronously. diff -r 2b6910fd7d93 -r 59645595001f static/scripts/packed/galaxy.base.js --- a/static/scripts/packed/galaxy.base.js Fri Apr 02 16:48:35 2010 -0400 +++ b/static/scripts/packed/galaxy.base.js Fri Apr 02 17:29:15 2010 -0400 @@ -1,1 +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")}})};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 attach_popupmenu(b,d){var a=function(){d.unbind().hide();$("#popup-helper").unbind("click.popupmenu").hide()};var c=function(g){$("#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)}function make_popupmenu(c,b){ensure_popup_helper();var a=$("<ul id='"+c.attr("id"! )+"-menu'></ul>");$.each(b,function(f,e){if(e){$("<li/>").html(f).click(e).appendTo(a)}else{$("<li class='head'/>").html(f).appendTo(a)}});var d=$("<div class='popmenu-wrapper'>");d.append(a).append("<div class='overlay-border'>").css("position","absolute").appendTo("body").hide();attach_popupmenu(c,d)}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}else{if(e=="_top"){g=window.top}}g.location=d}}});var a=$("#"+$(this).attr("popupmenu"));make_popupmenu(a,c);$(this).remove();a.addClass("popup").show()})}function array_length(b){if(b.length){return b.length}var c=0;for(var a in b){c++}return c}function replace_dbkey_select(){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=[];var a={};c.children("option").each(function(){var h=$(this).text();var g=$(this).attr("value");if(g=="?"){return}b.push(h);a[h]=g;a[g]=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","?")}}}})}}function async_save_text(d,f,e,a,c,h,i,g,b){if(c===undefined){c=30}if(i===undefined){i=4}$("#"+d).live("click",function(){if($("#renaming-active").length>0){return}var l=$("#"+f),k=l.text(),j;if(h){j=$("<textarea></textarea>").attr({! rows:i,cols:c}).text(k)}else{j=$("<input type='text'></input>").attr({value:k,size:c})}j.attr("id","renaming-active");j.blur(function(){$(this).remove();l.show();if(b){b(j)}});j.keyup(function(n){if(n.keyCode===27){$(this).trigger("blur")}else{if(n.keyCode===13){var m={};m[a]=$(this).val();$(this).trigger("blur");$.ajax({url:e,data:m,error:function(){alert("Text editing for elt "+f+" failed")},success:function(o){l.text(o);if(b){b(j)}}})}}});if(g){g(j)}l.hide();j.insertAfter(l);j.focus();j.select();return})}$(document).ready(function(){$("a[confirm]").click(function(){return confirm($(this).attr("confirm"))});if($.fn.tipsy){$(".tooltip").tipsy({gravity:"s"})}make_popup_menus()}); \ No newline at end of file +$(document).ready(function(){replace_big_select_inputs()});$.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")}})};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 attach_popupmenu(b,d){var a=function(){d.unbind().hide();$("#popup-helper").unbind("click.popupmenu").hide()};var c=function(g){$("#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)}function make_popupmen! u(c,b){ensure_popup_helper();var a=$("<ul id='"+c.attr("id")+"-menu'></ul>");$.each(b,function(f,e){if(e){$("<li/>").html(f).click(e).appendTo(a)}else{$("<li class='head'/>").html(f).appendTo(a)}});var d=$("<div class='popmenu-wrapper'>");d.append(a).append("<div class='overlay-border'>").css("position","absolute").appendTo("body").hide();attach_popupmenu(c,d)}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}else{if(e=="_top"){g=window.top}}g.location=d}}});var a=$("#"+$(this).attr("popupmenu"));make_popupmenu(a,c);$(this).remove();a.addClass("popup").show()})}function array_length(b){if(b.length){return b.length}var c=0;for(var a in b){c++}return c}function replace_big_select_inputs(){$("select").each(function(){var a=$(this);if(a.find("optio! n").length<20){return}var b=a.attr("value");var c=$("<input type='text ' class='text-and-autocomplete-select'></input>");c.attr("size",40);c.attr("name",a.attr("name"));c.click(function(){var g=$(this).attr("value");$(this).attr("value","Loading...");$(this).showAllInCache();$(this).attr("value",g);$(this).select()});var f=[];var e={};a.children("option").each(function(){var h=$(this).text();var g=$(this).attr("value");if(g=="?"){return}f.push(h);e[h]=g;e[g]=g;if(g==b){c.attr("value",h)}});if(c.attr("value")==""){c.attr("value","Click to Search or Select")}var d={selectFirst:false,autoFill:false,mustMatch:false,matchContains:true,max:1000,minChars:0,hideForLessThanMinChars:false};c.autocomplete(f,d);a.replaceWith(c);c.parents("form").submit(function(){var h=c.attr("value");var g=e[h];if(g!==null&&g!==undefined){c.attr("value",g)}else{if(b!=""){c.attr("value",b)}else{c.attr("value","?")}}})})}function async_save_text(d,f,e,a,c,h,i,g,b){if(c===undefined){c=30}if(i===undefined){i=4}$("#"+d).live("click",function(){if($("#renaming-active").length>0! ){return}var l=$("#"+f),k=l.text(),j;if(h){j=$("<textarea></textarea>").attr({rows:i,cols:c}).text(k)}else{j=$("<input type='text'></input>").attr({value:k,size:c})}j.attr("id","renaming-active");j.blur(function(){$(this).remove();l.show();if(b){b(j)}});j.keyup(function(n){if(n.keyCode===27){$(this).trigger("blur")}else{if(n.keyCode===13){var m={};m[a]=$(this).val();$(this).trigger("blur");$.ajax({url:e,data:m,error:function(){alert("Text editing for elt "+f+" failed")},success:function(o){l.text(o);if(b){b(j)}}})}}});if(g){g(j)}l.hide();j.insertAfter(l);j.focus();j.select();return})}$(document).ready(function(){$("a[confirm]").click(function(){return confirm($(this).attr("confirm"))});if($.fn.tipsy){$(".tooltip").tipsy({gravity:"s"})}make_popup_menus()}); \ No newline at end of file diff -r 2b6910fd7d93 -r 59645595001f templates/dataset/edit_attributes.mako --- a/templates/dataset/edit_attributes.mako Fri Apr 02 16:48:35 2010 -0400 +++ b/templates/dataset/edit_attributes.mako Fri Apr 02 17:29:15 2010 -0400 @@ -10,12 +10,6 @@ <%def name="javascripts()"> ${parent.javascripts()} ${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 )"> diff -r 2b6910fd7d93 -r 59645595001f templates/library/common/common.mako --- a/templates/library/common/common.mako Fri Apr 02 16:48:35 2010 -0400 +++ b/templates/library/common/common.mako Fri Apr 02 17:29:15 2010 -0400 @@ -321,7 +321,7 @@ <script type="text/javascript"> // Replace dbkey select with search+select. jQuery(document).ready( function() { - replace_dbkey_select(); + replace_big_select_inputs(); }); </script> %elif upload_option == 'import_from_history': diff -r 2b6910fd7d93 -r 59645595001f templates/library/common/ldda_edit_info.mako --- a/templates/library/common/ldda_edit_info.mako Fri Apr 02 16:48:35 2010 -0400 +++ b/templates/library/common/ldda_edit_info.mako Fri Apr 02 17:29:15 2010 -0400 @@ -6,13 +6,6 @@ <%def name="javascripts()"> ${parent.javascripts()} ${h.js("jquery.autocomplete", "autocomplete_tagging" )} - ## Script to replace dbkey select with select+search. - <script type="text/javascript"> - // Replace dbkey select with search+select. - jQuery(document).ready( function() { - replace_dbkey_select(); - }); - </script> </%def> <%def name="stylesheets()"> diff -r 2b6910fd7d93 -r 59645595001f templates/tool_form.mako --- a/templates/tool_form.mako Fri Apr 02 16:48:35 2010 -0400 +++ b/templates/tool_form.mako Fri Apr 02 17:29:15 2010 -0400 @@ -48,10 +48,7 @@ } ); $( "#tool_form" ).submit(); } - }); - - // Replace dbkey select with search+select. - replace_dbkey_select(); + }); }); %if not add_frame.debug: if( window.name != "galaxy_main" ) {