mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
btn/esc to clear tool search (bb issue #774)
This commit is contained in:
Carl Eberhard
@@ -714,7 +714,8 @@ select,input,textarea{font:inherit;}
|
||||
textarea,input[type="text"],input[type="password"]{font-size:12px;line-height:16px;border:1px solid #999999;padding:3px;}
|
||||
.search-query{display:inline-block;padding:4px;font-size:12px;line-height:16px;color:#555555;border:1px solid #999999;padding-left:14px !important;padding-right:14px !important;margin-bottom:0;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;max-width:auto;}
|
||||
.search-query:focus{border-color:rgba(24, 132, 218, 0.8);-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);outline:0;outline:thin dotted \9;}
|
||||
.search-spinner{position:absolute;display:none;right:8px;top:10px;}
|
||||
.search-spinner{position:absolute;display:none;right:5px;top:9px;}
|
||||
.search-clear-btn{position:absolute;right:4px;top:8px;}
|
||||
.errormessagelarge,.warningmessagelarge,.donemessagelarge,.infomessagelarge{padding:8px 35px 8px 14px;margin-bottom:16px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#ffffcc;border:1px solid #ffdd33;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;color:#666600;min-height:36px;padding-left:52px;background-image:url(error_large.png);background-repeat:no-repeat;background-position:10px 10px;}
|
||||
.errormessagelarge{background-color:#ffcccc;border-color:#ff3355;color:#660000;padding-left:52px;}
|
||||
.warningmessagelarge{background-image:url(warn_large.png);border-color:#aaaa66;background-color:#ffffcc;}
|
||||
|
||||
@@ -270,11 +270,16 @@ var ToolPanelSection = BaseModel.extend({
|
||||
*/
|
||||
var ToolSearch = BaseModel.extend({
|
||||
defaults: {
|
||||
search_hint_string: "search tools",
|
||||
min_chars_for_search: 3,
|
||||
spinner_url: "",
|
||||
clear_btn_url: "",
|
||||
search_url: "",
|
||||
visible: true,
|
||||
query: "",
|
||||
results: null
|
||||
results: null,
|
||||
// ESC (27) will clear the input field and tool search filters
|
||||
clear_key: 27
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
@@ -288,7 +293,7 @@ var ToolSearch = BaseModel.extend({
|
||||
var query = this.attributes.query;
|
||||
|
||||
// If query is too short, do not search.
|
||||
if (query.length < 3) {
|
||||
if (query.length < this.attributes.min_chars_for_search) {
|
||||
this.set("results", null);
|
||||
return;
|
||||
}
|
||||
@@ -300,15 +305,23 @@ var ToolSearch = BaseModel.extend({
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
// Start a new ajax-request in X ms
|
||||
$("#search-clear-btn").hide();
|
||||
$("#search-spinner").show();
|
||||
var self = this;
|
||||
this.timer = setTimeout(function () {
|
||||
$.get(self.attributes.search_url, { query: q }, function (data) {
|
||||
self.set("results", data);
|
||||
$("#search-spinner").hide();
|
||||
$("#search-clear-btn").show();
|
||||
}, "json" );
|
||||
}, 200 );
|
||||
},
|
||||
|
||||
clear_search: function() {
|
||||
this.set("query", "");
|
||||
this.set("results", null);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
@@ -520,7 +533,8 @@ var ToolSearchView = Backbone.View.extend({
|
||||
|
||||
events: {
|
||||
'click': 'focus_and_select',
|
||||
'keyup :input': 'query_changed'
|
||||
'keyup :input': 'query_changed',
|
||||
'click #search-clear-btn': 'clear'
|
||||
},
|
||||
|
||||
render: function() {
|
||||
@@ -535,7 +549,20 @@ var ToolSearchView = Backbone.View.extend({
|
||||
this.$el.find(":input").focus().select();
|
||||
},
|
||||
|
||||
query_changed: function() {
|
||||
clear: function() {
|
||||
this.model.clear_search();
|
||||
this.$el.find(":input").val(this.model.attributes.search_hint_string);
|
||||
this.focus_and_select();
|
||||
return false;
|
||||
},
|
||||
|
||||
query_changed: function( evData ) {
|
||||
// check for the 'clear key' (ESC) first
|
||||
if( ( this.model.attributes.clear_key )
|
||||
&& ( this.model.attributes.clear_key == evData.which ) ){
|
||||
this.clear();
|
||||
return false;
|
||||
}
|
||||
this.model.set("query", this.$el.find(":input").val());
|
||||
}
|
||||
});
|
||||
|
||||
@@ -2,24 +2,21 @@
|
||||
var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
|
||||
templates['panel_section'] = template(function (Handlebars,depth0,helpers,partials,data) {
|
||||
helpers = helpers || Handlebars.helpers;
|
||||
var buffer = "", stack1, foundHelper, self=this, functionType="function", helperMissing=helpers.helperMissing, undef=void 0, escapeExpression=this.escapeExpression;
|
||||
var buffer = "", stack1, foundHelper, functionType="function", escapeExpression=this.escapeExpression;
|
||||
|
||||
|
||||
buffer += "<div class=\"toolSectionTitle\" id=\"title_";
|
||||
foundHelper = helpers.id;
|
||||
stack1 = foundHelper || depth0.id;
|
||||
if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
|
||||
else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "id", { hash: {} }); }
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.id; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
buffer += escapeExpression(stack1) + "\">\n <a href=\"javascript:void(0)\"><span>";
|
||||
foundHelper = helpers.name;
|
||||
stack1 = foundHelper || depth0.name;
|
||||
if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
|
||||
else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "name", { hash: {} }); }
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.name; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
buffer += escapeExpression(stack1) + "</span></a>\n</div>\n<div id=\"";
|
||||
foundHelper = helpers.id;
|
||||
stack1 = foundHelper || depth0.id;
|
||||
if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
|
||||
else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "id", { hash: {} }); }
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.id; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
buffer += escapeExpression(stack1) + "\" class=\"toolSectionBody\" style=\"display: none; \">\n <div class=\"toolSectionBg\"></div>\n<div>";
|
||||
return buffer;});
|
||||
})();
|
||||
@@ -2,60 +2,47 @@
|
||||
var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
|
||||
templates['tool_form'] = template(function (Handlebars,depth0,helpers,partials,data) {
|
||||
helpers = helpers || Handlebars.helpers;
|
||||
var buffer = "", stack1, stack2, foundHelper, tmp1, self=this, functionType="function", helperMissing=helpers.helperMissing, undef=void 0, escapeExpression=this.escapeExpression;
|
||||
var buffer = "", stack1, foundHelper, functionType="function", escapeExpression=this.escapeExpression, self=this;
|
||||
|
||||
function program1(depth0,data) {
|
||||
|
||||
var buffer = "", stack1;
|
||||
var buffer = "", stack1, foundHelper;
|
||||
buffer += "\n <div class=\"form-row\">\n <label for=\"";
|
||||
foundHelper = helpers.name;
|
||||
stack1 = foundHelper || depth0.name;
|
||||
if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
|
||||
else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "name", { hash: {} }); }
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.name; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
buffer += escapeExpression(stack1) + "\">";
|
||||
foundHelper = helpers.label;
|
||||
stack1 = foundHelper || depth0.label;
|
||||
if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
|
||||
else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "label", { hash: {} }); }
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.label; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
buffer += escapeExpression(stack1) + ":</label>\n <div class=\"form-row-input\">\n ";
|
||||
foundHelper = helpers.html;
|
||||
stack1 = foundHelper || depth0.html;
|
||||
if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
|
||||
else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "html", { hash: {} }); }
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.html; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
if(stack1 || stack1 === 0) { buffer += stack1; }
|
||||
buffer += "\n </div>\n <div class=\"toolParamHelp\" style=\"clear: both;\">\n ";
|
||||
foundHelper = helpers.help;
|
||||
stack1 = foundHelper || depth0.help;
|
||||
if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
|
||||
else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "help", { hash: {} }); }
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.help; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
buffer += escapeExpression(stack1) + "\n </div>\n <div style=\"clear: both;\"></div>\n </div>\n ";
|
||||
return buffer;}
|
||||
|
||||
buffer += "<div class=\"toolFormTitle\">";
|
||||
foundHelper = helpers.name;
|
||||
stack1 = foundHelper || depth0.name;
|
||||
if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
|
||||
else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "name", { hash: {} }); }
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.name; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
buffer += escapeExpression(stack1) + " (version ";
|
||||
foundHelper = helpers.version;
|
||||
stack1 = foundHelper || depth0.version;
|
||||
if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
|
||||
else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "version", { hash: {} }); }
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.version; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
buffer += escapeExpression(stack1) + ")</div>\n <div class=\"toolFormBody\">\n ";
|
||||
foundHelper = helpers.inputs;
|
||||
stack1 = foundHelper || depth0.inputs;
|
||||
stack2 = helpers.each;
|
||||
tmp1 = self.program(1, program1, data);
|
||||
tmp1.hash = {};
|
||||
tmp1.fn = tmp1;
|
||||
tmp1.inverse = self.noop;
|
||||
stack1 = stack2.call(depth0, stack1, tmp1);
|
||||
stack1 = depth0.inputs;
|
||||
stack1 = helpers.each.call(depth0, stack1, {hash:{},inverse:self.noop,fn:self.program(1, program1, data)});
|
||||
if(stack1 || stack1 === 0) { buffer += stack1; }
|
||||
buffer += "\n </div>\n <div class=\"form-row form-actions\">\n <input type=\"submit\" class=\"btn btn-primary\" name=\"runtool_btn\" value=\"Execute\">\n</div>\n<div class=\"toolHelp\">\n <div class=\"toolHelpBody\">";
|
||||
foundHelper = helpers.help;
|
||||
stack1 = foundHelper || depth0.help;
|
||||
if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
|
||||
else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "help", { hash: {} }); }
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.help; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
buffer += escapeExpression(stack1) + "</div>\n</div>";
|
||||
return buffer;});
|
||||
})();
|
||||
@@ -2,39 +2,33 @@
|
||||
var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
|
||||
templates['tool_link'] = template(function (Handlebars,depth0,helpers,partials,data) {
|
||||
helpers = helpers || Handlebars.helpers;
|
||||
var buffer = "", stack1, foundHelper, self=this, functionType="function", helperMissing=helpers.helperMissing, undef=void 0, escapeExpression=this.escapeExpression;
|
||||
var buffer = "", stack1, foundHelper, functionType="function", escapeExpression=this.escapeExpression;
|
||||
|
||||
|
||||
buffer += "<a class=\"";
|
||||
foundHelper = helpers.id;
|
||||
stack1 = foundHelper || depth0.id;
|
||||
if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
|
||||
else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "id", { hash: {} }); }
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.id; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
buffer += escapeExpression(stack1) + " tool-link\" href=\"";
|
||||
foundHelper = helpers.link;
|
||||
stack1 = foundHelper || depth0.link;
|
||||
if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
|
||||
else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "link", { hash: {} }); }
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.link; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
buffer += escapeExpression(stack1) + "\" target=\"";
|
||||
foundHelper = helpers.target;
|
||||
stack1 = foundHelper || depth0.target;
|
||||
if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
|
||||
else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "target", { hash: {} }); }
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.target; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
buffer += escapeExpression(stack1) + "\" minsizehint=\"";
|
||||
foundHelper = helpers.min_width;
|
||||
stack1 = foundHelper || depth0.min_width;
|
||||
if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
|
||||
else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "min_width", { hash: {} }); }
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.min_width; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
buffer += escapeExpression(stack1) + "\">";
|
||||
foundHelper = helpers.name;
|
||||
stack1 = foundHelper || depth0.name;
|
||||
if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
|
||||
else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "name", { hash: {} }); }
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.name; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
buffer += escapeExpression(stack1) + "</a> ";
|
||||
foundHelper = helpers.description;
|
||||
stack1 = foundHelper || depth0.description;
|
||||
if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
|
||||
else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "description", { hash: {} }); }
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.description; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
buffer += escapeExpression(stack1);
|
||||
return buffer;});
|
||||
})();
|
||||
@@ -2,14 +2,21 @@
|
||||
var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
|
||||
templates['tool_search'] = template(function (Handlebars,depth0,helpers,partials,data) {
|
||||
helpers = helpers || Handlebars.helpers;
|
||||
var buffer = "", stack1, foundHelper, self=this, functionType="function", helperMissing=helpers.helperMissing, undef=void 0, escapeExpression=this.escapeExpression;
|
||||
var buffer = "", stack1, foundHelper, functionType="function", escapeExpression=this.escapeExpression;
|
||||
|
||||
|
||||
buffer += "<input type=\"text\" name=\"query\" value=\"search tools\" id=\"tool-search-query\" autocomplete=\"off\" class=\"search-query parent-width\" />\n<img src=\"";
|
||||
buffer += "<input type=\"text\" name=\"query\" value=\"";
|
||||
foundHelper = helpers.search_hint_string;
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.search_hint_string; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
buffer += escapeExpression(stack1) + "\" id=\"tool-search-query\" autocomplete=\"off\" class=\"search-query parent-width\" />\n<img src=\"";
|
||||
foundHelper = helpers.clear_btn_url;
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.clear_btn_url; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
buffer += escapeExpression(stack1) + "\" id=\"search-clear-btn\" class=\"search-clear-btn\"/>\n<img src=\"";
|
||||
foundHelper = helpers.spinner_url;
|
||||
stack1 = foundHelper || depth0.spinner_url;
|
||||
if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
|
||||
else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "spinner_url", { hash: {} }); }
|
||||
if (foundHelper) { stack1 = foundHelper.call(depth0, {hash:{}}); }
|
||||
else { stack1 = depth0.spinner_url; stack1 = typeof stack1 === functionType ? stack1() : stack1; }
|
||||
buffer += escapeExpression(stack1) + "\" id=\"search-spinner\" class=\"search-spinner\"/>\n";
|
||||
return buffer;});
|
||||
})();
|
||||
@@ -1,2 +1,3 @@
|
||||
<input type="text" name="query" value="search tools" id="tool-search-query" autocomplete="off" class="search-query parent-width" />
|
||||
<input type="text" name="query" value="{{search_hint_string}}" id="tool-search-query" autocomplete="off" class="search-query parent-width" />
|
||||
<img src="{{clear_btn_url}}" id="search-clear-btn" class="search-clear-btn"/>
|
||||
<img src="{{spinner_url}}" id="search-spinner" class="search-spinner"/>
|
||||
|
||||
@@ -34,9 +34,10 @@
|
||||
$(function() {
|
||||
// Set up search.
|
||||
tool_search = new ToolSearch( {spinner_url: "${h.url_for('/static/images/loading_small_white_bg.gif')}",
|
||||
search_url: "${h.url_for( controller='root', action='tool_search' )}",
|
||||
clear_btn_url: "${h.url_for('/static/images/fugue/cross-circle-bw.png')}",
|
||||
search_url: "${h.url_for( controller='root', action='tool_search' )}",
|
||||
hidden: ${tool_search_hidden} } );
|
||||
|
||||
|
||||
// Set up tool panel.
|
||||
tool_panel = new ToolPanel( { tool_search: tool_search } );
|
||||
tool_panel.reset( tool_panel.parse( ${h.to_json_string( dictified_panel )} ) );
|
||||
|
||||
Reference in New Issue
Block a user