montage v.0.10 integration

Signed-off-by: Valerio Virgillito <valerio@motorola.com>

4 files changed, 117 insertions, 54 deletions

diff --git a/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.js b/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.js
index 0ce1ab85..c9cbca74 100644
--- a/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.js
+++ b/node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.js
@@ -54,6 +54,15 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, {
         value: null
     },
 
+    /**
+    * If the delegate returns Objects, this property can be used to derive the
+    * display string for an object. If this property is not provided, the results
+    * provided by the delegate are assumed to be String.
+    */
+    textPropertyPath: {
+        value: null
+    },
+
     separator: {
         value: ',',
         distinct: true
@@ -112,42 +121,40 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, {
             // get the entered text after the separator
             var value = this._value;
 
+            if(value) {
+                var arr = value.split(this.separator).map(function(item) {
+                    return item.trim();
+                });
+                this.activeTokenIndex = this._findActiveTokenIndex(this.tokens, arr);
+                this._tokens = value.split(this.separator).map(function(item) {
+                    return item.trim();
+                });
+            } else {
+                this.activeTokenIndex = 0;
+                this._tokens = [];
+            }
 
             if(fromInput) {
                 this._valueSyncedWithInputField = true;
-                if(value) {
-                    var arr = value.split(this.separator).map(function(item) {
-                        return item.trim();
-                    });
-                    this.activeTokenIndex = this._findActiveTokenIndex(this.tokens, arr);
-                    this._tokens = value.split(this.separator).map(function(item) {
-                        return item.trim();
-                    });
-                    if(this._tokens.length && this._tokens.length > 0) {
-                        var searchTerm = this._tokens[this.activeTokenIndex];
-                        searchTerm = searchTerm ? searchTerm.trim() : '';
-                        if(searchTerm.length >= this.minLength) {
-                            var self = this;
-                            clearTimeout(this.delayTimer);
-                            this.delayTimer = setTimeout(function() {
-                                self.delayTimer = null;
-                                if (logger.isDebug) {
-                                    logger.debug('SEARCH for ', searchTerm);
-                                }
-                                self.performSearch(searchTerm);
-                            }, this.delay);
-                        } else {
-                            this.showPopup = false;
-                        }
-                    } else {
-                        this.showPopup = false;
+                this.showPopup = false;
+                if(this._tokens.length && this._tokens.length > 0) {
+                    var searchTerm = this._tokens[this.activeTokenIndex];
+                    searchTerm = searchTerm ? searchTerm.trim() : '';
+                    if(searchTerm.length >= this.minLength) {
+                        var self = this;
+                        clearTimeout(this.delayTimer);
+                        this.delayTimer = setTimeout(function() {
+                            self.delayTimer = null;
+                            if (logger.isDebug) {
+                                logger.debug('SEARCH for ', searchTerm);
+                            }
+                            self.performSearch(searchTerm);
+                        }, this.delay);
                     }
                 }
+
             } else {
-                this.activeTokenIndex = 0;
-                this._tokens = [];
                 this.showPopup = false;
-
                 this._valueSyncedWithInputField = false;
                 this.needsDraw = true;
             }
@@ -239,11 +246,24 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, {
         get: function() {
             return this._suggestedValue;
         },
-        set: function(value) {
-            if(value) {
-                this._suggestedValue = value;
-                var arr = this.tokens;
-                arr[this.activeTokenIndex] = this._suggestedValue;
+        set: function(aValue) {
+            this._suggestedValue = aValue;
+            if(aValue) {
+
+                var arr = this.tokens || [];
+                var token;
+
+                if(String.isString(aValue)) {
+                    token = aValue;
+                } else {
+                    if(this.textPropertyPath) {
+                        token = aValue[this.textPropertyPath];
+                    } else {
+                        token = '';
+                    }
+                }
+
+                arr[this.activeTokenIndex] = token;
                 this.tokens = arr;
                 this.showPopup = false;
             }
@@ -283,6 +303,7 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, {
             if (logger.isDebug) {
                 logger.debug('got suggestions: ', value);
             }
+
             this.loadingStatus = 'complete';
             this._suggestions = value;
             this.showPopup = (value && value.length > 0);
@@ -305,19 +326,12 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, {
         enumerable: false,
         value: function(searchTerm) {
             if(this.delegate) {
+                this.resultsController.selectedIndexes = [];
                 // index on the popup
                 this.activeItemIndex = 0;
                 this.loadingStatus = 'loading';
-                //this.showPopup = true;
-                // delegate must set the results on the AutoComplete
-                var fn = this.identifier + 'ShouldGetSuggestions';
-                if(typeof this.delegate[fn] === 'function') {
-                    this.delegate[fn](this, searchTerm);
-                } else if(typeof this.delegate.shouldGetSuggestions === 'function') {
-                    this.delegate.shouldGetSuggestions(this, searchTerm);
-                } else {
-                    // error - d
-                }
+                var delegateFn = this.callDelegateMethod('ShouldGetSuggestions', this, searchTerm);
+
             }
         }
     },
@@ -403,6 +417,11 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, {
                 boundObjectPropertyPath: "_activeIndexes",
                 oneway: true
             });
+            Object.defineBinding(this.resultsList, "textPropertyPath", {
+                boundObject: this,
+                boundObjectPropertyPath: "textPropertyPath",
+                oneway: true
+            });
 
             var popup = this._getPopup();
         }
@@ -425,11 +444,18 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, {
 
             if (!this._valueSyncedWithInputField) {
                 this.value = this.tokens.join(this.separator);
+                if(this.value && this.value.charAt(this.value.length-1) != this.separator) {
+                    this.value += this.separator;
+                }
                 this.element.value = this.value;
                 this._valueSyncedWithInputField = true;
             }
+            var showPopup = this.showPopup;
+            if(this.value === '') {