From 13ae16997d4bbca14e255d5989d1c44a76eac72c Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 16 May 2012 15:23:48 -0700 Subject: montage v.0.10 integration Signed-off-by: Valerio Virgillito --- .../autocomplete/autocomplete.reel/autocomplete.js | 126 +++++++++++++-------- .../autocomplete/result-item.reel/result-item.js | 33 ++++++ .../results-list.reel/results-list.html | 5 +- .../autocomplete/results-list.reel/results-list.js | 7 +- 4 files changed, 117 insertions(+), 54 deletions(-) create mode 100644 node_modules/montage/ui/autocomplete/result-item.reel/result-item.js (limited to 'node_modules/montage/ui/autocomplete') 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 === '') { + showPopup = false; + } - if(this.showPopup) { + if(showPopup) { this.popup.show(); // reset active index this.activeItemIndex = 0; @@ -454,7 +480,7 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, { switch(code) { case KEY_DOWN: - if(popup.displayed == false) { + if(!popup.displayed) { popup.show(); this.activeItemIndex = 0; } else { @@ -470,7 +496,7 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, { break; case KEY_UP: - if(popup.displayed == true) { + if(popup.displayed === true) { if(this.activeItemIndex > 0) { this.activeItemIndex --; } else { @@ -481,10 +507,12 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, { break; case KEY_ENTER: - if(popup.displayed == true) { + if(popup.displayed === true) { this.resultsController.selectedIndexes = [this.activeItemIndex]; - //this.selectSuggestedValue(); + e.preventDefault(); // select the currently active item in the results list + } else { + this.suggestedValue = this.tokens[this.tokens.length-1]; } break; diff --git a/node_modules/montage/ui/autocomplete/result-item.reel/result-item.js b/node_modules/montage/ui/autocomplete/result-item.reel/result-item.js new file mode 100644 index 00000000..61b71afa --- /dev/null +++ b/node_modules/montage/ui/autocomplete/result-item.reel/result-item.js @@ -0,0 +1,33 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ +var Montage = require("montage").Montage, + Component = require("ui/component").Component, + DynamicText = require("ui/dynamic-text.reel").DynamicText; + +exports.ResultItem = Montage.create(DynamicText, { + + textPropertyPath: {value: null}, + + _object: {value: null}, + object: { + get: function() { + return this._object; + }, + set: function(aValue) { + if(aValue) { + this._object = aValue; + } + if(this._object) { + if(this.textPropertyPath) { + this.value = this._object[this.textPropertyPath]; + } else { + this.value = this._object; + } + } + } + } + +}); diff --git a/node_modules/montage/ui/autocomplete/results-list.reel/results-list.html b/node_modules/montage/ui/autocomplete/results-list.reel/results-list.html index 73612736..2f904d62 100644 --- a/node_modules/montage/ui/autocomplete/results-list.reel/results-list.html +++ b/node_modules/montage/ui/autocomplete/results-list.reel/results-list.html @@ -32,12 +32,13 @@ }, "resultItem": { - "prototype": "montage/ui/dynamic-text.reel", + "prototype": "montage/ui/autocomplete/result-item.reel", "properties": { "element": {"#": "result-item"} }, "bindings": { - "value": {"<-": "@repetition1.objectAtCurrentIteration"} + "textPropertyPath": {"<-": "@owner.textPropertyPath"}, + "object": {"<-": "@repetition1.objectAtCurrentIteration"} } }, diff --git a/node_modules/montage/ui/autocomplete/results-list.reel/results-list.js b/node_modules/montage/ui/autocomplete/results-list.reel/results-list.js index 795e74e0..0950314d 100644 --- a/node_modules/montage/ui/autocomplete/results-list.reel/results-list.js +++ b/node_modules/montage/ui/autocomplete/results-list.reel/results-list.js @@ -7,10 +7,11 @@ var Montage = require("montage").Montage, Component = require("ui/component").Component; exports.ResultsList = Montage.create(Component, { - + + textPropertyPath: {value: null}, + // contentController -> this.repetition.contentController contentController: {value: null}, - - activeIndexes: {value: null} + activeIndexes: {value: null} }); -- cgit v1.2.3