feat #985 MultiAutoComplete: public methods for highlighting

Close #985.

src/aria/css/atskin.js

@@ -1339,7 +1339,12 @@ Aria.classDefinition({
                     optionsBorderColor : "#AAAAAA",
                     closeSpriteURL : "atskin/sprites/closemark.gif",
                     closeSpriteHeight : 10,
-                    closeSpriteWidth : 9
+                    closeSpriteWidth : 9,
+                    optionsHighlightBackgroundColor : "#FFCC66",
+                    optionsHighlightColor : "#333",
+                    optionsHighlightBorderWidth : 1,
+                    optionsHighlightBorderColor : "#AAAAAA",
+                    closeHighlightSpriteURL : "atskin/sprites/closemark_highlight.gif"
                 }
             },
             ErrorList : {

src/aria/widgets/form/MultiAutoComplete.js

@@ -366,6 +366,91 @@ Aria.classDefinition({
          */
         getValidationPopupReference : function () {
             return this.getTextInputField();
+        },
+        /**
+         * To remove the highlight class from the suggestion(s)
+         * @param {Array|Integer} indices It can be an array of indices of suggestions or an index of suggestion. If
+         * nothing is provided it will remove the highlight class from all the highlighted suggestions. Indexing starts
+         * with 1.
+         * @public
+         */
+        removeHighlight : function (indices) {
+            var suggestionContainer = this._textInputField.parentNode;
+            var typeUtil = aria.utils.Type;
+            if (typeof indices === "undefined") {
+                indices = this.getHighlight();
+            }
+            if (typeUtil.isArray(indices)) {
+                for (var k = 0; k < indices.length; k++) {
+                    var suggestionNode = suggestionContainer.children[indices[k] - 1];
+                    if (suggestionNode) {
+                        this._removeClass(suggestionNode, 'highlight');
+                    }
+                }
+            } else {
+                this.removeHighlight([indices]);
+            }
+        },
+        /**
+         * To remove class from DomElement
+         * @param {HTMLElement} suggestionNode
+         * @param {String} className
+         * @protected
+         */
+        _removeClass : function (suggestionNode, className) {
+            var suggestionNodeClassList = new aria.utils.ClassList(suggestionNode);
+            suggestionNodeClassList.remove(className);
+            suggestionNodeClassList.$dispose();
+        },
+
+        /**
+         * To add the highlight class for the suggestion(s)
+         * @param {Array|Integer} indices It can be an array of indices of suggestions or an index of suggestion to be
+         * highlighted. Indexing starts with 1.
+         * @public
+         */
+        addHighlight : function (indices) {
+            var suggestionContainer = this._textInputField.parentNode;
+            var typeUtil = aria.utils.Type;
+            if (typeUtil.isArray(indices)) {
+                for (var k = 0; k < indices.length; k++) {
+                    var suggestionNode = suggestionContainer.children[indices[k] - 1];
+                    if (suggestionNode) {
+                        this._addClass(suggestionNode, 'highlight');
+                    }
+                }
+            } else {
+                this.addHighlight([indices]);
+            }
+        },
+        /**
+         * To add class for DomElement
+         * @param {HTMLElement} suggestionNode
+         * @param {String} className
+         * @protected
+         */
+        _addClass : function (suggestionNode, className) {
+            var suggestionNodeClassList = new aria.utils.ClassList(suggestionNode);
+            suggestionNodeClassList.add(className);
+            suggestionNodeClassList.$dispose();
+        },
+        /**
+         * Returns an array of indices of suggestions which have highlight class.
+         * @public
+         * @return {Array}
+         */
+        getHighlight : function () {
+            var suggestionContainer = this._textInputField.parentNode;
+            var highlightedArray = [];
+            for (var i = 0; i < suggestionContainer.children.length - 1; i++) {
+                var suggestionNode = suggestionContainer.children[i];
+                var suggestionNodeClassList = new aria.utils.ClassList(suggestionNode);
+                if (suggestionNodeClassList.contains("highlight")) {
+                    highlightedArray.push(i + 1);
+                }
+                suggestionNodeClassList.$dispose();
+            }
+            return highlightedArray;
         }
     }
 });

