Bug 436215 - Create a reusable combo text input box componentorigin/searchUI_components

- Replaced file name patterns input field with an instance of ComboTextInput which will remember recent entries
- Added docs to ComboTextInput.js

4 files changed, 103 insertions, 48 deletions

diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/globalSearch/advSearchOptContainer.js b/bundles/org.eclipse.orion.client.ui/web/orion/globalSearch/advSearchOptContainer.js
index e7db79e..ee8f319 100644
--- a/bundles/org.eclipse.orion.client.ui/web/orion/globalSearch/advSearchOptContainer.js
+++ b/bundles/org.eclipse.orion.client.ui/web/orion/globalSearch/advSearchOptContainer.js
@@ -60,7 +60,7 @@ define([
 				resource = resource.concat(searchLocation);
 			}, this);
 			
-			var fileNamePatternsArray = mSearchUtils.getFileNamePatternsArray(this._fileNamePatternsInput.value);
+			var fileNamePatternsArray = mSearchUtils.getFileNamePatternsArray(this._fileNamePatternsBox.getTextInputValue());
 			var replaceValue = this._replaceBox.getTextInputValue() || undefined;
 			
 			return {keyword: this._searchBox.getTextInputValue(),
@@ -85,11 +85,13 @@ define([
 			if(!this._init || !this._searchParams){
 				return;
 			}
-			this._searchBox.setTextInputValue(this._searchParams.keyword || "");
-			this._replaceBox.setTextInputValue(this._searchParams.replace || "");
+			this._searchBox.setTextInputValue(this._searchParams.keyword || ""); //$NON-NLS-0$
+			this._replaceBox.setTextInputValue(this._searchParams.replace || ""); //$NON-NLS-0$
 			this._caseSensitiveCB.checked = this._searchParams.caseSensitive;
 			this._regExCB.checked = this._searchParams.regEx;
-			this._fileNamePatternsInput.value = this._searchParams.fileNamePatterns ? this._searchParams.fileNamePatterns.join(", ") : "";
+			
+			var fileNamePatternsInputValue = this._searchParams.fileNamePatterns ? this._searchParams.fileNamePatterns.join(", ") : ""; //$NON-NLS-1$ //$NON-NLS-0$
+			this._fileNamePatternsBox.setTextInputValue(fileNamePatternsInputValue);
 			
 			if (undefined !== this._searchParams.replace) {
 				this._showReplaceField();
@@ -118,6 +120,7 @@ define([
 			var options = this.getOptions();
 			options.replace = null;
 			this._searchBox.addTextInputValueToRecentEntries();
+			this._fileNamePatternsBox.addTextInputValueToRecentEntries();
 			mSearchUtils.doSearch(this._searcher, this._serviceRegistry, options.keyword, options);
 		},
 		
@@ -125,6 +128,7 @@ define([
 			var options = this.getOptions();
 			this._searchBox.addTextInputValueToRecentEntries();
 			this._replaceBox.addTextInputValueToRecentEntries();
+			this._fileNamePatternsBox.addTextInputValueToRecentEntries();
 			if(!options.replace){
 				options.replace = "";
 			}
@@ -171,11 +175,11 @@ define([
 			var searchBoxParentNode = lib.$(".searchMainOptionBlock", this._parentDiv);
 			
 			this._searchBox = new ComboTextInput({
-				id: "advSearchInput",
+				id: "advSearchInput", //$NON-NLS-0$
 				insertBeforeNode: searchBoxParentNode.firstElementChild,
 				parentNode: searchBoxParentNode,
 				hasButton: true,
-				buttonText: messages["Search"],
+				buttonText: messages["Search"], //$NON-NLS-0$
 				buttonClickListener: this._submitSearch.bind(this),
 				hasInputCompletion: true,
 				serviceRegistry: this._serviceRegistry,
@@ -233,12 +237,43 @@ define([
 			this._replaceWrapper.style.width = this._replaceBox.getDomNode().scrollWidth + 8 + "px"; //$NON-NLS-0$
 	    },
 	    
+	    _initFileNamePatternsBox: function() {
+			this._fileNamePatternsHint = document.getElementById("fileNamePatternsHint"); //$NON-NLS-0$
+			
+			this._fileNamePatternsBox = new ComboTextInput({
+				id: "fileNamePatternsInput", //$NON-NLS-0$
+				insertBeforeNode: this._fileNamePatternsHint,
+				parentNode: this._fileNamePatternsHint.parentNode,
+				hasButton: false,
+				hasInputCompletion: true,
+				serviceRegistry: this._serviceRegistry
+			});
+			
+			this._fileNamePatternsTextInput = this._fileNamePatternsBox.getTextInputNode();
+			this._fileNamePatternsTextInput.classList.add("fileNamePatternsTextInput"); //$NON-NLS-0$
+			this._fileNamePatternsTextInput.placeholder = "*.*"; //$NON-NLS-0$
+			lib.empty(this._fileNamePatternsHint);
+			this._fileNamePatternsHint.appendChild(document.createTextNode(messages["(* = any string, ? = any character)"])); //$NON-NLS-0$
+			
+			this._fileNamePatternsTextInput.addEventListener("focus", function(){ //$NON-NLS-0$
+				this._fileNamePatternsHint.classList.add("fileNamePatternsHintVisible"); //$NON-NLS-0$
+			}.bind(this));
+			
+			this._fileNamePatternsTextInput.addEventListener("blur", function(){ //$NON-NLS-0$
+				var inputValue = this._fileNamePatternsBox.getTextInputValue();
+				if (inputValue) {
+					var correctedPatternArray = mSearchUtils.getFileNamePatternsArray(inputValue);
+					this._fileNamePatternsBox.setTextInputValue(correctedPatternArray.join(", ")); //$NON-NLS-0$
+				}
+				this._fileNamePatternsHint.classList.remove("fileNamePatternsHintVisible"); //$NON-NLS-0$
+			}.bind(this));
+	    },
+	    
 		_initControls: function(){
 			this._initSearchBox();
 			this._initReplaceBox();
+			this._initFileNamePatternsBox();
 			
-			this._fileNamePatternsInput = document.getElementById("fileNamePatternsInput"); //$NON-NLS-0$
-			this._fileNamePatternsHint = document.getElementById("fileNamePatternsHint"); //$NON-NLS-0$
 			this._caseSensitiveCB = document.getElementById("advSearchCaseSensitive"); //$NON-NLS-0$
 			this._regExCB = document.getElementById("advSearchRegEx"); //$NON-NLS-0$
 			this._toggleReplaceLink = document.getElementById("toggleReplaceLink"); //$NON-NLS-0$
@@ -250,24 +285,7 @@ define([
 	        	this._toggleReplaceLink.innerHTML = messages["Show Replace"]; //$NON-NLS-0$	
 	        }
 	        this._toggleReplaceLink.addEventListener("click", this._toggleReplaceFieldVisibility.bind(this)); //$NON-NLS-0$
-	        
-	        this._fileNamePatternsInput.placeholder = "*.*"; //$NON-NLS-0$
-			lib.empty(this._fileNamePatternsHint);
-			this._fileNamePatternsHint.appendChild(document.createTextNode(messages["(* = any string, ? = any character)"])); //$NON-NLS-0$
-			
-			this._fileNamePatternsInput.addEventListener("focus", function(){
-				this._fileNamePatternsHint.classList.add("fileNamePatternsHintVisible"); //$NON-NLS-0$
-			}.bind(this));
-			
-			this._fileNamePatternsInput.addEventListener("blur", function(){
-				var inputValue = this._fileNamePatternsInput.value;
-				if (inputValue) {
-					var correctedPatternArray = mSearchUtils.getFileNamePatternsArray(inputValue);
-					this._fileNamePatternsInput.value = correctedPatternArray.join(", ");
-				}
-				this._fileNamePatternsHint.classList.remove("fileNamePatternsHintVisible"); //$NON-NLS-0$
-			}.bind(this));
-			
+
 	        this._initSearchScope();
 		},
 		
diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/globalSearch/searchBuilder.html b/bundles/org.eclipse.orion.client.ui/web/orion/globalSearch/searchBuilder.html
index 3a776da..7c9433a 100644
--- a/bundles/org.eclipse.orion.client.ui/web/orion/globalSearch/searchBuilder.html
+++ b/bundles/org.eclipse.orion.client.ui/web/orion/globalSearch/searchBuilder.html
@@ -14,7 +14,7 @@
 	</div>

 	<div class="searchOptionBlock">

 		<div id="fileNamePatternsLabel" class="searchLabel"></div>

-		<input id="fileNamePatternsInput" type="text" class="fileNamePatternsInput">

+		<!-- file name patterns box gets inserted here -->

 		<span id="fileNamePatternsHint" class="fileNamePatternsHint"></span>

 		

 		<div id="searchScope" class="searchScope">

diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/widgets/input/ComboTextInput.js b/bundles/org.eclipse.orion.client.ui/web/orion/widgets/input/ComboTextInput.js
index f398ce9..f300232 100644
--- a/bundles/org.eclipse.orion.client.ui/web/orion/widgets/input/ComboTextInput.js
+++ b/bundles/org.eclipse.orion.client.ui/web/orion/widgets/input/ComboTextInput.js
@@ -20,26 +20,36 @@ define([
 ], function(objects, lib, ComboTextInputTemplate, messages, InputCompletion) {

 

 	/**

-	 * TODO add full docs

 	 * Creates a text input box combined with:

 	 * 1) [Optional] An attached button.

 	 * 2) [Optional] Input completion based on recent entries.

 	 * 

 	 * @param {Object} options Contains the set of properties that describe this ComboTextInput.

-	 * 		{Boolean} options.hasButton   true if this ComboTextInput should have an attached button, false otherwise

-	 * 		{Boolean} options.hasInputCompletion   true if this ComboTextInput should create and use input completion, false otherwise

+	 *	{String} options.id The id of this ComboTextInput's wrapping DOM node

+	 *	{Object} options.parentNode The DOM node that will act as the parent of this ComboTextInput's wrapping DOM node

+	 *	{Object} options.insertBeforeNode [Optional] The DOM node that this ComboTextInput's wrapper node should be inserted before in the parentNode

+	 *	{Boolean} options.hasButton true if this ComboTextInput should have an attached button, false otherwise

+	 *		[if options.hasButton === true]

+	 *		{String} options.buttonText The text to display on this ComboTextInput's button

+	 *		{Function} options.buttonClickListener The event listener function that should be called when the button is clicked

+	 *	{Boolean} options.hasInputCompletion true if this ComboTextInput should create and use input completion, false otherwise

+	 *		[if options.hasInputCompletion === true]

+	 *		{Object} options.serviceRegistry The service registry that the InputCompletion instance will use

+	 *		{Function} options.defaultRecentEntryProposalProvider [Optional] The default proposal provider that the input completion should use

+	 *		{Function} options.extendedRecentEntryProposalProvider [Optional] The extended proposal provider that the input completion should use

+	 *		{Function} options.onRecentEntryDelete [Optional] The function that should be called when the user attempts to delete an entry from the input completion list

 	 */

 	function ComboTextInput(options){

 		this._domNodeId = options.id;

 		this._parentNode = options.parentNode;

+		this._insertBeforeNode = options.insertBeforeNode;

+		

 		this._hasButton = options.hasButton;

 		this._buttonText = options.buttonText;

 		this._buttonClickListener = options.buttonClickListener;

-		

-		this._insertBeforeNode = options.insertBeforeNode;

-				

-		this._serviceRegistry = options.serviceRegistry;

+

 		this._hasInputCompletion = options.hasInputCompletion;

+		this._serviceRegistry = options.serviceRegistry;

 		this._defaultRecentEntryProposalProvider = options.defaultRecentEntryProposalProvider;

 		this._extendedRecentEntryProposalProvider = options.extendedRecentEntryProposalProvider;

 		this._onRecentEntryDelete = options.onRecentEntryDelete;

@@ -83,7 +93,7 @@ define([
 					this._comboTextInputButton.appendChild(document.createTextNode(this._buttonText));	

 				}

 				if (this._buttonClickListener) {

-					this._comboTextInputButton.addEventListener("click", function(event){

+					this._comboTextInputButton.addEventListener("click", function(event){ //$NON-NLS-0$

 						this._buttonClickListener(event);

 					}.bind(this)); //$NON-NLS-0$

 				}

@@ -147,37 +157,63 @@ define([
 				deleteToolTips: messages['Click or use delete key to delete the search term'] //$NON-NLS-0$

 			});

 

-			this._recentEntryButton.addEventListener("click", function(event){

+			this._recentEntryButton.addEventListener("click", function(event){ //$NON-NLS-0$

 				this._textInputNode.focus();

 				this._inputCompletion._proposeOn();

 				lib.stop(event);

 			}.bind(this));

 	    },

 		

+		/**

+		 * @returns {Object} The DOM node which wraps all the other nodes in this ComboTextInput

+		 */

 		getDomNode: function() {

 			return this._domNode;

 		},

 		

+		/**

+		 * @returns {Object} The DOM node of this ComboTextInput's <input type="text"> field

+		 */

 		getTextInputNode: function() {

 			return this._textInputNode;

 		},

 		

+		/**

+		 * @returns {String} The value of this ComboTextInput's <input type="text"> field

+		 */

 		getTextInputValue: function() {

 			return this._textInputNode.value;	

 		},

 		

+		/**

+		 * Sets the value of this ComboTextInput's <input type="text"> field

+		 * @param {String} value

+		 */

 		setTextInputValue: function(value) {

 			this._textInputNode.value = value;	

 		},

 

+		/**

+		 * @returns {Object} 	The DOM node of this ComboTextInput's <button> or null if 

+		 * 						options.hasButton was set to false.

+		 */

 		getButton: function() {

 			return this._comboTextInputButton;	

 		},

 		

+		/**

+		 * @returns {Object} 	The DOM node of this ComboTextInput's recent entry button 

+		 * 						or null if options.hasInputCompletion was set to false.

+		 */

 		getRecentEntryButton: function() {

 			return this._recentEntryButton;

 		},

 		

+		/**

+		 * Adds the value that is in the text input field to the

+		 * recent entries in localStorage. Empty and duplicate

+		 * values are ignored.

+		 */

 		addTextInputValueToRecentEntries: function() {

 			var value = this.getTextInputValue();

 			if (value) {

@@ -192,7 +228,7 @@ define([
 				if (-1 === indexOfElement) {

 					//no duplicate entry found, add new entry to array

 					recentEntryArray.push({

-						type: "proposal", 

+						type: "proposal", //$NON-NLS-0$

 						label: value, 

 						value: value

 					});

@@ -222,10 +258,20 @@ define([
 			return indexOfElement;

 		},

 		

+		/**

+		 * Makes this ComboTextInput's button visible.

+		 * Should only be called if this ComboTextInput was created

+		 * with options.hasButton set to true.

+		 */

 		showButton: function() {

 			this._comboTextInputButton.classList.remove("isHidden"); //$NON-NLS-0$

 		},

 		

+		/**

+		 * Hides this ComboTextInput's button.

+		 * Should only be called if this ComboTextInput was created

+		 * with options.hasButton set to true.

+		 */

 		hideButton: function() {

 			this._comboTextInputButton.classList.add("isHidden"); //$NON-NLS-0$

 		}

diff --git a/bundles/org.eclipse.orion.client.ui/web/search/search.css b/bundles/org.eclipse.orion.client.ui/web/search/search.css
index 1bb1475..66321a8 100644
--- a/bundles/org.eclipse.orion.client.ui/web/search/search.css
+++ b/bundles/org.eclipse.orion.client.ui/web/search/search.css
@@ -30,17 +30,8 @@
 	max-height: 0; /* for transition */
 }
 
-.fileNamePatternsInput {
-	border: 1px solid lightgray;
-	border-radius: 3px;
-	margin: 0;
-	padding: 4px;
-	width: calc(100% - 10px); /* -10px accounts for borders and padding */
-}
-
-.fileNamePatternsInput:focus {
-	border-color: #999;
-	outline: none;
+.fileNamePatternsTextInput {
+	min-width: 250px;
 }
 
 .fileNamePatternsHint {