diff options
author | Jose Antonio Marquez | 2012-05-16 15:42:37 -0700 |
---|---|---|
committer | Jose Antonio Marquez | 2012-05-16 15:42:37 -0700 |
commit | 857aafee732b6a85fa155ff4a05d1b8fde48f09d (patch) | |
tree | e06d330caee280aa05aec46391979e9abdcf974c /node_modules/montage/ui/autocomplete/autocomplete.reel | |
parent | 5cc5d29736d8bf253e3a168cdd6443e839ffb23c (diff) | |
parent | fd54dabad7cbc27a0efb0957155c00d578912909 (diff) | |
download | ninja-857aafee732b6a85fa155ff4a05d1b8fde48f09d.tar.gz |
Merge branch 'refs/heads/Ninja-DOM-Architecture' into Document
Diffstat (limited to 'node_modules/montage/ui/autocomplete/autocomplete.reel')
-rw-r--r-- | node_modules/montage/ui/autocomplete/autocomplete.reel/autocomplete.js | 126 |
1 files changed, 77 insertions, 49 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, { | |||
54 | value: null | 54 | value: null |
55 | }, | 55 | }, |
56 | 56 | ||
57 | /** | ||
58 | * If the delegate returns Objects, this property can be used to derive the | ||
59 | * display string for an object. If this property is not provided, the results | ||
60 | * provided by the delegate are assumed to be String. | ||
61 | */ | ||
62 | textPropertyPath: { | ||
63 | value: null | ||
64 | }, | ||
65 | |||
57 | separator: { | 66 | separator: { |
58 | value: ',', | 67 | value: ',', |
59 | distinct: true | 68 | distinct: true |
@@ -112,42 +121,40 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, { | |||
112 | // get the entered text after the separator | 121 | // get the entered text after the separator |
113 | var value = this._value; | 122 | var value = this._value; |
114 | 123 | ||
124 | if(value) { | ||
125 | var arr = value.split(this.separator).map(function(item) { | ||
126 | return item.trim(); | ||
127 | }); | ||
128 | this.activeTokenIndex = this._findActiveTokenIndex(this.tokens, arr); | ||
129 | this._tokens = value.split(this.separator).map(function(item) { | ||
130 | return item.trim(); | ||
131 | }); | ||
132 | } else { | ||
133 | this.activeTokenIndex = 0; | ||
134 | this._tokens = []; | ||
135 | } | ||
115 | 136 | ||
116 | if(fromInput) { | 137 | if(fromInput) { |
117 | this._valueSyncedWithInputField = true; | 138 | this._valueSyncedWithInputField = true; |
118 | if(value) { | 139 | this.showPopup = false; |
119 | var arr = value.split(this.separator).map(function(item) { | 140 | if(this._tokens.length && this._tokens.length > 0) { |
120 | return item.trim(); | 141 | var searchTerm = this._tokens[this.activeTokenIndex]; |
121 | }); | 142 | searchTerm = searchTerm ? searchTerm.trim() : ''; |
122 | this.activeTokenIndex = this._findActiveTokenIndex(this.tokens, arr); | 143 | if(searchTerm.length >= this.minLength) { |
123 | this._tokens = value.split(this.separator).map(function(item) { | 144 | var self = this; |
124 | return item.trim(); | 145 | clearTimeout(this.delayTimer); |
125 | }); | 146 | this.delayTimer = setTimeout(function() { |
126 | if(this._tokens.length && this._tokens.length > 0) { | 147 | self.delayTimer = null; |
127 | var searchTerm = this._tokens[this.activeTokenIndex]; | 148 | if (logger.isDebug) { |
128 | searchTerm = searchTerm ? searchTerm.trim() : ''; | 149 | logger.debug('SEARCH for ', searchTerm); |
129 | if(searchTerm.length >= this.minLength) { | 150 | } |
130 | var self = this; | 151 | self.performSearch(searchTerm); |
131 | clearTimeout(this.delayTimer); | 152 | }, this.delay); |
132 | this.delayTimer = setTimeout(function() { | ||
133 | self.delayTimer = null; | ||
134 | if (logger.isDebug) { | ||
135 | logger.debug('SEARCH for ', searchTerm); | ||
136 | } | ||
137 | self.performSearch(searchTerm); | ||
138 | }, this.delay); | ||
139 | } else { | ||
140 | this.showPopup = false; | ||
141 | } | ||
142 | } else { | ||
143 | this.showPopup = false; | ||
144 | } | 153 | } |
145 | } | 154 | } |
155 | |||
146 | } else { | 156 | } else { |
147 | this.activeTokenIndex = 0; | ||
148 | this._tokens = []; | ||
149 | this.showPopup = false; | 157 | this.showPopup = false; |
150 | |||
151 | this._valueSyncedWithInputField = false; | 158 | this._valueSyncedWithInputField = false; |
152 | this.needsDraw = true; | 159 | this.needsDraw = true; |
153 | } | 160 | } |
@@ -239,11 +246,24 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, { | |||
239 | get: function() { | 246 | get: function() { |
240 | return this._suggestedValue; | 247 | return this._suggestedValue; |
241 | }, | 248 | }, |
242 | set: function(value) { | 249 | set: function(aValue) { |
243 | if(value) { | 250 | this._suggestedValue = aValue; |
244 | this._suggestedValue = value; | 251 | if(aValue) { |
245 | var arr = this.tokens; | 252 | |
246 | arr[this.activeTokenIndex] = this._suggestedValue; | 253 | var arr = this.tokens || []; |
254 | var token; | ||
255 | |||
256 | if(String.isString(aValue)) { | ||
257 | token = aValue; | ||
258 | } else { | ||
259 | if(this.textPropertyPath) { | ||
260 | token = aValue[this.textPropertyPath]; | ||
261 | } else { | ||
262 | token = ''; | ||
263 | } | ||
264 | } | ||
265 | |||
266 | arr[this.activeTokenIndex] = token; | ||
247 | this.tokens = arr; | 267 | this.tokens = arr; |
248 | this.showPopup = false; | 268 | this.showPopup = false; |
249 | } | 269 | } |
@@ -283,6 +303,7 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, { | |||
283 | if (logger.isDebug) { | 303 | if (logger.isDebug) { |
284 | logger.debug('got suggestions: ', value); | 304 | logger.debug('got suggestions: ', value); |
285 | } | 305 | } |
306 | |||
286 | this.loadingStatus = 'complete'; | 307 | this.loadingStatus = 'complete'; |
287 | this._suggestions = value; | 308 | this._suggestions = value; |
288 | this.showPopup = (value && value.length > 0); | 309 | this.showPopup = (value && value.length > 0); |
@@ -305,19 +326,12 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, { | |||
305 | enumerable: false, | 326 | enumerable: false, |
306 | value: function(searchTerm) { | 327 | value: function(searchTerm) { |
307 | if(this.delegate) { | 328 | if(this.delegate) { |
329 | this.resultsController.selectedIndexes = []; | ||
308 | // index on the popup | 330 | // index on the popup |
309 | this.activeItemIndex = 0; | 331 | this.activeItemIndex = 0; |
310 | this.loadingStatus = 'loading'; | 332 | this.loadingStatus = 'loading'; |
311 | //this.showPopup = true; | 333 | var delegateFn = this.callDelegateMethod('ShouldGetSuggestions', this, searchTerm); |
312 | // delegate must set the results on the AutoComplete | 334 | |
313 | var fn = this.identifier + 'ShouldGetSuggestions'; | ||
314 | if(typeof this.delegate[fn] === 'function') { | ||
315 | this.delegate[fn](this, searchTerm); | ||
316 | } else if(typeof this.delegate.shouldGetSuggestions === 'function') { | ||
317 | this.delegate.shouldGetSuggestions(this, searchTerm); | ||
318 | } else { | ||
319 | // error - d | ||
320 | } | ||
321 | } | 335 | } |
322 | } | 336 | } |
323 | }, | 337 | }, |
@@ -403,6 +417,11 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, { | |||
403 | boundObjectPropertyPath: "_activeIndexes", | 417 | boundObjectPropertyPath: "_activeIndexes", |
404 | oneway: true | 418 | oneway: true |
405 | }); | 419 | }); |
420 | Object.defineBinding(this.resultsList, "textPropertyPath", { | ||
421 | boundObject: this, | ||
422 | boundObjectPropertyPath: "textPropertyPath", | ||
423 | oneway: true | ||
424 | }); | ||
406 | 425 | ||
407 | var popup = this._getPopup(); | 426 | var popup = this._getPopup(); |
408 | } | 427 | } |
@@ -425,11 +444,18 @@ var Autocomplete = exports.Autocomplete = Montage.create(TextInput, { | |||
425 | 444 | ||
426 | if (!this._valueSyncedWithInputField) { | 445 | if (!this._valueSyncedWithInputField) { |
427 | this.value = this.tokens.join(this.separator); | 446 | this.value = this.tokens.join(this.separator); |
447 | if(this.value && this.value.charAt(this.value.length-1) != this.separator) { | ||
448 | this.value += this.separator; | ||
449 | } | ||
428 | this.element.value = this.value; | 450 | this.element.value = this.value; |
429 | this._valueSyncedWithInputField = true; | 451 | this._valueSyncedWithInputField = true; |
430 | } | 452 | } |
453 | var showPopup = this.showPopup; | ||
454 | if(this.value === '') { | ||
455 | showPopup = false; | ||
456 |