From 62b0725513e3a979be66a81089daf91e5d2de1b3 Mon Sep 17 00:00:00 2001 From: Carl Eberhard Date: Thu, 2 Aug 2012 12:21:49 -0400 Subject: [PATCH] btn/esc to clear tool search (bb issue #774) --- static/june_2007_style/blue/base.css | 3 +- static/scripts/mvc/tools.js | 35 +++++++++++-- .../templates/compiled/panel_section.js | 17 +++---- .../scripts/templates/compiled/tool_form.js | 49 +++++++------------ .../scripts/templates/compiled/tool_link.js | 32 +++++------- .../scripts/templates/compiled/tool_search.js | 17 +++++-- .../scripts/templates/tool_search.handlebars | 3 +- templates/root/tool_menu.mako | 5 +- 8 files changed, 88 insertions(+), 73 deletions(-) diff --git a/static/june_2007_style/blue/base.css b/static/june_2007_style/blue/base.css index bcb979d63c2..55fd1d2aff6 100644 --- a/static/june_2007_style/blue/base.css +++ b/static/june_2007_style/blue/base.css @@ -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;} diff --git a/static/scripts/mvc/tools.js b/static/scripts/mvc/tools.js index d0b29925511..65c53aa79ad 100644 --- a/static/scripts/mvc/tools.js +++ b/static/scripts/mvc/tools.js @@ -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()); } }); diff --git a/static/scripts/templates/compiled/panel_section.js b/static/scripts/templates/compiled/panel_section.js index cf814274098..d9eda221ea7 100644 --- a/static/scripts/templates/compiled/panel_section.js +++ b/static/scripts/templates/compiled/panel_section.js @@ -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 += "
\n "; 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) + "\n
\n
\n
\n
"; return buffer;}); })(); \ No newline at end of file diff --git a/static/scripts/templates/compiled/tool_form.js b/static/scripts/templates/compiled/tool_form.js index 4eaff78d922..1cb727df5b4 100644 --- a/static/scripts/templates/compiled/tool_form.js +++ b/static/scripts/templates/compiled/tool_form.js @@ -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
\n \n
\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
\n
\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
\n
\n
\n "; return buffer;} buffer += "
"; 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) + ")
\n
\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
\n
\n \n
\n
\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
"; return buffer;}); })(); \ No newline at end of file diff --git a/static/scripts/templates/compiled/tool_link.js b/static/scripts/templates/compiled/tool_link.js index 8b580b45046..dd857131d51 100644 --- a/static/scripts/templates/compiled/tool_link.js +++ b/static/scripts/templates/compiled/tool_link.js @@ -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 += ""; 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.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;}); })(); \ No newline at end of file diff --git a/static/scripts/templates/compiled/tool_search.js b/static/scripts/templates/compiled/tool_search.js index b8b64d17ef1..01255206f4c 100644 --- a/static/scripts/templates/compiled/tool_search.js +++ b/static/scripts/templates/compiled/tool_search.js @@ -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 += "\n\n\n\n"; return buffer;}); })(); \ No newline at end of file diff --git a/static/scripts/templates/tool_search.handlebars b/static/scripts/templates/tool_search.handlebars index 71ce5244fdb..611eba052ca 100644 --- a/static/scripts/templates/tool_search.handlebars +++ b/static/scripts/templates/tool_search.handlebars @@ -1,2 +1,3 @@ - + + diff --git a/templates/root/tool_menu.mako b/templates/root/tool_menu.mako index c3d2ee9f1a7..1b949818bff 100644 --- a/templates/root/tool_menu.mako +++ b/templates/root/tool_menu.mako @@ -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 )} ) );