src/aria/widgets/form/MultiAutoCompleteStyle.tpl.css

@@ -18,57 +18,82 @@
     $extends : "aria.widgets.form.TextInputStyle"
 }}
     {var skinnableClassName="MultiAutoComplete"/}
-     {macro main()}
- 		.xMultiAutoComplete_list{
+
+    {macro main()}
+        .xMultiAutoComplete_list{
             position:relative;
             overflow:hidden;
         }
         .xMultiAutoComplete_list input{
- 			margin-top:2px;
- 			min-width:40px;
- 			vertical-align:middle !important;
- 			width:40px;
+            margin-top:2px;
+            min-width:40px;
+            vertical-align:middle !important;
+            width:40px;
         }
+        {call startLooping()/}
+    {/macro}
 
-	 {call startLooping()/}
- 	{/macro}
     {macro writeSkinClass(info)}
-         {var skinClassName=info.skinClassName/}
-         {var skinClass=info.skinClass/}
+        {var skinClassName=info.skinClassName/}
+        {var skinClass=info.skinClass/}
 
-       .xMultiAutoComplete_${skinClassName}_options{
-        	display:inline-block;
-        	position:relative;
-        	border: ${skinClass.optionsBorderWidth}px solid ${skinClass.optionsBorderColor};
-        	background-color: ${skinClass.optionsBackgroundColor};
-        	color:${skinClass.optionsColor};
-        	border-radius:3px;
-        	margin:2px;
+        .xMultiAutoComplete_${skinClassName}_options{
+            display:inline-block;
+            position:relative;
+            border: ${skinClass.optionsBorderWidth}px solid ${skinClass.optionsBorderColor};
+            background-color: ${skinClass.optionsBackgroundColor};
+            color:${skinClass.optionsColor};
+            border-radius:3px;
+            margin:2px;
         }
-
-
         .xMultiAutoComplete_${skinClassName}_options a{
-        	height:${skinClass.closeSpriteHeight}px;
-        	width:${skinClass.closeSpriteWidth}px;
-        	display:inline-block;
-        	padding-left:2px;
-        	{call background(skinClass.optionsBackgroundColor,skinClass.closeSpriteURL,"no-repeat -5px -25px")/}
+            height:${skinClass.closeSpriteHeight}px;
+            width:${skinClass.closeSpriteWidth}px;
+            display:inline-block;
+            padding-left:2px;
+            {call background(skinClass.optionsBackgroundColor, skinClass.closeSpriteURL, "no-repeat -5px -25px")/}
         }
 
         .xMultiAutoComplete_${skinClassName}_options span{
-        	margin:2px 5px;
-        	display:inline-block;
-        	cursor:pointer;
+            margin:2px 5px;
+            display:inline-block;
+            cursor:pointer;
         }
         .xMultiAutoComplete_${skinClassName}_options span.ellipsisClass{
-        	white-space:nowrap;
-			overflow:hidden;
-			text-overflow:ellipsis;
-			vertical-align:middle;
-			line-height:18px;
+            white-space:nowrap;
+            overflow:hidden;
+            text-overflow:ellipsis;
+            vertical-align:middle;
+            line-height:18px;
+        }
+        .xMultiAutoComplete_${skinClassName}_options a:hover{
+            background-position: -5px -5px;
+        }
+        .xMultiAutoComplete_${skinClassName}_options.highlight{
+            border: ${skinClass.optionsHighlightBorderWidth}px solid ${skinClass.optionsHighlightBorderColor};
+            background-color: ${skinClass.optionsHighlightBackgroundColor};
+            color:${skinClass.optionsHighlightColor};
+        }
+
+        .xMultiAutoComplete_${skinClassName}_options.highlight a{
+            {call background(skinClass.optionsHighlightBackgroundColor, skinClass.closeHighlightSpriteURL, "no-repeat -5px -5px")/}
+        }
+
+        .xMultiAutoComplete_${skinClassName}_options.highlight a:hover{
+            background-position: -5px -25px;
+        }
+        .xMultiAutoComplete_${skinClassName}_options span{
+            margin:2px 5px;
+            display:inline-block;
+            cursor:pointer;
         }
-         .xMultiAutoComplete_${skinClassName}_options a:hover{
-        	background-position: -5px -5px;
+        .xMultiAutoComplete_${skinClassName}_options span.ellipsisClass{
+            white-space:nowrap;
+            overflow:hidden;
+            text-overflow:ellipsis;
+            vertical-align:middle;
+            line-height:18px;
         }
+
      {/macro}
 {/CSSTemplate}

test/aria/widgets/form/autocomplete/multiautocomplete/BaseMultiAutoCompleteTestCase.js

@@ -130,6 +130,17 @@ Aria.classDefinition({
 
         _getSelectedItemElement : function (index) {
             return this._getContainer().childNodes[index];
+        },
+        _getWidgetInstance : function () {
+            return this.getWidgetInstance("MultiAutoId");
+        },
+        checkHighlightedElementsIndices : function (expectedHighlightedArray) {
+            var widgetInstance = this._getWidgetInstance();
+            var actualHighlightedArray = widgetInstance.getHighlight();
+            this.assertJsonEquals(expectedHighlightedArray, actualHighlightedArray, "Expected higlighted elements indices are ["
+                    + expectedHighlightedArray
+                    + "] but actual highlighted elements indices are ["
+                    + actualHighlightedArray + "]");
         }
 
     }

test/aria/widgets/form/autocomplete/multiautocomplete/MultiAutoCompleteTestSuite.js

@@ -29,6 +29,7 @@ Aria.classDefinition({
         this.addTests("test.aria.widgets.form.autocomplete.multiautocomplete.test7.MultiAutoError");
         this.addTests("test.aria.widgets.form.autocomplete.multiautocomplete.test8.MultiAutoMaxOptions");
         this.addTests("test.aria.widgets.form.autocomplete.multiautocomplete.test9.MultiAutoBackSpace");
+        this.addTests("test.aria.widgets.form.autocomplete.multiautocomplete.testHighlightMethods.MultiAutoHighlightTest");
         this.addTests("test.aria.widgets.form.autocomplete.multiautocomplete.duplicateValuesAfterError.DuplicateValuesAfterError");
     }
 });

test/aria/widgets/form/autocomplete/multiautocomplete/testHighlightMethods/MultiAutoHighlightTest.js

@@ -0,0 +1,61 @@
+/*
+ * Copyright 2013 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+Aria.classDefinition({
+    $classpath : "test.aria.widgets.form.autocomplete.multiautocomplete.testHighlightMethods.MultiAutoHighlightTest",
+    $extends : "test.aria.widgets.form.autocomplete.multiautocomplete.BaseMultiAutoCompleteTestCase",
+    $constructor : function () {
+
+        this.data = {
+            ac_airline_values : ["India", "Singapore", "America", "France"],
+            freeText : true
+        };
+
+        this.$BaseMultiAutoCompleteTestCase.constructor.call(this);
+
+    },
+    $prototype : {
+        /**
+         * This method is always the first entry point to a template test Start the test by focusing the first field
+         */
+        runTemplateTest : function () {
+            var widgetInstance = this.getWidgetInstance("MultiAutoId");
+            this.checkSelectedItems(4);
+
+            widgetInstance.addHighlight([1, 3, 4]);
+            this.checkHighlightedElementsIndices([1, 3, 4]);
+            // remove highlight with index
+            widgetInstance.removeHighlight(3);
+
+            // nothing should happen here
+            widgetInstance.removeHighlight(0);
+            this.checkHighlightedElementsIndices([1, 4]);
+            // add highlight with index
+            widgetInstance.addHighlight(2);
+            this.checkHighlightedElementsIndices([1, 2, 4]);
+
+            // remove highlight with array of indices
+            widgetInstance.removeHighlight([2, 4]);
+            this.checkHighlightedElementsIndices([1]);
+
+            // add highlight with array of indices
+            widgetInstance.addHighlight([2, 3, 4]);
+            // remove highlight with no argument
+            widgetInstance.removeHighlight();
+            this.checkHighlightedElementsIndices([]);
+            this.end();
+        }
+    }
+});