Permalink
Browse files

feat #985 MultiAutoComplete: public methods for highlighting

Close #985.
  • Loading branch information...
1 parent 94690a6 commit d31b18d16fb9d20413ebb1e8d702e68c82dd6582 smadapathi committed with jakub-g Jan 28, 2014
@@ -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 : {
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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;
}
}
});
@@ -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}
@@ -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 + "]");
}
}
@@ -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");
}
});
@@ -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();
+ }
+ }
+});

0 comments on commit d31b18d

Please sign in to comment.